Before we get started you
need to download a copy of KompoZer.
KompoZer is both a What You See Is What
You Get (WYSIWYG) editor and an HTML
editor. All WYSIWYG editors make mistakes, which is fine as long
as you know enough HTML to fix the mistakes they make. With KompZer you
can switch back and fourth between WYSIWYG and HTML. Using WYSIWYG is
similar to composing an email.
Basic
HTML Syntax
What
HTML is and isn’t. HTML stands for Hypertext Mark-up Language and
is used
to produce webpages. “Hypertext” is text viewed on a computer that
includes
connections called “hyperlinks” or, more commonly, just links, which
can be selected to
jump to other documents, images, and other websites. Hypertext existed
before the web in
the form of documents that were linked to other documents on the same
computer.
HTML has some characteristics of a programming language but is not one,
strictly
speaking. The main difference is that HTML is used to specify the
structure of a web
page (title, paragraphs, and images, for instance) and how it should
appear in a web
browser, whereas a programming language is used to specify what the
computer should
do. Like a programming language, HTML has
special words
and punctuation that must be very carefully used for the computer to
understand them.
These special words and punctuation, combined with rules for their
proper usage, are
known as syntax.
Two views of HTML: web page and source. A web page is a file consisting
of plain
text that follows the syntax rules of HTML. Before we get started
writing HTML
ourselves, we will look at an example. Here is a very simple web page,
as
viewed in a browser window:
a simple HTML file
as viewed in a web browser
(Note that the address of the page is shown as a pathname, not a URL.
This is because
the web page simple.html is being viewed locally, from a folder
on Drive F,
instead of from a web server. Although web pages are conventionally
viewed via the internet from a remote computer called a web server, web
pages are files
and can be
stored on drives, just as with any other file.)
The file simple.html contains the following text, which is written in
HTML and is
called the web page’s source, to distinguish it from the web page as
seen in the browser:
HTML for the web page
shown above
The web browser’s job is
to read HTML source and display the page it
describes.
Tags: webpage building blocks. You do
not need to understand the whole
HTML file
now, but there are a number of important features to notice. In
addition to the text to be
displayed (including the page title, “This is a simple Webpage,” which
appears in the
browser window’s title bar), the source contains HTML tags placed
carefully in the text.
Tags are special markers that control text formatting (e.g., bold face,
in a table, centered) or allow inclusion of non-text items such as
images and links. Tags are
enclosed in “brackets,” i.e., the “less than” and “greater than”
symbols
< and >. These words
(such as body, h1, p, and em)
do not appear in the browser, but they
affect how the text
they surround is displayed.
If you look carefully at the tags in this example, you will see the two
kinds of tags that
exist in HTML. Some tags are “paired tags” and are used to mark
sections of text, as
opposed to just a specific point in the text. For example, text between
a <p> tag and the
next </p> tag is treated as a single
paragraph. Since the
first tag (without the slash)
denotes the start of a paragraph and the other tag (with the slash)
denotes the end of a
paragraph, in general, we call the first a “start tag” and the other an
“end tag.” Other
paired tags used above include em and strong,
which are used to
indicate that certain
sections of text should be emphasized.
The other kind of tag is the “unpaired tag,” which is generally used to
denote the
insertion of some non-text item in the web page. In the example above,
the <hr> tag is
used to insert a “horizontal line,” a thin horizontal bar stretching
the full width of the
window. There is no </hr>
tag, because it
does not makes sense for a
horizontal line to “contain” text, the way it does for a heading or
paragraph.
In the next steps, starting from a very simple
HTML file, you will gradually add tags and enhance a personal home
page. (See the
example below.)
example page you will
construct
Although webpages are usually viewed from a web server via the
internet, your web
browser can also view local webpages—pages stored on the computer you
are using
now. Until your webpage is basically complete, you should view it
locally.
A good habit to develop early is to work on any project in small steps.
The page you will
construct here will look something like this when you are
finished, but we will add
one feature at a time and check the result in a web browser after each
step.
1. Start KompoZer.
Click the <>Source button, notice the
html start and end tags, <html>
and </html>
tags, each on its own line. These tags enclose the file’s
entire
contents and instruct the browser to
interpret the contents as HTML.
The Normal button is WYSIWYG mode.
2. HTML framework. Inside the html
section (between the
<html> and </html>
tags), you see the head
section and a body section, each with
paired tags. The head section will contain the web
page title, meta tags and CSS page setup, the browser does not
display the head section on the web page itself.
The body
section is where you put the content you want to appear on the page.
3. Add a title. In the head
section, type a title for your web page between the title
tags. Choose something
concise that describes your page well, such as “Home Page of [Your Name
Here].”
4. Save your document. It might not seem like you
have done very much,
but this is already a good place to stop, save, and check your work. In
KompoZer Click "File", "Save as" and type in index then
save the file to your computer, perhaps
in a new folder called Homepage. Because you're using KompoZer your
computer will add the file extension .html to index
making the file name index.html
Note: The file name for your
homepage must be index.html
The first thing a server does when it goes to a URL
(yourdomain.com) is look for a index file, if it does not find one, no
webpage is produced and therefore no website.
5. View your page in a web browser. Minimize
KompoZer and find your index.html file on your computer and
double click it. You can just click the preview button in KompoZer, but
what you see is
not always accurate, it's best to open your file in a real web browser
(preferably Internet Explorer). IE is the most temperamental browser,
if
your webpage looks right in IE it will look right in any browser.
Although your HTML file
clearly contains text, it consists
entirely of tags, so you should see a
completely blank page. However, your page title should appear in the
browser window’s
title bar. If not, double-check that your title is properly typed
between the <title> </title>
tags.
6. Add headings to your page and its three sections.
In the body section, add a heading for the
whole page in paired h1 tags. Make
the heading the name of the person (or pet) this page will feature.
HTML offers multiple levels of headings, and h1 is
the highest
level heading, so it
will be
displayed as large, bold text. Create subheadings for the
“Introduction,”
“Profile,” and “Links” sections using three pairs of h2
tags. Your HTML
file
should now look something like this:
Double-check that your heading tags are properly paired, click save on
KompoZer's toolbar and switch to your web browser. To force the browser
to
load the updated version of the page, you will have to click the Refresh
button on the browser. You should see your headings, with the first h1
heading larger
than the rest.
7. Add a paragraph of text. Add a short paragraph
of text between the “Introduction” and “Profile” headings, making sure
to put
your paragraph in paired p tags. You can break your
lines anywhere you want,
because when the web browser displays the page, it decides where to
place line breaks so that the paragraph fits in the current window
size. Again,
save and check your updated page with the browser.
Syntax Experiments
8. Change the spacing of your HTML source. Modify
the source by adding
at least
three blank lines between the h1 heading and the h2
subheading for “Introduction.” Save your changes, switch to
your browser window,
but before refreshing it, make note of how many lines of space appear
to be
between your h1 heading and the “Introduction” subheading in the web
page.
Refresh the page. Notice the number of lines of space did not change
with your modification to
the source. To create a line of space use the <br>
tag (the <br> tag does not need to be closed, there is no
</br> tag). Try the same experiment only use 3
<br> tags. Use the <br> tag to
create space between lines.
9. Modify the source by adding at least five spaces (not
lines) between any two words in your first paragraph. Again, save
changes and
watch carefully as you refresh your browser, focusing on the two words
you
added space between in the source. Notice the word spacing on the web
page did not change with
your modification to the source. HTML will only recognize one space no
matter how many you put there. To create space between words use the
tag (no brackets). Try it again only use five
tags. Use the
tag to create space between words.
In the next step, you will add a list to your document. HTML supports
two kinds of lists,
“ordered” and “unordered.” Each item in an ordered list is numbered and
displayed on a
new line. An unordered list is similar, except that, instead of
numbers, each item has a
bullet (a solid dot, in HTML’s case) in front of it. The general format
of a list is a section
marked by paired ol or ul tags
(for ordered or unordered list,
respectively). The items
go inside this section, with each item in paired li
tags (where li
stands for list item), as
in this ordered list example:
<ol>
<li>apples</li>
<li>peaches</li>
<li>lemons</li>
<li>oranges</li>
</ol>
The above HTML, viewed in a browser, looks like this:
1. apples
2. peaches
3. lemons
4. oranges
Note that in the HTML source, you do not have to explicitly number the
items. Instead,
the web browser numbers them for you in the order you provide them in.
(For an
example of what an unordered list looks like in a browser, see the
“Profile” section in the
example web page, “Kitty the Cat” above.)
10. Add a list to your “Profile” section. Using
list tags (either of
ordered or
unordered is fine) as described above, add a list of “fun facts” about
you under the
“Profile” subheading. Be aware that you can use other tags inside each
list item
(li) section, e.g., the em tag is used in the items
in the “Kitty the
Cat” page.
11. Add author and modification date to the bottom of the page.
Before
you add
more to your page, add author’s credits and today’s date at the bottom
of the page
(properly placed in paired paragraph tags). So far, you have been
working with
paired tags, so this is an opportunity to add an unpaired tag. Use the
<hr> tag for
a horizontal line to separate the author and date from the rest of
the page.
Add some text
color. Change the h1 header to red text.
<h1><font
color="red">Kitty the Cat</font></h1>
The web’s key feature is the ability to link documents together across
networks with
ease. In the “Kitty the Cat” example page, there are two links under
the “Links”
subheading. Clicking on the second link (“Humane Society of the United
States”) brings
you to the page at URL http://hsus.org/. The paired a
tag is used
to mark
the link and specify the link URL. The HTML to for the Humane Society
link is as
follows:
<a
href="http://hsus.org">
Humane Society of the United States</a>
When you use the a tag to make links, make sure
that the URL is in
quotes and in the
start tag, you have a space between the tag name, a
(“anchor”), and the
href (“hyperlink
reference”) URL section.
If you do not have any favorite web sites, just add links to popular
and generally useful sites like Google and Yahoo:
http://google.com
http://yahoo.com
You can have the links open in a new browser window by using target="_blank"
after the URL in the HTML. Be sure to leave a space between the URL
and target="_blank"
<a
href="http://hsus.org" target="_blank">
Humane Society of the
United States</a>
12. Add an unordered list of links in the “Links” section.
Recall that
you can put tags
inside list items (li sections). Using paired ol
tags for an unordered
list, make a
list of at least two links. Just as in the example link above, make
sure to put the
title of the web page you are linking to between the a
tags. As you add
each link,
save changes, refresh your browser, and click the link to make sure it
works.
Moving targets. A broken link is a link whose URL is incorrect. The URL
might have a
typo in it, or the page at the URL might have been renamed, moved to
another folder or
server, or deleted altogether. The web changes so frequently that links
often go out of
date. Some sites, such as Yahoo (www.yahoo.com), are stable and are
unlikely to
move or otherwise change URL, but pages that private individuals
maintain frequently
come and go without warning.
Before we add an image to your page, we will upload the
version you
have now. Transfer a copy of your HTML file to your web server using
FTP (File Transfer Protocol).
13. In order to upload your page you will need a domain name with
hosting and an FTP client. If you do not have an FTP client, go
download a copy of FileZilla. If you do not
have a domain name with hosting, you can get a free domain name with
your hosting package
through JustHost.com.
To upload your page, Open your FTP client and
connect to your server using your host name (yourdomain.com) and the
username
and password provided by your hosting company. On the server
side (right side) of your FTP client, open
either the public html folder or the yourdomain.com
folder (there
will not be both). On the local side (left side) of your FTP client,
open your Homepage folder and upload (double click) your index.html
file to your server.
14. Access your page from the internet. Open
the URL (yourdomain.com) in your web browser and verify that the page
is the same
as when you viewed it from a local drive.
An image is the last difference between your web page and the sample
page presented
earlier. There are many different image file formats, but the more
common ones are
called JPEG and GIF, both of which use special techniques for storing
image data using a
relatively small amount of disk space. JPEG filenames usually end with
extension jpg and GIF filenames end with extension gif. Most of the
images
that you see on the web are files in one of these two formats.
You first need to find an image file to add to your page. One easy way
is to just copy an
image you find on the web (some images have a copyright), or use one
you already have.
15. Copy or move an image to the folder
where your index.html is saved. Your image will not appear in
your web page simply because
it is in the same folder as the HTML file. In the next step, you will
add a
special tag to your HTML source to display the image.
16. Add the image to your web page. The unpaired
img tag is used to add
an image
to an HTML document. Here is an example usage of the img
tag:
<img
src="cat.jpg" alt="photo of a cat">
The src (“image source”) setting specifies the name
of the image file
to be
inserted in the page. The alt (“image alternative”)
setting is used to
provide a
brief text substitute for the image, commonly as a descriptive phrase.
Strictly
speaking, the alt setting is optional, but it is
very important for web
browsers
that are not capable of displaying images. For example, there are
special web
browsers for visually impaired people that use computerized speech to
“read
aloud” web pages. Text substitutes for images are essential for browser
like
these. In conventional browsers, if you leave your mouse pointer over
an image,
the associated alt text will pop up in a small label, like a caption
for the image.
Follow the example above and add an img tag to your HTML source before
your
“Introduction” heading. Make sure the image filename you specify in the
src
setting is exactly right, including capitalization. Save your HTML and
open the
HTML file from the local drive to verify that the page
includes the
image.
TROUBLESHOOTING: If your image does not appear in the page, check to
make
sure that the image file is in the same folder as your HTML file and
that the src
filename is exactly right, paying attention to case.
17. Adjust image size, if necessary. Image files vary widely in size,
so you might find
that your image is too large on the page when viewed in a browser. In
this case,
you can use additional img tag settings to adjust
the size. One easy
way to do this
is by forcing the image’s displayed width as a percentage of the
browser window
size, using the width setting. For instance, adding
this setting to the
img tag example above forces the browser
to resize the image so that it always
takes 20% (one fifth) of the browser window width:
<img
src="cat.jpg" alt="photo of a cat" width=20%>
Try adding a width setting to your img tag, making
sure not to forget
the percent symbol. Check results in your browser as you adjust the
percentage. Try
resizing the browser window and watch the image carefully. It will
change size
when you resize the window.
18. Adjust image alignment, if desired. If your
image is tall, like the
cat photograph
in the example page, you might want it displayed side-by-side with the
text. You can easily do this by adding an alignment setting to your img
tag.
Adding align=right to the example above puts the
image on the right side of the window, allowing text to appear to its
left.
<img
src="cat.jpg" alt="photo of a cat" width=20% align=right>
19. Upload the updated web page. Using your FTP
client, upload the updated HTML. Your page is not quite ready to
view from the web yet, because it includes an img tag whose source
image file is not yet in your web folder. Upload the image file to your
web folder.
Switch to the browser window displaying your page from the internet
and refresh the page. The browser should now properly display the image.
Congratulations! Your very own corner of the World Wide Web is now
complete. Your webpage is accessible to anyone in the world with
a Internet connection. A website is just several webpages linked
together, so if you can build a webpage, you can build a website.
Experiment with what you've learned
• Most HTML tags can be combined freely,
as you saw with li sections containing text formatting tags and link
tags. Try other combinations in your web
page, e.g.,
lists nested inside lists, list of small images, links that are images
instead of text
(img tag inside an a section).
• Make a second page on another topic (e.g., a friend of yours, a
family member,
your favorite book, a band you like). Save the page with a filename
other than
index.html. In your index.html, add a link to this page by using the
new HTML file’s name as the link reference (href setting). To link
a web page to another page in the same folder, instead of using a full
URL,
you can just use the filename (file.html).
• Start playing with WYSIWYG in KompoZer. You can add
images, links, ol/ul lists, format text, etc... Be prepared to switch
to the Source and fix stuff, it's still faster than
hand coding. One of the things WYSIWYG does well is insert Tables,
but you still need to understand the next section. As you get more into
HTML there will be things that you have to do from the Source. WYSIWYG
only goes so far.
Tables are used to section off content
and change up the look of a web page. The easiest way to do this is to
create tables with no border, this way only the content shows up on the
webpage. For learning purposes we've put a border around the examples.
| This HTML code... |
<table border="1">
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
</table>
|
| Looks like this in your browser... |
| Table cell 1 |
Table cell 2 |
|
You'll notice that we have a border
attribute in the table tag. This particular
attribute allows us to specify how thick the border will be. If we
don't want a border we can specify 0 (zero). Other common attributes
you can use with your table tag include width,
cellspacing and cellpadding.
You can also add attributes to the tr
and td tags. For example, you can specify the
width of each table cell.
Widths can be specified 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.
| Add
some attributes to your table... |
<table border="1" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>
|
| Looks
like this in your browser... |
| Table cell 1 |
Table cell 2 |
|
Table
Headers
Many tables, particularly those with tabular data,
have a header row or column. In HTML, you can use the th
tag.
Most browsers display table headers in bold and
center-aligned.
| Add
a table header row... |
<table border="1" cellpadding="2" cellspacing="2" width="100%">
<tr>
<th>Table header</th>
<th>Table header</th>
</tr>
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>
|
| Looks
like this in your browser... |
| Table
header |
Table
header |
| Table cell 1 |
Table cell 2 |
|
Adding
CSS to tables
You can format your tables using Cascading Style
Sheets (CSS). Using CSS, you can specify background colors, border
colors, border styles etc. Although HTML has a tag for aligning
table contents, and another for specifying a background color, the
CSS is more reliable with more options. You are better off using CSS
for these tasks.
| Let's
add some styles... |
<table border="1" cellpadding="2" cellspacing="2" width="100%"
style="background-color:orange;border:3px dashed black;">
<tr>
<th style="text-align:left">Table header</th>
<th style="text-align:left">Table header</th>
</tr>
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>
|
Looks
like this in
your browser... |
| Table
header |
Table
header |
| Table cell 1 |
Table cell 2 |
|
The <meta> tag provides metadata about an HTML document.
Metadata will not be displayed on the page, but will be used by search
engines, web browsers and other web services.
Meta tags are typically used to specify page description, keywords,
author of the document, and tell search engines to include your
webpages.
Meta tags always goes inside the head region. See
the example below:
<head>
<title>HTML
Tutorial</title>
<meta
http-equiv="content-type" content="text/html;
charset=ISO-8859-1">
<meta
name="robots" content="INDEX,FOLLOW">
<meta
name="description" content="Internet Marketing and Free Web
tutorial">
<meta
name="keywords" content="HTML,CSS,tutorial,marketing">
<meta
name="author" content="Jane Britt">
</head>
The robots meta tag tells the search engines to include this page, If
you do not want a page included, the tag should read NOINDEX,NOFOLLOW
The description and keywords meta tags should not be over 200
characters each, any more and the search engines will ignore them.
Use the CSS code below to set the defaults for your Webpages. Place the
CSS code in the head region below the meta
tags. Change the specifics to your preferences.
<style
type="text/css" media="all">
body {margin:0; solid
white; margin: 0; padding: 0px;
font-family:"Arial",
Helvetica, sans-serif; background-color: rgb(255, 255, 255);
color: #000000;}
a {color:#3333FF;}
a:hover
{text-decoration:underline; color: #990000;}
tbody {color: #000000;}
</style>
body {margin:0; solid
white; margin: 0; padding:
0px;
Sets the margin and padding for the perimeter the page.
font-family:"Arial",
Helvetica, sans-serif;
background-color: rgb(255, 255, 255);
color: #000000;}
sets the font, background color and text color for the page.
a {color:#3333FF;}
a:hover {text-decoration:underline; color: #990000;}
Sets the link color and link hover color for the page
tbody {color: #000000;}
Sets the text color for the tables
Page
Tags
<html></html> Creates an HTML document
<head></head> Sets off the title and other
information that is not displayed on the web page itself
<body></body> Sets off the visible portion
of the document
Text Tags
<hl></hl> Creates the largest headline
<h6></h6> Creates the smallest headline
<big></big> Makes text bigger
<small></small> Makes text smaller
<b></b> Creates bold text
<i></i> Creates italic text
<tt></tt> Creates teletype, or
typewriter-style text
<cite></cite> Creates a citation, usually
italic
<em></em> Emphasizes a word (with italic or
bold)
<strong></strong> Emphasizes a word (with
italic or bold)
<font size="3"></font> Sets size of font,
from 1 to 7
<font color="green"></font> Sets font
color, using name or hex value
Links
<a href="domain.com"></a> Creates a
hyperlink
<a href="domain.com" target="_blank"></a>
Opens link in new window
<a href="mailto:email@domain.com"></a>
Creates a
mailto link
<a href="domain.com"><img
src="name.jpg"></a> Creates an image/link
<a name="linkname"></a> Creates a target
location within a webpage
<a href="#linkname"></a> Links to that
target
location on the same webpage
Formatting
<p></p> Creates a new paragraph
<p align="left"> Aligns a paragraph to the left
(default), right, or center.
<br> Inserts a line break
Creates one space between words
<blockquote></blockquote> Indents text from
both sides
<ol></ol> Creates a numbered list
<ul></ul> Creates a bulleted list
<li></li> Precedes each list item, and adds
a number or symbol depending upon the type of list selected
<div align="left"> A generic tag used to format large
blocks of HTML, also used for stylesheets
<img src="name.jpg"> Adds an image
<img src="name.jpg" align="left"> Aligns an image: left,
right, center; bottom, top, middle
<img src="name.jpg" border="1"> Sets size of border
around an
image
<hr> Inserts a horizontal line
<hr size="3"> Sets size (height) of line
<hr width="80%"> Sets width of line, in percentage or
absolute value
|
