IICT
Lab Task No 8
Name: Abubakar
Submitted to: Mr.
Asif
Reg No: 23-CS-077
Section: C
Course name: IICT
Course code: CS-101
Page 1:
Page 2:
Code for Page 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<style>
body
{
font-family: 'Arial', sans-serif; margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f4f4f4;
}
header
{
background-color: #333;
color: #fff;
text-align: center; padding:
1em 0;
}
nav h1
{
margin: 0;
font-size: 1.5em;
}
section
{
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
img
{
height: 200px; /* Fixed typo: added 'px' */
margin-bottom: 20px;
}
h1
{
color: #333;
}
article
{
margin-bottom: 30px;
}
h2
{
color: #333;
}
ul
{
list-style-type: none;
padding: 0;
}
li
{
margin-bottom: 10px;
}
footer
{
text-align: center;
padding: 10px;
background-color :#333;
color: #fff;
}
</style>
</head>
<body>
<header>
<nav>
<h1>Portfolio!</h1></nav>
</header>
<section>
<img src="[Link]
[Link]/images/characters/large/2800
/[Link]" alt="Picture" height="200">
<div>
<h1>Abdul Wahab</h1>
</div>
<article>
<h2>Contact Information:</h2>
<ul>
<li><strong>Email:</strong> abc@[Link]</li>
<li><strong>Phone:</strong> +92 090078601</li>
</ul>
</article>
<article>
<section>
<h2>Education:</h2>
<ul>
<li>
<h3>Matric:</h3>
<p>ABC School, 2019-21</p>
</li>
<li>
<h3>FSC:</h3>
<p>XYZ College, 2021-23</p>
</li>
</ul>
</section>
</article>
<article>
<h2>Skills:</h2>
<a href="[Link]"><p>Forward</p></a>
</article>
</section>
<footer>
<p><i><strong>© 2023 Copyright. All rights
reserved.</strong></i></p>
</footer></body></html>
Code for Page 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Education</title>
<style>
body
{
font-family: 'Arial', sans-serif; margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f4f4f4;
}
header
{
background-color: #333;
color: #fff;
text-align: center; padding:
1em 0;
}
nav h1
{
margin: 0;
font-size: 1.5em;
}
section
{
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
article
{
margin-bottom: 30px;
}
h2
{
color: #333;
}
ul
{
list-style-type: none;
padding: 0;
}
li
{
margin-bottom: 10px;
}
footer
{
text-align: center;
padding: 10px;
background-color: #333;
color: #fff;
}
</style>
</head>
<body>
<header>
<nav>
<h1>Skills</h1>
</nav>
</header>
<section>
<article>
<h2>Skills:</h2>
<ul>
<li>Gaming</li>
<li>Programming</li>
<li>Photography</li>
</ul><a href="[Link]"><p>Back</p></a>
</article>
</section>
<footer>
<p><i><strong>© 2023 Copyright. All rights
reserved.</strong></i></p>
</footer>
</body>
</html>
Conclusion:
Today, we explored Hyper Text Markup Language (HTML) in the lab.
HTML serves as the code responsible for organizing the structure and
content of a web page.
We discovered that HTML tags, such as paragraph tags, heading tags, div
tags, anchor tags, image tags, and methods for linking web pages, play a
crucial role in designing website structures.
Additionally, we delved into web designing using Cascading Style Sheets
(CSS) during this lab session.