Subject Name: Static Webpage Design Unit No: II Subject Code: 4311603
Unit II: Advanced HTML
HTML Lists
HTML provides a simple way to show unordered lists (bullet lists) or ordered lists (numbered lists).
Unordered Lists
An unordered list is a list of items marked with bullets (typically small black circles). An unordered list
starts with the <ul> tag. Each list item starts with the <li> tag.
EXAMPLE:
<html>
<title> Unorder List </title>
</head>
<body>
<h3 align="center"> To illustrate unorder list tags </h3>
<hr color="red">
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
Department of Computer Engineering Page 1
Subject Name: Static Webpage Design Unit No: II Subject Code: 4311603
</body></html>
OUTPUT:
Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the
<ol> tag. Each list item starts with the <li> tag.
EXAMPLE:
<html>
<head>
<title> Order List tag </title>
</head>
<body>
<h3 align="center" style="color:red">To illustrate ORDER list tags</h3>
<hr COLOR="RED">
<h4>Numbered list:</h4>
<ol>
Department of Computer Engineering Page 2
Subject Name: Static Webpage Design Unit No: II Subject Code: 4311603
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Uppercase Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol></body></html>
OUTPUT:
Department of Computer Engineering Page 3
Subject Name: Static Webpage Design Unit No: II Subject Code: 4311603
Definition Lists
Definition lists consist of two parts: a term and a description. To mark up a definition list, you need three
HTML elements; a container <dl>, a definition term <dt>, and a definition description <dd>.
EXAMPLE:
<html>
<head>
<title> Nested and Definition List <title>
</head>
<body>
<h3 align="center"> To illustrate Nested and Definition List Tags </h3>
<hr color="red">
<h4> An ordered nested List: </h4>
<ol>
<li> Coffee </li>
<li> Tea
<ol type= "a">
<li> Black tea </li>
<li> Green tea </li>
Department of Computer Engineering Page 4
Subject Name: Static Webpage Design Unit No: II Subject Code: 4311603
<ol type= "i" >
<li> China </li>
<li> Africa </li>
</ol>
<ol>
<li> Milk </li>
</ol>
<h4> A Definition List: </h4>
<dl>
<dt> Bangalore </dt>
<dd> -Capital City of Karnataka </dd>
<dt> Mumbai</dt>
<dd> -Capital city of Maharashtra </dd>
</dl>
</body>
</html>
OUTPUT:
Department of Computer Engineering Page 5
Subject Name: Static Webpage Design Unit No: II Subject Code: 4311603
HTML Semantic Elements
In any language, it is essential to understand the meaning of words during communication. And if this is
a computer communication then it becomes more critical. So HTML5 provides more semantic elements
which make easy understanding of the code.
Hence Semantics defines the meaning of words and phrases, i.e.
Semantic elements= elements with a meaning. Semantic elements have a simple and clear meaning for
both, the browser and the developer.
For example:
In HTML4 we have seen <div>, <span> etc. are which are non-semantic elements. They don't tell
anything about its content.
On the other hand, <form>, <table>, and <article> etc. are semantic elements because they clearly
define their content.
HTML5 semantic elements are supported by all major browsers.
Why to use semantic elements?
In HTML4, developers have to use their own id/class names to style elements: header, top, bottom,
footer, menu, navigation, main, container, content, article, sidebar, topnav, etc.
This is so difficult for search engines to identify the correct web page content. Now in HTML5 elements
(<header> <footer> <nav> <section> <article>), this will become easier. It now allows data to be shared
and reused across applications, enterprises, and communities."
Semantic elements can increase the accessibility of your website, and also helps to create a better
website structure.
Semantic Elements in HTML5
Index Semantic Tag Description
1. <article> Defines an article
2. <aside> Defines content aside from the page content
3. <details> Defines additional details that the user can view or hide
4. <figcaption> Defines a caption for a <figure> element
5. <figure> Specifies self-contained content, like illustrations, diagrams,
photos, code listings, etc.
6. <footer> Defines a footer for a document or section
Department of Computer Engineering Page 6
Subject Name: Static Webpage Design Unit No: II Subject Code: 4311603
7. <header> Specifies a header for a document or section
8. <main> Specifies the main content of a document
9. <mark> Defines marked/highlighted text
10. <nav> Defines navigation links
11. <section> Defines a section in a document
12. <summary> Defines a visible heading for a <details> element
13. <time> Defines a date/time
Media Tags - Audio & Video
HTML5 features include native audio and video support without the need for Flash.
The HTML5 <audio> and <video> tags make it simple to add media to a website. You need to
set src attribute to identify the media source and include a controls attribute so the user can play and
pause the media.
Embedding Video
Here is the simplest form of embedding a video file in your webpage −
<video src = "foo.mp4" width = "300" height = "200" controls>
Your browser does not support the <video> element.
</video>
Example:
<html>
<body>
<video width = "300" height = "200" controls autoplay>
<source src = "/html5/foo.ogg" type ="video/ogg" />
<source src = "/html5/foo.mp4" type = "video/mp4" />
Your browser does not support the <video> element.
</video>
</body>
</html>
Embedding Audio
Department of Computer Engineering Page 7
Subject Name: Static Webpage Design Unit No: II Subject Code: 4311603
HTML5 supports <audio> tag which is used to embed sound content in an HTML or XHTML document
as follows.
<audio src = "foo.wav" controls autoplay>
Your browser does not support the <audio> element.
</audio>
The current HTML5 draft specification does not specify which audio formats browsers should support in
the audio tag. But most commonly used audio formats are ogg, mp3 and wav.
You can use <source&ggt; tag to specify media along with media type and many other attributes. An
audio element allows multiple source elements and browser will use the first recognized format –
Example:
<html>
<body>
<audio controls autoplay>
<source src = "/html5/audio.ogg" type = "audio/ogg" />
<source src = "/html5/audio.wav" type = "audio/wav" />
Your browser does not support the <audio> element.
</audio>
</body>
</html>
HTML Forms
1. The Input Element
The input element is used to select user information.
An input element can vary in many ways, depending on the type attribute. An input element can be of type
text field, checkbox, password, radio button, submit button, and more.
The most used input types are given below.
Text Fields
<input type="text">
Department of Computer Engineering Page 8
Subject Name: Static Webpage Design Unit No: II Subject Code: 4311603
- defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
Output in a browser:
First name:
Last name:
Note: the default width of a text field is 20 characters.
2. Password Field
<input type="password"> - defines a password field:
<form>
Password: <input type="password" name="pwd">
</form>
Output in a browser:
Password:
Note: The characters in a password field are masked (shown as asterisks or circles).
3. Radio Buttons
<input type="radio">
- defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Output in a browser:
Male
Female
4. Checkboxes
Department of Computer Engineering Page 9
Subject Name: Static Webpage Design Unit No: II Subject Code: 4311603
<input type="checkbox">
- defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of
choices.
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
Output looks in a browser:
I have a bike
I have a car
5. Submit Button
<input type="submit"> - defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page specified in the form's
action attribute. The file defined in the action attribute usually does something with the received input:
<input type="submit" value="Submit"></form>
Department of Computer Engineering Page 10
