HTML Study Material

HTML - Contents
1. Objectives
2. Anatomy of Web Presentation
3. Introduction to HTML
4. Title
5. The Body
6. Block Level Elements
7. Text Level Elements
8. Character Entities
9. Lists
10. Link
11. Images
12. Tables
13. Frames
14. Forms
15. Summary
In this basic HTML Course, we will start with what is HTML and what are tags.
Delve into the various basic tags that help mark up or display HTML pages
containing Read-only content.
Then, we would look into slightly advanced tags which help organize and display a
document in a formatted manner.
Following this, we will look at HTML forms which help capture inputs from the
end-user of HTML based applications.
Anatomy of a Web Presentation:
-The Web site:
A system on the internet containing one or more Web presentations
-The Web presentation:
A collection of one or more Web pages
-Web page:
A single element of a Web presentation and is contained in a single disk file
-Home page:
Is the entry or starting point for the rest of your Web presentation
Characteristics of HTML:
-It is pure text that is used to format or tell web browsers how to format your web
page or how to display it in the way that you like
-Defines a set of common styles for Web pages: headings, paragraphs, lists, tables
and character styles
-Each element has a name and is contained in what's called a tag
-The rules are fairly simple but are not fully enforced
-Pages are plane text files (ASCII)
As mentioned above, a typical HTML page can consist of 2 types of content:
•The normal text itself can form an HTML document
•Tags that describe to the browser, how the normal text should be displayed
Some of the characteristics of an HTML tag are:

•They usually have a start and a corresponding end tag. The effect of the tag is felt
by all the text that is enclosed between these two tags. However, there are a few
tags that do not mandate an end tag. Yet they take effect
•HTML tags are case-insensitive
•The structure of HTML documents
-Begins with a <!DOCTYPE> declaration (also known as Document Type
Declaration)
-Following this, the <HTML> element encloses the document
•The HTML element itself contains two primary sections:
-The head, enclosed by the <HEAD> element
-<HEAD> usually contains the document title enclosed by <TITLE>
-The body, enclosed by <BODY> element
-The rest of the HTML document that has to be rendered by the web
browser is contained in the <BODY> element
The <title> and </title> tags encapsulate the title of your page. The title is what
shows in the top of your browser window when the page is loaded.
This container is placed within the Head structure. Between Title tags, you should
have the title of your document. This will appear at the top of the browser i.e. in
the title bar and also appears in the history list.
You should only have one title container per document. It was possible to create
dancing titles by including multiple Title tags, but the effect can only be seen in
certain versions of certain browsers. Therefore, it should be avoided at all costs.
Body comes after the head structure. Between the body tags, you find all of the
stuff that gets displayed in the browser window. All of the text, the graphics and
links and so on -- these things occur between the body tags.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
The numbers indicate heading levels (H1 through H6)
The headings, when they're displayed, are not numbered. They are displayed either
in bigger or bolder text, or are centered or underlined, or are capitalized-something
that makes them stand out from regular text.
Align Attribute
By setting the align attribute of the heading element the text may be aligned to the
right, left, or center of the screen
Normally browser places a blank line or two before the paragraph.
The ALIGN attribute makes it possible to specify a left, right or center
alignment.
The <BR> tag is a text-level element that inserts a single carriage return or
break into document.
Example code:
<P>HR with SIZE 10 </P>
<HR SIZE="10">
<P>HR with width of 50% and no shading </P>
<HR WIDTH=50% NOSHADE>
<P>HR with width of 200 pixels, size of 3 pixels and no shading </P>
The text enclosed within the <PRE> tags retains all its spacing and returns.
Some text formatting like bold, italics or links can be used within the <PRE>
tags.
<PRE>
Sincerly,
Administrator
</PRE>
A different way to separate and organize paragraphs of information with HTML
is using the <HR>, or horizontal rule tag. The <HR> tag inserts a solid line that
goes completely across screen to separate different parts of an HTML document.
You can add the following attributes:
-SIZE sets the bars thickness(height)
-WIDTH sets the bar's width
-ALIGN sets its alignment
-NOSHADE renders the bar without a surrounding shadow
Example code:
<HR WIDTH=200 SIZE=3 NOSHADE>
<P>HR with width of 100 , aligned Right</P>
<HR WIDTH=100 ALIGN=RIGHT>
Is used to surround information such as the signature of the person who created
the page or the address of the organization the page is about
It results in italicized text.
<ADDRESS >
Page Designed By Wipro(admin@wipro.com)
</ADDRESS>
Physical elements are used to specify how text should be rendered, like <B>, <I>,
<U> etc.
Logical Elements indicate what the text is, but not necessarily how it should be
rendered. Such as <STRONG>, <EM>
FACE attribute lets you select the font.
Allows you to list more than one font, with the names separated by commas. This
is especially useful, since nearly identical fonts often have different names on
Windows and Macintoshes.
The font list will be parsed from left to right and the first matching font will be
used:
- SIZE attribute allows to specify character height for the text
- Ranges from 1 to 7 can be specified:
absolutely <FONT SIZE=7> text </FONT>
relatively <FONT SIZE = +1 > text </FONT>
- The default font size is SIZE=3
- COLOR attribute accepts either a hexadecimal RGB value or one of the
standard color names
BaseFont is used to establish the standard font size, face, and color for the text.
The choices made remain in place for the rest of the document, unless they are
overridden by a FONT element. When the FONT element is closed, the
BASEFONT characteristics are returned.
BASEFONT attributes can be changed by another <BASEFONT> tag any time in
the document.
Logical Elements:
-Indicate what the intention of the author was, not how the material should
look
-Important because future uses of HTML may include programs that search the
Web to use the HTML content based on the meaning of the content rather than
the way they are displayed.
-For example, a program may search HTML document to find citations
-A program that can identify emphasis would be able to avoid the
deadly monotone of current text-to-speech processors
-Take one of two forms:
Named entities
Numbered entities
Example:
Wipro <P>
Wipro ® <p>
Lists provide a way to organize the contents as bulleted points or numbered points.
They also provide a way to display definitions through the Glossary list option.
Each of the type of lists are explored in the subsequent sections.
•Glossary Lists
-Also called definition lists
-Provide a format like a dictionary entry, with an identifiable term and indented
definition paragraph
-useful when listing items with extensive descriptions, such as catalog items or
company departments
-The standard format of a definition list is as follows:
<DL>
<DT>Earth
<DD>The third planet from the sun, having a sidereal period of revolution about the
sun of 365.26 days at a mean distance of approximately 149 million kilometers (92.96
million miles), an axial rotation period of 23 hours 56.07 minutes, an average radius
of 6,374 kilometers (3,959 miles), and a mass of approximately 29.11 x 10^24 kilograms
(13.17 x 10^24 pounds).
</DL>
Unordered lists:
-Also called a bulleted list
-Is a list of items that does not define a specific structure or relationship among
the data
-Starts with <UL> and ends with </UL>
-Each list item is denoted by the list item (<LI>) tag
-The Type attribute indicates the type of bullet used to mark each item. The
possible values are:
-TYPE=DISC - A solid bullet (the default)
-TYPE=CIRCLE - A hollow bullet
-TYPE=SQUARE - A square hollow bullet
Ordered Lists:
-Also called a numbered list
-Starts with <OL> and ends with </OL>
-Each list item is denoted by the <LI> tag
-The TYPE attribute indicates the numbering scheme used for the list:
TYPE =1 - the default; labels the list items with numbers
TYPE =A - Orders the list items with uppercase letters
TYPE=a - Orders the list items with lowercase letters
TYPE=I Labels the list items with uppercase Roman numerals
•TYPE=i Labels the list items with lowercase Roman Numerals
•Link
-Unidirectional pointer from the source document that contains the link
to some destination
-To create a link, you need two things:
The name of the file you want to link to
The text that will serve as the "hot spot" - that is, the text that
will be highlighted in the browser
-Only the second part is actually visible on your page
-When your reader selects the text that points to a link, the browser
uses the first part as the place to "jump" to
-This creates an anchor around the text "This is the location of anchor one.". Usually,
the contents of A are not rendered in any special way when A defines an anchor only
-Having defined the anchor, we may link to it from the same or another document.
-URIs that designate anchors contain a "#" character followed by the anchor name (the
fragment identifier). Here are some examples of such URIs:
An absolute URI: http://www.mycompany.com/one.html#anchor-one

A relative URI: ./one.html#anchor-one or one.html#anchor-one
When the link is defined in the same document: #anchor-one
-Thus, a link defined in the file "two.html" in the same directory as "one.html" would
refer to the anchor as follows:
...text before the link...
For more information, please consult
<A href="./one.html#anchor-one"> anchor one</A>.
...text after the link...
•Images
-Indicated using the <IMG> tag
-The SRC attribute indicates the filename of the image you want to include
-HEIGHT and WIDTH attributes can be used to set the dimensions of an
image
•Tables
-Can be used to organise data into rows and columns and also increasingly
as a way of arranging text and graphics on the page.
For Example:
<TABLE>
<CAPTION ALIGN="bottom">Musician Ratings</CAPTION>
<TR>
<TH>Hindustani</TH>
<TH>Film</TH>
</TR>
<TR>
<TD>BhimSen Joshi</TD> <TD>Lata Mangeshkar</TD>
</TR>
<TR> <TD>P. Susheela</TD> <TD>RajKumar</TD>
</TR>
</TABLE>
BORDER=value
Including this attribute enables you draw borders around all table cells. You can
specify the border thickness in pixels. If this attribute is left out, no borders will
appear, however a gap will be left around the cells as if a border was present.
ALIGN=left|right
Used to display the table on the left, right or centre of the window.
CELLSPACING=value
This attribute enables you to specify the amount of space, in pixels, inserted between
individual cells in a table.
CELLPADDING=value
This attribute enables you to specify the amount of space, in pixels, inserted between
the border of the cell and the contents of the cell.
WIDTH=value|percent
This attribute enables you to describe the desired width of the table, either in pixels or
in terms of percentage of the document width.
ALIGN=left|center|right
Used to justify all text in the row or cell to the left, right or center of the cell.
VALIGN=top|middle|bottom|baseline
Used to align all text in the row or cell to the top, middle or bottom of the
cell, and also to specify that all cells should line up with the same baseline.
The following attributes can also be applied to any cell by including them in the
<TD> or <TH> tag:
WIDTH=value|percent
This attribute enables you to describe the desired width of the data cell, either
in pixels or in terms of percentage of the table width. Fixing the width of a
particular cell effectively fixes the width for that column.
HEIGHT=value|percent
This attribute enables you to describe the desired height of the data cell, either
in pixels or in terms of percentage of the table height. Fixing the height of a
particular cell effectively fixes the height for that row.
NOWRAP
Inclusion of this attribute specifies that lines within the cell should not be
broken (wrap) to fit the cell width.
-You can combine cells so that they span 2 or more columns, or 2 or more rows.
-This is done using the COLSPAN and ROWSPAN attributes as follows:
-COLSPAN=value
-Used to specify how many columns a cell should span.
-ROWSPAN=value
-Used to specify how many rows a cell should span.
•Frames
-A frame is an independent scrolling region or window of a web page
-Each frame may contain different document
-Users can view information in one frame while keeping another frame
open for reference
The contents of one frame can be manipulated, or linked to the contents of another.
•Frame definition
-Is the page that contains the layout of each frame and the names of the
HTML documents that will fill that frame
-Use the <FRAMESET> tag
-Include COLS or ROWS attribute to split the screen into a number of
vertical or horizontal frames
-Define the width of each frame in one of three ways:
Explicitely in pixels
As a percentage of the total width
With an asterisk (*)
NAME
is simply a name for the form. You can use forms without giving them names, but
you'll need to assign a name in order to use the form with JavaScript.
METHOD
is either GET or POST; these are the two ways the data can be sent to the server.
ACTION
is the CGI script that the form data will be sent to when submitted.
-There are three types of tags for creating fields:
<INPUT>
-provides many types of input: single lines of text, radio buttons, check
boxes, and the buttons to submit or clear the form.
<TEXTAREA>
defines a field in which the end user can type multiple lines of text
<SELECT>
-enables the end user to choose among a number of options in either a
scroll box or drop-down menu
You can put any number of these tags between the <FORM> and </FORM>
container tags.
•<TEXTAREA>
-you can provide a field for someone to enter multiple lines of
information
-by default, a <TEXTAREA> form shows a blank field, four rows long
and 40 characters wide. You can make it any size you want by using the
ROWS and COLS attributes in the tag. You can also specify some
default text by simply entering it between the <TEXTAREA> and
</TEXTAREA> tags.
-are ideal for users to enter comments or lengthy information because
they can type as much as they want in the field.
-the options for the tag are as follows:
NAME - It defines the name for the data.
ROWS - This sets the number of rows in the field.
COLS - This sets the width of the field in characters.
Default text - Any text between the <TEXTAREA> and
</TEXTAREA> tags is used as default text and shows up inside
the field.
-<SELECT>
-shows a list of choices in either a pop-up menu or a scrolling list.
-It's set up as an opening and closing tag with a number of choices listed in
between.
-The options for the element are as follows:
-NAME - It defines the name for the data.
-SIZE - This attribute determines how many choices to show.
-If you omit SIZE or set it to 1, the choices are shown as a drop-down list.
-If you set it to 2 or higher, it shows the choices in a scroll box.
-If you set SIZE larger than the number of choices you have within <SELECT>, a
nothing choice is added. When the end user chooses this, it's returned as an empty
field.
-MULTIPLE - This allows multiple selections. If you specify multiple, a scrolling
window displays--regardless of the number of choices or the setting of SIZE.
-You present the choices the end user can choose from, within the
<SELECT> and </SELECT> tags.
-The choices are listed inside the <OPTION> tag and don't allow any other
HTML markup.
-The options for the <OPTION> tag are the following:
-VALUE: This is the value to be assigned for the choice, which is
what is sent back to the script, and doesn't have to be the same as
what is presented to the end user.
-SELECTED: If you want one of the choices to be a default, use the
SELECTED option in the <OPTION> tag.
Selection through Scrollable List:

<FORM>
<SELECT MULTIPLE NAME="network">
<OPTION SELECTED VALUE="ethernet"> Ethernet
<OPTION VALUE="token16"> Token Ring - 16MB
<OPTION VALUE="localtalk"> LocalTalk
</SELECT>
</FORM>
Selection through Dropdown List:

<FORM>
<SELECT NAME="network">
<OPTION SELECTED VALUE="ethernet"> Ethernet
<OPTION VALUE="localtalk"> LocalTalk
</SELECT> </FORM>
The attributes for the <INPUT> tag are the following:
-NAME: This defines the name for the data. This field is required for all the types of
input except Submit and Clear.
-SIZE: This is the size of the input field in number of characters for text or password.
-MAXLENGTH: This specifies the maximum number of characters to be allowed for
a text or password field.
-VALUE: For a text or password field, it defines the default text displayed. For a
check box or radio button, it specifies the value that is returned to the server if the
box or button is selected. For the Submit and Reset buttons, it defines the text inside
the button.
-CHECKED: This sets a check box or radio button to on. It has no meaning for any
other type of <INPUT> tag.
-TYPE: This sets the type of input field you want to display.

HTML Study Material

Uploaded by

Copyright:

Available Formats

You might also like

HTML Study Material

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 Study Material

Uploaded by

Copyright:

Available Formats

HTML - Contents

Some of the characteristics of an HTML tag are:

An absolute URI: http://www.mycompany.com/one.html#anchor-one

Selection through Scrollable List:

Selection through Dropdown List:

You might also like