| |||||||||||||||||||||
|
Home page |
|
Basic HTML |
|
Forms |
|
CGI scripts |
|
Frames |
|
System |
|
| ||||||||
|
Basic HTML formatting tags |
Contents |
Introduction to HTML |
The browser thus displays the document with regard to features that the viewer selects either explicitly or implicitly. Factors affecting the layout and presentation include:
The browser, ignores 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 markup language is made up of tags such as <B> which 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:
Simple formatting tags |
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 and the text is in red. The size attribute may also be an absolute value in the range 1 .. 7. | The <FONT SIZE="+2" COLOR="RED">text</FONT> is 2 sizes larger and the text is in red. The size attribute may also be an absolute value in the range 1 .. 7. |
Use the e-mail address M.A.Smith at brighton dot ac dot ukto contact me. | Use the e-mail address <ADDRESS>M.A.Smith at brighton dot ac dot uk</ADDRESS> to contact me. |
Colour |
Specifying a colour by name |
The formatting tag <FONT> with the attribute COLOR="red" is used to change selectively the colour of the text of the document to red. This temporary colour change terminates on the </FONT> tag.
Formatted text | HTML markup required |
---|---|
* Red* Green* Blue* | * <FONT COLOR="red">Red</FONT>* <FONT COLOR="green">Green</FONT>* <FONT COLOR="blue">Blue</FONT>* |
Possible values for a named colour are: black [###], maroon [###], green [###], olive [###], navy [###], purple [###], teal [###], gray [###], silver [###], red [###], lime [###], yellow [###], blue [###], fuchsia [###], aqua [###], white [###].
Specifying a colour by RGB value |
A general colour is specified in terms of the three primary colours red, blue and green. Each primary colour is defined as a two digit Hexadecimal number that representing the strength of that primary colour.
In this specification hexadecimal 00 means 0% of the colour and hexadecimal FF means 100% of the colour.
For example, to specify red the hexadecimal number FF0000 is used. In this number:
Formatted text | HTML markup required |
---|---|
* Red* Green* Blue* | * <FONT COLOR="#FF0000">Red</FONT>* <FONT COLOR="#00FF00">Green</FONT>* <FONT COLOR="#0000FF">Blue</FONT>* |
* Yellow* White* Purple* | * <FONT COLOR="#FFFF00">Yellow</FONT>* <FONT COLOR="#FFFFFF">White</FONT>* <FONT COLOR="#FF00FF">Purple</FONT>* |
Global colours of the text, links, etc. |
Additional attributes to the tag <BODY> allow a user to specify global colouring of the web page. Attributes of this tag include:
For example, to create a web page with a background colour of green normal text in red and links in blue is specified with the following attributes to the tag <BODY>
<BODY BGCOLOR="#00FF00" TEXT="red" LINK="#0000FF"> |
The document may also 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="backgrd.jpg"> |
Remember, the ability to display the colour depends on the colour depth of the monitor used by the viewer. Many people will only be able to display 256 distinct colours, and some will only have a black and white display.
For viewers with a monitor with a limited colour depth other colours will be displayed by dithering. A process which simulates the un-displayable colour, by creating a pattern of dots in colours which when viewed at a distance will fool the eye into seeing them as a single new colour. Unfortunately this reduces the resolution of the displayed area.
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. The formatting of this logical unit may in some cases be the same as produced by other formatting tags. Remember, the tags specify logical units of the document, software other than the web browser may need this information.
Formatted text | HTML markup required |
---|---|
The following is a citation. | The following is |
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 |
The following text is emphasized. | The following <EM>text</EM> |
keyboard characters. | <KBD>keyboard characters</KBD> |
The following text is strongly emphasized | The following <STRONG>text</STRONG> |
The following name is a program variable | The following <VAR>name</VAR> |
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. |
Headings and rulers |
A heading in the text is created with the <H1> tag. There are in fact six heading tags <H1> the largest to <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 headingJust after the heading. |
Just before the heading. <H4>An H4 heading</H4> Just after the heading. |
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 |
Insertion of in-line images |
As well as text, images may be inserted into the document. An image may be held in several formats, though the main ones used are GIF and JPEG. Due to limited bandwidth, JPEG with its high compression of picture data and its ability to represent 24 bit colour images is the best to use. Even though the JPEG compression is lossy 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 |
---|---|
jpeg | <IMG SRC="image.jpg" ALT="image" ALIGN=TOP>jpeg |
A gif image with a transparent background. | A gif image <IMG SRC="sdot.gif" ALIGN=TOP> with a transparent background |
Text can be made to flow around an image on the left hand side by using the attribute ALIGN=RIGHT. | <IMG SRC="image.jpg" ALT="mas" ALIGN=RIGHT> Text can be made to flow around an image on the left hand side by using the attribute |
The image size can also be specified using HEIGHT and WIDTH. This will speed up the construction of the page on the web browser. | <IMG SRC="image.jpg" ALT="image" ALIGN=LEFT HEIGHT=105 WIDTH=140> The image size can also be specified using HEIGHT and WIDTH. This will speed up the construction of the page on the web browser. ALIGN=RIGHT. |
This can also be used to distort the picture. |
<IMG SRC="image.jpg" ALT="mas" HEIGHT=20 WIDTH=250> <BR> This can also be used to distort the picture. |
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:
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="backgrd.jpg"> |
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 |
---|---|
|
<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 |
---|---|
|
<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 |
---|---|
|
<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> |
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> |
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="http://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="http://host/file.html#mark"> Name </A> |
URL (Uniform Resource Locator) |
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 puck.it.brighton.ac.uk, can be accessed with the URL http://cmis.mis.brighton.ac.uk/~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, http://cmis.mis.brighton.ac.uk/%25.html represents the URL http://cmis.mis.brighton.ac.uk/%.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.brighton.ac.uk/pub/mas/ada95 |
is used. This specifies that a link to the file/directory mas/ada95 on the machine ftp.brighton.ac.uk should be made. If mas/ada95 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 | http://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]] | - |
Tables |
Single cell |
A table is created using the <TABLE> markup tag. The simplest table consists of a single data cell. The markup <TD> defines the start of a table data cell.
The status of the tag </TD> is somewhat unclear. Netscape 1.1 requires the end of table data cell tag </TD> to terminate the cell in certain circumstances. Other browsers sense the end of the cell by the </TABLE> or other formatting tag. The tag </TD> is not defined in the HTML specification. As unrecognized tags are ignored by a browser putting the tag in does no harm.
Formatted text | HTML markup required |
|
---|---|---|
|
<TABLE BORDER CELLPADDING=2> <TD> Text in a table </TD> </TABLE> |
The following extra attributes can be added to a TABLE tag:
The following extra components can be added to a TD tag:
Formatted text | HTML markup required |
|
---|---|---|
|
<TABLE BORDER CELLPADDING=2 BGCOLOR=aqua> <TD> Text in a table </TD> </TABLE> |
Row(s) of cells |
Formatted text | HTML markup required |
||
---|---|---|---|
|
<TABLE BORDER CELLPADDING=2> <TD> Data cell 1 </TD> <TD> Data cell 2 </TD> </TABLE> |
Formatted text | HTML markup required |
||||
---|---|---|---|---|---|
|
<TABLE BORDER CELLPADDING=2> <TR> <TD> Data cell 1 </TD> <TD> Data cell 2 </TD> </TR> <TR> <TD> Data cell 3 </TD> <TD> Data cell 4 </TD> </TR> </TABLE> |
Heading to a column |
The tag <TH> may be used instead of <TD> if the cell is a header to a column of cells. For example:
Formatted text | HTML markup required | ||||
---|---|---|---|---|---|
|
<TABLE BORDER CELLPADDING=2> <TR> <TH ALIGN=LEFT> Mnemonic</TH> <TH ALIGN=LEFT> Expansion </TH> </TR> <TR> <TD> HTML</TD> <TD> Hyper Text<BR>Markup Language</TD> </TR> </TABLE> |
Spanning rows and columns |
The attributes ROWSPAN and COLSPAN of the HTML tags <TD> and <TH> are used to form data cells which span more than one row or column. For example:
Formatted text | HTML markup required | ||||||||
---|---|---|---|---|---|---|---|---|---|
|
<TABLE BORDER CELLPADDING=2> <TR> <TH ALIGN=LEFT>Language</TH> <TH ALIGN=LEFT COLSPAN=2>Encapsulation <BR> </TH> </TR> <TR> <TD> Ada 95</TD> <TD ROWSPAN=2>Using</TD> <TD> Packages</TD> </TR> <TR> <TD> C++</TD> <TD> Class</TD> </TR> </TABLE> |
Colouring table cells |
This can be used to give an area of text a background colour
Formatted text | HTML markup required | ||||||
---|---|---|---|---|---|---|---|
| <TABLE CELLPADDING=2> <TR> <TH ALIGN=LEFT BGCOLOR="#FFFFD0">Language</TH> <TH ALIGN=LEFT BGCOLOR="#FFFFD0">Encapsulation</TH> </TR> <TR> <TD BGCOLOR="#FFD0FF"> Ada 95</TD> <TD BGCOLOR="#FFD0FF"> Package</TD> </TR> <TR> <TD BGCOLOR="#D0FFFF"> C++</TD> <TD BGCOLOR="#D0FFFF"> Class</TD> </TR> </TABLE> |
Using HTML special characters |
The markup language uses the character < to start a markup tag. The consequence of this is that < can not be used to represent the less than character directly in a web page. The HTML markup languages defines an escape sequences of characters to represent such special characters.
The following are some of the character sequences used to represent characters that have a special meaning in the HTML language.
Character | Represent by sequence | Character | Represent by sequence |
---|---|---|---|
< | < | > | > |
& | & | " | " |
Thus to include <BODY> as part of the text of a document the sequence <BODY> can be written.
Characters not in the normal ASCII character set are also represented by an escape sequence. This is so that they may be typed on computer systems which do not directly support the input of such characters. For example:
Character | Represent by sequence | Character | Represent by sequence |
---|---|---|---|
à | à | ç | ç |
To prevent the web browser breaking a line at a space character a non breaking space character is used rather than the normal space character.. A non breaking space character is represented by the escape sequence . This can also be used to introduce more than one space character between words. For example:
HTML | Formatted text |
---|---|
A B<BR>A B | A B A B |
In addition a character from the LATIN-1 character set is represented by &#nn;. Where nn represents the character code in decimal. For example:
Character | Represent by sequence | Character | Represent by sequence |
---|---|---|---|
† | † | A | A |
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> |
Any text to be centered is enclosed between the tags <CENTER> and </CENTER>.
Formatted text | HTML markup required |
---|---|
A line of normally formatted text.
that are centered |
A line of normally formatted text. <CENTER> Some lines of text <BR> that are centered </CENTER> |
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:
M.A.Smith at brighton dot ac dot uk
Formatted text | HTML markup required |
---|---|
Mail me | <A HREF="Mike Smith University of Brighton">Mail me</A> |
Of course your browser has to support this facility.
Automatic redirect |
A page may contain a tag that will cause an automatic redirection to another URL after a specific time interval. For example, the tag
<META HTTP-EQUIV="Refresh" CONTENT="3;url=http://domain/directory/file.html">will cause the current page to be automatically replaced with the contents of the URL http://domain/directory/file.html after 3 seconds.