Beginning HTML

Presented October 14, 2000
Revised to HTML format for posting

Minimum HTML needed to display page:

<html> (recommended insert <head> and </head> before the body tags)
<body>
</body>
</html>

See an example of basic web page with one image and one email and one webpage link. Tutorial for uploading to HALNet using Internet Explorer 5+.

Common HTML

Unless otherwise specified all tags must have a corresponding closing tag with an </tag>. If tags are nested then they must be opened and closed in sequence example <p><b>This is a <i>test</i>! </b></p>.

<a> Anchor

Commonly used attributes:

For links HREF with

URL < a href="http://wiserways.com/resources"> Web Tech Resources </ a>
MAILTO < a href=" mailto:cdwise@wiserways.com "> Cheryl D. Wise </ a>
FTP < a href="ftp://wiserways.com/FTP/StockBubble.zip"> Stock Bubble File (zip)
NEWS < a href="news:lockergnome.com"> Lockergnome Newslist

For bookmarks NAME <a name="#top> Top of Page </a>

<applet> (depreciated in the current standard replaced with <object> but not all browsers support the <object> tag most notably Netscape doesn't)

Required attributes

HEIGHT=
WIDTH=

Example using a java applet:
< applet code="gifcraps.class" align="baseline" width="400" height="280">
< param name="r-value" value="150">
< param name="g-ralue" values="150">
< param name="b-ralue" values="255">
< param name="pausetime" values="25">
</ applet>
Recommended:

ALT="description of the object or applet"

<body> Without which you have no content. Common attributes:

Any of the font tags
BGCOLOR= "FFFFFF" will give you a white background
BACKGROUND="url of picture"
Example: <body background="forest.jpg" bgcolor="008088"> would give you a tiled background of the forest.jpg picture and if the picture didn't load for whatever reason the background color would be a medium green.

<br> line break - does not use a closing tag
<center> will center the item or text between the tags
<div> divide one style or section from another created for use with style sheets
<form> necessary to define the area is to be processed as a form which will be discussed separately at another meeting

<font> (depreciated tag should now be addressed in CSS or inline styles see style & span tags)

Commonly used attributes:

COLOR= in hex code" color=#FFFFFF" or color name color="black"
FACE= (font name) face="times new roman"
SIZE= in pixels or can also be relative to <base> size="12pt"
example: < font face="ariel" color="red" font-size="12pt">Gives you Ariel 12 point type.

Can also be used individually such as <font color="teal"> without changing the other font attributes

<frames>,<frameset><noframes> for creating framed sites and will be discussed separately
<head> Where you put information for the browser and search engines need that will not be visible to the user when the page is rendered.
<Hx> Heading tags: H1, H2, H3, H4, H5, H6 current standards require these to be defined via CSS or alternatively inline style sheets. Common attributes:

Any of the font tags
ALIGN= (left, center, right)
Example:
- Heading 1
- Heading 2
- Heading 3
- Heading 4
- Heading 5
- Heading 6

<hr> Horizontal rule creates a line the width of the browser can use the attributes HEIGHT and COLOR with it

Example: < hr color="blue" height="10px"> would give you a blue line 20 pixels high

<iframe> will display a page inside a page but is browser specific it only works with later versions of IE and with WebTV
<img> for displaying images it requires the scr attribute,

example < img scr="img/halpclogo.gif" alt="WiserWays logo" width="214px" height="125px">

Lists (see Intermediate HTML, Lists):

<ol> ordered list
<ul> unordered list
<li> list item

<link> usually used with external style sheets in meta tags

example <link rel= style='font-size:11.0pt; color:black'>

<meta> provides information to the browser and search engines and is always in the <head> section will be discussed separately.
<p> paragraph may use all font attributes
<pre> preformatted , you cannot use img, object, or text sizing attributes
<script>,<noscript> dealing with scripts and will be discussed separately in another meeting
<span> used to inline change the style of the characters enclosed in it

example:
< p> This is a paragraph and < span style="color: blue"> this area will be treated differently</ span> from the rest of the paragraph.</ p>

<style>

used inline to add style information to an individual element

example: < h3 style="color: red">
This heading will be red
or to embed style information in the head of a document to apply to all instances of the defined tag
example:
< style type="text/css">

</ style>
Would display <h3> heading as above and type as it is displayed on this page.

<table> defines a table and will be discussed along with other tags required or recommended to use in creating table separately.
<title> The name of the web page which will display in the browser's title bar when the page is opened. It will also be the default name is someone bookmarks the site.

Specialized Character Codes:

Specialized character codes, since you use <. >, &, " in your HTML tags you need a way to indicate when they should be displayed. To do so you must insert the following codes in your HTML: style='font-size:11.0pt; font-family:"Arial Unicode MS"'>

< = <
> = >
& = &
" = "

Style characteristics:

<b> bold, alternative <strong>
<big> makes the type one size larger than the type preceding it
<blockquote>

Causes text area to be indented on each side from the margins.
<i> italic, alternative is <em>
<tt> typewriter or fixed width type
<cite> for citing books, movies, etc.
<small> makes type one size smaller than the type preceding it
<u> underlines the text
Less commonly used:

<code> for presenting computer code appears as a fixed width font
<dfn> used for a word being defined, usually appears in italics
<kbd> for user keyboard entry, usually appears as a bold fixed width font
<s> or <strike> formats the enclosded script with a ~~strike-through~~
<sub> formats the enclosed script as _{_subscript}
<sup> formats the enclosed script as ^superscript
<var> used to represent something the user must replace, usually appears in italics

HAL-PC Web Technolgies SIG

Beginning or Common HTML

Presentations

Accessibility

CSS

Forms

HTML/XHTML

MISC

RSS

RSS Examples

Program Reviews

Member of

Minimum HTML needed to display page:

Common HTML

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This heading will be red

Specialized Character Codes:

Style characteristics:

Meta