Right off the
bat:
The First thing. . . File | Save As
You can learn more by saving other people's pages and opening
them up in the CoffeeCup HTML Editor than any book could
provide. Use what has already been created as your Guideline.
There are professionals creating these Great pages and since
Browsers let you save it as .html - what could be better ?
What it all comes down to is understanding that HTML is two
things: Text and Tags. Text are all the words
you see. Tags define the way the text and images are presented.
If you want the word COFFEE to be in bold, you could
use the <b> tag. It might look something like this:
We drink <b>COFFEE</b> to wake up.
It's that simple.
It's Just Text
A webpage can be simply described as just a text document.
Web Browsers simply read the text document, and format the text
as described by the HTML tags it contains.
Tags
The webpage (HTML document) consists of tags and text.
The HTML and BODY tags are the only required tags
for a webpage. Tags typically describe to the webrowser
how to display the text. By "typically" we mean that
some tags are used for things other than formatting text, such
as displaying an image (more one this later).
The simplest of webpages would consist of the following text
and tags:
<html>
<body>
This is my webpage!
</body>
</html>
The <html> tag tells the browser that the document is
an HTML page. The <body> tag tells the browser where the
body of the page begins and ends.
Most tags consist of an opening tag, and a closing tag. The
opening tag consists of <> characters. The
closing tag consists of the same <> characters,
but after the < character the / character tells
the browser that this is a closing tag.
For example:
This is the <b>text</b> on my webpage.
The <b> tag tells the browser to start formatting
text in bold. The </b> tag tells the browser to
stop formatting text in bold. As a result, the word "text" is
formatted in bold.
Attributes
Attributes are additional parts of the tags that tell the browser
additional properties of the tag. Attributes are typically described
in the attribute="value" format, but can occasionally
consist of just a single word, such as noshade.
Attributes follow the tag name and are prefixed with a space.
For example:
<p align="right">My Paragraph.</p>
This tells the browser that the Paragraph is to be aligned
to the right.
Referring to Files
Before too long, you'll want to include images in your webpage
or links to other webpages. Links to files consist of relative
paths. Relative means that the full path to the file is not
specified, but just the information necessary to navigate to
the file.
For example:
<img src="myimage.gif">
This example specified just the filename. This tells the browser
that the image is in the SAME directory as the html page
that is referring to it.
If the image was in a directory immediately under the directory
where the html page is, then the following would be used:
<img src="myimages/myimage.gif">
This tells the browser to look in the myimages directory
for the image.
To navigate up a directory, the ../ is added to the front of
the image path to tell the browser to navigate up one directory
before navigating to the file.
Links
To link to another webpage, use the ANCHOR tag (<A>)
and specify the Hypertext Reference with the HREF
attribute as follows.
<a href="about.html">Here's a link to my about page</a>
or
<a href="http://www.coffeecup.com">Here's a link to my friends page</a>
To refer to a desination on the same page, simply
insert an ANCHOR at the desired location like this:
<a name="top">This is the first line in my page.</a>
Then link to it by specifying the anchor name in the href,
preceded by the # character like this:
<a href="#top">Here's a link to the top of my page</a>
Conclusion
That's all there is to it. Well, OK, so there's still a lot
to learn, but just remember, it's just text. You can learn a
lot about HTML and how to do things by using your web browser's
View Source option to study the text of an HTML page.