Bare Essentials of HTML
Markup Tags
An element is a basic component and makes the building of web pages possible. Some examples of these elements include tables, headings, lists. A tag marks different areas of your file so that the browser knows how to display the document. It is similar to how a wordprocessors marks the areas of text that are to be bold or undelined or of certain font.
HTML tags consist of a left angle bracket <, a tag name and a right angled bracket >. Tags are usually paired e.g. the following tag would produce the heading “Introduction”
<H1> Introduction </H1>
The end tag looks just like the start tag except a slash / preceded the text within the brackets.
HTML is not case sensitive e.g. <HEAD> is the same as <head> and <HeAd>, as always this rule is broken but we do not need to worry yet. Each HTML document should contain some important tags that define the different sections in a document. Some browsers can still read pages that don’t contain these important tags but it is good practice to always use them. Each document consists of html, head and body tags. The head contains the title and the body contains the actual text that is made up of paragraphs, lists etc..
The fundamental elements are shown in the document below:
<html>
<head>
<TITLE> Your First HTML page </TITLE>
</head>
<body>
<H1>Hello World</H1>
<P>This is a simple paragraph,
returns are ignored – wrap around is used by browsers.</P>
<P>To start a new paragraph you have to mark it.</P>
</body>
</html>
The required tags are <html>, <head>, <title> and <body>.
Using a browser this looks like:
To view how any web document has been produced select View Source from the browser menu.
HTML
This element tells your browser that the file contains HTML-coded information. The file extension html or htm should also be used on your documents.
HEAD
The head element identifies the first part of any HTML document, it contains the title.
TITLE
The title element contains the document title and is a global context. The title is shown as part of the browser window.
The title is used to identify the page to the outside world so should be meaningful and short.
BODY
This is by far the largest section of any HTML document and contains the text, graphics, tables etc. that is seen via the browser. The tags that are used define the layout. The use of tags make a documents easy to use and move round.
The tags detailed below are used within the main body of a HTML document.
Headings
There are six headings defined, browsers may well display theses in different ways. Headings are displayed in larger and/or bolder text than normal text. The first heading in each document is usually tagged "<h 1 >, this uses the largest font the other heading H2 to H6 get less emphasised in sequence.
These headings using Microsoft Internet Explorer look like this:
The syntax of the heading elements is:
<Hx>Heading</Hx>
where x is a number between 1 and 6 specifying the level of the heading.
Paragraphs
Carriage returns in HTML documents are ignored by browsers and word wrapping is used as needed. Multilple spaces are also ignored, a simple single space is all that is required.
The carriage returns in the following HTML segment is ignored when displayed in a browser.
<P> The beauty of
HTML is that you do not have to worry about
how a sentence will be displayed by the browser
just remember carriage returns are ignored</P>
A Web browser ignores carriage returns and blank lines and starts a new paragraph only when it encounters another <P> tag.
But remember it is useful to put extra spaces in the source document because it is easy to read and edited at a later time.
The start of a paragraph is indicated with a <P> and closed with a </P>, however, the </P> can be ignored as the browser knows that when a <P> is encountered the previous paragraph has ended.
Paragraphs can be aligned by including the ALIGN attribute in the source file.
<P ALIGN = CENTER>
This should be displayed in the centre of your browser
</P>
The possible alignments include CENTER, LEFT and RIGHT.
Lists
The three types of lists available in HTML are unnumbered, numbered and definition lists. Nested lists are too be avoided by novices as they can be difficult to follow.
Unnumbered Lists
To create a bulleted list
Start with the tag for an Unnumbered List <UL>
Enter the list item tag and then the a single List Item <LI>
End the list with a closing list tag </UL>
The following is a simple list
<UL>
<LI>One
<LI>Two
<LI>Three
<LI>Four
</UL>
Numbered Lists
A numbered or ordered list is the same as the unnumbered list, except it uses <OL> instead of <UL>.
e.g.
<OL>
<LI>One
<LI>Two
<LI>Three
<LI>Four
</OL>
Definition Lists
This is used to produce definitions of specific terms.
A definition list generally consists of a sequence of definition term (<DL>) followed by a definition definition (DD). being used to form the list.
Below is a simple example
<DL>
<DT>HTML:
<DD>HyperText Markup Language. A collection of machine independent (platform independent) styles, indicated by tags, that define the various components of a World Wide Web document.
<DT>URLs:
<DD>Web sites have long and weird-looking names called URLs, or Uniform Resource Locators. URLs are actually quite simply the address of a page on the Internet, e.g. http://www.Burnley.ac.uk
<DT>Http:
<DD>The first part of the URL for a document on the World Wide Web. Http stands for the hypertext transfer protocol.
</DL>
When viewed using a browser this document looks like the following:
HTML:
HyperText Markup Language. A collection of machine independent (platform independent) styles, indicated by tags, that define the various components of a World Wide Web document.
URLs:
Web sites have long and weird-looking names called URLs, or Uniform Resource Locators. URLs are actually quite simply the address of a page on the Internet, e.g. http://www.Burnley.ac.uk
Http:
The first part of the URL for a document on the World Wide Web. Http stands for the hypertext transfer protocol.
Forced Line Breaks
The <BR> tag forces a line break with no additional space between each line. Using <P> for short lines of text such as postal addresses results in unwanted additional white space, e.g.
IT Development<BR>
Burnley College<BR>
Feilden Street<BR>
BURNLEY<BR>
BB8 1LH<BR>
Produces:
IT Development
Burnley College
Feilden Street
BURNLEY
BB8 1LH
Addresses
The <ADDRESS> tag is mainly used to specify an email contact for the author of the document or helpdesk etc.. It can also contain revision dates. It is generally the last item in a page or document, e.g.
<ADDRESS>
Introduction to HTML / Burnley College / [email protected] / revised August 97
</ADDRESS>
The output is:
Introduction to HTML / Burnley College / djjoshzor"gmail.com / revised August 97
Note this line is often italicised.
Horizontal Lines
Lines can be produced across the browser using the Horizontal Rules (<HR>) tag. This is often used to sepearte sections of the document.
The line’s thickness and width can be varied e.g.
<HR SIZE =3 WIDTH = 60%>
By default this is centred but this can be altered using the ALIGN attribute, e.g.
<HR SIZE=7 ALIGN=LEFT WIDTH = 20%>
Emphasising
Text can be emphasised using a number of different tags the most common ones are
bold <B>, italic <I> . Underline is generally used to indicate a link. The segment below uses both bold and italic:
<P>This is <B>bold</B> this is <I>italic</I> and this is <B><I>both</I></B></P>
It is important to remember to close the section that is being emphasised with the appropriate tag, i.e. </B> or </I>.
LINKING
This is an important feature of HTML and allows links to be made between parts of the same file or to other files stored on computers across the World Wide Web. A browser highlights the identified text or image with colour and (in the case of text) underlines it to indicate that this is a link (hypertext link).
The tag for a link is <A> which stands for Anchor. To use a link in a document the following steps can be used:
Start the link using an Anchor tag <A (don’t close using the > yet)
Put a space after A and then specify the document’s name you are wishing to link by inserting the parameter HREF =“filename” followed by the closing bracket. What you should have now is <A HREF=“filename”>
Enter the text that will be used to label the hypertext link
Enter the closing anchor tag, </A>.
Below is an example of a link to a file called ADVANCED.HTML
<A HREF=“ADVANCED.HTML”>Advanced HTML Tutorials</A>
This creates a link on the label Advanced HTML Tutorial to the document ADVANCED.HTML, which is in the same directory or folder as the first document.
Relative or absolute
Links can be made to documents in other directories by specifying the relative path from the current document to the linked document.
A segment from the start of the document is shown overleaf:
</BODY>
<A NAME="Start"></A>
<H1>Introduction to HTML</H1>
<P>This is a basic introduction to HTML, the hypertext markup language used on the World Wide Web. In this session the following will be covered:</P>
<UL>
<LI><A HREF="#Over">Overview</A></LI>
<LI><A HREF="#Jargon">Explaining the Jargon</A></LI>
<LI>The bare essentials of HTML</LI>
<UL>
<LI>Markup Tags</LI>
<LI>The simplest HTML document</LI>
<LI>HTML</LI>
<LI>HEAD</LI>
<LI>TITLE</LI>
<LI>BODY</LI>
<LI>Headings</LI>
<LI>Paragraphs</LI>
<LI>Lists</LI>
<LI>Forced Line Breaks</LI>
<LI>Addresses</LI>
<LI>Horizontal Lines (Rules)</LI>
<LI>Emphasising Text</LI>
</UL>
<LI>Linking</LI>
<UL>
<LI>Relative or Absolute</LI>
<LI>Links to Specific Sections</LI>
</UL>
<LI>Inline Images</LI>
<LI>
<A HREF="http://www.ncsa.uiuc.edu/general/internet/www/htmlprimer.html">More on HTML</A>
</UL>
To HTML code that is required to produce a link to a named anchor for “Explaining the Jargon” :
<A HREF="#Jargon">Explaining the Jargon</A>
Note this is only for links in the same document. If the link is in another file then the path to the file has to be specified before the# e.g. HREF=”Sample.html#Jargon”.
The label after the # marks a tab in the file. This tab tells your browser what should be displayed at the top of the window when the link is used.
Now, create the named anchor, in this case “Jargon” at a point just above the section on Explaining the Jargon:
<H2><A NAME="Jargon">Explaining The Jargon</A></H2>
With both of these elements in place a user can go directly to the Jargon section of the document.
INLINE IMAGES
To display an inline image i.e. images embedded along side the text, they have to be in the appropriate format. The graphic formats allowed are X Bitmap (XBM), GIF or JPEG. Each image used will make the document slower to load on the user’s machine. The images used have to be carefully selected to make sure they are not too large.
To include an inline image the following tag is used:
<IMG SRC= ImageName>
Where IamgeName is the location of the image file.
To specify the size of your image use the size attributes, e.g.
<IMG SRC=ImageName HEIGHT=100 WIDTH=65>
The HEIGHT and WIDTH attributes let the browser set aside the required space for the image as it downloads the rest of the file. The size is in pixels and this information should be taken from the application used to create the image.
Images can also be aligned by using the ALIGN attributes – TOP, and .CENTER
e.g. <IMG SRC=”Logo.gif” ALIGN= TOP>
Creating Tables
To create a table in HTML the following code is used
<table border =0>
<tr>
<td>Cell row 1 Column 1</td><td>Cell row 1 Column 2</td>
</tr>
<tr>
<td>Cell row 2 Column 1</td><td>Cell row 2 Column 2</td>
</tr>
.
.
.
etc
.
.
.
</table>
Explaining The Jargon
WWW: World Wide Web
Web: World Wide Web
HTML HyperText Markup Language
A collection of machine independent (platform independent) styles, indicated by tags, that define the various components of a World Wide Web document.
URLs: Web sites have long and weird-looking names called URLs, or Uniform Resource Locators. URLs are actually quite simply the address of a page on the Internet.
e.g. http://www.Burnley.ac.uk
Http: The first part of the URL for a document on the World Wide Web. Http stands for the hypertext transfer protocol.
HTML Version: The agreed standard for HTML documents, the current one is Version 2.0 but many additional features are commonly used which are non standard but not all browsers will be able to view documents which incorporate these features. If a browser does not support a specific tag it usually just ignores it. You are usually fine if using up to date versions
JAVA: A programming language developed for use on the internet.
HTML Editor: Some editors are available that make producing web pages very easy. The latest version of WORD (Office 97 version) can covert your WORD documents into HTML.
Source Document: This is the file containing the HTML document that is being created it contains all the tags that specify what it should look like in a browser.
