Level no.20

 Header Tag in HTML

Header tag is used for introduction of your content and define top section of your web-page or for  navigational links, logos, icons and images. A header tag can nest in another header tag.

Syntax:

<header>

data should be here.

</header>.

Code:

<!DOCTYPE html>

<html>

<head>

<title>My Website </title>

</head>

<body>

<header>

<h1> My Website </h2>

<p>This is the header of  your web-page</p>

</header>

</body>

</html>


Output:







Navigation Tag in HTML

Navigation tag <nav> is used to define section of web-page than contain navigational links.Links of web-page are in the navigation tag but not all the links are inside  the navigation tag. Structuring the content of the web-page and determine that the enclosed links are part of the navigation tag.It is act like a container for putting links and logos.

Syntax:

<nav>

<ul>

<li> <a href="#"> Home </a></li>

<li> <a href="#">  About Us </a></li>

<li> <a href="#"> Contact Us </a></li>

</ul>
</nav>

Why we use # sign here?

It is used for not having links so, it creates a hyper link that refers is to a same document rather than creating an internal link .

Code:

<!DOCTYPE html>

<html>

<head>

<title>My Website </title>

</head>

<body>

<header>

<h1> My Website </h2>

<nav>

<ul type=" circle">

<li> <a href="#"> Home </a></li>

<li> <a href="#">  About Us </a></li>

<li> <a href="#"> Contact Us </a></li>

</ul>
</nav>

</header>

</body>

</html>

Output:








Section Tag in HTML

Section tag <section> is an semantic element in HTML, so it provides semantic meaning to your document. You can nest section tag into another section tag, It is easy for  readers to understand the out-line of your web-page.Nesting can make your document well-structured and styling can be easy for you.When you are nesting sections you are making small portion and this small portion is helpful when you are using CSS.

Syntax:

<section>

<h1> Paragraph 1 </h1>

   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia a sed,
praesentium consectetur ullam laborum eos animi error earum incidunt.</p>

</section>

Code:

<!DOCTYPE html>

<html>

<head>

<title>My Website </title>

</head>

<body>

<section>

<h1> Paragraph 1 </h1>

   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia a sed,
praesentium consectetur ullam laborum eos animi error earum incidunt.</p>

</section>

</body>

</html>


Output:




Code:(for section nesting)

<!DOCTYPE html>

<html>

<head>

<title>My Website </title>

</head>

<body>

<section>

        <h1>Paragraph 1</h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia a sed, praesentium consectetur ullam laborum eos animi error earum incidunt.</p>
        <h2>Paragraph 2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse in voluptate excepturi repudiandae, sed recusandae suscipit et velit expedita inventore minima omnis delectus eum deleniti accusamus sapiente, qui autem facilis!</p>
        <section>
            <h3>Paragraph 3</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, voluptatem neque. Natus sed numquam nam laborum expedita eum vitae commodi reiciendis nobis, cumque ex ducimus esse, fugit molestiae eos ab?</p>
            <h4>Paragraph 2</h4>
            <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, quo eveniet architecto itaque aut fugit et cumque. Omnis, possimus architecto. </p>
     

</section>

</body>

</html>

Output:







Footer Tag in HTML

Footer tag <footer> is also an semantic element. It defines footer of HTML document. Footer tag also contain navigational links to add logos and link at the bottom of the web-page.Like other HTML tags, you can also nest footer tag. 

Code:

<!DOCTYPE html>

<html>

<head>

<title>My Website </title>

</head>

<body>

  <footer>

        <nav>

            <a href="#">Facebook</a>

            <a href="#">Instagram</a>

            <a href="#">youtube</a>

        </nav>


    </footer>   

</body>

</html>

Output:



Comments

Post a Comment

Popular posts from this blog

Level no.3

Image
 Lecture 3 In this lecture I study about tags which are used in html. Bold:   To do text bold in html. we use tags <b> </b>. For example <b> Hello World </b>. Hello World Italic: To do text  italic in html.we use tags <i> </i>. For example <i> Hello World < /i>. Hello World     Underline: To place line under any text. we use tags <u> </u>. For example <u> Hello World </u>   Hello World Strike: To use Strike tag in html for unimportant and inaccurate text. For example <strike> 100 </strike>. 100   How to create random paragraph in html? We use "lorem" keyword to create random paragraph in html.           How to use ? <p> lorem <p>. To keep paragraph  on  one page: To keep paragraph on one page in html we use "Alt+Z" keyword.  Superscript and Subscript in html We use superscript a...
Read more

Level no.4

Image
Lecture 4 How to create Boilerplate Automatically in html? To create boilerplate automatically  in html. "Shift + 1" keyword is used. How to change color in html? <font></font> tags are used to change color in html. In font tag color attribute are used. How to use Font tag with color attribute? <font color="purple"> Hello World </font>. Hello World Difference between tags and attribute? Tags are used to hold the html element and attributes add additional information in tags.We can apply multiple attribute in tags. How to change size in html? To change size in html <font></font> tag with size attribute. How to use Font tag with size attribute? <font size="100">Pakistan</font>. Pakistan. How to change writing style  in html? The style of the writing is changed by using font tag with face attribute. How to use? To use font tag with face attribute we can change writing style. <font face="  Georgia ...
Read more

Level no.21

Image
CSS Properties  In this lecture we will study about properties of CSS, that define  how HTML element should be displayed on web-page and how we make our web-page layout defined and manageable. Here are some CSS properties: border: It is used for defining the border around the element. syntax:  border: 5px solid black; border-width: It is used for setting width of the border around the element. Syntax:  border-width: 10px; border-style: It is used for setting style of border, in which style the border will appear. Syntax: border-style:solid; border-color:  It is used for changing the color of the border around the HTML element. syntax: border-color: 5px   solid black; border-radius:  It is used for making border corners round, giving them round shape.You can make any side of the border round just by assigning the exact position. Syntax: border-radius: 39px;  You can gradually increase the value according to your preference. Width and Height: T...
Read more