Brief Introduction
A Tag in HTML denotes certain elements such as <html> which defines the document. HTML tags consist of a left angle bracket (<), a tag name, and a right angle bracket (>). Tags are usually paired (e.g., <html> and </html>) to start and finish the tag instruction. The end tag looks just like the start tag except a slash (/) precedes the text within the brackets. HTML tags are listed throughout this page. Your Browser, most commonly Internet Explorer or Netscape Navigator interpret these tags and display the text, graphics, etc. within the tags onto your monitor in the form of a web page.
Some elements may include an attribute, which is additional information that is included inside the start tag. For example, you can specify the alignment of images (top, middle, or bottom) by including the appropriate attribute with the image source HTML code. Tags that have optional attributes are also noted in this document.
It's important to note that HTML is not case sensitive i.e. <body> is equivalent to <BODY> or <bODy>. The only exception to this is the special or escape characters.
Basic Structure
This tag is the first tag of any HTML document although not compulsory. It is used to indicate the version of HTML that is being used in the document.
Generally <!DOCTYPE HTML PUBLIC "//W3C//DTD/HTML 4.0//EN"> is used.
For framesets <!DOCTYPE HTML PUBLIC "//W3C//DTD/HTML 4.0 Frameset//EN"> is used.
Defines the HTML markup text start <HTML> and end </HTML>.
Allows the body of a web page to be delimited i.e. in the body is the text to be displayed as well as HTML markup tags to hint at the format of the text.
Allows additional information to put in the HTML document.
This is a comment tag. A comment must be included after the exclaimation mark and before the terminating ">".
Example code
Defines the character set and content type.
Provides description and keywords for the HTML page, mainly used by search engines to index pages.
Specifies the background colour of the document.
Specifies the colour of the link when activated by your mouse.
Specifies the colour of the visited links in the document.
Specifies the colour of the text in the document.
Example
HTML Code Needed
<!DOCTYPE HTML PUBLIC "//W3C//DTD/HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE> My web page </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="red">A simple web page. </BODY>
</HTML>
Paragraphs
A new paragraph is started with the <P> tag, by dropping the text down a line to start a new line. The paragraph tag leaves a line gap between the old line and the new one 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. It differs from the paragraph <P> tag in that it does NOT leave a line gap. Logically there is no </BR> tag as we never need to signify the end of a line break. If more breaks are needed just use multiple <BR> statements.
<p>Last sentence before paragraph break. </p> <p>The new paragraph with a line of text.<br> On a new line without the line gap. </p>
Last sentence before paragraph break.
The new paragraph with a line of text. On a new line without the line gap.
Preformatted Text
Text can be copied literally (as is) by using the <PRE> tag. Although, any HTML tags in the text will still be processed. These elements will be rendered with a monospaced font and preserve layout defined by whitespace and line break characters.
<PRE>
H E L L O
********
* *
* </PRE>
*
Divisions
Divides the text into divisions to allow for the ability to align the text of the block element.
<div align="center">Test</div>
The SPAN element was introduced into HTML to allow authors to give style that could not be attached to a structural HTML element. <SPAN> may be used as a selector in a style sheet, and it also accepts the STYLE, CLASS, and ID attributes, at least one of which must be used for the tag to have any affect. You must also include the closing tag </SPAN>, as one would with any inline element. It exists purely to apply style, and so has no effect when the style sheet is disabled.
N.B. For more information on style sheets see CSS Tutorial
Text Alignment
Aligns the text to the left for the start of a paragraph (P) or a block (DIV).
Aligns the text to the centre for the start of a paragraph (P) or a block (DIV).
Aligns the text to the right for the start of a paragraph (P) or a block (DIV).
N.B. Use DIV where you have more than one line that is aligned the same.
<div align="left"> <p>This is on the left</p> <p>and this</p> <p align="center">This is in the centre</p> <p align="right">and this on the right.</p> </div>
This is on the left
and this
This is in the centre
and this on the right.
Text style
Makes the text between this tag bold.
Puts the text in italics.
Makes the text underlined.
Puts the text in teletype font
Changes the size of the text by a factor specified between -7 and +7.
Specifies the size of the text between 1 and 7 directly.
Specifies the colour of the text. See more here
Specifies the font face of the text.
<p><font size="+7">This a large font.</font></p> <p><i><font size="-7">This is a tiny font in italics.</Font></i></p> <p><font color="BLUE">This is a normal size font in blue.</Font></p> <p><TT><font color="GREEN">A teletype font in green. </Font></TT></p> <p><font face="Arial">This font is in Arial Face.</font></p>
This a large font.
This is a tiny font in italics.
This is a normal size font in blue.
A teletype font in green.
This font is in Arial Face.
This tag is placed after the opening <body> tag in an HTML document. It sets a default font size, face, and color for your entire page. All the other text and font tags within your HTML page are used in relation to the font size, etc. set in the <basefont> tag. In other words, your document will always revert back to what you set in the <basefont> tag.
<BASEFONT SIZE=4 COLOR=GREEN FACE="ARIAL"> <BR>This text displays with the basefont setting. <FONT COLOR="BLACK"> <BR>We change the color using the font tag but the face and size should remain the same. </FONT> <BR>Now the colour should revert back to what was set in the basefont.
Colour
Changes the font colour to the one specified.
There are 16 colours that can be selected by name. These are:
BLACK, GRAY, NAVY, MAROON, GREEN, OLIVE, PURPLE, TEAL, SILVER, RED, BLUE, FUCHSIA, LIME, YELLOW, AQUA, WHITE
Many more colours can also be specified in terms of the three primary colours (Red, Green, Blue). Each primary colour is specified a two digit representation in hexadecimal (from 00 to 99 then AA to FF) and then a hash symbol is put at the beginning (indicating hexadecimal) to create a 7 character string. Red is given the first two digits, Green the middle two and Blue is given the last two digits. i.e. #FF0000 is RED, #00FF00 is GREEN and #0000FF is BLUE.
<p><font color="PURPLE">The colour purple</font> or <font color="FUCHSIA">how about Fuchsia <font color="#000000">or</font><font color="#CCFFFF"> </font></font><font color="#114400"> #114400.</Font></p>
The colour purple or how about Fuchsia or #114400.
Headings
To create a heading in the text one of the tags above are used. <H1> creates the biggest heading and they get smaller going upwards to <H6>. The smaller sizes, <H5> and <H6> are probably too small for most web pages especially <H6> which is tiny. Header tags by default always print in Bold, and they always print as if they were a paragraph <P> tag, i.e. your text drops down a line and leaves an empty line between the last line of text and the new line of text.
<h1>This is how Header 1 looks</h1> <h2>This is how Header 2 looks</h2> <h3>This is how Header 3 looks</h3> <h4>This is how Header 4 looks</h4> <h5>This is how Header 5 looks</h5> <h6>This is how Header 6 looks</h6>
Format Tags
The cat sat on the mat.
This tag is used to emphasise the text.
This tag is used to make the text strong.
Increases the size of the text and it's weight ; it is very similar to bold.
This tag is used for citation of text.
This tag is used for displaying a sequence of literal characters.
For displaying keyboard characters.
Allows the display of definitions.
Allows the display of characters with a line through i.e. here.
Allows the display of superscript characters such as 4x3-3x2=32
Allows the display of subscript characters such as 4x3-3x2=32
Horizontal Rule
It may be useful to section off a part of the page. To do this the horizontal rule tag is used.
The width of the bar can be altered as well by using the 'WIDTH=' command i.e. <HR WIDTH=40%> puts the bar across 40% of the page.
The size of the bar can also be altered using the 'SIZE=' command i.e. <HR SIZE=10> makes the rule 10 pixels vertical.
'noshade' is another feature that can be used and the rule can be aligned left, right or centred.
Standard Horizontal bar. <HR noshade> <P>No shaded Bar Example aligned right at 60%</p> <hr noshade width="60%" align="right">
No shaded Bar Example aligned right at 60%
Lists
It's always useful to be able to list items in order or by bullet point. An ordered, or numbered list in HTML is created using the <OL> tag and is closed with a </OL> tag. You must use the <LI> (list item) tag for the content of a numbered list but you do not need a closing </LI> tag.
<OL> <LI> First Entry <LI> Second Entry <LI> Third Entry </OL>
You can also create a list of bullet points in HTML. You'll note it's exactly the same except the "OL" (for ordered list) has been replaced by "UL" (for unordered list).
<UL> <LI> First Entry <LI> Second Entry <LI> Third Entry </UL>
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.
N.B. These characters are case-sensitive i.e. typing '<' would not work.
<h2>hello≪>""&"again"</h2>
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.
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.
<h2>Hello To You</h2>
In addition a character from the LATIN-1 character set is represented by &#no;. Where no represents the character code in decimal.
List of Latin-1 Special characters
Images
Images can be added to HTML files easily and can greatly enhance the page. An image may be held in several formats, though the only two really 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 for photos or other large images. However, if the picture is very small, mainly one colour or just a few few filled colours then the GIF format will probably be the best. Each image takes additional time to download and slows down the initial display of a document. This is why it is vital to carefully select your images and the number of images in a document.
To include an image in a document use the <IMG> tag in the following way:
<IMG SRC=ImageName>
where ImageName is the URL of the image file (i.e. london.jpg)
Alternate Text for images
Some browsers (primarily the text-only browsers such as Lynx cannot display images) or the user may have suppressed the ability to display images, in case of this, it is useful to include the following in the IMG tag.
<IMG SRC=ball.gif ALT="ball">
where ball.gif is the picture of a ball. With graphics-capable viewers that have image-loading turned on, you will see the ball picture. With a text-only browser or if image-loading is turned off, the word ball is shown in your window in place of the image.
You should try to include alternate text for each image you use in your document, which is a courtesy for your readers or, for users who might be visually impaired, a necessity.
Image Size Attributes
To include an image in a file along with the portrait's dimensions, enter:
<IMG SRC=image.gif HEIGHT=120 WIDTH=75>
NOTE: Some browsers use the HEIGHT and WIDTH attributes to stretch or shrink an image to fit into the allotted space when the image does not exactly match the attribute numbers. Not all browser developers think stretching/shrinking is a good idea, so don't plan on your readers having access to this feature. Check your dimensions and use the correct ones.
Aligning Images
You can align an image when displaying it. You can have images separated from text and aligned to the left or right or centered. Or you can have an image aligned with text. Try several possibilities to see how your information looks best.
Causes any following text to be displayed aligned with the top of the picture.
Causes any following text to be displayed aligned with the bottom of the picture.
Causes any following text to be displayed aligned with the middle of the picture.
Cause the image to be left aligned on the page. Text is flowed around the image on the right hand side.
Cause the image to be right aligned on the page. Text is flowed around the image on the left hand side.
Background Images
You can load an image and use it as a background when displaying a page. Some people like background images and some don't. In general, if you want to include a background, make sure your text can be read easily when displayed on top of the image.
Background images can be a texture (linen finished paper, for example) or an image of an object (a logo possibly). You create the background image as you do any image.
However you only have to create a small piece of the image. Using a feature called tiling, a browser takes the image and repeats it across and down to fill your browser window. In sum you generate one image, and the browser replicates it enough times to fill your window. This action is automatic when you use the background tag shown below.
A background image should be included in the <BODY> tag as an attribute:
<BODY BACKGROUND="filename.gif">
Links
The idea of linking your pages to others on the internet (or hyperlinking) is what makes the World Wide Web. Much as if you were reading a book; hyperlinks, or just links, allow you to jump ahead a page, or several, or to the end of the book to read the index, or to the beginning of the book to read the glossary or titles of the chapters. A named point in a document is specified with an anchor tag which has the attribute NAME.
This is a marker<a name="marker"></a>
To transfer to a named anchor point, the HREF form of the anchor tag is used.
<a href="#marker">Go to marker</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 and pages on the World Wide Web, 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.
<a href="http://www.surrey.ac.uk">University of Surrey Homepage</a>
You can also go to a named point in a file on a different page by adding the '#name' after the page.
<a href="forms.htm#password">HTML Form page - Passwords</a>
Automatic Redirecting
You can also allow the browser to automatically go to a link by adding the following code immediately after the <HTML> tag:
<META HTTP-EQUIV="refresh" CONTENT="10;URL=http://www.surrey.ac.uk">
This will cause the current page to be automatically replaced with the HTML page at http://www.surrey.ac.uk after 10 seconds.
Links - Targeting
Targetting is about specifing the window in which all linked documents should open. The syntax is target="" added to the <a href> tag.
Loads the linked document in a new, unnamed browser window.
Loads the linked document in the parent frameset or window of the frame in which the link is contained. If the frame containing the link is not nested, then the linked document loads into the full browser window.
Loads the linked document in the same frame or window as the link. This target is implied, so you usually don't have to specify it.
Loads the linked document in the full browser window, thereby removing all frames.
<a href="html.htm" target="_top">Link to HTML homepage in same window </a>
Scrolling Text
Text can be scrolled across the page in a marquee effect using the tags <marquee> and </marquee>. The attributes for this tag are width, scrollamount and behavior.
N.B. Not all browsers support this method. It is supported in Internet Explorer v5 and upwards.
To create this effect shown here:
Hello, this is a marquee!!
Use the following code:
<marquee width=60% scrollamount=10 behavior="alternate"> Hello, this is a marquee!! </marquee> <p class="copexample">Example</p>
Clickable regions within images
The following image acts as a map of a group of Web pages. You can click on certain parts of the picture to go to the corresponding page.
<img width="318" height="198" alt="site map" usemap="#sitemapMap" border="0" src="DSC00020.jpg"> <map name="sitemapMap"> <area shape="rect" coords="98,135,299,182" href="cgi.htm" alt="CGI" title="CGI"> <area shape="poly" coords="289,14,256,49,275,102,276,96,297,86" href="#" target="forms.htm" alt="Forms" title="Forms"> <area shape="circle" coords="44,155,36" href="jscript.htm" alt="Javascript" title="Javascript"> <area shape="rect" coords="115,28,237,106" href="frames.htm" alt="Frames" title="Frames"> <area shape="circle" coords="62,44,32" href="index.htm" alt="Index" title="Index"></map>
The src attribute on the img element specifies the image "DSC00020.jpg". The usemap attribute references a map element. It uses a Web address to do so, hence the # character. The border attribute is set to "0" to suppress the blue border around the image.
The map element specifies which regions in the image act as hypertext links. The name attribute matches usemap attribute on the img element and acts much like the name attribute on the <a> element. In practice, the map element needs to be in the same file as the img element.
The area element is used to define a region on the image and to bind it to a Web address. The shape attribute specifies "rect", "circle" or "poly". The "coords" attribute specifies the coordinates for the region depending on the shape.
rect: left-x, top-y, right-x, bottom-y circle: center-x, center-y, radius poly: x1,y1, x2,y2, ... xn,yn
The top left pixel is considered as the origin of the image with x and y both equal to zero, x increases rightwards across the image and y increases downwards. Most image manipulation tools allow you to find the pixel coordinates of any given point in the image.
If two or more defined regions overlap, the region-defining element that appears earliest in the document takes precedence (i.e., responds to user input). For a complex shape such as an anular ring, you can make part of a region inactive by overlaying it with another region using the nohref attribute, for example:
<area shape="circle" coords="186,44,50" nohref>
<area shape="circle" coords="186,44,100"
href="Overview.html" alt="Getting Started">
© Nigel Martin 2000 ma71nm@surrey.ac.uk Created September 2000 Last Changed 13 April, 2001