Below is a list of reference material that I've put together over the years here at

Quackit.
Go ahead and check it all out.

1
2
HTML Tutorial
This tutorial is for beginners. It teaches you HTML from the ground up — starting with the basics.
Coding HTML is actually quite easy, as this tutorial will demonstrate.
This HTML tutorial is separated into the following lessons:
Introduction to HTML

Getting Started

HTML Elements

HTML Formatting & Semantics

HTML Attributes

HTML Styles

HTML Colors

HTML Links

HTML Images

HTML Meta Tags

HTML Comments

HTML Forms

HTML Tables

HTML Image Maps

HTML iFrames

HTML Entities

HTML Layouts

HTML Scripts

HTML Website Templates

Website Hosting

Summary

3
HTML, which stands for Hypertext Markup Language, is the standard markup language used to create
web pages.

HTML consists of HTML elements, which define the different parts of the document. The web
developer uses HTML tags to specify which elements go on a given page. For example, you can use
HTML tags to specify headings, paragraphs, lists, tables, images and much more.

What do I need to create HTML?

You don't need any special equipment or software to create HTML. In fact, you probably already have
everything you need. Here is what you need:

Computer
This is probably an obvious one. Tablets should be fine too, and maybe even your smartphone.

HTML Editor
Screenshot of Brackets Editor
An HTML editor is an application that helps you create HTML pages.

While you can certainly create HTML documents using a simple text editor, an HTML editor will
make your life easier — especially if you plan to write a lot of code.

HTML editors usually highlight your code so that it's easier to read, and they will typically have an
autocomplete feature that picks up on what you're typing, and makes valid HTML suggestions.

Free HTML Editors

Many HTML editors cost money, but there are also a few free ones around.

Examples include Brackets (pictured), SeaMonkey, CoffeeCup free version (Windows) and
TextPad (Windows).

Or a Text Editor
If you don't have an HTML editor, and you don't want to download one just now, a text editor is fine.
The examples in this tutorial are simple enough to create with a text editor. Most computers already
have a text editor.

4
Examples of text editors include Notepad (for Windows), Pico (for Linux), or Simpletext/Text
Edit/Text Wrangler (Mac).
Web Browser
To view the results of your HTML code.
OK, technically, you can create HTML without viewing the results, but where's the fun in that!
Do I need to be online?
No, you do not need to be online to create web pages. You can create web pages on your local
machine. You only need to go online when you want to publish your web page to the web (this bit
comes later).
The next lesson will show you how to create a web page in less than 5 minutes.
About HTML
HTML stands for Hypertext Markup Language, and it's the standard markup language used to create
web pages.
HTML is a subset of Standard Generalized Markup Language (SGML) and is developed by the World
Wide Web Consortium (W3C) and Web Hypertext Application Technology Working Group
(WHATWG).
Is there an HTML Standard?
Yes. Actually, there's two standards... or three, depending on how you look at it.
The W3C Standard
One group, the W3C (World Wide Web Consortium), maintains the HTML5 specification, which is a
"snapshot" of the specification at a particular point in time.
The W3C also maintains a HTML 5.1 Nightly, which includes modifications to the specification that
will be released at a later date (and under a new version number - HTML 5.1).
The WHATWG Living Standard
The other group, the WHATWG (Web Hypertext Application Technology Working Group),
maintains what they call a Living Standard for HTML. This is a standard that is continually updated.
There are no version numbers (i.e. it is HTML not HTML5). The standard can (and does) change on a
regular basis. The reason behind this is in order to stay relevant with browser implementations. It can
also avoid issues with browsers implementing features from a "snapshot" specification that potentially
contains known bugs, issues or limitations.
Which Version to Use?
Fortunately, there are not many differences between the W3C's nightly document and the
WHATWG's Living Standard.
If you want to implement the latest features (potentially with limited browser support), then the
WHATWG Living Standard is probably the way to go.
If you prefer to keep your HTML documents strict to a specific, non-changing standard, then the W3C
official recommendation is the standard for you.

5
The code in this tutorial adheres to both standards (unless otherwise specified).
Let's create a webpage using HTML, then view it in a web browser.
OK, lets get straight into it. Here, you will learn just how easy it is to create a web page. In fact, by
the time you've finished with this web page, you will have created your own web page!

When you create a web page you will usually do something like this:
Create an HTML file
Type some HTML code
View the result in your browser
Repeat the last 2 steps (if necessary)
Create a Webpage
OK, let's walk through the above steps in more detail.
Screenshot of selecting a new page from an HTML editor.
Create an HTML file
An HTML file is simply a text file saved with an .html or .htm extension (i.e. as opposed to a .txt
extension).

Open up your HTML editor (such as Brackets or SeaMonkey). You could use you computer's normal
plain text editor if you prefer (this will probably be Notepad if you're using Windows or TextEdit if
you're using a Mac).

6
Create a new file (if one wasn't already created)
Save the file as html_tutorial_example.html

Type some HTML code

Type the following code:

View the result in your browser

Either...

Navigate to your file then double click on it

--OR--
Open up your computer's web browser (for example, Internet Explorer, Firefox, Netscape etc).
Select File > Open, then click Browse. A dialogue box will appear prompting you to navigate to the
file. Navigate to the file, then select Open.

7
Repeat the last 2 steps until you're satisfied with the result
It's unrealistic to expect that you will always get it right the first time around. Don't worry — that's
OK! Just try again and again — until you get it right.

Part of the fun of creating web pages is experimenting with different elements, styles, approaches, etc,
and then checking out the result.

Explanation of code
OK, before we get too carried away, I'll explain what that code was all about.

We just coded a bunch of HTML tags. These tags tell the browser what to display and where. You
may have noticed that for every "opening" tag there was also a "closing" tag, and that the content we
wanted to display appeared in between. Most HTML tags have an opening and closing tag
The next lesson goes into a bit more detail about HTML tags.

HTML Elements
HTML elements are the fundamentals of HTML. HTML documents are simply a text file
made up of HTML elements. These elements are defined using HTML tags.

An HTML element is an individual component of an HTML document. Any given web page
consists of many HTML elements.

HTML tags tell your browser which elements to present and how to present them. Where the
element appears is determined by the order in which the tags appear.

HTML consists of over 100 tags. Don't let that put you off though - you will probably find
that most of the time, you only use a handful of tags on your web pages. Having said that, I
highly recommend learning all HTML tags eventually - but we'll get to that later.

8
OK, lets look more closely at the example that we created in the previous lesson.

Explanation of the above code:

The !DOCTYPE... declaration tells the browser which version of HTML the document is
using.
The html element is the document's root element - it can be thought of as a container that all
other tags sit inside (except for the !DOCTYPE declaration).
The head tag contains information that is not normally viewable within your browser (such as
meta tags, JavaScript and CSS), although the title tag is an exception to this. The content of
the title tag is displayed in the browser's title bar (right at the very top of the browser).
The body tag is the main area for your content. This is where most of your code (and
viewable elements) will go.
The h1 tag defines a level 1 heading.
The p tag defines a paragraph. This contains the body text.
Closing your Tags
As mentioned in a previous lesson, you'll notice that all of these HTML elements have
opening and closing tags, and that the content of the element is placed in between them.
There are a few exceptions to this rule.

9
You'll also notice that the closing tag is slightly different to the opening tag — the closing tag
contains a forward slash (/) after the <. This tells the browser that this tag closes the previous
one.

Indents and Carriage Returns

You can indent the code and add extra carriage returns if you like. This can help with
readability, and it doesn't affect the way the page is displayed in the browser.

In fact, code indenting is a universal practice in computer programming circles, and most
HTML editors automatically indent the code for you as you type.

For example, we could take the above example, and indent it like the following example, and
it will still appear the same in the browser.

UPPERCASE or lowercase?
You can use uppercase or lowercase when coding HTML, however, most developers use
lowercase. This helps the readability of your code, and it also saves you from constantly
switching between upper and lower case. Lowercase also helps keep your code XML
compliant (if you're using XHTML), but but that's another topic.
Therefore...
Good: head
OK: HEAD
Optional Tags

10
Some of the above tags are optional in certain situations. In particular, the html, head, and
body tags can all be omitted.

So it would be perfectly valid to change the above example to this:

However, there are some very specific rules around when you can and can't do this. For
example, the html start tag can be omitted if it's not immediately followed by a comment, and
the same applies to its end tag. And the head element's start tag can only be omitted if the
element is empty, or if the first thing inside the element is an element. And its end tag can
only be omitted if the element is not immediately followed by a space character or a
comment. The body element also has its own specific rules for omitting tags.
If you're interested in learning which tags you can leave out, check the HTML specification
for the rules around the specific tags you'd like to omit.
If you're not sure whether or not it's OK to omit a tag, just include all tags (like in the first
example).
Omitting an element's start tag does not mean that it's not present in the HTML document
when you view it in a browser. The browser still generates the element behind the scenes.
In the next lesson, we learn about some of the more common formatting tags.

HTML Formatting and Semantics

Here, we look at formatting and semantics within HTML documents.

HTML provides the structure of the document (consisting of all the individual HTML
elements on the page).

HTML also provides the semantics of an HTML document. Elements are generally used for a
particular meaning. For example, a heading level 1 is more important than a heading level 2.

Most formatting and styling on web pages is done using CSS. However, browsers format
certain HTML elements in a standard way without the need for CSS. CSS is therefore only
for enhancing the presentation of an element from the default way the browser presents it.

11
Below are examples of common HTML elements, with an explanation of their usage, as well
as an example of their basic format when applied to an HTML document.

Headings
There is a special tag for specifying headings in HTML. There are 6 levels of headings in
HTML ranging from <h1> for the most important, to <h6> for the least important.

Here they are:

The <strong> Element

To place a strong importance on a piece of text, use the <strong> element.

The <em> Element

You can place an emphasis on text by using the <em> element.

Line Breaks
You can force a line break by using the <br> element.

Thematic Break

12
You can create a paragraph-level thematic break by using the <hr> element. Therefore, this
element allows you to separate different topics into logical groups.

In early versions of HTML, this element represented a "horizontal rule". However, HTML5
gave it a specific semantic meaning (it represents a paragraph-level thematic break).

Unordered (un-numbered) List

To create an unordered list, use the <ul> element to define the list, and the <li> element for
each list item.

Ordered (numbered) List

To create an ordered list, use the <ol> element to define the list, and the <li> element for each
list item.

Ordered List or Unordered List?

You may occasionally find yourself wondering which list is the best one to use. Here's some
info you can use as a guide.
Ordered Lists
Ordered lists should be used for when the order is important. They should be used only in
cases where, if you were to change the order, it would change the meaning.

13
For example, a list of step by step instructions should be placed in an ordered list if the order
of the steps are important (i.e. the steps need to be carried out exactly in the same order that is
presented in the list.

Another example could be a list ordered by ranking, such as a "top 10" list.
Unordered Lists
Unordered lists should be used whenever the order is not important. A grocery list is a typical
example of an unordered list (as long as it doesn't matter which order you get each item).
Ordered lists are often used in website navigation to present menu items. These are usually
styled with CSS to make them look more like navigation than a list.
We will be covering more HTML elements throughout this tutorial, but before we do that,
you should know about attributes.

HTML Attributes: What they are and How to use

HTML attributes can be added to HTML elements to provide further information about that
element.
HTML tags can contain one or more attributes. Attributes are added to a tag to provide the
browser with more information about how the tag should appear or behave. Attributes consist
of a name and a value separated by an equals (=) sign.
Example
Consider this example:

This example uses the <abbr> tag, which is used to indicate an abbreviation or acronym. But
something extra has been added to the tag — an attribute. This particular attribute (the title
attribute) provides a title for the element.
The name of the attribute is title. In this example, we've given it a value of Hypertext Markup
Language.
The title attribute can (optionally) be used on any HTML element to provide extra
information about the element's contents. When used with the <abbr> tag, it allows us to
provide an expansion of the abbreviation or acronym (i.e. we can say what the acronym
stands for).
When using the title attribute, most browsers will display its value as a "tooltip" when the
user hovers over the element.

14
Multiple Attributes
You can add more than one attribute to a given element.
Here's an example of adding two attributes to the <a> element (which is used for creating a
hyperlink to another web page).

The href attribute specifies the location of the web page that we're linking to.
We also use the title attribute to provide some advisory text — just in case the user didn't
already know ;)

More Attributes
There are many different attributes available to HTML elements. Here are some attributes
that you'll often encounter on any modern website:
class Used with Cascading Style Sheets (CSS) to apply the styles from a given
class.

style Used with CSS to apply styles directly to the element (i.e. inline styles).

title As seen above, can be used to display a "tooltip" for your elements. You
supply the text.

Some attributes can be used on every HTML element (full list here), some are available on
many (but not all) elements, while other attributes are only available on one specific element.
I've put together an alphabetical list of HTML5 tags. When you click through to each tag, you
can see all the attributes that can be used with that tag, as well as an explanation about each
attribute.
But there are a lot of attributes and you don't need to memorize them just yet. The good thing
about attributes is that, in most cases, they are optional.
Many HTML elements assign a default value to its attributes — meaning that, if you don't
include that attribute, a value will be assigned anyway. Having said that, some HTML tags do
require an attribute (such as the hyperlink example above).

15
You will see more attributes throughout this tutorial.

Code Assist
Many HTML editors provide a "code assist" feature, which presents all available attributes
when you begin to enter an HTML tag.

This can help tremendously, and saves you from having to memorize every single attribute
available for every single element.

HTML Styles
CSS allows you to specify how each HTML element is presented to the user.
HTML is quite limited when it comes to the appearance of its elements. This is not so good if
you're trying to give a website a unique look and feel, or you're trying to adhere to a corporate
identity.
But it's not the purpose of HTML to do such things. That's the job of CSS.

What is CSS?
CSS stands for Cascading Style Sheets, and its purpose is to enable web authors/designers to
apply styles across their websites.
With CSS, you can specify many style properties for any given HTML element. Each
property has a name and a value, separated by a colon (:). Each property declaration is
separated by a semi-colon (;).

16
Like this:

Types of Style Sheet

There are different ways to implement styles into an HTML document. Generally, these come
down to using an inline style sheet, embedded style sheet, and external style sheet.
Inline Styles
The above code is an example of inline styles. It is called inline because we declared the
styles within the HTML tag itself.

While inline styles can be a quick and convenient way to add styles to an HTML document,
this method should be used sparingly.
Adding inline styles all over a website can make it much more difficult to maintain. A small
change can become a major undertaking if the style has been applied to many pages across
the site.
Embedded Styles
A step up from inline styles (when it comes to maintainability) is embedded styles.

17
Embedded styles are added to the <head> element of the document (or a <noscript> element
that's nested within a <head> element), and can contain all (or at least, most) of the styles for
the document. This can make the document a bit easier to maintain, especially if it contains
many styles.

To add embedded styles to a web page, enclose the styles between <style> tags.

External Styles
Taking it a step further, you can put all your styles into an external style sheet.
External styles refers to creating a separate file that contains all style information. This file is
then linked to from as many HTML pages as you like — even the whole site.
To add an external stylesheet to a web page, use the <link> tag, providing the URL of the
style sheet in the href attribute, as well as rel="stylesheet".

18
For the following example, I've taken the styles from the above (embedded) example, moved
them to an external style sheet, then linked to that file.

So, you can see that the HTML file no longer contains any actual CSS code. The CSS code is
located in the external file.

The @import Rule

You can also use the CSS @import rule to import an external style sheet.
To do this, use the <style> tag.

Note that this method can affect performance and it's often more efficient to use the first
method (i.e. with the <link> tag).
However, the @import rule can also be used from within the external style sheet itself (in
order to import another style sheet into that one) without incuring the same performance
issues.

19
You're not limited to just one method of applying styles to a document. You can combine all
three methods if required.
Most modern websites use external styles for most (if not all) of their styles.
However, there are many valid reasons why they might also need to use one or both of the
other methods.

Selectors
Embedded style sheets and external style sheets use selectors to specify which element to
apply a style to. For example, body is a selector for the <body> element.
Here's the style sheet that I used for the above examples.

The first two selectors are body and h1. They select the HTML elements of the same name,
and the styles are applied to those elements.
The next selector is #intro. This is an ID selector. It selects the element on the page that has
an id attribute set to a value of intro. In other words, id="intro".
The next selector is .colorful. This is a class selector. It selects all elements in the HTML
document that have a class attribute with a value of colorful. In other words, class="colorful"
There are many other types of selectors that you can use to style your HTML elements.
Here are some of the things you can do with CSS selectors:
Select only those elements that have a certain attribute.
Select a certain element that has a certain attribute with a certain value.
Select a specific element, but only when it's inside another, specific element.
Select only the first child of a specific element.
Select only the last child of a specific element.

20
You can even specify which child (eg, the 3rd child, or the 4th, the 5th... etc).
Select an element only when it's being hovered over.
Much more.
Of course, as long as you can select it, you can style it. So you can get very specific when
selecting which elements to style. Here's a full list of CSS selectors that you can use for
reference.

HTML Colors: How to add Color to your Web

Page
Colors are applied to an HTML element using CSS. You can also pick which part of the
element to apply color to.

We've just seen the various ways of applying styles to an HTML document. Some of those
examples included adding color to the document. Seeing as color is a major part of any
website design, let's look more closely at applying color to a web page.
Foreground Color
Foreground color is used to change the color of an element's text.
Foreground color is specified like this color:orange;.
For example:

Foreground color can also (indirectly) affect the color of other parts of the element, including
its border.
This may or may not be the desired effect. However, it can always be overridden by explicitly
specifying a color for the affected property.
Try this
Below is an example where a border is specified, along with its color.

21
Remove border-color:olivedrab; from the styles, then click Run to see how it changes the
color of the border.

Background Color
Background color is specified like this: background-color:yellow
For example:

Border Color
We've already seen an example of specifying a color for an element's border (above). That's
one way of specifying the various border properties.
You can also specify several border properties in one go (rather than separating them into
different declarations). You can do this using the border shortcut property, which allows you
to specify the border's width, style, and color in one place.
Here's an example:

22
Embedded and External Styles
The examples on this page use inline styles. As with all styles, you can also use the
embedded method or the external method.

Color Names
In the above examples, I used color names to specify the colors.
You can specify a color by its name (eg, blue), its hexadecimal value (eg, #0000ff), RGB
value (eg rgb(0,0,255)), or its HSL value (eg hsl(240,100%,100%)).
Beginners may find it easier to specify colors by their color name, as color names are
probably a lot easier to remember than the other options. Although color names are easier to
remember, the hexadecimal, RGB, and HSL notations provide you with more color options.
Hexadecimal color codes are a combination of letters and numbers. The numbers go from 0
to 9 and the letters go from A to F. When using hexadecimal color values in your
HTML/CSS, you precede the value with a hash (#). Although hexadecimal values may look a
little weird at first, you'll soon get used to them.
If you use graphics software, such as Adobe Photoshop or GIMP, you might be used to the
RGB or HSL methods.
The chart below shows some examples of color names, along with their corresponding
hexadecimal and RGB values.

23
You can make up your own colors by simply entering any six-digit hexadecimal value
(preceded by a hash).

In the following example, we specify the same color using three different methods. The
resulting color is the same.

If we wanted to change to a different shade of blue, we could change our value slightly like
this:

Transparency
You can also use alpha to specify the level of opacity the color should have. This is only
available on RGB and HSL notations. To do this, add the letter "a" to the functional notation
(i.e. RGBA and HSLA). For example, rgba(0,0,255,0.5) results in a semi-transparent blue, as
does hsla(240, 100%, 50%, 0.5).

24
Here's an example of using RGBA to change the opacity.

Here's an example of using HSLA to change the opacity.

Choosing Colors - The Easy Way

By using hexadecimal, RGB, or HSL notation, you have a choice of over 16 million different
colors. For example, you can start with #000000 and increment by one value all the way up to
#FFFFFF. Each different value represents a slightly different color.

But don't worry — you won't need to remember every single hexadecimal color value! The
HTML color picker and color chart make it easy for you to choose colors for your website.

HTML Links: How to create Links to other Web Pages

This article explains how to create a link from one page to another. It also outlines the
different types of hyperlinks.
Links, otherwise known as hyperlinks, are defined using the <a> tag — otherwise known as
the anchor element.
To create a hyperlink, you use the <a> tag in conjunction with the href attribute. The value of
the href attribute is the URL, or, location of where the link is pointing to.
Example:

Hypertext references can use absolute URLS, relative URLs, or root relative URLs.
Absolute

25
This refers to a URL where the full path is provided. For example:

Relative
This refers to a URL where the path, relative to the current location, is provided.
For example, if we want to reference the https://www.quackit.com/html/tutorial/ URL, and
our current location is https://www.quackit.com/html/, we would use this:

Root relative
This refers to a URL where the path, relative to the domain's root, is provided.

For example, if we want to reference the https://www.quackit.com/html/tutorial/ URL, and

the current location is https://www.quackit.com/html/, we could use this:

The forward slash indicates the domain's root. No matter where your file is located, you can
always use this method to specify the path, even if you don't know what the domain name
will eventually be (as long as you know the full path from the root).
Link Targets
You can nominate whether to open the URL in a new window or the current window. You do
this with the target attribute. For example, target="_blank" opens the URL in a new window.
The target attribute can have the following possible values:
_blank Opens the URL in a new browser window.

_self . Loads the URL in the current browser window

_parent Loads the URL into the parent frame (still within the current browser window).
This is only applicable when using frames.
_top Loads the URL in the current browser window, but cancelling out any frames.
Therefore, if frames were being used, they aren't any longer.

26
Example:

Jump Links
You can make your links "jump" to other sections within the same page (or another page).
These used to be called "named anchors", but they're often referred to as jump links,
bookmarks, or fragment identifiers.
Here's how to link to the same page:

Add an ID to the Link Target

Add an ID to the part of the page that you want the user to end up. To do this, use the id
attribute. The value should be some short descriptive text. The id attribute is a commonly
used attribute in HTML.

Create the Hyperlink

Now create the hyperlink (that the user will click on). This is done by using the id of the link
target, preceded by a hash (#) symbol:

So these two pieces of code are placed in different parts of the document. Something like
this:

27
It doesn't have to be the same page. You can use this method to jump to an ID of any page.
To do this, simply add the destination URL before the hash (#) symbol. Example:

Of course, this assumes that there's an ID with that value on the page.

Email Links
You can create a hyperlink to an email address. To do this, use the mailto attribute in your
anchor tag.
Example:

Clicking on this link should result in your default email client opening up with the email
address already filled out.

28
You can go a step further than this. You can auto-complete the subject line for your users,
and even the body of the email. You do this appending subject and body parameters to the
email address.

Base href
You can specify a default URL for all links on the page to start with. You do this by placing
the base tag (in conjunction with the href attribute) in the document's <head>.
Example HTML Code:

HTML Images: How to add Images to a Web Page

Images make up a large part of the web — most websites contain images. HTML makes it
very easy for you to embed images into your web page.
To embed an image into a web page, the image first needs to exist in either .jpg, .gif, or .png
format. You can create images in an image editor (such as Adobe Photoshop, GIMP, Adobe
Illustrator, etc) and save them in the correct format.
Once you've created an image, you need to embed it into your web page. To embed the image
into your web page, use the <img> tag, specifying the actual location of the image.
This means that for a live website, any images need to be uploaded to the web, just like the
HTML files. Most websites have a separate directory for image files, called images or
similar.

Example of Image Usage

29
This example uses a forward-slash at the start of the image location. This specifies that the
path to the image starts from the current domain.
So if it's on the quackit.com domain, the image location will resolve to
quackit.com/pix/smile.gif.
The <img> element above contains a number of attributes. These attributes tell the browser
all about the image and how to display it. Here's an explanation of these attributes:
src Required attribute. This is the path to the image. It can be either an absolute
path, or a relative path (remember these terms from our last lesson?)

width Optional attribute. This specifies the width to display the image. If the actual
image is wider, it will shrink to the dimensions you specify here. Likewise, if
the actual image is smaller it will expand to your dimensions.
height Optional attribute. This specifies the height to display the image. This
attribute works similar to the width.

alt Alternate text. This specifies text to be used in case the browser/user agent
can't render the image.

Dimensions Using CSS

Instead of using the width and height dimensions as above, you could choose to set the size
using CSS. This can give you extra flexibility.
For example, it can sometimes be useful to specify a max-width or max-height instead of an
absolute size. This can prevent large images from ruining your layout (eg, if it's too big to fit
inside the content area). This can happen especially if someone tries to view your website on
a device with a small screen (such as a mobile phone).
In the following example, we use max-width:100% to ensure that the image is never too big
for its context. When you only use max-width (without using max-height), the browser will
rescale the image proportionally. In other words, the height will be rescaled along with the
width, and the image won't become squashed. When you do this, make sure you remove the
HTML width and height attributes, otherwise they will conflict with the CSS.
Click the button to compare this example and the above one in the editor. If you have a large
enough screen, the image should be displayed at different dimensions.

30
Image Links
You can make your images "clickable" so that when a user clicks the image, it opens another
URL. You do this by simply wrapping the image with hyperlink code.

Creating Images
The above examples assumed that you already had an image to embed into your web page.
To learn about creating images for the web, check out the Web Graphics Tutorial.

HTML Meta Tags: Adding Metadata to a Web

Page
Meta tags allow you to provide metadata about your HTML pages. This can be useful for
search engines, browsers, and other applications trying to understand more about your page.

What is Metadata?
Metadata is information about, or that describes, other data or information.
If we relate this to a web page, if you think about it for a moment, you could probably come
up with a lot more information about a web page than what you're actually displaying to the
reader. For example, there could be a number of keywords that are related to the page. You
could probably give the page a description. The page also has an author. All these could be
examples of metadata.

Adding Meta Tags to Your Documents

You can add metadata to your web pages by placing <meta> tags between the
<head></head> tags. The can include the following attributes:

Attribute Description

name Metadata name. The name specifies what aspect of metadata is being set.

31
 content Specifies the property's value.
charset Specifies a character encoding declaration.
http-equiv Used for http response message headers. For example http-equiv can be
used to refresh the page or to set a cookie. Values include content-type,
expires, refresh and set-cookie.
Example HTML Code
Keywords:

Description:

Author:

Refresh the page every 10 seconds:

The above examples are some of the more common uses for the meta tag.

HTML Comments: Adding Comments within your

Code
HTML comments help explain the code and are not visible to your website visitors.
Any HTML document can contain comments. Although comments are optional, they can be
very useful.
Now, I'm not talking about the comments section at the bottom of an article, where readers
can post their comments. I'm referring to comments within the code.
What is an HTML Comment?

32
An HTML comment is a part of the HTML code and it is used to explain the code. This can
be helpful for other HTML coders when trying to interpret someone elses code. It can also be
useful for yourself if you have to revisit your code in many months, or even years time.
Comments aren't displayed in the browser — they are simply there for the programmer's
benefit.
Comments can be used to introduce major sections of the code, or they can be used to explain
what a small section of code does. They are also often used at the top of a document to
explain things like, author, date first created, purpose of the file, provide info about related
files, and more.
How to write Comments
You write comments like this:

Comments always start with <!-- and end with -->. This tells the browser when a comment
begins and ends.

Example HTML Code:

As you can see, the comments are invisible to the user viewing the page in the browser. It is
there, simply for the HTML coder's benefit.

33
Multiline comments (i.e. comments that span across multiple lines), use the same syntax as
single line comments. You begin the comment with <!-- and end with -->. Whether the
comment spans one line or ten, you still use the same opening and closing tags.
Well, we have now finished the first part of this tutorial. We have covered a lot, and by now,
you have learned enough to build a website.
Now we'll move on to more specific content items such as tables, iframes, image maps, and
forms.

HTML Forms
This page explains the basics of creating HTML forms.
HTML enables us to create forms. This is where our websites can become more than just a
nice advertising brochure. Forms allow us to build more dynamic websites that allow our
users to interact with it.
An HTML form is made up of any number of form elements. These elements enable the user
to do things such as enter information or make a selection from a preset options.
In HTML, a form is defined using the <form></form> tags. The actual form elements are
defined between these two tags.

Like this:

THE <INPUT> TAG

This is the most commonly used tag within HTML forms. It allows you to specify various
types of user input fields such as text, radio buttons, checkboxes etc.
TEXT
Text fields are used for when you want the user to type short amounts of text into the form.

34
Radio Buttons
Radio buttons are used for when you want the user to select only one option from a pre-
determined set of options.
Note that the user can select one option only. If they click another option, the new option will
be selected and the first option will be deselected.
To enable the user to make multiple selections, use checkboxes (below).

Checkboxes
Checkboxes are similar to radio buttons, but they enable the user to make multiple selections.

Checkboxes should be used when you want to allow the users to make more than one
selection.

Submit
The submit button allows the user to actually submit the form.

Select Lists

35
A select list is a dropdown list with options. This allows the user to select one option from a
list of pre-defined options.
The select list is created using the <select> element in conjunction with the <option>
element.

Textarea
You can use the <textarea> element to enable users to enter larger blocks of text than with the
<input> tag.

It's often a good idea to use the maxlength attribute to restrict the user's input to a certain
number of characters. You can also use the cols and rows attributes to adjust the width and
height.

Form Action
Usually when a user submits the form, you need the system to do something with the data.
This is where the action page comes in. The action page is the page that the form is submitted
to. This page could contain advanced scripts or programming that inserts the form data into a
database or emails an administrator etc.
Creating an action page is outside the scope of this tutorial. In any case, many web hosts
provide scripts that can be used for action page functionality, such as emailing the webmaster
whenever the form has been completed. For now, we will simply look at how to submit the
form to the action page.
You nominate an action page with the action attribute.

36
Form Method
You may have noticed the above example uses a method attribute. This attribute specifies the
HTTP method to use when the form is submitted.
Possible values are:
get
The form data is appended to the URL when submitted. This means you can actually see the
form variables in your browser's address bar when the form is submitted. This can be handy
for non-sensitive data such as a search engine's results page. It also allows you to bookmark
the page and even link to it from another web page.

post
The form data is not appended to the URL.Providing this attribute is optional. If you don't
provide it, the method will be post.

HTML Tables
Tables are used to present tabular data. Here's a quick overview of the various table elements.
Tables allow you to present tabular data in a nice, structured way. Tables present data within
a grid — with rows and columns.
Basic Table Elements
In HTML, you create tables using the <table> element, in conjunction with the <tr> and <td>
elements.
Each set of <tr> tags (opening and closing tags) represents a row within the table that they're
nested in. And each set of <td> tags represents a table data cell within the row that they're
nested in.
You can also add table headers using the <th> element.

37
Table Border
You can use CSS to add a border to the whole table or to individual table cells (or to both).
Adding it to just the table will result in a border around the outside of the table, but not
around each of the cells. So you won't get that grid-like effect.
In most cases, you will likely want to add borders to all of those elements.

You can use inline styles, but that will require you to add the CSS code to every single <td>
element.
Instead, it's usually more efficient to define the border in an embedded or external style sheet.
That way, you can apply the border to all table cells within a single declaration.
To do this, just place the border styles inside a <style> element.
Like this:

So after adding those styles, your document might look something like this.

38
The HTML5 specification actually includes a border attribute for tables, but it's not normally
considered sufficient for most design purposes. You can use either border="0" for no border,
or border="1" for a border. However, there are no mechanisms within HTML for styling the
border.
Therefore, most developers use CSS to add borders to tables. They often don't bother with the
border attribute.
Also, the border attribute is only supported by the W3C version of HTML (but not the
WHATWG version).

Collapsing the Border

By default, adjacent cells will have their own distinct border. This will result in a kind of
"double border" look.

39
You can keep this if you wish. However, most developers prefer to collapse the borders into
one, solid border.
To collapse the border, add the following to your style sheet.

You can also remove the border from the table element if you like, as the cell borders will
join together to provide a single border look.

Here's what the document looks like now.

40
Here's some more detail on table borders if you're interested.

Cell Padding
41
You can use the CSS padding property to apply padding to the cells. You can specify how
much padding you want.

For example, to apply padding of 10 pixels, add the following to your style sheet.

Here's what the document looks like now.

Table Width

42
Widths can be specified using the CSS width property, in either pixels or percentages.
Specifying the width in pixels allows you to specify an exact width. Percentages allows the
table to "grow" or "shrink" depending on what else is on the page and how wide the browser
is.
Here's an example of using percentages.

Note that we use only the table selector in this case, because we're only setting the width of
the table — not the individual cells.
Here's what the document looks like now.

43
Alternating Background Color
As I explained previously, background color can be added to HTML elements using the CSS
background-color property.
You can apply a background color to the whole table, or just parts of it, like say, the table
cells, or certain rows, etc.
Now let's use a little CSS trick to apply alternating colors to the rows of our table. So, the
first row will be color A, the second will be color B, the third will be color A, the fourth will
be color B, and so on.
To do this, use the CSS :nth-child pseudo-class selector along with the odd and even value to
determine the background color of odd and even rows.

Note that in this example, I also create a class called alt and apply it to the table, then use that
class as part of my selector in the style sheet. So if there's more than one table in the
document, only tables with that class will have these styles applied to them.

44
Here's what the document looks like with these styles.

45
Colspan
You can use the colspan attribute to make a cell span multiple columns.
To use it, just provide the number of columns that the cell should span.

46
So here's an example of a table header that spans two columns.

When you do this, you'll need to remove the unnecessary cells. So in the above example,
there are only two table headers are defined in the table even though there are three columns.

47
Rowspan
Rowspan is for rows just what colspan is for columns (rowspan allows a cell to span multiple
rows).

48
In the early days of the web, web designers often used tables for layout purposes. For
example, the left column was a big table cell, the main content area was another cell, etc.
This was because of the grid structure that tables offer.
However, this technique is not recommended. CSS (and browser support) is now at the stage
where advanced layouts can be achieved using HTML in conjunction with CSS.
HTML should be used to provide the document structure and meaning. CSS should be used
for its presentation.

HTML Image Maps

Image maps are images with clickable areas (sometimes referred to as "hotspots") that
usually link to another page.
If used appropriately, image maps can be an effective means for your users to find out more
information about an item represented in the image. They can click different parts of the
image to open a web page related to that part.
To create an image map:

Add the <img> Tag

Embed the image into the page using the usual method (via the <img> element).
Of course, the image must be available on the web first. You can either upload it or reference
an existing image. It can be a photo, icon, logo, stock image, etc. Any image is fine.

Add the Map

Use the HTML <map> tag to create a map with a name. Inside this tag, you will specify
where the clickable areas are with the HTML <area> tag.

Link them with the usemap Attribute

This bit links the map with the image.

49
Add the usemap attribute to the <img> tag. The value must be the name of the map, preceded
by a hash (#) symbol.
For example if the map has name="pluto" then you should use usemap="#pluto" in the
image.

Image Map Example

OK, compared to our previous lessons, this code is looking quite complex. However, once
you study it, it is not that complex. All we are doing, is adding an image, then we are creating
a map with coordinates. The hardest part is getting all the coordinates right.
In our example, we use the <area> tag in conjunction with the shape and coord attributes.
These accept the following attributes:
shape Defines a shape for the clickable area. Possible values:

Default

Rect

Circle

Poly

coords Specifies the coordinates of the clickable area. Coordinates are specified as
follows:
Rect
left, top, right, bottom
circle
center-x, center-y, radius
poly
x1, y1, x2, y2, ...

50
You can use the above attributes to configure your own image map with as many shapes and
clickable regions as you like.

HTML iFrames
In HTML, iframes defines an inline frame. An inline frame enables you present another
HTML document within the same window.
The W3C refers to an iframe as a nested browsing context. In other words, you can browse an
HTML document that is nested inside another. Typically the iframe takes up a small portion
of the document, but you could make it any size you like.
Inline frames are often used in advertising. Many advertisers and advertising networks use
iframes to display their ad within a publisher's website. Benefits of using iframes for
advertising include more control for the advertiser over how the ad is displayed, as well as
enhanced performance monitoring.
CREATING AN IFRAME
To create an iframe, use the <iframe> tag. The src attribute provides the URL of the external
document to use within the iframe. The seamless attribute determines that it should blend
seamlessly into the containing document, so that it actually appears to be part of the
containing document.
Also, you can set the width and height using the width and height attributes.
Here's an example:

As you can see, it's only one line of code, but it could display a complex web page with
hundreds (or even thousands) of lines of code if it needed to.
There are a few other attributes that you can use with inline frames. See the <iframe> element
for more details.
HTML Frames
Before we leave the subject of iframes, let's talk about frames (as opposed to iframes).
HTML frames allow you to split the whole window up into different frames. For example,
you can have a frame to display your left menu, another frame to display the top menu, and
another frame to display the main content area. With frames, your HTML document can be
made up of many different pages.

51
HTML frames were once popular on the web, however, their usage has dwindled over the
years. This is mainly due to the various usability issues that they can cause, issues with search
engine optimization, as well as the fact that frames are being discontinued (as of HTML5).
Having said that, there are many valid arguments for using frames within some contexts. If
you're interested, check out these HTML5 compliant frames templates that use CSS to
provide frames-based functionality, while escaping most of the usability issues inherent in the
traditional frames based websites.

HTML Entities
A brief introduction to the concept of HTML entities.
HTML entities (also known as character entity references) enable you to add a wide range of
characters to an HTML document. Characters ranging from icons, mathematical operators,
geometric shapes, arrows, multilingual scripts, and much more, can be displayed in a web
page by adding a small line of text.
For example, you can add a copyright symbol to a web page by typing &copy;. You could
also use its Unicode hexadecimal value (&#x000A9;) or decimal value (&#169;) if you
prefer.
Another important example is the less-than and greater-than signs (i.e. < and >. These signs
have special meaning in HTML documents. When the browser sees them it thinks it's an
HTML tag and tries to interpret it as such.
If one day you actually wanted to display a greater-than sign on your webpage, you would
need to use the HTML entity (or one of the numeric values). So, you could type &gt; and it
will be displayed to your users instead of being interpreted by the browser.
Entity Examples
Below are some examples of some popular HTML entities.

52
53
54
55
For a longer list of HTML entities, see this extensive list of Unicode characters.
HOW TO REFERENCE AN ENTITY
You can reference an entity either by its name, or by a numeric character reference.
Each method begins with an ampersand (&) and ends with a semicolon (;), but the part in the
middle is different.
Entity Names
Entity names use letters to specify which entity to use.
So &copy; is an example of using the entity name.

56
However, not all Unicode characters have a corresponding entity name (as you can see in the
above list). However, all Unicode characters are assigned a hexadecimal number which is
unique to that character. So if you don't see an entity name for a character, use the
hexadecimal or decimal value instead.
Numeric Character References
You can also use numeric character references to write character entities (as seen by the
examples above).
Numeric character references include a hash (#) after the ampersand, followed by some
numbers, and ending with a semicolon (;).
Numeric character references can be defined with either a decimal or hexadecimal value. The
numeric character reference for the copyright symbol is &#169; (decimal) and &#xA9;
(hexadecimal).

HTML Layouts
Advanced website layouts can be achieved using a combination of HTML and CSS. Here's an
overview.
Most modern websites and blogs consist of a header, footer, navbar, perhaps another sidebar,
and let's not forget, the main content area. Something like this:

Example of the most common sections of a website layout.

57
HTML has a number of elements that can be used to define each of these areas. These include
the main, header, footer, nav, aside and article elements. Also, the div element is a generic
block level element that can be used for grouping HTML elements.
So the above layout could be marked up as follows:

But those elements merely provide the document's structure. They don't deal with
presentation. So we'll end up with this:

As mentioned earlier in this tutorial, CSS is what we need for defining the presentation of our
HTML documents.

CSS Grid Layout

CSS grid layout was purpose built for website layouts. It works on a two-dimensional grid
system, where you specify which elements go to which parts of the grid.
So we could take the above HTML code, then use CSS grid to position each element:

58
If your browser supports grid layout, that example should look like the example at the top of
this page. Here it is again:

In this example, we use the grid-template-areas property with a kind of "ASCII art" syntax to
specify where each element goes. That's the bit that looks like this:

59
Then we tie each element to each of those grid areas using the grid-area property.

The rest of the code deals with sizing, gutters, general aesthetics, etc.
In this case we did actually change the markup slightly by adding IDs to the elements. We
didn't need to do this, but it's good practice. By doing this, we ensure that the grid areas will
be occupied only by the elements with the correct ID. If we didn't do this, we could run into
major problems if we ever add another element of the same name (for example, another
header element) to the page.

Responsive Layouts
Responsive layouts adjust according to the screen size being used to view the website. This
means that your website will probably look different on a mobile phone vs a tablet vs a
desktop computer. The website adjusts itself to provide the best layout for the screen size.
We can modify the above example so that it uses a different layout on small devices such as
mobile phones.
To do this, we add a media query to test for the size of the screen. If it's smaller than a certain
width, we show them the new layout.

60
61
The above example will have all the elements stacked upon each other (unless you're viewing
this example on a very wide screen). Stacking the elements like this is ideal for small devices
such as mobile phones. Click the Preview button to view it in a new window (which should
display the original layout — unless you're already viewing this on a small device).

62
Here's the media query we used for that example:

We simply change the ASCII art to reflect our new layout, which in this case, is simply
stacking each element on top of each other (but in the order we specify). We also change the
values of the rows and columns as required.
Check out the grid tutorial if you're interested in learning more about working with the grid.

Non-Grid Browsers
Grid layout is still very new, and as such, browser support is limited. The good news is that
most major browsers started supporting grid from March 2017, so the wheels are definitely in
motion. But there are still a lot of web users using non-grid browsers.
So until grid has widespread browser support, in order to support non-grid browsers, you will
need to use other methods for your website layouts, such as CSS floats (with the float
property) and/or flexbox (with flex and related properties).
If this feels a bit overwhelming, don't despair! You can download any of these HTML
templates for your own use. You can open up the files and see how each one is built. And you
can modify them as you wish.

The Evolution of Website Layouts

Web technologies have changed since the early days of the web. HTML tables were once the
only way to create advanced two or three column layouts, where the whole website was
nested inside a big table. But tables weren't designed for layout purposes — they were
designed to hold tabular data. And HTML wasn't designed for presentation — it was
designed for mark up the document's structure.

63
CSS was designed for presentation. So once browsers finally had (reasonably) consistent
support for CSS, CSS floats became the norm, where the CSS float property would be
applied to block elements that needed to sit next to each other. This enables developers to
continue with their three-column layouts while keeping the presentation separate to the
content.
But floats weren't really designed for two-dimensional layouts, and it was often challenging
to get all page elements to line up properly, with everything at the correct height, and nothing
being inadvertently pushed down to the next line, etc.
The introduction of flexbox eased a lot of pain, as it provided a better way to line up elements
side by side, without many of the problems inherent in floats. However, flexbox is a one-
dimensional system. It's perfect for lining up elements beside each other, or piled up on top of
each other, but not both.
This is where CSS grid layout comes in. Grid layout was designed specifically for creating
two-dimensional layouts. Using grid, the website's entire layout is build using a two-
dimensional grid system. Every element can be precisely positioned, and it can shrink or
stretch as required. And best of all, grid is extremely easy to use.

HTML Scripts
In HTML, a script is a small, embedded program that can add interactivity to your website.
For example, a script could generate a pop-up alert box message, or provide a dropdown
menu.
Because HTML doesn't actually have scripting capability, you need to use the <script>
element to declare a script, using a scripting language.
The opening and closing <script> tags tell the browser to expect a script in between them.
You can specify the language using the type attribute. However, this is optional if you're
using JavaScript, as JavaScript is the default value. JavaScript is also the most popular
scripting language used on websites.

Adding a Script
Scripts are often placed within the <head> element. This ensures that the script is ready to run
when it is called.
However, this is not a requirement, and you can also place it within the <body> element if
needed.

64
In fact, it's often a good idea to place them at the bottom of the page, just before the closing
</body> tag, as long it comes before any other scripts that might rely on it.

Placing that code alone into an HTML page would result in a pop-up message as soon as the
page loads. Click the button to see it run.
Triggering a Script
In many cases, you won't want the script to run automatically. You might only want the script
to run if the user does something (like hovers over, or clicks a link), or once the page has
finished loading.
These actions are called intrinsic events (events for short). There are many pre-defined
intrinsic events that can trigger a script to run. You use event handlers to tell the browser
which event should trigger which script. These are specified as an attribute within the HTML
tag.
Let’s say you want a message to be displayed whenever a user clicks a button. You can use
the onclick() event handler to perform an action. In this example, we'll display a JavaScript
alert box containing a message.

The onclick event handler is one of may event handlers available in HTML. There are event
handlers for things like mouseovers, page loads, form changes, and more.
Here's the full list of event handlers available in HTML5 for that you can use as a reference.

Calling an External Script

You can also place your scripts into their own file, then call that file from your HTML
document. This is useful if you want the same scripts available to multiple HTML documents
- it saves you from having to "copy and paste" the scripts into each HTML document. This
makes it much easier to maintain your website.

65
Alternate Information for Older Browsers
You can provide alternative information for non-JavaScript browsers or browsers with
JavaScript disabled. You can do this using the <noscript> tag.
Any contents provided between the opening and closing tag is displayed to the user — but
only when JavaScript is disabled.
HTML Code:

HTML Website Templates

This page discusses HTML website templates (basically a prebuilt website where you can fill
in the blanks).

One question many people ask before learning HTML is "Do I have to be good at design?".
The answer to that is "Not at all!".
OK, if you want a career building websites, it can help if you are a good designer. But, this is
not essential. Many web developers either outsource their design to a professional designer,
or purchase HTML website templates. They prefer to concentrate on building the actual
website rather than designing the website.
An HTML website template is basically a prebuilt website, where you, the developer, can
modify as required. All the HTML/CSS code and images are included in the template, and a
good template will be compatible with most modern browsers.

66
Benefits of Using a Website Template
Here are some benefits of using an HTML website template:
Speeds up development time: You don't need to spend hours designing your website, then
converting that into code, then checking for browser compatibility etc.
More professional looking website: Unless you're a very good designer, it will be difficult to
achieve a great looking website every time. And, if you're not a good designer, your websites
will reflect this.
Learning: Using an HTML website template is a great way to learn from other developers.
Once you've downloaded the template, you have full access to the code, so you can learn the
tricks the developers used in achieving an effect.
Cheap: Well, cheaper than hiring a professional designer.

Free Website Templates

Quackit provides a large selection of free website templates. You can choose from a list of
simple templates, or more advanced templates depending on your level of comfort and the
layout that you need.
Here are some of the free templates available for download.

Layout Templates
These provide a basic webpage layout that allows you to add your own branding etc.

View Source Code| View Source Code| View Source Code|

Preview Preview Preview

67
Website Templates
These templates are more like a finished website and are built using the (responsive/mobile-
first) Bootstrap stylesheet, which can save you an enormous amount of time in building a
responsive website.

Download | Preview Download | Preview Download | Preview

Website Hosting
Knowledge of website hosting is essential if you plan to make your website available for the
world to see.
It's one thing to build a website using HTML, but so far in this tutorial, everything we've
done has been on our own local machine. Unless you have your own web server with a
permanent high-speed connection to the Internet, you'll need a website hosting provider to
host your website.
If you already have a hosting provider that's great! But, if you don't, you'll need to start
looking for one.

Basic Web Hosting Concepts

Whether you already have a web host or you're just beginning, you should know at least a
little bit about the following hosting concepts:
The different types of web hosting (i.e the differences between shared hosting, dedicated
servers, and managed hosting)
How to choose a good web hosting provider
Domain names (i.e. yourwebsite.com)
FTP - for uploading your website to the hosting provider
Availability - how to monitor your web site's availability
Technical support - what to expect from a hosting provider
It can be very difficult for a beginner to find information about this. Even some experienced
web developers don't know exactly what it is their web host does. I recommend that you

68
make some effort to become familiar with the basic web hosting concepts, such as those
outlined above.
If you need a hosting provider, our partner site, ZappyHost provides some of the best prices
on the web. Check out these hosting plans.

Getting your own Web Server

If you're serious about developing web pages, you should think about installing a web server
(if you haven't already got one).
A web server will enable you to mimick a hosting environment. You'll be able to browse your
website on your local computer using http:// and your own domain or sub-domain.

You'll also be able to do many other things, like run server-side scripts such as PHP or
ColdFusion. Not to mention, connect to a database.

To learn the basics of web servers, see my quick web server tutorial.

HTML Tutorial Summary

So you've made it to the end - Congratulations! You now have the knowledge required to
hand code your own website.

Recap
We have covered off a lot in this tutorial. To recap:

We started with an introduction to HTML, and what it's used for.

We then created a basic webpage, before moving on to some of the basic tags. We learned
that each tag can have different attributes, and that we can supply the value for these
attributes.
We learned that we can create hyperlinks using the anchor tag (a) with the href attribute.
We embedded an image using the img tag with the src attribute, and applied several other
attributes to the tag
We then learned about the importance of commenting our code to make site maintenance
easier
Armed with the above knowledge, we tackled some more advanced HTML such as image
maps, tables, forms, and frames.
We finished by learning how to extend HTML with stylesheets and scripts.

69