Scribd
Upload
71 views7 pages

Chapter 3 Lec2

The document discusses various HTML tags like <ul>, <ol>, <header>, <footer>, <section>, <nav>, <br>, <main>, and <article> that are used to define different sections of a web page like lists, headers, footers, navigation links, and independent content.

Uploaded by

Ayele Mitku
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
71 views7 pages

Chapter 3 Lec2

The document discusses various HTML tags like <ul>, <ol>, <header>, <footer>, <section>, <nav>, <br>, <main>, and <article> that are used to define different sections of a web page like lists, headers, footers, navigation links, and independent content.

Uploaded by

Ayele Mitku
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

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>

You might also like