BASIC WEBPAGE DEVELOPMENT

Contents
* Introduction to HTML
* Simple formatting tags
* Logical formatting tags
* Paragraph and line breaks
* Headings and rulers
* Insertion of in-line images
* A background image
* Creating a list of items
* Hyper text links
* URL
* Literal copy and centering of text
* Inserting an e-mail address
   

Index This button brings you back to this Index.

Index Introduction to HTML

HTML (HyperText Markup Language) is a markup language which consists of commands called 'tags', embedded in the text of a document. The browser reading the document interprets these markup tags to help format the document for display to a reader. (Certain decisions about layout are made by the browser, so sometimes you may not be able to control the exact appearance of the output.) There are a wide range of web browsers, such as Netscape and Mosaic, available for a wide variety of computer systems.

Factors affecting the layout and presentation include:

Browsers ignore extra spaces and new lines between words and markup tags when reading the document. Thus, the following three text fragments will be formatted identically.

Fragment 1 Fragment 2 Fragment 3
The browser will ignore
new lines and extra
spaces in the text. 		The browser will
ignore new lines and
extra spaces in the text. 		The browser will
ignore new lines and
extra    spaces in the text.

to produce the following:

The browser will ignore new lines and extra spaces in the text.

The HTML language is made up of tags such as <B>. That tag requests text that follows to be in bold type. This bolding is turned off by the inverse markup tag </B>.

In writing a tag, the case of the letters in the tag name is unimportant so that <B> and <b> represent the same tag.

The basic layout of an HTML document and the resultant information displayed by a browser such as Netscape is shown below:

Displayed by browser HTML markup required
An example of a simple web page. 
 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
 <HTML>
  <HEAD>
   <TITLE>Title of the web page </TITLE>
  </HEAD>
  <BODY>
  An example of a simple
  <B>web</B>
  page.
  </BODY>
 </HTML>

The tags used are:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML //EN">
Informs the browser that this is an HTML document. This is an SGML tag to identify the version of HTML being used, in this case just HTML. Version 3 browsers (e.g. Netscape) are happy about this pretense that this document is just plain HTML.
<HTML> </HTML>
Defines the extent of the HTML markup text
<HEAD> </HEAD>
Contains descriptions of the HTML page. This meta information is not displayed as part of the web page.
<TITLE> </TITLE>
Describes the title of the page. This description is usually displayed by the browser as the title of the window in which the web page is displayed. This information is also used by some search engines to compile an index of web pages.
<BODY> </BODY>
Delimits the body of the web page. In the body is the text to be displayed as well as HTML markup tags to hint at the format of the text.
<B> </B>
Displays the enclosed text in a bold typeface.

Note:
The tags can be written in upper-case or a mixture of upper- and lower-case or just lower-case. For example, <HTML>, <HtMl> and <html> all represent the same tag.

Index Simple formatting tags

The following are some of the simple formatting tags available in HTML.

Formatted text HTML markup required
The text is bolded. 
 The <B>text</B> is bolded.
The text is italicized. 
 The <I>text</I> is italicized.
The text is in a teletype font. 
 The <TT>text</TT> is in a teletype font.
The text is 2 sizes larger. The size attribute may also be an absolute value in the range 1 .. 7. 
 The <FONT SIZE=+2>text</FONT>
 is 2 sizes larger.
 The size attribute may also
 be an absolute value in the range 1 .. 7.
Use the e-mail address
[email protected]
to contact me. 
 Use the e-mail address
 <ADDRESS>[email protected];/ADDRESS>
 to contact me.

Note:
How the formatting is turned off by the inverse of the HTML formatting tag.

Index Logical formatting tags

The following are some of the logical formatting tags in HTML. These should be used to describe a logical unit of your document.

Formatted text HTML markup required
The following is a citation. 
 The following is 
<CITE>a citation.</CITE>
Represents computer code 
 <CODE>
 Represents computer code
 </CODE>
A sequence of literal characters 
 A sequence of
 <SAMP>literal characters</SAMP>
Note:
This is a blockquote of some text 
 Note:<BLOCKQUOTE>This is a
 blockquote of some text
 </BLOCKQUOTE>
The following is a definition 
 The following is 
<DFN>a definition</DFN>
The following text is emphasized. 
 The following <EM>text</EM>
 is emphasized.
keyboard characters. 
 <KBD>keyboard characters</KBD>
The following text is strongly emphasized 
 The following <STRONG>text</STRONG>
 is strongly emphasized
The following name is a program variable 
 The following <VAR>name</VAR>
 is a program variable

Index Paragraph and line break

A new paragraph is started with the <P> tag, and may be optionally terminated with the inverse paragraph tag </P>. However, it is usual not to specify the inverse paragraph tag </P>

A line break is created by the <BR> tag, which has no inverse tag.

Formatted text HTML markup required
Last sentence of a paragraph

The first line of a new paragraph. 

 Last sentence of a paragraph
 <P>
 The first line of a new paragraph.
A line of text.
On a new line. 
 A line of text.
 <BR>
 On a new line.

Index Headings and rulers

A heading in the text is created with the <H1> tag. There are in fact six heading tags. <H1> is the largest and <H6> the smallest.

Formatted text HTML markup required

An H1 heading

 
 <H1>An H1 heading</H1>

An H3 heading

 
 <H3>An H3 heading</H3>
An H6 heading
 
 <H6>An H6 heading</H6>

A heading tag generates line break(s) before and after the heading text. For example:

Formatted text HTML markup required
Just before the heading.

An H4 heading

Just after the heading. 
 Just before the heading.
 <H4>An H4 heading</H4>
 Just after the heading.

A horizontal ruler across the page can be created with the <HR> tag. For example:

Formatted text HTML markup required
End of a section
New section 
 End of a section<HR>New section
Only 40% of width
New section 
 Only 40% of width<HR WIDTH=40%>New section
The size of the ruler
New section 
 The size of the ruler<HR SIZE=10>New section

Note:
The size of the ruler is by default specified in pixels.

Index Insertion of in-line images

Images, as well as text, may be inserted into HTML documents. HTML images may be in any of several formats, though the main ones used are GIF and JPEG. To cope with limited bandwidth, JPEG with its high compression of picture data and its ability to represent 24 bit color images, is the best to use. Even though the JPEG compression does lose come accuracy, the degradation of picture quality is not very noticeable to the human eye.

However, if the picture is very small or a graphical image then the GIF format may be the best.

Inserted image HTML markup required
computerjpeg 
 <IMG SRC="../../GIF/computer.jpg"
      ALT="computer" ALIGN=TOP>jpeg
A gif image with a transparent background. 
 A gif image
 <IMG SRC="../../GIF/sdot.gif" ALIGN=TOP>
 with a transparent background
computer Text can be made to flow around an image on the left hand side by using the attribute ALIGN=RIGHT. 
 <IMG SRC="../../GIF/computer.jpg"
      ALT="computer" ALIGN=RIGHT>
 Text can be made to flow around
 an image on the left hand side
 by using the attribute
 ALIGN=RIGHT.

Note:
There are many graphic editing programs which allow you to specify that one of the colors of a gif image is transparent when displayed by a browser. For example, LView Pro 1.B2 and Paint Shop Pro 3.11, allow the creation of a transparent color in a gif image. However, in order to do this, the version used for the saved gif image must be 89a.

An image may be used as the displayed item for a hypertext link. For example: <A HREF="..."> <IMG SRC="..."> </A>.

The attributes of the <IMG> tag include:

ALT="mas"
Causes mas to be displayed instead of the image. This will occur if the browser can not display images or the display of images has been suppressed.
ALIGN=TOP
Causes any following text to be displayed aligned with the top of the picture.
ALIGN=BOTTOM.
Causes any following text to be displayed aligned with the bottom of the picture.
ALIGN=MIDDLE.
Causes any following text to be displayed aligned with the middle of the picture.
ALIGN=LEFT
Cause the image to be left aligned on the page. Text is flowed around the image on the right hand side.
ALIGN=RIGHT
Cause the image to be right aligned on the page. Text is flowed around the image on the left hand side.

Index Insertion of a background image

The document may be given a background image. The selected image is tiled across the document and then the text of the document is written over the image(s). It is thus important to choose a background image that will not be too distracting for the reader. The background image is achieved by adding a background attribute to the BODY markup tag. For example:

<BODY BACKGROUND="../../GIF/backgrd.gif">

Index Creating a list of items

There are several types of list, an un-ordered list can be created by the following markup:

Formatted text HTML markup required
  • Item one of list
  • Item two of list 
 <UL>
 <LI>Item one of list
 <LI>Item two of list
 </UL>

An ordered list is similar to an un-ordered list, except that each entry is consecutively numbered.

Formatted text HTML markup required
  1. Item one of list
  2. Item two of list 
 <OL>
 <LI>Item one of list
 <LI>Item two of list
 </OL>

A definition list allows a list with a backward hanging indent to be created.

Formatted text HTML markup required
Definition tag.
Text of the definition list. Which may stretch over several lines.
Another definition tag.
Text of the definition list. 
  <DL>
   <DT>
   Definition tag.
   <DD>
   Text of the definition list.
   Which may stretch over several
   lines.
   <DT>
   Another definition tag.
   <DD>
   Text of the definition list.
  </DL>

Note:
It is a common practice for the definition tag with an image or even have it prefixed with an image.

Index Hyper text links

A hyper text link allows a browser of the document to navigate either: to a new point in the document or to navigate to a different document. A named point in a document is specified with an anchor tag which has the attribute NAME. For example:

Formatted text HTML markup required
Here <A NAME="marker"> Here </A>

Note:
There does not need to be any text to visibly name the anchor point.

To effect a transfer to a named anchor point, the HREF form of the anchor tag is used. For example:

Formatted text HTML markup required
Transfer to anchor <A HREF="#marker"> Transfer to anchor </A>

The # before the name of the hypertext link tells the browser that the link is to a named point in a document. As no document name is specified before the # the hypertext link is to a point in the current document. It is usual for the browser to visibly highlight the hypertext link.

Hypertext links may also link to other documents, in which case the HREF component names the document. If the file is held on another machine then a URL (Uniform Resource Locator) is used to describe the location of the document. For example:

Hyper text link to the file
file.html		 Hyper text link to the file
file.html held on another machine using an URL
<A HREF="file.html"> Name </A> <A HREF="https://host/file.html"> Name </A>

To go to a named point in a file the format of the anchor is:

Hyper text link to the file
file.html at point mark		 Hyper text link to the file
file.html at point mark held on another machine using an URL
<A HREF="file.html#mark"> Name </A> <A HREF="https://host/file.html#mark"> Name </A>

Index URL (Uniform Resource Locator)

The URL is used to specify the location of a file held on a remote machine. This is composed of several distinct components. For example, the URL https://host/file.html is composed of the following components.

http
The protocol that is to be used to access the file. In this case the HyperText Transfer Protocol. There are other protocols, but they are used infrequently.
host
The name of the machine, this can be either a symbol name such as www.unipress.com or a numeric IP (Internet Protocol) address such as 193.200.1.1.
file.html
The path name of the file to which the hypertext link is to be made. This is relative to the base directory in which web pages are held. The location of this directory htdocs is defined by the person who has set up the web server.

Unix based web servers allow a convenient shortcut to accessing files placed in the directory public_html in the user's home directory. For example, the file home.html placed in the directory public_html in mas's home directory on the server machine www.unipress.com, can be accessed with the URL https://www.unipress.com/~mas/home.html

In creating the URL the characters space, =, +, <, >, %, ", /, and ? should not be used. If you do need to include these characters then represent them by the % symbol followed by the hexadecimal value of the character. The space character however, can also be represented by the character +. For example, https://www.unipress.com/%25.html represents the URL https://www.unipress.com/%.html.

Other access protocols can be specified by an URL. For example, to access files via the FTP (File Transfer Protocol) an URL of the form:

ftp://ftp.example.edu/pub/html

is used. This specifies that a link to the file/directory pub/html on the machine ftp.example.edu should be made. If pub/html is a directory the viewer is presented with a list of files in the directory, otherwise the file will be displayed/transferred to you.

The full specification for an URL is:

Protocol Format Notes
HTTP https://host[:port]/path -
FTP ftp://[username[:password]@host/path If no username is specified the user anonymous is used.
Gopher gopher://host[:port]/[type[item]] -

Note:
In describing the format of an URL items enclosed in [ ]'s are optional.

Index Literal copy and centering of text

Text can be copied literally by using the <PRE> tag. However, any HTML tags in the text will be processed. For example:

Formatted text HTML markup required 
    *
   ***
  *****
 
 <PRE>
    *
   *<B>*<B>*
  *****
 </PRE>

Note:
The copied text is formatted using a non proportional font to preserve the layout.

Any text to be centered is enclosed between the tags <CENTER> and </CENTER>.

Formatted text HTML markup required
A line of normally formatted text.
Some lines of text
that are centered 
 A line of normally formatted text.
 <CENTER>
 Some lines of text
 <BR>
 that are centered
 </CENTER>

Index Inserting an e-mail address

An e-mail address may be inserted into the document using a special form of the anchor markup tag. A user selecting this will be presented with a form on which to prepare their message for eventual sending in this case to the e-mail address:

[email protected]

Formatted text HTML markup required
Mail me 
 <A HREF="mailto:[email protected]">Mail me</A>

Of course your browser has to support this facility.




Links:

  • HTML tutorial
  • HTML Overview

    Quiz And Assignment

    Click here to begin quiz.

    Click here to receive assignment.

    Sources on the lesson



    Return to the Multimedia Course Outline and Syllabus
    Return to lessons