Copyright Derek O'Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.
Students should be aware that the area of HTML covers far more than the contents of these notes. The notes only cover some of the more immediately useful aspects of HTML.
Note Most of the HTML style properties are not covered here, as they are better dealth with in the cascading style sheets (covered in the CSS section of these notes) section of these notes.
In an ideal world all web browsers would display a webpage in exactly the same way. Unfortunately this is not the case. HTML is an evolving standard. Over time more and more HTML tags are being added. Older browsers will not support some of the newer tags.
It is important to note that HTML:
HTML tags are surrounded by two angle brackets < and >. Normally tags come in pairs, with the closing pair having a leading / between the two angle brackets. For example, the code below is the HTML tag used for making text part of a paragraph.
<p>This is a paragraph element, because it is contained within a pair of "P" tags </p>
The information contained between the opening and closing tags is the tag's element.
Many HTML tags have one or more attributes that can be used to determine how the tag will behave. For example:
<p align="justify">This text will be justified </p>
When using tags we should be aware of the following:
A webpage should contain the following tags:
Technically, the <!doctype> declaration is not a HTML tag. It is an instruction to the web browser about what version of HTML the page is written in. A file is identifed to browsers as being HTML5 if it contains the declaration <!doctype html>
The <!doctype html> declaration must appear before the <html> tag. It is best practice to place the <!doctype html> declaration as the first line of code in a webpage.
The <html> tag identifies a file as being a HTML file.
The <head> tag contains all the tags that occur in the head of a webpage. <head> element information is not displayed in a web browser.
We should always include the code below in the header.
<title>The webpage title goes here</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
The <title> tag allows us to display a title on the webpage's browser tab. It is also used to identify the webpage if a user bookmarks it.
The charset attribute specifies the character encoding for the HTML document. The HTML5 specification encourages web developers to use the UTF-8 character set, which covers all characters and symbols in the English and other western languages.
The meta tag's name="viewport" attribute gives the browser instructions on how to control the viewport's (i.e. webpage's) dimensions and scaling. It ensures that the webpage will display properly on computers and mobile divices.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
The body tag contains the main body of a webpage. This includes all of the visible elements that we can see on a webpage, such as the <p> tag.
Below is shown the code for a very simple webpage.
<!doctype html>
<html>
<head>
<title>Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>This line of text will appear in the browser window,as it is contained within the body.</p>
</body>
</html>
Copy the code above into an editor and run the webpage.
Change the content of the webpage that you have created.
A <title> tag should always be included in a webpage's <head> element as a matter of habit. The <title> tag provides a webpage with a title. This title is used when:
Write code to make a webpage that contains a title.
A favourite icon (favicon) is a small icon that shows up next to a website's url in a web browser. Favicons are also know as shortcut icons. In most browsers, when you add a webpage to your favorites or bookmarks, the browser will display the favicon along with it.
Favicons can be made from .jpg, .gif or .png images. You do not have to pre-size the images for them to work (however, you should consider the download overhead that might be associated with large files). Insert the appropriate line of code below in the header section of your code to use a .jpg, .gif or .png file as a favicon.
<link rel="icon" type = "image/x-icon" href="myImage.ico"> <link rel="icon" type="image/jpeg" href="myImage.jpg"> <link rel="icon" type="image/gif" href="myImage.gif"> <link rel="icon" type="image/png" href="myImage.png">
Place your own .gif favicon in a webpage, as shown here.
What happens if the image is not square?
What happens if the images has a large width and height?
Favicons do not need to be placed in the website's root folder.
Write code to place a favicon in an "images" folder, as shown here.
Comment are enclosed within the "<!--" and "-->" tags.
For example:
<!-- This is a comment -->
We cannot place a comment inside the defining <> brackets of another tag. The code below is invalid.
<p <!-- Invalid comment --> > This HTML code will not work.</p>
Basic text layout consists of headings and paragraph.
Heading tags are used for the various levels of heading, where <H1> is the highest level.
The default text layout is paragraph, denoted by the <p> tag.
The various HTML heading and paragraph tags ignore all whitespace, which includes carriage returns. The <br> tag is used to force a line-break. By using the <br> tag instead of seperating a paragraph into two paragraphs we can keep related text blocked together. If we use two paragraphs, then there will be spacing placed between the two paragraphs. Although it can be used with any text layout tag, the <br> tag is usually used with the <p> tag.
Note that the <br> tag does NOT have a closing tag.
Write code to show the h1, h2, h3, h4, h5 and h6 tags.
What happens if you use a h7 or a h80 tag?
Why should br tags not be used to format the spacing between items on a webpage?
Escape sequences are used to generate special characters. A full list of escape sequences can be got by clicking here. Special characters include:
The <pre> tag is used when whitespace (which is normally discarded by other elements) is as much a part of the content as the rest of the text. The <pre> tag is normally used to display computer programming code, because it maintains indentations.
Write code to produce the webpage shown here.
You should never format webpage content using html, as your code will not be maintainable. These tags are being shown only so that you will recognise them if you see them in another person's website.
I shall only skip over the obvious text formatting options, as the recommended way to format text is using cascading style sheets (covered in the CSS section of these notes). Text formatting tags include:
- <blockquote> indents its contents </blockquote>
<blockquote> use two or more blockquotes to indent contents further </blockquote>
The <hr> tag draws a horrizontal line across a webpage. Note that there is no closing tag for <hr>. Its width can be specified using either pixels or as a percentage of the browser window. By default, a line will be drawn the full width of the browser window. Various attribute of <hr> are
Some <hr> tag examples:
<hr>
<hr width="100" size = "10" align = "left">
<hr width="50%" size = "10" noshade>
<hr color = "red" size = "10">
In order to keep the structure of a website uniform, the various webpages are keep in sub-folders of the website's root folder. The exception to this rule is the index.html webpage, which must be in the root folder. This webpage is usually used to display a once-off animation. If a site does not have a once-off animation webpage, then the index.html webpage has no purpose. In this case, you can force the index.html webpage to redirect to a different webpage.
The code below will force a new webpage to load. Note that there is no need to include a "body" element in the calling webpage, as the calling webpage will never be displayed.
<!doctype html>
<html>
<head>
<title>Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv = "refresh" content="0; url=./home/home.html">
</head>
</html>
The highlighted code code will cause the webpage "home.html" in the folder "home" to load. The 0 in the code represents the number of seconds to wait before redirection occurs. The 0 means that the "home/home.html" webpage will load immediately.
When might you want to redirect to a new webpage?
Write code to redirect from a webpage to a second webpage after a period of three seconds.
The <img> tag is used to insert GIF, PNG or JPEG graphics files into webpages. Note that BMP graphics files cannot be inserted into a webpage.
<img src = "myimage.gif">
An alternative text can be given for an image. This text is displayed if the image does not load.
<img src = "myimage.gif" alt = "This is the alt text">
An additional tooltip text can be given for an image. This text is displayed when the mouse rolls over the image.
<img src = "myimage.gif" title = "This is the title text">
An image can be forced to resize onto a predefined width and height (using either pixel or % values). For example, use the code below to force an image to resize into a 100 by 200 pixel size. Note that in this example, because neither "px" or "%" was specified, the values default to "px". You should never format webpage content using html, as your code will not be maintainable.
<img src = "myimage.gif" width = "100" height = "200">
which is the same as explicitly stating that pixel values are being used, as shown below:
<img src = "myimage.gif" width = "100px" height = "200px">
The code below uses % values. It will force the image to become half the width of the browser window and twice the height of the browser window that it is being displayed in.:
<img src = "myimage.gif" width = "50%" height = "200%">
Write code to display four images beside each other, as shown here.
Adjust the code above so that the same four images (with the same width) are displayed on four separate lines, as shown here.
The default for displaying images is eager loading. This means that all images are loaded when a webpage opens. If there are many images, such as in an image galley, this approach can delay the opening of the webpage. Image loading can be delayed until the image becomes visible on the screen. This is called lazy loading. An image can be set to eager or lazy load using the code below:
<img src = "myimage.gif" loading = "eager"> <!-- this is the default --> <img src = "myimage.gif" loading = "lazy">
Hyperlinks are used to create a link to another webpage. The <a> tag is used to create a hyperlink. The web address is supplied as the value of the href attribute of the <a> tag. For example:
<a href = "https://www.dkit.ie">Go To DkIT</a>
Write code to allow a user to click on a hyperlink that will open the google webpage.
Anchors allow us to link to any element in a webpage that has an id attribute. The code below will give the <div> an id called "myAnchor".
<p id = "myAnchor"></p>
Use the # character to link to an anchor within a webpage. Anchors can be in different webpages or within the current webpage, as the following two examples show:
<a href = "#myAnchor"> Go To the anchor called myAnchor in current webpage</a>
Write code to allow a user to click back to the top of a webpage, as shown here.
An anchor in a different webpage can be used in a hyperlink. This is done by including the anchor in the href value of the hyperlink, as shown below:
<a href = "http://www.somewebsite.com#someAnchor"> Go To Staff section of DKIT webpage</a>
Write code to allow a user to click to a specific location within another webpage. For example, clicking here will take you to the iPhone6 anchor in this webpage.
An image can be used as a hyperlink. For example:
<a href = "www.dkit.ie"><img src = "myimage.gif"> </a>
Write code to use an image as a link to another webpage.
By default, a linked to webpage will overwrite the current webpage. If you wish for a linked to webpage to open in a new browser tab, then set the target attribute to be the value "_blank".
<a href = "https://www.dkit.ie" target = "_blank">Go To DkIT</a>
Click on the link below to see a webpage overwriting the current webpage:
<a href = "https://www.dkit.ie">Click
here to load dkit.ie into this webpage's window</a>
Click on the link below to see a webpage loading into a new tab:
<a href = "https://www.dkit.ie" target = "_blank">Click
here to load dkit.ie into a new window</a>
Write code to allow a user to load the google webpage in a new browser tab.
The <span> and <div> tags allow content to be grouped together and to be treated as a single element. The only difference between the two is that the <span> tag does not introduce any linebreak either before or after itself and the <div> tag does introduce a linebreak both before and after itself.
The <span> is used to apply a style to part of an element, such as some text within a paragraph. For example, the code below produces the output shown immediately under it:
<p>Within this paragraph, <span style = "border:thin solid red"> this part has a style applied to it</span> using a <span> tag. The style does not insert a newline into the paragraph.</p>
Within this paragraph, this part has a style applied to it using a <span> tag. The style does not insert a newline into the paragraph.
Using the <div> tag in place of the <span> tag results in the code and output below:
<p>Within this paragraph, <div style = "border:thin solid red"> this part has a style applied to it</div>using a <div> tag. The style inserts two newlines into the paragraph.</p>
Within this paragraph,
using a <div> tag. The style inserts newlines into the paragraph.
<div> elements are often used to organise other related elements together. This will be very useful when we apply styles to the related elements. For example, the code below places three links in the same <div> element.
Example of a <div> element holding three <a> elements (Run Example)
<div> <a href="https://www.google.com" target="_blank">Google</a> <a href="https://www.microsoft.com" target="_blank">Microsoft</a> <a href="https://www.apple.com" target="_blank">Apple</a> </div>
Like hyperlinks, image maps act as a link to another webpage. Image maps are often used for creating website navigation bars.
Client-side image maps are created using the <map> and <area> tags.
The <map> tag identifies the image map being used and acts as a container for the <area> tags.
Each <area> tag requires at least the following two attributes:
- area (shape), which can be any of the following:
- circle (requires three values: center-x, center-y, radius)
- rectangle (requires four values: left, top, right, bottom)
- polygon (requires and even number of values: x1, y1, x2, y2, ..., xN, yN)
- link (href), which is a hyperlink
An image map must be tied to an image. This is done using the <img> tag. For example, to link an image to an image map called "mymap", use the code shown below:
<img src = "myimage.gif" usemap = "#myMap">
Note from the code above that:
Below is an image map example:
<img src = "../images/imagemap.gif"
title = "title text for image"
usemap = "#myMap">
<map name = "myMap">
<area shape = "circle" coords="70, 84, 52"
href = "https://www.dkit.ie"
title = "title text for a hyperlink"
target = "_self">
<area shape = "rect" coords="25,180,125,280"
href = "http://www.google.com"
target = "_parent">
<area shape = "poly" coords="153,106,186,225,340,193,315,81,304,167"
href = "http://www.microsoft.com"
target = "_blank">
</map>
Create an image map to link to the four schools within DkIT, such as the one shown here. You can use a tool, such as the one at https://www.image-map.net/ to get the poly coordinates of the maps.
HTML supports three different types of list:
Unordered list place the same bulleted character in front of each list item. They are enclosed using the <ul> tag.
Items within an unordered list are enclosed using the <li> tag. For example:
<ul> <li>first item in unordered list</li> <li>second item in unordered list</li> </ul>There are various types of bullets that can be applied to an unordered list, the default of which is square. The type is attached to the <ul> tag. Types include:
- circle
- disc
- square
For example, to make an unordered list that is bulleted using squares, apply the following code:
<ul type = "square">
Items within an ordered list are enclosed using the <li> tag. For example:
<ol> <li>first item in ordered list</li> <li>second item in ordered list</li> </ol>There are various types of numbering, the default of which is decimal numerals. The type is attached to the <ol> tag. Types include:
- The digit "1"
- The lowercase character "a"
- The uppercase character "A"
- The lowercase roman numeral "i"
- The uppercase roman numeral "I"
For example, to make an ordered list that is ordered using lowercharacters, apply the following code:
<ol type = "a">To start an ordered list at a particular position, attach the start property to the <ol> tag. For example, to start a list with an uppercase roman numeral III, apply the following code:
<ol type = "I" start = 3>Write code to display an ordered list of products, using lower case roman numerals as the numbering, as shown here.
Definition lists are use to hold a headline and an associated text. Definition lists are treated differently to unordered and ordered lists. A definition list makes use of three tags:
- <dl> is the container tag for the entire list.
- <dt> is the tag used to hold each headline (title)
- <dd> is the tag used to hold the detail (body of text) associated with a particular headline. Browsers will indent the detail further than the title.
Example of a definition list (Run Example)
<dl> <dt>Product 1</dt> <dd>This product's details will be shown indented below its definition</dd> <dt>Product 2</dt> <dd>So will this product's details</dd> <dt>Product 3</dt> <dd>And so will all other product's details</dd> </dl>Write code to display titles and images for a list of iPhones, as shown here.
Each table needs to be contained within a <table> tag. Each table will consist of a set of rows, which are defined using the <tr> tag. Each row will consist of a set of columns, which are defined using the <td> tag.
For example, to produce a table that has no borders and fits as tightly as possible around it contents, as shown below:
| top left | top right |
| bottom left | bottom right |
use the code below:
<table> <tr> <td> top left </td> <td> top right</td> </tr> <tr> <td> bottom left</td> <td> bottom right</td> </tr> </table>
By default, a table has no border, is as small as possible and is alligned to the left. We can use the border attribute to create a border. We can use the width attribute to specify a width in either pixels or as a % of the browser window's width. We can use the align attribute to align a window to the left, right or in the centre.
For example, to produce the table below:
| top left | top right |
| bottom left | bottom right |
use the code below:
<table border = "5" width = "50%" align = "center">
<tr>
<td> top left </td>
<td> top right</td>
</tr>
<tr>
<td> bottom left</td>
<td> bottom right</td>
</tr>
</table>
I have only skiped over the obvious table formatting options, as the recommended way to format tables is using cascading style sheets (covered in the CSS section of these notes).
We can add a caption to the table using the <caption> attribute, as shown in the example below:
| top left | top right |
| bottom left | bottom right |
use the code below:
<table border = "5" width = "50%" align = "center">
<caption align = "bottom">Demo Table</caption>
<tr>
<td> top left </td>
<td> top right</td>
</tr>
<tr>
<td> bottom left</td>
<td> bottom right</td>
</tr>
</table>
Column headings (table headers) are created using the <th> tag. The <th> tag can be used to create row headers by including it at the beginning of a row. The <th> tag can be placed anywhere that the <td> tag can be placed. The only difference between the <th> and the <td> tag is that the <th> tag renders text in bold and centres it while the <td> tag does neither. For example, to produce the table below:
| Heading 1 | Heading 2 |
|---|---|
| name 1 | address 1 |
| name 2 | address 2 |
use the code below:
<table width = "100%" border = "2">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>name 1</td>
<td>address 1</td>
</tr>
<tr>
<td>name 2</td>
<td>address 2</td>
</tr>
</table>
Write code to show a list of colours along with their hex code, as shown here.
Why is the colour example above bad coding practice?
Column widths can be set using the width attribute. It can be set using either pixel or % values. If not all columns have their width set, then only the non-set columns will have a variable width when the table is rendered.
Column heights can be set using the height attribute. It can be set using either pixel or % values.
For example, to produce the following width and height modified table:
| width of this column has been set to set to 100 pixels. | This row has been given no specific height. | Width of this column has been set to 50% | ||
| This row has been given no specific height. | ||||
| This row has been set to a height of 500 pixels. | thin data | This cell will automatically expand to have enough room for
its image |
use the code below:
<table width = "100%" border = "2" cellspacing = "0" cellpadding = "0">
<tr>
<td width = "100"> width of this column has been set to set to 100 pixels. </td>
<td> This row has been given no specific height. </td>
<td> </td>
<td> </td>
<td width = "50%"> width of this column has been set to 50% </td>
</tr>
<tr>
<td width = "100"> </td>
<td> This row has been given no specific height. </td>
<td> </td>
<td> </td>
<td width = "50%"> </td>
</tr>
<tr>
<td width = "100" height = "500"> </td>
<td height = "500"> This row has been set to a height of 500 pixels. </td>
<td height = "500"> thin data </td>
<td height = "500"> This cell will automatically expand to have enough room for
its image<img src="image_map_demo.gif" width="200" height="100"> </td>
<td width = "50%" height = "500"> </td>
</tr>
</table>
Several rows can be joined together to span several columns using the rowspan attribute. Several columns can be joined together to span several rows using the colspan attribute.
Note: Table cells should never be spanned. Tables are meant to hold tabular data. Tables should never be used to layout content on a webpage. This code is shown only so that you will recognise it if you come across it in a badly constructed webpage.
An example of a table that spans row and colmuns is shown below:
use the code shown below:
<table width = "100%" border = "2">
<tr>
<td rowspan = "3"> </td>
<td colspan = "4"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan = "4"> </td>
</tr>
</table>
Frames can be used to display the content of another webpage inside your own webpage. An iframe needs to be given the name of a source webpage, which will be loaded into the iframe.
<iframe src = "https://www.dundalk.ie"></iframe>
A width and a height can be assigned to an iframe. In the example below, only the second iframe has a width and height associated with it:
Example of an iframe (Run Example)
<h1>Dundalk Chamber of Commerce</h1>
<iframe src = "https://www.dundalk.ie"></iframe>
<h1>Louth County council</h1>
<iframe src = "https://www.louthcoco.ie" width = "800px" height = "400px"></iframe>
Although it does not produce an error, it makes no sense to have an iframe that does not have a src defined, as src is the only way that content can be placed into a frame. Any text typed between the <iframe> and </iframe> tags is ignored.
The content of an iframe cannot be book-marked, as it is contained inside another webpage.
The iframe width and height cannot be set using a % value.
Write code to fill the screen with two webpages, as shown here. You will need to use Javascript code to get the window width and height.
A frameset is a container that seperates a browser's window into two or more frames. A frameset does not appear in a browser itself. Instead it specifies how other webpages should appear in a browser. Framesets are contained within a <frameset> tag. The <frameset> tag uses the 'rows' and 'cols' attributes to position two or more frames and/or framesets within itself. rows and cols values can be in pixels, % or "*" (which means take up all remaining available space. For example, cols = "*,*,*" tells the browser to divide the screen into three frames of equal width).
Note: In general, you should not use Framesets.
Example of a frameset (Run Example)
<frameset rows = "*"
cols = "400,*"
framespacing = "0"
frameborder = "no"
border = "0">
<frame src = "https://www.dundalk.ie"
name = "chamberOfCommerceFrame"
scrolling = "auto"
noresize>
<frameset rows = "*,200"
cols = "*"
framespacing = "0"
frameborder = "no"
border = "0">
<frame src = "https://www.louthcoco.ie"
name = "louthCoCoFrame">
<frame src = "https://www.irishrail.ie"
name = "irishRail"
scrolling = "no"
noresize>
</frameset>
</frameset>
<noframes>Your browser does not support iFrames</noframes>
In the above example, the noresize attribute is used to force the chamberOfCommerceFrame and the irishRail frames to be of a fixed size.
In the above example, the scrolling = "no" attribute is used to disable the scrollbar on the irishRail
Copyright Derek O' Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.