0% found this document useful (0 votes)
3 views34 pages

Lab Report 3 - 5746419962573197457

The document provides a comprehensive overview of web technologies, focusing on HTML and CSS. It covers the basics of HTML structure, tags, and their usage, as well as the introduction to web browsers and search engines. Additionally, it includes practical examples of web page designs demonstrating various HTML elements and CSS styling techniques.

Uploaded by

saugatphuyal20
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
3 views34 pages

Lab Report 3 - 5746419962573197457

The document provides a comprehensive overview of web technologies, focusing on HTML and CSS. It covers the basics of HTML structure, tags, and their usage, as well as the introduction to web browsers and search engines. Additionally, it includes practical examples of web page designs demonstrating various HTML elements and CSS styling techniques.

Uploaded by

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

Web Technology (HTML & CSS)

Introduction to HTML
Hyper text markup language (HTML)is a standard mark-up language used to develop webpage.
Hypertext is used for organizing the information and linking the related document together by
using word or link. Such link are called hyper link.
HTML is the standard markup language used to develop the webpage. Webpage is simply an
electronic document written with the use of HTML tags.
Some features of HTML are:
1. It is simple and standard markup language to make websites.
2. It provides hyperlink to traverse from one website to another.
3. It is easy to insert image, multimedia, animation, etc on the webpage.
4. We can add effect on the text , image, tablr , webpage, etc by using css and java-script.
5. It is also possible to embed application to access database from webpage.
6. HTML code are written in any text editor like notepad & vs-code and save the file with
extension .htm or .html .

Basic structure of html:


<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

INTRODUCTION TO WEB BROWSER


Web browser is an application software which helps to insert to update and to retrievedifferent
forms of information such as text, audio, video, graphic, animation etc from the world wide
web. A user can request for information from the website and the web browser retrieves the
information from the respective web server and present it in the web browser. The major web
browser are: Google chrome, Microsoft edge, Opera, Safari, Mozilla firefox.
Introduction to SERCH ENGINE
Search engine is the web application or website which help to search the information from the
world wide web. The indexing system that makes index file according to the information
provided by the spider which helps for search optimization. The most common used search
engine are: Google, Yahoo, Bing, Altavista, AOL ,etc .

DEFINATION OF TAG
A tag is defined as the group of the character or string surrounded by the smaller od grater than
sign < >. The tag name has unique identification of the tag. For example the <body> tag has
attribute for the bgcolor with value green. Mainly there are two types of tags they are : singular
tag and pair tag:
Singular tag: The type of tag which do not have ending tag ,it is also known as empty tag or
open tag. For example <hr> <br> <!>.
Pair tag: these tags have both starting and ending tags. For example <html><head><body> etc
have both tags.

BASIC TAG OF HTML


The basic tag of html are:
1. <HTML>Tag
2. <HEAD>Tag
3. <BODY>Tag
1.<HTML>Tag
The <html> tag is the root tag of html codes which consist of all the other tags except
<!DOCTYPE html> tags. You can use the lang attribute to specify the language of the content.
2.<HEAD>Tag
This tag specifies the document header of the webpage which includes the <title>tag <metatag
<style>tag <link>tag <script>tag and many more.
3.<BODY>Tag
This tag defines the actual content of the webpage that can be displayed on the web browser.
We can write almost al the html tag inside this tag. bgcolor, background, link, text, alink, vlink
are the attribute of the <body> tag.

Anchor tag and hyperlink


A hyperlink is a link between two files and it is defined by anchor<a> tag in html. The attribute
href (hyperlink reference) helps to create the link between two files. We can traverse different
webpage through the hyperlink. A hyperlink can be created to another html file, picture file,
email URL, phone number and even with in the section of the webpage. Normally a link page
is opened on the current windows of the browser and you can open the page on the new window
by using the attribute target with value_blank.

FORM
Form is the graphical interface on webpage for the user to enter the data. The data are sent to
the web server for further processing or storing. The form is defined by the <form> tag and the
form elements are defined by the <input> <textarea> <button> <select> <option> <fieldset>
<optgroup> and <label>.

INTRODUCTION TO CSS (Cascading Style Sheet)


CSS specifies the additional properties on html tags such as paragraph, font, heading
,background, table, etc to make dynamic effect on the webpage. CSS is the text file which
consist set of properties for determining how information on a webpage should be displayed. It
is case sensitive. There are 3 ways to embed CSS on HTML document they are:
• Inline CSS
• Internal CSS
• External CSS

1.Inline CSS
In this method of style the style is defined by simply using the style attribute with in the <html>
tag or element . Example:
<html>
<head><title> inline style CSS</title></head>
<body>
<h1style “font-size:100pt; color: blue; text-decoration: underline ”> Nepal </h1>
</body>
</html>
2. internal CSS
This type of style is visible within the html file only. Example 34 sets the background color to
tomato, sets the text color of <h1> tag to orange with font-size:30 and sets text color of
paragraph <p> tag to blue with font-size 20. the body eliable inge size of the font in points mge
the font front style by using <style> element element Itag In chead section age the font color
Example 34 <html> es paragraph background color mes paragraph background image <style>
<head><title>InternalStyle</title> paragraph border body{background-color:violet:) es
paragraph border color
h1 {color:orange; font-size:30pt;) </style>
p{color: blue; font-size:20pt;) tack swe s paragraph border width in pixel
</head> <body>
<h1>Nepal</h1>
<p> Federal Democratic Republic of Nepal, is a country in South Asia.lt is located mainly in
the Himalayas, but also includes parts of the Indo-Gangetic Plain. It is the 49th largest country
by population and 93rd largest country by area. <br> <br>Source:wikipedia.org</p>
</body>
</html>
3.External CSS
An external style sheet is a separate html document file with file extensen.on. The file contains
css rules which are linked to the html file by using <link> tag The is defined inside <head> tags
and it has two main attributes rel and href. The attri rel defines type stylesheet and the attributes
href defines the external reference of conte For example: <link rel="stylesheet"
href"filename.css"> Example 36 gives an idea about external style sheet. There are two files
first file test.css contents css scripts and the second file test.html contents the html codes. Save
both the files in the same folder, otherwise give css file name with path. Example 36 HTML
File
<html> <head> <link ml="stylesheet" hrefst.css"></head>
<body> <h1>Kathmandu</h1>
<p>City of Temples Kathmandu is the capital city of Negal</p>
</body>
<html>
CSS File
body {(background-color-violet) background color red font-family Calibri. font-size: 200% }
P{color blue font-family: verdana font-size: 150%;}

PROGRAM STARTED
1. Design the web page showing the use of different heading, with background color and align
attribute.
<!DOCTYPE html>
<html>
<head>
<title> HTML heading</title>
</head>
<body>
<h1 align="center"><b>HTML Heading</b></h1>
<h1 align="left"> Demonstrate h1 tag</h1>
<h2 align="right"> Demonstrate h2 tag</h2>
<h3 align="center"> Demonstrate h3 tag</h3>
<br>
<h4 align="left"> Demonstrate h4 tag</h4>
<h5 align="right"> Demonstrate h5 tag</h5>
<h6 align="center"> Demonstrate h6 tag</h6>

</body>
</html>
Output screen :
2. Design the web page that demonstrates the uses of different text formatting tag. (<b>, <i>,
<u>,<sub>, <sup>, <em>, <strong>, <s>, <big>, <small>, <blockquote> so on.
HTML Code
<!doctype html>
<html>
<head><title>formatting tag</title></head>
<body>
<b> my name is pawan </b><br>
<i> my name is pawan</i><br>
<u> my name is pawan</u><br>
H<sub>2</sub>O<br>
A<sup>2</sup>+2AB+b<sup>2</sup><br>
<em> my name is pawan </em><br>
<strong> my name is pawan </strong><br>
<s> my name is pawan</s><br>
<big> my name is pawan </big><br>
<small> MY NAME IS PAWAN </small><br>
</body>
</html>

Output
3. Design a web page with three paragraphs with left, right and center alignment respectively.
Then font color, size and font face of the paragraphs should be different as your wish. Also draw
horizontal line between each paragraph with different size, width and color.
<!DOCTYPE html>
<html>
<head>
<title> Paragraphs style </title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 10px;
}
.left {
text-align: left;
font-size: 18px;
color: black;
font-family: 'Times New Roman', Times, serif;
}
.right {
text-align: right;
font-size: 20px;
color: green;
font-family: 'Times New Roman', Times, serif;
}
.center {
text-align: center;
font-size: 20px;
color: red;
font-family: 'Times New Roman', Times, serif
}
.hr1 {
border: 3px dotted black;
}
.hr2 {
border: 5px solid purple;
}
</style>
</head>
<body>
<p class="center">st. Lawrence college </p>
<hr class="hr1">
<p class="right">st. Lawrence college.</p>
<hr class="hr2">
<p class="left ">st. Lawrence college.</p>
</body>
</html>
Output screen:

4. Design a page with marquee of multiple texts with different attribute like direction,
scroll amount, width, bgcolor and loop.
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Marquee Example</title>
</head>
<body>
<h2>Marquee</h2>
<marquee direction="right" scrollamount="15" width="80%" bgcolor="lightblue"
loop="5">
Pawan yogee
</marquee>
<br><br>
<marquee direction="left" scrollamount="10" width="60%" bgcolor="yellow" loop="3">
Pawan yogee.
</marquee>
<marquee direction="up" scrollamount="5" width="40%" bgcolor="purple" loop="2">
Pawan yogee
</marquee>
<br><br>2
<marquee direction="down" scrollamount="3" width="20%" bgcolor="red" loop="1">
Pawan yogee
</marquee>
</body>
</html>

Output screen:
4. Design a web page to insert your image, audio and video tag with different
attributes.
HTML Code:
<!DOCTYPE html>
<html>
<head><title>Audio Video & Image tag</title></head>
<body>
<audio controls>
<source src="Bicycle Ride - Jeremy Korpas.mp3">
</audio>
<br>

<iframe width="560"
height="315"src="https://www.youtube.com/embed/_SLw3SbzUyk?si=hM0G7F7et9dG1S7d
"title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-
write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<br>
<img src="nature.jpg" height="100" width="100">
</body>
</html>
Output screen:

6. Design a page with internal link, external link (Facebook, YouTube, your different
webpage)and also include email link in your page.
<!DOCTYPE html>
<html >
<head>
<title>Webpage with Links</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<ul>
<li><a href="#about">Go to About Section (Internal Link)</a></li>
<li><a href="https://www.facebook.com" >Visit Facebook (External Link)</a></li>
<li><a href="https://www.instagram.com/" >Watch on instagram (External Link)</a></li>
<li><a href="diffirent heading.html" >heading file in my computer (Internal Link to a
Different Page)</a></li>
<li><a href="mailto:grishmaacharya167@gmail.com">Send Me an Email (Email
Link)</a></li>
</ul>
</body>
</html>
Output screen:

7. Design the following list in HTML.


HTML Code:
<!DOCTYPE html>
<html>
<head> <title> software </title> </head>
<body>
<h1> Types of Software </h1>
<ul type="disc" >
<li> System Software </li>
<ol type="A" start="1">
<li> Operating System </li>
<li> Language Processor </li>
<dl>
<dt> Compiler </dt>
<dd> Translate high level into machine at single attempt.
</dd>
<dt> Interpreter </dt>
<dd> Translate high level into machine one statement at a time. </dd>
<dt> Assembler </dt>
<dd> Translate assembly level language into a machine level language. </dd>
</dl>
<li> Utility Software </li>
<li> Device Driver </li>
</ol>
<li> Application Software </li>
<ul type="circle" >
<li> Package Software </li>
<ol type="i" start="1">
<li> Word Processing Software </li>
<li> Databus Software </li>
<li> Mobile Apps </li>
</ol>
<li> Tailored Software </li>
</ul>
</ul>
</body>
</html>
Output screen:

8.Design the following list in HTML


HTML Code:
<!DOCTYPE html>
<html>
<head>
<title> Memory </title>
</head>
<body>
<h1> Types of Memory </h1>
<ol type="1" start="1">
<li> Primary Memory </li>
<ol type="a" start="1">
<li> RAM </li>
<ul type="disc">
<li> Static RAM </li>
<li> Dynamic RAM </li>
</ul>
<li> ROM </li>
<ul type="disc" >
<li> PROM </li>
<li> EPROM </li>
<li> EEPROM </li>
</ul>
<li> Cache Memory </li>
<li> Register </li>
</ol>
<li> Secondary Memory </li>
<ol type="i" start="1">
<li> Magnetic Tape </li>
<li> Magnetic Disk </li>
<ul type="none">
<li> Floppy Disk </li>
<li> Hard Disk </li>
</ul>
<li> Optical Disk </li>
<li> Flash Memory </li>
</ol>
</ol>
</body>
</html>
Output screen:

9.Design your Daily class Routine using rowspan, colspan, bgcolor attributes.
HTML Code:
<!DOCTYPE html>
<html>
<head><title>Routine</title></head>
<style>
body{background-color: blueviolet;}
</style>
<body>
<table border="1">
<tr>
<th>Day/Time</th>
<th>6:30-7:15</th>
<th>7:15-8:00</th>
<th>8:00-8:45</th>
<th>8:45-9:15</th>
<th>9:15-10:00</th>
<th>10:00-10:45</th>
</tr>
<tr>
<th>Sunday</th>
<td>accounting</td>
<td>english</td>
<td>economics</td>
<td rowspan="6">BREAK TIME</td>
<td>social</td>
<td>computer</td>
</tr>
<tr>
<th>Monday</th>
<td>accounting</td>
<td>English</td>
<td>Economics</td>
<td>Social</td>
<td>Computer</td>
</tr>
<tr>
<th>Tuesday</th>
<td>Accounting</td>
<td>English </td>
<td>economics </td>
<td>social </td>
<td>computer</td>
</tr>
<tr>
<th>Wednesday</th>
<td>accounting</td>
<td>nepali</td>
<td>economic</td>
<td>social</td>
<td>computer</td>
</tr>
<tr>
<th>Thursday</th>
<td>accounting</td>
<td>Nepali </td>
<td>economic</td>
<td>social </td>
<td>computer</td>
</tr><tr>
<th>Friday</th>
<td>accounting</td>
<td>nepali</td>
<td>economic</td>
<td>social</td>
<td>computer</td>
</tr>
<tr>
<th> Saturday</th>
<td colspan="6" align="CENTER"> HOLIDAY </td>
</tr>

</table>
</body>
</html>
Output screen:

10. Design the table in HTML.


HTML Code:
<!doctype html>
<html>
<head> <title> Table Tag </title> </head>
<body>
<table border="1" width="50%" height="10%">
<caption align="centre"> Empty Tag </caption>
<tr>
<td rowspan="2"> a </td>
<td> b </td>
<td colspan="2"> c </td>
<td> d </td>
</tr>
<tr>
<td colspan="2"> g </td>
<td rowspan="2"> h </td>
<td> i </td>
</tr>
<tr>
<td> e </td>
<td> o </td>
<td rowspan="2"> m </td>
<td> j </td>
</tr>
<tr>
<td rowspan="2" colspan="2"> f </td>
<td> l </td>
<td> k </td>
</tr>
<tr>
<td colspan="3"> n </td>
</tr>
</table>
</body>
</html>
Output screen:

11. Design a page to demonstrate the <frame> tag.


HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset >
<frame src="nature.jpg" name="imageFrame">
</frameset>
</html>

Output screen:
13. Design your CV (Curriculum Vitae) using HTML. Your CV should include the
following:
Personal details in a list, Profile image in right side, Educational qualifications in a table,
Social media link, career objective in a short paragraph, Skills in a unordered list and
Certifications and achievements in a separate <div> section.
HTML Code:
<!DOCTYPE html>
<html >
<head>
<title>My Curriculum Vitae (CV)</title>
<style>
body {
font-family: 'Times New Roman', Times, serif;
margin: 20px;
padding: 20px;
}
.container {
display: flexbox;
align-items: flex-start;
}
.left {
flex: 2;
}
.right {
flex: 1;
text-align: center;
}
img {
width: 50px;
border-radius: 50%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;

}
</style>
</head>
<body>
<h1>My Curriculum Vitae</h1>
<div class="container">
<div class="left">
<h2>Personal Details</h2>
<ul>
<li><b>Name:</b> pawan yoge</li>
<li><b>Email:</b> pawanyogee567@gmail.com</li>
<li><b>Phone:</b> 9702091844</li>
<li><b>Address:</b> kadaghari, Kathmandu,Nepal</li>
</ul>
</div>
<div class="right">
<img src="meghnath.jpg" alt="Profile Image" height="60" border="dotted">
</div>
</div>

<h2>Career Objective</h2>
<p>A highly motivated to earm money and to be succesfull in life by doing hard work and
following passon in my life. Not taking peoples comment as taking it as advantage. </p>

<h2>Skills</h2>
<ul>
<li> Riding cycle</li>
<li> singing </li>
<li>football</li>
<li> playing online games games</li>
</ul>
<h2>Educational Qualifications</h2>
<table>
<tr>
<th>Degree</th>
<th>school/collage</th>

</tr>
<tr>
<td>SEE LEVEL</td>
<td>SHREE AAJADI SECONDARY SCHOOL </td>

</tr>
<tr>
<td>COLLAGE/ +2 LEVEL </td>
<td>ST Lawrence College</td>

</tr>
</table>

<h2>Social Media</h2>
<p><a href="https://www.facebook.com/grishma.acharay">LinkedIn Profile</a></p>
</body>
</html>
Output screen:

14. Design the following login form in HTML:


HTML Code:
<!DOCTYPE html>>
<html>
<head>
<title> detail form </title>
</head>
<body>
<h3>simple form</h3>
Full Name<input type="text" name="Name" placeholder="your username "><br>
Mobile Number<input type="number" name="contact number" placeholder="your mobile
number"><br>
Email Address <input type="text" name="email" placeholder="your email"><br>
Gender
<input type="radio" name="gender" value="male" checked>Male
<input type="radio" name="gender" value="Female" >Female
<input type="radio" name="gender" value="other" >Others
<br>
hobbies
<input type="checkbox" name="hobbies" value="reading" > reading
<input type="checkbox" name="hobbies" value="sining" > singing
<input type="checkbox" name="hobbies" value="playing" > playing
<input type="checkbox" name="hobbies" value="dancing" > Dancing
<br>
choose your favourite city
<select>
<option>kathmandu</option>
<option> pokhara</option>
<option> chitwan</option>
<option> janakpur</option>
<br>
<br>
<br>
Brief introduction about your self
<textarea rows="20" cols="80"> </textarea>
<br>
<input type="submit" value="save">
<input type="reset" value="clear">

</select>
</body>
</html>
Output Screen:
15. Design a page that uses background, borders in Inline CSS style.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title> Inline CSS style</title>
</head>
<body>
<h3 style="align:center; color:green; text-decoration:underline">
My college
</h3>
<h2 style="font-family: 'Times New Roman', Times, serif; color: black;
text-align:left"> St.lawrence college
</h2>
</body>
</html>
Output screen:

16. Design a page that uses margin padding and color with internal CSS.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title> Internal CSS Style</title>
<style>
body{background-color: azure;text-align: justify;}
h1{text-align: center;text-decoration: underline;
font-family: 'Times New Roman', Times, serif;}
p{color: green;font-style: italic;font-size: 20px;}
</style>
</head>
<body>
<h1> ABOUT ST.LAWRENCE</h1>
<P>St.lawrence college is one of the best college for +2 studies.many facilities in st Lawrence
tere is a all lab for science student. St is the Top eight college of nepal for +2 studies.</P>
</body>
</html>
Output scpeen:

17. Design any three web pages which include all selectors, height width, fonts, and text
with external CSS.

First web page


HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>External CSS Style</title>
<link rel="stylesheet" href="external.css">
</head>
<body>
<h1>ST.LAWRENCE</h1>
<P> Your success our commement </P>
</body>
</html>
Output:
Second webpage:
HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>2nd Webpage/ id selector</title>
<link rel="stylesheet" type="text/css" href="second external.css">
</head>
<body>
<h1 id="class">Welcome to My second Webpage</h1>
<p id="webpage">A web page is a document written in hypertext (also known as HTML) that
you can seeonline, using a web browse</p>
</body>
</html>
CSS File
body{background-color: blueviolet;border: 10px;border: dotted;}
#class{font-family: 'Times New Roman', Times, serif;
font-style: normal;font color: blue;text }
#webpage{text-align: justify;text-shadow: 10px;}
Output screen:

Third webpage:
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>3rd external CSS/group selector</title>
<link rel="stylesheet" href="third external.css">
</head>
<body>
<h1> Nepal</h1>
<p>nepal is a land locked country. it is located between india and china</p>
<h2>India</h2>
<p>india is the neignbouring country of nepal.it is bigger than nepal</p>
<h3>China</h3>
<p>gereat wall is locateb in china.covid-19 was spread from china</p>
</body>
</html>
CSS File
body{background-color: aqua;font-family: 'Times New Roman', Times, serif;}
h1,h2,h3{text-decoration: underline;text color: black;font size: 20px;}
p{text-decoration: solid;border: 2px;border:silver}

OutputScreen:

Conclusion
In conclusion we can say that HTML is the standard markup language which is used to
develop webpage.in conclusion by examining an HTML document, you can conclude a lot
about its structure, content organization, purpose, and the types of media and interactive
elements it contains. You can also get clues about how the page might be styled and if client-
side scripting is likely involved. However, for a complete understanding of a web page's
behavior and presentation, you need to consider the associated. Its advantages are:
• Easy to Learn and Use
• Plain Text Format
• Foundation for Other Web Technologies
• Semantic Structure
• Hyperlinking Capability
• Embedding Multimedia
• Mobile-Friendly Development
By studying HTML We know that:
1. basic structure of HTML,
2. objective of HTML,
3. HTML tags and attribute,basic tags(html, head, body, meta)
4. Heading tag(h1 to h6)
5. Font & paragraph tag
6. Order unordered & definition list
7. Image tag & Anchore tag
8. Creating table(td,th,tr)
9. Forms: creating forms using text box,radio,checkbox,textarea,button,etc.
10. Field set &label tag
11. Introduction to CSS and its types(inline,internal,external)

In conclusion, HTML tags are the basic foundation of full-stack development. It provides the
structure, appearance, and functionality of your website, ensuring it's accessible, user-friendly,
and search engine-friendly.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy