HTML(Part-1)
Prepared by Khushal Rajani
What is HTML ?
• In 1980 Tim Berners Lee found the HTML.
• HTML stands for Hyper Text Mark-up Language
• HTML is computer language that is used to create documents on the World
Wide Web (Simply means it is used to create webpages)
• HTML is not a programming language but a Mark-up language, that uses
<tags>(mark-up) like this to describes the structure of Web pages.
• Tags are the building blocks of HTML pages.
• E.g of tags are <p>, <head>, <title>, <table> and so on.
• Browsers do not display the HTML tags, but use them to render the content
of the page
Structure of a Web page
What is Mark-up Language ?
• A markup language is a computer language that
uses tags to define elements within a document. It is
human-readable, meaning markup files contain standard
words, rather than typical programming syntax. While
several markup languages exist, the two most popular
are HTML and XML.
What is Mark Up Language ?
• HTML is a markup language used for creating webpages.
The contents of each webpage are defined by HTML tags.
Basic page tags, such as <head>, <body>,
and <div> define sections of the page, while tags such
as <table>, <form>, <image>, and <a> define elements
within the page.
Structure of HTML Document
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Page Heading</h1>
<p> paragraph</p>
</body>
</html>
Structure of HTML Document(Explained)
• The <!DOCTYPE html> declaration defines this document to be
HTML5
• The <html> element is the root element of an HTML page.
• The <head> element contains information about the document
• The <title> element specifies a title for the document
• The <body> element contains the visible page content
HTML Tags
• HTML tags are element names surrounded by angle brackets:
– Syntax: <tagname> Content goes here...</tagname>
• In HTML two types of tags are available
1. Two sided tags
This type of tags are come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a forward slash inserted before
the tag name
2. One sided tags
You don't have to close these type of tags
i.e. <img/>, <br/>, <hr/>
HTML Tags(Continue)
• HTML tag also has attributes.
– Syntax: <tagname attributes>Content...</tagname>
• Attributes means properties of tag.
• You can change tag's behavior by changing value of an attribute
– i.e: <body bgcolor=”red”>
In above example bgcolor is an attribute of body tag.
Normally webpage has white coloured background, but by using
bgcolor attribute we can change the background colour of our
webpage, in above example we changed webpage colour to the
red
<head> tag
• The HEAD tag defines an HTML document header.
• The header contains information about the document rather than
information to be displayed in the document.
• The head tag contain <title> , <script>, <style> and <link> tags.
• Syntax: <head> ...... </head>
<title> tag
• The title tag specified the title of the document.
• This title appears in the title bar of the browser windows.
• If no title is specified, the default title depends on the browser
being used.
• This tag used within <head> tag
• Example:
<html>
<head>
<title>F.Y. B.C.A.</title>
</head>
</html>
<body> Tag
• The <body> tag defines the document's body.
• The <body> element contains all the contents of an HTML document, such as
text, hyperlinks, images, tables, lists, etc.
• Attributes:
Attributes of body tag
Attribute
Value
Description
alink
color-name/ hexadecimalcode
Specifies the color of an active link in a document
link
color-name/ hexadecimalcode
Specifies the color of unvisited links in a document
vlink
color-name/ hexadecimalcode
Specifies the color of visited links in a document
text
color-name/ hexadecimalcode
Specifies the color of the text in a document
bgcolor
color-name/ hexadecimalcode
Specifies the background color of a document
background
path of image
Specifies a background image for a document
FORMATTING
TAGS
<p> Tag
• The <p> tag defines a paragraph.
• Syntax:
• Attributes:
Attribute Value
Description
align
left/ center/ Specifies the alignment of a heading
right
title
text
Shows tooltip when you hover on the heading
<p> Tag(Continue...)
• Example:
<p align=“center”>center text</p>
<p align=“left”>Left text</p>
<p align=“right”>Right text</p>
• Output:
center text
Left Text
Right Text
<br> Tag
• It means line breaking.
• Line breaking <br> element specifies that a new line must be started at the
next line.
• Example:
• Output:
Hey,
How are you?
<hr> tag
•
•
•
•
<hr> stands for horizontal rule.
The <hr> tag creates horizontal line in an HTML page.
The <hr> element can be used to separate content in an html page.
Attributes
Attribute
Value
Description
Size
int(Pixel values)
Specifies the thickness of line
Color
color name/
hexcode of color
Specifies the color of line
<hr> (continue...)
• Example:
• Output:
<font> Tag
• The font tags lets you change the color, size and type(face) of the
font.
• All text between the <font> and </font> tags is displayed with the
specified font characteristics.
• Syntax:
– <font color=”{color-name/hex-code}” face={font-type} size=”{1-7}>
{your content goes here}
</font>
<font> Continue
• Attributes:
Attribute
Value
Description
color
color-name/
Specifies the color of text
hexadecim-al color
code
face
font_family(font_na Specifies the font type of text
me)
size
int(1-7)
Specifies the relative size of the font,
in a range from 1 to 7,with a default
size of 3.
<font> Tag Continue....
• Example:
– <font color=”red” face=”comic sans ms” size=”7”>Hello World!</font>
• Output:
Hello World!
Formatting Tags
• Formatting tags will determine how content appear on webpage.
• HTML uses elements like <b> ,<i>, <u> etc. tags for formatting
output, like bold or italic text.
Text Formatting Tags List
HTML 4.0 and previous version of
HTML
<b>
HTML 5.0
<i>
<em>
<u>
<ins>
<strike>
<del>
<strong>
<big>
<small>
<b> and <strrong>
• <b> and <strong> displays text in bold face.
• Syntax:
– <b>......</b>
– <strong>......</strong>
• Example:
– Computer is invented by <b>Charles Babage</b>.
– Computer only understands <strong>Binary language</strong>.
• Output:
– Computer is invented by Charles Babage.
– Computer only understands Binary language.
<i> and <em>
• <i> and <em> display text in italic.
• It means words should be slants its meaning.
• Syntax:
– <i>......</i>
– <em>......</em>
• Example:
– <i>This text is italic</i>
– <em>This text is emphasized</em>
• Output:
– This text is italic
– This text is emphasized
<u> and <ins>
• The U tag underline the text it encloses.
• Gaps between words in the enclosed text are also underlined.
• Syntax:
– <u>....</u>
– <ins>......</ins>
• Example:
– <u>underlined text</u>
– <ins>inserted text</ins>
• Output:
– underlined text
– inserted text
<strike> and <del>
• The strike tag display text with a line(strike) through it.
• <del> used to show deleted text
• Syntax:
– <strike>....</strike>
– <del>.....</del>
• Example:
– Example of <strike>STRIKE</strike> tag.
– My favourire colour is <del>Red</del> Blue.
<big>
• The big tag increases the font size from its curreunt value by 1.
• Syntax:
– <big>….</big>
• Example:
– My name is <big> Shaunak Purohit</big>
• Output:
– My name is Shaunak Purohit
<small>
• The small tag reduces the font size from its curreunt value by 1.
• Syntax:
– <small>….</small>
• Example:
– Example of <small>small</small> tag
• Output:
– Example of small tag.
<sub>
• The sub tag displays text as subscript.
• A subscript appears slightly below the baseline(bottom edge) and
in a smaller font.
• Syntax:
– <sub>…</sub>
• example
– H<sub>2</sub>o
• Output
– H2O
<sup>
• The sup tag displays text as subscript.
• A superscript appears slightly above the top of the
preceding text and in a smaller font
• Syntax:
– <sup>…</sup>
• example
– E=mc<sup>2</sup>
• Output
– E=mc2
Heading Tags or <Hx> tags
• There are SIX level of headings in HTML.(i.e. <h1> to <h6>)
• <h1> to <h6> used to define heading
• The highest level of heading is <H1> , followed by <H2> and up
to <H6>
• So <h1> defines the most important heading. <h6> defines the
least important heading.
• A heading element implies font changes, paragraph breaks before
and after ,and white space necessary to render the headings.
Heading Tags (continue....)
• Syntax:
– <Hx [align=“{Heading alignment}”] [title=“{information tooltip}”]>
{Heading goes here}
</Hx>
• Attribute:
Attribute Value
Description
align
left/ center/ Specifies the alignment of a heading
right
title
text
Shows tooletip when you hover on the heading
Heading Tags (continue...)
• Example:
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<h3>Hello World!</h3>
<h4>Hello World!</h4>
<h5>Hello World!</h5>
<h6>Hello World!</h6>
<pre> Tag
• The preformatted text element present block of text in fixed-width font, and
so is suitable for text that has been formatted on screen (e.g .notepad).
• Syntax:
– <pre>
preformatted text
</pre>
• Example:
– <pre>
This is
preformatted text
</pre>
<marquee>
• The HTML <marquee> tag is used for scrolling piece of text or image
displayed either horizontally across or vertically down your web site page
depending on the settings.
• Attributes:
Attribute
Value
Description
behavior
scroll/ slide/ alternate
• Scroll: makes the marquee test start completely off
one side of the browser window , scroll all the way
across and completely off the opposite side, then
start again.
• Slide: cause the text to scroll in from one side of
the browser window, then stick at the end of its
scroll cycle.
• alternate: means bounce back and forth within the
marquee.
bgcolor
color-name/Hex-value
Specifies background color for marquee
<marquee> (Continue....)
Attribute
Value
Descripton
direction
left/right/up/
down
Specifies direction of marquee text
height
value in px/
value%
Specifies height of marquee
width
value in px/
value%
Specifies width of marquee
hspace
value in px/
value%
It is used to specify the number of pixel free space at
the left and right hand sides of the <marquee> so that
text that flows around the <marquee> doesn’t push up
against the sides.
vspace
value in px/
value%
It is used to specify the number of pixel free space at
the up and downhand sides of the <marquee> so that
text that flows around the <marquee> doesn’t push up
against the sides.
<marquee> (Continue....)
Attribute
Value
Descripton
loop
Number /
Infinite
specifies how many times a marquee will loop when
activated.
scrollamount int
This specifies the number of pixels between each successive.
Draw of the marquee text, that is the amount for the text to
move between each draw. Default value of scroll amount is
6.
Scrolldelay
Specifies the number of milliseconds between each
successive draw of the marquee text. That is, it controls the
speed at which text draw takes place. Default value of
scrolldelay is 85.
int
The List Tags
What is list ?
• When we want to mention a list of items, there are two
methods of doing so.
• We can number them as 1,2,3,…etc.
• Or we can list them one below the other without
numbers.
• When we list them without numbers, it is called an
unordered list.
• When we number them, it is call an ordered list.
Unordered List
•
•
•
•
•
The tag for a bulleted list is <ul> & </ul>
Here ul stands for Unordered List.
To put item inside list you have to use <li>Item</li> inside <ul> & </ul>
Here li stands for List Item.
Syntax:
<ul [type={list-type}]>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
.
.
.
</ul>
Unordered List (Continue....)
Attribute
Value
type
square/circle/disc
Descripton
Used to change the bullets of the list
Ordered List
•
•
•
•
•
The tag for a numbered list is <ol> & </ol>
Here ol stands for Ordered List.
To put item inside list you have to use <li>Item</li> insidel <ol> & </ol>
Here li stands for List Item.
Syntax
<ol [type={list-type} start={number} reversed]>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
.
.
.
</ol>
Ordered List (Continue....)
• Type Attribute:
– Instead of numeral, we can have letters A,B,C…..or a,b,c…,etc.
– We can set it using type attribute. It has following possible values.
Values
Meaning
1
Number
A
Upper case letters A,B,C..
a
Lower case letters a,b,c..
I
Upper case roman numerals ,I,II,III,…etc.
I
Lower case roman numerals I,ii,iii…..etc.
Ordered List (Continue....)
Attribute
Value
Descripton
start
number
Used to give your startin index
reversed
null
Used to display list numbers in reverse order
Definition Lists
• The tag for this list is <dl> & </dl>.
• Each term is surrounded with the <dt> tag and each description is
surrounded with the <dd> tag
• Here dd stands for Definition List, dt stands for Definition Title and dd
stands for Definition Detail.
<dl>
<dt>Electron</dt>
<dd>Carries negative electric charge</dd>
</dl>
<dl>
<dt>Proton</dt>
<dd>Carries negative positive charge</dd>
</dl>
Image handaling
Adding images
• You can add images using <img> tag.
• <img> is one sided tag so you don't have to close it or you can simply
close it by using”/” before “>”. i.e. <img/>
Adding images(Continue....)
• Attributes:
Attribute
Value
Description
src
path of file
Here you have to put location of file
alt
text
When image is not loaded properly this text will be displayed
to users.(Also if you give the wrong path in src this text will be
appear to the user)
border
pixel
It will show border around image
height
pixel/ %
Defines height of image
width
pixel/ %
Defines width of image
Adding images(Continue....)
Attribute
Value
Description
hspace
pixel
Defines horizontal margin
vspace
pixel
Defines vertical margin
Hyperlinks
<a> tag
• The <a> tag defines a hyperlink, which is used to link from one page to
another.
• Here a stands for anchor tag.
• The most important attribute of the <a> element is the href attribute,
which indicates the link's destination.
• By default, links will appear as follows in all browsers:
– An unvisited link is underlined and blue
– A visited link is underlined and purple
– An active link is underlined and red
• You can also move in same page using name attribute(This
functionality known as bookmark)
<a> tag(Continue....)
• Main Attributes:
Attribute
Value
Description
href
location of document Specifies the URL of the page the link goes to
/ #bookmark-name
name
text
target
_blank
_parent
_self(default value)
_top
framename
Specifies the name of an anchor
Specifies where to open the linked document
<a> tag(Continue....)
• Target attribute:
Value
Description
_blank
Opens the linked document in a new window or tab
_self
Opens the linked document in the same frame as it was clicked (this is
default)
_parent
Opens the linked document in the parent frame
_top
Opens the linked document in the full body of the window
framename
Opens the linked document in a named frame
<a> tag(Continue....)
• Normal Hyperlink Creation:
<a href=”www.google.com”>Open Google</a>
• Bookmark vs Hyperlink:
Hyperlink
Bookmark
One page to other page linking
One option to other option linking within
the same page
Set link by href option with other page url
Set bookmark by href option with
#symbol.
Example:
<a href=“test.html”>
Example:
<a href=“#cpu”>
<a> tag(Continue....)
• Example of bookmark:
<a href=”#p3”>Move to paragraph - 3</a>
<h1>Paragraph - 1</h1>
<p>This is paragraph 1.</p>
<h1>Paragraph - 2</h1>
<p>This is paragraph 2.</p>
<a name=”p3”><h1>Paragraph - 3</h1></a>
<p>This is paragraph 3.</p>
End of HTML Part - 1
