Lecture 2 and lab 2 L-2
Introduction to HTML (Part 2)
HTML list
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
The CSS list-style-type property is used to define the style of the list
item marker:
Value Description
Disc Sets the list item marker to a bullet
(default)
Circle Sets the list item marker to a circle
Square Sets the list item marker to a
square
None The list items will not be marked
Example
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.
The list items will be marked with numbers by default:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item
marker
Type Description
Type=” 1” The list items will be numbered with
numbers (default)
Type=”A” The list items will be numbered with
uppercase letters
Type=”a” The list items will be numbered with
lowercase letters
Type=”I” The list items will be numbered with
uppercase roman numbers
Type=”I” The list items will be numbered with
lowercase roman numbers
Header tag is used for define a header section. Header is always used top of the any
html documents or page.
Note: Header tag never use within other tag like within footer tag, section tag, nav tag.
Generally Header area contains following information.
Website logo
Contact us
Login
List of menu
Social media links
Example
<!DOCTYPE>
<html>
<style>
header
{ background:cyan;
height:200px;
</style>
<body>
<header>
<p>../astu .jpg</p>
<p>Contact us: compifno.com</p>
<p>Login</p>
</header>
</body>
</html>
<Footer> Tag
Footer tag is used for define a footer section. Footer is always used below of the any
html documents or page.
Generally footer area contains following information.
Author name
Sitemap
Contact information
Copyright information
Related links
Social media links
<footer>
<p>Copyrignt @2012-2019</p>
<p>Contact us: compinfo.com</p>
<p>Author: Daniel</p>
</footer>
<Section >tag
Html <section> tag are used to defined sections in a document, such as chapters, headers,
footers, or any other sections of the document on the web page.
nav tag
Html5 introduce new tag <nav> for navigation of links on web page. Before this tag for
navigation we use like <div class=menu> and class menu related style written in css file.
Note: Not all links of a document should be inside a <nav> tag. This tag are used only
for major block of navigation links.
<!DOCTYPE>
<html>
<head>
<style>
nav
{
color:blue;
</style>
</head>
<body>
<nav>
<a href="#">Java</a>
<a href="#">php</a>
<a href="#">Html</a>
</nav>
</body>
</html>
Html <br> tag
The <br> tag inserts a single line break.
The <br> tag is an empty tag which means that it has no end tag.
<main> tag
Html <main> tag is used to represent the main content of the <body> tag.
The content inside the <main> element should be unique to the document. It should not
contain any content that is repeated across documents such as sidebars, navigation
links, copyright information, site logos, and search forms.
Note: Not use more than one <main> element in a document.
<!DOCTYPE>
<html>
<body>
<h3>Programming Language</h3>
<main>
<article>
<h3>Html</h3>
<p>Html is very simple to use and it is also easy to learn.</p>
</article>
<article>
<h3>Java</h3>
<p>Java is an object oriented programming language.</p>
</article>
<article>
<h3>JavaScript</h3>
<p>JavaScript is mainly used for client side validation.</p>
</article>
</main>
</body>
</html>
article tag
Html <article> tag an independent self-contained content in a document, page,
application or a site.
<article> tag is generally used on Blog post, News story, Forum post, comment etc.
Syntax
<!DOCTYPE>
<html>
<head>
<style>
article
{
background:cyan;
}
</style>
</head>
<body>
<article>
<p>Tim Berners-Lee is known as father of Html. The first publicly available description of
HTML was a document called "HTML Tags", first described, on the Internet by Berners-
Lee in late 1991.</p>
</article>
</body>
</html>
