Note that the information on this page is very similar to the step-by-step
instructions on hand-coding your first web page.
Pull down the browser's View menu and select Source. HTML,
hypertext mark-up language, is all the stuff between the angle brackets < and
>. A web page is a text file that usually ends in .htm or .html. When
you click on a link or type in a URL, the browser requests this text file from
the server, which is a computer just like yours except it's on 24/7 and isn't
used for anything else.
The browser is a large piece of software (megabytes and
megabytes in size) because it has the ability to interpret this text file and
display what you see.
To define it more formally, HTML is a structural mark-up
language written a decade ago by Tim Berners-Lee as a subset
of SGML, standard generalized mark-up language, which had been around since the
1960's. The mark-up tags are supposed to describe structure,
how your content relates to other content on the page, not presentation or semantics --
how it looks or what it means. On the page you're reading now, most of the
content is words and most of the words are either in paragraphs or in headings.
The very idea of Web literacy, reading and writing HTML, scares
people. I encourage you to look at their fear as an opportunity to gain a
marketable skillset, even more an attitude, a marketable mindset, that will
distinguish you from your peers, your boss, and most of your professors.
Many software packages, ranging from free to thousands of
dollars, will insulate you from the HTML code. However, if you're willing to get
your hands a little dirty, you can make everything with the basic text
processor, Notepad, that comes with every PC. I recommend NoteTab, a free download, because of its many
time-saving features.
Tip | To write HTML code, always use a text
editor such as Notepad or NoteTab, not a word processor such as Word or
WordPerfect.
Structure
The idea of HTML is to tag textual content as either a paragraph
or a heading. Most tags come in pairs, so you would take all the sentences that
belonged in the same paragraph and tag them with a <p>
and a </p>, which I pronounce "slash
p" or "end p". The paragraph you're reading now would have a <p> right in front of "The idea of HTML
..." and a </p> right after the period
following "... simple". It's that simple.
How many tags are there?
A couple dozen.
Webmonkey has a short,
complete list. I add my comments on each type
of tag on another page in this webmaking section. In the learn more section
below, you can find links to comprehensive lists of
tags and attributes.
At first, you need to worry about only a handful, specifically
those for:
setting
off paragraphs - <p>
distinguishing
headings from paragraphs - <h1> through <h6>
making links - <a>
embedding images -
<img>
The p, h, and a tags come in pairs. They surround the text you
want to designate as a paragraph, heading, or link. The img tag is not paired.
It gets inserted where you want the image to appear.
Images are separate computer files that almost always end in
either .jpg or .gif. Thus, a Web page with three images is really four computer
files: the .htm text file and the three images embedded in it.
As long as you have a legal page, the
browser will display the rest as best it can. While I would like to teach you
pure old-fashioned HTML 1.0, the extended version popularized by Netscape is now
standardized into HTML 3.2 and the more recent HTML 4.0, so that's what we'll
learn.
You're going to learn to read and to write HTML at the same time
because you can't do either well without the other.
Please note
Case
Upper- and lower-case letters don't matter. To the browser, <h1> is the same as <H1>.
In these examples, I use all lower-case.
Spacing
Within p and h tag pairs, spacing matters. Between tags, spacing
doesn't matter. Thus, <p> Yes and no. </p> will display differently than <p> Yesandno. </p>.
In these examples, I use spacing between tags to make the chunks of code
easier for you to read.
Color
In the examples on these pages, everything in purple is a tag and everything in red is an attribute. Everything in blue is a value, the specific instruction to the
browser, which you can change. Everything in black that is within tag pairs is
the text that the browser will display. Note that these colors are for
illustrative purposes only. They are not necessary to make the page work, nor
will they appear in the text editor. If you use a tool such as FrontPage, you
can set the colors to be anything you want,
which makes reading HTML much easier.
A Legal HTML Page
I gave you a head start by creating a directory for you at Parkside Plaza. Click on your
name. The next page that comes up should greet you by name.
Pull down the View menu and select Source. That should bring up
in the text editor a file that looks like this:
Three nested tag pairs make it a legal HTML page. By legal,
I mean that it will have the bare minimum necessary for a browser to display it.
<html>
<head>
</head>
<body>
</body>
</html>
These tags are paired. There is a starting tag and an
ending or closing tag. The closing of each pair has a forward slash / in front.
Most, but not all tags have a closing tag.
These tags are also nested. The pair of head tags is
nested within the html tags. The body pair is also nested within the html tags
but not between the head tags.
Think of tags as talking to the browser, or better yet giving it
instructions. What you have just told the browser to "start displaying an
HTML document" (<html>) and "stop
displaying an HTML document" (</html>).
Everything that you add will go:
between
the head tags if it is information about the page
between the body tags
if you want it to appear on the page as it is displayed by the
browser.
between the head tags
Look for the title tags, <title>
and </title>. The information between them
appears on the browsers very top title bar and on search engine results, so it's
very important. When viewing search engine results, you frequently decide
whether to view the whole page based on this title information.
You should also see four meta tags <meta>,
information about the page. The page is legal without them and would work just
fine. FrontPage adds these four tags automatically, so get used to seeing them.
The first two specify language and media type. The second two are a bit of
Microsoft branding; Microsoft doesn't miss many branding opportunities.
between the body tags
Between the body tags of your index.html source code in Notepad,
you should see a chunk of geeky-looking HTML code.
In fact, there are only two kinds of tags in there, p tags and a
tags. They are paired, <p> and </p>, <a> and <a>. Try to identify each pair.
If you take away those tags, including their attributes, that
is, everything between angle brackets, you will have remaining the text that
displays on the web page in the browser. The tags simple tell the browser how to
display it.
Getting Started
We're going to make changes in the text editor, save the file to
your desktop, and then view the changes in Microsoft's browser: edit, save,
refresh. Please review this 5-step process at the
bottom of this page.
Background Color
Set the background color of the page by adding an attribute to the body tag and a value
to the attribute.
<body bgcolor="#ffcccc">
The colors are only to help you read, but the spacing is
important. Follow it exactly. Now edit, save, refresh.
Experiment with colors by changing the ffcccc to any
six-character sequence between 0 and 9 and A and F. Then save and refresh. For
example, bgcolor="#123456" displays a deep green. Its reverse, bgcolor="#654321", displays as deep a brown.
The first two characters (ff above)
determine the red, the middle two (cc) the green,
and the final two the blue (cc). All zeros displays
as black (the absence of light) and all f's as white (total light). Equal red,
green, and blue will display a shade of gray. Try bgcolor="#b2b2b2". Now edit,
save, refresh.
You have 16.7 million colors available (16 possibilities for
each of 6 characters; 16 to the 6th power equals 16.7 million), so you won't be
memorizing the complete list any time soon. Your eye cannot distinguish adjacent
colors on that scale.
Let's get started with around 200. Check out Lynda Weinman's browser-safe colors. Learn more about using color on web pages.
Text: Headings and Paragraphs
By default, this text will be black. It may be hard to read
depending on the background color you chose earlier. Try this combination for an
interesting effect:
<body bgcolor="#666633" text="#ffcccc">
Now edit, save, refresh.
What about headings? They're usually phrases that display larger
than text and are often centered or boldfaced.
HTML provides for six levels of headings, from h1, the largest,
to h6, the smallest. In Notepad's display of your index.html page, you'll see
your name between p tags. Change <p> to <h1> and change </p>
to </h1>. Save and refresh. Now copy and
paste (CTRL-C / CRTL-V) the tag and its contents five times. Then change the
second h1 tag pair to h2, change the third to h3, and so on. Save and refresh.
For more practice, copy and paste several hundred words of text
between the body tags. Divide the text into a dozen smaller pieces and tag them.
Choose one piece and put <h1> and </h1> on either side.
Choose another piece and put <h2> and </h2>
on either side. Choose another piece and put <p> and </p>
on either side.
Keep doing this until you have tagged all the text. Save and
refresh. You may well have a mess, especially if you omitted an angle
bracket. That's ok. Make a bigger mess. Just to see what happens, you might want
to leave one or two chunks untagged or omit the closing p tags from other
chunks. Save and refresh. As you'll see, browsers are very forgiving.
How can you better determine what your page looks like? Learn
about style sheets.
Links
In your text editor, you'll see a pair of a tags enclosing some
text.
<a href="http://RicciStreet.net/">Ricci Street</a>
The href stands for hypertext reference. It's an attribute of
the a tag. Remember that you can't change tags and attributes. While a browser
may appear to be smart, it really understands only a small number of tags and
attributes and they are in a very specific, exact, precise code called HTML. One
slip-up can throw the whole thing off.
The part in blue is the value. In this case, it's the URL of the
web page that will appear in the browser after you click. Change the
RicciStreet.net to something else, say, the URL of the home page of the company
you work for. Save and refresh.
Do you see those hrefs that begin ../? Learn
more.
Images
Just as the a tag needs a reference, the img tag needs a source,
that is, a path to the .jpg or .gif file that you want displayed. At the top of
this page, right-click on the goofy-looking mechanical object, aka gizmo, and save it to your desktop,
keeping the file name logogizmo.gif.
This tag is one of the few without a pair. It does, however,
require some attributes. Somewhere amidst the text between a pair of p tags,
insert this code.
<img src="logogizmo.gif" alt="Gizmos, Inc. logo"
align="left"
border="0"
width="125"
height="150">
When you check it out in your browser (after saving the text
file and refreshing or reloading the browser), the gizmo should display on your
page. If you hover your cursor over it and pause, a little box will pop up that
says "Gizmos, Inc. logo", which is the value of the alt attribute. The
image should be aligned against the left margin of the page and have no border
around it. The image is 125 pixels wide and 150 pixels high.
Change anything in blue except the file name logogizmo.gif, save
the text file, and refresh the browser. Changing the 125 and 150 to much larger
or smaller numbers will have a dramatic effect on how the gizmo looks. Try
halving one and doubling the other. Changing the border to 1 will put a sharp
black line around the image. Changing it to 15 will put a 15-pixel wide black
box around the image. Yuk.
To put a 10-pixel horizontal and a 6-pixel vertical padding
around the image, add these attributes: hspace="10" and vspace="6".
Note | These attributes can appear in any order
within the img tag.
You can make the image "hot" by wrapping it in a pair
of a tags. Learn more.
For a complete list of all the codes and attributes, save the HTML Compendium to
your desktop and keep it handy. Learn more.
Putting it all together
In the body of an HTML page, the four tags discussed above (p,
h, a, and img) account for 90% of all the tags you're going to see. Some of the
attributes can get very complex, but you can learn more about them as you go
along by viewing other web makers' source code. The other 10% are mostly paired
table tags, <table></table>, <tr></tr>, and <td></td>
and form input fields.
Let me repeat that for emphasis. If you've followed so far, you
already know how to read and write 90% of the tags you're ever going to see.
Thus, you should be able to read any page by deconstructing it.
For me, a key reference point is the head tag pair. Especially look for where
the head tag ends, </head>. On home pages,
often index.htm or default.htm, you can learn a lot about what's going on
backstage at the web makers' by reading between the head tags.
Tip | The best and most common way to learn HTML is
to view source and copy-and-paste code from others' pages into yours.
Within the body tags, look for h and p tag pairs. They are
rarely nested within each other. However, almost all a and img tags are nested
within p tags.
Find code
Remember that you have a find feature in your text editor. If
you view the source code of a page that seems hopelessly complex, you can search
for a tag that is displayed on the page in order to view the source code around
it. For example, search for <p, not <p>, so that you'll find the p tags
that have attributes.
View partial code
To view just part of a page's code, use Microsoft's Internet
Explorer with the Web Accessories
installed. Then you can highlight what you want to see, right-click, and select
View Partial Source. It may look a little goofy at the beginning and end if
you've overlapped some nested code, for example, if you are viewing part of
nested tables.
Study code offline
To save a web page for later study offline, pull down the
browser's file menu and select Save As ... It will rename the images and scripts
and put them all into special directory it creates in the same subdirectory
where you save the page (the .htm file).
Deconstruct tables
If you are using Microsoft's Internet Explorer and have
FrontPage installed on the same machine, you should see an Edit button on the
browser's toolbar. If the toolbar isn't showing, pull down the View menu and
select Toolbars | Standard Buttons. If the Edit button doesn't show, click on
the little black triangle at the far right end of the toolbar. If that doesn't
work, try to pull down the file menu and select Edit with FrontPage.
No matter what page you're viewing on the Web, if you click that
Edit button, the page will come up in FrontPage's Normal view. It shows hidden
tables as dotted lines, so you can see the page's structure better.
Commercial web pages use lots of nested tables to control layout
because the web makers are coming from the print world where things stay still.
Put your cursor within the table, pull down FrontPage's Table menu, and select
Convert | Table To Text. You may have to convert several times to clear out all
the nested tables.
For example, click the Edit button while you're viewing this
page, html.htm. Scroll to the bottom, where you'll see the bottom navigation bar
surrounded by a grid of dotted lines. Put your cursor in the middle, pull down
FrontPage's Table menu, and select Convert | Table To Text.
Color the code
In FrontPage's HTML view, you can color the code as I have
here.
By pulling down FrontPage's Tools menu and choosing Page Options
and selecting the Color Coding tab, you may change these colors to make HTML
code even easier to read. I highly recommend doing to. Learn more.
What about Netscape?
The Netscape browser works the same way with Netscape Composer
instead of FrontPage. You must have installed the whole Netscape Communicator
suite.
Learn More
Beginners
If you're confused, hearing about HTML from a different point of
view might help. I highly recommend Project Cool's QuickStart.
Try Out
Your HTML
by Marshall Brain
Enter any piece of HTML code in the space below and push the
"Submit" button to try it out and see how it will look!
For yet another step-by-step, try Joe Barta's Page Tutor.
Draac.Com - Building A
Better Internet. This site has beginning and intermediate step-by-step tutorials
and copy-and-paste code (be sure to wash it first in Notepad)
for HTML, tables, forms, and CSS.
About.com has a help and tutorials sections called What is HTML?
Their HTML
101: A 10 Week HTML Training Course seems especially useful because you can
go at your own pace, learn with a friend, or follow along with the weekly
syllabus.
Intermediate
After you have the basics, the best comprehensive source is Webmonkey,
especially these four: HTML Teaching
Tool, History
of HTML, HTML
Basics, and List of tags
("cheatsheet").
Stephan Le Hunte's HTML 4.0
Reference Library is a downloadable web that you can use offline while
you're learning to read and write HTML. It emphasizes what's practical and
usable, where the HTML
Compendium is a comprehensive current list of all the tags,
attributes, arguments, and (in)compatibilities. It covers everything in the official specifications administered by the
World Wide Web Consortium (W3C) at MIT.
Best Bet! W3Schools.com
Free Web Building Tutorials - from basic HTML and XHTML
tutorials, to advanced XML, XSL and WAP tutorials.
The following sites have much of the same info. They differ
mostly in attitude and organization. I recommend whichever ones
"speaks" to you best.
HTML Code Tutorial - Learn HTML tags including form, frames, and tables with help from this free reference.
Earthweb's
HTML Goodies
CNet's Web Building
Internet.com's Web Developer's Virtual Library and Web Reference
Web Design 101
Squishy's
Crash Course in Information Design
10
Questions About Information Architecture
The
Foundations of Web Design
ABCs
of Building a Web Site: A Web Design Tutorial for Rank Beginners
Karen
Jessett's Creating a web site - a step by
step guide
A guide to creating a web site, including html, dhtml, css
style sheets, usability, design principles, creating graphics, using dreamweaver
and submitting to search engines. Everything about creating a web site through
good working practice. Also includes an faq for all your frequently asked
questions about web design.
DK3.COM
The best resource for webmasters seeking professional,
International Online Web Resources, for free. DK3.COM provides webmasters, on an
individual basis, with the full range of standard and state of the art Web
Resources.
E-mail Form Processing Let’s you put a series of questions up on your page and
the responses will be e-mailed back to you instantly. Great for business or just
for fun! Ask any questions you like.
The Univ. of Oregon Library System's Web Publishing Curriculum Resources
has guidelines for good practice and a collection of handouts for use in web
publishing workshops. Example: Anatomy of a URL
Brent Herring's HTML
Calendar Generator
Sometimes when you right click, there is no View Source option
available. If so, here are two tricks:
1) In Internet Explorer's Address field, enter: "view-source:[URL]"
(without the quotes). Replace the [URL] variable with the full Web address of
the page in question.
2) Enter a Web address in the Open File dialog of any program.
Fire up Notepad, click File | Open and enter a full URL (including the
obligatory "http colon slash slash").
design
The best single source is Patrick Lynch's Web Style Manual,
originally written for the Yale Center for Advanced Instructional Media.
Digital Web Magazine -
The web designer's online magazine of choice.
Internet.com's Web Developer's Journal
- Tips on Web Page Design, HTML, Graphics, Internet Business, E-commerce and
Development Tools
Learn more about design
guides.
Handy Utilities
HTML validation
W3C's validation service
and Check link
For many people, the literalness of computers is difficult to
deal with. If you leave out one backslash or one bracket, it can throw off the
whole rest of what you intended. The validation service above works only online.
For a free download that will do the same thing, try the W3C's HTML Tidy.
Don't get too excited when you see the length of what comes
back. Some errors early in a document, for example, a missing >, can throw
off the rest.
Free online link checking and HTML validation: QuickCheck and Web Site Garage
Link Valet -
whole site link checker
Dr. Watson - for single pages: word count,
spell check, style warning, link check, download speed
Dr. HTML - for
single pages - assess the quality of your meta-tags, browser support, and more.
Advanced - geek alert!!
Index
DOT Html: THE Advanced HTML Reference
Index Dot HTML is a complete reference to HTML: The
elements, the history, and the browsers. If you need to know something about
HTML, this is where you will find the answers.
developers
CMP
Media's Web Techniques (my personal
favorite) and Web Review
Joe Gillespie's Web Page Design for Designers
DevGuru
comprehensive quick references, in-depth tutorials, and
helpful articles
The Service of
Server-Side Includes
by Michelle Mach
LITA, the Library and Information Technology Association, December 2001
The use of server-side includes (SSI) simplifies Web site
maintenance by generating Web pages on-the-fly, rather than creating static HTML
pages. This article provides examples and instructions for common uses of SSIs,
including displaying environmental variables, inserting file information, and
using the advanced capabilities of extended SSI (XSSI). Potential concerns
including security, WYSIWYG (what-you-see-is-what-you-get) editors, filename
extensions, and server load are discussed, as are the advantages and
disadvantages of SSI over more well-known tools like CGI, JavaScript, or Active
Server Pages (ASP).
XML
General XHTML Reference:
xhtml.org
Web Developer's Virtual Library
World Wide Web Consortium
XML resources:
xml.org
xml.com
Gecko / Mozilla / Netscape 6
Web
Developers section
Browser compatibility
introduction to Cross-Browser
Web Development
cross-browser FAQ
Ultimate
Client Sniffer - updated to detect Netscape 6 and most of the browsers you
are likely to encounter
from proprietary DOM and Markup to W3C standards
how to use W3C standard markup to achieve the same results
in Internet Explorer, Netscape Communicator 4.x and Netscape 6
dynamic HTML
There's more to interactivity than just clicking. Learn how to
make an event in one place on a page change something elsewhere on the same
page. Judith asks, "How do you get mouseovers to
work?"
If you need an introduction or some context, first learn more
about the document object model, the DOM.
DHTML API
the functions to set CSS Positioning properties across
browsers
CSS / JavaScript Code
Generator
Dynamically change CSS properties using cross browser
JavaScript to set CSS properties that works on Internet Explorer, Netscape
Communicator 4.x, and Mozilla-based browsers such as Netscape 6.
shrink html size
The PlugIn Site's HTML
Shrinker 2.0
colored scroll bars
Scrollbar
Color Properties
By default, a web browser's scroll bars are gray. Microsoft's
browser will display them in any color you want, if you tell it.
Here's an example
from a site that will let you download a free utility to do it quickly, Cool Web Scrollbars
v1.0.
Color Charts
Lynda
Weinman's browser-safe colors.
How
do the colors go together? Mix and match color swatches.
Webmonkey
has the browser-safe
colors arranged so that you can start to see the patterns.
You
should have a couple of good color pickers on your computer.
Start with FrontPage. Or try the basic Paint program that comes
with Windows at Start | Programs | Accessories. Paint should be at the bottom of
the list. After you open it, pull down the Colors menu and select Edit Colors
... and then Define Custom Colors. Click in the rainbow square to get close.
Then run the slider on the right to get it perfect. You can read the red, green,
and blue values in the bottom right corner.
Semantics - The Future
The
Semantic Web by Tim Berners-Lee, who wrote HTML and leads the W3C, the Web's
standards organization.
The
Semantic Web
by Tim Berners-Lee, James Hendler and Ora Lassila
Scientific American, May 2001
A new form of Web content that is meaningful to computers
will unleash a revolution of new possibilities.
Check out your web page while you make and edit it
Let's say you want to work with a web page you made or found on
the Web.
step 1: Save it onto your desktop by any file name, for
example, filename.htm.
If you did it successfully, you'll see on your desktop that the
file has the Microsoft or Netscape icon above the file name. Learn more about saving to the desktop.
step 2: Open either browser (regardless of the icon) and drag
this icon onto the browser's display area.
It should look exactly the same. Before, the Address (Microsoft)
or Location (Netscape) box read:
http://riccistreet.net/dwares/plaza/yourlastname/index.html
It should now begin either:
C:\WINDOWS\Desktop
or
file:\\\C:\WINDOWS\Desktop
and end
\desktop\filename.htm
step 3: Make changes to filename.htm in the text editor.
step 4: Save filename.htm, making sure you save it to the desktop so that it
replaces the previous one.
step 5: Select Refresh or Reload from the browser's toolbar. The changed page
should display.
Try it once to make sure you understand the sequence: edit,
save, refresh.
What is HTML?
