HTML Lab 01
HTML Lab 01
Tool(s):
⮚ VS Code
⮚ Sublime
Task: 1
Create this structure Using HTML Semantic Tags
<Header>
<img> <nav>
Logo
</img> <a/> 5px <a/> 5px <a/> 5px <a/> 5px <a/> <button>
</nav>
<Header/>
<aside>
A berifely Describe Blog
<section> Place a Banner image Here <img/> <section> <p> <strong></strong></p>
<ul>
<li><a>in Page links</a></li>
<li><a>in Page links</a></li>
<li><a>in Page links</a></li>
<article> Write a Blog Here
<h2> Heading</h2> </ul>
Authirization of Page and
<p> </br> </p>
Details <img></img>
</article>
<footer>
Add horizontal navigation here ( Social Icons)<i/> <i/> <i/>
</footer>
Task 2:
Add CSS to above developed structure
1
Add container to the Whole Page
Apply colors to borders and the inside of elements.
Distribute margins and padding properly.
Ensure top and bottom margins are evenly spaced.
Maintain perfect alignment across the page.
Add text colors and adjust font sizes for readability.
Keep consistent margins between elements.
Avoid using the height property.
Set the width only as required.
Note:
· Consider that the width property also includes the margin, padding, and border sizes in
your calculations.