Chapter -4 Page Layout in HTML - Technology369kk

 

Creating Page Layout

  • When we use the right tag in right place, it result in a better page layout, better indexing by search engine and better uses experience this is the most important point attributes in HTML.
  • So Following the tag for the better job in HTML the create a page layout. 
<header>
    <main> //Contains nav tag websites layout
        <footer>


  • Inside the main tag we insert the following tags:-
<main> The main opening tag
    <section> A Page section
        <article> A self-contained content
            <aside> Content aside from the content , eg ads etc.
</main> The main closing tag


  • Creating a page like this is not necessary but creates a readers & structure layout also they are useful for CEO.

   Like Attributes:

<a href="https://technology369kk.blogspot.com/">Contect us</a>
//Contect page opening in same tab

<a href="https://technology369kk.blogspot.com" target="_blank">Contect us</a>
// Open in new tab

  • We can put any content inside an anchor tag (image, heading etc are all allowed)
  • If the page is inside a directory, we need to make sure that to the content page(Same applies to image tag as well)

<a href="https://technology369kk.blogspot.com" target="_main">
    <image /img src="mypic .JPG" alt="Create New Line for visit websites with pic " width="500" </a> <br>
        When access image in directory

  • We can add links to image like this :


<a href="https://technology369kk.blogspot.com" target="_main"> <img src="mypic .JPG"
        alt="  Create New Line for visit websites with pic " width="500" </a> <br>
    <!-- Height will be set automatically arange  -->


The div tag :- 

  • div tag is often used as a container for other elements div is a block (always takes full width or place)of level elements 

The Span Tag :-

  •  Span is an inline (Takes as much width or place as necessary )container 


Practice Set - 4: 

  • Q1. Create an SEO Friendly websites using HTML.

<p> <b>Q1. Ans:- </b> </p>
<header>
 <!-- THis is Header include  -->
</header>
<main>
    <section></section>
    I am section tag
    <section></section>
<!-- THis is a main body of websites -->
    <aside>
        <div></div>
    </aside>
</main>
<footer>
    I am footer in semantic tag
</footer>


  • Q2. Create an HTML page which opens google when clicked an image.


<p> <b>Q2. Ans:- </b> </p>
<a href="https://technology369kk.blogspot.com" target="_main"><img src="image/mypic .JPG" alt="Your work doesn't work"
        width="150"> </a>


  • Q3. Create a website which has your 5 top used websites bookmarked. The links should open in a new tab.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p> <b>Q3. Ans:- Enter your Social Media Site manimum 5 links </b> </p> <br>
    <header>
        <li>Home</li>
        <li>About Me</li>

    </header>
    <a href="https://Facebook.com" target="_main">Facebook </a> <br>
    <hr>

    <a href="https://Instagram.com" target="_main">Instagram </a> <br>
    <hr>

    <a href="https://Twitter.com " target="_main">Twitter </a> <br>
    <hr>

    <a href="https://google.com" target="_main">google</a> <br>
    <hr>

    <a href="https://technology369kk.blogspot.com" target="_main">Blog</a> <br>

    <hr>
    <a href="https://YouTube.com" target="_main">YouTube </a><br>
    <hr>
</body>

</html>





Let's see the next chapter in details: 

Post a Comment

0 Comments

Post a Comment