BASIC_HTML_TAGS
BASIC_HTML_TAGS
HTML stands for Hyper Text Markup Language, which is the most widely
used language on Web to develop web pages.
HTML 2.0 was the first standard HTML specification which was published
in 1995.
HTML 4.01 was a major version of HTML and it was published in late
1999.
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
output
This is a heading
Document content goes here.....
HTML Tags
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs.
Each paragraph of text should go in between an opening <p> and a closing </p> tag
<html>
<head> Output
<title>Paragraph Example</title>
</head> Here is a first paragraph of text.
</html>
Line Break Tag
The <br /> tag has a space between the characters br and the
forward slash.
If you omit this space, older browsers will have trouble rendering
the line break, while if you miss the forward slash character and
just use <br> it is not valid in XHTML.
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
james</p> Output
</body>
Hello
You delivered your assignment on time.
</html> Thanks
james
Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.
<html>
<head>
<title>Centring Content Example</title>
</head>
Output
<body>
<p>This text is not in the center.</p> This text is not in the center.
</html>
Horizontal Lines
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at
bottom</p>
</body>
</html>
Preserve Formatting
Sometimes, we want your text to follow the exact format of how it is written in the
HTML document. In these cases, you can use the preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag will preserve the
formatting of the source document.
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
Output
</html>
align attribute: left, center and right.
<html>
<head>
<title>Align Attribute Example</title> Output
</head>
This is left aligned
<body>
This is center aligned
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p> This is right aligned
<p align = "right">This is right aligned</p>
</body>
</html>
The behavior of this attribute will depend upon the element that carries it, although it is
often displayed as a tooltip when cursor comes over the element or while the element is
loading.
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title = "Hello HTML!">Titled Heading Tag
Example</h3>
</body>
</html>
The dir Attribute
The dir attribute allows you to indicate to the browser about the direction in which
the text should flow.
The dir attribute can take one of two values:ltr and rtl
<head>
<title>Display Directions</title>
</head>
<body>
This is an example for right-to-left directed
text.
</body>
</html>
Background color
Bold Text
Anything that appears within <b>...</b> element, is displayed in bold
Italic Text
Anything that appears within <i>...</i> element is displayed in italicized
Underlined Text
Anything that appears within <u>...</u> element, is displayed with
underline
Strike Text
Anything that appears within <strike>...</strike> element is displayed with strikethrough
Monospaced Font
The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are
known as variable-width fonts because different letters are of different widths (for
example, the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each
letter has the same width.
Superscript Text
The content of a <sup>...</sup> element is written in superscript; the font size used is the
same size as the characters surrounding it but is displayed half a character's height above
the other characters.
Subscript Text
The content of a <sub>...</sub> element is written in subscript; the font size used is the
same as the characters surrounding it, but is displayed half a character's height beneath
the other characters.
Inserted Text
Anything that appears within <ins>...</ins> element is displayed as inserted text.
Deleted Text
Anything that appears within <del>...</del> element, is displayed as deleted text.
Larger Text
The content of the <big>...</big> element is displayed one font size larger than the rest of
the text surrounding it
Smaller Text
The content of the <small>...</small> element is displayed one font size smaller than the
rest of the text surrounding it
Grouping Content
The <div> and <span> elements allow you to group together several elements to create
sections or subsections of a page.
For example, you might want to put all of the footnotes on a page within a <div>
element to indicate that all of the elements within that <div> element relate to the
footnotes. You might then attach a style to this <div> element so that they appear using
a special set of style rules.
The <span> element, on the other hand, can be used to group inline elements only. So,
if you have a part of a sentence or paragraph which you want to group together, you
could use the <span>
<html> <html>
<head> <head>
<title>Div Tag Example</title> <title>Span Tag Example</title>
</head> </head>
<body> <body>
<div id = "menu" align = "middle" > <p>This is the example of <span style = "color:green">span
<a href = "/index.htm">HOME</a> | tag</span>
<a href = "/about/contact_us.htm">CONTACT</a> | and the <span style = "color:red">div tag</span>
<a href = "/about/index.htm">ABOUT</a> alongwith CSS</p>
</div> </body>
</html>
Emphasized Text
Anything that appears within <em>...</em> element is displayed as emphasized text.
Marked Text
Anything that appears with-in <mark>...</mark> element, is displayed as marked with yellow ink.
Strong Text
Anything that appears within <strong>...</strong> element is displayed as important text.
Text Direction
The <bdo>...</bdo> element stands for Bi-Directional Override and it is used to override the current text
direction.
Short Quotations
The <q>...</q> element is used when you want to add a double quote within a sentence.
Address Text
The <address>...</address> element is used to contain any address.
<bdo dir="rtl">
This text will go right-to-left.
</bdo>
HTML has several list elements. Most list elements are composed of
one or more <LI> (List Item) elements.
UL : Unordered List. Items in this list start with a list mark such as a
bullet. Browsers will usually change the list mark in nested lists.
<UL>
<LI> List item …</LI>
<LI> List item …</LI>
</UL>
Choice of three bullet types: disc(default), circle,
square.
These are controlled in Netscape Navigator by the
“TYPE” attribute for the <UL> element.
<UL TYPE=“square”>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</UL>
OL: Ordered List. Items in this list are numbered
automatically by the browser.
<OL>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
choice of setting the TYPE Attribute to one of five
numbering styles.
TYPE Numbering Styles
1 Arabic 1,2,3, ……
numbers
a Lower alpha a, b, c, ……
A Upper alpha A, B, C, ……
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Reference tag/anchor tag
The tags used to produce links are the <A> and </A>.
The <A> tells where the link should start and
the </A> indicates where the link ends.
Everything between these two will work as a link.
The example below shows how to make the word Here work as a link to
yahoo.
<body>
<p>Document content goes here.....</p>
</body>
</html>
Insert Image
You can insert any image in your web page by using <img> tag.
<html>
Set Image Width/Height
<head>
<title>Using Image in Webpage</title>
</head> You can set image width and
height based on your
<body> requirement using width
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" /> and height attributes.
</body>
</html>
Set Image Border <html>
We will use colspan attribute if you want to merge two or more columns into a single column.
Similar way use rowspan if we want to merge two or more rows.
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head> <tr>
<td>Row 2 Cell 2</td>
<body> <td>Row 2 Cell 3</td>
<table border = "1"> </tr>
<tr> <tr>
<th>Column 1</th> <td colspan = "3">Row 3 Cell 1</td>
<th>Column 2</th>
<th>Column 3</th> </tr>
</tr> </table>
<tr> </body>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td> </html>
<td>Row 1 Cell 3</td>
</tr>
Table Height and Width
You can set a table width and height using width and height attributes.
<html> <tr>
<td>Row 2, Column 1</td>
<head> <td>Row 2, Column 2</td>
<title>HTML Table Width/Height</title> </tr>
</head> </table>
</body>
<body>
<table border = "1" width = "400" height = </html>
"150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
Table Header, Body, and Footer
Tables can be divided into three portions − a header, a body, and a foot.
The first <frame> tag in a <frameset> specifies the content of the first frame, etc.
Row-major order is used
Frame content is specified with the src attribute
Without a src attribute, the frame will be empty (such a frame CANNOT be filled later)
If <frameset> has fewer <frame> tags than frames, the extra frames are empty
Creating Frames
The <frameset> tag defines, how to divide the window into frames.
<head>
<title>HTML Frames</title>
</head>
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
We can define an inline frame with HTML tag <iframe>.
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Document content goes here...</p>
</html>
Set Font Size
You can set content font size using size attribute. The range of accepted
values is from 1(smallest) to 7(largest). The default size of a font is 3.
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size = "1">Font size = "1"</font><br />
<font size = "2">Font size = "2"</font><br />
<font size = "3">Font size = "3"</font><br />
<font size = "4">Font size = "4"</font><br />
<font size = "5">Font size = "5"</font><br />
<font size = "6">Font size = "6"</font><br />
<font size = "7">Font size = "7"</font>
</body>
</html>
The <marquee> Tag
An HTML marquee is a scrolling piece of text displayed either
horizontally across or vertically down your webpage depending on the
settings.
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
</body>
</html>
<body>
<marquee direction = "right">This text will scroll from left to right</marquee>
</body>
<body>
<marquee direction = "up">This text will scroll from bottom to up</marquee>
</body>
The HTML Style Attribute
<tagname style="property:value;">
<body style="background-color:powderblue;">
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
HTML Colors
<a href="default.asp">
</a>
Image Floating
<p> <img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
In the image below, click on the computer, the phone, or the cup of coffee:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<h2>Background Image</h2>
</body>
<p style="background-image:url('clouds.jpg');">
...
</p>
The <div> Element
The <div> element is often used as a container for other HTML
elements.
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous
city in the United Kingdom, with a metropolitan area of over 13
million inhabitants.</p>
</div>
The <span> Element
<iframe src="URL"></iframe>
<iframe src="demo_iframe.htm"
style="height:200px;width:300px;"></iframe>
<iframe src="demo_iframe.htm" style="border:none;"></iframe>
The target attribute of the link must refer to the name attribute of the
iframe:
<iframe src="demo_iframe.htm"
name="iframe_a"></iframe>
<p><a href="https://www.google.com"
target="iframe_a">Load new web page</a></p>
HTML Entities
Result Description Entity Name
non-breaking space
< less than <
> greater than >
& ampersand &
" double quotation mark "
¢ cent ¢
£ pound £
¥ yen ¥
€ euro €
© copyright ©
® registered trademark ®
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 could, for example, use <embed> to
display a movie of your choice, and <noembed> to display a single JPG
image if browser does not support <embed> tag.
<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>
Sr.No Attribute & Description
1 align
Determines how to align the object. It can be set to either center, left or right.
2 autostart
This boolean attribute indicates if the media should start automatically. You can set it either true or false.
3 loop
Specifies if the sound should be played continuously (set loop to true), a certain number of times (a positive value) or not at all
(false)
4 playcount
Specifies the number of times to play the sound. This is alternate option for loop if you are usiong IE.
5 hidden
Specifies if the multimedia object should be shown on the page. A false value means no and true values means yes.
6 width
Width of the object in pixels
7 height
Height of the object in pixels
8 name
A name used to reference the object.
9 src
URL of the object to be embedded.
10 volume
Controls volume of the sound. Can be from 0 (off) to 100 (full volume).
Background Audio
You can use HTML <bgsound src=“ ”> 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.