TRINITY INTERNATIONAL SS & COLLEGE
PROJECT WORK ON WEB TECHNOLOGY
(COMPUTER SCIENCE)
SUBMITTED BY: SUBMITTED TO:
NAME: Aarif Khan
GRADE: XI 'C1 ' Praveen Koirala
ID CARD NUMBER: 26557
REGISTRATION NUMBER:
KATHMANDU, NEPAL
2021
A project on
WEB TECHNOLOGY
A Report about the partial fulfillment of the requirements of the internal evaluation
of Grade XI under NEB in
Computer science
of
Name : Aarif Khan
Section : C1
ID Number : 26557
Registration Number:
TRINITY INTERNATIONAL SS AND COLLEGE
DILLIBAZAR HEIGHT, KTM
NEPAL
TRINITY INTERNATIONAL SS & COLLEGE
Dillibazar Height, Kathmandu, Nepal
Date:
Letter of Declaration
I hereby declare that the work presented in this project report has been done by
myself under the supervision of Mr. Praveen Koirala and has notbeen
submitted elsewhere for any examination.
All sources of information have been specifically acknowledged by references to
authors or institutions.
Date: 04/25/2073 Signature of the Student:
Registration number:
TRINITY INTERNATIONAL SS & COLLEGE
Dillibazar Height, Kathmandu, Nepal
LETTER OF APPROVAL
The project work submitted to Trinity International SS, by Aarif Khan
entitled “A Tech College Website”
has been approved as the partial fulfillment of the requirements of the internal
evaluation.
Date: 04/25/2023 Signature of Supervisor:
Table of Contents
UNITS Page no.
HTML Theory ............................................................................................. 6
CSS Theory ................................................................................................. 7
Software and hardware requirements:- ....................................................... 8
HTML Code .......................................................................................... 9-13
CSS Code ........................................................................................... 13-18
Screenshots…………………………………………………………..19-22
Conclusion ................................................................................................. 23
Ackwnoledgement………………………………………………………24
Refrences ................................................................................................... 25
Theory (HTML and CSS):-
HTML
HTML is Hypertext Markup Language. HTML is a markup language that is easy
for users to understand. HTML can facilitate novice users or developers in
formatting, compiling, and organizing documents online using the Microsoft Word
program.
HTML functions to make it easier for users when managing or managing data in
the form of documents on a website. So as to produce documents that are
interesting and easy to read by all internet users around the world. HTML has the
advantage of the language used. The markup language for HTML has many
sources and is broad and consistent.
HTML can be run naturally on every website. HTML also has an easier learning
curve and open source that can be run for free. In addition, HTML also has official
website standards by the World Wide Web Consortium on maintaining. And easy
to integrate with PHP, [Link], and even the backend language.
HTML has features that cannot be used logically. So that web pages must be
separated even though they have the same elements. When executing, the browser
can also sometimes be unpredictable. So, the browser cannot render newer.
However, you can still use HTML as needed.
HTML was created by a physicist with the Berners Lee team at the CERN research
institute in Switzerland. The team has an idea about a hypertext system that uses an
internet base. Tim Berners Lee released the first HTML version in 1991. In that
version, there were 18 HTML tags. Hypertext refers to text that has references or
links for other text so that it can be accessed by users.
Since 1991, every HTML released the latest version, always equipped with the
latest attributes and tags. There are currently 140 HTML tags based on the HTML
Element Reference owned by the Mozilla Developer Network. Because of the
popularity and advancement in technology, HTML continues to grow and increase.
HTML is considered a standard website that is already official.
HTML was developed by W3C with a major upgrade in 2014. The result is an
introduction to HTML 5 with new semantics so that it can tell the meaning of its
own HTML content. The existence of a web browser aims to facilitate users when
opening HTML-formatted documents.
CSS
CSS is one of three cornerstone technologies used on the web (the other two are HTML and
JavaScript). CSS stands for Cascading Style Sheets – the clues are really in the words ‘cascading’
and ‘style’ with cascading describing the way that one style can cascade from one to another.
One of the many benefits of CSS is that more than one style can be used within one HTML
document.
CSS is used as a way of defining how HTML code is going to look on a website. Whereas HTML
(Hypertext Markup Language) is used to create content, including written text, CSS alters the way
a web page will look.
So, depending on the data they want to display, a developer might choose to have a page with tabs
running across the top of the page, or along the side.
Or, another developer might choose to use headings and sub heading styles to ensure that the words
leap off the page or, change or revamp an existing webpage entirely.
Perhaps the best way of describing what CSS does is to explain what a page would like if it didn’t
use CSS.
Without CSS web pages are plain and far from inspirational. Words scroll across the whole page
and are difficult to read. But, before CSS that’s exactly what web pages looked like.
The introduction of CSS is partly responsible for how the web looks and feels today. And, far from
being created and therefore finished, it is a continually evolving language.
Firstly, using CSS ensures that your web pages are consistent. Imagine a website with 100s of
pages, now imagine having to input the code to define heading sizes, layout and other display data
and mix that all in with the content each time you wanted to produce a new page. Also, imagine
having a site with 100s of pages and being able to change just one of them while keeping all the
rest the same – CSS also makes that a possibility. Using CSS delivers consistency where it is
needed but is flexible enough to enable you to make changes to individual pages or sections.
According to Wikipedia, the birth of CSS is largely credited to Norwegian Håkon Wium Lie, who
back in 1994 sought to create a universal standardized style sheet for the World Wide Web.
The first site that Lie trialed CSS on was the Arena web browser. From its first creation, Lie went
on to co-create CSS1, CSS2 and RFC 2318 versions with Tim Berners-Lee and Robert Caillou. In
its first decade of existence (1994 – 2004) CSS, in all its specifications, became an established web
standard greatly influencing the look and accessibility of the world wide web as we know it today.
CSS3 was issued in 1999.
Software and hardware requirements:-
Operating system :-Windows 11/2022
Editor :-Visual Stdio Code
Hardware :-i7 processor, RAM 16GB,1TB SSD
Browser :-Chrome
Source code:-
Homepage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="[Link]">
<script src="[Link]
crossorigin="anonymous"></script>
</head>
<body>
<!---Navigation--->
<nav>
<img src="[Link]" alt="">
<div class="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<!--Home-->
<section id="home">
<h2>Enhance Your Future with TechEduca</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit provident
sapiente, voluptatum impedit beatae fuga natus corporis animi temporibus ipsum placeat
eaque doloremque fugiat nobis. Commodi id at consectetur illo?</p>
<div class="btn">
<a class="blue" href="#">Learn More</a>
<a class="yellow" href="#">Visit Courses</a>
</div>
</section>
<!--Features-->
<section id="features">
<h1>Awesome features</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<div class="fea-base">
<div class="fea-box">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<h3>Scholarship Facility</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="fea-box">
<i class="fa fa-certificate" aria-hidden="true"></i>
<h3>Dell Online Course</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="fea-box">
<i class="fa fa-trophy" aria-hidden="true"></i>
<h3>Global Certification</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</section>
<!--Courses-->
<section id="course">
<h1>Our Popular Courses</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<div class="course-box">
<div class="courses">
<img src="[Link]" alt="">
<div class="details">
<span>Updated 21/8/21</span>>
<h6>JavaScript Beginners Course</h6>
<div class="star">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<span>(239)</span>
</div>
</div>
<div class="cost">
$49.99
</div>
</div>
<div class="courses">
<img src="[Link]" alt="">
<div class="details">
<span>Updated 21/8/21</span>>
<h6>JavaScript Beginners Course</h6>
<div class="star">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<span>(239)</span>
</div>
</div>
<div class="cost">
$49.99
</div>
</div>
<div class="courses">
<img src="[Link]" alt="">
<div class="details">
<span>Updated 21/8/21</span>>
<h6>JavaScript Beginners Course</h6>
<div class="star">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<span>(239)</span>
</div>
</div>
<div class="cost">
$49.99
</div>
</div>
<div class="courses">
<img src="[Link]" alt="">
<div class="details">
<span>Updated 21/8/21</span>>
<h6>JavaScript Beginners Course</h6>
<div class="star">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<span>(239)</span>
</div>
</div>
<div class="cost">
$49.99
</div>
</div>
<div class="courses">
<img src="[Link]" alt="">
<div class="details">
<span>Updated 21/8/21</span>>
<h6>JavaScript Beginners Course</h6>
<div class="star">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<span>(239)</span>
</div>
</div>
<div class="cost">
$49.99
</div>
</div>
<div class="courses">
<img src="[Link]" alt="">
<div class="details">
<span>Updated 21/8/21</span>>
<h6>JavaScript Beginners Course</h6>
<div class="star">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<span>(239)</span>
</div>
</div>
<div class="cost">
$49.99
</div>
</div>
</div>
</section>
<!--Registration-->
<section id="registration">
<div class="reminder">
<p>Get 100 of Online Courses for Free</p>
<h1>Register To Get It</h1>
<div class="time">
<div class="date">
18 <br> Days
</div>
<div class="date">
23 <br> Hours
</div>
<div class="date">
06 <br> Hours
</div>
<div class="date">
58 <br> Seconds
</div>
</div>
</div>
<div class="form">
<h3>Create Free Accounts Now</h3>
<input type="text" name="name" placeholder="Name" id="">
<input type="text" placeholder="Email Address" name="" id="">
<input type="text" placeholder="Phone number" name="" id="">
<div class="btn">
<a class="yellow" href="#">Submit Form</a>
</div>
</div>
</section>
</body>
</html>
CSS
@import
url('[Link]
,900;1,100;1,300;1,400;1,800;1,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins',sans-serif;
}
/*Global Tags */
h1{
font-size: 2.5rem;
font-weight: 700;
color: rgb(35, 35, 85);
}
span{
font-size: 0.9rem;
color: #757373;
}
h6{
font-size: 1.1rem;
color: rgb(24, 24, 49);
}
/*--Navigation--*/
nav{
position: fixed;
width: 100%;
background-color: #fff;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 1vw 8vw ;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
}
nav img{
width: 150px;
cursor: pointer;
}
nav .navigation ul{
display: flex;
justify-content: flex end;
align-items: center;
}
nav .navigation ul li {
list-style: none;
margin-left: 30px;
}
nav .navigation ul li a{
text-decoration: none;
color: rgb(21, 21, 100);
font-size: 16px;
font-weight: 500;
transition: 0.3s;
}
nav .navigation ul li a:hover{
color: #FDC938;
}
/*--Home--*/
#home{
background-image: linear-gradient(rgba(9,5,54,0.3),rgba(5,4,46,0.7)),url([Link]);
width: 100%;
height: 100vh;
background-position: center;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding-top: 40px;
}
#home h2{
color: #fff;
font-family: 2.2rem;
letter-spacing: 1px;
}
#home p{
width: 50%;
color: #fff;
font-size: 0.9rem;
line-height: 25px;
}
#home .btn{
margin-top: 30px;
}
#home a{
text-decoration: none;
font-size: 0.9rem;
padding: 13px 35px;
background-color: #fff;
font-weight:600 ;
border-radius: 5px;
}
#home [Link]{
color: #fff;
background-color: rgb(21, 21, 100);
transition: 0.3s ease;
}
#home [Link]:hover{
color: rgb(21, 21, 100);
background:#fff;
}
#home [Link]{
color: #fff;
background-color:#FDC938;
transition: 0.3s ease;
}
#home [Link]:hover{
color:rgb(21, 21, 100);
background:#fff;
}
/*--Features--*/
#features{
padding: 5vw 8vw 0 8vw;
text-align: center;
}
#features .fea-base{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 1rem;
margin-top: 50px;
}
#features .fea-box{
background-color: #F9F9FF;
text-align: start;
}
#features .fea-box i{
font-size: 2.3rem;
color: rgb(44,44,80);
}
#features .fea-box h3{
font-size: 1.2rem;
font-weight: 600;
color: rgb(46,46,59);
padding: 13px 0 7px 0;
}
#features .fea-box p{
font-size: 1rem;
font-weight: 400;
color: rgb(70,70,87);
}
/*--Course--*/
#course{
padding: 8vw 8vw 0 8vw;
text-align: center;
}
#course .course-box{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 1rem;
margin-top: 50px;
}
#course .courses{
text-align: start;
background: #F9F9FF;
height: 100%;
position: relative;
}
#course .courses img{
width: 100%;
height: 60%;
background-size: cover;
background-position: center;
}
#course .courses .details{
padding: 15px 15px 0 15px;
}
#course .courses .details i{
color: #FDC93B;
font-size: 0.9rem;
}
#course .courses .cost{
background-color: rgb(74, 74, 136);
color: #fff;
line-height: 70px;
width: 70px;
height: 70px;
text-align: center;
border-radius: 50%;
position: absolute;
right: 15px ;
bottom: 100px;
}
/* registration */
#registration{
padding: 6vw 8vw 6vw 8vw;
background-image: linear-gradient(rgba(99, 112, 168, 0.5),rgba(81, 91, 233,
0.5)),url("[Link]");
width: 100%;
height: 100%;
background-size:cover ;
background-position: center;
display: flex;
justify-content: space-between;
align-items: center;
}
#registration .reminder{
color: #fff;
}
#registration .reminder h1{
color: #fff;
}
#registration .reminder .time{
display: flex;
margin-top: 40px;
}
#registration .reminder .time .date {
text-align: center;
padding: 13px 33px;
background-color: rgbe(255, 255, 255, 0.25);
backdrop-filter: blur(4px) ;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
border-radius: 10px;
margin: 0 5px 10px 5px;
border: 1px solid rgba(255, 255, 255, 0.18);
font-size: 1.1rem;
font-weight: 600;
}
#registration .form {
background: #fff;
border-radius: 8px;
display: flex;
flex-direction: column;
padding: 40px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
#registration .form input{
margin: 15px 0;
padding: 19px 10px;
border: 1px solid rgb(84, 40, 241);
outline: none;
}
#registration .form input::placeholder{
color: #413c3c;
padding: 500;
font-size: 0.9rem;
}
#registration .form [Link]{
text-decoration: none;
font-size: 0.9rem;
padding: 13px 35px;
background-color: #fff;
font-weight: 600;
border-radius: 5px;
color: #fff;
background: #FDC938;
transition: 0.3s ease;
}
#registration .form [Link]:hover{
color: rgb(21, 21, 100);
background: #fff;
}
#registration .form .btn{
margin-top: 20px;
}
Screenshot:-
Conclusion
HTML and CSS are two of the many major core interfaces that help build
webpages which can be used by anyone with a simple method to use. Many of the
webpages we see today have been developed with the help of HTML and CSS.
They have provided common people with the opportunity to build their own
webpages. Job opportunities have also been created with their help for people with
excellent web designing skills. Thus, they play a huge role in todays technological
society and the internet. Thus learning such skill makes one highly employable.
ACKNOWLEDGEMENT
I'd like to express my heartfelt gratitude to my teacher for providing me with the
wonderful opportunity to work on this amazing project on the topic of HTML &
CSS, which also allowed me to do a lot of research and learn a lot of new things.
I'm grateful to have been provided with this opportunity which enabled me to make
simple and useful websites as well as learning the basics of advance web
development attain a lot of information related to HTML & CSS.
References:-
I would like to thank google and my text book for providing me with information
about various topics in this project and my teacher Lal Krishna Malik for
teaching me about HTML and CSS, I would also like to thank W3 schools as well
as Google for giving me indepth knowledge of various tags and attributes.
