Scribd
Upload
38 views99 pages

HTML

Uploaded by

Sanjeev Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
38 views99 pages

HTML

Uploaded by

Sanjeev Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 99

HTML

Hyper Text Markup Language


Introduction
HTML is the standard markup language for creating
Web pages.
HTML stands for Hyper Text Markup Language
HTML describes the structure of Web pages using
markup
HTML elements are the building blocks of HTML
pages
HTML elements are represented by tags
HTML tags label pieces of content such as "heading",
"paragraph", "table", and so on
Browsers do not display the HTML tags, but use them
to render the content of the page
Example
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
Explanation
The <html> element is the root element of an
HTML page
The <head> element contains meta
information about the document
The <title> element specifies a title for the
document
The <body> element contains the visible
page content
The <h1> element defines a large heading
The <p> element defines a paragraph
HTML basic Tags and Structure
 HTML Tags
 HTML tags are element names surrounded by angle
brackets:
 <tagname>content goes here...</tagname>
Logical vs Physical tags
The differences between logical and physical tags
is one of the fundamental concepts in HTML that,
when understood, can have a huge impact on a web
designer's way of doing things.
Logical Tags:
In HTML there are both logical tags and physical
tags. Logical tags are designed to describe (to the
browser) the enclosed text's meaning. An example of
a logical tag is the <strong> </strong> tag. By
placing text in between these tags you are telling the
browser that the text has some greater importance.
By default all browsers make the text appear bold
when in between the <strong> and </strong> tags,
but the point to take away from this is that the strong
tag implies that importance of that text.
Logical vs Physical tags
Physical Tags:
Physical tags on the other hand provide specific
instructions on how to display the text they
enclose. Examples of physical tags include:
<b> : Makes the text bold.
<big> : Makes the text usually one size bigger
than what's around it.
<font> : Used to apply a font-face (like Arial or
Helvetica) and font-color.
<i> : Makes text italic.
Physical tags are more straightforward; <i>
makes the text italic, <b> makes text bold and
<font> is used to set the font face and color for
the text.
HTML Formatting Tags
If you use a word processor, you must be familiar with
the ability to make text bold, italicized, or underlined;
these are just three of the ten options available to
indicate how text can appear in HTML and XHTML.
Header - <h?> </h?> There are 6 levels of headings
available, from h1 for the largest and most important
heading, down to h6 for the smallest heading.
Bold - <b> </b> The text in between the tags will be
bold, and stand out against text around it, the same as
in a word processor.
Italic - <i> </i> Also working the same way as a word
processor, italics displays the text at a slight angle.
Underline - <u> </u> Again, the same as underline in
a word processor.
White Space and Flow
With only a few exceptions, HTML treats
whitespace characters (spaces, tabs, and
newlines) differently from ordinary characters.
In general, a single whitespace character–
including newlines–or a sequence of
whitespace characters are treated as a single
space and leading/trailing whitespace is
eliminated. This is known as ‘collapsing
whitespace’. Therefore the following two
paragraphs are treated as if they were identical
Normal flow is the way that elements are
displayed in a Web page in most circumstances.
All elements in HTML are inside boxes which
are either inline boxes or block boxes.
Heading.
The <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>
elements are used to create headings in descending
order of importance where <h1> is the most
important and <h6> the least. It add one line before
and after in each heading.
Search engines use the headings to index the
structure and content of your web pages.
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
Paragraph Tag
The <p> tag defines a paragraph.
Browsers automatically add some space
(margin) before and after each <p> element.
The HTML <p> element represents a
paragraph of text. Paragraphs are usually
represented in visual media as blocks of text
that are separated from adjacent blocks by
vertical blank space and/or first-line
indentation.
Tag Description
<p> Defines a paragraph
<br> Inserts a single line break
<pre> Defines pre-formatted text
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
Break Line Tag
The HTML <br> element produces a line
break in text (carriage-return). It is useful for
writing a poem or an address, where the
division of lines is significant.
Permitted content:- None, it is an
empty element.
Tag omission:- Must have a start tag, and must
not have an end tag. In XHTML documents,
write this element as <br />.
Mozilla Foundation<br />
1981 Landings Drive<br />
Building K<br />
Mountain View, CA 94043-0801<br />
USA
Center Tag
The HTML <center> tag is used for
centering the content enclosed with
this tag. It can be in side body, table
cell.
<p>not center this paragraph.</p>
<center>This text will be centered.
<p>So will this paragraph.</p>
</center>
Body and its Attributes
The <body> element may be the
most important HTML element there
is. The contents of the <body>
element are what actually get
displayed to the user visiting your
web page or viewing your document.
And yet, it is very simple. The
<body> must be a direct child of
<html>, it must come after <head>
(if <head> is present, which it
doesn’t have to be), there can be
Attribute
Attribute Value Description
Specifies the color of an active link in a
alink color
document
Specifies a background image for a
background URL
document
Specifies the background color of a
bgcolor color
document
Specifies the color of unvisited links in a
link color
document
Specifies the color of the text in a
text color
document
Specifies the color of visited links in a
vlink color
document
Example
<html>

<head>
<title>Body tags</title>
</head>

<body bgcolor="#ffffff" background="bubbles.gif"


text="#000000" link="#3399ff" vlink="#9966ff"
alink="#000000" bgproperties="fixed"
topmargin="0" marginheight="0" >
The content of the document......
</body>
</html>
Nested Tags
 Tag inside tag.
 HTML elements contained within other HTML elements.
These elements that are "inside" of other are what are known
as "nested elements", and they are essential to building any
web page today.
 HTML tags should be “nested” in a proper order
<html>
<head> <title> Nested Tag</title> </head>
<body>

<h1>My <u>First</u> Heading</h1>


<p>My first <i>paragraph.</i></p>

</body>
</html>
Marquee Tag
The HTML <marquee> element is used to insert a
scrolling area of text. You can control what happens
when the text reaches the edges of its content area
using its attributes.
Attributes
behavior Sets how the text is scrolled within the
marquee. Possible values are scroll, slide and alternate.
If no value is specified, the default value is scroll.
bgcolor Sets the background color through color name
or hexadecimal value.
direction Sets the direction of the scrolling within the
marquee. Possible values are left, right, up and down. If
no value is specified, the default value is left.
height Sets the height in pixels or percentage value.
hspace Sets the horizontal margin
Marquee Tag
loop Sets the number of times the marquee will
scroll. If no value is specified, the default value is
−1, which means the marquee will scroll
continuously.
scrollamount Sets the amount of scrolling at each
interval in pixels. The default value is 6.
scrolldelay Sets the interval between each scroll
movement in milliseconds. The default value is 85.
Note that any value smaller than 60 is ignored and
the value 60 is used instead, unless truespeed is
specified.
width Sets the width in pixels or percentage value.
But not supported by many browser.
Example
<marquee>This text will scroll from right to
left</marquee>
<marquee direction="up">This text will scroll
from bottom to top</marquee>
<marquee direction="down" width="250"
height="200" behavior="alternate"
style="border : solid">
<marquee behavior="alternate"> This text will
bounce </marquee>
</marquee>
HTML Comments
Comment is a piece of code which is ignored by
any web browser. It is a good practice to add
comments into your HTML code, especially in
complex documents, to indicate sections of a
document, and any other notes to anyone looking
at the code. Comments help you and others
understand your code and increases code
readability.
HTML comments are placed in between <!-- ... --
> tags. So, any content placed with-in <!-- ... -->
tags will be treated as comment and will be
completely ignored by the browser.
HTML Comments
Valid vs Invalid Comments
Comments do not nest which means a comment
cannot be put inside another comment. Second
the double-dash sequence "--" may not appear
inside a comment except as part of the closing -->
tag. You must also make sure that there are no
spaces in the start-of comment string.
<html>
<head> <title>Valid Comment Example</title>
</head>
<body> <!-- This is valid comment -->
<p>Document content goes here.....</p>
</body> </html>
Multiline Comments
<html>
<head>
You can comment <title>Multiline
multiple lines by Comments</title>
</head>
the special
beginning tag <!-- <body>
<!--
and ending tag -- This is a multiline comment
> placed before and it can
the first line and span through as many as
lines you like.
end of the last line -->
as shown in the
<p>Document content goes
given example here.....</p>
below. </body>

</html>
The HTML <hr> tag is used for creating a
horizontal line. This is also called Horizontal
Rule in HTML that act as divider between
sections.
Horizontal rule does not have a closing tag.
Attribute Value Description
left
align center Specifies the alignment of a <hr> element
right
Specifies that a <hr> element should render in
noshade noshade one solid color (noshaded), instead of a shaded
color
size pixels Specifies the height of a <hr> element
pixels
width Specifies the width of a <hr> element
%
Red, blue,
color Set shade of Horizontal line
#000FFF etc
HTML Formatting Tags
Bold Text
Anything that appears within <b>...</b> element.
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, which is a
thin line through the text
HTML Formatting Tags
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.
HTML Formatting Tags
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.
HTML Formatting Tags
Larger Text
The content of the <big>...</big> element
is displayed one font size larger than the rest
of the text surrounding
Smaller Text
The content of the <small>...</small>
element is displayed one font size smaller
than the rest of the text surrounding
Phrase Tags
Strong Text
 The HTML <strong> tag gives text a strong emphasis
which traditionally means that the text is displayed as bold
by the browser.
 Anything that appears within <strong>...</strong>
element is displayed as important text.
Text Abbreviation
 You can abbreviate a text by putting it inside opening
<abbr> and closing </abbr> tags. If present, the title
attribute must contain this full description and nothing else.
Acronym Element
 The <acronym> element allows you to indicate that the
text between <acronym> and </acronym> tags is an
acronym.
 At present, the major browsers do not change the
appearance of the content of the <acronym> element.
Phrase Tags
Quoting Text
When you want to quote a passage from another source,
you should put it in between <quote>...</quote> tags.
Text inside a <quote> element is usually indented from
the left and right edges of the surrounding text, and
sometimes uses an italicized font.
The HTML <blockquote> tag is used for indicating long
quotations (i.e. quotations that span multiple lines).
Emphasized Text
The HTML <em> tag marks text that has stress
emphasis which traditionally means that the text is
displayed in italics by the browser.
Anything that appears within <em>...</em> element is
displayed as emphasized text.
Phrase Tags
Abbreviation
An abbreviation and an acronym are both shortened
versions of something else. Both are often
represented as a series of letters.
Marking up abbreviations can give useful information
to browsers, translation systems and search-engines.
Acronym
The HTML Acronym Element (<acronym>) allows
authors to clearly indicate a sequence of characters
that compose an acronym or abbreviation for a word.
The HTML <acronym> tag is used for indicating an
acronym.
Phrase Tags
Blockquote
The <blockquote> element defines a block of
text that is a direct quotation. The <quote>
element should be used when a quotation is
presented inline with the surrounding text, but
when the quotation is presented as a separate
paragraph, <blockquote> is the appropriate
element to use to identify the quotation.
The HTML <blockquote> tag is used for
indicating long quotations (i.e. quotations that
span multiple lines).
Phrase Tags
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> element as follows.
<abbr title="HyperText Markup
Language">HTML</abbr>
<p>The <acronym title="World Wide
Web">WWW</acronym> is only a component of the
Internet.</p>
<blockquote><p>This is a longer block quote.</p>
<p>It uses paragraph elements.</p>
</blockquote>
<p><em>Stress emphasized text goes
here</em></p>
<p>WWF's goal is to:
<q>Build a future where people live in harmony
with nature.</q>
We hope they succeed.</p>
HTML Lists
HTML offers web authors three ways for
specifying lists of information. All lists must
contain one or more list elements. Lists may
contain −
<ul> − An unordered list. This will list items
using plain bullets.
<ol> − An ordered list. This will use different
schemes of numbers to list your items.
<dl> − A definition list. This arranges your
items in the same way as they are arranged in
a dictionary.
HTML Unordered Lists
An unordered list is a collection of related
items that have no special order or
sequence. This list is created by using
HTML <ul> tag. Each item in the list is
marked with a bullet.
<body>
<ul> <li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li> </ul>
</body>
The type Attribute
You can use type attribute for <ul> tag to
specify the type of bullet you like. By
default, it is a disc. Following are the
possible options −
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
HTML Ordered Lists
If you are required to put your items in a
numbered list instead of bulleted, then HTML
ordered list will be used. This list is created by
using <ol> tag. The numbering starts at one and
is incremented by one for each successive ordered
list element tagged with <li>.
<ol>
 <li>Beetroot</li>
 <li>Ginger</li>
 <li>Potato</li>
 <li>Radish</li>
</ol>
The type Attribute
You can use type attribute for <ol> tag to
specify the type of numbering you like. By
default, it is a number. Following are the
possible options −
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
The start Attribute
You can use start attribute for <ol> tag to specify
the starting point of numbering you need.
Following are the possible options −
<ol type = "1" start = "4"> - Numerals starts with
4.
<ol type = "I" start = "4"> - Numerals starts with
IV.
<ol type = "i" start = "4"> - Numerals starts with
iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.
HTML Definition Lists
HTML and XHTML supports a list style
which is called definition lists where
entries are listed like in a dictionary or
encyclopedia. The definition list is the ideal
way to present a glossary, list of terms, or
other name/value list.
Definition List makes use of following three
tags.
<dl> − Defines the start of the list
<dt> − A term
<dd> − Term definition
</dl> − Defines the end of the list
Example
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup
Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer
Protocol</dd>
</dl>
</body>
HTML - Fonts
Fonts play a 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 but you can use
HTML <font> tag to add style, size, and color to
the text on your website. You can use
a <basefont> tag to set all of your text to the
same size, face, and color.
The font tag is having three attributes called size,
color, and face to customize your fonts.
To change any of the font attributes at any time
within your webpage, simply use the <font> tag.
The text that follows will remain changed until
you close with the </font> tag.
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.
<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>
Relative Font Size
You can specify how many sizes larger or how
many sizes smaller than the preset font size
should be. You can specify it like <font size =
"+n"> or <font size = "−n">
<body>
<font size = "-1">Font size =
"-1"</font><br />
<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>
Setting Font Face
You can set font face using face attribute but be aware
that if the user viewing the page doesn't have the font
installed, they will not be able to see it. Instead user will
see the default font face applicable to the user's
computer.
<body>
<font face = "Times New Roman" size = "5">Times
New Roman</font><br />
<font face = "Verdana" size =
"5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans
MS</font><br />
<font face = "WildWest" size =
"5">WildWest</font><br />
<font face = "Bedrock" size =
"5">Bedrock</font><br />
Specify alternate font faces
A visitor will only be able to see your font if
they have that font installed on their computer.
So, it is possible to specify two or more font
face alternatives by listing the font face names,
separated by a comma.
<font face = "arial, helvetica">
<font face = "Lucida Calligraphy, Comic Sans
MS, Lucida Console">
When your page is loaded, their browser will
display the first font face available. If none of
the given fonts are installed, then it will display
the default font face Times New Roman.
Setting Font Color
You can set any font color you like
using color attribute. You can specify the color
that you want by either the color name or
hexadecimal code for that color.
<body>
<font color = "#FF00FF">This text is in
pink</font><br />
<font color = "red">This text is red</font>
</body>
The <basefont> Element
The <basefont> element is supposed to set a
default font size, color, and typeface for any
parts of the document that are not otherwise
contained within a <font> tag. You can use
the <font> elements to override the
<basefont> settings.
The <basefont> tag also takes color, size and
face attributes and it will support relative
font setting by giving size a value of +1 for a
size larger or −2 for two sizes smaller.
HTML Images and Links
Images are very important to beautify as well
as to depict many complex concepts in simple
way on your web page. This tutorial will take
you through simple steps to use images in
your web pages.
Insert Image
You can insert any image in your web page by
using <img> tag. Following is the simple
syntax to use this tag.
<img src = "Image URL" Attr_name=
"Attr_value" ... attributes-list />
Attribute Value Description

align left Specifies the horizontal


right alignment for the image.
center

src URL Specifies URL of Image file

alt text Specifies alternate text if image


is missing

border pixels Specifies the width of the image


border.

height pixels or % Specifies the height of the


image.

width pixels or % Sets the width of an image in


pixels or in %.

valign top Specifies the Vertical alignment


bottom for the image.
middle
Image Attributes
<img src = “URL" alt = "HTML Image “ />
<img src = “URL" alt = "HTML Image "
height = "150" width = "140" border= “2”
title=“HTML”/>
HTML - Text Links
A webpage can contain various links that take you
directly to other pages and even specific parts of a
given page. These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web
sites by clicking on words, phrases, and images.
Thus you can create hyperlinks using text or images
available on a webpage.
Linking Documents
A link is specified using HTML tag <a>. This tag is
called anchor tag and anything between the
opening <a> tag and the closing </a> tag becomes
part of the link and a user can click that part to
reach to the linked document. Following is the
simple syntax to use <a> tag.
href:- Specifies the URL of the target of a
hyperlink. Its value is any valid document
URL, absolute or relative, include a fragment
identifier or a JavaScript code fragment.
<a href = "Document URL" > Link Text </a>
HTML Image link
We have seen how to create hypertext link
using text and we also learnt how to use
images in our webpages. Now, we will learn
how to use images to create hyperlinks.
<a href = "Index.html" >
<img src = " URL of Image " alt = “HTML
Image" border = “1"/>
</a>
Tables in HTML
Tables are very useful to arrange in HTML and
they are used very frequently by almost all web
developers. Tables are just like spreadsheets
and they are made up of rows and columns.
You will create a table in HTML/XHTML by
using <table> tag. Inside <table> element the
table is written out row by row. A row is
contained inside a <tr> tag . which stands for
table row. And each cell is then written inside
the row element using a <td> tag . which
stands for table data.
Table Tags
Tag Description
<table> Defines a table
<th> Defines a table Header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table
caption
Example
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
Table Attributes
align
This enumerated attribute indicates
how the table must be aligned inside the
containing document. It may have the
following values:
left: the table is displayed on the left
side of the document;
center: the table is displayed in the
center of the document;
right: the table is displayed on the right
Table Attributes
bgcolor
This attribute defines the background
color of a table. It consists of a 6-digit
hexadecimal code as defined
in sRGB and is prefixed by '#'. This
attribute may be used with one of
sixteen predefined color strings.
border
This integer attribute defines, in pixels,
the size of the frame surrounding the
table. If set to 0, the frame attribute is
Table Attributes
cellpadding
This attribute defines the space
between the content of a cell and its
border, displayed or not. If the
cellpadding's length is defined in pixels,
this pixel-sized space will be applied
to all four sides of the cell's content.
cellspacing
This attribute defines the size of the
space between two cells in a percentage
value or pixels. The attribute is
Table Attributes
width
This attribute defines the width of the
table. The width may be defined by
pixels or a percentage value. A
percentage value will be defined by the
width of the container in which the table
is placed.
Table Heading – The <th> Element:
Table heading can be defined using <th>
element. This tag will be put to replace
<td> tag which is used to represent actual
data. Normally you will put your top row
as table heading as shown below,
otherwise you can use <th> element at
any place.
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Peyman </td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir </td>
<td>7000</td>
</tr>
</table>
Table height and width:
You can set a table width and height using
width and height attributes. You can specify
table width or height in terms of integer
value or in terms of percentage of available
screen area. Following is the example:
<table border="1" width="400"
height="150">

Using Table Caption:


The caption tags will serve as a title or
explanation and show up at the top of the
table. This tag is depracated in newer version
of HTML/XHTML.
Cellpadding and Cellspacing Attributes
Cellpadding and Cellspacing Attributes
There are two attributes
called cellpadding and cellspacing which you
will use to adjust the white space in your table
cells. The cellspacing attribute defines space
between table cells, while cellpadding
represents the distance between cell borders
and the content within a cell.
Example
<table border = "1" cellpadding = "5"
cellspacing = "5">
Colspan and Rowspan Attributes
You will use colspan attribute if you want to
merge two or more columns into a single column.
Similar way you will use rowspan if you want to
merge two or more rows.
Example:-
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
Tables Backgrounds
bgcolor attribute − You can set background
color for whole table or just for one cell.
background attribute − You can set background
image for whole table or just for one cell.
You can also set border color also
using bordercolor attribute.
Note −
The bgcolor, background,
and bordercolor attributes deprecated in HTML5.
Do not use these attributes.
<table border = "1" bordercolor = "green" bgcolor
= "yellow">
Table Caption
The caption tag will serve as a title or
explanation for the table and it shows up at
the top of the table. This tag is deprecated in
newer version of HTML/XHTML.
Example:-
<table border = "1" width = "100%">
<caption>This is the caption</caption>
Table Header, Body, and Footer
Tables can be divided into three portions − a header,
a body, and a foot. The head and foot are rather
similar to headers and footers in a word-processed
document that remain the same for every page, while
the body is the main content holder of the table.
The three elements for separating the head, body,
and foot of a table are −
<thead> − to create a separate table header.
<tbody> − to indicate the main body of the
table.
<tfoot> − to create a separate table footer.
A table may contain several <tbody> elements to
indicate different pages or groups of data. But it is
notable that <thead> and <tfoot> tags should
appear before <tbody>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of
the table</td>
</tr>
</thead>

<tfoot>
<tr>
<td colspan = "4">This is the foot of the
table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>

</table>
HTML Frames
Frames allow you to have multiple sections of the
browser window, called frames, each showing their
own .html file within the frame. This used to be
common practice when trying to show separate
sections of a site in separate sections of the browser
window, such as a header at the top, navigation at
the side, and the rest was page content that
someone could scroll down without making the
header and navigation disappear.
Frame sets are rarely used these days, as the
introduction of server side scriping languages such
as php and asp allow you to create content pages
dynamically. The introduction of HTML5 has also
provided new methods of doing page layouts without
having to use frames.
Frame Set - <frameset>
Used instead of the body tag, the frameset tag
defines a group of frames. Setting
the rows and cols attribute allow you to create the
number of frames needed for your layout.
rows="??,??" - To set up multiple frames in rows,
replace the question marks by the size of each row,
either in pixels or as a percentage. A * can be used
as a wild card, for instance: rows="100,*" would
give you a top frame of 100 pixels high, and a
bottom frame using the rest of the screen.
cols="??,??" - Similar to rows, a number of frames
can be set out in columns.
border="?" - Frame border thickness in pixels.
bordercolor="?" - Colour of border between frames.
Frame - <frame>
Each frame within a set will need a frame tag to
tell it which web page to load in the frame. It
uses the attribute:
src="url" - Filename or URL of page to show in
the frame
noresize="noresize" - The frame will not be able
to be resized by a visitor
scrolling="auto" - Each frame will have vertical
and horizontal scroll bars appear automatically
when needed. You can change this by setting
the scrolling attribute to yes, no, or auto.
frameborder="auto" - Individual Frame Border.
Set to 0, 1 to specify whether or not that frame
must have a border.
Unframed Content - <noframes>
Very old browsers are unable to display
frames, and in this case we need to specify
what these browsers should display instead of
the frames. Even though this is not much of a
problem anymore, it is still suggested that
you specify unframed content when using
frames. Anything between the noframes tags
will not be shown in modern browsers that
show framed content.
<html>
<head>
<title>Example - Frames</title>
</head>
<frameset rows="100,*">
<frame name="top" src="frames_top.html">
<frameset cols="50,*,50">
<frame name="left" src="frames_left.html">
<frame name="mid"
src="frames_middle.html">
<frame name="right"
src="frames_right.html">
</frameset>
<noframes>
<i>error to display to those who cannot see
frames</i>
</noframes>
<frameset cols="*,*,*">
<frame
src="frame_1.html">
<frameset rows="*,*">
<frame
src="frame_2.html">
<frame
src="frame_3.html">
</frameset>
<frameset cols="*,*">
<frame
<frame src="frame_1.html">
src="frame_4.html">
<frameset rows="*,*">
</frameset>
<frame src="frame_2.html">
<frameset cols="*,*">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
</frameset>
</frameset>
IFrame (Inline Frame)
An IFrame (Inline Frame) is an HTML document
embedded inside another HTML document on a
website. The IFrame HTML element is often used
to insert content from another source, such as an
advertisement, into a Web page.
Iframe – set source
The src attribute specifies the URL(web address) of
the inline frame page.
Iframe – set Height and Width
Use to height and width attribute to specify the size
of the iframe.
The attribute value are specifies in pixels by
default, but they can also be in percent(like “80%”)
Examples
<iframe src="demo_iframe.htm" height="20
0" width="300"></iframe>
Iframe - Remove the Border
By default, an iframe has a border around it.
<iframe width="560" height="315"
src="https://www.youtube.com/embed/owsfdh
4gxyc" frameborder="0"
allowfullscreen></iframe>
HTML Layer
The HTML <layer> tag is used to position
and animate (through scripting) elements in
the page. A layer can be through of as a
separate document that reside on the top of
the main one, all existing within one
windows.
The tag has support in Netscape 4 and
higher versions of it.
Example
<body>
<layer id=“layer1” top=“250” lift=“50” width=“200”
height=“ 200” bgcolor=“red”>
<p> layer 1</p>
</layer>
<layer id=“layer2” top=“350” lift=“150” width=“200”
height=“ 200” bgcolor=“blue”>
<p> layer 2</p>
</layer>
<layer id=“layer3” top=“450” lift=“200” width=“200”
height=“ 200” bgcolor=“green”>
<p> layer 3</p>
</layer>
Layer Attributes
Attribut Value Description
e
Above Layer The name of the inline layer that will
name be position directly above the current
layer in Z-order.

Backgroun URL A filename or URL for an image upon


d which the inline layer’s text and image
will appear.
Below Layer The name of the inline layer that will
name be position directly below the current
layer in Z-order

Bgcolor Rgb(x,x,x) The color to use for the inline layer


#xxxxxx background.
Color
name
Layer Attributes
Attribut Value Description
e
height Pixels The inline layer’s height in pixels
Left Number The position of the left side of the inline
layer. If the current inline layer is part of
another layer. Called the parent layer then
the position is relative to the patent layer.
Name Layer The name of the inline layer
name
Pagex Number The position of the left side of the inline
layer reletive to the browser window.
Pagey Number The position of the top of the inline layer
reletive to the browser window.
Layer Attributes
Attribu Value Description
te
Src URL The URL of a page that will appear
inside the inline layer
Top Number The position of the top of the inline
layer. If the current inline layer is part
of another layer- called the parent
layer – then the position is relative to
the parent layer.
Visibility Show Determine whether the inline layer is
Hide visible.
Inherit
Width Pixels The inline layer’s width in pixels.
z-index Number The inline layer’s position within the z-
order. Inline layers with higher z-index
value are positioned above inline layers
HTML Form
HTML Forms:- Forms allow us to automate sending and
receiving data from a web page, and are useful for:
website and forum logins; signing guest books; web based
email; online questionnaires etc.
Form -<form> ... </form>All form elements such as inputs
and buttons must go within the form tags. In most cases, a
form must have the attributes set.
name="?"- A unique name identifying the form, used by
the action script.
action="url"- The address (URL) of the script that will
process the form data when submitted. In some cases the
action URL is not needed, for example when a client-side
JavaScript function is programmed into the web page to
process the form data.
method="?"- The method used by the action script, post or
get. For example, post would be used to submit data to a
user-registration form, and get is used for searches or
HTML Form
Input Field -<input>Used to create a simple text-entry
field for your form, but is also the basis for many other
form input types using the type attribute.
name="?"- Unique name for the input to be used by
the action script.
type="?"- There are several types of form input fields,
text, password, checkbox, are among the most
common.
value="?"- Initial value or data displayed in the input
field when the form is first loaded.
size="?"- Defines the input size or width, typically
defined in terms of number characters wide instead of
pixels.
maxlength="?"- Maximum length of input field, such
as the maximum number of characters for a text input.
Checked- used with checkbox and radio inputs, it sets
HTML Form
Button- <botton>
A form button is similar to other form input but
has it’s own set of Attributes:-
name=“?” – Unique name for the button to be
used by the action script.
type=“?” – The button type, either submit or
reset, determine whether the form is to be
submitted or cleared upon pressing it.
value=“?” – Text that appears on the button,
such OK or Submit.
size=“?” – Determines the length (or width) of
the button.
HTML Form
Selection list-<select> …. </select>:- A drop
down list, also referred to as a combo-box,
allowing a selection to be made from a list of
items.
name=“?”- selector name
size=“?” – the minimum size (width) of the
selection list.
Multiple- allows a user to select multiple
items from the list
HTML Form
Selection items- <option> … </option> :- An
option tag is needed for each item in the list,
and must appear within select tags. The text
to be shown from the option must appear
between the option tags.
value=“?” – the value is the data sent to the
action script with the option is selected. This
is not the text that appears in the list.
selected- Sets the default option that is
automatically selected when the form is
shown.
HTML Form
Large Text Area - <textarea> </textarea>
An input that allows a large amount of the text
to be entered and allows the height of the input
box to be specified unlike the standard input
tag.
name= “?” – the unique name assigned to the
form field.
rows=“?” – the number of rows of text, defines
the vertical size of the text area.
Cols=“?” – the horizontal size of the text box,
define as the number of characters (ie.
columns)
Multimedia
The <object> element is used to embed
different kinds of media files into an HTML
document. Initially, this element was used to
insert ActiveX controls, but according to the
specification, an object can be any media
object such as video, audio, Java applets,
ActiveX, document (HTML, PDF, Word, etc.),
Flash animations or even images.
The <embed> element is used to embed
multimedia content into an HTML document.
<body>
<video width="320" height="240"
controls="controls" autoplay="autoplay">
<source src="Yes Bank Advertisment.mp4"
type="video/mp4">
<object data="" width="320" height="240">
<embed width="320" height="240" src="Yes
Bank Advertisment.mp4">
</object>
</video>
</body>
HTML - Video
To show a video in HTML, use
the <video> element
autostart - sets whether the file will run
automatically after the page is loaded. Can
have the true or false value
hidden - sets whether the buttons are hidden
or not. Can have the true or false value.
volume - can have any value from 0 to 100
loop- sets whether the file will be replayed
after it is finished. Can have the true or false
value.
HTML - Audio
To show a video in HTML, use
the <audio> element
balance :- balance the speaker distribution.
( -10,000 to +10,0000)
autostart - sets whether the sound will start
immediately after the web page is loaded. Can
have the true or false value.
loop - sets whether the sound will be replayed
forever. Can have the true or false value.
volume - can have any value from 1 to 100.
src – define URL .

You might also like