Heading 1: Headings

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.
Typing this code:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Results in this:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Bold
You specify bold text with the <b> tag.
Typing this code:
<b>This text is bold.</b>
Results in this:
This text is bold.
Italics
You specify italic text with the <i> tag.
Typing this code:

<i>This text is italicised.</i>
Results in this:
This text is italicised.
Line Breaks
Typing this code:
<p>Here is a...<br />line break.</p>
Results in this:
Here is a
line break.
Horizontal Rule
Typing this code:
Here's a horizontal rule... <hr /> ...that was a horizontal rule :)
Results in this:
Here's a horizontal rule...
...that was a horizontal rule :)
Unordered (un-numbered) List

Typing this code:
<ul>
<li>List item 1</li>
</ul>
Results in this:
 List item 1
 List item 2
 List item 3
Ordered (numbered) List
Note, that the only difference between an ordered list and an unordered list is the first letter of
the list definition ("o" for ordered, "u" for unordered).
Typing this code:
<ol>
</ol>
Results in this:
1. List item 1
2. List item 2
3. List item 3
We will be covering more HTML tags throughout this tutorial, but before we do that, you should
know about attributes.
Example
Consider this example:
<body style="background-color:orange">
OK, we've already seen the body tag in previous lessons, but this time we can see that something
extra has been added to the tag - an attribute. This particular attribute statement,
style="background-color:orange", tells the browser to style the body element with a
background color of orange.
The browser knows to make the background color orange because we are using standard HTML
tags and attributes (along with standard Cascading Style Sheets code) for setting the color.
Another Example
Here's another example of adding an attribute to an HTML tag. In this example, we use the <a>
tag to create a hyperlink to the Quackit website.
<a href="http://www.quackit.com">Quackit Website</a>
This results in:
Quackit Website
Many attributes are available to HTML elements, some are common across most tags, others can
only be used on certain tags. Some of the more common attributes are:
Attribut
Description Possible Values
e
Used with Cascading Style Sheets
class (the name of a predefined class)
(CSS)
Used with Cascading Style Sheets (You enter CSS code to specify how the way the
style
(CSS) HTML element is presented)
Can be used to display a "tooltip"
title (You supply the text)
for your elements.
You don't need to fully comprehend these 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).
You will see more attributes being used as we cover off some of the more advanced HTML
elements. Syntax
Foreground Color
To add color to an HTML element, you use style="color:{color}", where {color} is the
color value. For example:
<h3 style="color:blue">HTML Colors</h3>
This results in:
HTML Colors
Background Color
To add a background color to an HTML element, you use style="background-color:

{color}", where {color} is the color value. For example:
<h3 style="background-color:blue">HTML Colors</h3>
This results in:
HTML Colors
Border Color
To add a colored border to an HTML element, you use style="border:{width} {color}
{style}", where {width} is the width of the border, {color} is the color of the border, and
{style} is the style of the border. For example:
<h3 style="border:1px blue solid;">HTML Colors</h3>
This results in:
HTML Colors
Color Names
The most common methods for specifying colors are by using the color name or the hexadecimal
value. Although color names are easier to remember, the hexadecimal values and RGB values
provides you with more color options.
Hexadecimal values are a combination of letters and numbers. The numbers go from 0 - 9 and
the letters go from A to F. When using hexadecimal color values in your HTML/CSS, you
preceed the value with a hash (#). Although hexadecimal values may look a little weird at first,
you'll soon get used to them.
There are 16 color names (as specified in the HTML 4.0 specification). The chart below shows
these color names and their corresponding hexadecimal value.
Color Color Name Hexadecimal Value Color Color Name Hexadecimal Value
Black #000000 Green #008000
Silver #c0c0c0 Lime #00ff00
Gray #808080 Olive #808000
White #ffffff Yellow #ffff00
Maroon #800000 Navy #000080
Red #ff0000 Blue #0000ff
Purple #800080 Teal #008080
Fushia #ff00ff Aqua #00ffff
You can make up your own colors by simply entering any six digit hexadecimal value
(preceeded by a hash). In the following example, we're using the same code as above. The only
difference is that, instead of using "blue" as the value, we're using its hexadecimal equivalent
(which is #0000ff):
<h3 style="color:#0000ff">HTML Colors</h3>
This results in:
HTML Colors
If we wanted to change to a deeper blue, we could change our hexadecimal value slightly, like
this:
<h3 style="color:#000069">HTML Colors</h3>
This results in:
HTML Colors
Choosing Colors - The Easy Way

By using hexadecimal or RGB color values, you have a choice of over 16 million different
colors. 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! The HTML color
picker and color chart make it easy for you to choose colors for your website.
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 (href stands for
Hypertext Reference). The value of the href attribute is the URL, or, location of where the link is
pointing to.
Example HTML Code:
Visit the <a href="http://www.natural-environment.com/blog/">Natural

Environment Blog</a>
This results in:
Visit the Natural Environment Blog
Hypertext references can use absolute URLS, relative URLs, or root relative URLs.
absolute
This refers to a URL where the full path is provided. For example,
http://www.quackit.com/html/tutorial/index.cfm
relative
This refers to a URL where only the path, relative to the current location, is provided.
For example, if we want to reference the http://www.quackit.com/html/tutorial/index.cfm
URL, and our current location is http://www.quackit.com/html, we would use
tutorial/index.cfm
root relative
This refers to a URL where only the path, relative to the domain's root, is provided. For
example, if we want to reference the http://www.quackit.com/html/tutorial/index.cfm
URL, and the current location is http://www.quackit.com/html, we would use
/html/tutorial/index.cfm. The forward slash indicates the domain's root. This way, no
matter where your file is located, you can always use this method to determine the path,
even if you don't know what the domain name will eventually be.
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.
_paren Loads the URL into the parent frame (still within the current browser window). This is
t only applicable when using frames.
Loads the URL in the current browser window, but cancelling out any frames. Therefore,
_top
if frames were being used, they aren't any longer.
Example HTML Code:
Visit the <a href="http://www.natural-environment.com" target="_blank">Natural

Environment</a>
This results in:
Visit the Natural Environment
Named Anchors
You can make your links "jump" to other sections within the same page. You do this with named
anchors.
To use named anchors, you need to create two pieces of code - one for the hyperlink (this is what
the user will click on), and one for the named anchor (this is where they will end up).
This page uses a named anchor. I did this by performing the steps below:
1. I created the named anchor first (where the user will end up)
Example HTML Code:
<h2>Link Targets<a name="link_targets"></a></h2>

2. I then created the hyperlink (what the user will click on). This is done by linking to the
name of the named anchor. You need to preceed the name with a hash (#) symbol.
Example HTML Code:
<a href="#link_targets">Link Targets</a>
This results in:
Link Targets
When you click on the above link, this page should jump up to the "Link Targets" section
(above). You can either use your back button, or scroll down the page to get back here.
You're back? Good, now lets move on to email links.
Email Links
You can create a hyperlink to an email address. To do this, use the mailto attribute in your
anchor tag.
Example HTML Code:
<a href="mailto:king_kong@quackit.com">Email King Kong</a>
This results in:
Email King Kong

Clicking on this link should result in your default email client opening up with the email address
already filled out.
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.
Example HTML Code:
<a href="mailto:king_kong@quackit.com?subject=Question&body=Hey there">Email

King Kong</a>
This results in:
Email King Kong
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:
<head>
<base url="http://www.quackit.com">
</head> Example of Image Usage

HTML Code:
<img src="http://www.quackit.com/pix/smile.gif" width="100" height="100"

alt="Smile" />
This results in:
The img 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:
Required attribute. This is the path to the image. It can be either an absolute path, or a
src
relative path (remember these terms from our last lesson?)
Optional attribute (but recommended). 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
width actual image is smaller it will expand to your dimensions. I don't recommend specifying a
different size for the image, as it will lose quality. It's better to make sure the image is the
correct size to start with.
heigh Optional attribute (but recommended). This specifies the height to display the image. This
t attribute works similar to the width.
Alternate text. This specifies text to be used in case the browser/user agent can't render the
alt
image.
Image Alignment
You can determine how your images will be aligned, relative to the other content on the page
(such as a paragraph of text). You do this using the align attribute.
HTML Code:
<p>
<img src="http://www.quackit.com/pix/smile.gif"
width="100" height="100" alt="Smile" align="right"/>
Here is a paragraph of text to demonstrate HTML images and how
they can be aligned to the right of a paragraph (or paragraphs)
if you so desire.</p> </p>This can be used to produce
some nice layout effects, especially if you have a lot of text,
and it runs right past the image.</p><p> Otherwise,
the image will just hang below the text and may look funny.</p>
This results in:
Here is a paragraph of text to demonstrate HTML images and how they can be
aligned to the right of a paragraph (or paragraphs) if you so desire.
This can be used to produce some nice layout effects, especially if you have a lot
of text, and it runs right past the image.
Otherwise, the image will just hang below the text and may look funny.
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.
HTML Code:
<a href="http://www.quackit.com/html/tutorial">
width="100" height="100" alt="Smile" />
</a>
This results in:
Removing the Border
You might notice that this has created a border around the image. This is default behaviour for
most browsers. If you don't want the border, specify border="0".
HTML Code:
<a href="http://www.quackit.com/html/tutorial">
width="100" height="100" alt="Smile" border="0" />
</a>
This results in:
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.

Heading 1: Headings

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Heading 1: Headings

Uploaded by

Copyright:

Available Formats

Headings

Typing this code:

Typing this code:

<b>This text is bold.</b>

This text is bold.

Typing this code:

This text is italicised.

<p>Here is a...<br />line break.</p>

Here's a horizontal rule... <hr /> ...that was a horizontal rule :)

Here's a horizontal rule...

...that was a horizontal rule :)

Unordered (un-numbered) List

Typing this code:

<a href="http://www.quackit.com">Quackit Website</a>

This results in:

<h3 style="color:blue">HTML Colors</h3>

This results in:

To add a background color to an HTML element, you use style="background-color:

<h3 style="background-color:blue">HTML Colors</h3>

This results in:

<h3 style="border:1px blue solid;">HTML Colors</h3>

This results in:

<h3 style="color:#0000ff">HTML Colors</h3>

This results in:

<h3 style="color:#000069">HTML Colors</h3>

This results in:

Choosing Colors - The Easy Way

Example HTML Code:

Visit the <a href="http://www.natural-environment.com/blog/">Natural

This results in:

Visit the Natural Environment Blog

The target attribute can have the following possible values:

_blank Opens the URL in a new browser window.

Example HTML Code:

Visit the <a href="http://www.natural-environment.com" target="_blank">Natural

This results in:

Visit the Natural Environment

Example HTML Code:

<h2>Link Targets<a name="link_targets"></a></h2>

Example HTML Code:

<a href="#link_targets">Link Targets</a>

This results in:

You're back? Good, now lets move on to email links.

Example HTML Code:

<a href="mailto:king_kong@quackit.com">Email King Kong</a>

This results in:

Email King Kong

Example HTML Code:

<a href="mailto:king_kong@quackit.com?subject=Question&body=Hey there">Email

This results in:

Email King Kong

Example HTML Code:

</head> Example of Image Usage

<img src="http://www.quackit.com/pix/smile.gif" width="100" height="100"

This results in:

This results in:

This results in:

Removing the Border

This results in:

You might also like