Lab Report 3 - 5746419962573197457
Lab Report 3 - 5746419962573197457
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 .
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.
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>.
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:
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:
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:
</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.
<!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.