O’ LEVEL COURSE
NAME:- JANNAT AKHTAR
REGISTRATION No.- 1565787
CANDIDATE TYPE- INSTITUTE
PROJECT COURSE – WEB
DESIGNING
TITLE – HYPER TEXT MARKUP
LANGUAGE (HTML)
Performa of the project completion
certificate
This is to certify that the Project work done at
SUPERTECH, JAMMU_<PROJECT TITLE> HTML Language
BY Miss JANNAT AKHTAR (NIELIT Registration No.-
1565787 in partial fulfillment Of NIELIT ‘O’ Level
Examination has been found satisfactory. This report has
not been submitted for any other examination and does
not form part of any other course undergone by the
candidate.It further certifies that he/she has appeared in
all the four modules of NIELIT ‘O’ level Examination
INSTITUTE – SUPERTECH
TalabTillo JAMMU
NAME OF GUIDE- MRS. TARANDEEP KAUR
QUALIFICATION – ‘A’ LEVEL & Diploma in E&C
HYPER TEXT MARKUP LANGUAGE
Introduction:-
HTML stands for HyperText Markup Language and it is used
to create webpages. It uses HTML tags and attributes to
describe the structure and formatting of a web page.HTML
consists of various elements, that are responsible for telling
search engines how to display page content. For example,
headings, lists, images, links, and more.
History:-
HTML, or HyperText Markup Language, was invented by Tim
Berners-Lee in 1990 to facilitate information sharing on the
World Wide Web. The first version, HTML 1.0, was followed
by HTML 2.0 in 1995, establishing a standard. HTML 3.2 and
4.0 in the late 1990s introduced new features like
stylesheets and scripting. XHTML emerged in 2000,
reformulating HTML as XML for stricter syntax. HTML5,
started in 2008 and finalized in 2014, brought significant
enhancements, including new elements and APIs for
multimedia. HTML continues to evolve with updates from
the W3C and WHATWG, adapting to modern web needs.
HTML tags are like keywords which defines that how web browser will format
and display the content. With the help of tags, a web browser can distinguish
between an HTML content and a simple content. HTML tags contain three main
parts: opening tag, content and closing tag. But some HTML tags are unclosed
tags.
All HTML tags must enclosed within < > these brackets.
Every tag in HTML perform different tasks.
If you have used an open tag <tag>, then you must use a close tag </tag>
(except some tags)
Basic structure of HTML:-
The basic structure of an HTML document is:
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<!– page content here
</body>
</html>
Explanation:
<!DOCTYPE html> : Declaration of the document
type and version of HTML.
<html>: Root element of the HTML document.
<head>: Container for metadata, links to external
stylesheets or scripts, and the document title.
<title>Document Title</title>: Sets the title of the
page, displayed in the browser’s title bar and
search engine results.
<body>: Container for the visible content of the
HTML document.
<!– page content here : Where you put the content of your
webpage, such as text, images, links, forms, tables, etc.
This basic structure is the foundation of every HTML document, and is
the starting point for creating web pages.
HTML Attributes:-
Attribute Name Description
Id:- A unique identifier for an HTML element, used
for styling or JavaScript interaction.
Class Defines one or more class names for an element,
used for styling and applying CSS rules.
Src Specifies the source URL for external resources
like images, audio, or video.
Href Specifies the URL of the linked resource, typically
used in anchor (a) elements for hyperlinks.
Alt . Provides alternative text for images, displayed if
. the image cannot be loaded or is unavailable.
Any_custom_attr Describes any custom attribute name and its
. purpose in the HTML document.
Syntax:
<element attribute_name= “attribute_value”>
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> This is Style attribute</h1>
<p style=“height: 50px; color: blue”>It will add style property in
element</p>
<p style=“color: red”>It will change the color of content</p>
</body>
</html>
Required softwares for writing HTML codes
Software- Notepad, Notepad++, Editplus, Bluefish, CoffeeCup, Netbeans,
Aptana Studio 3 , Atom , Brackets , Visual Studio Code ,
Adobe Dreamweaver DC
Operating System :- Linux , Windows XP ,7,8,10, MAC OSX
Disadvantages of HTML
Advantages of HTML HTML can only create static
HTML is used to build web pages. For dynamic
websites. web pages, other
It is supported by all languages have to be used.
browsers. A large amount of code has
It can be integrated to be written to create a
with other languages simple web page.
like CSS, JavaScript, etc. The security feature is not
good.
Steps to create a webpage:-
Step 1: Open Notepad (PC)
Windows 8 or later:
Open the Start Screen (the window symbol at the
bottom left on your screen). Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
Step 2: Write Some HTML codes
Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as
in the Notepad menu.
Name the file “index.html” and set the encoding to
UTF-8 (which is the preferred encoding for HTML
files).
Step 4: View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser
(double click on the file, or right-click – and choose
“Open with”).
EXAMPLES:-
Make simple webpages using HTML
1- Here is a simple web page example:
```
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My First Web Page</h1>
<p>This is my first web page.</p>
<p>I’m excited to learn HTML!</p>
</body>
</html>
Output:
Welcome to My First Web Page
This is my first web
I’m excited to learn HTML
Write an HTML code using list tag :-
<html>
<body>
<ol>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ol>
</body>
</html>
Output:
1. Coffee
2. Tea
• Black tea
• Green tea
3. Milk
Explanation
- `<ol>` is an ordered list element, used for numbered lists.
- `<li>` is a list item element, used for each item in the list.
- `<ul>` is an unordered list element, used for bulleted lists.
- The `Tea` list item contains a nested `<ul>` element, which creates a
sublist for the types of tea.
This code creates a numbered list with three items: “Coffee”, “Tea” (with a
sublist of tea types), and “Milk”.
Create a table using rowspan and colspan attribute.
<html>
<head>
<title>web page</title>
</head>
<body>
<table border=“1”>
<tr bgcolor=“orange ”><td rowspan=“3”> <b>digital Course</b></td>
</tr>
<tr bgcolor=“grey”>
<td>CCC</td><td>CCC+</td><TD>BCC</TD>
<tr bgcolor=“light blue”><td>ECC</td><td>ACC</td></tr></table>
<P>
<P><table border=“1”>
<tr bgcolor=“orange”><td colspan=“3”> <b>digital Course</b></td>
</tr>
<tr bgcolor=“grey”>
<td>CCC</td><td>CCC+</td><TD>BCC</TD>
<tr bgcolor=“light blue ”><td>ECC</td><td>ACC</td></tr></table>
</body>
</html>
Output:-
digital course CCC CCC+ BCC
ECC ACC
digital course
CCC CCC+ BCC
ECC ACC
Write html code to change text colour.
<html>
<head>
<title>web page</title>
</head>
<body>
<font color=“red”>This is red color</font>
<p>
<font color=“green”>This is green color</font>
<p><font color=“maroom” >This is maroom color</font>
<p><font color=“lime”> This is lime color
</font>
</body>
</html>
OUTPUT
This is red color
This is green color
This is maroon color
This is like color
Link using Anchor <A> tag.
<html>
<head>
<title>web page</title>
</head>
<body>
<a href=http://student.nielit.gov.in/> studentnielit</a>
<p><a href=http://student.nielit.gov.in/> <img src=d:/nielit.jpg></a>
<p><a href= [email protected]>contact me</a>
</body>
</html>
Output :
studentnielit
contactme
Create form using <form> tag .
A. Input tag
<html>
<head>
<title>web page</title>
<head>
<body>
<form>First Name:<input type=“text” name=“first name”/>
<p>
Last Name:<input type=“text” name=“last name”/></form>
</body>
</html>
OUTPUT
First name:
Last name :
