[*] [Home page] [Basic HTML] [Forms] [CGI scripts] [New HTML] [*] Basic HTML formatting tags © Mike Smith M.A.Smith@brighton.ac.uk University of Brighton UK. 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 [*] Tables [-] Single cell [-] Row(s) of cells [-] Heading to a column [-] Spanning rows and columns [*] Using HTML Special characters [*] Literal copy and centering of text [*] Inserting an e-mail address ------------------------------------------------------------ Warning if you are not using a browser that supports tables such as Netscape 1.1 or later then this page will probably be very difficult to read. ------------------------------------------------------------ [Index] Introduction to HTML HTML (HyperText Markup Language) is a markup language which consists of tags embedded in the text of a document. The browser reading the document interprets these markup tags to help format the document for subsequent display to a reader. However, many of the decisions about layout are made by the browser. Remember, web browsers are available for a wide variety of computer systems. 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 markup tags used. * The physical page width. * The fonts used to display the text. * The colour depth of the display. 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 The browser will The browser will ignore ignore new lines and ignore new lines and new lines and extra extra spaces in the extra spaces in the spaces in the text. text. text. to produce the following: The browser will ignore new lines and extra spaces in the text. [Try it] The markup language is made up of tags such as which requests text that follows to be in bold type. This bolding is turned off by the inverse markup tag . In writing a tag, the case of the letters in the tag name is unimportant so that and 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 Title of the web page An example of a simple web page. An example of a simple web page. The tags used are: 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. Defines the extent of the HTML markup text Contains descriptions of the HTML page. This meta information is not displayed as part of the web page. 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. 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. 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, , and 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 text is bolded. The text is italicized. The text is italicized. The text is in a teletype The text is in a teletype font. font. The text is 2 sizes larger. The text The size attribute may also is 2 sizes larger. be an absolute value in the The size attribute may also range 1 .. 7. be an absolute value in the range 1 .. 7. Use the e-mail address Use the e-mail address M.A.Smith@brighton.ac.uk
M.A.Smith@brighton.ac.uk
to contact me. to contact me. Note: How the formatting is turned off by the inverse of the HTML formatting tag. [Try it] ----------------------------------------- ------------------------------------------------------------ ----------------------------------------- [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. 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 The following is a citation. a citation. Represents computer code Represents computer code A sequence of A sequence of literal characters literal characters Note: Note:
This is a This is a blockquote of blockquote of some text some text
The following is The following is a definition a definition The following text The following text is emphasized. is emphasized. keyboard characters. keyboard characters The following text is strongly The following text emphasized is strongly emphasized The following name is a program The following name variable is a program variable [Try it] ----------------------------------------- ------------------------------------------------------------ ----------------------------------------- [Index] Paragraph and line break A new paragraph is started with the

tag, and may be optionally terminated with the inverse paragraph tag

. However, it is usual not to specify the inverse paragraph tag

A line break is created by the
tag, which has no inverse tag. Formatted text HTML markup required Last sentence of a paragraph Last sentence of a paragraph

The first line of a new paragraph. The first line of a new paragraph. A line of text. A line of text.
On a new line. On a new line. [Try it] ----------------------------------------- ------------------------------------------------------------ ----------------------------------------- [Index] Headings and rulers A heading in the text is created with the

tag. There are in fact six heading tags

the largest to

the smallest. Formatted text HTML markup required An H1 heading

An H1 heading

An H3 heading

An H3 heading

An H6 heading
An H6 heading
A heading tag generates line break(s) before and after the heading text. For example: Formatted text HTML markup required Just before the heading. Just before the heading.

An H4 heading

An H4 heading Just after the heading. Just after the heading. [Try it] ----------------------------------------- ------------------------------------------------------------ ----------------------------------------- A horizontal ruler across the page can be created with the
tag. For example: Formatted text HTML markup required End of a section --------------------- End of a section
New section New section Only 40% of width Only 40% of width
New section --------- New section The size of the ruler --------------------- The size of the ruler
New section New section Note: The size of the ruler is by default specified in pixels. [Try it] ----------------------------------------- ------------------------------------------------------------ ----------------------------------------- [Index] 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 masjpeg A gif image A gif image [Image] with a transparent background. with a transparent background mas Text can be made to flow around an [mas] Text can be made to flow around image on the left hand side by an image on the left hand side using the attribute ALIGN=RIGHT. by using the attribute ALIGN=RIGHT. Note: There are many graphic editing programs which allow you to specify that one of the colours 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 colour 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: . The attributes of the 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. [Try it] ----------------------------------------- ------------------------------------------------------------ ----------------------------------------- [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: ----------------------------------------- ------------------------------------------------------------ ----------------------------------------- [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 [Try it] 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
  1. Item one of list 2. Item two of list
  2. Item two of list
[Try it] A definition list allows a list with a backward hanging indent to be created. Formatted text HTML markup required
Definition tag. Definition tag.
Text of the definition list. Which Text of the definition list. may stretch over several lines. Which may stretch over several Another definition tag. lines. Text of the definition list.
Another definition tag.
Text of the definition list.
Note: It is a common practice for the definition tag with an image or even have it prefixed with an image. [Try it] ----------------------------------------- ------------------------------------------------------------ ----------------------------------------- [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 Here 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 Transfer to anchor 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 Hyper text link to the file file.html file.html held on another machine using an URL Name Name To go to a named point in a file the format of the anchor is: Hyper text link to the file Hyper text link to the file file.html at point mark file.html at point mark held on another machine using an URL Name Name [Try it] ----------------------------------------- ------------------------------------------------------------ ----------------------------------------- [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 http://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 snowwhite.it.bton.ac.uk 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 snowwhite.it.bton.ac.uk, can be accessed with the URL http://snowwhite.it.bton.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://snowwhite.it.bton.ac.uk/%25.html represents the URL http://snowwhite.it.bton.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 - If no username is FTP ftp://[username[:password]@host/path 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] Tables [Index] Single cell A table is created using the markup tag. The simplest table consists of a single data cell. The markup . The status of the tag is somewhat unclear. Netscape 1.1 requires the end of table data cell tag to terminate the cell in certain circumstances. Other browsers sense the end of the cell by the
defines the start of a table data cell. Netscape requires a termination tag
or other formatting tag. The tag 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
Text in a table Text in a table
The following extra components can be added to a table tag: UNITS= Either en, relative or pixels. This defines the units that will be used in defining other attributes. The default is pixels. BORDER Specifies that a border is to be placed around the table cells. The width of the border is optionally specified with BORDER=n. CELLPADDING Specifies the gap to be placed around the table contents. If the text in the data cell is to be left aligned the additional component ALIGN=LEFT can be added to the tag. For example: Other alignments are ALIGN=RIGHT, ALIGN=CENTER. [Try it] ----------------------------------------- ------------------------------------------------------------ ----------------------------------------- [Index] Row(s) of cells A row of cells can be created by repeating the tag. Formatted text HTML markup required Data cell 1 Data cell 2
Data cell 1 Data cell 2
[Try it] ----------------------------------------- ------------------------------------------------------------ ----------------------------------------- To form a table of many rows, the markup tag is inserted where each new row in the table starts. Formatted text HTML markup required Data cell 1 Data cell 2 Data cell 3 Data cell 4
Data cell 1 Data cell 2
Data cell 3 Data cell 4
[Try it] ----------------------------------------- ------------------------------------------------------------ ----------------------------------------- [Index] Heading to a column The tag may be used instead of if the cell is a header to a column of cells. For example: Formatted text HTML markup required Mnemonic Expansion HTML Hyper Text Markup Language
Mnemonic Expansion
HTML Hyper Text
Markup Language
----------------------------------------- ------------------------------------------------------------ ----------------------------------------- [Index] Spanning rows and columns The elements ROWSPAN and COLSPAN of the HTML tags and are used to form data cells which span more than one row or column. For example: Formatted text HTML markup required Language Encapsulation Ada 95 Class Using C++ Package
Language Encapsulation
Ada 95Using Class
C++ Package
[Try it] ----------------------------------------- ------------------------------------------------------------ ----------------------------------------- [Index] 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 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
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 Printable Latin-1 characters ----------------------------------------- ------------------------------------------------------------ ----------------------------------------- [Index] Literal copy and centering of text Text can be copied literally by using the 
 tag. However, any HTML tags
in the text will be processed. For example:

 Formatted text HTML markup required

                 
     *              *
    ***            ***
   *****          *****
                 



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 
 and

.

 Formatted text                      HTML markup required

                                      A line of normally formatted text.
                                      

 A line of normally formatted text.   Some lines of text
         Some lines of text           

         that are centered            that are centered
                                      



[Try it]

                 -----------------------------------------
        ------------------------------------------------------------
                 -----------------------------------------

[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:
M.A.Smith@brighton.ac.uk