Scribd
Upload
4 views

Web Technology Lab 1

Uploaded by

iammohitpandit52
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Web Technology Lab 1

Uploaded by

iammohitpandit52
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

1.

We Are Going To Design School / College


Website Using HTML And CSS
In our website, we are going to design three main section : Header section, Main Body
And Footer section

In this tutorial we are going to design these three section with the help of their
subsections. Subsections are created as per the website content.

Header

 Top header

 Logo

 Main menu
Main Body

 Slider section

 marquee, about us

 Notice Board, Upcoming Events

 Gallery
Footer

 Quick link

 Contact information

 Social media link

 Copyright information
Firstly, Create the folder on dekstop, my folder name is college website. Inside
folder college website, create two sub folder : - 1) css and 2) images

Inside college website folder I am creating HTML file file name - index.html

Inside css folder I am creating CSS file - file name - style.css


Meta html code. Copy And paste the code in index.html

<!---------- Meta HTML Starts --------->


<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!---------- Meta HTML Ends --------->

Common CSS. Copy and paste the code in style.css


style.css
/********** Common CSS Starts **********/
*{
margin:0px;
padding:0px;
}
html, body {
font-family Roboto, sans-serif, arial;
font-size: 14px;
color: #242424;
}
.container {
width: 1200px;
margin:0px auto;
}
.main-section {
width: 100%;
float: left;
padding:50px 0px 40px 0px;
}
.heading {
font-size: 22px;
font-weight: 500;
border-bottom: 1px solid #ff5722;
margin-bottom:25px;
color: #ff5722;
}

2) Now, we will design Top Header section.


In our top header section, we are having content that are moving. For Creating that
movement we are using marquee tag.
copy and paste the below code to design top header section

Top Header section HTML code. Copy this code and paste in
index.html file
index.html
<!------ Header HTML Starts ------->
<div class="header">
<div class="container">
<b> NEWS : </b>
<marquee> My college: Intelligence plus curiosity-that is the root of true education. </marquee>
</div>
</div>
<!------ Header HTML Ends ------->
Top Header section CSS code. Copy this code and paste in
style.css file
style.css
/********* Header HTML CSS Starts **********/
.header {
background: #46b7c1;
padding: 6px;
}
.header b {
background: #fff;
color: red;
padding:10px;
font-size: 20px;
}
.header marquee {
font-size:20px;
color: #ffffff;
width: 80%;
}
/********* Header HTML CSS End **********/
Output Of Top Header

3) Now, we will design Logo And Main Menu


section.
In our logo and main menu section, we are having logo and nav bar. For Creating logo
we have img tag and for nav bar we are using ul tag.

Please copy and paste the below code to design Logo and Main Menu section
Top Logo And Main Menu Section HTML code. Copy this code
and paste in index.html file
index.html
<!------ Design Logo And Main Menu Section HTML Startss ------->
<div class="container">
<!-------------------------LOGO SECTION--------------------------->
<img src="images/logo.png" class="logo">
<!-------------------------MENU SECTION-------------------------->
<nav>
<a href="#">Home</a>
<a href="#">About us</a>
<a href="#">Events</a>
<a href="#">Gallery</a>
<a href="#">Notice Board</a>
<a href="#">Blogs</a>
<a href="#">Contact us</a>
</nav>
</div>
<!------ Design Logo And Main Menu Section HTML End ------->
Top Logo And Main Menu Section CSS code. Copy this code
and paste in style.css file
style.css
/********* Design Logo and Menu section CSS Starts **********/
.logo {
height:60px;
}
/*Menu Section Menu Section*/
nav {
float: right;
padding:25px 0px;
}
nav a {
color: black;
text-decoration: none;
font-size:18px;
padding:2px 10px;
font-weight:500;
}
/********* Design Logo and Menu section CSS End **********/

4) Now, we will design Slider section.


In our slider section, we are having slider image that covers the full width. For Creating
slider image we are using img tag.

Please copy and paste the below code to design Slider section
Slider Section HTML code. Copy this code and paste in
index.html file
index.html
<!------ Slider HTML Starts ------->
<div class="slider">
<img src="images/slider.jpg">
</div>
<!------ Slider HTML End ------->
Slider Section CSS code. Copy this code and paste in style.css
file
style.css
/********* Slider CSS Starts **********/
.slider img {
width: 100%;
}
/********* Slider CSS End **********/

5) Now, we will design Campus, Events and Notice


Board section.
In our Campus, Events and Notice Board section, we are having image and content.
For Creating Campus, Events and Notice Board section we have img tag , marquee
tag , heading tag and ul tag .

Please copy and paste the below code to design Campus, events and notice board
section

Campus, Events and Notice Board Section HTML code. Copy


this code and paste in index.html file
index.html
<!------ Campus, Events and Notice Board HTML Starts ------->
<div class="main-section" style="background:#f0f3fa">
<div class="container">
<!--------------------------------CAMPUS NEWS SECTION ---------------------------->
<div class="event">
<h2 class="heading">Campus News</h2>
<div>
<marquee direction="up" scrollamount="7" style="height:340px;">
<ul>
<li>
<i>01-April-2023 :</i> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<img src="images/new.gif">
</li>
<li>
<i>01-April-2023 :</i> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<img src="images/new.gif">
</li>
<li>
<i>01-April-2023 :</i> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<img src="images/new.gif">
</li>
<li>
<i>01-April-2023 :</i> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<img src="images/new.gif">
</li>
<li>
<i>01-April-2023 :</i> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<img src="images/new.gif">
</li>
<li>
<i>01-April-2023 :</i> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<img src="images/new.gif">
</li>
<li>
<i>01-April-2023 :</i> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<img src="images/new.gif">
</li>
</ul>
</marquee>
</div>
</div>
<!----------------------------EVENT SECTION ----------------------->
<div class="event">
<h2 class="heading">Events</h2>
<div>
<ul>
<li>
<span class="event-date">29 <br> April </span> Lorem Ipsum is simply dummy text of the printing and
typesetting industry.
</li>
<li>
<span class="event-date">29 <br> April </span> Lorem Ipsum is simply dummy text of the printing and
typesetting industry.
</li>
<li>
<span class="event-date">29 <br> April </span> Lorem Ipsum is simply dummy text of the printing and
typesetting industry.
</li>
<li>
<span class="event-date">29 <br> April </span> Lorem Ipsum is simply dummy text of the printing and
typesetting industry.
</li>
<li>
<span class="event-date">29 <br> April </span> Lorem Ipsum is simply dummy text of the printing and
typesetting industry.
</li>
</ul>
</div>
</div>
<!--------------------------------NOTICE BOARD SECTION ------------------------->
<div class="event">
<h2 class="heading">Notice Boards</h2>
<div>
<ul>
<li>
<img src="images/folder.png"> Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</li>
<li>
<img src="images/folder.png"> Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</li>
<li>
<img src="images/folder.png"> Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</li>
<li>
<img src="images/folder.png"> Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</li>
<li>
<img src="images/folder.png"> Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</li>
<li>
<img src="images/folder.png"> Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</li>
</ul>
</div>
</div>
</div>
</div
<!------ Campus, Events and Notice Board HTML End ------->
Campus, Event and Notice Board Section HTML code. Copy
this code and paste in index.html file
style.css
/********* Campus, Events and Notice Board section CSS Starts **********/
.event {
width: 32%;
margin-right: 1%;
float: left;
background-color: #fff;
padding: 10px;
}
.event .heading {
border-bottom: 1px solid #46b7c1;
padding: 5px;
color: #fff;
background: #46b7c1;
text-align: center;
}
.event ul li {
margin-bottom: 20px;
width: 100%;
float: left;
list-style: none;
}
.event-date {
background: #46b7c1;
float: left;
text-align: center;
font-size: 14px;
color: #fff;
padding: 8px 12px;
margin-right: 10px;
}

/********* Campus, Events and Notice Board section CSS End **********/

6) Now, we will design About Us section.


In our About Us section, we are having image and content. For Creating that we are
using img tag and heading tag.

Please copy and paste the below code to design About Us section

About Us Section HTML code. Copy this code and paste in


index.html file
index.html
<!---------- About Us HTML Starts --------->
<div class="main-section">
<div class="container about-us">
<div>
<h2 class="heading">About My HTML CODING SCHOOL</h2>
<h4>A Unique Heritage School .</h4>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply
dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
is simply dummy text of the printing and typesetting industry. </p>
</div>
<img src="images/about-us.jpg">
</div>
</div>
<!---------- About Us HTML Ends --------->
About Us Section CSS code. Copy this code and paste in
style.css file
style.css
/********** About Us CSS Starts **********/
.about-us div {
width: 45%;
float: left;
line-height: 30px;
font-size: 18px;
}
.about-us h4 {
font-size: 22px;
}
.about-us p {
line-height: 42px;
}
.about-us img {
width: 40%;
float: left;
}
/********** About Us CSS Ends **********/

7) Now, we will design School Info, Award and


Certificate section.
In our School Info, Award and Certificate section, we are having image and content.
For Creating that we are using img tag and heading tag.

Please copy and paste the below code to design School Info, Award and Certificate
section

School Info, Award and Certificate Section HTML code. Copy


this code and paste in index.html file
index.html
<!---------- School Info, Award and Certificate HTML Starts --------->
<div class="main-section award" style="background:#f0f3fa">
<div class="container">
<!---------------- SCHOOL INFO SECTION --------------->
<div class="event">
<h2 class="heading">School Info</h2>
<div>
<h3>My HTML CODING SCHOOL</h3>
<p>
<b>Principal : </b> Dr. John Doe (HTML)
</p>
<p>
<b>Address : </b> Ring Road, Near Google Mall
</p>
<p>
<b>City : </b> New Delhi, India.
</p>
<p>
<b>Contact No. : </b> +1234 456 7890
</p>
<p>
<b>Email Id : </b>Contact@admin LabArtisan
</p>
</div>
</div>
<!---------------- SCHOOL AWARD SECTION --------------->
<div class="event">
<h2 class="heading">Our School Awards</h2>
<div>
<img src="images/award.jpg">
</div>
</div>
<!---------------- SCHOOL CERTIFICATE SECTION --------------->
<div class="event">
<h2 class="heading">My School Certificate</h2>
<div>
<img src="images/certificate.png">
</div>
</div>
</div>
</div>
<!---------- School Info, Award and Certificate HTML Ends --------->

School Info, Award and Certificate Section CSS code. Copy


this code and paste in style.css file
style.css
/********** School Info, Award and Certificate CSS Starts **********/
.award p {
width: 100%;
float: left;
font-size: 16px;
}
.award img {
width: 100%;
}
.award b {
min-width: 115px;
float: left;
margin-bottom: 20px;
}
.award h3 {
font-size: 23px;
margin-bottom: 20px;
text-align: center;
}
8) Now, we will design Testimonial section.
In our testimonial section, we are having content and images . For Creating heading
we are using heading tag

Please copy and paste the below code to design Testimonial section

Testimonial section HTML code. Copy this code and paste in


index.html file
index.html
<!--------- Testimonial HTML Starts -------->
<div class="main-section ">
<div class="container">
<h2 class="heading">What Parents Say About Our School</h2>
<div class="testimonial">
<div class="testimonial-text"> Contrary to popular belief, Lorem Ipsum is not simply. It has roots in a piece
of classical Latin literature from 45 BC, making it over 2000 years old. Richard, a Latin professor at Hampden-
Sydney College. </div>
<div class="testimonial-detail">
<div class="testimonial-img">
<img src="images/testimonial-1.jpg">
</div>
<div class="testimonial-name">
<h5>Niccky</h5>
<p>Web Devloper</p>
</div>
</div>
</div>
<div class="testimonial">
<div class="testimonial-text"> Contrary to popular belief, Lorem Ipsum is not simply. It has roots in a piece
of classical Latin literature from 45 BC, making it over 2000 years old. Richard, a Latin professor at Hampden-
Sydney College. </div>
<div class="testimonial-detail">
<div class="testimonial-img">
<img src="images/testimonial-2.jpg">
</div>
<div class="testimonial-name">
<h5>Richa</h5>
<p>Web Devloper</p>
</div>
</div>
</div>
<div class="testimonial">
<div class="testimonial-text"> Contrary to popular belief, Lorem Ipsum is not simply. It has roots in a piece of
classical Latin literature from 45 BC, making it over 2000 years old. Richard, a Latin professor at Hampden-
Sydney College. </div>
<div class="testimonial-detail">
<div class="testimonial-img">
<img src="images/testimonial-3.jpg">
</div>
<div class="testimonial-name">
<h5>Jiya</h5>
<p>Web Devloper</p>
</div>
</div>
</div>
</div>
</div>
<!--------- Testimonial HTML End -------->
estimonial section CSS code. Copy the code and paste in
style.css
style.css
/********* Testimonial Section CSS Starts **********/
.testimonial {
width: 30.5%;
float: left;
margin-right: 2.5%;
}
.testimonial-text {
background: #46b7c1;
padding: 20px;
line-height: 35px;
border-radius: 10px;
color: #fff;
font-size: 18px;
text-align: center;
}
.testimonial-detail {
float: left;
margin-top: 10px;
}
.testimonial-img {
float: left;
}
.testimonial-img img {
border-radius: 50%;
}
.testimonial-name {
margin-left: 10px;
float: left;
}
.testimonial-name h5 {
font-size: 18px;
margin-top: 8px;
}
/********* Testimonial Section CSS End **********/

9) Now, we will design Gallery section.


In our Gallery section, we are having images at a particular width. For Creating images
we have img tag.

Please copy and paste the below code to design Gallery section

Gallery section HTML code. Copy this code and paste in


index.html file
index.html
<!--------- Gallery HTML Starts -------->
<div class="main-section gallery" style="background:#f0f3fa">
<div class="container ">
<h2 class="heading">Our School Gallery</h2>
<img src="images/gallery-1.jpg">
<img src="images/gallery-2.jpg">
<img src="images/gallery-3.jpg">
<img src="images/gallery-4.jpg">
<img src="images/gallery-5.jpg">
<img src="images/gallery-6.jpg">
<img src="images/gallery-7.jpg">
<img src="images/gallery-8.jpg">
</div>
</div>
<!--------- Gallery HTML End -------->
Gallery section CSS code. Copy this code and paste in
style.css file
style.css
/********* Gallery section CSS Starts **********/
.gallery img {
width: 24%;
}
/********* Gallery section CSS End **********/

10) Now, we will design Placement section.


In our Placement company section, we are having Placement company information
and logo. For Creating logo we have img tag and marquee tag.

Please copy and paste the below code to design Placement section

Placement Company section HTML code. Copy this code and


paste in index.html file
index.html
<!--------- Placement HTML Starts -------->
<div class="main-section">
<div class="container">
<h2 class="heading">Placement</h2>
<marquee class="placement" direction="left" scrollamount="10">
<img src="images/placement.jpg">
</marquee>
</div>
</div>
<!--------- Placement HTML End -------->

11) Now, we will design Footer section.


In our footer section, we are having icons, images, anchor . For Creating footer section
we have ul, a(anchor) tag .

Please copy and paste the below code to design footer section

Footer Section Code. Copy this code and paste in index.html


file
index.html
<!--------- Footer HTML Starts -------->
<div class="footer">
<div class="container">
<div class="footer-sect">
<img class="footer-logo" src="images/footer-logo.png">
</div>
<div class="footer-sect">
<a href="#"> Home</a>
<a href="#"> About us</a>
<a href="#"> Tutorial</a>
<a href="#"> Event</a>
<a href="#"> Gallery</a>
<a href="#"> Press Release</a>
<a href="#"> Courses</a>
<a href="#"> Contact Us</a>
</div>
<div class="footer-sect">
<img src="images/icon-fb.png">
<img src="images/icon-tw.png">
<img src="images/icon-in.png">
<img src="images/icon-li.png">
</div>
</div>
</div>
<!--------- Footer HTML End -------->
Footer Section CSS Code. Copy this code and paste in
style.css file
style.css
/********* Footer section CSS Starts **********/
.footer {
background-color: #46b7c1;
padding: 20px 0px;
width: 100%;
float: left;
}
.footer-logo {
width: 70%;
}
.footer-sect {
width: 100%;
float: left;
text-align: center;
margin-top: 20px;
}
.footer-sect a {
color: white;
margin-left: 10px;
text-decoration: none;
}
/********* Footer section CSS End **********/

You might also like