HTML Tech Move

Introduction of HTML
HTML stands for Hyper Text Markup Languag

HTML is the standard markup language for creating Web page
HTML describes the structure of a Web pag
HTML consists of a series of element
HTML elements tell the browser how to display the conten
HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.
Basic structure of an HTML document
e
<!DOCTYPE
<html
<head
M
<title>Web page title</title o v
</head
<body
e c h
T
<h1>Write Your First Heading</h1
<p>Write Your First Paragraph.</p
</body
</html>
Description of HTML document

<!DOCTY P E> : It de fi nes the document type or it instruct the browser
about the version of HTML .
The <!DOCTYPE> declaration is not case sensitive .
The <!DOCTYPE> declaration for HTML 5 is :
<!DOCTYPE html >
< h tml > : This tag informs the browser that it is an HTML document. Text
between html tag describes the web document. It is a container for all
other elements of HTML except <!DOCTYPE >
< h e a d> : It should be the fi rst element inside the <html> element, which
contains the metadata ( information about the document ) . It must be
closed before the body tag opens .
<title> : A s its name suggested, it is used to add title of that HTML page
which appears at the top of the browser window. It must be placed inside
the head tag and should close immediately. ( Optional )
<body> : Text between body tag describes the body content of the page
that is visible to the end user. This tag contains the main content of the
HTML document .
< h 1> : Text between <h1> tag describes the fi rst level heading of the
webpage .
< p > : Text between <p> tag describes the paragraph of the webpage.
What is an HTML Element:

A n HTML element is de fi ned 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 fi rst paragraph.</p>
HTML Heading:
HTML headings are de fi ned with the <h1> to <h 6 > tags .
<h1> de fi nes the most important heading. <h 6 > de fi nes the least
e
important heading .
oHeading 2
<h1>Heading 1</h1 >

Heading 1
M
<h 2 >Heading 2 </h 2>
v
h
c
Heading 3
e
Heading 4
<h 6 >Heading 6 </h 6 >
HTML Paragraph:
T Heading 5
Heading 6
The HTML <p> element de fi nes a paragraph .
A paragraph always starts on a new line, and browsers automatically add

some white space ( a margin ) before and after a paragraph
<p>This is fi rst paragraph.</p

<p>This is second paragraph.</p
<p>This is third paragraph.</p>
HTML Line Break:

The HTML <br> element de fi nes a line break .
U se <br> if you want a line break ( a new line ) without starting a new
paragraph :
<p>This is<br>a paragraph<br>with line breaks.</p >
The <br> tag is an empty tag, which means that it has no end tag.
HTML Elements:
A n HTML fi le is made of elements. These elements are responsible for
creating web pages and de fi ne content in that webpage. A n element in
HTML usually consist of a start tag <tag name>, close tag </tag name>
and content inserted between them.
Te c h nica lly, an eleme nt is a co lle ction of start tag , attri b ut e s , e nd

tag , cont e nt be t wee n t hem.
<!DOCTYPE html
<html
<head
<title>WebPage</title
</head
<body
<h1>This is my fi rst web page</h1
<h 2 > How it looks ? </h 2
<p>It looks Nice!!!!!</p
</body
</html>
Nested HTML Elements:

HTML can be nested, which means an element can contain another
element.
Block - Level - Elements

These are the elements, which structure main part of web page, by
dividing a page into coherent blocks
A block-level element always start with new line and takes the full
width of web page, from left to right
These elements can contain block-level as well as inline elements .
Following are the block-level elements in HTML .
<address>, <article>, <aside>, <blockq uote>, <canvas>, <dd>, <div>,

<dl>, <dt>, < fi eldset>, < fi gcaption>, < fi gure>, <footer>, <form>, <h1>-
<h 6 >, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>,
<output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>
<!DOCTYPE html
<html
<head
</head
<body
<div style = "background-color: lightblue">This is fi rst div</div
<div style = "background-color: lightgreen">This is second div</div
<p style = "background-color: pink">This is a block level element</p
</body
</html>
Inline Elements
These elements does not start with new line and take width as per
re q uirement
The Inline elements are mostly used with other elements .
Following are the Inline elements in HTML .
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>,

<code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>,
<ob j ect>, < q >, <samp>, <script>, <select>, <small>, <span>, <strong>,
<sub>, <sup>, <textarea>, <time>, <tt>, <var>..
HTML Tag
<b> Tag: This is a physical tag, which is used to bold the text written
between it .
<p> <b>Write Your First Paragraph in bold text.</b></p >
<strong> Tag : This is a logical tag, which tells the browser that the text is
important .
<p><strong>This is an important content</strong>, and this is normal

content</p >
<i> Tag : This is a physical tag which is used to make text italic .
<p> <i>Write Your First Paragraph in italic text.</i></p >
<em> Tag: This is a logical tag which is used to display content in italic .
<p><em>This is an important content</em>, which displayed in italic

font.</p >
<mark> Tag: This tag is used to highlight text .
<h 2 > I want to put a <mark> Mark</mark> on your face</h 2 >
o e
<u> Tag: This tag is used to underline text written between it .
<p> <u>Write Your First Paragraph in underlined text.</u></p >
M
v
e c h
<sup> Tag: It displays the content slightly above the normal line .
T
<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p >
<sub>Tag: It displays the content slightly below the normal line .
<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p >
<del> Tag: This tag is used to display the deleted content .
<p>Hello <del>Delete your fi rst paragraph.</del></p >
<ins> Tag: This tag displays the content which is added .
<p> <ins>Write another paragraph.</ins></p >
<big> Tag: This tag is used to increase the font si ze by one conventional
unit .
<p>Hello <big>Write the paragraph in larger font.</big></p >
<small> Tag: This tag is used to decrease the font si ze by one unit from
base font si ze .
<p>Hello <small>Write the paragraph in smaller font.</small></p>
HTML Lists
HTML Lists are used to specify lists of information. A ll lists may contain
one or more list elements. There are three di ff erent types of HTML lists
Ordered List or Numbered List ( ol

U nordered List or Bulleted List ( ul
Description List or De fi nition List ( dl )
Note: We can create a list inside another list, which will be termed as
nested List .
HTML Ordered List

HTML Ordered List or Numbered List displays elements in numbered
format. A n ordered list starts with the <ol> tag. Each list item starts with
the <li> tag .
There can be di ff erent types of numbered list

Numeric Number ( 1, 2 , 3
Capital R oman Number ( I II III
S mall R oman Number ( i ii iii
Capital A lphabet (A B C
S mall A lphabet ( a b c )
Example:
<ol
<li>HTML</li
<li> J ava</li
<li> J ava S cript</li
<li> SQ L</li
</ol >
Output:
HTM
J av
J ava S crip
SQL
ol type = "I" : Let ' s see the example to display list in roman number
uppercase.
<ol type = "I"

<li>HTML</li
<li> J ava</li
<li> SQ L</li
</ol >
Output:
I. HTM L
II. J av a
III. J ava S crip t
I V. SQL
ol type = "i" : Display list in roman number Lowercase.
ol type = "A" : Display list in alphabet uppercase .
ol type = "a" : Display list in alphabet lowercase .
S t a rt A ttri bu te :
The start attribute is used with ol tag to specify from where to start the
list items .
<ol type = "1" start = " 5 "> : It will show numeric values starting with " 5 ".
<ol type = "A" start = " 5 "> : It will show capital alphabets starting with "E".
<ol type = "a" start = " 5 "> : It will show lower case alphabets starting with
"e".
<ol type = "I" start = " 5 "> : It will show R oman upper case value starting
with " V ".
HTML Uno rdered List

HTML U nordered List or Bulleted List displays elements in bulleted
format . A n unordered list starts with the <ul> tag. Each list item starts
with the <li> tag .
There can be 4 types of bulleted list

dis
circl
s q uar
non e
Example:
<ul
o e
M
<li>HTML</li v
h
<li> J ava</li
c
e
<li> SQ L</li
</ul >
Output:
HTM
T
J av
J ava S crip
SQL
ul type = "circle": Let ' s see the example to display list in circle bullet
<ul type = "circle"

<li>HTML</li
<li> J ava</li
<li> SQ L</li
</ul >
Output:
HTM
J av
J ava S crip
SQL
ol type = "disc" : This is the default style. In this style, the list items are
marked with bullets .
ol type = " S q uare" : In this style, the list items are marked with s q uares .
ol type = "none" : In this style, the list items are not marked .
HTML D es c ri p ti on List
HTML Description List or De fi nition List displays elements in de fi nition
form like in dictionary.The <dl>, <dt> and <dd> tags are used to de fi ne
description list .
The 3 HTML description list tags are given below

<dl> tag de fi nes the description list
<dt> tag de fi nes data term
<dd> tag de fi nes data de fi nition ( description ).
Example:
<dl
<dt>HTML</dt
<dd>is a markup language</dd
<dt> J ava</dt
<dd>is a programming language and platform</dd
<dt> J ava S cript</dt
<dd>is a scripting language</dd
<dt> SQ L</dt
<dd>is a q uery language</dd
</dl >
Output:
HTM L
is a markup languag e
J av a
is a programming language and platfor m
J ava S crip t
is a scripting languag e
SQL
is a q uery language
HTML Fo r m
A n HTML form is used to collect user input. The user input is most often
sent to a server for processing .
The <form> Element: The HTML <form> element is used to create an

HTML form for user input .
The <form> element is a container for di ff erent types of input elements,

such as: text fi elds, check boxes, radio buttons, submit buttons, etc .
The <Input> Element: The HTML <input> element is the most used
form element .
A n <input> element can be displayed in many ways, depending on the

type attribute .
<input type = "text"> Displays a single-line text input fi el d
<input type = "radio"> Displays a radio button ( for selecting one of many
choices )
<input type = "checkbox"> Displays a checkbox ( for selecting zero or

more of many choices )
<input type = "submit"> Displays a submit button ( for submitting the

form )
<input type = "button"> Displays a clickable butto n
HTML Fo r m Exampl es
Following is the example for a simple form of registration
<!DOCTYPE html
<html
<head
<title>Form in HTML</title
</head
<body
<h 2 > R egistration form</h 2
<form
< fi eldset
<legend> U ser personal information</legend
<label>Enter your full name</label><br
<input type = "text" name = "name"><br
<label>Enter your email</label><br
<input type = "email" name = "email"><br
<label>Enter your password</label><br
<input type = "password" name = "pass"><br
<label>con fi rm your password</label><br
<input type = "password" name = "pass"><br
<br><label>Enter your gender</label><br
<input type = "radio" id = "gender" name = "gender" value = "male"/>Male
<br
<input type = "radio" id = "gender" name = "gender" value = "female"/
>Female <br/
<input type = "radio" id = "gender" name = "gender" value = "others"/
>others <br/
<br>Enter your A ddress:<br
<textarea></textarea><br
<input type = "submit" value = "sign-up"
</ fi eldset
</form
</body
</html >
Output:
Wh a t is M u l ti m edi a ?
Multimedia comes in many di ff erent formats. It can be almost anything
you can hear or see, like images, music, sound, videos, records, fi lms,
animations, and more .
HTML V ideo: The HTML <video> element is used to show a video on a

web page .
Examples :
<video width = " 32 0 " height = " 24 0 " controls >
<source src = "movie.mp 4 " type = "video/mp 4 " >
<source src = "movie.ogg" type = "video/ogg" >
Your browser does not support the video tag .
</video >
> The controls attribute adds video controls, like play, pause, and
volume .
> It is a good idea to always include width and height attributes. If height
and width are not set, the page might fl icker while the video loads .
> The <source> element allows you to specify alternative video fi les
which the browser may choose from. The browser will use the fi rst
recogni zed format .
> The text between the <video> and </video> tags will only be displayed
in browsers that do not support the <video> element .
HTML A udio:
> The controls attribute adds audio controls, like play, pause, and
volume .
> T he <source> element allows you to specify alternative audio fi les

which the browser may choose from. The browser will use the fi rst
recogni zed format .
> The text between the <audio> and </audio> tags will only be displayed
in browsers that do not support the <audio> element .
Examples :
<audio controls autoplay >
<source src = "horse.ogg" type = "audio/ogg" >
<source src = "horse.mp 3 " type = "audio/mpeg" >
Your browser does not support the audio element .
</audio >
HTML Ta b l es
HTML tables allow web developers to arrange data into rows and
columns .
<table> De fi nes a tabl e
<th> De fi nes a header cell in a tabl e
<tr> De fi nes a row in a tabl e
<td> De fi nes a cell in a tabl e
<caption> De fi nes a table captio n
<col> S peci fi es column properties for each column within a

<thread> roups the header content in a tabl e
<tbody> roups the body content in a tabl e
<tfoot> roups the footer content in a tabl e
Examples
<!DOCTYPE html
<html
<head
<title>table</title
<style
table
o e
M
border-collapse: collapse v
h
width: 1 00
c
%
th,td
T
border: 2 px solid green
padding: 1 5 px
e
</style
</head
<body
<table
<tr
<th>1 header</th
<th>1 header</th
<th>1 header</th
</tr
<tr
<td>1data</td
<td>1data</td
<td>1data</td
</tr
<tr
<td> 2 data</td
<td> 2 data</td
<td> 2 data</td
</tr
<tr
<td> 3 data</td
<td> 3 data</td
<td> 3 data</td
</tr
</table
</body
</html>
R eference :
www.w 3 schools.co m
www. j avatpoint.co m
googl e
youtube
T h an k Y ou

HTML Tech Move

Uploaded by

Document Information

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 Tech Move

Uploaded by

Copyright:

Available Formats

Introduction of HTML

HTML stands for Hyper Text Markup Languag

Basic structure of an HTML document

Description of HTML document

The <!DOCTYPE> declaration is not case sensitive .

The <!DOCTYPE> declaration for HTML 5 is :

<!DOCTYPE html >

What is an HTML Element:

<tagname> Content goes here... </tagname >

<h1>My First Heading</h1 >

<p>My fi rst paragraph.</p>

<h1>Heading 1</h1 >

<h 6 >Heading 6 </h 6 >

The HTML <p> element de fi nes a paragraph .

A paragraph always starts on a new line, and browsers automatically add

<p>This is fi rst paragraph.</p

HTML Line Break:

<p>This is<br>a paragraph<br>with line breaks.</p >

Te c h nica lly, an eleme nt is a co lle ction of start tag , attri b ut e s , e nd

Nested HTML Elements:

Block - Level - Elements

Following are the block-level elements in HTML .

<address>, <article>, <aside>, <blockq uote>, <canvas>, <dd>, <div>,

Following are the Inline elements in HTML .

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>,

<p> <b>Write Your First Paragraph in bold text.</b></p >

<p><strong>This is an important content</strong>, and this is normal

<p> <i>Write Your First Paragraph in italic text.</i></p >

<p><em>This is an important content</em>, which displayed in italic

<mark> Tag: This tag is used to highlight text .

<h 2 > I want to put a <mark> Mark</mark> on your face</h 2 >

<p> <u>Write Your First Paragraph in underlined text.</u></p >

<sub>Tag: It displays the content slightly below the normal line .

<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p >

<del> Tag: This tag is used to display the deleted content .

<p>Hello <del>Delete your fi rst paragraph.</del></p >

<ins> Tag: This tag displays the content which is added .

<p> <ins>Write another paragraph.</ins></p >

<p>Hello <big>Write the paragraph in larger font.</big></p >

<p>Hello <small>Write the paragraph in smaller font.</small></p>

Ordered List or Numbered List ( ol

HTML Ordered List

There can be di ff erent types of numbered list

<ol type = "I"

III. J ava S crip t

ol type = "i" : Display list in roman number Lowercase.

ol type = "A" : Display list in alphabet uppercase .

ol type = "a" : Display list in alphabet lowercase .

HTML Uno rdered List

There can be 4 types of bulleted list

<ul type = "circle"

The 3 HTML description list tags are given below

is a programming language and platfor m

The <form> Element: The HTML <form> element is used to create an

The <form> element is a container for di ff erent types of input elements,

A n <input> element can be displayed in many ways, depending on the

<input type = "text"> Displays a single-line text input fi el d

<input type = "checkbox"> Displays a checkbox ( for selecting zero or

<input type = "submit"> Displays a submit button ( for submitting the

<input type = "button"> Displays a clickable butto n

HTML V ideo: The HTML <video> element is used to show a video on a

<video width = " 32 0 " height = " 24 0 " controls >

<source src = "movie.mp 4 " type = "video/mp 4 " >

<source src = "movie.ogg" type = "video/ogg" >