Hypertext Mark-up Language
This page illustrates Hypertext Mark-up Language (HTML) basics, from creating a simple framework, aligning and enhancing text, encorporating line breaks and paragraphs, inserting images and linking to external sites.
Note (in green) that HTML tags are (with exception) <open> and </closed>, with data placed between the tags. Spacing is used here to illustrate the layout, grouping the HTML command tags together, however, is not essential. It is perhaps important nonetheless to emphasise that spacing helps to keep track of tag sets, particularly in large web page designs; and that it is good practice to firstly open and close a set of tags prior to entering the data, to ensure that the closed tags are not forgotten, and the web page runs seamlessly.
How to create a simple framework?
<html>
<head>
<title>Document Title Here</title>
</head>
<body>
<p>Paragraph text goes here…</p>
</body>
</html>
Comments may also be included as follow… these are not displayed on screen and may further help to keep code organised, particularly where documents are large in size.
<!-- Comment here -->
A file such as the one illustrated above can be written in Notepad or WordPad, (Accessories) in Windows, adapted and developed to your own liking, saved as an html file (add .htm to the file name when saving), and launched by double-clicking on the resulting document. Once your framework is in place, all your commands will initially be placed between the BODY tags <body></body>.
NB. See also: Protected Space in the glossary.
FORMAT
How to bold text in a paragraph?
<p><b>Bold</b> text to the left</p>
To underline text in a paragraph?
<p><u>Underlined text here</u></p>
ALIGN TEXT
How to align text in a paragraph?
<p align="center">Text to be centred here</p>
<p align="right">Text to be right aligned here</p>
LINE BREAKS
How to include single line breaks?
<br> or <br />
Use of the line break allows for single line spacing, whereas a paragraph <p></p> automatically leaves an additional line space at the end of the paragraph for example. The single line space does not need to be closed </br> as for other commands…
…Note that the preferred break command is <br /> XHTML (not HTML) compatible with a wider range of browser conceivably helping in your transition to xhtml.
How might you use a single line break?
<p>SUB HEADING<br />
It may be necessary to layout text with no space between a sub-heading and the body text. Here we include the line break within a paragraph, however, the line break <br /> need not be limited to this example, and might otherwise be used to control lines spacing like so… <br /><br />. See also: <b>Protected Space</b> in the…</p>
IMAGES
Briefly before listing how to include images in your documents, I'd like to explain a little about mirroring… that is to say, if you were to create a file structure on your hard drive identical to your existing or proposed file structure on your web server, this would simplify matters and there wouldn't be a need to include the full path. Here the image name is mediaplayer.gif stored to an image folder alongside the index.html file.
The command border=0 turns OFF a border around the image. To see how this might look, amend to border=1. Observe the "speach marks", ensuring also to include the folder (images) containing your image on your hard drive and in the path between the "speech marks" (here I've used a file named mediaplayer.gif) as follows:
Where the html file is on the same level
alongside the image folder
<img src="images/mediaplayer.gif" border=0>
Where the html file is not on the same level
in another folder alongside the image directory
<img src="/images/mediaplayer.gif" border=0>
Where the html file is two levels down
in a sub-directory (folder inside a folder), with the image directory on the root
<img src="/images/folder/mediaplayer.gif" border=0>
CENTRE IMAGES/OBJECTS
How to centre an image/object?
Where the html file is on the root alongside the image folder
<center><img src="images/mediaplayer.gif" border=0></center>
HYPERLINK IMAGES/OBJECTS
How to link the image to a web address?
this hyperlinks to Microsoft's Media Player
<center><a href="http://windowsmedia.com/download/"><img src="images/mediaplayer.gif" border=0></a></center>
HYPERLINK TEXT
How to link text to a web address?
this hyperlinks to Microsoft's Media Player
<center><a href="http://windowsmedia.com/download/" >Windows Media Player</a></center>
FRAMES
How to create a simple frameset?
incorporating a heading and navigation frame
<html>
<frameset rows="120,100%" border=0>
<frame src="top.html" name="TOP" scrolling="no">
<frameset cols="150,100%" border=0>
<frame src="left.html" name=LEFT scrolling="auto">
<frame src="main.html" name=MAIN>
</frameset>
</frameset>
</html>
Note that the first frameset, setting out the depth(s) (120 pixel, 100% (the remaining depth)), encompasses not only a frame pointing to the TOP, but also a second frameset setting out the width(s) (150 pixels, 100% (the remaining width)), further incorporating two frames… ONE, pointing to a LEFT column (navigation bar), and TWO, pointing to a RIGHT column (MAIN frame). This file must be named index with either an .htm or .html extension, e.g. index.html and accompanied with three further files… ONE, top.html to include a heading for example… TWO, left.html to include a navigation bar for example, perhaps with links to additional pages… and THREE, main.html the Home page.
As for images, the command border=0 is to turn OFF a border. If you require a border, exclude this command. scrolling="no" is to exclude a scroll bar, therefore scrolling="yes" would be to include a scroll bar. The frame pointing to left.html (navigation bar) is set to scrolling="auto". In this case ensure that ample width is allowed for the left hand column within the framset to accommodate a scroll bar should it be needed.