The second of a series of articles intended to teach HTML to people who want to build their own webpages.
In part 1, I introduced HTML and the concept of tags. Before I go any further, I want to introduce a number of useful tags which we can use to build our webpages. This is not a complete list, but will allow us to construct a far more interesting webpage, which I will link to at the end of this article.
<html></html>
These tags enclose the entire HTML document. The HTML document is split into two sections.
<head></head>
These tags enclose the HTML header section. This contains information about the HTML page, but nothing here actually appears in the main body of the page. This does contain the title of the webpage, however, see below.
<title>The Page Title</head>
This is how the page title is specified. This must appear between the <head></head> tags above. The title of the webpage appears across the top of the browser window and will be used as the default name of the page if saved to your favourites.
<style></style>
Style tags, also specifed between the <head></head> allow specification of appearance which can be applied to tags within the main body and used throughout the document.
<body></body>
These tags enclose the HTML body. This is where all the content that appears in the main body of the HTML page is specified along with how it should be shown.
<div></div>
These tags enclose a logical division or grouping of content allowing formatting and organisation. <div></div> can be nested, so that <div></div> can contain other <div></div> pairs.
<h1>Level1 Heading</h1>
These tags enclose text which is to be used as a heading. A level 1 heading is usually used as a Website Name to be displayed at the top of the page, but it might also be used as a page title. This appears within the page, as opposed to the title specified between the <title></title> tags above, which does not. There are other levels of heading available; <h2>Level2</h2>, <h3>Level3</h3>, etc.
<p>paragraph text</p>
These tags enclose a paragraph of text. Text withing a paragraph will be automatically word wrapped, as necessary, by the browser. Successive paragraphs will be spaced vertically.
<br />
This is a line break. This tag doesn’t logically enclose anything, so it closes itself. This forces a newline in the text, but not a new paragraph, so the newline will be immediately after the previous line with no paragraph spacing.
<b></b> <i></i>
These two pairs of tags change the enclosed text to bold and italic, respectively. These are discouraged and use of styles is preferred..
<image />
This tag allows you to specify am image to be displayed on the page. Since it is not meaningful for this tag to enclose anything else, it closes itself.
<a href=”URL”>hyperlink</a>
This is a very important tag and is the main way that webpages link to each other. The text between the two tags provides the hyperlink that, when clicked on in the browser, will redirect the browser to another webpage. The URL specifies the address of the webpage to be linked to.
There are, of course, many more tags to learn, but with the above we can put together another webpage which you can view here. Follow the instructions on the page to view the source.
When you have obtained the source HTML above, you can move on to the next article, which will explain the source in more detail.
Mon, Apr 13, 2009, by Lee Leon
Web Design