Scribd
Upload
55 views5 pages

CF Lab 8 Web

The document provides instructions for designing a webpage including HTML and CSS code. It must include navigation tabs for home, information, gallery, and about. Code is provided to create the webpage structure and styling for the different pages, including the home page with an introduction and images, the about page with information about the author, the information page with details about the topic, and the gallery page with images. CSS code is included to style elements like text colors and backgrounds.

Uploaded by

mbshahid hanif
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
55 views5 pages

CF Lab 8 Web

The document provides instructions for designing a webpage including HTML and CSS code. It must include navigation tabs for home, information, gallery, and about. Code is provided to create the webpage structure and styling for the different pages, including the home page with an introduction and images, the about page with information about the author, the information page with details about the topic, and the gallery page with images. CSS code is included to style elements like text colors and backgrounds.

Uploaded by

mbshahid hanif
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

LAB TASKS

• Design a webpage including html & CSS. Include all the things told in lab and the things
included in assignment. The following navigation tabs must be added:
1. Home ( Give info about what your website is about)
2. Information (Include the detailed information related to the particular technology)
3. Gallery (Include images and Videos of technology)
4. About (Give the information about yourself.
------------------------------------------------------------------------------------------------------------------------------------------

5. <!Doctype html>
6. <html>
7.   <head>
8.     <h1><center>MY FIRST WEBSITE</center></h1>    <style>h1{color:
rgb(117, 17, 17);}
9.       h1{color:blueviolet;}
10.      body{background-color:rgb(173, 213, 236);}
11.    </style>
12.  </head>
13.  <body>
14.  <ul>
15.    <li><a class="active"
href="file:///C:/Users/Administrator/Desktop/home.html">Home</a></li>
16.    <li><a
href="file:///C:/Users/Administrator/Desktop/information.html">News</a></
li>
17.    <li><a
href="file:///C:/Users/Administrator/Desktop/gallery.html">Gallery</a></
li>
18.    <li><a
href="file:///C:/Users/Administrator/Desktop/about.html">About</a></li>
19.  </ul>
20. 
21.</style>
22.</html>
Home
<html>
    <head>
        <link rel="stylesheet" href="link.css">
    </head>
    <body>
<h4>WELCOME TO HOME PAGE</h4>
<p> 1) It clearly answers “Who I am,” “What I do,” and/or “What can you (the
visitor) do here.” ...<br>
    2) It resonates with the target audience. ...<br>
    3) It communicates a compelling value proposition. ...<br>
    4) It's optimized for multiple devices. ...<br>
    5) It includes calls-to-action (CTAs).</p>
    <img src="C:\Users\Administrator\Downloads\hp1.jpg"/>
    <img src="C:\Users\Administrator\Downloads\hp2.jpg"/>
    </body>
</html>
CSS
<style type="text/css">

h1{color: rgb(117, 17, 17);}


p{color: rgb(122, 18, 148);
background-color: rgb(21, 206, 206);}
body{background-color:rgb(0, 162, 255);}

</style>
       
       
About
<html>
    <head>
        <tilte style="color:rgb(3, 9, 36)">
<center><h3>ABOUT</h3></center></tilte>
        <style>
            p{color:rgb(3, 2, 1);
            background-color:blue;}
        body{background-color:  rgb(43, 144, 226);}
            p{background-color:rgb(30, 81, 122);}
        </style>
    </head>
    <body>
<p>What u mean by about?
    About as a preposition. The most common meaning of about as a preposition
    is 'on the subject of' or 'connected with': … About as an adverb.
     We use about as an adverb when we talk about time, number and quantity.
About makes the time
     , number or quantity less specific and more approximate .</p>
    <img src="C:\Users\Administrator\Downloads\I1.png"/>
    &nbsp
    <img src="C:\Users\Administrator\Downloads\I2.jpg"/>
    </body>
</html>
Information
<html>
    <head>
        <tilte style="color:rgb(3, 9, 36)">
<center><h3>INFORMATION</h3></center></tilte>
        <style>
            p{color:rgb(3, 2, 1); background-color:blue;}
        body{background-color:  rgb(43, 144, 226);}
            p{background-color:rgb(30, 81, 122);}
        </style>
    </head>
    <body>
<p>What is information and examples?<br>
    Image result for information
    It is the set of data that has been organized for direct utilization of mankind,
    as information helps human beings in their decision making process. Examples are:
     Time Table, Merit List, Report card, Headed tables, printed documents, pay
slips, receipts, reports etc.</p>
    <img src="C:\Users\Administrator\Downloads\I1.png"/><br>
    <img src="C:\Users\Administrator\Downloads\I2.jpg"/>
    </body>
</html>
Gallery
html>
    <head>
        <style>
        h3{color: rgb(8, 5, 5);}
        h4{color: rgb(15, 8, 9);}
p{color: rgb(184, 127, 199);
background-color: rgb(233, 177, 200);}
body{background-color:rgb(107, 4, 30);}
</style>
        <h3><center>MY GALLERY</center></h3>
    </head>
    <body>
<h4>WELCOME TO MY GALLERY</h4>
<p>
    <img src="C:\Users\Administrator\Downloads\hp1.jpg"/>
    <img src="C:\Users\Administrator\Downloads\hp2.jpg"/><br>
&nbsp
    <img src="C:\Users\Administrator\Downloads\I1.png"/>
    <img src="C:\Users\Administrator\Downloads\I2.jpg"/>
    </body>
</html>
OUTPUT:
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

You might also like