LECTURE NOTES:

COURSE TITLE: WEBSITE DESIGN & PROGRAMMING

DEPARTMENT: COMPUTER SCIENCE & SOFTWARE ENGINEERING

Introduction
Objectives
Main Content
What is HTML
History of HTML
How HTML works with the Web
How HTML works on the Web

What are the tags up to?

Is there anything HTML cannot do?

Things you can do with HTML

Conclusion
Summary

1.0 INTRODUCTION

Web designers utilize markup language, most notably HTML for structure and CSS for
presentation to develop pages that can be read by web browsers. This unit will deal on only
HTML structures. HTML is not the only way to present information on the Web, but it is the
glue that holds everything together. In addition to begin a markup language for displaying
text, images, and multimedia, HTML provides instructions to Web browsers in order to
control how documents are viewed and how they relate to each other. For all its simplicity,
HTML is a very powerful language.

In this unit, we will take a look at how HTML interacts with the Web and students are
expected to explore some of the ways that it is begin used today on popular web sites.

2.0 OBJECTIVES
At the end of this unit, you should be able to:
Define HTML
Describe the History of HTML
Explain how HTML works

3.0 MAIN CONTENT

3.1. What is HTML?
HTML is a computer language devised to allow website creation. These websites can then be
viewed by anyone else connected to the Internet. It is relatively easy to learn, with the basics
being accessible to most people in one sitting; and quite powerful in what it allows you to
create. It is constantly undergoing revision and evolution to meet the demands and
requirements of the growing Internet audience under the direction of the World Wide Web
Consortium, W3C, the organisation charged with designing and maintaining the language.

The full meaning of HTML is HyperText Markup Language .

HyperText is the method by which you move ar ound on the web — by clicking on
special text called hyperlinks which bring you to the next page. The fact that it is
hyper just means it is not linear — i.e. you can go to any place on the Internet
whenever you want by clicking on links — there is no set order to do things in.
Markup is what HTML tags do to the text inside them. They mark it as a certain type
of text ( italicised text, for example).
HTML is a Language , as it has code-words and syntax like any other language.

How does HTML works?

HTML consists of a series of short codes typed into a text-file by the site author — these are
the tags. The text is then saved as a html file , and viewed through a browser, like Internet
Explorer or firefox. This browser reads the file and translates the text into a visible form,
rendering the page as the author had intended. Writing your own HTML entails using tags
correctly to create your vision. You can use anything f rom a rudimentary text-editor to a
powerful graphical editor to create HTML pages.

What are the tags up to?

The tags are what separate normal text from HTML code. You might know them as the
words between the <angle-brackets>. They allow all the cool stuff like images and tables and
stuff, just by telling your browser what to render on the page. Different tags will perform
different functions. The tags themselves don’t appear when you view your page through a
browser, but their effects do. The simplest tags do nothing more than apply formatting to
some text, like this:

<b>These words will be bold </b>, and these will not.

In the example above, the <b> tags were wrapped around some text, and their effect will be
that the contained text will be bolded when viewed through an ordinar y web browser.

Is there anything HTML cannot do?

Of course, but since making websites became more popular and needs increased many other
supporting languages have been created to allow new stuff to happen, plus HTML is
modified every few years to make way for improvements.

Cascading Stylesheets are used to control how your pages are presented, and make pages
more accessible. Basic special effects and interaction is provided by JavaScript, which adds a
lot of power to basic HTML. Most of this advanced stuff is for later down the road, but when
using all of these technologies together, you have a lot of power at your disposal.

History of HTML
A markup language combines text as well as coded instructions on how to format that text
and the term "markup" originates from the traditional practice of 'marking up' the margins of
a paper manuscript with printer 's instructions. Nowadays, however, if you mention the term
'markup' to any knowledgeable web author, the first thing they are likely to think of is
'HTML'.

In the Beginning

HTML —which is short for HyperText Markup Language— is the official language of the
World Wide Web and was first conceived in 1990. HTML is a product of SGML (Standard
Generalized Markup Language) which is a complex, technical specification describing
markup languages, especially those used in electronic document exchange, document
management, and document publishing. HTML was originally created to allow those who
were not specialized in SGML to publish and exchange scientific and other technical
documents. HTML especially facilitated this exchange by incorporating the ability to link
documents electronically using hyper links. Thus the name Hyper text Markup Language.

However, it was quickly realized by those outside of the discipline of scientific

documentation that HTML was relatively easy to learn, was self contained and lent itself to a
number of other applications. With the evolution of the World Wide Web, HTML began to
proliferate and quickly spilled over into the mainstream.

Browser Wars

Soon, companies began creating browsers —the software required to view an HTML
document, i.e., a web page— and as they gained popularity it gave rise to competition and
other web browsers. It may surprise some that back in late 1995, Netscape —which now
plays a distant second to the King Kong of browsers, Internet Explorer— was the dominant
browser on the market. In fact, Netscape was the first browser to support Javascript, animated
gifts and HTML frames.

Thus began the so-called 'browser wars' and, along with seeing who could implement more
'bells and whistles' than the other guy, browser makers also began inventing proprietary
HTML elements that only worked with their browsers. Some examples of these are the
<marquee> ... </marquee> tags (scrolling text) which originally only worked with Internet
Explorer and the <blink> ...</blink> tags (blinking text) which still only works with Gecko-
based browsers such as Mozilla or Netscape.

A side effect of all this competition was that HTML became fragmented and web authors
soon found that their web pages looked fine in one browser but not in another. Hence it
became increasingly dif ficult and time consuming to create a web page that would display
uniformly across a number of different browsers. (This phenomenon remains to some extent
to this very day.)
Meanwhile, an organization known as the World Wide Web Consortium (W3C for short) was
working steadily along in the background to standardize HTML. Several recommendations
were published by the W3C during the late 1990s which represented the official versions of
HTML and provided an ongoing comprehensive reference for web authors. Thus the birth of
HTML 2.0 in September 1995, HTML 3.2 in January 1997 and HTML 4.01 in December
1999.

By now, Internet Explorer (IE) had eclipsed Netscape Navigator as the browser to use while
surfing the net due to its superior capabilities but also largely due to the fact that the IE came
bundled with the Windows operating system. Essentially when people bought computers
using the Windows OS, it had the 'internet installed on it'. This tended to suit people just fine
since the typical newcomer to computers was someone who was tentatively striking forth to
take on this intimidating new-fangled technology that was crammed to the r afters with
indecipherable acronyms, software help files that made no sense and buggy programs. Hence,
the more 'instant' solutions this new technology offered, the better it was.

3.3. How HTML works with the Web

HTML allows the individual elements on the Web to be brought together and presented as a
collection. Text, images, multimedia, and other files can all be packaged together using
HTML. This section of unit three explains the basic principles behind the interaction between
HTML and the WWW.

You can always view the HTML source code for a particular page through your browser.
Once you've mastered the basics of HTML, this is a great way to learn how other authors put
together their HTML documents. To view the source code of the current document in
Netscape, choose Document Source from the View menu.
 Figure 1: Document Source from the View menu

1. The author of the Web page assembles all of the materials necessary, including text,
charts, images, and sounds.
2. All of the material for the Web page is linked together using HTML. HTML codes
control the appearance, layout, and flow of the page. The amazing thing about HTML
is that it is all done with simple text codes that anyone can understand.
3. When someone connects to a Web server from his or her computer, the HTML file is
transferred from server to client. Because an HTML file is simple text, this usually
happens very quickly.
4. The Web browsing software (the client) interprets the layout and markup commands
specified in the HTML file and then display the text exactly as the HTML author
intended.
5. Any images and charts on the page are r etrieved as well. The HTML file tells the Web
browser what images to download and how to display them on the page.

3.3.1. How HTML works on the Web

a) Your Computer

The browser on your computer sends a r equest for an HTML document from a remote server
using addresses called URLs (Uniform Resource Locators). When the data is located and
returned, your browser displays the web page (text and graphics) according to the HTML tags
in the document.

b) Connection to the Internet

A dial up modem in your computer or a direct high speed data transmission line connects
your computer to an internet service provider.

c) Internet Service Provider

Your internet service provider is probably an internet web server and is connected to all the
other computers on the web. Your web server sends your request for an HTML document and
sends back the file to you.

d) Internet

The internet is a collection of web servers around the world. Each server has a URL and will
forward your request on until it reaches the server you are looking for. When the data is
returned to you, it may travel a totally different route over different computers.

e) Remote server

The remote web server with the URL you are looking for has all the HTML files including
text, graphics, sound, and video. It may also have gateway scripts that are programs running
on the server to process data.
3.4. Things you can do with HTML

There are many ways you can use HTML to publish content on the World Wide Web. This
unit will teach you the techniques you need to know to create timely, informative, and
compelling HTML documents.

3.4.1 Six Cool Things You Can Do with HTML

1. You can create a personal home page and leave your mark on the World Wide Web.

Figure 2 : An example of a personal home page

2. You can create a page for your company to advertise and promote products and
services.
 Figure 3 : An example of a home page for your company

3. You can build a catalog on the World Wide Web, complete with product descriptions
and photographs. You can even incorporate fill-in order forms so that your customers
can order products from you on line.

Figure 4: An example catalog on the World Wide Web

4. You can create a searchable phone directory for your company or organization.

Figure 5: An example of searchable phone directory for a company

5. You can create a newsletter on the Web, with pictures and sounds. Using some of the
advanced HTML tricks explained in this book, you can format the newsletter to give
it a slick, professional appearance.
 Figure 6: An example of how to create newsletter on the Web

4.0 CONCLUSION:

HTML is a computer language devised to allow website creation. Its tags are embedded
in angle brackets. HTML is made up of different tags that perform different functions.

5.0 SUMMARY:
In this unit, you have learnt :
The meaning of HTML
How HTML worked with the Web
How HTML worked on the Web
Things that can be done with HTML

How to Use Notepad

HTML is not really anything more than plain text. For that reason, you don't need
any special editors or compilers to create HTML files. In fact, you can create all of
your HTML files with the simplest of text editors. There are many specialized
 HTML editors and converters available, and you may decide to choose one of
them based on your particular needs. But for all the HTML examples in this unit,
we will use Windows Notepad to illustrate just how simple creating HTML can
be.

Figure 1: A Symbol of Notepad

1. To open Notepad, click on the Start button in the lower-left corner of your screen.
Then choose Programs, followed by Accessories. Click on the Notepad icon.

Figure 2: Processes of Clicking on the Notepad Icon

Notepad begins with a blank document. You can begin typing to create a new
document. To open an existing text file from disk, pull down the File menu and
choose Open.
 Figure 3: Notepad Environment

2. Choose the file name from the Open File dialog box. Notepad's Open File dialog
window normally only shows files with the extension .txt. You'll want to change the
Files of Type selection to All Files if you're opening or saving an HTML file, which
uses the extension .htm or .html.
3. Once you've opened an existing file or begun typing a new one, you can easily edit
your text. Notepad has all the basic editing functions of a word processor. For
example, you can select blocks of text for cut and paste operations.

4. HTML files usually contain very long lines that will run off the edge of the page.
Notepad has a feature called Word Wrap that will format these lines to fit entirely
within the window, making them much easier to read. To activate this feature, pull
down the Edit menu and select Word Wrap.

Figure 3: Notepad Environment – Word Wrap

 To save your HTML file, first pull down the File menu. If this is a new file that you
started from scratch, choose Save As and then type a file name. Remember to use
.htm or .html as the file extension. (Check with your Web server administrator to find
out which extension you should use.) If this is an existing file that you opened from
Notepad, you can just choose Save from the File menu.

3.2 – How to Use Mark up Tags

The use of markup tags is what separates HTML from plain text. Markup tags are used
extensively in HTML, and they provide ways to control text formatting, create links to other
documents, and even incorporate images and sounds. In short, markup tags are the key to
making HTML pages work. Markup tags are not case sensitive. For example, the body
element tag (which you'll learn about in the next unit) can be typed as <BODY> , <body> , or
even <BoDy> .

Figure 4 : An example of body element tag

1. Open a new file in Notepad and type in the words the bold new frontier” . In this
example, we'll make this text appear in boldface type from the following sentence:.

2. HTML markup tags are easy to create. They consist of a left angle bracket, the name
of the tag, and a right angle bracket. The left and right angle brackets are also known
to some as less-than and greater-than symbols. To start a boldface markup tag, type
<B> where you'd like the boldface type to begin.

3. Locate the place where you'd like the boldface to stop. At this point, you need to
create an ending tag for the boldface type. An ending tag looks just like a starting tag,
except it is preceded by a forward slash character (/). To mark the end of the boldface
tag, type </B> .
 4. When viewed with a Web browser, the text between the <B> and </B> tags will
appear in boldface.

Figure 5: An example of Bold Tag

5. Almost every markup tag in HTML requires both a starting tag and an ending tag.
One notable exception is the paragraph marker, <P>, which does not require an
ending </P> tag.

3.3 How to Write a Simple HTML Document

Now that you have learned how to create markup tags, the next step is to learn how to put
them together to create a simple HTML Document. The basic HTML document contains two
parts: the head and the body. The head section contains important information about the
document itself, such as the title. The actual text, images, and markup tags are placed in the
body section. You will learn the specifics of both sections in the next unit.

Figure 6: A Simple HTML Document

1. The first markup tag in every HTML document is the <HTML> tag. This lets Web
browsers know that everything in the file is HTML text. Open a new blank document
in Notepad. Type <HTML> on one line, and then on the next line, close the tag by
typing </HTML> . From now on, everything you type in this document should go
between these two tags.

Figure 7: HTML Tag.

2. The head section comes next. Type <HEAD> on the line after the first HTML tag,
followed by </HEAD> on the next line to create the section.

3. One of the key head elements is the title of your HTML document. To start the title
tag, start a new line between the <HEAD> and </HEAD> tags and type <TITLE> .
Now enter a title for your document, such as My First Web Page . Finally, end the
title by typing </TITLE> on the same line.

4. The next section of your HTML document is the body. This section contains most of
the elements of your document. To create the body section, type <BODY> on the
next line. On the next line after that, type </BODY> to mark the end of the section.
Most of your text and HTML codes will be placed between these two tags.
 5. Right now, your HTML document is properly formatted, but it does not have any
content. Fortunately, that is simple enough to change. On a new line between the
beginning and ending body tags, begin typing some text, such as This is my first
HTML document .

6. Save your HTML file in Notepad with a descriptive file name, such as f irst.htm.
7. Using your Web browser, open your new HTML document. Because your file is on
your local desktop machine and not on the Web, you will need to use the Open File
option in your Web browser. With Netscape, choose Open File from the File menu,
go to the folder where you saved your document, and select it.
8. There it is-your first HTML document. It may not look like much at this point, but
you should give yourself a pat on the back. You are now an HTML author.

3.4 How to Use Special HTML Editing Software

Throughout this Course Material, you will learn to write HTML documents with the simplest
of tools: a text editor. Creating HTML documents with a text editor is the best way to learn
the language.

However, before you continue, you should know that there are a number of specialized
HTML editing programs available. Some have graphical interfaces, others feature online
help. All of them make creating HTML documents much easier. Once you have mastered the
HTML basics, you may want to try out one of these programs. In this unit, we will show you
what you should look for in an HTML editor.

Many of the best HTML editors avail-able on the Internet are shareware. Shareware is
a type of software marketing that allows you to try the soft-ware before you purchase
it. If you decide that you like the software and want to keep it, you pay the author
directly, according to the documentation supplied with the program. If you don't like
the program, simply delete it and forget it. Shareware is a great way to find a program
that's right for your tastes.
Even if your favorite HTML editor does not support the latest HTML tags and
features, you can always add them later using Notepad. Because HTML files are plain
text, you can work on your HTML documents with just about any editor you like.
 Figure 8: Some Features of HTML

Make sure the HTML editing software has support for all the HTML features.
1. If it

2. Look for toolbars and other features that make creating HTML easier. To create
a
3. Many WYSIWYG (What You See Is What You Get) HTML editors are now
available. These allow you to see what your HTML document will look like as
you're
with a Web browser ever y time you want to see how things are progressing.
4. Another feature to look for is HTML syntax checking. Editors with this
capability can
automatically.
5. Many of the best HTML editors are available right on the World Wide Web as
shareware. That means you can download them and try them out before buying
them.
start looking is the HTML Editors section in the Yahoo director y.

4.0 CONCLUSION:
The markup tags are the key to making HTML pages work. They are not ca
sensitive. Almost every markup tag in HTML requires both a starting tag
an