0% found this document useful (0 votes)
13 views

HTML Lab 01

HTML Lb 01

Uploaded by

shazil.ali
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
13 views

HTML Lab 01

HTML Lb 01

Uploaded by

shazil.ali
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

 HTML CSS 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.

You might also like