E-Content of

INTERNET TECHNOLOGY AND WEB DESIGN

Chapter : 9.2 HTML Page Structure

Topic : 9.2.1 Introduction to HTML

Introduction to HTML
• HTML is the acronym for Hyper Text Markup Language.
• HTML is the basic tool for designing a web page.
• It is a documentation language to mark the headings, title, table and forms.
• HTML is not case sensitive and can be easily updated after the file is created.
• To format a simple text file into HTML, the user creates tags that start and finish
with angle brackets.
• To end the formatting or change to another format, type the first angle bracket, a
backslash, then repeats the command and close the bracket.
• For example, <H1> Understanding HTML </H1> is the code used to create the
heading.
HTML History
• IBM wanted to set a documentation system in which we can mark the title,
headings, paragraphs and font type selections in the 1980s.
• They came out with a set of mark-up system called it General Markup Language
(GML).
• In 1986, International Standardizing Organization (ISO) took up this concept and
standardized it as Standard Generalized Markup Language (SGML).
• SGML is one of the early markup language. SGML is a system for organizing
and tagging elements of a document.
• SGML itself does not specify any particular formatting, rather, it specifies the
rules for tagging elements. These tags can then be interpreted to format
elements in different ways.
• In 1989 Tim Berners Lee and his team in the European Laboratory for Particle
Physics (CERR) designed the present form of the documentation language and
called it HTML.
World Wide Web

Page | 5
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN
• A web page is a document stored in the World Wide Web.
• Web pages are created using HTML. Each page contains the data to be included
in the web page and the HTML tags.
• The web browser understands these tags and displays the corresponding web
page.
• We browse the World Wide Web using a web browser.
• All text, graphics and design elements of a web page are "tagged" with codes
that instruct the web browser how to display the files.
• You can recognize these files easily because they contain the file extension of
'html' or 'htm'.
• Just consider the following hierarchy of HTML document.

FIG 9.1 : Hierarchy of HTML Document

Page | 6
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

Chapter : 9.2 HTML Page Structure

Topic : 9.2.2 HTML Editors

HTML Editors
• An HTML editor is a software application for creating web pages.
• Although the HTML markup of a web page can be written with any text editor,
specialized HTML editors can offer convenience and added functionality.
• For example, many HTML editors work not only with HTML, but also with related
technologies such as CSS, XML and JavaScript.
• In some cases they also manage communication with remote web servers via
FTP and WebDAV.
• Some commonly used HTML Editors are listed here under,
 Adobe Dreamweaver
 It is a web development application available for both MAC and Windows
operating system. Recent versions have incorporated support for web
technologies such as CSS, JavaScript and various server-side scripting
languages and frameworks including ASP.NET, ColdFusion, Java Server
Pages (JSP), and PHP.
 Visual Web Developer Express
 It is a freeware web development tool that allows developers to evaluate
the web development and editing capabilities of the other Visual Studio
2008 editions at no charge. Its main function is to create ASP.NET
websites. It has a WYSIWYG (What You See Is What You Get) interface,
drag-and-drop user interface designer, enhanced HTML & code editors; a
data base explorer; support for other web technologies (e.g., CSS,
JavaScript, XML).
 Microsoft FrontPage
 It is also known as Microsoft Office FrontPage, is a WYSIWYG HTML
editor and web site administration tool from Microsoft for the Microsoft

Page | 7
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN
Windows line of operating systems. It was branded as part of the
Microsoft Office suite from 1997 to 2003.

Page | 8
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

Chapter : 9.2 HTML Page Structure

Topic : 9.2.3 Overview of HTML

Overview of HTML
• Hypertext refers to the way in which web pages (HTML documents) are linked
together.
• Thus the link available on a web page are called Hypertext.
• As its name suggests, HTML is a Markup Language which means you use HTML
to simply "Markup" a text document with tags that tell a web browser how to
structure it to display.
• Originally, HTML was developed with the intent of defining the structure of
documents like headings, paragraphs, lists and so forth to facilitate the sharing of
scientific information between researchers.
• Now, HTML is being widely used to format web pages with the help of different
tags available in HTML language.
• A markup language such as HTML is simply a collection of codes elements in
this case that are used to indicate the structure and format of a document.
• The codes have meaning that is interpreted by a formatting program, often a
Web browser, which renders the document.
• Elements in HTML consist of alphanumeric tags within angle brackets.
• These tags usually come in pairs, but exceptions do exist.

Basic HTML Document

Page | 9
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN
• In its simplest form, following is an example of an HTML document,

• Save the file as mypage.html. Start your Internet browser. Select Open (or Open
Page) in the File menu of your browser.
• A dialog box will appear. Select Browse (or Choose File) and locate the html file
you just created - mypage.html - select it and click Open.
• Now you should see an address in the dialog box, for example
C:\MyDocuments\mypage.html.
• Click OK, and the browser will display the page.

FIG 9.2: Output of Sample HTML Program

Page | 10
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

Chapter : 9.2 HTML Page Structure

Topic : 9.2.4 Basic HTML Tags

Basic HTML Tags

• The document enclosed within the HTML Tags is identified as a web page.
• <HTML> is almost the first tag in an HTML page and </HTML> tag is the last tag.
• Everything else in the web page goes between these two tags and is technically
part of the <HTML> element.
• As told earlier, HTML is a markup language and makes use of various tags to
format the content.
• These tags are enclosed within angle braces <Tag Name>.
• Except few tags, most of the tags have their corresponding closing tags.
• For example <html> has its closing tag </html> and <body> tag has its closing
tag</body> tag etc.
• Any formatted text document is composed of a set of elements such as
paragraphs, headings and lists.
• Each element has to be surrounded by control information which tells the
presentation or printing software when to switch on a piece of formatting and
when to switch it off.
• In HTML, formatting is specified by using tags.
• For instance, the following example sets the text to the style h1 and switches that
style off before processing any more of the document.
• A number of points should be noted about HTML tags.
 Tags are delimited by angled brackets, <h1>.
 They are case sensitive for example, <HEAD>, <head> and <HEAD> are not
equivalent.
 In HTML up to version 4 tags were not case sensitive, XHTML is case
sensitive and furthermore, tags must be in lower case letters.
 Each element is terminated by an end tag.

Page | 11
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN
 There are a few exceptions to this rule generally elements which never
contain content.
 Some characters have to be replaced in the text by escape sequences.
 If < was not escaped the software would attempt to process anything that
followed it as part of a tag.
 Therefore if you want to include such a character in your code you must
replace it with the escape sequence.
 White space, tabs and newlines are ignored by the browser, they can be used
to make the HTML source more readable without affecting the way that the
page is displayed.
 Actually they are not ignored, but multiple white spaces are replaced by a
single space, while newlines and tabs are treated as spaces.
 If a browser does not understand a tag it will usually ignore it.
• To learn HTML, you will need to study various tags and understand how they
behave while formatting a textual document.
• Learning HTML is simple as users have to learn the usage of different tags in
order to format the text or images to make a beautiful web page.
• An HTML element is defined by a starting tag. If the element contains other
content, it ends with a closing tag, where the element name is preceded by a
forward slash.
• So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element.
• There are some HTML elements which don't need to be closed, such as
<img.../>, <hr /> and <br /> elements.
• These are known as void elements.
• HTML documents consist of a tree of these elements and they specify how
HTML documents should be built, and what kind of content should be placed in
what part of an HTML document.
Tag Name Description
<A> Anchor Make Hyperlinks
<B> Bold Bold the text
<BODY> Body of HTML Document Where to start the document and place the
HTML codes

Page | 12
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN
<BR> Line Break Force to change line
<CENTER Center Center alignment
>
<EM> Emphasis Emphasis the content
<FONT> Font Change font set up
<FORM> Form Insert a form inside the web page
<H1> Heading 1 Heading size
<HEAD> Heading of HTML Contains information about the page
document
<HR> Horizontal rule Create a horizontal line
<HTML> Hypertext markup language Begins the html document
<I> Italic Italic the text
<IMG> Image Image
<INPUT> Input field Insert a input field
<LI> List item Create a listed item in an unordered or
ordered list
<MENU> Menu Insert a menu in a web page
<OL> Ordered list Numbered the list
<P> Paragraph Create a line break and a space between
lines.
<TABLE> Table Insert a table inside a web page
<TD> Table data The cell of a table
<TH> Table header The header of a table
<TITLE> Document title The title in the title bar of the browser
<TR> Table row The row of a table
<U> Underline Underline the text
<UL> Unordered list Bullets the list
<STRIKE> Strike the text For making the text appears stroked out
<SUB> Subscript For making the text subscript
<SUP> Superscript For making the text superscript
<DFN> Definition For displaying text as a definition
<CITE> Citations For displaying citations and references

FIG 9.3 : List of Tags

Page | 13
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

Chapter : 9.2 HTML Page Structure

Topic : 9.2.4A Head Tags

Head Tags
• The Head tags are used to store information about the web page such as the title
of the page.
• Any document starts with a heading. You can use different sizes for your
headings.
• HTML also has six levels of headings, which use the elements <h1>, <h2>,
<h3>, <h4>, <h5>, and <h6>.
• While displaying any heading, browser adds one line before and one line after
that heading.
• Example program

• Output

Page | 14
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

Title Tags
• The Title tags are used to enter a Title for the web page.
• This tag contains the title of the HTML document, which will appear in the web
browser's title bar and is used but search engines to refer to the document.
• Each <HEAD> element should include a <TITLE> element.

Page | 15
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

Chapter : 9.2 HTML Page Structure

Topic : 9.2.4B Paragraph Tags

Paragraph Tags
• 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.
• Example Program

• Output

Page | 16
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

Chapter : 9.2 HTML Page Structure

Topic : 9.2.4C Line Break Tags

Line Break Tags

• Whenever you use the <br /> element, anything following it starts from the next
line.
• This tag is an example of an empty element, where you do not need opening and
closing tags, as there is nothing to go in between them.
• 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.
• Example Program

• Output

Page | 17
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

Chapter : 9.2 HTML Page Structure

Topic : 9.2.4D Centering Content

Centering Content
• You can use <center> tag to put any content in the center of the page or any
table cell.
• Example Program

• Output

Horizontal Lines
• Horizontal lines are used to visually break up sections of a document. The <hr>
tag creates a line from the current position in the document to the right margin
and breaks the line accordingly.
• Example Program

Page | 18
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

• Output

• Again <hr /> tag is an example of the empty element, where you do not need
opening and closing tags, as there is nothing to go in between them.
• The <hr /> element has a space between the characters hr and the forward
slash.
• If you omit this space, older browsers will have trouble rendering the horizontal
line, while if you miss the forward slash character and just use <hr> it is not valid
in XHTML.

Page | 19
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

Chapter : 9.2 HTML Page Structure

Topic : 9.2.4E Preserver Formatting

Preserver Formatting
• Sometimes you want your text to follow the exact format of how it is written in the
HTML document. In those 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.
• Example Program

• Output

Non-breaking Spaces
• Suppose you want to use the phrase "12 Angry Men." Here you would not want a
browser to split the "12, Angry" and "Men" across two lines.
• In cases where you do not want the client browser to break text, you should use
a non-breaking space entity & nbsp; instead of a normal space.

Page | 20
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN
• For example, when coding the "12 Angry Men" in a paragraph, you should use
something similar to the following code:
• Example Program

• Output

HTML Tag versus Element

• An HTML element is defined by a starting tag. If the element contains other
content, it ends with a closing tag.
• For example <p> is starting tag of a paragraph and </p> is closing tag of the
same paragraph but <p> this is paragraph</p> is a paragraph element.

Nested HTML Elements

• It is very much allowed to keep one HTML element inside another HTML
element,

• Example program

Page | 21
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

• Output

Page | 22