HTML
By: Samuel A.
Web Design
Sabian Secondary school
Tools Required in web design
• The necessary tools for establishing an HTML
development environment. Setting up an HTML
development environment is crucial for efficient web
development.
• Installing basic software
▪ A text editor – Sublime, vs-code, Notepad++ …
▪ Client software (browser) - Chrome, Firefox, Safari…
▪ Server-side stack software - WAMP, XAMPP, LAMP…
o What will your website look like?
▪ plan out the application content and design
o Dealing with files
▪ set up a sensible file structure
Contd…
o Client-side scripting
▪ Client-side or Front-end development manages everything that
users visually see first in their browser or application. Front end
developers are responsible for the look and feel of a site.
▪ Front end languages include HTML, CSS, and JavaScript.
o Server-side scripting
▪ Server-side or Back end development refers to the server
side of an application and everything that communicates
between the database and the browser.
▪ Back-end languages such as Java, PHP, Ruby on Rails,
Python, and .NET
What is HTML?
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a
heading", "this is a paragraph", "this is a link", etc.
Hypertext Markup Language (HTML)
• HTML documents are simply text documents with a specific form
• Documents comprised of content and markup tags
• Content: actual information being conveyed
• Markup tags: tell the Web browser how to display the page
• An HTML file must have an .htm or .html file extension
• An HTML file can be created using a simple text editor.
HTML Tags
• Tags are one of the most important part in an HTML Document.
• HTML uses some predefined tags which tells the browser about content display
property, that is how to display a particular given content.
• For Example, to create a paragraph, one must use the paragraph tags(<p> </p>) and to
insert an image one must use the img tags(<img />).
• There are generally two types of tags in HTML:
• Paired Tags/container : These tags come in pairs. That is they have both opening(< >) and
closing(</ >) tags. E.g. <h1> Hello world </h1>
• Empty Tags/standalone: These tags do not require to be closed. E.g. <br/>
… cont’d
• HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname> content </tagname> Closing tag
• The text between the start and end tags is the element content
• Not case-sensitive
• Follow the latest web standards:
• Use lowercase tags <b> Software Engineering </b>
• The end tag is written like the start tag, but with a slash before the tag name
Opening tag
Content
The start tag is often called the opening tag. The
end tag is often called the closing tag.
Tag Attributes
• Tags can have attributes that provide additional
information to an HTML element
• Attributes specify properties and behavior
• Attributes always come in name/value pairs like:
name=“value”
• Attributes are always specified in the start tag
• Attribute values should always be enclosed in quotes.
Double quotes are most common.
• Also case-insensitive: however, lowercase is recommended
• Some elements have obligatory attributes
Some Simple Tags – Example
<!DOCTYPE HTML>
<html>
<head>
<title>Simple Tags Demo</title>
</head>
<body>
<a href="[Link] title=“amu
site">Go to AMU website.</a>
<br />
<img src="[Link]" alt="logo" />
<br />
<strong>Bold</strong> and <em>emphasized or
italic</em> text.
</body>
</html>
HTML Document Structure
• All HTML documents must start with a document type
declaration: <!DOCTYPE html>.
• Entire document enclosed within <html> and </html> tags
• Two subparts:
• Head
• Enclosed within <head> and </head>
• Within the head, more tags can be used to specify title of the
page, meta-information, etc.
• Body
• Enclosed within <body> and </body>
• Within the body, content is to be displayed
• Other tags can be embedded in the body
HTML Document Structure Contd…
N
HTML Description
o
element
<!DOCTYPE This declaration specifies the version of HTML that the
html> document is written in. It is usually the first line of an HTML file
1<html> This is the root element of the document and encloses
element: all other elements
This element contains metadata about the document,
<head> such as the title, author, and character set. It does not
element contain any visible content on the page
This element is HTML elements that provide
<Mata> information about a webpage to search engines and
element: website visitors. It is are used to provide metadata
about a webpage, such as its title, description, and
keywords, which can improve its visibility in search
engine results
HTML Document Structure Contd…
N
HTML element Description
o
<title> element: This element is nested within the head element and
specifies the title of the webpage, which appears in
the browser's title bar
<body> This element contains all visible content on the
element page, such as text, images, links, and other HTML
elements.
HTML Document Structure Contd…
The <head> Section
• Contains information that doesn’t show directly on the
viewable page
• Starts after the <html> opening tag
• Begins with <head> and ends with </head>
• Contains mandatory single <title> tag
• Can contain some other tags, e.g.
• <meta>
• <script>
• <style>
• <!–- comments -->
HTML Document Structure Contd…
<head> Section: <title> tag
• Title should be placed between <head> and </head> tags
<title>Sabian Secondary school</title>
• Used to specify a title in the window title bar
• Search engines and people rely on titles
HTML Document Structure Contd…
<head> Section: <meta>
• Meta tags additionally describe the content contained within
the page
<head> Section: <script>
• The <script> element is used to embed scripts into an
HTML document
• Script are executed in the client's Web browser
• Scripts can live in the <head> and in the <body> sections
• Supported client-side scripting languages:
• JavaScript (it is not Java!)
• VBScript
• JScript
The <script> Tag – Example
<!DOCTYPE HTML>
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function sayHello() {
[Link]("<p>Hello
World!<\/p>");
}
</script>
</head>
<body>
<script type=
"text/javascript">
sayHello();
</script>
</body>
</html>
<head> Section: <style>
• The <style> element embeds formatting information (CSS
styles) into an HTML page
<html>
<head>
<style type="text/css">
p { font-size: 12pt; line-height: 12pt; }
p:first-letter { font-size: 200%; }
span { text-transform: uppercase; }
</style>
</head>
<body>
<p>Styles demo.<br />
<span>Test uppercase</span>.
</p>
</body>
</html>
Comments: <!-- --> Tag
• Comments can exist anywhere between the <html></html> tags
• Comments start with <!-- and end with -->
<!–- AMU Logo (a JPG file) -->
<img src="[Link]" alt=“amu Logo">
<!–- Hyperlink to the web site -->
<a href="[Link]
Minch University</a>
<!–- Show the news table -->
<table class="newstable">
...
<body> Section: Introduction
• The <body> section describes the viewable portion of the page
• Starts after the <head> </head> section
• Begins with <body> and ends with </body>
<html>
<head><title>Test page</title></head>
<body>
<!-- This is the Web page body -->
</body>
</html>
Headings and Paragraphs – Example
<!DOCTYPE HTML>
<html>
<head><title>Headings and
paragraphs</title></head>
[Link] <body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
<div style="background:skyblue">
This is a div</div>
</body>
</html>
Text Formatting
• Text formatting tags modify the text between the opening tag and the
closing tag
• Ex. <b>Hello</b> makes “Hello” bold
<b></b> bold
<i></i> italicized
<u></u> underlined
<sup></sup> Samplesuperscript
<sub></sub> Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></bloc Quoted text block
kquote>
<del></del> Deleted text – strike 22
Text Formatting – Example
<!DOCTYPE html >
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:
preformatted.</pre></p>
<h2>More Info</h2>
<p>Specifically, we’re using XHMTL 1.0 transitional.<br />
Next line.</p>
</body>
</html>
HTML styles
• The HTML style attribute is used to add styles to an element, such
as color, font, size, and more.
• <h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Use the style attribute for
styling HTML elements
✓ background-color for
background color
✓ color for text colors
✓ font-family for text fonts
✓ font-size for text sizes
✓ text-align for text alignment
HTML colors
• HTML colors are specified with predefined color names, or with
RGB, HEX, HSL, RGBA, or HSLA values.
• <h1 style="color:Tomato;">Hello World</h1>
HTML links - hyperlinks
• Links are found in nearly all web pages.
• Links allow users to click their way from page to page.
Syntax: <a href="url">link text</a>
• The target Attribute
✓self - Default. Opens the document in the same window/tab as it was clicked
✓_blank - Opens the document in a new window or tab
HTML links
• An HTML link is displayed in a different color depending on whether
it has been visited, is unvisited, or is active.
• HTML Link Colors
By default, a link will appear like this (in all browsers):
✓An unvisited link is underlined and blue
✓A visited link is underlined and purple
✓An active link is underlined and red
HTML Links - Create Bookmarks
• HTML links can be used to create bookmarks, so that readers can
jump to specific parts of a web page.
• Bookmarks can be useful if a web page is very long.
✓To create a bookmark - first create the bookmark, then add a link to it.
✓When the link is clicked, the page will scroll down or up to the
location with the bookmark.
• <h2 id="C4">Chapter 4</h2>
• <a href="#C4">Jump to Chapter 4</a>
HTML images
• The HTML <img> tag is used to embed an image in a web page.
The <img> tag is empty, it contains attributes only, and does not have a
closing tag.
• The <img> tag has two required attributes:
✓src - Specifies the path to the image
✓alt - Specifies an alternate text for the image
Syntax: <img src="url" alt="alternatetext">
Image Size - Width and Height
<img src=“[Link]" alt=“ronaldo
image" style="width:500px;height:600px;">
HTML Lists
• HTML lists are used to present list of information in well formed
and semantic way.
• There are three different types of list in HTML.
• Ordered list —to create a list of related items, in a specific
order.
• Unordered list — to create a list of related items, in no
particular order.
• Description list —to create a list of terms and their
descriptions.
Ordered Lists: <ol> Tag
<ol type="1">
Create an Ordered List using <ol></ol>: <li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>
type="1 type="A type="a type="I type="i"
" " " "
1. Apple A. Apple a. Apple I. Apple i. Apple
2. Orange B. Orange b. Orange II. Orange ii. Orange
3. Grapefruit C. Grapefruit c. Grapefruit III. Grapefruit iii. Grapefruit
Unordered Lists: <ul> Tag
<ul type="disk">
<li> Apple </li>
Create an Unordered List using <ul></ul>: <li> Orange </li>
<li> Grapefruit
</li>
</ul>
type="disk type="circle" type="square"
"
• Apple o Apple ▪ Apple
• Orange o Orange ▪ Orange
• Grapefruit o Grapefruit ▪ Grapefruit
Definition lists: <dl> tag
Create definition lists using <dl>
<dl>
• Renders without bullets <dt>HTML</dt>
• <dl> defines a description list <dd>A markup language
…</dd>
• It encloses a group of terms <dt>CSS</dt>
• <dt> defines a description term <dd>Language used to …</dd>
• <dd> defines a description details </dl>
• Definition is indented
HTML
A markup language …
CSS
Language used to ..
HTML Multimedia
• Multimedia on the web is sound, music, videos, movies, and
animations.
HTML Video
• The HTML <video> element is used to show a video on a web page.
• To start a video automatically, use the autoplay attribute: muted
Note: Only MP4, WebM, and Ogg video are supported by the HTML
standard.
HTML Multimedia
• HTML Audio
• The HTML <audio> element is used to play an audio file on a web
page.
• <audio controls autoplay muted>
Note: Only MP3, WAV, and Ogg audio are supported by the HTML
standard.
• Add muted after autoplay to let your audio file start playing
automatically (but muted):
HTML YouTube Videos
• Converting videos to different formats can be difficult and time-consuming.
• To play your video on a web page, do the following:
✓Upload the video to YouTube
✓Take a note of the video id
✓Define an <iframe> element in your web page
✓Let the src attribute point to the video URL
✓Use the width and height attributes to specify the dimension of the player
✓Add any other parameters to the URL (see below)
✓ Add mute=1 after autoplay=1 to let your video start playing automatically (but
muted).
<iframe width="420" height="315“ src="[Link]
</iframe>
Block and Inline Elements
• Block elements add a line break before and
after them
• <div> is a block element
• Other block elements are <table>, <hr>, headings,
lists, <p> and etc.
• Inline elements don’t break the text before and
after them
• <span> is an inline element
• Most HTML elements are inline, e.g. <a>
The <div> and <span>Tag
• <div> is Block style element
• It creates logical divisions within a page
• Used with CSS
• <span> is Inline style element
• Useful for modifying a specific portion of text
• Don't create a separate area in the document
• Very useful with CSS
• Example:
<div style="font-size:24px; color:red">DIV example</div>
<p>This one is <span style="color:red; font-weight:bold">only a
test</span>.</p>
Working with HTML Tables
• Tables represent tabular data
• A table consists of one or several rows
• Each row has one or more columns
• Tables comprised of several core tags:
• <table></table>: begin / end the table
• <tr></tr>: create a table row
• <td></td>: create tabular data (cell)
• <th></th>: Defines a header cell in a table
• Tables should not be used for layout. Use CSS floats and
positioning styles instead
… cont’d
Table Cells
• Each table cell is defined by a <td> and a </td> tag.
• td stands for table data.
• Everything between <td> and </td> are the content of the
table cell.
Table Rows
• Each table row starts with a <tr> and end with a </tr> tag.
• tr stands for table row.
Simple HTML Tables – Example
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<table style="width:60%">
<tr>
<td>Name</td>
<td>Age</td>
<td>Sex</td>
</tr>
<tr>
<td>Abebe</td>
<td>23</td>
<td>M</td>
</tr>
<tr>
<td>Meron</td>
<td>21</td>
<td>F</td>
</tr>
</table>
</body>
</html>
Complete HTML Tables
• Table rows split into three semantic sections: header, body and
footer
• <thead> denotes table header and contains <th> elements, instead of <td>
elements
• <tbody> denotes collection of table rows that contain the very data
• <tfoot> denotes table footer but comes BEFORE the <tbody> tag
• <colgroup> and <col> define columns (most often used to set column
widths)
Complete HTML Table: Example
<table>
<colgroup>
columns
• <col style="width:100px" /><col />
</colgroup>
<thead>
<tr><th>Columnheader
1</th><th>Column
2</th></tr> th
</thead>
<tfoot>
<tr><td>Footer 1</td><td>Footer
2</td></tr>
footer
</tfoot>
<tbody>
<tr><td>Cell 1.1</td><td>Cell
1.2</td></tr> Last comes the body
<tr><td>Cell 2.1</td><td>Cell
(data)
2.2</td></tr>
</tbody>
</table>
Complete HTML Table: Example (2)
<table> By default, header
<colgroup>
text is bold and
<col style="width:200px" /><col />
centered.
</colgroup>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
</tbody>
</table>
Although the footer is before the
data in the code, it is displayed
last
Nested Tables
• Table data “cells” (<td>) can contain nested tables (tables within
tables):
<table>
<tr>
<td>Contact:</td>
<td>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</td>
</tr>
</table>
Cell Spacing and Padding
• Tables have two important attributes:
cellspacing cellpadding
cell cell cell cell
Defines
cell
the
cell
Defines
cell the cell
empty
empty space space around the
between cells cell content
Cell Spacing and Padding – Example
<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15"
cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0"
cellpadding="10">
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>
Column and Row Span
• Table cells have two important attributes:
colspan rowspan
colspan=" colspan=" rowspan=" rowspan="
1" 1" 2" 1"
cell[1,1 cell[1,2 cell[1,
] ] 2]
cell[1,1]
Defines how
cell[2,1]
Defines cell[2,
how
1]
many columns many rows the
the cell colspan=" cell occupies
rowspan="
occupies 2" 1"
Column and Row Span – Example
<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class=“3"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
</table>
Column and Row Span – Example (2)
<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td
colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class=“3"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
</table>
Cell[1,1
Cell[2,1]
]
Cell[1,2 Cell[3,2
] ]
Cell[2,2
]
Cell[1,3 Cell[2,3
] ]
<!DOCTYPE html>
<html>
Table
<head>
<style>
caption
table, th, td {
border: 1px solid black;
border-collapse: collapse;
} <tr>
th, td { <td>January</td>
padding: 5px; <td>$100</td>
text-align: left; </tr>
} <tr>
</style> <td>February</td>
</head> <td>$50</td>
<body> </tr>
<table style="width:100%"> </table>
<caption>Monthly savings</caption> </body>
<tr> </html>
<th>Month</th>
<th>Savings</th>
</tr>
Exercise:
HTML Forms
• Forms are the primary method for gathering data from site visitors
• The HTML forms are one of the essential components of the web
that enables the user to submit the information accordingly on the
website.
• Forms allow you to collect data or pass information from users.
• HTML forms as an easy way of collecting user information
and then sending the collected information to the server.
• Create a form block with The “method" attribute tells
<form></form> how the form data should be
sent – via GET or POST
• Example: request
<form name="myForm" method="post"
action="path/to/[Link]">
...
</form>
The "action" attribute tells
where the form data should be
sent
Importance of HTML Forms
❑ They are used to gather information from the user like his contact
details, survey responses, feedback, user registrations, login, signup,
search box, order and checkout forms, and more.
❑ It is also used for validation which makes sure the data submitted
is correct and accurate.
❑ They also enhance the user experience as when the user submits his
review of the website the developer can change the website according to
the reviews.
❑ They also provide security as when we use these forms in login or
signup forms then only the valid candidate can access our website.
❑ We can also have some additional features in the form like file upload,
etc, which will make the user upload the details.
Attributes of the FORM tag
❑ The attributes of the FORM tag include:
❑ action,
❑ method,
Example 1:
❑ enctype, <form action="[Link]“
❑ target, method="POST/GET" name="Form1">
❑ name, // … form elements go here ...
❑ autocomplete
• action attribute: </form>
• ○ The action attribute specifies the URL to which the form data should
be submitted upon submission.
• ○ This URL can be relative or absolute. If it's relative, it's interpreted
relative to the current page's URL.
• ○ If the action attribute is omitted, the form data is submitted to the
current page URL (also known as the "self" URL).
• ○ Example: <form action="/submit_form" method="post">
Attributes of the FORM tag Contd..
● method attribute:
○ The method attribute specifies the HTTP method used to submit
the form data. The two primary methods are GET and POST:
■ GET: Appends form data to the URL as query parameters. Suitable for retrieving data
from the server.
■ POST: Sends form data in the request body. Suitable for submitting sensitive or large
amounts of data.
○ If the method attribute is omitted, the default method is GET.
Example: <form action="/submit_form" method="post">
● enctype attribute: Specifies the encoding type used to submit form
data to the server. This attribute is especially relevant when the form
includes file uploads. Common values include application/x-www-
form-urlencoded, multipart/form-data, and text/plain.
• ○ Example: <formenctype="multipart/form-data">
Attributes of the FORM tag Contd..
● target Attribute: Determines where the response from
submitting the form will be displayed. The _self value loads the
response in the same window or frame, while _blank opens it in a new
window or tab. Other values include _parent, _top, and the name of a
specific frame.
○ Example:<form target="_blank">
● name Attribute: Provides a name for the form, which can be useful
when scripting or styling. It's also used to reference the form in client-
side scripting.
○ Example:<form name="myForm">
● autocomplete Attribute: Controls whether the browser should
automatically fill in form fields based on the user's browsing history
and previously entered data. Values are on (default) and off.
○ Example:<form autocomplete="on">
HTML Forms Structure
• The basic structure of an HTML form consists of the following
elements:
1. <form> tag: This is used to define the beginning and end of the
form. It contains all the form elements that the user will interac with.
2. Form fields: These are the individual elements that makeup the
form, such as text boxes, dropdown lists, checkboxes, and radio
buttons. Form fields are created using the <input> tag, and each field
has its own unique attributes.
3. Submit button: This is a button that the user clicks on to submit
the form data to the server for processing. It is created using the
<input> tag with a type of "submit".
Here's an example of a basic HTML form structure:
<!-- Omitting both action and method attributes -->
<form>
<label>Username: <input type="text"></label>
<label>Password: <input type="password"></label>
<input type="submit" value="Submit">
</form>
Form Fields
• Single-line text input fields:
<input type="text" name="FirstName" value="This is a text
field" />
• Multi-line textarea fields:
<textarea name="Comments">This is a multi-line text
field</textarea>
• Hidden fields contain data not shown to the user:
• Often used by JavaScript code
<input type="hidden" name="Account" value="This is a hidden
textfield" />
Fieldsets
• Fieldsets are used to enclose a group of related form fields:
<form method="post" action="[Link]">
<fieldset>
<legend>Client Details</legend>
<input type="text" id="Name" />
<input type="text" id="Phone" />
</fieldset>
<fieldset>
<legend>Order Details</legend>
<input type="text" id="Quantity" />
<textarea cols="40" rows="10"
id="Remarks"></textarea>
</fieldset>
</form>
• The <legend> is the fieldset's title.
Form Input Controls
• Checkboxes:
<input type="checkbox" name="fruit"
value="apple”/>
• Radio buttons:
• Radio buttons can be grouped, allowing only one to be selected
from a group:
<input type="radio" name="title"
value="Mr." />
<input type="radio" name="city"
value="Lom" />
<input type="radio" name="city"
value="Ruse" />
Other Form Controls
• Dropdown menus:
<select name="gender">
<option value="Value 1"
selected="selected">Male</option>
<option value="Value 2">Female</option>
<option value="Value 3">Other</option>
</select>
• Submit button:
<input type="submit" name="submitBtn"
value="Apply Now" />
Other Form Controls (2)
• Reset button – brings the form to its initial state
<input type="reset" name="resetBtn"
value="Reset the form" />
• Image button – acts like submit but image is displayed and
click coordinates are sent
• Ordinary button – used for JavaScript, no default action
<input type="image" src="[Link]"
name="submitBtn" alt="Submit" />
<input type="button" value="click me"
/>
Other Form Controls (3)
• Password input – a text field which masks the entered text with
* signs
<input type="password" name="pass" />
• Multiple select field – displays the list of items in multiple
lines, instead of one.
<select name="products"
multiple="multiple">
<option value="Value 1"
selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
<option value="Value
3">speakers</option>
</select>
Other Form Controls (4)
• File input – a field used for uploading files
<input type="file" name="photo" />
• When used, it requires the form element to have a specific attribute:
<form enctype="multipart/form-data">
...
<input type="file" name="photo" />
...
</form>
Labels
• Form labels are used to associate an explanatory text to a form
field using the field's ID.
<label for="fn">First Name</label>
<input type="text" id="fn" />
• Clicking on a label focuses its associated field (checkboxes are
toggled, radio buttons are checked)
• Labels are both a usability and accessibility feature and are
required in order to pass accessibility validation.
HTML Forms – Example
<form method="post" action="[Link]">
<input name="subject" type="hidden" value="Class" />
<fieldset><legend>Academic information</legend>
<label for="degree">Degree</label>
<select name="degree" id="degree">
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of Science</option>
<option value="MBA" selected="selected">Master of
Business Administration</option>
</select>
<br />
<label for="studentid">Student ID</label>
<input type="password" name="studentid" />
</fieldset>
<fieldset><legend>Personal Details</legend>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" />
<br />
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" />
HTML Forms – Example (2)
<br />
Gender:
<input name="gender" type="radio" id="gm"
value="m" />
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf"
value="f" />
<label for="gf">Female</label>
<br />
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">TERMS AND
CONDITIONS...</textarea>
</p>
<p>
<input type="submit" name="submit" value="Send
Form" />
<input type="reset" value="Clear Form" />
</p>
</form>
HTML Forms – Example (3)
HTML5: New form elements
Input-datalist Elements and autocomplete
Attribute
Output
• Once you fill a data in the text box ..html 5 can recover the
previous input.
*we use a datalist element to
obtain the user’s birth month.
HTML Frames
• Frames provide a way to show multiple HTML documents in a
single Web page
• The page can be split into separate views (frames) horizontally
and vertically
• Frames were popular in the early ages of HTML development,
but now their usage is rejected
• Frames are not supported by all user agents (browsers, search
engines, etc.)
• A <noframes> element is used to provide content for non-compatible
agents.
HTML Frames – Demo
[Link]
ml
<html>
<head><title>Frames Example</title></head>
<frameset cols="180px,*,150px">
<frame src="[Link]" />
<frame src="[Link]" />
<frame src="[Link]" />
</frameset>
</html>
Inline Frames: <iframe>
• Inline frames provide a way to show one website inside
another website:
[Link]
<iframe name="iframeGoogle" width="600" height="400"
src="[Link] frameborder="yes"
scrolling="yes"></iframe>
Table:html structure elements
Table:html structure elements
<header>
<nav>
<aside>
HTML5: Semantic elements example
<section>
<footer>