Experiment No.
– 1
Date of Performance: 10/11/2025
Date of Submission: 14/11/2025
Experiment No. 1
Basic HTML
1.1 Aim: Design a basic structured webpage using HTML5 elements and attributes.
1.2 Course Outcome: Construct structured web pages using HTML5 and client-server communication
concepts.
1.3 Learning Objectives: To Use Basic Elements in HTML
1.4 Requirement: Text Editor, Web Browser
1.5 Related Theory:
Web site: A set of interconnected web pages, usually including a homepage, generally located on the
same server, and prepared and maintained as a collection of information by a person, group, or
organization.
Web Page: A web page is a document that's created in html that shows up on the internet when you
type in or go to the web page's address.
Types of web Pages:
• Static web page: It is delivered exactly as stored, as web content in the web server's file system.
Contents cannot be changed.
• Dynamic web page: It is generated by a web application that is driven by server-side software or
client-side scripting. Dynamic web pages help the browser (the client) to enhance the web page through
user input to the server. Contents can be changed as evolution over time.
Browsers & their types
A web browser (commonly referred to as a browser) is a software application for retrieving,
presenting and traversing information resources on the World Wide Web.
The major web browsers are Google Chrome, Firefox, Internet Explorer, Opera, and Safari.
General structure of a Web Page
A basic HTML page contains a Head section and a Body section. The contents of the head section are
normally invisible in a web browser and mainly consists of some Metatags. The Body consists of those
HTML elements that you want to have displayed in your browser.
<html>
<head>
</head>
<body>
</body>
</html>
Scripting language: A scripting language or script language is a programming language that supports
the writing of scripts, programs written for a special runtime environment that can interpret and
automate the execution of tasks which could alternatively be executed one- by-one by a human
operator.
URL: A uniform resource locator (URL), also known as web address, is a specific character string that
constitutes a reference to a resource. In most web browsers, the URL of a web page is displayed on top
inside an address bar. An example of a typical URL would be "[Link]
www: The World Wide Web (www) is a system of interlinked hypertext documents accessed via the
Internet. With a web browser, one can view web pages that may contain text, images, videos, and other
multimedia, and navigate between them via hyperlinks.
HTML TAGS AND THEIR ATTRIBUTES
HTML: Hyper Text Markup Language is the most widely used language to write web [Link] is a
markup language.
Hypertext: Refers to the way in which web pages are linked together.
Markup Language: The user simply markups a text document with tags that tell a web browser how
to structure it to display.
Creating HTML document: To begin coding HTML user needs only two things:
1. A simple text editor (notepad).
2. A web browser.
Simple steps to create a basic HTML document:
1. Open notepad or another text editor.
2. At the top of the page type <html>
3. Add the opening header tag <head>
4. On the next line type <title> give title for page </title>
Skill based Laboratory (Web Technology – I) (ECLOR1VS101) A.Y. 2025 - 26 2
5. Go to next line and type closing header tag </head>
6. Go to next line and type opening body tag<body>
7. Go to next line and type closing body tag</body>
8. Finally, go to next line and type</html>
9. In the file menu,choose save as.
10. In the save as type option box,choose all files.
11. Name the file [Link]
12. Click save.
HTML document structure:
An HTML document starts and ends with <html> and </html> tags. These tags tell the browser that
the entire document is composed in HTML. Inside these two tags, the document is split into 2 sections:
1. The <head>……</head> elements contains information about the document such as title of the
document etc.
2. The <body>…. </body> elements contains the real content of the document that you see on
your screen.
HTML Elements:
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph</p>
HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
Skill based Laboratory (Web Technology – I) (ECLOR1VS101) A.Y. 2025 - 26 3
</html>
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers to display web
pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
ATTRIBUTES:
An attribute is used to define the characteristics of an element and is placed inside the element’s
opening tag. All attributes are made up of 2 parts: a name and a value.
-The name is the property you want to set.
-The value is what you want the value of the property to be.
Example: <font face=”arial” color=”green”>
HTML Links
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:
Example:
<a href="[Link] sakec</a>
The src Attribute
Skill based Laboratory (Web Technology – I) (ECLOR1VS101) A.Y. 2025 - 26 4
The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to
the image to be displayed:
Example:
<imgsrc="[Link]">
The width and height Attributes
The <img> tag should also contain the width and height attributes, which specify the width and
height of the image (in pixels):
Example:
<img src="[Link]" width="500" height="600">
The alt Attribute
The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for
some reason cannot be displayed. This can be due to a slow connection, or an error in the src
attribute, or if the user uses a screen reader.
Example:
<img src="[Link]" alt="Mahavir Education Trust">
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and more.
<p style="color:red;">This is a red paragraph.</p>
The lang Attribute
You should always include the lang attribute inside the <html> tag, to declare the language of the
Web page. This is meant to assist search engines and browsers.
The following example specifies English as the language:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Background Color
The CSS background-color property defines the background color for an HTML element.
Example:
Skill based Laboratory (Web Technology – I) (ECLOR1VS101) A.Y. 2025 - 26 5
<body style="background-color:tomato;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Text Color
The CSS color property defines the text color for an HTML element:
Example:
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Fonts
The CSS font-family property defines the font to be used for an HTML element:
Example:
<h1 style="font-family:Verdana;">This is a heading</h1>
<p style="font-family:Times New Roman;">This is a paragraph.</p>
Text Size
The CSS font-size property defines the text size for an HTML element:
Example:
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element:
Example:
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Similarly HTML has many attributes to design web page
Problem Statement:
Develop a personal homepage using HTML5 elements. The page should display your name, a brief
biography, a photo, and links to at least two external sites. Utilize semantic tags such as <header>,
<main>, <section>, and <footer> for structure.
Skill based Laboratory (Web Technology – I) (ECLOR1VS101) A.Y. 2025 - 26 6
1.6 Program and Output:
<!DOCTYPE html>
<html>
<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>
Personal Homepage.
</title>
</head>
<body bgcolor="green">
<header><p><center><h1>Ranjeet </h1></center></p></header>
<p><h3>Photo:</h3></p>
<center><img src="IMG_20250901_125501.jpg" alt="College image" width="300"
height="300" border=4px></center>
<h3>Bio:</h3>
<h4>I am passionate about learning & Growing</h4>
<h4>I am a first year electronic and computer science student</h4>
<a href=""C:\Users\RANJEET\Pictures\Camera Roll\WhatsApp Image 2025-08-10 at
[Link]"">My College</a><br>
<a href="[Link]
<footer> Thank you!!😊</footer></center>
</body>
</html>
OUTPUT:
Skill based Laboratory (Web Technology – I) (ECLOR1VS101) A.Y. 2025 - 26 7
1.7 Conclusion:
Successfully able structured webpage using HTML5 elements and attributes.
1.8 Review questions based on Experiment:
[Link] to Add & Change Background Color in HTML?
You can add background color using the style attribute with background-color property:
html
<body style="background-color: blue;">
<div style="background-color: #ff0000;">
Skill based Laboratory (Web Technology – I) (ECLOR1VS101) A.Y. 2025 - 26 8
You can also use CSS in <style> tags or external stylesheets. Colors can be specified using
names (red, blue), hex codes (#ff0000), RGB (rgb(255,0,0)), or RGBA values.
2.. How many types of elements are in HTML?
HTML has two main types of elements: Block-level elements (take full width, start on new line
like <div>, <p>, <h1>) and Inline elements (take only necessary width, don't break line like
<span>, <a>, <img>). Additionally, elements can be categorized as empty/void elements (self-
closing like <br>, <img>) and container elements (have opening and closing tags). HTML5 also
categorizes elements by content type: metadata, flow, sectioning, heading, phrasing, embedded,
and interactive content.
Skill based Laboratory (Web Technology – I) (ECLOR1VS101) A.Y. 2025 - 26 9