This article covers some of the simple, standard HTML elements.
In the next article, several more complex structures will be covered.
Text in HTML
HTML documents may contain pure text. This form of writting involves the use of text and breaks. As well as this, it is possible to style text as required using some very plain HTML.
In the older days, HTML was displayed as shown in the following code sample:
<font color="blue">My first text</font>
In HTML of today, this is not permitted. In fact,
the use of CSS is encouraged here. CSS will be covered later. For now, this is simply
how text is declared in HTML in relation to the top level
element (<html>).
<html> <head> </head> <body> My first text </body> </html>
Breaks
Breaks are the same as line endings for HTML. They represent
the standard \n character used in other
languages such as C or Java. This means that the current line is
ended on that character.
In HTML, a break is represented in the form of
<br> and in XHTML
<br/>.
The following sample shows how a piece of text can broken up using a break.
<html> <head> </head> <body> My first text <br> My second text <br> My third text </body> </html>
My second text
My third text
Horizontal lines
A horizontal line can be used to break sections. By default HTML includes a way of doing this to make development easier. Similar to the way the break works, the horizontal line uses just two characters and is a self closing element.
<html> <head> </head> <body> My first text <hr> My second text <hr> My third text </body> </html>
My second text
My third text
Paragraph
The paragraph structure is a very nice and neat way of displaying text in a more readable fashion. In almost all occasions, paragraphs are separated by a single line. The HTML paragraph structure does this automatically, just as Microsoft Word would do, thus making for an easier to develop website.
Paragraphs themselves can contain line breaks, which means
that text within them can be broken line by line. This website
used to implement the <br> element in almost all articles prior
to the new design due to the web editor being used.
A paragraph of text is opened using the paragraph element
that is formed using <p>. It is not a self closing tag, and
therefore must be closed at the end of the text that is to be
included in the paragraph using </p>. This is an absolute must
for the sake of formatting.
<html> <head> </head> <body> <p>My first text </p> <p>My second text <br> My third text</p> </body> </html>
My first text
My second text
My third text
Font styles
Font styles can be determined by HTML as well. In Microsoft Office for instance, text can be selected and then at the click of a button a style such as bold, italic or underline can be applied. HTML is not much different - instead of selecting the text, the appropriate tag is placed before the text and then the closing tag after. Here is a simple bold italic example:
<b><i>Hello world</i></b> this is no longer bold italic
The previous sample would look like:
The order of tags is very important. In the previous sample, the bold tag opened on the outside, so the bold tag must be closed after the italic tag is closed.
| Tag | Purpose | Sample |
|---|---|---|
| <b> | Defines bold text | Sample |
| <em> | Defines emphasized text | Sample |
| <i> | Defines a part of text in an alternate voice or mood | Sample |
| <small> | Defines smaller text | Sample |
| <strong> | Defines important text | Sample |
| <sub> | Defines subscripted text | Sample |
| <sup> | Defines superscripted text | Sample |
| <ins> | Defines inserted text | Sample |
| <del> | Defines deleted text |
It is important to note the difference between strong and bold and emphasized and italic for syntactical purposes.
Hyperlinks
Hyperlinks have become known by their colloquialism of 'link'. Whilst HTML etc define links using the word link, the full name for such an device is actually a hyperlink as defined by the original HTTP specification. For the sake of saving reading space, this article will refer to them by this colloquialism.
The difference between a hyperlink and a link is very informal and incomplete, but can be seen from the following point of view; a hyperlink takes a user somewhere, whereas a link is used to make a chain between the current file and another. For instance, a link in CSS will 'attach' or 'chain' another page to the current page.
A hyperlink is a part of a document on a web page that takes a user to another location. Files can be hyperlinked using the file:// and web directories can be accessed using http:// (amongst other prefixes).
HTML allows the creation of links that join a page to another, for instance in a menu. These links are contained in an anchor element which allows further customisations to the link. A link consists of a href attribute that points to the page.
<html> <head> </head> <body> <a href="http://www.jamiebalfour.scot/">This is a link</a> </body> </html>
There are two kinds of linking methods avaliable, relative and absolute. Relative linking is used when the file is in a location that is on the same website or web server. In fact, a relative link always omits the http:// and www. parts of a URL to the file. An absolute link is a full link with all the www. part and so on in it.
Links do not need to have http://... in front of them. In fact there are many ways to reference a page. Below is a list of ways of referencing pages using a link:
| Syntax | Location of link | Type |
|---|---|---|
<a href="/index.html">My page</a> |
By placing just one preceeding slash in the link, this refers to the document root, the lowest level location on the server from where the page is placed. | Relative |
<a href="../index.html">My page</a> |
By placing the preceeding double dots ( .. ) in front of the slash this refers to the directory directly one up from the current location. | Relative |
<a href="../../index.html">My page</a> |
By placing a dots and then a slash and repeating this will refer to the directory two up from the current location. | Relative |
<a href="index.html">My page</a> |
By not placing anything in precedence of the link, this page is referring to a page called index.html in the current directory. This is particularly useful if the structure of a website is changed frequently. | Relative |
<a href="http://mysite.com/index.html">My page</a> |
By using the full URL, the link is referring to an a file using an absolute path, that is one that will be found, no matter what, in that directory. | Absolute |
<a href="#link1">Section 1</a> |
By using a hash ( # ) at the start of a link, it
refers to an element with an id attribute
that matches the link on the current page. |
Relative |
<a href="http://mysite.com/index.html#link1">Section 1</a> |
By using a page URL and then finishing it with a hash ( # )
then a piece of text, it
refers to an element with an id attribute
that matches the link on the specified page. |
Absolute |
The link can contain quite a few different elements, including the image element, text or anything that is required. However, HTML5 is more strict than any previous version of HTML in specifying what can be contained in the link.
Images
As part of building a website, images are very much an important visual metaphor. Using images improves the site appearance significantly, but is not without costs - using images slows the delivery of a website due to the fact that each image needs to downloaded. As bandwidth increases and costs go down for a good connection, this becomes less of a worry, but smartphone users still have monthly allowances to keep an eye on, so images should be compressed.
In HTML, images are represented using the img tag.
The img tag in XHTML needs to be closed as a self
closing tag. The following sample shows how an image is
represented in HTML.
<html> <head> </head> <body> <img src="https://www.jamiebalfour.scot/images/Favicon.png" alt="My Favicon"> </body> </html>
The next part of this tutorial will cover divisions, tables, lists, inline frames and styling.
