|
1
Getting ready to do HTML coding
|
|
1
|
What
is HTML?
|
HTML is Hypertext Markup Language, a
coding convention for telling Web browsers how to present the text and
graphics on Web pages. The coding consists of pairs of tags, one tag to
mark the beginning and one tag to mark the end of a segment of text or
graphics. For example, the bold formatting of this is bold is coded
as:
<b>this is
bold</b>
The text and tags on a
Web page are visible when one views the HTML source code of the page.
|
|
2
|
Why
use HTML pages on Web sites?
|
Compared
to other file formats, HTML pages:
- Are smaller, which means
that browsers display them faster
- Do not require other programs
to be launched for viewing, which increases display speed
- Permit reuse and
repurposing more readily because the text is accessible to viewers
- Present the fewest
obstacles to viewing and printing Web pages
|
|
3
|
What
programs will let me edit HTML tags?
|
HTML source code can be
edited with any editor, e.g., Word, but the more Web pages one creates, the
more useful an HTML editor becomes. Word creates an HTML page with the
"Save as Web page" and Save as Web page, filtered" commands.
HTML editors: Microsoft FrontPage is available from IS&T UCCS, but its server extensions
are not permitted on GSU machines. Macromedia Dreamweaver is available from USG MSD for a license fee. Dreamweaver
comes with site management functions, e.g., FTP capability to move files
to/from the Web site. With its server extensions disabled, FrontPage does
not have FTP capability, which means FrontPage users also need an FTP
program such as WS_FTP
or RapidFiler. Dreamweaver and FrontPage are available from the GSU
Bookstore at educational rates.
|
|
2
Editing HTML tags: Links
|
|
1
|
How do
I create and edit links?
|
In an HTML editor: Highlight the text to be the
hot spot (what the viewer clicks) for the link, open the link dialog box,
e.g., with [Ctrl]l, and complete or edit the link.
In Word: Highlight the text to be the
hot spot for the link, select (from the Word menu bar) Insert|Hyperlink,
and indicate (by clicking or typing) the file being linked to. To see what
the HTML tags for the link look like:
- Save the page as a Web
page, which generates an *.html file
- Select View|HTML source
- Search ([Ctrl]f) for the
characters in the hot spot
About the link: For example, a link to how to put stuff on
the Web is coded as:
<a
href="stuffonweb-howto.htm">how to put stuff on the
Web</a>
The link has, in order:
- The characters <a
href=" in front of the link itself
- The characters ">
just after the link
- The text in the hot spot: how
to put stuff on the Web
- The characters </a>,
which close the link
In the HTML coding
scheme, "<...>" denotes an HTML tag sequence, "a"
is short for anchor, "href" is short for Hypertext REFerence,
"<" opens a tagged element, and "</...>"
closes a tagged element. The possible forms for links, where URL (Uniform
Resource Locator) is the Web address, are:
- Hyperlink: <a
href="URL">text of hot spot</a>
- Hyperlink for interior page
location: <a href="URL#anchoronpage">text of hot
spot</a>
- Hyperlink for moving within
a page: <a href="#anchoronpage">text of hot spot</a>
- Tag for marking a page
location: <a name ="anchoronpage"></a>
- Mailto link: <a
href="mailto:emailaddress">name of recipient</a>
If the link refers to
your hard disk and you want it to be a Web location, edit the link to make
it point to the right place. This is one of the ways that Word is
ill-behaved as an HTML editor--it assumes the default location for a file
is the local hard disk, not a Web site.
Word also insists on
including Microsoft-specific coding in the HTML source, some of which can
be eliminated by saving the file with "Save as Web page,
filtered." To compare pristine HTML with
Microsoft-"enhanced" HTML, view the HTML source for this page and
the HTML source for this page saved in Word side by side.
|
|
2
|
How
do I choose between absolute and relative links?
|
An absolute
link bears the complete Web address, e.g., for this page, the absolute link
is http://www.gsu.edu/~wwwltc/howto/html-howto.htm.
A relative link, from a page in the same folder, is just html-howto.htm.
Browsers interpret relative links to mean that the address is relative to
the location of the calling page. Because relative links minimize browser
overhead, using them speeds up page loading.
|
|
3
|
How do
I minimize editing mistakes in links?
|
To
minimize editing mistakes in links, load the target page in a browser, copy
([Ctrl]c) the address of the page, and paste ([Ctrl]v) it into the link
field. If a link should be to a location on the page other than the
beginning of the page, add the appropriate anchor locationt. If a relative
link is needed, delete the portion of the link that makes it an absolute
link.
|
|
3
Mastering formatting nuances
|
|
1
|
Why
do I need to use tables?
|
Table formatting
is the usual way of arranging multi-column material. Tables are required
because browsers treat sequences of spaces and tabs as a single space,
which destroys the space between spaced/tabbed columns. For example, this
text is formatted in a table. Formatted with spaces and tabs, the Word document
looks fine, but its HTML
rendition does not.
|
|
2
|
What
might prompt me to replace Word as my HTML editor?
|
Impatience with Word as
an HTML editor seems to ensue with one or more of the following
circumstances:
- Compared to others' Web
pages, your pages seem to take forever to load
- Your pages have so many
HTML-related codes that you have trouble finding the HTML tags you
want to change and when you find them you can't figure out how to
change them to your satisfaction.
- You can't make your pages
behave like you want them to because of the complexity of the
automatically-generated codes.
|
|
4 Developing more savvy for living on
the Web
|
|
1
|
Where
can I find the other HTML tags and what they do?
|
Here are pages showing
HTML tags and their definitions: www.webmonkey.com, CNET.com. For gentle introductions to HTML
aspects, examine these page sets: www.webmonkey.com, CNET.com. For e-learning about using an
HTML editor, check out GSU's eTraining courses (search the catalog for
"html" or the name of an HTML editor).
|
|
2
|
I
don't intend to become a webmonkey, but where could I find out about good
Web design painlessly?
|
To absorb good page
design painlessly, inspect pages at Web sites that seem invitingly usable,
e.g., Sun
Microsystems, Amazon, and Wall
Street Journal. Then, view the source code (in the browser or
downloaded into your editor) to see how the effects were achieved.
Appropriate the salient aspects of the designs for your pages.
For page design
principles, consult Jakob Nielsen's site useit.com or his book Designing
Web Usability: The Practice of Simplicity.
|