1. What is HTML anyway?
HTML stands for HyperText Markup Language. Developed by scientist Tim Berners-Lee in
1990, HTML is the "hidden" code that helps us communicate with others on the World Wide
Web (WWW).
When writing HTML, you add "tags" to the text in order to create the structure. These tags
tell the browser how to display the text or graphics in the document. For example, the
following document has a simple layout (structure). Notice there are three major parts: a
heading, two paragraphs and a bulleted list.
Why I like to go swimming in the summer.
Swimming is my most favorite activity in the summer. When the sun is shining and the air
is warm, you will find me dipping into my backyard pool. It’s not an impressive pool, only
three feet deep, but it’s mine.
There are three reasons I like to swim:
•
•
•
I get lots of exercise
I enjoy the freedom
I have an opportunity to be in the sun.
To achieve a similar layout in a WWW browser, you need to add tags. Here is the same
document with HTML tags (red) added:
<html>
<head>
<title>Why I like to go swimming</title>
</head>
<body>
<h1> Why I like to go swimming in the summer. </h1>
<p> Swimming is my most favorite activity in the summer. When the sun is shining and the
air is warm, you will find me dipping into my backyard pool. It’s not an impressive pool, only
three feet deep, but it’s mine.</p>
<p>There are three reasons I like to swim:</p>
<ul>
<li>I get lots of exercise</li>
<li>I enjoy the freedom</li>
<li>I have an opportunity to be in the sun.</li>
</ul>
</body>
</html>
And here is the resulting page in your browser. Notice the tags are gone? That’s because
the tags tell the browser how to display files but do not show themselves.
Viewing the hidden code!
When learning something new, it often helps to see how others are doing the same thing.
This is especially easy with HTML because every file that comes through your browser is
formatted in HTML. So how do you see other people’s stuff? By viewing their source code.
Here’s how:
•
•
•
•
Go online
Open Internet Explorer or Safari
Enter the address to your favorite site
Go to View on the toolbar and then click on Source for Explorer or Page Source for
Safari. In a matter of seconds, you will see the hidden code of that page.
By viewing the source code, you can see what the "big" guys are doing. In fact, viewing
other people’s code is considered one of the best ways to learn how HTML works.
Now that you’ve had a little taste of what it’s like to create an HTML document, it is time to
begin creating one from scratch.
2. Basic Concepts
The tools you need
Fortunately, HTML is written in plain text. That means you don’t need any fancy software
programs like a word processor to create your HTML files. All you need is a simple texteditor that’s already on your system. For Macs, that would be SimpleText and for Windows,
Notepad.
Some rules
As with most things in life, there are rules. In HTML, the rules are fairly simple. For starters,
HTML tags are always surrounded by what are called angle brackets < and >. You’ll find
these brackets on your keyboard just above the comma and period.
Elements
The words/letters between these two angle brackets are called elements. These are the
coded commands within HTML. Elements tell the browser how to display the web page. For
example: <hr> tells the browser to display a horizontal rule; <br> tells the browser to skip
a line.
Container and empty tags
There are two kinds of tags: container and empty.
The container tag always wraps around text or graphics and comes in a set with an
opening and a closing:
<html> opening tag
</html> closing tag
Notice the forward slash (/) on the closing tag. This tells the browser that the tag has
ended.
On the other hand, the empty tag stands alone. The tag <br> is one that adds a line
break. Empty tags do not have to be wrapped around copy and do not require a closing.
Case sensitive
HTML is also not case sensitive. That means, you can use either lowercase or uppercase.
<HTML> is the same as <html>. For consistency, use either one or the other. It's best not
to mix and match. For our purposes, I have written our code in lowercase.
HTML structure.
All HTML documents are divided into two main parts: the head and the body. It goes
something like this:
You must have the <html>, <head> and <body> container tags in every HTML file.
The <html> tag tells the browser that this is an HTML document. You must begin and end
your files with this tag. The <head> tag contains general information like the title of your
document. The <body> tag holds all your content: words, pictures, artwork and other stuff.
Nesting
Part of the web page structure is called nesting. Notice how the tag <title> is nested inside
the <head> tag, while <head> and <body> are nested inside <html>.
Each new set of tags are nested inside other tags, just like those Russian dolls, Matryoshka.
Think of it another way, like smaller boxes inside larger boxes.
3. Primary Tags
To build any web page you will need four primary tags: <html>, <head>, <title> and
<body>. These are all container tags and must appear as pairs with a beginning and
an ending.
<html>…</html>
Every HTML document begins and ends with the <html> tag. This tells the browser that the
following document is an html file. Remember, tags tell the browsers how to display
information.
<head>…</head>
The <head> tag contains the title of the document along with general information about the
file, like the author, copyright, keywords and/or a description of what appears on the page.
<title>…</title>
Appears within the <head> tag and gives the title of the page. Try to make your titles
descriptive, but not more than 20 words in length. The title appears at the very top of the
browser page on the title bar.
<body>…</body>
The main content of your page is placed within the body tags: your text, images, links,
tables and so on.
4. Creating your first web page
Using the primary HTML tags, mentioned in Chapter 3, you are now ready to create your
first Web page.
Step 1 Open up a text editor (SimpleText for Mac or Notepad for Windows)
Step 2 Enter the following:
<html>
<head>
<title> This is my first web page</title>
</head>
<body>
Hello world. This is my first web page. There's more to come.
</body>
</html>
Step 3 Save the document as: firstpage.html
Your file can be saved as either an htm or html file. Remember to save your document on
the computer in a place that you can find it again.
Step 4 To preview your new document, open Safari. On the tool bar (located up near the
top of the browser):
Select File menu.
Select Open File
Go to where you saved your file, click on it. This will bring you back to the dialogue box,
which should now be showing your file.
Click Open
Congratulations!
You have successfully completed your first web page. It actually doesn’t get any harder than
this for your simple, everyday page.
Let’s continue to build on this same page by adding more tags discussed in the following
pages.
5. Basic Text Formatting
After any length of time on the Internet, you’ll notice that a Web page is made up of more
than just plain words on a screen. There are headlines, paragraphs, graphics, colors and
much more. It’s a lively place to be.
Our next tags--headline, paragraph, line break and horizontal rule--will help us make our
current page a lot more exciting. Let’s learn how.
Headline tag
In HTML, bold copy is created by using the headline tag. There are six levels of headlines,
ranging from <h1>…</h1> to <h6>…</h6>. Here is an example of the code for all the
headline sizes:
<h1>Level
<h2>Level
<h3>Level
<h4>Level
<h5>Level
<h6>Level
1
2
3
4
5
6
Headline</h1>
Headline</h2>
Headline</h3>
Headline</h4>
Headline</h5>
Headline</h6>
Let’s add a headline to our Web page document.
Step 1 Load your text editor and open your file: firstpage.html This is what you should see:
<html>
<head>
<title>This is my first web page.</title>
</head>
<body>
Hello world. This is my first web page. There's more to come.
</body>
</html>
Step 2 Add the <h1> tag to the words "Hello world." as shown in red.
<html>
<head>
<title>This is my first web page.</title>
</head>
<body>
<h1>Hello world.</h1> This is my first web page. There's more to come.
</body>
</html>
Step 3 Save the file
Step 4 Open up Safari.
Go to File menu
Select Open File
A dialogue box appears.
Go to where you saved your file, click on it. This will bring you back to the dialogue box,
which should now be showing your file.
Click Open
Paragraphs & Line Breaks
To add space between paragraphs you use the paragraph tag:
<p>…</p>
This is a container tag and must have a beginning and an ending.
To add a single line of space, you use break tag:
<br>
This is an empty tag and stands alone. You can use the <br> tag to insert one or more
blank lines.
Horizontal Rule
To create a horizontal line on your page you use the empty tag:
<hr>
Wow, what a lot to take in. Let's apply what we've learned.
Step 1 Load your text editor.
Step 2 Open the file: firstpage.html. Your code should look like this:
<html>
<head>
<title>This is my first web page.</title>
</head>
<body>
<h1>Hello world.</h1> This is my first web page. There's more to come.
</body>
</html>
Let's add some more text so that we can use the new tags that we have learned. Add tags
and text that appear in red.
<html>
<head>
<title>This is my first web page.</title>
</head>
<body>
<h1>Hello world.</h1> This is my first web page. There's more to come.
<hr>
<p>
I am learning how to use the horizontal rule, headline, paragraph and line break
tags. Writing HTML isn't as hard as it appears.
</p>
<p>Here's a list of items I like about school:<br>
Science<br>
Reading<br>
But most of all--recess!<br>
</p>
</body>
</html>
6. Lists
People are usually in a hurry when using the Web. This behavior may be a carry over from
when folks used to pay for the actual time spent on the Internet. Back in the olden days,
say four years ago, users did not have the luxury of unlimited time on the Web. So they
would quickly go online, get the information they needed and sign off. In this way, the user
just paid for the little time used.
Things are different today. Mostly everyone has unlimited time access to the Web, but the
behavior hasn’t changed much. People are still in a hurry, and they don’t like to read a lot of
text. So putting your information in the form of a list seems to help.
Lists come in a variety of forms with most either numbered or bulleted. The numbered lists
are called ordered lists and the bulleted lists are unordered lists.
Lists are nested. There is a tag that identifies the type of list, like numbered or bulleted.
Then within that tag there is another tag that itemizes the list. Maybe some definitions
would help.
<ol>…</ol>
The ordered list is a container tag and is used for numbered lists.
<ul>…</ul>
The unordered list is a container tag and is used for bulleted lists.
<li>…</li>
The listed item tag is a container tag and is nested within the ordered or unordered tags.
Here is an example of the differences between ordered and unordered lists.
An ordered (numbered) list goes like this:
<ol>
<li>My
<li>My
<li>My
<li>My
</ol>
first item on the list.</li>
second item on the list.</li>
third item on the list.</li>
fourth item on the list.</li>
In the browser it will appear like this:
1.
2.
3.
4.
My
My
My
My
first item on the list.
second item on the list.
third item on the list.
fourth item on the list.
An unordered (bulleted) list goes like this:
<ul>
<li>My
<li>My
<li>My
<li>My
</ul>
first item on the list.</li>
second item on the list.</li>
third item on the list.</li>
fourth item on the list.</li>
In the browser it will appear like this:
•
•
•
•
My
My
My
My
first item on the list.
second item on the list.
third item on the list.
fourth item on the list.
Let's apply what we've learned
Step 1 Load your text editor once more and open our current HTML document:
firstpage.html.
Step 2 Your file should appear as below:
<html>
<head>
<title>This is my first web page.</title>
</head>
<body>
<h1>Hello world.</h1> This is my first web page. There's more to come.
<hr>
<p>
I am learning how to use the horizontal rule, headline, paragraph and line break tags.
Writing HTML isn't as hard as it appears.
</p>
<p>Here's a list of items I like about school:<br>
Science<br>
Reading<br>
But most of all--recess!<br>
</p>
</body>
</html>
Step 3. Let's add one of the lists noted above. Enter the tags and text that appear in red.
<html>
<head>
<title>This is my first web page.</title>
</head>
<body>
<h1>Hello world.</h1> This is my first web page. There's more to come.
<hr>
<p>
I am learning how to use the horizontal rule, headline, paragraph and line break tags.
Writing HTML isn't as hard as it appears.
</p>
<p>Here's a list of items I like about school:<br>
Science<br>
Reading<br>
But most of all--recess!<br>
</p>
<p>I can also create lists using numbers and bullets. Here is an example of a list
with numbers:
<ol>
<li>My
<li>My
<li>My
<li>My
</ol>
</p>
first item on the list.</li>
second item on the list.</li>
third item on the list.</li>
fourth item on the list.</li>
</body>
</html>
Step 4 Save your file.
Step 5 If Safari is still open, hit the reload button. If not, then load Safari and follow the
previous steps in Chapter 4.
7. Attributes: Adding interest to your page.
Bold headlines and organized lists are nice but there’s got to be more to a web page than
that. How about some color and variety? Glad you asked, because that’s where attributes
come in. Don’t let the word scare you. Attributes are just special codes placed within the
HTML tags that describe how the tags will look.
Color Attribute
For instance, let’s say you want to have a green background on your Web page with red
text, like for Christmas time. You would type this code:
<html>
<head>
<title>Color Page</title>
</head>
<body bgcolor="#bee3c2" text="#ff0000">
Hello. I am a page that can be used for Christmas.
</body>
</html>
Notice the attributes: bgcolor and text. They are placed within the <body> tag. There’s
that nesting thing again. Attributes never stand alone. Instead, they always appear inside a
body tag.
Let's look a little closer at the body attribute:
<body bgcolor="#bee3c2">...</body>
1.
2.
3.
4.
5.
The bracket and tag appear first (<body).
Always add a space between the tag and attribute.
Then enter the attribute (bgcolor).
Equal sign goes next (=).
Next are quotation marks that contain a description of how the attribute should look
like ("#bee3c2"). In this case, it's a code for the color green.
6.
Close with a bracket (>).
7.
Then, add your closing tag </body>.
It's that simple. Now let's try some more. But first, here's something to remember...
Tip to Remember
Colors are described in hexadecimal (hex) code—six digits or letters that represent a color.
Also, hex codes always start with a # sign.
For example the hex code for black is #000000, while white is #ffffff. For a complete list of
colors and their hex codes, see:
http://www.wdvl.com/Authoring/Graphics/Colour/666.html
Align Attribute
Another attribute that comes in handy is: align. Often used with headlines and graphics,
this attribute let’s you place text or pictures to the left, center or right side of the margin.
Here’s a simple example for the align attribute:
<html>
<head>
<title>My Spring Vacation</title>
</head>
<body bgcolor="#e3f04a" text="#000000">
<h4 align="center">My Spring Vacation<br>
by Russ Peabody</h4>
<p>My spring vacation was wonderful, except for the terrible storms we had during the first
part of the week. Snuggle, my dog, enjoyed the walks we had on the beach and Jimmy, my
teddy bear, liked the hotel room. He said the maid was very nice to him.</p>
</body>
</html>
You can use the align attribute with all sorts of tags like: headlines, paragraphs, rules,
graphics and so on.
Width Attribute
What if we wanted to add a rule to the above story just under the title and byline? But
instead of having the rule go from margin to margin, we wanted it centered just
underneath, like this:
My Spring Vacation
by Russ Peabody
The code would look like this:
<html>
<head>
<title>My Spring VacationII</title>
</head>
<body bgcolor="#e3f04a" text="#000000">
<h4 align="center">My Spring Vacation<br> by Russ Peabody</h4>
<hr align="center" width="40%">
</body>
</html>
Notice how we told the browser to center the rule <hr> tag and make it only 40% the size
of the screen. Although this may seem a bit confusing in the beginning, you will find it
becomes easier as you use these attributes to help design your web pages.
Let's apply what we've learned.
Step 1 Load your text editor and open your HTML document we have been working on:
firstpage.html Your file should appear as below:
<html>
<head>
<title>This is my first web page.</title>
</head>
<body>
<h1>Hello world.</h1> This is my first web page. There's more to come.
<hr>
<p>
I am learning how to use the horizontal rule, headline, paragraph and line break tags.
Writing HTML isn't as hard as it appears.
</p>
<p>Here's a list of items I like about school:<br>
Science<br>
Reading<br>
But most of all--recess!<br>
<p>I can also create lists using numbers and bullets. Here is an example of a list with
numbers:
<ol>
<li>My
<li>My
<li>My
<li>My
</ol>
</p>
first item on the list.</li>
second item on the list.</li>
third item on the list.</li>
fourth item on the list.</li>
</body>
</html>
Step 2 Let's add some attribute codes to your original HTML file. Enter the code listed below
in red:
<html>
<head>
<title>This is my first web page.</title>
</head>
<body bgcolor="#ffff00" text="#000000">
<h1 align="center">Hello world.</h1>
<p align="right"><b>This is my first web page. There's more to come.</b>
<hr align="center" width="50%">
<p>
I am learning how to use the horizontal rule, headline, paragraph and line break tags.
Writing HTML isn't as hard as it appears.
</p>
<p>Here's a list of items I like about school:<br>
Science<br>
Reading<br>
But most of all--recess!<br>
<p>I can also create lists using numbers and bullets. Here is an example of a list with
numbers:
<ol>
<li>My
<li>My
<li>My
<li>My
</ol>
</p>
first item on the list.</li>
second item on the list.</li>
third item on the list.</li>
fourth item on the list.</li>
</body>
</html>
Step 3 Save your file.
Step 4 If Safari is still open, hit the reload button. If not, then load Safari following steps in
Chapter 4.
Notice the new changes:
•
•
•
•
Background color is now yellow, text is black.
The heading is centered.
First paragraph is aligned to the right
Horizontal rule is now 50% of the margin and centered.
All created by you! Now let's learn more about text formatting.
8. Advanced text formatting
The main purpose of the Web is to communicate ideas. It’s been that way from the
beginning. In the early days, content was king—meaning, people just used the Web to
present thoughts or offer opinions through words. Pictures, clip art, movie clips and even
sound weren’t part of the Web yet. Nowadays, the Web has a totally different look and feel.
In fact, the Web has radically changed from its early years. What was once a place that
strictly exchanged information is now a place to entertain, sell goods and services, share
ideas and especially, learn new things. Designing an inviting page has become an important
issue. Now we see tons of graphics, animations, in-the-news movie clips, 3-D computer
games and much more. While content is still king, a well designed Web page is now
considered equally important—perhaps even the queen.
That brings us to topic at hand: text formatting. Here is where good design begins and
fortunately, HTML allows us to do quite a lot with text. There are several tags and attributes
to learn, but they all help you—the designer—to create an eye-pleasing page.
In this section, we will cover the following tags and attributes:
•
•
•
•
•
•
•
Font styles: <font>...</font>
Bold: <b>...</b>
Italic: <i>...</i>
Indented text: <blockquote>...</blockquote>
Smaller type: <small>...</small>
Larger type: <large>...</large>
Centered type: <center>...</center>
Font tag*
Not long ago, Times Roman was the only font you could use with HTML. It is still the font of
choice (the default) for the leading browsers. Today, we can choose different font styles as
well as several other font options by using the tag:
<font>…</font>
The font tag gives you some control over how your page will look. But unlike other tags
discussed so far, the font tag does nothing without an attribute (remember an attribute
describes what the tag should do).
We will cover three attributes used with the font tag:
<font size= "#">…</font>
<font face= "type style name">…</font>
<font color= "hex code">…</font>
*A Note to Remember: In the new HTML (version 4.0), the font tag has been
deprecated--a big word that means the tag will be dropped in favor of Cascade Style Sheets
(CSS). If you would like more information on CSS, please check out the Web site: Style
Master to learn more. This changeover--from the font tag to CSS--will happen sometime in
the future, but right now many Web sites are still using the font tag. We are in what is
called the "transitional period," meaning things are still changing.
Font Size
So far, we have learned that the only way to change the size of our text is through the
headline tag. But that causes a problem. One, if you use this tag, all the text changes and
secondly, you’ll have paragraph breaks before and after the text. So what can you do if you
want to change the size of some text within a sentence? Simple, add the attribute size to
the font tag. Here’s a coded example:
Learning HTML code <font size=5> does have it’s advantages, </font> especially
considering how important the WWW has become.
The resulting line in a browser:
Learning HTML code does have its advantages, especially considering how important the
WWW has become.
Notice how the type increased? You can also decrease your text. Let’s take the same
sentence but use size=1.
Learning HTML code does have its advantages, especially considering how important the
WWW has become.
By using the size attribute, you can change your text to whatever you like. (By the way,
your browser’s default size is number 3.) Here are all seven levels as they would appear in
your browser:
font
font
font
font
font
font
font
size=1
size=2
size=3
size=4
size=5
size=6
size=7
Font Face
You can also use an attribute that will change the type style of a font. It’s call face. But a
word of caution: the face attribute is system dependent. That is, it will only work if the end
user has the same typeface (type style) on his or her system. If not, the browser will
automatically go with the default of Times Roman. So what you see on your Safari or
Internet Explorer’s page may not be the same for each user.
So how can prevent this problem? Include more than one type face. For instance, let’s say
you want the following text to appear in Arial typeface. This is how you would do it.
<font face="Arial, Helvetica">Selecting type styles can be tricky at times. You must
always consider your end user.</font>
Your end result will look like this:
Selecting type styles can be tricky at times. You must always consider your end user.
If the user’s computer did not have Arial, the browser would automatically search for the
next typeface mentioned, which in this case is Helvetica. If no such type styles are on the
computer, then the browser will go to the default type of Times Roman.
Fortunately Windows® 7 and Macintosh® come with a variety of different typefaces:
Arial
Arial Black
Arial Narrow
Book Antiqua
Bookman Old Style
Century Gothic
Century Schoolbook
Courier New
Garamond
Times New Roman
Verdana
You can specify these typefaces, and the browser will easily find them. However, it’s best to
specify more than one typeface, just in case an end user is operating Windows 3.0 or has
for some reason, taken one of these typefaces off the computer system.
So how does the attribute look for other type styles?
<font face="bookman old style">
Selecting type styles can be tricky at times. You must always consider your end user.
<font face="arialblack">
Selecting type styles can be tricky at times. You must always consider your end user.
<font face="garamond">
Selecting type styles can be tricky at times. You must always consider your end user.
Font Color
In the last section, we discussed text color as an attribute in the body tag. The text color
attribute only permits you to color all the type on your Web page. But what if you want to
color only a word or two. Then use the attribute color within the font tag. Here’s an
example.
Selecting type styles can be tricky at times. <font color="#0033ff">You should always
consider your end user.</font>
This will create text that is bright blue:
Selecting type styles can be tricky at times. You should always consider your end user.
Notice two things here. First of all, the color has been specified in hex code (remember we
discussed that in the last lesson). Two, since we did not specify the typeface, the type
appeared as Times Roman.
Let's apply what we've learned
Step 1 Load your text editor and open the HTML document we have been working on:
firstpage.html
Step 2 Here's how to add some attribute codes to your original HTML file. Enter the code
listed below in red.
<html>
<head>
<title>This is my first web page.</title>
</head>
<body bgcolor="#ffff00" text="#000000">
<h1 align="center">Hello world.</h1>
<p align="right"><b>This is my first web page. There's more to come.</b>
<hr align="center" width="50%">
<p><font size="5" face="arialblack" color="#0033ff">
I am learning how to use the horizontal rule, headline, paragraph and line break tags.
Writing HTML isn't as hard as it appears.</font>
</p>
<p>Here's a list of items I like about school:<br>
Science<br>
Reading<br>
But most of all--recess!<br>
<p>I can also create lists using numbers and bullets. Here is an example of a list with
numbers:
<ol>
<li>My
<li>My
<li>My
<li>My
</ol>
</p>
first item on the list.</li>
second item on the list.</li>
third item on the list.</li>
fourth item on the list.</li>
</body>
</html>
Congratulations, you have just added a new font size, typeface and font color to your Web
page!
Other text formatting tags
The other text formatting tags are fairly simple to use and understand.
Bold and Italic tags
To create bold text use: <b>…</b>
To create italicized text use: <i>…</i>
Blockquote
Sometimes you may want to indent a sentence or an entire paragraph. That’s when you’ll
want to you the blockquote tag:
<blockquote>…</blockquote>
Small and big tags
To create copy that is slightly smaller than normal:
<small>…</small>
To create copy that is slightly larger than normal:
<big>…</big>
Center tag*
You learned about aligning copy with the align attribute in the last lesson. Fortunately HTML
allows us to center text without using an attribute. So when you want to center your copy,
it’s simple. Use the following tag:
<center>…</center>
*Please note the center tag is another one that is being replaced in HTML 4.0
9. Links down the street to around the world.
Back in 1945, an engineer predicted that someday we would have super computers talking
to each other. Today, this vision is a reality through hypertext links (or what others call
hyperlinks or just plain links).
Links are the power behind the World Wide Web. Through links, millions of pages, filled with
information and knowledge, are only a click away. Every Web site can become a virtual
library—a place to learn and grow! And it’s all so very simple to accomplish.
Uniform Resource Locator
Before we get into how to create a hyperlink in HTML, we have to cover some "techy" stuff.
Every Web site has an address call the Uniform Resource Locator or URL (pronounced
like "earl"). Think of an URL as an address. If you’ve done any Web surfing at all, you have
probably used an URL or two. But what does it mean? Let’s examine one more closely:
http:// (hypertext transfer protocol) is a code or what is technically called a protocol
that helps one computer talk to another computer. The Internet also has another protocol
called FTP (file transfer protocol).
www or world wide web lets the server (the computer) know the file is located on the
World Wide Web.
myschool.com is a domain name or where the Web site is hosted.
homework.html is the file or Web page you are seeking.
Hypertext Link
Okay, now that you understand URLs, you’ll find it easier to understand links.
There are two things you need to create a link:
1.
2.
the name of a file or the URL you want to link to
the link hotspot—the highlighted text or graphic that will be clicked on to get to
where you want to go.
To create a link in HTML, you need the anchor tag:
<a>…</a>
Inside the tag, you need the attribute: HREF (hypertext reference).
An example of a link looks like this:
Harry uses the website called Apple.
The code looks like this:
Harry uses the website called
<a href="http//:www.Apple.com">Apple</a>.
Let's take a closer look at the code:
Notice that the anchor tag must surround the hotspot and that the attribute HREF must
describe where the browser should look for the Web site (the URL).
It's that simple! Now let's look at putting some images on a web page.
10. Graphics
What would a Web page look like without graphics? Pretty boring to say the least! But not
so long ago, that’s just what the Web was like—just plain, boring text. Remember, in those
early days the Web’s sole purpose was to exchange information. The real change came
when designers added graphics. Nowadays, we’ve become used to seeing bright and colorful
pages.
Some details.
It wasn’t always so colorful and so easy to place images onto a Web page. From the start,
images have always been memory and space hogs. But during the past few years, designers
have worked hard to keep image files small, while also increasing the quality of the artwork
that appears on the Web today.
Two file formats have been developed to help keep files small, while maintain a high level of
quality:
.gif files: graphic interchange format (pronounced like Jif peanut butter)
.jpg files: joint photographic experts group (pronounced jay-peg)
There are some advantages particular to both. The gif format is the oldest, created by
CompuServe to provide a way to show graphics no matter what computer you are using (it’s
called cross-platform). Later, the "gif89" format was created so that the image background
becomes transparent. That’s a good thing when working with colored page backgrounds.
The gif format is also better for line art.
On the other hand, the jpg format was originally created to store photographs. Files
formatted in jpg are larger than those in gif, and they do not have transparent backgrounds.
If you have images that are not in one of these two formats, you will need an image editor
to convert them. Two such programs are Adobe® PhotoShop or Paint Shop Pro (a shareware
program that you can download at Jasc Software).
The Image tag
To place an image onto a Web page you will need to use the image tag. There are two very
important things to remember about the image tag:
1.
2.
It’s an empty tag (remember, that means there’s no closing tag, only a beginning).
It requires attributes to be effective.
The image tag <img> has several attributes:
src--identifies the image and tells the browser where to get the image
alt—gives alternative text for those who are not viewing their pages as images.
height & width—tells the browser the size of the graphic (speeds up the downloading
process
Let’s go through each one of the attributes in more detail.
SRC attribute
To help the browser identify and find an image, you use the following command:
<img src="filename.gif">
I’d like to cover a couple of important things here. While the name of the file is important, it
is equally important to direct the browsers to where the file is located. The browser will not
show your image if it can’t find it.
Notice that all the files are in the same folder or what is also called a directory. So the
browser will first look into the main folder (Mikes Bike Shop), find the HTML file (shop.html),
load the text and then load the graphic files (horn.gif and bike.gif). That’s why you see
those funny little boxes when a page is loading. The browser downloads all the easy stuff
first (the text) and then the larger and more complex graphic files last.
Alt attribute
Sometimes people turn off their image loading option in their browser, leaving a Web page
with lots of blank boxes. So all the work you have done to place those important images is
gone, leaving in its wake only blank, boring boxes.
The alt attribute lets the user know what’s in the picture by providing descriptive text. It
also has an added feature with the latest versions of Internet Explorer and Safari. When the
cursor arrow passes over artwork or a photo, a little rectangular box pops up that contains
the alt copy. It’s a great way to add interest to your page or even give instructions to the
user.
Here’s an example. Place your arrow (cursor) over the image below. If you have the latest
version of IE or Safari, you will see a pop-up box that says, "When things go wrong with
your code, you need to do some detective work!"
The image tag for this graphic looks like this:
<img src="mystery.jpg" alt="When things go wrong with your code, you need to
do some detective work!">
Height & Width attribute
When placing your images onto the screen, the browser looks for the height and width of
your images. This is an excellent feature because it allows the browsers to set the space
size aside while laying out the balance of the page. If you do not specify the size, the
browser will stretch it or reduce it to fit.
Height and width are listed in pixels--those little dots that make up an image on a
computer screen. If you want to know the size of your image, open it up in Safari. The pixel
size appears in the title bar. Here's an example using the following image that measures out
at 149 pixels by 140 pixels.
The code for this image is like this:
<img src="masks.jpg" width="149" height="140" alt="You can determine how
large your images are by opening them in Safari.">
Align Attribute
When you place a graphic on a page it will always appear to the left (that's the default or
the standard for the browser). However, you can place it to the right just by adding the
align attribute to the image tag.
And the code looks like this:
<img src="masks.jpg" align="right" width="149" height="140" alt="This is an
example of a right-aligned image.">
Centering an image
But what if you want to center an image. The best way is to use the paragraph tag with
the center attribute. Here's an example:
And here's the code:
<p align="center"><img src="masks.jpg" align="center" width="149"
height="140" alt="This is an example of a centered image."></p>
Image Hotspots
Instead of using text as a link (hotspot), it's very common to use an image. It's simple too!
Just take include the image tag within the anchor tag.
Here's the code for a link to the Blast-Off page:
<a href-"graphicsc10.html"><img src=atom.jpg width="119" height="120"
alt="Take this link to the Blast-Off page" border="0"></a>
A note about copyright
You should never use any graphics, images, text or photos without permission. There are
several sites available on the Web where you can receive free images. But under no
circumstances should you ever copy material unless the site says you can or you personally
have received permission. It's just better to create your own stuff or ask (and get an okay)
before you use someone else's stuff. Don't be a cheater!
11. Building Web pages with tables.
Tables have literally changed the look of the Web page. Originally, tables let people present
data (mostly numbers) in a column format. Designers quickly figured out ways to improve
the layout of their pages using tables. Although a bit complicated and sometimes difficult to
understand, tables do improve your layout and let you present your material in a more eyeappealing way.
For example, this page--in fact, this whole tutorial--has been developed using a four-column
table. The best way to understand tables is to look at the following illustration.
The structure of a table
Every table is wrapped by the <table>...</table> tag. Then, the columns are surrounded
by the <tr>...</tr> tag. You can have one column or as many as you want. In the above
illustration, we are looking at three columns. Now each column has its own tag: <td>...</
td>. Although these columns appear horizontally in code, they actually represent vertical
columns. So the above illustration represents a set of columns like this:
Tables can be very complex. However, we will create a simple column format. Using some of
the basic HTML tags you have learned so far, let's create a new Web page with tables.
Step 1 Open up a text editor (remember, Simple Text for Mac and Notepad for Windows.
Step 2 Enter the following code:
<html>
<head>
<title> This is a page using tables </title>
</head>
<body bgcolor="ffffff" text="000000">
<h1>A Web Page Using Tables</h1>
<table border="1">
<tr>
<td>This is column one</td>
<td>This is column two</td>
<td>This is column three</td>
</tr>
</table>
</body>
</html>
Step 3 Save the file as table1.html
Step 4 Opening the file in Safari
Notice that I've included a border with a value of 1. When designing a page, it helps to keep
the border attribute in the code just so you know where things are. Then after you are
pleased with the design, you can take out the border attribute. Some folks like the border
on all the time. It's your choice--you're the designer.
Now let's add some copy to our columns. And see what happens. Add the code listed in red.
Step 1 Open the file table1.html
Step 2 Add the code highlighted in red:
<html>
<head>
<title> This is a page using tables </title>
</head>
<body bgcolor="#ffffff" text="#000000">
<h1>A Web Page Using Tables</h1>
<table border="1">
<tr>
<td bgcolor="#000000">
<font color="#ffffff">
<b>This is column one</b>
<br>
I enjoy working on HTML code. It gives me a chance to be creative.</font>
</td>
<td bgcolor="#bee3c2"> <b>This is column two</b></td>
<td bgcolor="#ff8000">
<font color="#804000">
<b>This is column three<br>Notice what happens to the column when you add
copy. It gets larger. This can cause a problem. But we do have a way to control the
margins in tables.</b>
</font>
</td>
</tr>
</table>
</body>
</html>
Step 3 Save the file as table2.html
Step 4 Open the file in Safari
Table width
As you can see from the two examples above, the column widths change as you add text (or
an image). What you need is some control. And you have it in two ways:
1.
Setting the pixel measurement for the table and its columns as a fixed
measurement.
2.
Setting the widths based on the percentage of the screen's width.
Both ways are used by designers. It's really a matter of choice. Let's look at both methods.
Pixel table measurement
The average screen (across all platforms) measures at 595 pixels (width) by 295 pixels
(length). Any wider than 595 and some screens will run your text and images straight
through the right-hand side of your screen. Not a good option.
So you definitely want to keep your full table size at 595 pixels using the width attribute.
Each column within that table should not individually add up to more than 595. Let's use
our code as a way to learn:
Step 1 Open up your file table2.html.
Step 2 Now add the code in highlighted in red.
<html>
<head>
<title> This is a page using tables </title>
</head>
<body bgcolor="#ffffff" text="#000000">
<h1>A Web Page Using Tables</h1>
<table border="1" width="595">
<tr>
<td bgcolor="#000000" width="20">
<font color="#ffffff">
<b>This is column one</b>
<br>
I enjoy working on HTML code. It gives me a chance to be creative.
</td>
<td bgcolor="#bee3c2" width="100">
<b>This is column two</b>
</td>
<td bgcolor="#ff8000" width="475">
<font color="#804000">
<b>This is column three<br>Notice what happens to the column when you add copy. It
gets larger. This can cause a problem. But we do have a way to control the margins in
tables.</b>
</font>
</td>
</tr>
</table>
</body>
</html>
Step 3 Save the file as table3.html Now view it in Safari.
Notice the width in each column. If you add up the widths in each column, you will find it
comes to 595 pixels. It's important to do your math when you're working with columns.
Play around with the code, change the width numbers and see what happens. When you're
done, let me show you another way to control your table widths.
Control table width by percentages
The other way to control the width of your columns is by using percentages. This makes
your page more "dynamic" because the tables and columns adjust according to the screen
size. If the screen is 595 pixels wide, it will fit within 595 pixels. But if your screen is 640 or
more, the table will spread out to fit the entire 640. Let's try it with your current page.
Step 1 Open table3.html and save it as table4.html
Step 2 Add the changes indicated in red.
<html>
<head>
<title> This is a page using tables </title>
</head>
<body bgcolor="#ffffff" text="#000000">
<h1>A Web Page Using Tables<h1>
<table border="1" width="100%">
<tr>
<td bgcolor="#000000" width="20%">
<font color="#ffffff">
<b>This is column one</b>
<br>
I enjoy working on HTML code. It gives me a chance to be creative.
</td>
<td bgcolor="#bee3c2" width="60%"> <b>This is column two</b></td>
<td bgcolor="#ff8000" width="20%"><font color="#804000"><b>This is column
three<br>Notice what happens to the column when you add copy. It gets larger. This can
cause a problem. But we do have a way to control the margins in tables.</b>
</font>
</td>
</tr>
</table>
</body>
</html>
Step 3 Save the file as table4.html. Now view it in Safari.
Wow, you deserve a break. One last chapter--more stuff on tables. It's a pretty big topic.
12. More on tables
So far, we've covered some of the basics to table design. Now let's dig deeper to learn how
to change them to suit our needs.
First, let's again look at the table code illustration used in Chapter 11.
Table Tag
To create a table you must used the following container tag:
<table>...</table>
This let's the browser know that a table is forthcoming.
Row Tag
Each table has at least one row and within that row are columns or what is also referred to
as cells. The row tag looks like this:
<tr>...</tr>
See how the row tag wraps around the column (cell) tags? You can have several rows,
which will be exploring in this chapter.
Column/Cell tag
And finally, to complete your table you must have the column or cell tag--this is where you
information and images go. The column/cell tag looks like this:
<td>...</td>
Notice that I keep on using the words column and cell together. That's because in HTML
tables, these words are often used to mean the same thing. It can be confusing at times.
Maybe an illustration can help. Here is a table with lots of rows and cells (columns).
Notice how this table is like a grid made up of rows and cells. The word "cell" is also referred
to as a "column" and there lies some confusion. So when you work with tables, try to
remember that the word cells and columns are often used to mean the same thing.
Sometimes it will be hard to remember, so refer back to this chart to remind you.
A table with multiple rows and columns/cells
Now that we've gone through the table tags and have a beginning understanding of rows
and columns, let's create a table with several rows and a couple of columns each.
Step 1 Open up your text editor.
Step 2 Enter the following code.
<html>
<head>
<title> Rows </title>
</head>
<body>
<h1>Here's a table with two rows</h1>
<table border="1">
<tr>
<td>This is column one</td>
<td>This is column two</td>
</tr>
<tr>
<td>This is column A</td>
<td>This is column B</td>
</tr>
</table>
</body>
</html>
Step 3 Save the file as rows.html
Step 4 Open the file in Safari
If all went right, you now have two rows and two columns/cells. Now let's examine the
column/cell tag.
Column/cell tag and its attributes
In Chapter 11, we learned about a couple of attributes--bgcolor and width. You can use
these in the table tag (<table>), and the column/cell tag (<td>). You can also use other
attributes in the column/cell tag, such as:
1. align: sets your text or image to left, center or right
2. valign: sets your content vertically to top, center or bottom
3. colspan: expands across multiple columns/cells
4. rowspan: expands over multiple rows
Let's examine each attribute separately.
Align attribute
Leaving your text or image to the left of your column is usually pretty boring, so the align
attribute lets you center things, using "center" or place them to the right, using "right".
Valign attribute
When placing copy in a column, the browser will automatically place it in the center of the
column. You can change this default by using the valign attributes of "top", "center" or
"bottom".
Let's apply these two attributes now before we continue.
Step 1 Open up your text editor.
Step 2 Enter the following code.
<html>
<head>
<title> Alignment Attributes </title>
</head>
<body>
<h1>Here are some examples of alignment</h1>
<table border="1" width="100%">
<tr>
<td bgcolor="#ff0000" width="40%" align="right">
This is column one<br>
This is column one<br>
This is column one<br>
This is column one<br>
</td>
<td width="60%">
This is column two<br>
This is column two<br>
This is column two<br>
This is column two<br>
</td>
</tr>
<tr>
<td bgcolor="#ffff00" width="40%" align="center">
This is column A<br>
This is column A<br>
This is column A<br>
This is column A<br>
This is column A<br>
This is column A<br>
</td>
<td bgcolor="#0000ff" width="60" valign="bottom">
<font color="#FFFFFF">
This is column b<br>
This is column b<br>
This is column b<br>
</font>
</td>
</tr>
</table>
</body>
Step 3 Save the file as alignment.html
Step 4 Open the file in Safari
If all went well, you should have a very colorful table with two rows and four columns
(cells). Now we are ready to explore expanding these rows and columns (cells) in order to
add interest to a page.
Spanning rows and columns
Ever wonder how some pages have such wonderful layouts? They're using tables. To see
what I mean, take a look at these links:
•
Family.com
•
PBS
•
Barney & Friends
•
Demo of the Day by Bill Nye
Even though some of these Web sites are using some advanced things like frames and java
script (coming soon!), each one uses tables as their basic structure. Learning to span rows
and columns can help you add variety to your tables too!
To begin, let's look at our previous illustration, but this time with some rows and columns
expanded.
When creating a table and you want to expand a column or a row you use the following
attributes:
•
colspan: expands across a number of columns
•
rowspan: expands across a number of rows
Let's try this with some code:
Step 1 Open up your text editor.
Step 2 Enter the following code.
<html>
<head>
<title> Rowspan and Colspan </title>
</head>
<body>
<h1>Here's a table demonstrating rowspan and colspan</h1>
<table border="1">
<tr>
<td rowspan="2">This is an example of rowspan. It is spanning two rows.</td>
<td>This is column B</td>
<td>This is column C</td>
</tr>
<tr>
<td>This is column D</td>
<td>This is column E</td>
</tr>
<tr>
<td colspan="3">This is an example of colspan. It is spanning three columns.</td>
</tr>
</table>
</body>
</html>
Step 3 Save the file as span.html
Step 4 Open the file in Safari