IT8078 WEB DESIGN AND MANAGEMENT

1
HTML: HYPERTEXT MARKUP LANGUAGE

Introduction

Objectives

2
INTRODUCTION

A formatting or markup language used to create documents for the World Wide
Web (WWW).

Hypertext Markup Language (HTML) in its simplest form uses tags to format
ASCII (American Standard Code for Information Interchange) text documents by
indicating text that should be displayed as boldface, italic, bulleted, hyperlinked,
centered and so on.

3
OBJECTIVE

This unit will help you to learn the:

Hypertext Markup Language.

General HTML Page Layout Tags.

File Transfer Protocol.

4
OUTLINE

Hypertext Markup Language

Dynamic HTML

Attributes

Semantic HTML

Tags and Attributes

General HTML Page Layout Tags

Table Structure

File Transfer Protocol (Ftp)

Summary

Self-check Exercise

5
HISTORY, VERSION AND MARKUP LANGUAGES

First mentioned on the Internet by Berners-Lee in late 1991.

It describes 20 elements comprising the initial, relatively simple design of HTML.

It is a text and image formatting language used by web browsers to dynamically
format web pages.

Many of the text elements are found in the 1988 and Berners-Lee considered
HTML to be an application of SGML.

It was formally defined as such by the Internet Engineering Task Force (IETF)
with the mid-1993 publication of the first proposal for an HTML specification,
"Hypertext Markup Language (HTML)".

Further development under the auspices of the IETF was stalled by competing
interests. Since 1996, the HTML specifications have been maintained, with input
from commercial software vendors, by the World Wide Web Consortium (W3C).

However, in 2000, HTML also became an international standard (ISO/IEC
15445:2000).

6
HISTORY, VERSION AND MARKUP LANGUAGES

HTML 2.0: The early standards for HTML contained many of the core features still seen in
today‘s version of the language. First published in 1995.

HTML 3.2: The first W3C recommendation (1997) for HTML, this version added popular
features such as support for superscript, subscript, tables, and so on. It also provided
backward compatibility for HTML 2.0.

HTML 4.0: This was an early gold standard for HTML and it is the version to which most
early HTML programmers took hold. However, HTML 4.01 has since superseded HTML
4.0. The HTML 4.0 published in December 1997 and HTML 4.1 in 1999.

HTML 5: HTML 5 was published as a working draft by the W3C in January 2008.

7
HISTORY, VERSION AND MARKUP LANGUAGES

HTML 5: HTML 5 was published as a working draft by the W3C in January 2008.

A web page (also called a document) consists of objects.

An object may be a HTML file, an image, a Java applet, a video clip, etc. that is
addressable by a single URL.

Most web pages consist of HTML files and several referenced objects or links.

HTTP defines how browsers request web pages from servers and how servers
transfer web pages to clients i.e., in essence it defines the interaction between the
web client and the web server.

When a user requests a web page (for example, clicks on a hyperlink), the browser
sends HTTP request messages for the objects in the page to the server.

The server receives the requests and responds with HTTP response messages that
contain the objects.

8
HISTORY, VERSION AND MARKUP LANGUAGES

Types of markup elements used in HTML.

• Structural Markup: Structural Markup describes the purpose of text. For example,
<h2>Golf</h2>
• Presentational Markup: Describes the appearance of the text, regardless of its
purpose. For example <b>boldface</b>
• Hypertext Markup: Its makes parts of a document into links to other documents.
For example, <a href="http://www.ssn.edu.in">ssn college</a>

9
 LIST OF SPECIAL TAGS/COMMAND IN HTML

10
 LIST OF SPECIAL TAGS/COMMAND IN HTML

11
 DYNAMIC HTML

The Dynamic HTML is a collective term for a combination of new Hypertext Markup
Language (HTML) tags and options that will let you create web pages more animated and
more responsive to user interaction than previous versions of HTML.

Much of dynamic HTML is specified in HTML 4.0.

Simple examples:

(1) having the color of a text heading change when a user passes a mouse over it or

(2) allowing a user to ―drag and dropǁ an image to another place on a web page.

It can allow web documents to look and act like desktop applications or multimedia
productions.

The features that constitute dynamic HTML are included in Netscape Communications‘
latest Web browser, Navigator 4.0 (part of Netscape‘s Communicator suite), and by
Microsoft‘s browser, Internet Explorer 4.0.

While HTML 4.0 is supported by both Netscape and Microsoft browsers, some additional
capabilities are supported by only one of the browsers.

The biggest obstacle to the use of dynamic HTML is that, since many users are still using
older browsers, a web site must create two versions of each site and serve the pages
appropriate to each user's browser version.
12
 SEMANTIC HTML

Semantic HTML is a way of writing HTML that emphasizes the meaning of the encoded
information over its presentation.

HTML has included semantic markup from its inception, but has also included
presentational markup such as <font>, <i> and <center> tags.

There are also the semantically neutral span and div tags.

Since the late 1990s when CSS were beginning to work in most browsers, web authors
have been encouraged to avoid the use of presentational HTML markup with a view to the
separation of presentation and content.

In a 2001 discussion of the Semantic Web:
o Tim Berners-Lee and others gave examples of ways in which intelligent software 'agents' may one day
automatically trawl the Web and find, filter and correlate previously unrelated, published facts for the benefit
of human users.

o Such agents are not commonplace even now, but some of the ideas of Web 2.0, mashups, and price
comparison websites may be coming close.

o The main difference between these web application hybrids and Berners-Lee's semantic agents lies in the
fact that the current aggregation and hybridization of information is usually designed in by web developers,
who already know the web locations and the API semantics of the specific data they wish to mash,
compare and combine.

13
 SEMANTIC HTML–AN IMPORTANT TYPE OF WEB AGENT

An important type of web agent that does trawl and read web pages automatically, without
prior knowledge of what it might find, is the Web crawler or search-engine spider.

These software agents are dependent on the semantic clarity of web pages they find as
they use various techniques and algorithms to read and index millions of web pages a day
and provide web users with search facilities without which the World Wide Web would be
only a fraction of its current usefulness.
• In order for search-engine spiders to be able to rate the significance of pieces of text they find
in HTML documents, and also for those creating mashups and other hybrids as well as for
more automated agents as they are developed, the semantic structures that exist in HTML
need to be widely and uniformly applied to bring out the meaning of published text.

• Presentational markup tags are deprecated in current HTML and XHTML recommendations
and are illegal in HTML 5.

14
 ATTRIBUTES

Most of the attributes of an element are name-value pairs, separated by "=" and written
within the start tag of an element after the element's name.

The value may be enclosed in single or double quotes, although values consisting of
certain characters can be left unquoted in HTML (but not XHTML).

Leaving attribute values unquoted is considered unsafe.

In contrast with name-value pair attributes, there are some attributes that affect the
element simply by their presence in the start tag of the element, like the ismap attribute for
the img element.

Common attributes that may appear in many elements:

The id attribute provides a document-wide unique identifier for an element.

The class attribute provides a way of classifying similar elements.

An author may use the style attribute to assign presentational properties to a particular element.

The title attribute is used to attach subtextual explanation to an element.

The lang attribute identifies the natural language of the element's contents, which may be
different from that of the rest of the document.

15
 ATTRIBUTES

The id attribute provides a document-wide unique identifier for an element.

This is used to identify the element so that stylesheets can alter its presentational properties, and
scripts may alter, animate or delete its contents or presentation.

Appended to the URL of the page, it provides a globally unique identifier for the element, typically
a sub-section of the page.

For example, the ID "Attributes" in http://en.wikipedia.org/wiki/HTML#Attributes

The class attribute provides a way of classifying similar elements.

This can be used for semantic or presentation purposes.

For example, an HTML document might semantically use the designation class="notation" to
indicate that all elements with this class value are subordinate to the main text of the document.

In presentation, such elements might be gathered together and presented as footnotes on a page
instead of appearing in the place where they occur in the HTML source.

Class attributes are used semantically in microformats. Multiple class values may be specified;

for example class="notation important" puts the element into both the 'notation' and the 'important'
classes.

16
 ATTRIBUTES

An author may use the style attribute to assign presentational properties to a particular
element.

It is considered better practice to use an element‘s id or class attributes to select the element from
within a stylesheet, though sometimes this can be too cumbersome for a simple, specific, or ad
hoc styling.

The title attribute is used to attach subtextual explanation to an element.

In most browsers this attribute is displayed as a tooltip.

The lang attribute identifies the natural language of the element's contents, which may be
different from that of the rest of the document.

For example, in an English-language document: <p>hi, <span lang="fr">c'est la vie</span>, as
they say in France.</p>

The abbreviation element, abbr, can be used to demonstrate some of these attributes:

<abbr id="anId" class="jargon" style="color:purple;" title="Hypertext Markup
Language">HTML</abbr>

This example displays as HTML; in most browsers, pointing the cursor at the abbreviation should
display the title text "Hypertext Markup Language." Most elements also take the language-related
attribute dir to specify text direction, such as with "rtl" for right-to-left text in, for example, Arabic,
Persian, or Hebrew.
17
 TAGS AND ATTRIBUTES

An HTML tag is indicated by opening (<) and closing (>) brackets.

Each tag contains various attributes, depending on the tag used.

Look at the following sample HTML code:

<font face="Arialǁ size="5"> This is an example of simple text. </font>

The general form of an HTML element is therefore:

<tag attribute1="value1" attribute2="value2">content to be rendered</tag>

The name of the HTML element is also the name of the tag.

Note that the end tag's name is preceded by a slash character, "/". If attributes are not
assigned, default values are used.

18
 ELEMENT EXAMPLES

Header of the HTML document:<head>...</head>. Usually the title should be included in

the head,

For example:
<head>
<title>The title</title>
</head>

19
 TAGS AND ATTRIBUTES IN HTML

The tag in this example is the <font> tag.

Notice the closing </font> tag as well.

This tag will affect everything between the operating and closing <font> tags. (In this case, the
text “This is an example of simple text” would be affected.)

The attributes of the <font> tag are, in this case, the font face (which is set to Arial) and the font
size (5, or 12-point text).

Note that in many instances in HTML there is a numerical reference-especially with text
formatting-to usual “point” reference in text.

Another example:

<font face="Arialǁ size="5"> <a href=" http://www.ssn.edu.in">Click here to go to SSN</a></font>

This example uses two different tags. The first as you saw just a moment ago, is the <font> tag.
The second is the <a href> tags, which is used to set a hyperlink.

20
 GENERAL HTML PAGE LAYOUT TAGS

<HEAD>: Think of this tag as the container for all of the general layout information for
your page. Within the <HEAD> and </HEAD> tags you will find general information about
page.

<TITLE>: This is where you assign the all important title to your Web page. It‘s easy to
overlook this tag, so you should be careful that you don‘t the title of a page will appear at
the top of the browser window and is thus an important navigation element to let visitors to
your Web site know where they are.

<Body>: This is where most of your HTML code is placed as such; it corresponds to the
body of your Web page content.

Headings : HTML headings are defined with the <h1> to <h6> tags.

Paragraphs : One can make paragraphs using the following syntax.
o <p>Paragraph 1</p> <p>Paragraph 2</p>

Line breaks : <br>. The difference between <br> and <p> is that 'br' breaks a line without
altering the semantic structure of the page, whereas 'p' sections the page into paragraphs.

21
 GENERAL HTML PAGE LAYOUT TAGS

22
 UTILIZING THE <META> TAG

<META> tags are quite useful in providing information about the contents of your page so
it can be picked up and properly indexed by various search engines.
<meta name="keyword" CONTENT="rock music, 1990s, popular culture, steely Dan">

<meta name="description" CONTENT="A retrospective analysis of the rock group Steely Dan">

<meta name="author" CONTENT="Bill Lee">

<meta name="generator" CONTENT="Microsoft FrontPage 4.0"> .

23
 THE TEXT ALIGNMENT ATTRIBUTE

HTML include an align attribute that allows you do some basic text alignment in your Web
pages. As with everything else the best way to see this attribute in action is to look at a
code example.
• <p align="left"> This text is left aligned.</p>

• <p align="center"> This text is center aligned.</p>

• <p align="right"> This text is right aligned.</p>

24
 LISTS

Nested list
• <ul><li>….</li></ul>

Numbered and Bulleted Lists

• <ol><li>…</li></ol>

• <ul><li>….</li></ul>

Definition Lists

A definition list (coded as <DL>) usually consists of alternating a definition term (coded as <DT>)
and a definition description (coded as <DD>). Web browsers generally format the definition on a
new line and indent it.

<DL> <DT> ... <DD> .... <DT> .... <DD> .... </DL>

25
 MAILTO ATTRIBUTE

You can make it easy for a reader to send E-mail to a specific person or mail alias by
including the mailto attribute in a hyperlink.

To create a mail window that is already configured to open a mail window for the Emerald
Group Publications alias. The syntax is: <A HREF=“mailto:[email protected]”>Name</a>

For example; <A HREF=“mailto:[email protected]”>SSN group Publications</a>

26
 ABSOLUTE AND RELATIVE URLS

The URL (Uniform Recourse Locator) is a major building block of the Web.

First you need to be aware of the difference absolute and relative URLs and how each
one can affect your HTML coding.

An absolute URL, the address includes the entire file location (including the server name).

A relative URL only shows the file name relative to the current location.

For example:
1. http://www.smsweb.com/smsfolder/smsfolder_2smsfile.html

2. smsfile.html

3. /smsfolder_2/smsfile.html

4. ../smsfolder_2smsfile.html

The first line here is an absolute URL, it shows the entire path to the file (smsfile.html)

The second, third and fourth listings are all relative URLs; they show a URL that is relative
to a current location.

27
 ABSOLUTE AND RELATIVE URLS

What exactly does that mean? Put simply, depending on where your file is stored in a
relative URL you can assume that the location of the file will vary depending on the full file
path. (In the third line of code the “../” represent the complete file path).

Relative URLs come in handy if you are moving your file around because you don‘t have
to worry about coding the full path, which might change anyway.

For example,
• if you have a URL that points to http://www.serverA.com/folder_A/file.html and you move it to a
new server, so that the path is now http://www.serverB.com/folder_A/file.html, you could use a
relative URL when making the initial link. Instead of typing the full URL, you could use the
relative URL ../file.html; in this case when you move from server A to server B the link to your
file remain active.

However if you had typed the absolute URL (the full path name) you would have to retype
it for the link to your file.html file to remain the same.

28
 TABLE STRUCTURE

A table is market at its beginning with a <table> tag and at its end with a </table> tag.

A table can contain a variety of row and column definitions within.

However there are few things to note.

First only the <table> tag needs to closed with </table/>; otherwise the browser doesn‘t
know when to stop table formatting.

Second, the table row (<tr>) and table data (<td>) cell can accept their respective closing
tags, but they are not required.

A new row or data cell automatically marks the end of the previous roe or data, except in
legacy versions of some browsers.

Following are the steps to create table.
• Create a new folder called Table.

• Open your Inetpub folder and create a new page called FirstTable.html. Save this page in your
newly created Table folder.

• On your FirstTable.html page, enter the following HTML exactly as it appears below:

29
 TABLE STRUCTURE

30
 TABLE - INTERNATIONAL AND EVENT ATTRIBUTES

Summary: This is one of the few attributes for tables that haven‘t been deprecated,
because it has nothing to do with a table‘s appearance.
• The summary attribute defines a text string that gives a brief description of what the table
contains.

Align: This is the standard alignment attribute, now deprecated, which accepts values of
left, right or center to control placement on the page.
• Most browsers default to a left or center alignment.

Width: The width of the table, expresses in pixels or as a percentage of the browser
window width.

For example, a table tat occupies half of the available window is marked with
width="50%", and a table 500 pixels wide is expressed as width="500".
• The default is just wide enough to handle the longest content in each column.

• For browsers that support progressive table display, setting the width attribute allows the
browser to display the table as its retrieved, rather than waiting for the entire table.

31
 TABLE - INTERNATIONAL AND EVENT ATTRIBUTES

Cols: This attribute is new in HTML 4. It tells the browser how many columns are included
in the table.
• In the past, the browser had to wait until the entire table was loaded to begin rendering it.

Frame: This attribute, a companion to the border attribute, determines where a frame
surrounding the table should display.
• Its possible values are void (none), above (top side), below (bottom side), hsides (horizontal
sides), lhs (left-hand side), rhs (right-hand sides), vsides (vertical sides), and box or border (all
sides).

Border: The attribute sets the width of a border around the table in pixels.
• The default varies with each browser but is typically two or three pixels. If you don‘t want a
border, use a value of 0.

32
 TABLE - INTERNATIONAL AND EVENT ATTRIBUTES

Rules: This attribute determines where lines are used to separate cells within the table
itself.
• Its possible values are none, groups (between logical groups such as TBODY and THEAD),
rows (between each roe), col (between each column), and all (between all cells).

Cellspacing: Identified in pixels, this attribute determines the amount of space between
cells.
• As a side effect, it sometimes determines the width of the rules between cells, too.

Cellpadding: Similar to cellspacing and also identified in pixels, this attribute sets the
amount of space between the edge of the cell and the actual cell content.

33
 SUMMARY

The libraries and information centres can develop and design their own Web pages and
host them on the Internet to gain visibility as well as provide access to their local OPAC.

Technologies like HTML, DHTML, and XML help in creating and designing Web pages.

Uniform Resource Locator, know by a variety of similar names are techniques for
establishing Internet address where files and other resources can be located.

A through understanding of the different URLs and their proper use is essential for good
Web design.

It is necessary one should know at least basic HTML tags to put the information on
Internet.

Though HTML has certain problems associated with it for example, inability to handle
efficient search, but still it is widely used for web page design.

The XML preserves the context of the term as well as its semantics.

An XML file also like HTML is a plain ASCII file, where one can define his/her own tags.

34
 SELF-CHECK EXERCISE

1. Write an essay on HTML.

2. What do you understand by general HTML page layout tags?
3. What is File Transfer Protocol (FTP)?
4. Write short note on:-
a. Tags b. Attributes

35