htmlebook

8/11/2019 htmlebook

1/95

www.cstutoring.com E-Learning, E-Books, Computer Programming Lessons,

Tutoring, Homework Help, Custom Programming,

1

The Computer Science tutoring Center

www.cstutoring.com presents this E-Book

HTML PROGRAMMERS GUIDE

Table of Contents

Lesson 1 Introduction to HTML Programming Lesson 2 HTML Document Structure and Text Tags Lesson 3 Introduction to Style Sheets

Lesson 4 HTML Lists, Entities and Links Lesson 5 HTML Tables Lesson 6 HTML Clickable Maps and Frames Lesson 7 HTML Forms Lesson 8 HTML Project

ISBN: 0-9730824-9-2 COPYRIGHT 1990-2003 BY WWW.CSTUTORING.COM

8/11/2019 htmlebook

2/95



2

INTRODUCTION

You have just bought this E-Book that teaches you how to design Web Pages usingHTML. HTML was one of the first languages to Design Web pages. HTML is a set ofcommands that let you place text and graphics on a Web Page. Each chapter is

known as a Lesson. For each Lesson you will accomplish a specific task to design acomplete Web Page. Each Lesson has exercises. You learn programming by doingthe exercises. The last Lesson is a Project where you must complete your Web Pagestarted in Lesson 1. We use the Lessons our selves when we are designing Webpages or helping people with there Web programming problems. The goal is insteadof looking at many books to know how to do something we just have one webprogrammers guide. You may E-Mail in your solution to the exercises for marking orsend us your questions in how to complete the exercises. We charge $15 perLesson for this service.

IMPORTANT

You should use all the material in all the lessons to do the questions and exercises. If you do not know

how to do something or have to use additional books or references to do the questions or exercises, please

let us know immediately. We want to have all the required information in our lessons. By letting us knowwe can add the required information to the lessons. The lessons are updated on daily bases. We call our

lessons the "living lessons". Please let us keep our lessons alive.

E-Mail all typos, unclear test, and additional information required to:

[email protected]

E-Mail all attached files of your completed exercises ($15 per Lesson) to:

[email protected]

This lesson is copyright (C) 1998-2003 by The Computer Science Tutoring Center www.cstutoring.com

This document is not to be copied or reproduced in any form. For use of student only.

8/11/2019 htmlebook

3/95

8/11/2019 htmlebook

4/95



4

Tags come in pairs. There is a start tagand a end tag. The end Tagid denoted by a/.A Text message is embedded between the start and end tag pairs as shown as follows:

click here to learn more

The tags also have attributes. Attributes supply extra information for the tag. An attribute has aname and a value. An example of an attribute name for the tag is href, which stands forhypertextreference. A hrefis used to specify the location of a web resourcelike another webpage or a file to download. Each attribute may have a value. An example of a value for the hrefisthe actual web site address itself like:

"http://www.cstutoring.com"

Values are usually enclosed in double quotes. A WEB page address is known as an URL, whichstands for Uniform Resource Locator. The attribute name href has a URL value representing a webpage address.

href = "http://www.cstutoring.com"

The tag pairs are known as a anchor. Antag may contain a linkthat lets theuser click on a text message and be re-directed to another WEB site page. The link is specifiedusing the hrefattribute and URLvalue. An example of an anchortag that contains a link to a webpage is:

click here to know more

Anchor

Link

start of

ataghref

attribute

href attribute value end of

atag

text

message

end of

anchor

start Tag end Tagtext message

attribute

name value

Anchor

8/11/2019 htmlebook

5/95



5


The tag stands for start anchor and the stands for the end anchor. href is anattribute of the tagand http://www.cstutoring.htmis a valueof the hrefattribute. Thehref attribute specifies the location of a another web page. Text requesting the user to clickhereis inserted between the and tags. On the web browser the text is usually appearsa different color and underlined. The text on a WEB page that lets you go to another WEB page byclicking on it is known as a hyperlink.

I always get confused what is an anchor and what is a link. The only way to stay unconfused is toaccept fact that the anchorcontain the link!


Hyperlinks may send you to another WEB page or display documents in another area of your

current WEB page. Anchortags with linkshelp you navigate inside a WEB page. Instead of havingto scroll up and down the web page where you want to go, you just click on a link and presto youautomatically go there. WEB sites are made up of WEB pages each linking to each other.

a hyperlink example

Link

start of

ataghref

attribute

href attribute value end of

atag

text

message

end of

anchor

Anchor

Link

8/11/2019 htmlebook

6/95



6

URL'S

All WEB sites have an address known as a URL. A famous WEB address is The Computer Science

Tutoring Center at WEB address: http://www.cstutoring.com. URLstands for Uniform ResourceLocator which is simply a mechanism to locate web documents, in web servers. A URL has threemajor sections: protocol, serverlocationand resourcefile name.

http://www.cstutoring.com/index.html

The slashes are the separators between the protocol and networks and domain and resource file

name. They work like the slashes in your computer to separate directories from file names.

The protocolindicates what kind of service will handle the file.

http:

There are many protocols available "http:" is the one used to read html documents. The followingtable lists all the other ones.

protocols descriptionftp: used to transfer filesmailto: used to send e-mailsfile: reading fileshttp: use send pages to web browsershttps: used to transfer data securely

The Web Server gets a location that consists of a network and domain name. Thenetwork isinternal to the web server where it locates your domain name file space on its many servers. The

most common network is "www'. The domain name consists of a user name and an extension like

com, org, netetc.

//www.cstutoring.com

protocol: network domain domain

extension

resource file name

protocol:

network domain domain

extension

8/11/2019 htmlebook

7/95



7

Lastly the resource file name.

/index.html

The file name may specify an html document, an image or sound file. If no resource file name isspecified then a default resource file is sent. Some default resource file names may be index.html,

index.htm etc. File names may also contain additional path names indicating sub directories, like:

/images/cs.gif. Again the slash/ is used to separate the directory name from the file name.

MIME types

The type of file you are sending must be identified The identification is known as a MIMEtype. MIMEstands for Multipurpose Internet Mail Extension. The MIME type tells your WEB browser how toidentify each document. More than 1 document type can be sent and received at a time, eachidentified by the MIME type. The file extension is used to identify the file type. File types areassociated with the MIME type. The server will also send a message to the web browser to identifythe type of file to be sent. The most common files sent are ones that contain text and html code.

These files have the extension "txt", "htm" or "html". The following table lists some common MIME

types with their file type extensions.

Format Extension Name usetext/html .txt text file display text

.htm html document display test and images

.html html document display test and images

Format Extension Name useSound .ra Real Audio RealAudio WEB server and Real Audio Player

.sbi SoundBlaster Instrument Sound Blaster Cards

.snd, .au 8 khz mulaw voice grade sound format

.wav Microsoft Waveform play sounds, music

Format Extension Name useGraphics .gif Graphics Interchange Format Compressed graphics

.jpg, .jpeg Joint Photographics Experts Group Highly compressed graphics format

.pdf Portable Document Format Adobes format for documents

.ps PostScript Adobes description language

Format Extension Name useVideoMotion

.avi Audio Video Interleaved Microsoft Video for Windows standard

format

.dvi Digital Video Interactive Motion video format

.fli Flick Autodesk Animator motion-video

format

.mov QuickTime Apples motion-video and audio format

.dcr Director

resource file name

8/11/2019 htmlebook

8/95



8

plugins

The non-text data of a WEB page shows up as attachments identified by the MIMEtype in the HTMLfile. The browser may display the MIME types automatically like GIF or JPEG graphic images. Forspecialized MIME types, the browser will call a plugin. The plugin knows how to display the MIMEtype. For example when you view pdf files attached to an E-mail or part of a WEB page then the

WEB browser will automatically call the Adobe Acrobat plugin to view the pdf file. If you do not havethe plugin installed, then your WEB browser may ask you to download it and install it automaticallyfor you.

E-Mail

E-mail is electronic mail that lets you send messages over the Internet. Each person sending orreceiving gets an E-mail address. The address starts with the persons name known as an E-mail boxthen a @ symbol and a URL. The URL represents where the message is going to and is usually the

same URL as a WEB site. One URL can represent many E-Mail boxes. An E-mail box is where E-Mail

is received and sent to the person's name preceding the @ symbol. A famous E-Mail address is:

[email protected]

The protocol for e-mail is mailto: All kinds of documents are sent by E-mail. The type of documentyou are sending or receiving must be identified using a MIME type. We will send some emailsshortly.

WEB PAGE DESIGN

Now that we know a little bit about HTML and WEB pages its now time to learn how to make a WEB

page! As we told you earlier, a WEB page is controlled by tagsthat are also called markups. Tagsare special HTML key words that tell the WEB browser how to display images and text. A tag starts

with a left anglebracket . Thepurple (top) is the definition where the blue (bottom) is the actual code

< k e y w o r d >

Case does not matter but tags are usually have a mix with upper and lower case. Important HTML

keyword tags are usually upper case. Text is embedded between tags and is known as content.Content is just textdisplayed to the user. It is very important, how you combine the tags with thecontent text. This combination is important and is called layout. Layout refers how your WEB pageis arranged. A good layout will give an appealing presentation to your viewer. Your layout should be

impressive and informative. In WEB page design, the first impression is very important. You must be

creative in combining images, text and colors in your WEB page. Before you start designing yourWEB page you should sketch out what your web page would look like.

8/11/2019 htmlebook

9/95



9

An html document will have two sections, A headersection and a bodysection. The header sectionis just used to supply information about your web page to the web browser. the header sectioncontents are not displayed in the web browser. the body section contains text and images to be

displayed.

Using HTML Tags

We will now write our first HTML program. Open a directory on your computer call HTMLCourse.(put no space between HTML and Course). Make a sub directory called Lesson1. Inside thissubdirectory use notepad or MSDOS edit and open a file called L1p1.htm. The first tag in a WEBpage is the tag. The tag identifies that this file is a HTML document. Put this tagat the top of your L1p1.htm file. The next tag is the tag. This tag identifies the start of theheader section of a WEB page. Put this tag next in your L1p1.htm file. The header section maycontains a title, identification and search engine information. The header ends with the tag. The header section text is not displayed in the web browser, the header section is used to

provide additional information but not to be displayed. Start tags and end tags are quite common inHTML and are known as tag pairs.Tag pairs are used to enclose a section.A html file will havemany sections identified by tag pairs. Inside the header section you will find a start tagand a end tag. Every WEB page needs a title. The title text is listed between the title tagpairs.

My first WEB Page

Notice the title is just free text and is not enclosed with any quotes. The title is enclosed by the

tag pairs. The title does not appear on the WEB page but rather on the title bar of theWEB browser. Next put the tag in your html document. The header section ends with thetag. Put this tag next in your L1p1.htm file. The next section of our HTML program is thebodysection identified with the start tag and ends with the end tag. Put thistag next in your L1p1.htm file. Inside the tags are all the things you want the webbrowser to display. Usually the first sentence you display in your body will be a heading. EveryWEB page needs a heading. The heading will be the first message displayed on your WEB page.Each heading can have levels H1to H6. Each level refers to a text size. Level H1 is the largest sizeand level H6 the smallest size. The headers are displayed in bold text. We will use heading level H3.

Welcome to Ed's WEB page

Put this heading in your L1p1.htm file. Inside the rest of the section below the heading wecan write some plain text messages.

Thank you for landing on my WEB site.

Put this text in your L1p1.htm file. We close the body with the end body tag and closethe HTML file with the end tag. Put this tag in your L1p1.htm file.

HTML File

Header Section

Body Section

8/11/2019 htmlebook

10/95



10

Your html program file should now look something like this:

My first WEB page

Ed's WEB pageThank you for landing on my WEB page

Our HTML file has two sections a Headersection and a Bodysection. You should now run the htmlprogram just go to Internet explores or Navigator and select file open and the browse to your filename L1p1.htm.

Header Section

Body Section

html document

8/11/2019 htmlebook

11/95



11

You should get something like this:

LESSON 1 EXERCISE 1

If you have not done so already, type the above HTML program in an editor like notepad or msdos

edit. name your file L1p1.htm and run. You should not use a word processor, because the wordprocessor may insert extra control characters into the file and mess things up. Substitute your own

name for Ed and maybe your own message. Save your file as L1ex1.htm or L1ex1.html (we areusing the .htm extension). You should make a separate directory for your entire WEB programming

courses lessons and place your html files there. After typing in your file, open up your WEB browserand run the file. To run the file go to file menu of your WEB browser, select open page and go to the

directory where you keep your WEB programming course files. You should get something like this:

8/11/2019 htmlebook

12/95



12

HTML LANGUAGE DEFINITIONS AND EXAMPLES

A Language definition is like a formula that defines all the components needed to write the language.

We use p u r p l e i t a l i cs color to definethe HTML language. The following is a language definition ofa tag. The tag gets an attribute to supply additional information for the tag.

< t a g a t t r ib u t e >

We use blue for an actual HTML code example. The following is a table tag with a borderattribute. A table displays information in a grid where the border specifies the table will have aborder.

You will notice some tag attributes get a value:

The value is enclosed in double quotes. The value may be a URL, image file, an identification name,a number, text or a color. The align attribute and value "center" says to place the table in thecenter of the web page.

Putting an image in a WEB page

Its now time to put an image in your WEB page to add some excitement. You need an image before

you can display one. You can download an image from an existing WEB page by using Save Image

As in your WEB browser, or you may have a few images of your own kicking around. The imagetag is used to put an image on your WEB page. Images are usually in the JPEG or GIFformat. The JPEG format is used for large color pictures whereas as the GIF format is used for

smaller pictures. The JPEG format has much better color resolution. To display an image on yourWEB page you use the tag the src attribute and the image file name as it value.

The tag has the srcattribute that has the value "airplane.jpg".The value indicates the GIFor JPEG image file that will be used to display the image on the web page. In this case the image willbe a picture of an airplane. Fortunately not a picture of Ed! To display the image it must be in thesame file directory where your HTML file is:

tag attribute value of

attribute

tag attribute

8/11/2019 htmlebook

13/95



13

or you must specify the file directory path with the image file name.

The dotmeans current directory, the / means sub directory. If the path is another WEB pageaddress then you must include the complete URL in your path.

Image tag attributes

The tag has attributes to positioning the location of an image where it will appear on theWEB page or to specify the size of an image etc. When changing the size of an image just use the

height or width attributes but not both, as to keep the same aspect ratioof the image (preventstretching of an image). The aspect ratio determines the horizontal and vertical appearance of theimage. Here are the attributes for the tags with description and examples.

attribute descriptionsrc=url location of image file to display

alt=text A text message to display if the image file cannot be found

Which will probably be the graphics file name.

align=text Allows you how to place the graphics imageLEFT (default) image on left side of pageCENTER image in center of pageRIGHT image on right side of pageJUSTIFY image location set by surrounding text

vspace=number the vertical spacebetween the image and the text above or below it

hspace=number the horizontal spacebetween the image and the text to the left or right

width=number the width in pixels or percentage of the image, expand or shrink imagewidth=percent%

height=number the height in pixels or percentage of the image, expand or shrink imageheight=percent%

border=number draws a border of the specified pixels around the image, 0=no border

lowsrc="url" load a lower resolution image first before the higher resolution images isloaded (used for fast page loading)

8/11/2019 htmlebook

14/95



14

LESSON 1 EXERCISE 2

Add the image file to the your program L1ex1.htm and save as L1ex2.htm then run it. Use the alt,alignand other attributes. Experiment with LEFT, CENTER, RIGHT and JUSTIFY alignment values.Try resizing your image using widthor height attributes. Call your file L1ex2.htm. You should getsomething like *this:

ANCHORS

Anchorscontain linksthat allow you to go to other WEB pages or different parts of WEB pages inyour current WEB page. There are two types of links:

(1) relative linksrefer to web pages inside your WEB site

(2) absolute linksrefer to web pages in other WEB sites.

Each WEB site will have a collection of WEB pages all interconnected by links. The following is ananchor with a relative linkto another web page in this web site.


The tag has the attribute hrefwhose value is the URL of the web page you want to go to. Arelative link is just a file name inside your web page. The URL is already specified and is the one youare presently at. In the above example we have a relative address linkto another HTML file in thecurrent WEB site

8/11/2019 htmlebook

15/95



15

In the next example the anchor gets an absolute address linkto a WEB page in another WEB site.The absolute address link is a complete URL.


We can now add the absolute link to cstutoring to Eds WEB page.

My first WEB pageEd's WEB pageThank you for landing on my WEB pageclick here to know more

It is sometimes confusing what is an anchor and what is a link. The only solution to this confusion isto accept the fact that anchors contains links.

LESSON 1 EXERCISE 3

Add an absolute link using an anchor tag to your favorite WEB page or call another web page using

a relative link. You may keep your image. Call your file L1ex3.htm. You should get something like

this:

8/11/2019 htmlebook

16/95

8/11/2019 htmlebook

17/95



17

LESSON 1 EXERCISE 5

Allow a user to send you an E-mail by adding an E-mail anchor on your web page.

Call your file L1Ex5.htm. You should get something like this:

8/11/2019 htmlebook

18/95



18

SOME USEFUL TAGS

Line Breaks

The
tag let you start a new line. The
tag applies to individual lines.

Hello how are you today

Paragraphs

The

tag starts a new paragraph and the
tag ends the paragraph. An empty line is placedat the beginning of a paragraph and at the end. The
tag applies to one or many lines.

It is very nice you are learning HTMLI hope you are enjoying these Lessons.

A paragraph tag can enclose any other tag. For example to add space around an anchor:


Paragraphs and Breaks

You find it is necessary to combine
tags with

tag. You will find that you will need a
tag every time to start a new line.

It is very nice you are learning HTML

I hope you are enjoying these Lessons.

Address tags

The address tag is used to display information about the WEB page, the person who wrote it, theircopyright notice etc. An address tag is like the bottomor footerof the WEB page and usuallydisplayed in italics.

This WEB page Copyright 1999 by cstutoring

Horizontal lines

Horizontal lines are used to separate sections of your WEB page using the tag

8/11/2019 htmlebook

19/95



19

Comments

Comments are used to explain parts of a html program that you type in. Comments are not

displayed on the web browser. Comments start with a two hyphens ending with a right angle bracket.

You should add comments your HTML files not only for you when you read your HTML file several

months later and want to figure out what you have written but also for courtesy to your readers.

WEB page layout format.

You have now been introduced to all the components of a simple WEB page. The following outlineshows the format for an html program. An HTML program starts with the tag and then thetag section. The tags goes inside the tags. The tag sectionsused to give information to your web browser and not to display tings. Following the tag

section is the tag section. The section is used to display things on the webrowser screen. The tags enclosed inside the tags specify what is to be displayed andwhere it is to be located. Tags inside tags are known as nested tags.

Your title goes here

Your copy write notice and name goes here

Your html code goes here

your header goes here

display

not to

display

8/11/2019 htmlebook

20/95



20

Displaying and playing sound files

You can use the anchor tag to display graphic files, play sound etc. The following html code will play

animal sounds if the user has a sound card. The animals.wav file is on the server..

click here for animal sounds

You can use the embed tag to start the sound file when the web page loads.

The tag should be the last tag in your web page html file.

LESSON 1 EXERCISE 6

Add to your WEB page extra text using line breaks
and paragraph

tags. Also add ahorizontal line using the tag and a footer section using a tag. And maybe playsome music when they click on a link or when the web page is fist shown (loads). You may want to

put your mailto: anchor in the address section. You should get something like this:

8/11/2019 htmlebook

21/95



21

HTML WEB PROGRAMMERS GUIDE LESSON 2

HTML DOCUMENT, PRESENTATION, TEXT CONTROL TAGS

File: HtmlGuideL2.doc

Date Started: Dec 14,1999

Last Update: March 24, 2003

ISBN: 0-9730824-0-2

Version: 2.0

HTML TAGS

HTML tags instruct the WEB browser how the content of the WEB page is to appear. HTML Tags are

introduced by a left angle bracket

The following is an example of a tag that specifies to draw a horizontal line

tag attributes

Tags have attributesthat specify additional characteristics of this tag. Attributes follow the tagidentifier but is still enclosed by the left and right brackets.

The following is an example of a tag with an attribute that specifies to draw a horizontal line as anoutline only. The taghrspecifies a horizontal line the attributenoshadespecifies what kind of

horizontal line.

Most attributes need a valueto supply additional information. The value is enclosed in doublequotes. We enclose in double just in case the value requires spaces. The value is assigned to the

attribute.

attribute=value

An attribute with a value will follow a tag identifier but is still enclosed by the left and right brackets.

The following is an example of a tag with an attribute that has a value that specifies to draw a

horizontal line centered horizontally on the web browser screen.

8/11/2019 htmlebook

22/95



22

COMMON ATTRIBUTE VALUES

There are many common attribute value types that can be applied to most tags. value typesspecify what kind of data is required for the attribute value. Most common value types are text andnumbers. In HTML we have URL'S, names, numbers, test and color. The following table lists

common attribute value types with examples:

value description example usingURL Uniform Resource Locator (WEB address)

like http://www.cstutor.comhref=http://www.cstutor.com

name user supplied name like "button1" name=button1number user supplied numeric value like "5" size = 5text user supplied text like "left" align = leftcolor color name like "blue"

color notation using rgb values like #0000ffcolor=bluecolor=#0000ff

color values

Color attributes are use to specify the background color of web pages, the color of text etc. Thereare two ways to specify the color:

(1) using the color name:

color=blue

(2) by specifying the actual color by using red, greenand bluehexadecimalweights:

color=#0000ff.

The red, green and blue hexadecimal color weights are mixed together to produce the desired color.

Each individual color weight is represented by a hexadecimal number between 0 and ff (which is

between 0 and 255 decimal number). Hexadecimal is the numbering system used by computers

where the digits are 0 to 9 and A to F (which is the same as 0 to 15 decimal). Hexadecimal digitsare grouped together to form hexadecimal numbers just like decimal digits are grouped together to

form decimal numbers. RGB color values start with a #followed by specifying red, green and bluehexadecimal weights.

red green blue# 00 to ff 00 to ff 00 to ff

You may specify colors by name or by using hexadecimal number notation. The following table liststhe 16 common colors with their corresponding RGB hexadecimal notation.

color RGB value color RGB value

black #000000 green #008000silver #C0C0C0 lime #00FF00

gray #808080 olive #808000

white #FFFFFF yellow #FFFF00

maroon #800000 navy #000080

red #FF0000 blue #0000FF

purple #800080 teal #008080

fuchisa #FF00FF aqua #00FFFF

Specify a color value

8/11/2019 htmlebook

23/95



23

Setting the background color of a webpage

The bgcolorattribute is used to set the background colorof a web page where the value is acolorname or RGB number

or by using the color name

HTML TAG CATEGORIES

Your HTML code will have different tag categories to display and store different types ofinformation. The following table lists each category and describes them. You already know some of

the tag categories introduced from Lesson 1.

category descriptionDocument structure tags how a HTML document is structuredText tags display and structure of contentList tags list data in sequential sentencesTable tags define structure and layout of tablesLink tags create connection links to other or parts of WEB pagesInclusions tags include non HTML objects like Java applets

Style sheet tags define how content is displayed on the browserPresentation control tags alter display of content like changing fontsFrame tags display and control framesForm tags control input of data from a user and send dataScript tags embed programming scripts into WEB documents like JavaScripts

We will now discuss all the different tag categories and the tags that go with them.

HTML DOCUMENT STRUCTURE TAGS

Document structured tags are used to give additional information to the WEB browser and arenot concerned with displaying data. Document structured tagsare used to specifyhow the WEBpage is going to appear. The required information is placed between a start and a closing. The closing tag always starts with a backward slash / example

information

Super Web Page

Eachdocument structured tag is listed with a description, optional attributes and an example using.The tags are listed in order of use in a WEB page.

tag description

The HTML tags enclose an entire HTML document.

tag description

The head section includes the document title tags and search engine information

tag description

8/11/2019 htmlebook

24/95



24

Specifies the title for the HTML document that appears in the title bar of the

browsers window.

example using Your WEB page title goes here

tag description Establishes a base address for the WEB page for relative URLs used in the

section. (be careful using this one)

attributes explanationhref="URL" defines the web pages absolute URL. All other URLs are now relative to the base

URL. This means instead of using http://www.cstutoring.com/schedule.htmyoucan now use "schedule.htmbecause the base is http://www.cstutoring.comexample using and using with tag:

8/11/2019 htmlebook

25/95



25

Here are the http response headers that can be used with the metatag and attribute http-equiv.Response Header Usage

Specifies the catching system to use

no-cache document should not be cachedno-store document should not be cached or even stored

Cache Control

maxage=seconds how long the document should be considered stale

Pragma no-cache document should not be cachedkeep-alive maintain an open persistent connection to clientConnectionclose close connection to clients after response

Retry After specifies a time when the server can try again to handle a request used withthe service unavailable status code

Expires specifies a time when a document may change or when its information willbecome invalid

Location specifies a new location of a document used with statuses movedpermanently or moved temporarily

www-Authenticate specifies the authorization scheme and authorization required by the client toaccess the requested URL is used with status Unauthorized

Content Encoding specifies the scheme used to encode the response

Redirect go to another web page must specify full URLRefresh refresh current web page after a certain time

tag description

Identifies the body of an HTML document. The content of a HTML

document resides between the body tag pairs, displaying text and pictures

attributes explanation example usingalink=#rrggbbalink="colorname"

sets the color for the currently activeselected link

background="url" the URL where the background image of thedocument resides, the background image

maybe repeated many times

bgcolor=#rrggbbbgcolor="colorname" sets the background color of the document.if bgcolor is omitted The default color iswhite

link="rrggbbb"link="colorname"

sets the color for unvisited links, if omittedthe default color is blue

text="rrggbbb"text="colorname"

sets the color for text, if omitted the default

color is black

vlink="rrggbbb"vlink="colorname"

sets the color for visitedlinks, if omittedthe default color is purple

tag description

size of header text (bold text) having levels h1 to h6. level h1 is the largest size

attributes explanation example usingalign="left"align="center"align="right"align="justify"

specifies the default

horizontal alignment for theheader

left headercenter headerright headerjustify header

8/11/2019 htmlebook

26/95



26

tag description

Divides an HTML document into separate sections. Each section can have adistinct text colors, fonts, alignment etc.

attributes explanation example usingalign="left"align="center"

align="right"align="justify"

specifies the default horizontalalignment for the division

type="text/css"style="text"

specifies kind of style sheetand HTML style properties

this text belongs to this division

tag description

applies style information to text , lets you select any piece of HTML code toapply styles. Styles are scripts that tell how the text is suppose to appear for

headers, paragraphs etc. We will study style sheets later in this course.

attributes explanation example usingalign="left"

align="center"align="right"align="justify"

specifies the default

horizontal alignment for thespan

type="text/css"style="text"

specifies kind of style sheetand HTML style properties

tag description

Acts like a footerfor a HTML document. Includes name, copyright andcontact information. Text between address tags may be displayed in italics.

example copyright (c) 1999 by cstutoring

8/11/2019 htmlebook

27/95



27

WEB page layout format

We have now added the new tags to our WEB page layout format. By following a standard layout

your HTML code will be more organized and easier to read and understand. The sectioncontains information how to display the text content and the section contains the contentto display.

< HTML>

Your title goes here

Your copy write notice and name goes here

Your HTML code goes here

header text

base address

style sheet info

meta info

display content

apply style to text

NON-

DISPLAY

PART

DISPLAY

PART

8/11/2019 htmlebook

28/95



28

EXAMPLE HTML FILE USING ALL THE ABOVE TAGS

The following is an HTML example program using the above document structure tags. The tag specifies that this is an HTML document. The tag specifies the header section thatincludes the and tags. The tag obviously specifies the title of the document

that appears on the top of the WEB browser. The tag gives search information to searchengines to index this WEB site properly. The tag introduces the content we want to displayin a WEB page. The main focus here is in using the and tags. The andtags will be used when we study style scripts later in this lesson. The base tag allows us tohave a base URL like http://www.cstutoring.comfor all our hrefs. This means we can justreference a web page or file by only its name schedules.htmrather than by the full URL addresshttp://www.cstutoring.com/schedules.htm. The tag divides the tagsection into separate divisions and each division can have there own appearance characteristics likecentered text. The tag displays a horizontal line to divide the content from the tag section. The tag acts like a footerin our WEB page to give information about thepeople who wrote the WEB page. The WEB page closes with the and tags.

WEB page example

Ed's WEB Page

click on the airplane to take off
click on "more information"

to send me a message
See you at the airport
Copyright 1999 by "cstutoring"
The Computer Science Tutoring Center

8/11/2019 htmlebook

29/95



29

The example file will appear like this, notice the centered text.

LESSON 2 EXERCISE 1

Add the ,and tags into your WEB page started in lesson 1. Dont worryabout and tags for now we will use these later in next lesson, when we discussstyle sheets.

PRESENTATION CONTROL TAGS

Presentation control tags allow you to specify fonts,styles, and colorsof text and alignment oftext. To use text you need to know what fonts are. Fonts specify how the text will appear.Textfonts are also known as typefaces. There are many fonts, the common ones are Times NewRoman, Courier andArial. The size of a font is known as the point size. This text is written in 10 ptsize. The larger the point sizes the larger the text. Text also has styles like plain, bold or Italics.Common fonts and examples are as follows.

font pt size style exampleTimes New Roman 10 pt plain hello how are you todayCourier 12 pt bold hello how are you todayArial 8 pt italics hello how are you today

A lot of the presentation control tagswill be phased out on the text release of HTML. The termdeprecatedis used to refer to tags that will no longer be used. They are being phased out becauseyou are now suppose to be using style sheets. Even though they are deprecated you still have toknow how to use them, since you will encounter them in HTML code that is already written.

8/11/2019 htmlebook

30/95



30

tag description example using

the enclosed test to appear in bold this text is bold this text is bold

tag description sets base font parameters to be used for any text on the WEB page

attributes explanation example usingbgcolor=#rrggbbbgcolor="colorname"

defines the color for the base font, if

color attribute missing the WEBbrowser picks the color for the base

font

face=font name sets base to font name like Times NewRoman, Courier or Ariel or to one ofthe generic CSS font families like serif,

sans serif etc

size=numbersize=relative size

defines size of base font between 1and 7, a + or before the number

indicates a relativesize to the currentfont size+1 means increase font size by 1 pt

2 means decrease font size by 2 pts

0 will not change the font size

tag description change text display direction, from right to left to left to right or from top

to bottom to bottom to top

attributes explanation example usinglang=language-code specifies language code en English,

fr french, de German

dir=LTRdir=RTL

specifies the text interpretation forlanguages left to right or right to left


increases the text font between the big tags toone size larger than the size set in

bigger text

bigger text


centers any text between the center tags center text center text

8/11/2019 htmlebook

31/95



31

tag description sets the text size, font and color

attributes explanation example usingcolor=#rrggbbcolor="colorname"

defines the color for the font, if colorattribute is missing the WEB browserpicks the color for the font

face=font list sets font to first available font in list likeTimes New Roman, Courier or Arial or to

one of the generic CSS font families likeserif, sans serif etc

size=numbersize=relative size

defines size of font between 1 and 7, a +or before the number indicates arelative size to the current font size

+1 means increase font size by 1 pt2 means decrease font size by 2 pts0 will not change the font size

testing

testing

tag description

draws a horizontal line across the pageattributes explanation example usingalign="left"align="center"align="right"

aligns the horizontal line left , right or centered

noshade draws the outline of the line without filling it in

size=number sets the height of the rule in pixels

width=numberwidth=number%

sets the width of the rule on pixels or as a

percentage of browser window width


all text between tags is italics italic text

italic text


all text between tags appears as strike

through, a fine line 1 pixel wide will bedrawn through the text.

strike through text

strike through text


decreases the text font between the big

tags to one size larger than the size setin

smaller text

smaller text


type writer text , the font between the

tags appear as mono spaced, each fonthas equal spacing (fixed font)

teletype text

teletype text


the text font between the tags appear

as underlined

underlined text underlined text

8/11/2019 htmlebook

32/95



32

Heres an example program that uses all the presentation controltags:

presentation control tags

presentation control tags examples bigger text
center text
italics text
strike through text
smaller text

mono spaced text
bold text
underlined text

LESSON 2 EXERCISE 2

Use the Presentation control tags allow you to specify fonts, styles, and colors of text and alignmentinyour WEB page. You may need to add some more text to use them. Call your file L2ex2.htm.

8/11/2019 htmlebook

33/95



33

TEXT CONTROL TAGS

Text controltags emphasize interpretation of text rather than controlling the appearance of text.Text controltags are different from Presentationcontroltags. Each text control tags take thecommon attribute specified as follows:

common attributes descriptionid=name give an HTML element a unique nameclass=text the element belongs to a specific class of style definitionstyle=text specifies size, color or fonttitle=text defines an advisory title used to display additional helpdir=ltrdir=rtl

indicate direction that text should flow

lang=name specifies language

tag description

set a block of text as quoted from external source. the text is set aside and iscentered

attributes explanation example usingcite=text provides information about source of the

quote, this information is not displayedon the web browser, only in HTML code

information about courses


tag description
forces a line break immediately in a text

attributes explanation example usingclear="left"clear="all"clear="right"clear=none

inserts spaces that aligns the followingtext and floating image


highlight external resource citationfor documents and publications

go to cstutoringcstutoring


emphasis text between tags as italics emphasis text emphasis text

tag description

defines paragraph boundaries, line breaks and carriage returns appear

where the tags areattributes explanation example using

align="left"align="center"align="right"align=justify

sets the alignment of the paragraph

to left, center, right or justify, the

default alignment is left

new paragraph now

new paragraph now

8/11/2019 htmlebook

34/95



34

tag description

forces the browser to reproduce the same formatting , indentation and whitespace that the original text contains (text appears as typed)

attributes explanation example usingwidth=number sets the number of characters per

line preformatted text

preformatted text

tag description

highlight short quotation in texts

attributes explanation example usingcite=text provides information about source of the

quote, this information is not displayed onthe web browser only in HTML code




provide an output type text, use for

displaying a screen output appearance

sample text

sample text


place string emphasis on text. use for

keywords or phrases

strong text strong text


display text as a subscriptthat appears slightlylower than the surrounding text like H20

H 2 OH20


display text as a superscriptthat appears

slightly lower than the surrounding text like 10

410 4

10

4


highlight text used for variable names or

arguments to computer commands

variable text variable text

8/11/2019 htmlebook

35/95



35

Here is an example program using the Text ControlTags

text control tags

text control tags examples Thankyou for your interest in learning HTML
before you can understand something you have to do it first cstutoring emphasise text
put a space over here
put a space over here quotation text
sample text

strong text
subscript H 2 O
superscript 10 4
variable text

The output would look like this:

LESSON 2 EXERCISE 3

Use the text control tags in your web page to affect the appearance of your text. Call your file

L2ex3.htm.

8/11/2019 htmlebook

36/95



36


STYLE SHEETS



Last Update: May 18 2001

ISBN: 0-9730824-0-2

Version: 2.0

INTRODUCTION TO STYLE SHEETS

Style sheets are scripts that let you specify the layout of your HTML elements, such a fonts,colors and indentation. Style Sheets give you precise control over how your HTML elementsappear on your WEB page. Style sheets let you personally set how the WEB browser will display yourWEB page. With the use of style sheets an entire web site can look the same on any browser thatsupports style sheets. When you use Style sheets, the HTML code will handle the documentstructureand contentand the style sheetswill handle the document formand appearance.Without Style sheets the HTML language would need additional tags to handle style. Style sheets area new way to specify how a header, body and paragraph text and font alignment is going to appear.

Without style sheets you would need many additional HTML tags and attributes to specify how the

content of your WEB page is to appear. If you do not use style sheets then the WEB browser willdisplay everything as default. Default is probably okay for the average WEB page, but forsophisticated WEB page you should use style sheets.

using style sheets

In the header section of your html document you specify the styles you want between tag pairs. The style information is placed in the header section because the headercontains information how the WEB page is going to appear. The following is an example of style

sheet information placed between tags:

body {background color:blue}h1 {font:8 pt Times bold}p {font: 12 pt Times; text-align: justify;}

The type=textattribute of the style tag specifying which typestyle sheet we are using. The stylesheet type value is "text/css". Todays standard for defining style sheets is known as CSS1cascade style sheets. Cascade means anyone can attach their own style sheet to a documentusing styles to display the document the way they want.

style rules

The content embedded in the tag's describes how the HTML elements of the WEB page willappear. The content uses style rules. A group of style rules is called a style script. The followingstyle rule states the body of the html document will have a blue background,

body {background color:blue}

8/11/2019 htmlebook

37/95



37

The next style rules states all h1 tags willhave font size 8 pt, and a font facetype of TimesRoman

h1 {font:8 pt TimesRoman bold}

The last style in the style script states all the paragraphs will be 12 pt Times font and the paragraph

text alignment is justify.

p {font: 12 pt Times; text-align: justify;}

Style elements

The main feature of a style sheet is the style definitionor style rule.A style rule is made up of aselector and a style element. Style elements state a style property and a value of thatproperty.

selector {style property : value}

Theselectoris an HTML element type like h1, the style property states what needs to be done likeset the color. The value would be the color itself like green.

h1 { color : green }

Every time a tag is encountered the text between the tags will have the color green.

header text

selectorstyle

property

style

value

header text

style

rule

style element

style element

8/11/2019 htmlebook

38/95



38

style properties

There are over 50 style properties. We can only list the common styles for you.

properties values example usingfont-family Times, Arial,Courier body{font-family: Courier}

font-style normal,italic,oblique h1{font-style: italic}font-variant normal, small-caps h1{font-variant: normal}font-weight normal, bold,bolder,lighter,

100 to 900h1{font-weight: normal}

font-size 12pt smaller,larger 2

50%

p {font-size: 12pt}blockquote {font-size: larger}em{font-size: 2}em{font-size: 50%}

fontfont{12pt small-caps bold larger}

color blue h1{color: blue}

rgb(0,0,255) h1{color: rgb(0,0,255) #0000ff h1{color: #0000ff}

background-color color, transparent h1{background-color: blue}

background-image (image file name)body{background-image: url(background.gif)}

text-align left,right,center,justify p{text-align: center}

CSS IMPLEMENTATION OF STYLE SHEETS

There are many ways to use the style rules:

1. You can list many style values together with a style property

h1 {font:20 pt Arial bold}

The font is 20 pt, Arial and bold

2. You can group multiple style elements or definitions together separated by ;

h1{font-size: 12 pt; line-height: 14 pt; font-family: helvetica}

Eachstyle element listed in the style rule is separated by a ;

3. Any nestedhtml tags inheritsthe style-sheet definitions assigned to the parent tag

8/11/2019 htmlebook

39/95



39

4. You can use the id attributes for most HTML tags to define subsets or alternative sets of tags

defined by style sheets. This way each html element can have a different style.

using an html element id
#p1 { color: blue }
5. You can have context sensitive selectors where you can specify tags within other tags will have adifferent style than those tags all by them selves. The following style script will have headers blueand emphasized text red but, all emphased sections in h1 are blue

h1 {color: blue}em {color: red}

To make emphasizes text be red in the h1 header text we add the following style script. Now we willhave headers blue and emphasized text red.

h1 em {color: red }

You can even change the colors of links.

vlink { color: red } visited link

link {color: blue} link

active {color: lime} active link

visible { color: red } visible link

hover { color: red } hover link

Specifying style sheets

All style rules are placed in a style sheet. The style sheet may be in another file or part of the html

document. If the style sheet is part of the document then it is placed in the header section of the

html document. Here are 4 ways to specify style sheets:

using style script inside the header section1.

tag {style definition}

h1{color:blue}

using the style attribute in an element inside the body section2.

3. using a tag in the header section to link an external style sheet

4. importing a style sheet using the css @import statement

@import "url"@import "stylesheet.css"

8/11/2019 htmlebook

40/95



40

example html code using style scripts

Note all style features may not work on all web browsers. You need to try all web browsers.

1. using style script inside the header section

We put the following style definitions in the header section between tag pairs.

body {background color:lightblue}h1 {font:20 pt Arial bold; color: blue}h1 strong{color red}strong{color green}p {font:16 pt Roman; text-align: justify;}

We make the backgroind color of the document light blue, text between tag pairs have size20 pt Arial bold and color blue. Any strong text in the tag pairs are red. Any other strong textappears green. All paragraphs will have font 16 pt Roman and justified. Here is the complete html

file.

WEB page example

body {background color:lightblue}h1 {font:20 pt Arial bold; color: blue}h1 strong{color red}strong{color green}p {font:16 pt Roman; text-align: justify;}

Ed's WEB Page

click on"more information"

8/11/2019 htmlebook

41/95



41

Here is the html document displayed on a web browser. Notice strong red text in the h1 element and

strong green text in the first paragraph.

2. using the style attribute in an element inside the body section

Here is the same result as using style rules in the header section of the html file. Notice each stylerule is now a style attribute in each html element. For example a paragraph tag has the style

attribute

Here is the complete html file:

WEB page example

Ed's WEB Page


8/11/2019 htmlebook

42/95



42

See you at the airportCopyright 1999 by "cstutoring"

3. using a tag in the header section to link an external style sheet

We put out style rules in a file called stylesheet.css. This can be a relative file a file with the other

html files or an absolute file on another web page. We use a tag to link our web page to the

style resource.

Here is the stylesheet.css file it just includes the style rules inside tags.

body {background color:lightblue}h1 {font:20 pt Arial bold; color: blue}h1 strong{color: red}strong{color: green}p {font:16 pt Roman; text-align: justify;}

Here is the html file it just has a link tag to link to the stylesheete.css file.

WEB page example Ed's WEB Page


8/11/2019 htmlebook

43/95



43

4. importing a style sheet using the css @import statement

The import directive means to include the following file

@import "stylesheet.css"

Here is the stylesheet.css file:

Our html document will now include the stylesheet code using the import directive. Here is the

complete html file.

WEB page example @import "stylesheet.css"

Ed's WEB Page

body {background color:lightblue}h1 {font:20 pt Arial bold; color: blue}h1 strong{color: red}strong{color: green}p {font:16 pt Roman; text-align:justify;}

8/11/2019 htmlebook

44/95



44

using span/ div

The main focus here is in using the ,and tags. The tag lets youspecify text color and fonts for headers, paragraphs, etc. The tag divides the tagsection into separate divisions and each division can have their own appearance characteristics. The

tag is used inside the tags. The tag lets you specify style information to

the text enclosed inside the tag pairs. This allows you to have different text inside different tag sections. The tag displays a horizontal line to divide the content from thetag section. The tag acts like a footer in our WEB page to give informationabout the people who wrote the WEB page. The WEB page closes with the and tags. What is the difference between a

and a ? A

introduces a space wherea describes a section. What is the difference between a and a ? A lets you specify style information inside a division .Here is an example and :

WEB page example

body {background color:lightblue}h1 {font:20 pt Arial bold; color: blue}strong {color: green}h1 strong{color red}p {font:16 pt Roman; text-align: justify;}

Ed's WEB Page


8/11/2019 htmlebook

45/95



45

Here is the result, notice that the text in the is quite different then the textinside the .

using id attributes

You may want the same HTML element to be displayed differently or you may want two paragraphs

to be displayed differently. How can you do this ? One way is to use the idof the html element.

using an html element id

In the style sheet we specify which paragraph by the #and id p1.

#p1 { color: blue }

Here is the html code,. Notice we have a #p1and a #p2the #means locate by the id

WEB page example body {background color:lightblue}

h1 {font:20 pt Arial bold; color: blue}h1 strong{color: red}strong{color: green}#p1 {font:20 pt Roman; text-align: center;}#p2 {font:14 pt Ariel; text-align: justify;}

8/11/2019 htmlebook

46/95



46

Ed's WEB Page



8/11/2019 htmlebook

47/95



47

using classes

Alternatively you can specify a classof styles, you list a class name with the html elementtoindicate that the element belongs to a class of styles. You first specify a class to an HTML element.



The first paragraph belongs to class p1, the second paragraph belongs to class p2. In the stylesheet you indicate which HTML element is to receive the styles by specifying the HTML element adot and the class name.

p.p1 {font:20 pt Roman; text-align: center;}

p.p2 {font:14 pt Ariel; text-align: justify;}

The dot says apply the style to this HTML Element specified by the class name.

p . p1

Using classesis very similar to using an id. The class lets you distinguish which HTML is to receivethe style rather than all of the same type. Here is the complete html code using classes:

WEB page example

body {background color:lightblue}h1 {font:20 pt Arial bold; color: blue}h1 strong{color: red}

strong{color: green}p.p1 {font:20 pt Roman; text-align: center;}p.p2 {font:14 pt Ariel; text-align: justify;}

HTML element

dot

class

8/11/2019 htmlebook

48/95

8/11/2019 htmlebook

49/95



49





ISBN: 0-9730824-0-2Version: 2.0

LESSON 4 HTML LISTS, ENTITIES AND LINKS

LISTS

Lists allow you to organize sequential list of sentences by an identification mark that refers to a

common topic. The common topic is the header of the list. A list is made up of lines of words. Eachline is known as an item of the list. The identification mark may be a number or a round circlecalled a bullet. The following are 2 examples of lists:

Type of lists that you can make using HTML are:

list descriptionunordered bulleted list of itemsordered each item in the list is numbered sequentially in order of appearancedirectory lists of short lines

menu each list item is a one line phrasedefinition collection of definition items in a list

We will now discuss and give an example of each list:

UNORDERED LIST

Unordered list tags:

topics

1.

item1

2. item2

3.

item3

topics

item 1

item 2

item 3

The Unordered List starts each item inthe list with a bullet. The Unordered list

starts wilth the tag. Each item islisted with a tag. The unordered listends with the tag.

today's topics airplane lands in runway passengers get off airplane taxis pick up passengers

bulletsnumbers

8/11/2019 htmlebook

50/95



50

tag description Unordered list produce bullet lists of items

attributes explanationcompact reduce line leading and spacingtype="disc" filled circular shape bullettype="square" filled square shape bullet

type="circle" circular outline shape bullet

tag description list item

attributes explanationtype="disc" filled circular shape bullettype="square" filled square shape bullettype="circle" circular outline shape bullet

ORDERED LIST

Ordered list tags:

tag description creates an ordered list listing elements in ordered

attributes explanationtype="1" enumerate numbers

type="a" enumerate lower case letterstype="A" enumerate upper case letterstype="i" enumerate lower case roman numeralstype=I" enumerate upper case roman numeralsvalue="number" change count of ordered lists as they progress

Each tem in an ordered list STARTS with a

sequential number A, B ,C or A letter

1,2,3. An ordered list starts with the tag. The tag has attributes tospecify lower or uppercase numbers etc.Each list item starts with a tag. Theordered list ends with the tag.

today's topics airpane lands in runway

passengers get off airplane taxis pick up passengers

8/11/2019 htmlebook

51/95



51

Ordered list tags continued:

tag description list item

attributes explanationtype="1" enumerate numbers

type="a" enumerate lower case letterstype="A" enumerate lower case letterstype="i" enumerate upper case letterstype=I" enumerate roman numeralsvalue="number" change count of ordered lists as they progress

DIRECTORY LIST

Directory List tags:

tag description enclose lists of short elements

list item

MENU LIST

menu list tags:

The Directory list is used to list short

lines. The lines are not indentedas inthe other lists. The directory list starts

with the tag. Each item is listed

with the tag. The directory list endswith the tag. Notice noindentation. today's topics airplane lands in runway passengers get off airplane taxis pick up passengers

The menu list is used to display a menu

where each list item is a one-line phrase.

The menu list starts with the tag.each menu item is listed with the tag.The menu ends with the tag.

today's topics airplane lands in runway passengers get off airplane taxis pick up passengers< menu>

8/11/2019 htmlebook

52/95



52

tag description

8/11/2019 htmlebook

53/95



53

NESTED LISTS

Nested lists are lists inside lists. Nested lists are used for hierarchical listings of information such as

table of contents, help menus etc.

today's topics airplane lands in runway passengers get off airplane taxis pick up passengers please choose desired hotel budget hotels flea bag resort

LESSON4 EXERCISE 1

Type in or copy all the list example programs and see them work. Try changing and adding theattributes and see the effect. Call your file L4ex1.htm.

LESSON4 EXERCISE 2

Add a nested list and a definition list to your web page started in previous lessons. Call your file

L4ex2.htm. You should get something like this:

Unordered list

menu list

8/11/2019 htmlebook

54/95



54

ENTITIES

Entities are special characters and numbers or text to represent the set of printable characters.

Entities are made up of these special characters:

special

character

name description

& Ampersand code for character entity# pound sign number that corresponds; semicolon end of entity

There are two types of entities for representing the set of printable characters.

entity description example charactertext text that represent other

characters" quotation mark "

numeric collection of numbers thatrepresent characters

" quotation mark "

The &introduces am entity. The quotrepresents a quotation mark '. The #says the entity will berepresents by a number. 34is the number representing the quotation mark '. Most people use thetext representation for entities. Unfortunately each character cannot be represented by a text entity.

Common entities

The following table list some of the common entities that you need to use. You will find theseidentities everywhere in a HTML file. Especially the &nbsp it stands for no breaking space whichmeans add a space but dont break it on to another line. Text entities may need to be lowercase

to work on all WEB browsers.

char character numeric descriptionA-Z A to Z upper case letters

a-z a to z lower case letters0-9 0 to 9 numbers

em space

en space

horizontal tab

line fed or new line

space

! ! exclamation mark " " quotation mark# # number$ $ dollar% % percent

& & & ampersand ' apostrophe

( ( left parenthesis) ) right parenthesis* * asterisk+ + plus, , comma- - hyphen

8/11/2019 htmlebook

55/95



55

char character numeric description. . period/ / slash: : colon; ; semicolon< < < less than

= = equals> > > greater than? ? question mark@ @ at[ [ left square bracket\ \ backslash] ] right square bracket^ ^ caret

_ _ horizontal bar` ` grave accent{ { left curly bracket| | vertical bar

} } right curly bracket~ ~ tilde

no breaking space

copyright registered trademark

Using entities

Entities are used a lot in web pages. The most common one you see is the no breakingspace, the copyright and the registered trademark . The is mostly usedfor alignment in text.

testing entities

Copyright registered trademark

8/11/2019 htmlebook

56/95



56

LESSON4 EXERCISE 3

Add entities to your tag section in your web page especially use the copy write notice. Call your file L4ex1.htm.

ANCHORS AND LINKS

Using anchorsand linksyou can jump to others areas of a web page. Anchorsare the place whereyou are jumping to and linksspecify where you want to jump to. Anchors are identified by the tag are used to provide the spot where to jump to. Anchor's also house the jump links.Using the tag for anchor and a link may seem confusing at first but makes sense when you start using it.The tags provides a jump link by using the hrefattribute and an anchor by using the nameattribute. There are two types of document linking: intra document linking and inter documentlinking.

intra document linking

Intradocument linkingprovides viewers with links to specific parts within a particular web page. Byclicking on a link you can jump to a particular spot in the current web page. There are two steps inmaking a intradocument link. There are two steps involved:

Step one: identify a particular spot on your page with an anchor.

Step two:enable a user to go to that spot by clicking on a linkstored in another anchor.

The web page will now display the content where the top anchor is.

anchor (where you are jumping to )

anchor containing a link where to jump to

8/11/2019 htmlebook

57/95



57

Table of Contents links TOC

Intra document links are great for creating table of contents that jump to other content areas in a

web page. You must remember to make a link that will jump back to your table of contents. Whenthe user clicks on Section1 link, the screen jumps and shows section 1 as the top line. When theuser clicks on the backlink the screen goes back to the table of contents selection area of the WEB

page.

table of contents

Section 1
Section 2

Section 3

section 1

this is section 1

back

section 2

this is section 2

back

section 3

this is section 3

back

8/11/2019 htmlebook

58/95



58

LESSON4 EXERCISE 4

Add a table of contents to your web page, call your file L4Ex4.htm

inter document linking

Inter document linking sends viewer from one page to another page in the current web site. In this

situation the tag contains the linkto the other web page.

*

intra document linking and inter document linking

Intra document linking and inter document linking may be combined so that you can go to a

specified area in another web page off the current web site.

Now the viewer will be directed to the top anchor in the schedules web page of the current web site.

8/11/2019 htmlebook

59/95



59

Jump pages

A jump page refers to a web page that has a list of URL's to other web pages.

texttext

texttext

You must specify the full URL.

www.cstutoring.comwww.cstutor.comwww.cscourses.comwww.csprogramming.com

When you link to other web pages in other web sites you have know way of getting back, unless the

other web site has a link back to you.

LESSON4 EXERCISE 5

Add a jump page to your web page, jump to your favorite WEB pages. Call your file L4Ex5.htm

SETTING COLORS OF LINKS

The colors of links are specified as attributers of the tag not in the tag. You can setthe color of the active link alinkthe unvisited links linkand the visited links vlink. Having differentcolors indicates to the viewers which links have been visited, which have not been visited and the

current visited link. The default colors are blue for unvisited links, purple for visited links and

greenfor current active link.

attributes explanation example usingalink=#rrggbbalink="colorname"

sets the color for the currently activeselected link (link you just clicked on)

link="rrggbbb"link="colorname"

sets the color for unvisited links thedefault color is blue.(links you have notclicked on)

vlink="rrggbbb"vlink="colorname"

sets the color for visitedlinks, thedefault color is purple.(links that you have

previously clicked on)

8/11/2019 htmlebook

60/95



60





ISBN: 0-9730824-0-2Version: 2.0

LESSON 5 TABLES

Introduction to tables

Tables are used to organize content in your web page. Tables are like grids having rows andcolumns. With tables you can make separate areas to put text and images in. Tables make it mucheasier to neatly position text and images. You use tables to replace spaces and tabs and to positiontext and images in a particular areas of your web page.

simple table

To make a table you start with the start tag. To start a row you use the start (tablerow)tag. Within each row you specify the columns or cells you want, with the(table data)tag and end the cell with the tag. The row ends with the tag and the table ends withthe tag. A table cell will accept any tag that can be included in the tag. You canput text, images and even other tables in a table cell. The following code makes a 2 by 4 table with

no borders.

row 1 column 1

row 1 column 2 row 2 column 1 row 2 column 2

LESSON 5 EXERCISE 1

Type the above table into a separate HTML file. Call your file L5ex1.htm.

table captions

A table needs a caption textto describe what the table does. The tag pairs places textabove or below a table.

text

super table

The caption tags accept the align attributesalign = left, align = centeroralign = right.

8/11/2019 htmlebook

61/95



61

column headers

All columns need labels called headers to tell what the table columns represent. Column headershave default alignment of center. The table header tag pairs are used to label the tablecolumns in sequence using the table rowtag pairs.

column 1 column 2

table borders

A table also needs a borderfor good definition. The border=number attribute of the tag specifies the width of the border in pixels around the table.

If you do not want a border around your table specify number 0.

If you do not specify a number the border defaults to 1

Lets put it all together now. Notice the tags are right after the tag and thecolumn headers are listed as separate rows apart from and before the cell rows. Notice, the caption

is not enclosed by the border.

super table column 1 column 2 row 1 column 1 row 1 column 2 row 1 column 1 row 1 column 2

8/11/2019 htmlebook

62/95



62

row headers

By including a table header tag in each row with the table data tag allows you to have aheaderfor each row rather than for each column.

super table row1 column 1 column 2 row 2 column 1 column 2

LESSON 5 EXERCISE 2

Add a caption, border and row and column headers to a 2 by 2 table in a HTML file. Call your HTML

file L5ex2.htm

Table tags

Lets summarize the table tags we have used so far:

tag name description attributes table tag create a table align, border, cellpadding, cellspacing, width

table row create a row align and valign table data create a cell align,bgcolor,colspan,height,nowrap,rowspan,

valign, width

table header label for column align (default center alignment)

caption label table align

Table attributes

The tags have the following attributes:attribute values description used with tags

align LEFT

CENTERRIGHT

controls the horizontal table alignment and its

contents. (default left)

border number Specifies the width of the border in pixels aroundthe table. If you do not want a border around your table

specify number 0. if you do not specify a number the border defaults

t o 1

8/11/2019 htmlebook

63/95



63

attribute values description used with tagscellpadding number Specifies the amount of space between a cell

perimeter and its contents. This has the effect of

increasing the dimensions of the cell by making it

larger or smaller. The default value is 1 pixel.

cellspacing number Specifies the amount of space inserted betweenindividual cells in a table. The cells remain the same

size except the distance between cells increases.The default value is 1 pixel

width number orpercent%

sets the width of the table in absolute terms

or a percentage of the browsers display area

height number orpercent%

sets the height of a cell in absolute termsor a percentage of the browsers display area

valign topbottommiddle

vertical alignment align the contents of the table to

the top, middle or bottom of a cell. The default ismiddle

nowrap try to display all the text for a particular cell on asingle line

colspan number Stops tables from being symmetrical. If 1 row has 4columns and the next row has only 3 columns then

the web browse will add the fourth column to the

second row. To have a third column be the width of2 rows then we can use column span of 2 columnsfor the third column of the second row

rowspan number similar to colspan with rowspan we can force a rowto span 2 columns

bgcolor color change the cells background color

8/11/2019 htmlebook

64/95



64

USING TABLE ATTRIBUTES

using cellpadding

Cellpaddingspecifies the amount of spacebetween a cells perimeterand its content. This hasthe effect of increasing the dimensions of the cell by making it larger or smaller. We can add a cell

padding of 10 pixels to our last example and see the effect. Notice there is now more paddingbetween the text and cell walls, the cells are much larger now

using cellspacing

Cell spacing determines the amount of space betweenindividual cellsin a table. The cells remainthe same size except the distance between cells increases. We can add a cell spacing of 10 pixels to

our example program 2 and see the effect. You will notice the distance between cells has increased.

super table column 1 column 2 row 1 column 1 row 1 column 2

row 1 column 1 row 1 column 2

super table column 1 column 2 row 1 column 1 row 1 column 2

row 1 column 1 row 1 column 2

8/11/2019 htmlebook

65/95



65

using cellpadding and cellspacing

Combining cell padding and cell spacing will combine the two effects, changing the size of the cells

and changing the distance between the cells. You will notice the cells are much larger and thedistance between cells is much larger also.

LESSON 5 EXERCISE 3

Add cell padding and cell spacing to your table of the last exercise. Change the cells background

color to a light color using bgcoloron the tags. Change the color of the table use bgcoloronthe tag if doesn't work try the tag. Experiment with different border widths or noborder to give impressive results. Call your HTML file L5Ex3.htm

using width and height

The width attribute sets the width of the table in pixels

or as a percentageof the web browser window size.

The width and height attributes can change the width and height of individual cells. If the width andheight of a cell is not set then the web browser calculates the width and height using defaultcalculated values depending ion the web browser window size and table size. When you change the

height of one cell all cells in that row also change their height. If more than one cell specifies the

height in one row then the height of all the cells of that row will be the cell of the greater height.When you c

Documents

htmlebook