HTML Markup & structure of a page
Hypertext Mark Up Language
Head and Body elements
Paragraphs and styles
The hyperlink
Finding more information
Forms HTML
Hypertext Mark Up Language
A Web page consists of a file which contains the text of the page, and which also contains codes or tags to tell the browser how to display the page. Any other elements, such as images, sound clips, video clips, or even small programs which calculate spreadsheets, are separate files. A moderately graphic page may be made of up to 20 files.
The tags used to tell the browser how to display pages are written according to a set of rules (a syntax) and the collection of tags and rules for using them to make a page is known as the Hypertext Mark Up Language.
- 'Hypertext' means text documents which can be linked together
- 'Marking up' a page is the process of adding the codes to the text, this is borrowed from printer's slang
- 'Language', not in the sense of German or BASIC, but simply there are rules to combining the tags
Below are the HTML tags or codes for a simple Web page. When you click buttons in FrontPage Express, the program is simply inserting the tags into the HTML file.
<HTML>
<HEAD>
<TITLE>
My page
</TITLE>
</HEAD>
<BODY>
<H1>Joe Bloggs</H1>
<HR>
<P>This is a page about <EM>me</EM> and what I do. I can
<UL>
<LI>Shell peas
<LI>Peel potatoes
<LI>Write C++ programs
</UL>
<HR>
</BODY>
</HTML>
If you
- copy and paste the pages above into NotePad or SimpleText
- save the file as (say) mypage.htm
- load mypage.htm into a browser
you will see something like this
In the sections below, there is a step by step analysis of the tags in this simple page.
Head and Body elements
Web pages are 'bracketed' by the <HTML>.....</HTML> tags. This pair of tags 'wraps up' all the other HTML tags in the page. Your browser knows that the stream of text characters coming up the 'phone line represents a Web page because it reads the opening tag <HTML>, and it knows that the page has finished loading when the closing tag </HTML> arrives. Closing tags always have the '/' in front of the tag. Some tags come in pairs, and others are single.
Within these page brackets, are two more sets of 'brackets'
| <HEAD>....</HEAD> | This is the head block. Encloses the bits you can't see in your browser - information about the information in the page. The most important tag in the head of the page is the <TITLE>...</TITLE> tag, which contains the text displayed in the title bar of the browser window, and the bookmark/favourites text, and is the text used by search engines to index the page. |
| <BODY>....</BODY> | This is called the Body block. Encloses all the visible text in your page, and the formatting and hyperlink codes. The rest of this page discusses the body block tags. |
Paragraphs and styles
| <H1>...</H1> | Heading paragraph style. Applies a level 1 heading to the text enclosed by the tags, and then starts a new paragraph. Just like selecting H1 from the Change Style list. |
| <HR> | Horizontal Line. Puts a line across the browser page. Notice there is no closing tag! |
| <P> | Paragraph. Starts a new paragraph of normal text. some editors will put a </P> at the end of each paragraph, but the syntax of HTML does not require this. |
| <UL>...</UL> | Unordered list. These tags enclose the list items for a bullet list |
| <LI> | List item. Precedes each item in a list. Need not have a closing tag. |
| <EM>...</EM> | Emphasis. Text enclosed y these tags is marked as important. Most browsers render this as italic text. This is an example of a text style. All the other tags in this section have been paragraph styles. |
The hyperlink
"The first new punctuation mark for 1000 years."
The World Wide Web consists of lots of pages of information linked together. The linking (or hyperlinking) is done by applying a special text style to the text you want to use as your link. For example;
<A HREF="http://www.northbham.ac.uk">an investor in people</A>
will make a link to North Birmingham College's web site, using the 'link text' an investor in people. That is all you need to do to link to any Web site in the World! The HREF="URL" is the key - when you follow the link, the browser requests the page at the address you have given in the <A HREF> tag.
The A part of the tag is an element, the HREF part of the tag is an attribute of the element, and the URL is the value of the attribute.
Finding more information
You should be able to complete task 1.3 based on the information given earlier in this page. We shall only use HTML a few times in later tasks, usually to change the value of an attribute. If you want to know more about HTML out of interest, the pages listed below contain structured tutorials and information, in roughly increasing order of difficulty.
Very few people need to 'roll their own' HTML code these days, but you may still wish to learn how to if
- You want to use the latest extensions to HTML before the page editor programs catch up
- You want a greater insight into the limitations of Web pages
- You need to understand the 'standards' and accessibility issues
Forms HTML!
To learn more about forms HTML see:
- Joe Barta's forms tutorial (about 10 screens long)
Below is the simplest form of much value:
<FORM action="/cgi-bin/mailform" method="get">
<p>E-mail address:
<p><input type="text" size="30" name="email">
<p>Comments:
<p><textarea name="comment" rows="10" cols="30"></textarea>
<p><input type="submit" value="Submit">
<input type="reset" value="Reset">
</FORM>
This HTML will produce a form like the one below when added to a page - at least the user can send you a message without having an e-mail address or account set up.
