Scribd
Upload
0 views29 pages

HTML Note

HTML, or Hypertext Markup Language, is a markup language used to create and design webpages, developed by Tim Berners Lee in the early 1990s. The document outlines the structure of HTML, including its various tags, types, and attributes, as well as the evolution of its versions over the years. It also provides examples of basic HTML elements such as lists, tables, and forms.

Uploaded by

rjejrrhh
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 views29 pages

HTML Note

HTML, or Hypertext Markup Language, is a markup language used to create and design webpages, developed by Tim Berners Lee in the early 1990s. The document outlines the structure of HTML, including its various tags, types, and attributes, as well as the evolution of its versions over the years. It also provides examples of basic HTML elements such as lists, tables, and forms.

Uploaded by

rjejrrhh
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/ 29

HTML

HTML stands for Hypertext Markup Language


What is HTML?
HTML is a scripting language which includes different tags to
create webpages.
OR
HTML is code which is used to design webpages and the
contents involved in that webpage.
OR
HTML is a markup language that is used to create documents on
the World Wide Web incorporating text, graphics, sound, video,
and hyperlinks.
OR
HTML is a set of logical codes that can be applied and
embedded in text to add formatting, linking to other pages.

History of HTML
HTML was developed by physicist Tim Berners Lee in 1980
who was a contractor at CERN which was used for researchers
to share documents. Tim Berners Lee wrote the HTML and
server software in 1990s. HTML was built in 1991 but was not
officially launched. It was officially launched in 1995.
Introduction
HTML stands for hypertext markup language. It is the standard
markup language to create webpages. It describes the design or
structure of a webpage. HTML consists of a series of elements.
HTML elements tell the browser how to display the content.
Versions Of HTML

Versions Date
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML 5 2012
XHTML 5 2013

TAGS
The basic formulae used to write html code are called tags.
Without Tag we cannot write HTML.
OR
The text character which is enclosed in a left angle bracket (<)
and a right angle bracket(>) is called HTML tag.
The basic structure of using tag is
<tag_name>text</tag_name>
It is must to know about tags to write HTML. They tell a
browser how to display information in a HTML document.
Examples of tag are <html>, <head>, <title>, <body>, <img>,
<sound> etc.
TYPES OF TAGS
❖ Paired Tag / Container Tag
❖ Unpaired Tag / Single Tag / Empty tag
Paired Tag
The tag which has both closing and opening tag is called paired
tag.
OR
The tag which contains both starting and finishing tag is called
paired tag.
For examples: <html>…..</html>, <head>…….</head>,
<title>…..</title>, <body>…..</body>,<p>……..</p>, etc.
Unpaired Tag
The tag which contains only opening tag is called Unpaired Tag.
OR
The tag which contains only starting tag is called unpaired tag.
For examples:<img>, <br>, <hr>,etc.
FEATURES OF HTML
➢ HTML is not a case sensitive i.e. it do not cares in small
letter(lowercase) or capital letters(uppercase).
➢ Attributes may be case sensitive while entering filename.
E.g. <img src=“home.jpeg”> may not be same as the
filename in <img src=“HOME.jpeg”>.
➢ Ending tags do not have any attribute.
➢ Ending tag should have forward slash(/) before tag name.
➢ In the beginning as well as in between a Tag name
characters there should not be space(s). For example, <I M
G> which does not mean <IMG>
➢ If we put multiple spaces while writing tag in html , then
the browser collapse these spaces and just put one space in
between two characters or two words.

BASIC STRUCTURRE OF HTML


Every language consist of a syntax and rules for creating
programs. Unlike other languages HTML consist of following
different components to create a webpage.
The Basic Structure of HTML is
<HTML>
<HEAD>
<TITLE>……………………..</TITLE>
</HEAD>
<BODY>…………………………………………………………
……………………………………………………………………
……………………………………………………………………
……………………………………………………………………
……………….</BODY>
</HTML>
For Example:
<html>
<head>
<title> It is my first webpage</title>
</head>
<body>
<h1> This is my first webpage</h1>
<h2>This is my second webpage</h2>
</body>
</html>
Output:

BASIC TAGS USED IN HTML


1)<HTML> Tag
This tag indicates the starting and ending of HTML document.
2)<HEAD> Tag
It defines the portion of the document in which the information
is formatted. This tag is closed before body tag.
3)<TITLE> Tag
It defines the title of the document and information of the
programmer. This tag is closed before the head tag.
4)<BODY> Tag
It defines the portion of the document that contains the visible
information on webpage in browser.
Q: What is attribute?
Ans: Attribute is an essential and special keyword used to design
and control the element’s behaviour. It provides additional
information about a tag such as font color, font size, alignment,
etc.
Attributes of body tag
1) <Bgcolor> = It controls the background color of the
webpage.
2) <baground> = It specifies the URL of the background
image to be display.
3) <text>= It is used to put color on the text.
4) <link>= It is used to put the color of an unfollowed link.
5) <vlink>= It specifies the color of the followed link.
6) <alink> = It secifies the color of link when they are click.

For example
Use of all above attributes:
<html>
<head>
<title>Example of attributes of body tag</title>
</head>
<body bgcolor=“green” text=“red” link=“yellow”
vlink=“black”>
<p> It is my first webpage</p>
</body>
</html>

Attributes of <Body> tag


Following are the attributes of the body tag:
BG color : It specifies the background color of the webpage.
<Background> : It specifies the URL of the background image
to be display.
<text>: It helps to put the color of the text.
<link>: It specifies the color of the unfollowed link.
<vlink>: It specifies the color of followed link.
<alink>: It specifies the color of the link when they are click.
E.g. HTML code to illustrate the attribute of body tag.
<html>
<head>
<title>Example of attribute of body tag</title>
</head>
<body bgcolor=“red” Text=“green” link=“yellow”
vlink=“block”>
<a href=“https://www.facebook.com>Click here to open
facebook</a>
It is my first webpage.
</body>
</html>
Paragraph tag(<p>)
In HTML to create a paragraph we use <p> tag. The attribute of
<p> tag is align. The values of align attributes are left, right and
center.
e.g.
<html>
<head>
<title>Example of Paragraph</title>
</head>
<body>
<body bg color=“red” text=“green” link=“yellow”
vlink=“black”>
<p align=“left”> HTML is an scripting language.</p>
<p>It is used to create webpage.</p>
</body>
</html>
Heading Tag
The defined titles in the HTML is called Heading. To put
different styles of heading in HTML we use heading tag.
Heading tags are of different labels from<h1> to <h6>. The text
within <h1> is the largest text and the text within <h6> is the
smallest text.
HTML code to display following output:

Heading 1
Heading 2

Heading 3
Heading 4

Heading5

Heading 6

Coding:
<html>
<head>
<title>Example of heading</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
List tag
It is the collection of data items arranged with order or without
order. There are three types of list in HTML:
• Ordered list
• Unordered list
• Definition list
Ordered list
The type of list in which the numbers are used to list the
items is called ordered list. We use <ol> tag to create
ordered list. The attributes of the <ol> tag are type and text.
The start attribute defines the start of number. The default
start value is 1. To list the item we use <li>tag.
The ordered list which contains another ordered list is
called Nested Ordered list.
E.g. To display the following output
1.Input device
a. Mouse
b. Keyboard
2.Output Device
i. Printer
ii. Monitor
3.Memory
A. Primary Memory
B. Secondary memory
<html>
<head>
<title>Webpage</title>
</head>
<body>
<ol>
<li>Input device</li>
<ol type=“a”>
<li>Mouse</li>
<li>Keyboard</li>
</ol>
<li>Output device</lo>
<ol type=“i”>
<li>Printer</li>
<li>Monitor</li>
</ol>
<li>Memory</li>
<ol type=“A”>
<li>Primary memory</li>
<li>Secondary memory</li>
</ol>
</ol>
</body>
</html>
Unordered list
The items that are arranged without any order or with Bullet.
the attribute of unordered list is<type>. To create an unordered
list <ul> tag is used. the value of type attributes are:
o disc
o Circle
o Square
To list the tag <li> tag is used
Example
write HTML code to display the following output
o input device
o output device
o Memory
o CPU
<html>
<head>
<title>Unordered list</title>
</head>
<UL type=Circle> <li>Input device</li>
<li>Output device</li>
<li>Memory</li>
<li>CPU</li>
</ul>
</body>
</html>

Nested list
A list contains another list ordered or unordered is called not
nested list
example write HTML code to display following output
1. input device
o Mouse
o Keyboard
2. output device
i. Printer
ii. Monitor
3. Memory
o Primary
o Secondary
4. CPU
Coding:
<html>
<Head>
<Title>list</title>
</Head>
<body>
<ol><li>Input device</li>
<UL type=“circle”><li>mouse</li>
<li>keyboard</li>
</ul>
<li>Output device</li>
<ol type=“i”> <li>Printer</li>
<li>monitor</li>
<li>memory</li>
<ul type=“circle”>
<li>Primary</li>
<li>Secondary</li>
</ul>
<li>CPU</li>
</ol>
</body>
</html>

Definition list
It is used to define the abbreviation terms and its description.
To create definition list<dl> tag is used. To include the
abbreviation term<dt> tag is used and to show the
description<dd> tag is used.
Example
HTML code to display following output.

Example of definition list


CPU
CPU is brain of computer system. It stands for
Central Processing Unit.
ALU
ALU stands for Arithmetic Logic Unit.

Coding:
<html>
<head>
<title>Example of Definition list</title>
</head>
<body>
<dl>
<dt>CPU</dt>
<dd>CPU is brain of computer system. It stands for Central
Processing Unit.</dd>
<dt>ALU</dt>
<dd>ALU stands for Arithmetic Logic Unit. It is used to
calculate Arithmetic and logical calculation.</dd>
</dl>
</body>
</html>
<Table> tag
<Table> tag
It is the collection of rows and column. In HTML <table> tag is
used to create the table in webpage. To insert table row <TR>
tag is used and to insert the data in table column <TD> tag is
used. the attributes of table tags are:-
i) border
It specify the size of the border around a table and cells within
the table.
ii) <BGColor>
It sets the background colour using either the color name or
colour code.
iii) cellspacing
It specifies the space between cells.
iv) cellpadding
It specifies the amount of space between the border of a cell and
items within the cell.
v) width
It specifies the width of a table in either pixel aur percent.
Attributes of <tr> tag
i) align:- it specifies the alignment of content in a row of cell as
left, right.
ii) valign:- specify the vertical alignment of content in a row of
cells at the top, bottom or middle.
# attributes of<td> tag
basic attributes of TD tag are:-
i) bg color:- It helps to put background colour of the cell.
ii) Align:- It specify the alignment of content in a Cell at the left,
right or centre.
iii)valign:- It specify the vertical alignment of content in cell as
top, bottom or middle.
iv) Rowspan: specifies the number of rows a cell will span.
v) colspan: specifies number of column a cell will span.
vi)th:- it defines a table header. A normal cell with text that is
bowled and centre.

HTML code to display the following table:

S.N. Particular Rate Total


Rs. Paisa Quantity RS Paisa
1 Rice 70 00 2 140 00

2 Sugar 85 10 2 170 00

Coding:
<html>
<head>
<title>Example of table></title>
</head>
<body>
<table border=“1”>
<tr>
<td rowspan=“2”>S.N.</td>
<td rowspan=“2”>Particular”</td>
<td colspan=“2”>Rate</td>
<td rowspan=“2”>Quantity</td>
<td colspan=“2”>Total</td>
</tr>
<tr>
<td>RS</td>
<td>Paisa</td>
<td>Rs</td>
<td>Paisa</td>
</tr>
<tr>
<td>1</td>
<td>Rice</td>
<td>70</td>
<td>00</td>
<td>2</td>
<td>140</td>
<td>00</td>
</tr>
<tr>
<td>2</td>
<td>Sugar</td>
<td>85</td>
<td>10</td>
<td>2</td>
<td>170</td>
<td>20</td>
</tr>
</table>
</body>
</html>
<Form> tag
Form is a set of data entry field on a page data processed on a
web server. The data is sent to the server when a website visitor
submit the form by clicking on a Button. Form can be created on
webpage by using form tag the component of form tag like
textbox, textarea, radio button, check box can be added on the
form by using <input> tag with their properties.
The attributes of <input> tags are:-
I. <type>:- It specifies the type of object such as textbox,
password box, radiobutton, checkbox that can be placed on
the form. The values of <type> attributes are:-
:- type=”text”→ It is used to insert text box object on the
form.
:- type=”password”→It is used to insert password entry box
object on the form.
:-type=”radio”→It is used to insert radio button object on
the form.
:-type=”checkbox”→It is used to insert checkbox object on
the form
:-type=”submit”→It is used to insert submit button on the
form.
:-type=”reset”→It is used to insert recheck.
2) <Name>
It specifies the name of the object of the form.
3) <size> => IT specifies the length of the text entry field
in terms of number of characters.
4)<Maxsize>=> It specifies the maximum length of text
entry field in terms of number of characters.
5)<Select>:- It enables the user to select one or more items
from a menu or a scrolling list. They are similar in
functionality to radio or checkbox but they are displayed in
different way in screen.
Its attributes are:-
• <Name>:- It specifies the name of the selected list.
• <multiple>:- It specifies the user can select multiple
option from the list.
• <option>:- It specifies the individual option list within
the selection list. It is written inside the select.
7) <textarea>:-It is used to insert text area in which the user
can type many lines of text. The attributes of <textarea>
are:-
<Name>:- It specify the name of the text area.
<Rows>:- It specify the height of the text area object in
terms of rows of text.
<Cols>:-It specify the width of the text area object in terms
of columns.
Html code to display following form:
<html>
<head>
<title>Example of form></title>
</head>
<body>
<p>Student data entry form</p>
<form>
<p>Username<Input type="text"></p>
<p>Address<Input type="text"></p>
<p>Password<Input type="password"</p>
<p>Gender</p>
<Input type="radio">Male<Input type="radio">Female
<p>Favourite Games</p>
<input type="checkbox">Volleyball<Input
type="checkbox">football<br>
<Input type="checkbox">Cricket<Input
type="Checkbox">Table Tennis<br>
<p> Program offered</p>
<select>
<option>Select Faculty</option>
<option>Science</option>
<option>Management</option>
<option>Education</option>
<option>Humanities</option>
</select>
<p>Comment</p>
<textarea rows=25cols=25></textarea>
<Input type="submit"Value="submit">
<Input type="reset" value="reset">
</form>
</body>
</html>
</body>
</html>
<Marquee>tag :-
It is used to scroll the text or image on the marquee region in the
webpage. The attributes of <Marquee>tag are:-
i) Direction: It is used to specify the direction of the
scrolling of the marquee. The values are left, right.
ii) Behaviour: It is used to specify the scrolling effect. The
values are scroll slide or alternate.
iii) Scroll delay: It specify the scrolling speed.
iv) Scroll amount: It specify the scrolling amount of object.

<Frame>tag
It is an area of a web browser window defined by a frame page.
A frame appears in a web browser as one of the number of
different areas in which pages can be displayed. Frame may be
scrollable and a resizeable and may have a border. We display a
page in a frame by creating a hyperlink to the page and
specifying the same as a part of hyperlink. frame page is a page
that divides a web browser to window into different areas called
frames that can independently display several web pages. We
can create different frames using <frameset> tag. The attributes
of frameset Tag are:
i) Rows:- it specify the number of cols on the webpage.
ii) Cols(Columns) :- It specifies the number of cols in the
webpage.
<frame>tag:- It is used to associate an HTML document with
each frame created with frameset tag. The attribute of this tag is
src. It specifies the name of the document to be displayed on
specified frame.
HTML code to display the following frame

Frame1 Frame2 Frame3

<html>
<head>
<title>Example of Frame</title>
</head>
<frameset cols=”*,*,*”>
<framesrc=”frame1.html”>
<framesrc=”frame2.html”>
<framesrc=”frame3.html”>
</frameset>
</html>

<image>tag
In HTML<img> tag is used to insert image in webpage. It is an
unpaired tag. the attributes of <IMG> tag are:-
i)Src(Source address): it is specified the location or source or
URL of the image.
ii) Align:- it specifies the alignment of an image that is left
,right, Centre, top, bottom and middle.
iii)Width:- specifies the width of the image.
iv)Height:- specify the height of the image
v)Border:- it specifies the border around the image.
vi)Alt:- it is the alternative label for an image.
Syntax for <image> tag:
<img src=”Filelocation.Extension of image”>

<audio> tag
This tag is used to insert audio in HTML. It is a paired tag i.e. it
has both starting and closing tag. HTML supports only three
formats MP3, WAV, and OGG.
<HR> tag
This tag is used to insert horizontal line in the HTML.
For example:
<HTML> Preview:
<HEAD>
<title>Use Of HR tag</title>
</head>
<body>
<p>It is my first use of hr tag</p>
<hr></hr>
</body>
</html>

Comment tag
<!- . . . > is an comment tag. It is used to put comments while
coding HTML but it is not displayed on the webpage.
<Font>tag
This tag is used to change the size of text, color of text and style
of text. To change color size and style, the <font> tag is used. It
has following attributes:
1) <size>: It specfies the font size from one to seven. One is
the smallest , three is the default and seven is the largest
size.
2) <face>: It sets the font type i.e. times in new roman,
calibri, Arial black etc.
3) <color>: It specifies the font color.
E.g. HTML code to display following data using font
tag.

Coding
<html>
<head>
<title>e.g. of font tag</title>
</head>
<body>
<font size=”5” face=”Times New Roman”
color=”green”>
The tags of HTML are paired and unpaired.
</font>
</body>
</html>

Thankyou

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