HTML

HyperText Markup Language

Course Notes


For the
Course COMM301


By:
Prof. Raafat Saad
Prof. Dennis Kira


Version 1.0
September 1999
Revision A


Content


1.0 Introduction
HTML on the Web
HTML browsers
Search engines

2.0 Basic HTML
Structure
Tags
URLs
Special Symbols


Appendix A: Basic HTM commands


1.0 Introduction

Surely, all of you have used the internet. You may have used it to research for specific
information, to buy products or to publish. You may have used it to view images, videos
or sample songs. The point is that the internet benefit potential as we know it today is just
a piece of the tip of the iceberg.
The sites you view on the internet use different software such as HTML, Perl, Javascript,
CGI etc. From all, the first software to be used for publishing on the internet is HTML
(HyperText Markup Language).
Why is it important for you to learn HTML. The answer is simple: To be able to
communicate with the world. To be more specific, the World Wide Web. Practically
anyone can publish any kind of information including graphics, sound, videos, animation,
tables, thereby opening the doors to each and every one of the millions of internet users.
Internet users could be businesses with services and/or products to sell, others are
individuals sharing their experiences.
In this document you will find information on the internet and instructions that will take
you through the different syntax and commands to creating web pages.

The Web in General

In 1989, at the European Particle Physics Laboratory (CERN) initiated a project for the
electronic dissemination of research and related information. They envisioned a system
that would allow members of the scientific community to communicate, edit, and view
information easily. This system became known as the World Wide Web (WWW).


Hypermedia

Electronic documents with built-in links to additional information are called
HYPERTEXT. Such documents are linked electronically by means of hyperlinks.
Hyperlinks can be represented and accessed in many different ways, but most hypertext
systems make integral use of a mouse to select links. Usually words or phrases on Web
pages linked to additional information are typically shown in a different colour and
underlined. These cross-reference materials can be texts, images, sounds, movie clips and
other media.

A Hypermedia document is a hypertext document composed of various media. In a way,
Web is one huge hypermedia repository. Web is organized as a collection of Web pages.
The user clicks a link to transfer from the current document to a new one. Linked pages
create a structure for the information that the user may apply in various ways. Web is
conceived as a distributed information system where linked pages may stored on the
same computer or may be found on remote systems across the world. The user not only
traverses information according to his/her inclination but also travels from site to site in
the Web effortlessly.


HTML on the Web

No doubt most of you have experience in viewing, listening to, and otherwise interacting
with Web documents. As mentioned earlier, WWW documents are written in a HTML
(Hypertext Markup Language). Web documents have three distinguishing
characteristics. They are resolution independence, contains multimedia materials, and
hypertext documents.

Since Web documents make essential use of multimedia elements, HTML have provides
a convenient method for incorporating them into HTML documents. A simple HTML
command allows a document designer to establish a link to another Web document or
resource file. When the linked file is another document, that document is retrieved and
displayed when the link is activated. When the linked file is an image, sound, or video,
the browser displays the file if it can handle the media. When such software is available,
its use is generally transparent to the browser user. We note that the client/server feature
is exploited here also. The burden of interpreting the file such as displaying an image,
playing a sound or a video resides entirely with the client software and hardware.

In this course you will learn to write simple HTML documents (we only have one week
to spend on this topic). If you are interested in more detail discussions on this topic here
are some interesting HTML Web sites you can look-up (
http://www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtm ,
http://www.cbadev.utulsa.edu/classes/webclass/su98/students/msafarnz/assign1/assign1.h
tm http://www.pcez.com/~ezaccess/gems8.htm ).

An HTML file consists of regular text interspersed with special markup (borrow from the
publishing industry) codes called tags. Learning to write HTML is a simple matter of
learning to use these tags to produce desired effects in the published document. So our
task is to learn to use HTML tags to create the effects we desire when a Web browser
interprets and displays our document. Typical format of HTML statement looks as
follows:

<tag identifier> text affected by the tag</end tag identifier>

<tag identifier> and </end tag identifier> is know as paired tags.





HTML browsers

When a Web page is transmitted to the client, a special program on the client system
called a Web browser handles the task of interpreting and displaying the page (loading a
Web page). There are many popular Web browsers available for your use (Netscape
Navigator and Communicator, Internet Explorer).

Search Engines

Accessing the known website is easy. However, more often you need to search for
information on many topics. You may be interested in finding information about
University courses, for instance. There are two popular methods for finding information
on the Web, index sites and search engines. On index sites, the collection of web sites
according to various topics are listed. These indices are typically hierarchically organized
to allow you to repeated refine a search for Web sites about a particular topic. The
Netscape communicator Guide button on the tool bar presents a Web page containing
links to a number of Web sites.

A search engine is a software product designed for search purpose. It gives users the
ability to perform keyword search capability for specific topics. These search engines are
accessible from various browsers. Typical search engines are Yahoo(www.yahoo.com),
Infoseek, Excite and AtlaVista.


Clients and Servers

Web is an open distributed system. This means that computer systems that differ in scale
and performance capabilities (different platform) can communicate with one another
freely. This is accomplished by using client/server architecture. Web Servers are
computer systems that store and make available Web pages and other resources such as
images and sounds. Other computers, Clients, request Web pages from Web Servers.

A Uniform Resource Locator (URL) is the agreed upon protocol for giving the address
of a page or resource available on a Web Server. Consider the URL for the Web site
accompanying COMM 301 (http://www-commerce.concordia.ca/dmis/dmis.html or
http://welcome.to/dmis). This provides us with the following information:

http:// indicates that the pages or resources being asked is located
on a remote Web Server.
www-commerce.concordia.ca
indicates the registered name of the Web server holding
that page or resource being requested.
dmis/dmis.html provides information about where on the Web server's hard
disk the page is locate.


The set of rules (protocol) that govern the exchange of information between Web Clients
and Servers is HyperText Transfer Protocol (HTTP). When the request is received by
the server, it interprets the request and transmits the appropriate information to the client.
Once the client receives the requested information, it takes over the task and decides how
to display what was received. This process is governed by the Hypertext Markup
Language (HTML) protocol. HTML provides directions on how the Web client is to
format and display text and images, play sounds, and so on. It's a language whose
purpose is to allow its users to write documents for display on the Web.

2.0 Basic HTML
HTML: It is HyperText Markup Language used to indicate how to display the content of
a page. The page include: Text, images, columns, tables, sound, videos etc

In addition, HTML offers the possibility to link hypertext within the block of text.

There are two types of text in an HTML document:
1. The actual content / information
2. Tags = which indicates the way the content is to be displayed.

Conventions:
1. All the tags are included between < and >
2. To activate a tag you use < >
3. To deactivate a tag you use < />
4. Structure of an HTML document follows:
<HTML>
<HEAD>
<TITLE>

</TITLE>
</HEAD>

<BODY>



</BODY>
<HTML>

Structure

A small number of basic tags are included in every HTML document. Paired <HTML>
tags must surround the entire document, paired <HEAD> tags surround the heading
material, paired <TITLE> tags enclose the document title, and paired <BODT> tags
bracket the body of the document. So typical HTML document looks as follows:

<HTML>
<HEAD>
<TITLE> COMM 301 Web Page</TITLE>
</HEAD>
<BODY>
There will be a question on Web site and HTML on COMM 301 midterm exam.
</BODY>
</HTML>

If you examine the example HTML document, you can probably guess what the image
would look like when displayed by a Web browser. The following is the actual image:

Note that title in the browser window title bar is COMM 301 Web page, that is paired
<TITLE> provides display in the browser title bar but not the document headings. HTML
permits six levels of headings using paired tags <H1> through <H6> to specify the size of
displayed images. You should also note that the exact format for Web pages are
determined by the particular browser and client machine on which the pages are
displayed, not by the HTML, supplied in the document.

Sometimes we would like to have our horizontal line separating the heading from the rest
of the text. This can be accomplished by using unpaired tag <HR>. If we need to list
some topics using HTML we can do this by using bullet list (there are other kinds). For
example, if you wish to list the midterm examination for mat for the COMM 301:
Multiple Choice, Essay (short answer), DFD exercise and HTML. The paired tag <UL>
is used to surround the entire list, and then each item in the list is preceded by the
unpaired tag <LI>. By the way, UL stands for unordered list and LI stands for list item.

So your final HTML document incorporating what we have discussed so far looks like:


<HTML>
<HEAD>
<TITLE> COMM 301 Web Page</TITLE>
</HEAD>
<BODY>
<H1>COMM 301 MIDTERM format</H1>
<HR>
There will be a question on Web site and HTML on COMM 301 midterm exam.
<UL>
<LI>Multiple Choice
<LI>Essay (short answers)
<LI>DFD exercise
<LI>HTML
</UL>
</BODY>
</HTML>







Tags


HTML tags are commands written between less than (<) and greater than (>) signs. These
signs can also be called angle brackets. They indicate how a browser should display the
text. There are opening (<) and closing (/>) versions of the tags and the affected text is
contained within the tags. As we see the only thing that differentiates a closing tag from
an opening one is the forward slash (/>).



<H1>How are you?</H1>

Attributes & Values:
Tags may have attributes. The function of these attributes is to offer different options for
the contained text. The attribute is typed between the command word and the final greater
symbol.
Attributes may have values. Usually the value is a choice from a group of options.



<H1 ALIGN = CENTER >How are you?</B>



URLs


A URL is a uniform resource locator. It is the technical name to simply ADDRESS. A
URL contains the specific information about where a file is located and what browser is
most appropriate for it.

A basic URL is composed of 4 parts:
1. Protocol
2. Server name
3. Path
4. File name





Opening tag Affected Text
Closing tag
Attribute
Value
Therefore for example: http://www.site.com/liz/file.htm

1. Protocol http://
2. Server name www.site.com
3. Path /liz/
4. File name file.htm

The protocol tells the browser how to deal with the file that is about to open. One of the
most protocol you will see is http standing for hypertext transfer protocol.
The server name indicates where the file is located followed by the path leading to the
file name that includes the specifics to how the internet page is laid out.


Special Symbols


The standard letters on your keyboard (used in ASCII) include 128 characters and can be
used without problems. However, accents and other special character will not appear on
the internet if typed in the HTML code as they look. That is if you type a in the HTML
code it will look different on your web page.
To display special characters or symbols one has to enter (1) the ampersand [&] + (2) the
number symbol [#] + (3) the character number + (4) a semicolon.
Therefore if we want to display the word Garon then we would need to type:

<H1>Gar&#231;on</H1>







APPENDIX A
BASIC HTML COMMANDS


<BR> Insert a line

<B> Bold

<I> Italics

<U> Underline

<BIG> Increase size

<S> Strike through

<SMALL> Decrease size

<SUB> Subscript

<SUP> Superscript

<Font Size = n> Identify the size of the font

<Font Face = font> Specify the font of the text following

<Body BGCOLOR = Code Text = Code>
To specify background color and color of text
Code ! Hexadecimal or one of 16 colors which are:
Silver, Gray, Maroon, Magenta, Green, Navy, Purple,
Yellow, Olive, White, Black, Cyan, Red, Lime, Blue, Teal

<IMG SRC = name.gif> To insert a gif image

<IMG SRC = name.gif ALIGN = right>

<A HREF = http://www.site.com/homepage.html>