chap 2a
Page 2: Contents
HTML Fundamentals
CSS
Web Design Principles
Advanced CSS: Layout and Responsive Web Page
Inline, Embedded, External Styles
Structural Elements
HTML Elements
HTML5 Elements
Page 3: HTML Fundamentals
Structural Elements, HTML Elements, HTML5 Elements
Online HTML Editor available at W3Schools HTML Editor
Page 4: What is HTML?
Definition: A set of markup symbols or codes placed in a file for display on a web browser page.
Standards are set by the World Wide Web Consortium (W3C).
Page 5: HTML Elements
Each markup code represents an HTML element with a specific purpose.
Most elements are coded as pairs: an opening tag and a closing tag.
Tags are enclosed in angle brackets, e.g.,
<tag>and</tag>.
Page 6: History of HTML
Developed by Tim Berners-Lee in 1990.
HTML4 is the oldest version still in use, characterized by loose syntax.
Page 7: What is HTML5?
The newest version of HTML/XHTML, supported by modern browsers.
Intended to be backwards compatible while adding new elements and functionalities like native video and audio support.
Page 8: HTML4 vs HTML5
HTML4 Example:
<div id="header"><div id="content"><div class="post"><div id="footer">
HTML5 Example:
<header><nav><article><footer>New elements in HTML5 are considered more practical.
Page 9: HTML5 Browser Support
HTML5 is supported in all modern browsers.
Browsers handle unrecognized elements as inline elements.
Good practice: Define Semantic Elements as Block Elements (e.g.,
<header>,<section>).
Page 10: Basic HTML Page Structure
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>Page 11: Fundamentals of HTML
Basic elements and HTML5 structural elements discussed.
Page 12: HTML Basics
All HTML documents start with a document type declaration:
<!DOCTYPE html>.Begins with
<html>and ends with</html>.The visible part of the HTML document is between
<body>and</body>.HTML Elements: From start tag to end tag.
HTML Attributes: Provide additional information about elements. Name/value pairs specified in the start tag.
Page 13: Anatomy of an HTML Element
Example of a Paragraph Element:
<p class="nice">Hello world!</p>.Contains opening tag, closing tag, and text content.
Page 14: Document Type Definition (DTD)
DTD identifies the version of HTML in the document.
Placed at the top of the web page document.
Page 15: DTD Examples
HTML 5 DTD:
<!DOCTYPE html>.XHTML 1.0 Transitional DTD example provided.
Page 16: HTML5: Fundamental Elements
Head Section: Contains metadata about the web page.
Body Section: Contains content displayed on the web page.
Page 17: The HEAD & BODY Section
<!DOCTYPE html>
<html lang="en">
<head>
<title>HELLO WORLD HTML</title>
<meta charset="utf-8">
</head>
<body>
<h1>WELCOME TO KP34903 WEB TECHNOLOGY</h1>
<p>This is a paragraph.</p>
</body>
</html>Page 18: Hello World HTML
Display of multiple heading levels:
<h1>Heading Level 1</h1><h2>Heading Level 2</h2><h3>Heading Level 3</h3><h4>Heading Level 4</h4><h5>Heading Level 5</h5><h6>Heading Level 6</h6>
Page 19: Paragraph Element
<p></p>groups sentences together.Display as block, with space above and below.
Page 20: Line Break Element
<br>causes the next content to display on a new line; it is a void tag.
Page 21: HTML Comments
Example of comments within HTML:
<!-- This is a comment -->
<p>You can see this paragraph.</p>
<!-- <p>You cannot see this commented paragraph.</p> -->Page 22: HTML Images
Example of including images in HTML:
<img src="img/satay.jpg" alt="Food image" style="width:250px; height:250px;">Page 23: Structural Elements - Div Element
The
<div>element is used to configure structural block areas on a web page.
Page 24: HTML5 Structural Elements
Header: Contains headings.
Nav: Contains main navigation.
Main: Main content of the document.
Footer: Footer content of the document.
Page 25: More HTML5 Elements
Aside: Contains sidebar or supplementary content.
Section: Contains a document section.
Article: Independent content entry.
Time: Represents date/time.
Page 26: Anchor/Links Element
The
<a>element specifies hyperlinks with thehrefattribute indicating the target URL.
Page 27: Link Types
Absolute Link: Links to an external website.
Relative Link: Links to internal site pages.
Page 28: Target Attribute
Attributes for link targets:
_blank: Opens in a new tab._self: Opens in the same frame (default)._parent: Opens in the parent frame._top: Opens in the full body of the window.
Page 29: Email Hyperlink Element
Automatically launches the mail client when clicked.
Page 30: HTML 5 Table Structure
Elements to define a table:
<table>: Defines the table.<tr>: Table row.<td>: Table data/cell.<th>: Table heading.<caption>: Table caption.
Page 31: Table Attributes
Attributes include properties like
border,padding,text-align, and more.
Page 32: Table Example
<table border="1" width="60%">
<caption><h2>Student</h2></caption>
<tr>
<th id="name">Name</th>
<th id="date">No. Matrik</th>
</tr>
<tr>
<td headers="name">Mohd Ali</td>
<td headers="date">BI161100001</td>
</tr>
</table>Page 33: Table - Colspan Example
Example of using colspan in tables.
Page 34: Table - Rowspan Example
Example of using rowspan in tables.
Page 35: Table Element Properties
Discuss alignment and style properties for tables.
Page 36: HTML Forms Basics
HTML Forms collect user input through various components listed on the following pages.
Page 37: Input Types and Attributes Overview
Overview of commonly used input elements in forms.
Page 38: HTML Forms Overview
Definition of
<form>and<input>for user data collection.
Page 39: Components of Form Usage
HTML form: User interface for input.
Server-side processing: Handles submitted data on the server.
Page 40: HTML Form Elements
Various
<input>types and their configurations.
Page 41: Form Attributes
Key attributes are
action,method,name, andid.
Page 42: Name vs ID Attributes
Explanation of the differences between
nameandidattributes in HTML forms.
Page 43: Input Types Overview
General overview of input types available.
Page 44: Input Type - Text Box
Configuration details and example:
<input type="text" name="email" id="email">.
Page 45: Input Type - Password
Example of configuring a password input.
Page 46: Input Type - Checkbox
Allows selection from multiple options.
Page 47: Input Type - Radio Button
Allows single selection from predefined options.
Page 48: Input Type - Select Box
Creates a dropdown list for selection.
Page 49: Input Type - Textarea
Configures a scrolling text box for user input.
Page 50: Input Type - Submit Button
Submits form data to the server.
Page 51: Input Type - Reset Button
Resets form fields to default values.
Page 52: Button Element
Interactive button with various function definitions based on the
typeattribute.
Page 53: Label Element
Associates labels with form controls for accessibility.
Page 54: Fieldset & Legend Elements
Fieldset: Groups form elements; Legend: Provides a label for the fieldset.
Page 55: HTML5 - New Input Types
New input types introduced in HTML5.
Page 56: Input Types - Examples
Various examples showcasing input types in HTML5, including color, date, number, and email.
Page 57: Input Types - Search & Date
Input type for search and calendar control shown with examples.
Page 58: Search Input Type
Accepts search terms with relevant attributes.
Page 59: Calendar Control
Example of a date input control showcased.
Page 60: References
List of resources and references for further reading related to HTML5 input types.
Page 61: Coding Practice
Suggested practice using generative AI to create an HTML form and review the code.
Engage with prompts for code improvements and learn about new elements and structure.