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 -->
<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
- 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
- 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:
- 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:
Comments