HTML

HTML
 HTML or HyperText Markup Language is the

standard markup language used to create web
documents including text, images, formatting,
and hyperlinks to other documents.
 HTML documents consists of text and ‘markup’

tags which are used to define the structure,
appearance, and function of the information.
 HTML is written in the form of HTML

elements consisting of tags enclosed in angle
brackets (like <html>).
HTML cont.
There are two types of markup tags:
◦ Container tags – Define a section of text using a

start tag and an end tag. For example, text
placed inside of these tags would appear in bold:
 <B>Hello</B>
◦ Empty tags – represent a single occurrence of

an instruction. For example, the <BR> or break
tag is used to indicate that you want to include a
single space following the text.
Structure of an HTML Document
 An HTML document is divided into two

main sections:
 Heading - The HEADing contains information
describing the document, such as its title. The
heading section is indicated by the <HEAD> and
</HEAD> tags.
 Body - The BODY section is where the Web
document text, graphics, and other elements are
placed. The body section is indicated by the
<BODY> and </BODY> tags.
Example of an HTML Document
◦ <HTML>
◦ <HEAD> Heading of Page
◦ <TITLE>Title of Page</TITLE>
◦ </HEAD>
◦ <BODY>This is the part of the Web page that

viewers would see!</BODY>
◦ </HTML>
 HTML Headings
HTML headings are defined with the
<h1> to <h6> tags.
 HTML Paragraphs
HTML paragraphs are defined with the
<p> tag.
 HTML Sections: div

HTML Sections are defined with the
<div> tag.
Formatting Tags
Formatting tags modify the text between the opening tag and the
closing tag
Ex. <b>Hello</b> makes “Hello” bold
Tag name Description
<i></i> or <em></em> italic
<u></u> underlined
<sup></sup> Samplesuperscript
<sub></sub> Samplesubscript
<strong></strong> strong
<mark></mark> marked or highlighted text
<pre></pre> Preformatted text

<del></del> or <s></s> Deleted text – strike through
<big></big> increase the size by one

<small></small> decrease the size by one
<tt></tt> Teletype text
<b></b> Bold
Attributes of body tag
 bgcolor : Sets a color to be used as background of the document.
<body bgcolor="green">
 background : The value of this attribute points to an image that

will be used as background of the document. Browsers usually tile
the image in the background.
<body background="../images/back.gif">
 Text : Sets the color to be used by the text in all the

document.
<body text="#FF0000"> or <body text=“Red">
Fonts play very important role in making a website more user
friendly and increasing content readability. Font face and color
depends entirely on the computer and browser that is being used to
view your page.
In HTML <font> tag is used to add style, size, and color to the text
on your website.
<font face="courier" size=“5" color=“Blue">
Attributes of body tag
 bgcolor : Sets a color to be used as background of the document.
<body bgcolor="green">
 background : The value of this attribute points to an image that

will be used as background of the document. Browsers usually tile
the image in the background.
<body background="../images/back.gif">
 Text : Sets the color to be used by the text in all the

document.
<body text="#FF0000"> or <body text=“Red">
Fonts play very important role in making a website more user
friendly and increasing content readability. Font face and color
depends entirely on the computer and browser that is being used to
view your page.
In HTML <font> tag is used to add style, size, and color to the text
on your website.
<font face="courier" size=“5" color=“Blue">
Marquee Tag with its Attributes
is used for scrolling piece of text or image displayed either
horizontally across or vertically down your web site page depending
on the settings.
Attribute Value Explanation
width=" " pixels or % size of the width
height=" " pixels or % size of the height
hspace=" " pixels horizontal space
vspace=" " pixels vertical space
bgcolor=" " color code background color (HTML

or name Colors)
behavior=" " scroll scrolling text
(default is scroll)
slide sliding text
alternate bounce back and forth

Marquee Tag cont.
direction=" " left it moves left

(default is left) right it moves right
up it moves up
down it moves down
loop=" " number number of the loops
(default is infinity)
scrolldelay=" " milliseconds sets the delay
(default is 85) (1/1000 of a second) (influences the speed of the
500 = half a second scrolling)
high value = slow | low value
= fast
scrollamount=" " pixels sets the amount of movement
(default is 6) (influences the speed of the
scrolling)
high value = fast | low value
= slow
Image Tag with its Attributes
The image<img> tag is used to place an image on the web page.
src=" " URL the URL of the image

to display
width=" " pixels or % the size of the width
height=" " pixels or % the size of the height
border=" " pixels the size of a border
alt=" " text short description

Image Tag cont.
align=" " vertical alignment

top aligns to the top
middle aligns to the middle
bottom aligns to the bottom

(default)
floats image
left the image floats to the left
(the text wraps to the
right of the image)
right the image floats to the
right
(the text wraps to the left
of the image)
Lists in HTML
There are three types of list in html
1. Unordered Lists
2. Ordered Lists
3. Description Lists
Unordered Lists
The UL element defines an unordered list, and the LI element
defines each list item.
<ul> Output
<li>First list item</li> •First list item
<li>Second list item</li> •Second list item
<li>Third list item</li> •Third list item
</ul>
type=" " disc •disc styles
circle ocircle styles
square square styles

Ordered Lists
The Ol element defines an ordered list, and the LI element defines
each list item.
<ol> Output
<li>First list item</li> 1. First list item
<li>Second list item</li> 2. Second list item
<li>Third list item</li> 3. Third list item
</ol>
<ol type="A" start="5"> Output

<li>First list item</li> E. First list item
<li>Second list item</li> F. Second list item
<li>Third list item</li> G. Third list item
</ol>
Ordered Lists cont.
type=" " 1 arabic numeral
A alphabet (capital letter)
a alphabet (small letter)

I roman numeral (capital letter)
i roman numeral (small letter)
start=" " number the number to start on

value=" " number the number of the list item
Description Lists
A description list, is a list of terms, with a description of each term.
The <dl> tag defines a description list.
The <dt> tag defines the term (name), and the <dd> tag defines
the data (description).
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CGI</dt>
<dd>Common Gateway Interface</dd>
</dl>
Output
HTML
Hypertext Markup Language
CGI
Common Gateway Interface
Hyperlink
 A hyperlink is an element, a text, or an image
that you can click on, and jump to another
document.
 links are defined with the <a> anchor tag
<a href="url">link text</a>

 The href attribute specifies the destination
address.
 The link text is the visible part.
Hyperlink cont.
A named anchor
 <a href="#Anchorname">linked text</a>
(Target point)
 <a name="Anchorname">a named anchor</a>
E-mail sending
<a href="mailto:info@example.com">send
mail</a>
Table
 Tables are defined with the <table> tag.
 The caption element defines a caption for a table.
 Tables are divided into table rows with
the <tr> tag.
 Table rows are divided into table data with
the <td> tag.
 A table row can also be divided into table
headings with the <th> tag.
<table>
<caption>Student List</caption>
<tr><th>Rollno</th><th>Name</th></tr>
<tr><td>1</td><td>Amit</td></tr>
<tr><td>2/td><td>Anu</td></tr>
</table>
Table cont.
border=" " pixels the size of the border
height=" " pixels or % the size of the height
width=" " pixels or % the size of the width
bordercolor=“ ” color code Border color

or name
cellspacing=" " pixels or % the size of the space

Table cont.
bgcolor=“” #hexcode/ Deprecated − Specifies the

colorname background color of the table.
cellpadding=“” pixels or % Deprecated − Specifies the

space between the cell borders
and their contents.
align=“” right Deprecated − Visual alignment.

left
center
justify
char
HTML Forms
 HTML forms are used to collect user input.
 The <form>
◦ The <form> element defines an HTML form
◦ Form elements are different types of input elements,
textbox one line/multiline, password, checkboxes, radio
buttons, submit buttons, and more.
 The <input> Element

◦ The <input> element is the most important form
element.
◦ The <input> element has many variations, depending on
the type attribute.
HTML Forms Cont.
 The HTML <form> tag is used to create an
HTML form and it has following syntax −
<form action = "Script URL" method = "GET|POST"> form

elements like input, textarea etc. </form>
action: Backend script ready to process your passed data.
method: Method to be used to upload data.

HTML Form Controls
 There are different types of form controls that
you can use to collect data using HTML form −
a) Text Input Controls

b) Checkboxes Controls
c) Radio Box Controls
d) Select Box Controls
e) File Select boxes
f) Hidden Controls
g) Clickable Buttons
h) Submit and Reset Button
Text Input Controls
There are three types of text input used on forms−
 Single-line text input controls − This control is used for

items that require only one line of user input, such as search
boxes or names. They are created using HTML <input> tag.
 Password input controls − This is also a single-line text

input but it masks the character as soon as a user enters it.
They are also created using HTMl <input> tag.
 Multi-line text input controls − This is used when the user

is required to give details that may be longer than a single
sentence. Multi-line input controls are created using HTML
<textarea> tag.
Single-line text input controls
 This control is used as input from the user like first name,
last name, street name, etc. They are created using HTML
<input> tag.
Attribute & Description
 type: Indicates the type of input control and for text input
control it will be set to text.
 name: Used to give a name to the control which is sent to
the server to be recognized and get the value.
 value: This can be used to provide an initial value inside
the control.
 size: Allows to specify the width of the text-input control
in terms of characters.
 maxlength: Allows to specify the maximum number of
characters a user can enter into the textbox.
Password input controls
 This is also a single-line text input but it masks

the character as soon as a user enters it. They
are also created using HTML <input> tag but
type attribute is set to password.
Other attributes of Password are same as Single-

line text input control
Multiple-Line Text Input Controls
 This is used when the user is required to give details
that may be longer than a single sentence. Multi-line
input controls are created using HTML <textarea>
tag.
 name: Used to give a name to the control which is

sent to the server to be recognized and get the value.
 rows: Indicates the number of rows of text area box.
 cols: Indicates the number of columns of text area
box
Example
<html>
<head>
<title>Text, Password Input & Textarea Control</title>
</head>
<body>
<form>
User ID : <input type = "text" name = "userid" /> <br>
Password: <input type = "password" name = "password" />
<br>
Description : <textarea rows = "5" cols = "50" name =
"description"> Enter description here... </textarea>
</form>
</body>
</html>
Checkbox Control
 Checkboxes are used when more than one option is required to
be selected. They are also created using HTML <input> tag but
type attribute is set to checkbox.
 type: Indicates the type of input control and for checkbox input
control it will be set to checkbox.
 name: Used to give a name to the control which is sent to the
server to be recognized and get the value.
 value: The value that will be used if the checkbox is selected.
 checked: Set to checked if you want to select it by default.
Radio Button Control
 Radio buttons are used when out of many options, just one
option is required to be selected. They are also created using
HTML <input> tag but type attribute is set to radio.
Same as checkbox control but in this the name of the controls are
same if they belong to same group.
Example
<html>
<head>
<title>Checkbox & Radio Button Control</title>
</head>
<body>
<form>
Choose Subjects:
<input type = "checkbox" name = "maths" value = "on"> Maths <input
type = "checkbox" name = "physics"> Physics
Gender:
<input type = "radio" name = “gender" value = “Male"> Male
<input type = "radio" name = " gender " value = “Female"> Female
</form>
</body>
</html>
Select Box Control
 A select box, also called drop down box which provides option to
list down various options in the form of drop down list, from
where a user can select one or more options using <option> tag
name: Used to give a name to the control which is sent to

the server to be recognized and get the value.
size: This can be used to present a scrolling list box.
multiple: If set to "multiple" then allows a user to select
multiple items from the menu.
Select Box Control Cont.
Following is the list of important attributes of <option> tag
value: The value that will be used if an option in the select

box is selected.
selected: Specifies that this option should be the initially
selected value when the page loads.
label: An alternative way of labelling options
File Upload Box
 If you want to allow a user to upload a file to your web site, you
will need to use a file upload box, also known as a file select box.
This is also created using the <input> element but type attribute
is set to file.

 accept: Specifies the types of files that the server accepts.
Example
<html>
<head>
<title>Select Box & File Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>
</html>
Button Controls
There are various ways in HTML to create clickable buttons. You can
also create a clickable button using <input>tag by setting its
type attribute to button. The type attribute can take the
following values
Type & Description
submit: This creates a button that automatically submits a form.

reset: This creates a button that automatically resets form controls
to their initial values.
button: This creates a button that is used to trigger a client-side
script when the user clicks that button.
image: This creates a clickable button but we can use an image as
background of the button
Example
<html>
<head>
<title>Button Control </title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src =“logo.png" />
</form>
</body>
</html>
Hidden Form Controls
 Hidden form controls are used to hide data inside the page which later on can
be pushed to the server. This control hides inside the code and does not
appear on the actual page.
For example, following hidden form is being used to keep current page number.
When a user will click next page then the value of hidden control will be sent
to the web server and there it will decide which page will be displayed next
based on the passed current page.
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form> <p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>
Frames in HTML
 HTML frames are used to divide your browser window into multiple
sections where each section can load a separate HTML document. A
collection of frames in the browser window is known as a frameset.
The window is divided into frames in a similar way the tables are
organized: into rows and columns.
Disadvantages of Frames
 There are few drawbacks with using frames, so it's never
recommended to use frames in your webpages
 Some smaller devices cannot cope with frames often because
their screen is not big enough to be divided up.
 Sometimes your page will be displayed differently on different
computers due to different screen resolution.
 The browser's back button might not work as the user hopes.
 There are still few browsers that do not support frame
technology.
Frames in HTML cont.
Creating Frames
 To use frames on a page we use <frameset> tag instead of
<body> tag. The <frameset> tag defines, how to divide
the window into frames. The rows attribute of <frameset>
tag defines horizontal frames and cols attribute defines
vertical frames. Each frame is indicated by <frame> tag
and it defines which HTML document shall open into the
frame.
Example
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm"
/>
<frame name = "bottom" src =
"/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
File Upload Box
 If you want to allow a user to upload a file to your web site, you
will need to use a file upload box, also known as a file select box.
This is also created using the <input> element but type attribute
is set to file.

 accept: Specifies the types of files that the server accepts.
Frame cont.
 The <frameset> Tag Attributes
 Cols: Specifies how many columns are contained in the frameset
and the size of each column.
 Rows: This attribute works just like the cols attribute and takes
the same values, but it is used to specify the rows in the
frameset.
 Border:This attribute specifies the width of the border of each
frame in pixels.
 Frameborder: This attribute specifies whether a three-
dimensional border should be displayed between frames.
 Framespacing: This attribute specifies the amount of space
between frames in a frameset. This can take any integer value.
Frame cont.
 The <frame> Tag Attributes
 src: This attribute is used to give the file name that should be
loaded in the frame.
 name: This attribute allows you to give a name to a frame. It is
used to indicate which frame a document should be loaded into.
 frameborder: This attribute specifies whether or not the borders
of that frame are shown
 marginwidth: This attribute allows you to specify the width of
the space between the left and right of the frame's borders and
the frame's content.
 marginheight: This attribute allows you to specify the height of
the space between the top and bottom of the frame's borders
and its contents.
 noresize: By default, you can resize any frame by clicking and
dragging on the borders of a frame.
 scrolling: This attribute controls the appearance of the scrollbars
that appear on the frame.
Example
<html>
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols = "200, *">
<frame src = “f1.htm" name = “f1“ noresize = "noresize" />
<frame src = “f2.htm" name = “f2" scrolling = "no“ />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
Iframes in HTML
 You can define an inline frame with HTML tag <iframe>.

The <iframe> tag is not somehow related to <frameset>
tag, instead, it can appear anywhere in your document.
The <iframe> tag defines a rectangular region within the
document in which the browser can display a separate
document, including scrollbars and borders. An inline
frame is used to embed another document within the
current HTML document.
 The src attribute is used to specify the URL of the

document that occupies the inline frame.
Iframe cont.
 The <Iframe> Tag Attributes
 src: This attribute is used to give the file name that should be
loaded in the frame.
 name: This attribute allows you to give a name to a frame. It
is used to indicate which frame a document should be loaded
into.
 frameborder: This attribute specifies whether or not the
borders of that frame are shown.
 marginwidth: This attribute allows you to specify the width
of the space between the left and right of the frame's borders
and the frame's content.
 marginheight: This attribute allows you to specify the height
of the space between the top and bottom of the frame's
borders and its contents.
 height: This attribute specifies the height of <iframe>.
 scrolling: This attribute controls the appearance of the
scrollbars that appear on the frame.
 width: This attribute specifies the width of <iframe>.
Iframes in HTML cont.
Example
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Document content goes here...</p>
<iframe src = "/html/menu.htm" width = "555" height =
"200">
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>
</body>
</html>
Embed Multimedia
 Sometimes you need to add music or video into your web page. The
easiest way to add video or sound to your web site is to include the
special HTML tag called <embed>. This tag causes the browser itself
to include controls for the multimedia automatically provided browser
supports <embed> tag and given media type.
 You can also include a <noembed> tag for the browsers which don't
recognize the <embed> tag.
 You can use various media types like Flash movies (.swf), AVI's
(.avi), and MOV's (.mov) file types inside embed tag.
 .swf files − are the file types created by Macromedia's Flash

program.
 .wmv files − are Microsoft's Window's Media Video file types.
 .mov files − are Apple's Quick Time Movie format.
 .mpeg files − are movie files created by the Moving Pictures Expert
Group.
Embed Multimedia cont.
 align: Determines how to align the object.
 autostart: This boolean attribute indicates if the media
should start automatically.
 loop: Specifies if the sound should be played continuously
(set loop to true).
 playcount: Specifies the number of times to play the
sound.
 hidden: Specifies if the multimedia object should be
shown on the page
 width: Width of the object in pixels
 height: Height of the object in pixels
 name: A name used to reference the object.
 src: URL of the object to be embedded.
 volume: Controls volume of the sound.
Embed Multimedia cont.
Example
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src = "/html/yourfile.mid" width = "100%" height =
"60" >
<noembed>
<img src = "yourimage.gif" alt = "Alternative Media" >
</noembed>
</embed>
</body>
</html>
Background Audio
 You can use HTML <bgsound> tag to play a soundtrack in the
background of your webpage. This tag is supported by Internet
Explorer only and most of the other browsers ignore this tag. It
downloads and plays an audio file when the host document is
first downloaded by the user and displayed. The background
sound file also will replay whenever the user refreshes the
browser.
 Note − The bgsound tag is deprecated and it is supposed to be
removed in a future version of HTML.
Background Audio cont.
Example
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<bgsound src = "/html/yourfile.mid">
<noembed>
<img src = "yourimage.gif" >
</noembed>
</bgsound>
</body>
</html>
HTML Layout - Using Tables
 The simplest and most popular way of creating layouts is

using HTML <table> tag. These tables are arranged in
columns and rows, so you can utilize these rows and
columns in whatever way you like.
Multiple Columns Layout - Using Tables

 You can design your webpage to put your web content in
multiple pages. You can keep your content in middle
column and you can use left column to use menu and right
column can be used to put advertisement or some other
stuff. This layout will be very similar to what we have at
our website tutorialspoint.com.
HTML Layout cont.
Example 1
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaaaaa" width = "50">
<b>Main Menu</b><br />
HTML<br />
HTML Layout cont.
Example 1 cont.
PYTHON<br />
IOT
</td>
<td bgcolor = "#eeeeee" width = "100" height =
"200">
Technical and Managerial Tutorials
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
</td>
</tr>
</table>
</body>
</html>
HTML Layout cont.
Example 2
<html>
<head>
<title>Three Column HTML Layout</title>
</head>
<body>
<table width = "100%" border = "0">
<tr valign = "top">
<td bgcolor = "#aaaaaa" width = "20%">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
HTML Layout cont.
Example 2 cont.
<td bgcolor = "#b5dcb3" height = "200" width =
"60%">
Technical and Managerial Tutorials
</td>
<td bgcolor = "#aaaaaa" width = "20%">
<b>Right Menu</b><br />
HTML<br />
PYTHON<br />
IOT...
</td>
</tr>
<table>
</body>
</html>
For Reference
https://www.tutorialspoint.com/html
https://www.w3schools.com/html
https://www.geeksforgeeks.org/html-tutorials

HTML

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

HTML

 HTML or HyperText Markup Language is the

 HTML documents consists of text and ‘markup’

 HTML is written in the form of HTML

◦ Container tags – Define a section of text using a

◦ Empty tags – represent a single occurrence of

 An HTML document is divided into two

◦ <HEAD> Heading of Page

◦ <BODY>This is the part of the Web page that

 HTML Sections: div

<pre></pre> Preformatted text

<big></big> increase the size by one

 background : The value of this attribute points to an image that

 Text : Sets the color to be used by the text in all the

 background : The value of this attribute points to an image that

 Text : Sets the color to be used by the text in all the

width=" " pixels or % size of the width

height=" " pixels or % size of the height

hspace=" " pixels horizontal space

vspace=" " pixels vertical space

bgcolor=" " color code background color (HTML

alternate bounce back and forth

direction=" " left it moves left

Attribute Value Explanation

src=" " URL the URL of the image

width=" " pixels or % the size of the width

height=" " pixels or % the size of the height

border=" " pixels the size of a border

alt=" " text short description

align=" " vertical alignment

bottom aligns to the bottom

There are three types of list in html

Attribute Value Explanation

type=" " disc •disc styles

circle ocircle styles

square square styles

<ol type="A" start="5"> Output

Attribute Value Explanation

type=" " 1 arabic numeral

A alphabet (capital letter)

a alphabet (small letter)

i roman numeral (small letter)

start=" " number the number to start on

<a href="url">link text</a>

Attribute Value Explanation

border=" " pixels the size of the border

height=" " pixels or % the size of the height

width=" " pixels or % the size of the width

bordercolor=“ ” color code Border color

cellspacing=" " pixels or % the size of the space

bgcolor=“” #hexcode/ Deprecated − Specifies the

cellpadding=“” pixels or % Deprecated − Specifies the

align=“” right Deprecated − Visual alignment.

 The <input> Element

<form action = "Script URL" method = "GET|POST"> form

action: Backend script ready to process your passed data.

method: Method to be used to upload data.

a) Text Input Controls

 Single-line text input controls − This control is used for

 Password input controls − This is also a single-line text

 Multi-line text input controls − This is used when the user

Attribute & Description

 This is also a single-line text input but it masks