- ODEET
- Home Page
- Prospective Students
- Students
- Instructors
- Resources
- Academic resources
- Computer requirements
- Common software
- Facilities, equipment
- Technology resources
- Technology tips
- Quick Links
- Class Websites
- WebCT
- DE Course list
- AccessPlus
- ASW (email acct mngt)
- Outlook Web Access
- Webmail
- Solution Center
- Tech Tips
- Contact Us
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
HTML Basics (Not covered: frames, forms, imagemaps, java/javascripts, cgi scripts, plug-ins, multimedia)
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Method | Skill | Quality | Time | Examples |
|---|---|---|---|---|
| text editor | high | high | high | Simpletext, BBEdit, NotePad |
| word processor | low | low | low | Microsoft Word, Adobe FrameMaker |
| web page program | medium | medium | medium | Microsoft FrontPage, Dreamweaver |
About HTML Markup
Tags
General tag format:
<TAG>text to be modified</TAG>
-
letter case in tags is unimportant
-
rule-of-thumb: use capital case so tags stick out from the rest of the text - this makes editing easier!
-
there are a few tags that do not require an ending tag, but including one will not harm anything
-
HTML is dynamic - i.e. it is evolving and changing. There are new tags, and new arguments for tags, that did not exist a few years ago.
Rule 1: Update your browser to ensure that you are not missing out on features of the sites you are looking at.
Rule 2: Be aware that not all browsers (esp. older ones) will display your web site the way it looks on your computer.
More advanced tag option:
<TAG ARGUMENT1="qualifer"
ARGUMENT2="qualifer">text to be modified</TAG>
| Example Tags | Display |
|---|---|
| <B>this text is bold</B> | this text is bold |
| <FONT FACE="red">red text</FONT> | red text |
| <FONT FACE="red" FACE="Georgia">Arial text</FONT> | red Georgia text |
Types of tags:
-
define components of document
-
define layout of components
-
affect text appearance or organization
-
create hypertext links
-
include non-text element (image, sound, etc.)
-
include other programming element (interactive form, javascript routine, etc.)
Spacing:
Spacing (indentations, blank lines, and extra spaces) within the HTML document code has no affect whatsoever on the way that the document is displayed in a web browser! All formatting is done explicitly with tags. The only exception is when a block of text is defined as "preformatted" with the <PRE> </PRE> tags.
Ordering tags:
-
Can apply more than one tag to a given section of text.
-
Tags must be nested properly - the last tag applied must be the first tag turned off.
-
Incorrect: <B><I>this is wrong</B></I>
-
Correct: <B><I>this is right</I></B>
HTML Document Structure
An HTML document requires certain basic tags and is divided into a "head" and "body." The head contains information about the document, such as a title and keywords to facilitate searching. The body contains the content that is displayed in the main browser window.
Every HTML document should contain, as a minimum, the following tags in the order shown:
<HTML>
<HEAD>
<TITLE>My document</TITLE>
</HEAD>
<BODY>
This is the content displayed in the browser window.
</BODY>
</HTML>
Spacing in the HTML does not affect the final display, but helps during document editing. Consequently, the above code could also be written as follows:
<HTML><HEAD><TITLE>My document</TITLE></HEAD>
<BODY>This is
the content displayed
in the browser window.</BODY></HTML>
|
Both of the above files |
 |
Document Component
Tags
| HTML Tag | Action |
|---|---|
| <P> </P> <P ALIGN="right"> |
Start and end a paragraph. Will insert a blank line at the beginning of a new paragraph. By default, a paragraph is left justified (aligned) but you can change that to center or right. |
| <BR> | Line break. Stop current line and start on the next line. Does not insert a blank line. Use two to create a blank line, i.e. <BR> <BR>There is no end tag. |
| <BLOCKQUOTE> </BLOCKQUOTE> | Create a margin from the left and right edges of the browser window equal to 5% of the window width. Can be nested to create larger indents. |
| <H#> </H#> | Header. H1 is the largest sized header and H6 is the smallest. H3 normally uses the default text size for the document. Headers are often displayed in bold with a blank line before and after. |
| <CENTER> </CENTER> | Center all material between these tags. Can create a similar effect with <P ALIGN="center"> </P>. |
<HR>
<HR SIZE="#" WIDTH="#" noshade> |
Creates a line across the page. With no arguments, will create a thin gray beveled line that reaches across the entire window (width=100%). Can specify specific width in pixels (#) or as percentage (#%) of the window width. Can specify how tall (size) the line should be in pixels. Include "noshade" to get a solid black line. |
Text Appearance
Tags that affect text appearance are categorized as "relative" or "physical."
Physical tags indicate exactly how text should be displayed. Every browser interprets these tags the same way.
| Attribute | Tag | Displays as... |
|---|---|---|
| bold | <B>this is bold</B> | this is bold |
| italics | <I>this is italics</I> | this is italics |
| underline | <U>this is underlined</U> | this is underlined |
| teletype | <TT>old typewriter font</TT> | old typewriter font |
| superscript | raise it <SUP>up</SUP> | raise it up |
| subscript | lower it <SUB>down</SUB> | lower it down |
Relative tags indicate how the enclosed text should be altered in comparison to the standard, or default, text display. Browsers do not necessarily display relative tags in the same way. One browser may display text surrounded by the emphasis tag, <EM></EM>, as bold while another may display it as italics.
| Attribute | Tag | Typically displayed as ... |
|---|---|---|
| emphasize | <EM>emphasis</EM> | emphasis |
| emphasize | <STRONG>strong</STRONG> | strong |
| change text size | <BIG>big</BIG> | big |
| change text size | <SMALL>small</SMALL> | small |
Additional Text Tags:
<FONT SIZE="#" COLOR="#RRGGBB" FACE="Arial/Helvetica/etc."></FONT>
where:
- SIZE can be between 1 and 6, where 6 is the largest font size.
(Note - this is opposite the number-size convention used for headers!)
Default font size is "3." SIZE="4" is one font size larger than default.
Can also indicate size as + (larger) or - (smaller) than defaultm so SIZE=+1 is one font size greater than default, which happens to be the same as SIZE="4"
- COLOR can be defined as a 6 digit alphanumeric number corresponding
to the 216 "web true" colors common to Macintosh and
IBM/Windows computers.
Can also define color by one of the understood color names, e.g. COLOR="red".
Cardinal red is COLOR="#AB040B".
-
FACE is the font style that should be used instead of the default font face specified in the user's browser. In order to work, the user's computer must understand how to display the specified font, so only use common fonts andonly specify font face for a specific reason - such as to create a better distinction between section titles in the body of a document and the surrounding text. It is easier to read sans serif (non curly) fonts, such as Arial and Helvetic.
<PRE></PRE>
Preformatted. Everything between these tags is displayed exactly
as it is typed in the HTML code. Extra spaces are not be removed.
Line breaks are preserved.
The default font face for displaying
preformatted segments is set in the user's web browser and is
usually something rather unattractive, such as Courier, so that
these portions stick out from the rest of the document. Useful
for displaying computer code.
Special Tags and
Characters
Several characters are not properly interpreted and displayed by web browsers. To have such characters displayed, you need to include special code in your HTML document. As with all HTML, different browsers will be able to interpret different things. Some additional things to watch for (esp. in word processed files):
-
smart quotes - avoid them! You will need to replace them with straight quotes or special HTML characters.
-
long dashes - not recognized by web browsers. Replace with regular dash or special character.
-
less than and greater than signs, < > - browsers think these are parts of tags and get confused. Replace with special character.
| Tag or Character |
Displays as | Explanation |
|---|---|---|
| <!-- comment -- > | Inserts a comment in the HTML code that is not displayed by the web browser. Use to add documentation to a file such as author, last revision date, function of code segment. (Substitue your text where the "comment" is shown. Can be multiple lines of text. Will only see when looking at the code for the page.) | |
| | Creates one blank space | |
| < | < | Less than sign |
| > | > | Greater than sign |
| & | & | Ampersand |
| © | © | Copyright symbol |
| ® | ® | Registration mark |
| @ | @ | "at" sign |
| | | | | Vertical bar |
| \ | \ | Backslash |
| § | § | Section sign |
| ö | ö | create an o with an umlaut (substitute any letter for o) |
| ó | ó | create an o with an acute accent (substitute any letter for o) |
| ò | ò | create an o with a grave accent (substitute any letter for o) |
Lists
Lists are usually indented and may be displayed with a blank line before and after the list. To ensure leading and trailing spaces, include a <P> tag or <BR> <BR> tags before and after the list.
There are several types of lists: ordered, unordered, definition, and menu. All include list items, <LI>, though in the definition list, items are identified as terms, <DT>, or definitions, <DD>.
If the bullet type (i.e. shape) is not explicitly defined in ordered and unordered lists, the default type is used.
Lists can be nested. A different bullet type is generally displayed at each level. The bullet style used depends on the browser defaults or the type specified by the programmer.
With ordered lists, you can specify the starting point for the numbering of the list items. If not specified, the list will start at "1" or the equivalent.
| Ordered list | Displays as | TYPE Options |
| <OL TYPE="1" START="1"> | 1. apple | 1 - Arabic (default) |
| <LI>apple</LI> | 2. banana | a - Alphanumeric, lowercase |
| <LI>banana</LI> | 3. orange | A - Alphanumeric, uppercase |
| <LI>orange</LI> | i - Roman numeral, lowercase | |
| </OL> | I - Roman numeral, uppercase |
| Unordered list | Displays as | TYPE Options |
| <UL TYPE="disc"> |
|
disc (default) |
| <LI>apple</LI> |
|
square |
| <LI>banana</LI> |
|
circle |
| <LI>orange</LI> | ||
| </OL> |
Definition List:
<DL>
<DT>banana</DT>
<DD>a tropical yellow fruit</DD>
<DT>apple</DT>
<DD>one a day keeps the doctor away <BR><BR> </DD>
<DT>lemon</DT>
<DD>basis of lemonade</DD>
</DL>
Will produce the following. Note the spacing between lines -- it varies depending on whether <BR> tags were included after the definition term (must use two line breaks tags to create one blank line). Definitions are indented with respect to the terms.
- banana
- a tropical yellow fruit
- apple
- one a day keeps the doctor away
- lemon
- basis of lemonade
Links
General format of a link:
<A HREF="protocol://server:port/path/filename.html#anchor"> linked text</A>
where:
- protocol:
- This is the process by which information is transferred:
http, https, and ftp are standard processes.
- server:
- This is the web server's machine name or number (IP number)
- port:
- Generally the default port 8000 is used. The port number
only needs to be included in the address if a different port
number is used (i.e. when it is not 8000).
- path:
- This is a "road map" or directions to the location
of the file on the web server. It may include an account name,
followed by a series of directory and subdirectory names.
- filename:
- It is best practice to follow the standard DOS naming
convention (no spaces, no special characters, better to start
with letter than number, etc.). Letter case used to matter but rarely does these days.
HTML files can have many different extensions (suffixes) depending on the type of code they contain. The most common are: .htm, .html, and .php. You must specify the right extension or the file will not be found.
Other file types have other extensions. Images for the web are generally .gif or .jpg. Simple sound files can be of type .au or .wav. Acrobat "print document format," or .pdf, is a common file type for online distribution of files that are intended for good quality printing, and consistent screen layout.
If a filename is not specified (i.e. the path ends with a folder name, not a file name), the web browser will look for a file called index, default, or homepage in the specified directory and display that. If none of these are present, the entire contents of the folder may be listed for the viewer to select from. This is considered poor practice and a security risk.
- anchor:
- An anchor is a named location in a file that can be used
as a starting spot for displaying a page. They are often used to move directly to a section
title, images, or other prominent point within a document. If
no anchor point is specified, the linked file is displayed from
the beginning.
Only the developer of a web page can create anchors in it but once made, anyone can link to an existing anchor, and thus start viewing the page from a place other than its beginning.
Together, these components precisely define the location of information on the Internet that a web browser is to retrieve and display. Depending on where the information to be retrieved is stored in relation to the current position, some or most, of the components listed above can be assumed, and thus dropped out of link URL (i.e. address).
External Links
An external link is one that normally calls a file stored on a different web site than the file currently being viewed. An external link therefore contains all the URL elements shown in the general format, with the possible exceptions of a port number and anchor, as explained above. Sometimes you may wish to use an external URL (full path address) to define locations within the website you are working on.
Example 1 (external link):
<A HREF="http://www.iastate.edu">Iowa
State University Home Page</A>
This example is typical of a link to the main page of a prominent site. The home page for the site is, for all intensive purposes, the default starting point associated with the server. The 8000 port is used and thus need not be included in the URL. No path is required and the starting file has the appropriate default name for the type of server it resides upon. The file is opened at the beginning of the page so there is no need to specify an anchor.
Example 2 (external link):
<A HREF="http://www.hs.iastate.edu/odeet/resources/WebCT/homepage.php#instructors">More tips for instructors</A>
This link calls information from a web server location of "www.hs.iastate.edu". The page is 3 folders down from the root web folder: odeet, recourses, WebCT. The link opens the file "homepage.php" at the internal anchor location labeled "instructors."
Relative Links
Relative links are links to files that have a position that can be defined with respect to the location of the current file being examined. The use of relative links can greatly reduce the amount of code changes required if a website is moved to a new location since they are independent of the server name and port. They also speed up the navigation between pages.
Example of a relative link:
<A HREF="../graphics/usamap.gif">Display
USA map</A>
This link starts from the location of the current file, moves up one level closer to the root directory (shown by ../ ), looks for a directory called "graphics", retrieves an image from the graphics directory called "usamap.gif" and displays it.
Anchored Links
The anchor is defined within the HTML code as: <A NAME="section2"></A>. It is not necessary to have text between the start and end tags of the anchor name though in a case like this one, the section name may have been included, such as <A NAME="section2">This is section two</A>. The name of the anchor need not have any particular relation to the text enclosed in the anchor tags, in fact, the anchor name can be a number.
In order for anchored links to work, it is critical that the
anchor name appear exactly the same in the link as in
the anchor tag.
Example of an anchored relative link:
<A HREF="../lessons/class1.htm#section2">Display
section 2, lesson 1</A>
The browser is told to back up one directory (../), look for a folder called "lessons", retrieve a file called :class1.htm", and start displaying that file at the anchor inside it labeled "section2."
Mail Link
Example of a link that brings up an email window:
<A HREF="mailto:embleton@iastate.edu">Send
email to Karla Embleton</A>
This is a special type of link. Instead of defining a file on the Internet, it causes an email composition window to pop-up and specifies who should receive the email. To actually send email you must have filled in "identity" information in your own browser. Older browsers may not support this feature.
Images
An image can be used on the web in several ways: as a background, as an embedded picture on a page, as a banner, as a bullet, as a button that causes an action when a mouse is passed over it or clicks on it, or as a menu or "imagemap" that has several "hotspots" defined on it, each causing a different action when selected (clicked on) by the reader.
The main two image formats (file extensions) for web pages are gif and jpg. Rule-of-thumb: use jpg format for higher quality, more complicated images, such as digitized color photographs. Use gif format for all other images.
How an image is used affects how it is coded into the document. In the link section above, there was an example of a link that called an image. In this case, the image would be displayed in an otherwise blank window. The reader would click on the "back" button on the browser to get rid of the image and return to the page with the link on it.
More commonly, a web page developer will want to embed an image within an HTML page. The format of the tag used is:
where the URL components have the same definitions as in the general link format definition. The width and height arguments are optional and specify the image size - as it is to be displayed, not as it necessarily is - in pixels. Specifying the display dimensions can, in some cases, speed up the download process or at least give that impression to the reader. If the image is stored in the same web site as the page calling it, the relative link format can be used.
To specify that an image should be used as a background pattern for a web page, include an argument in the BODY tag as follows:
If the browser window is wider than the image, the image will be repeated beside itself until the window is filled left to right. If the browser window is longer than the image, the image will be repeated below itself until the background is complete. This process is called "tiling" and the image is "tiled."
Tables
TABLE Tag:
<TABLE BORDER="?" CELLPADDING="?" CELLSPACING="?" BGCOLOR="?" WIDTH="?">
where:
- border = number of pixels wide visible border should be. Default=0.
- cellpadding = number of pixels of buffer between cell contents and cell edge . Default=0.
- cellspacing = number of pixels of buffer between neighboring cells. Default=2.
- bgcolor = specify background color name or 6 digit red, green, blue code. Default=transparent.
- width = table width in pixels or as percent of available space (include % symbol). Default = minimum necessary to display the information.
TR Options:
<TR ALIGN="?" VALIGN="?" BGCOLOR="?">
where:
- TR options overrule TABLE options
- horizontal alignment = align cell contents to "left", "middle" or "right." Default="left".
- vertical alignment = align cell contents to "top", "center" or "bottom." Default="center".
- bgcolor = specify background color name or 6 digit red, green, blue code. Default=transparent.
TH Options:
<TH ALIGN="?" VALIGN="?" BGCOLOR="?" NOWRAP>
where:
- TH options overrule TR options
- NOWRAP forces cell contents to remain on a single line.
- horizontal alignment = align cell contents to "left", "middle" or "right". Default="middle".
- vertical alignment = align cell contents to "top", "center" or "bottom". Default="center".
- bgcolor = specify background color name or 6 digit red, green, blue code. Default=transparent.
TD Options:
<TD ALIGN="?" VALIGN="?" BGCOLOR="?" NOWRAP>
where:
- TD options overrule TR options
- NOWRAP forces cell contents to remain on a single line.
- horizontal alignment = align cell contents to "left", "middle" or "right". Default="left".
- vertical alignment = align cell contents to "top", "center" or "bottom". Default="center".
- bgcolor = specify background color name or 6 digit red, green, blue code. Default=transparent.
Special character:
- inserts a blank character. Necessary for empty cells with borders, otherwise border will not appear properly. Can be used anywhere a blank space is desired.
Note: Tables can be nested: a table can be placed inside a cell of an existing table.
Example 1: BASIC TABLE
This table:
| Row 1, Col.1 | Col. 2 | Col. 3 | Col. 4 |
|---|---|---|---|
| Row 2 | aaa | bbb | ccc |
| Row 3 | ddd | eee | fff |
Is produced by this code:
<TABLE BORDER="1" CELLPADDING="4" CELLSPACING="0" BGCOLOR="#FFFF66">
<TR><TH>Row 1, Col.1</TH><TH>Col. 2</TH><TH>Col. 3</TH><TH>Col. 4</TH></TR>
<TR><TD>Row 2</TD><TD>aaa</TD><TD>bbb</TD><TD>ccc</TD></TR>
<TR><TD>Row 3</TD><TD>ddd</TD><TD>eee</TD><TD>fff</TD></TR>
</TABLE>
where:
<TABLE> starts the table </TABLE> ends the table <TR> starts a row </TR> ends a row <TH> makes a column header </TH> ends a column header <TD> starts a column </TD> ends a column
By default:
- a column header, <TH>, is displayed in bold and centered
- a regular cell entry, <TD>, is left aligned and in plain text, and
- the contents of cells in a row will be aligned vertically to the middle of the row from top to bottom.
Example 2: ALIGNMENT EXAMPLE
This table:
| Column 1 | Column2 | |
|---|---|---|
|
Fruit |
apple | banana grapes |
|
Cars and Trucks |
Volvo Ford |
|
Is produced by this code:
<TABLE BORDER="5" CELLPADDING="4" CELLSPACING="0">
<TR>
<TD> </TD>
<TH>Column 1</TH>
<TH>Column2</TH>
</TR>
<TR ALIGN="CENTER" VALIGN="BOTTOM">
<TH ALIGN="RIGHT">Fruit</TH>
<TD>apple</TD>
<TD>banana<BR>grapes</TD>
</TR>
<TR ALIGN="CENTER" VALIGN="TOP">
<TH ALIGN="RIGHT">Cars and Trucks</TH>
<TD>Volvo<BR>Ford</TD>
<TD ALIGN="CENTER">Chevy</TD>
</TR>
</TABLE>
Example 3: COLUMN/ROW SPANNING
This table:
|
Fruit |
Column 1 | Column2 |
|---|---|---|
| apple | banana grapes |
|
|
Cars and Trucks |
Volvo, Ford, Chevy | |
Is produced by this code:
<TABLE WIDTH="400" BORDER="1" CELLPADDING="2" CELLSPACING="5">
<TR>
<TH ALIGN="RIGHT" VALIGN="BOTTOM" ROWSPAN=2>Fruit</TH>
<TH>Column 1</TH>
<TH>Column2</TH>
</TR>
<TR ALIGN="CENTER" VALIGN="BOTTOM">
<TD>apple</TD>
<TD>banana<BR>grapes</TD>
</TR>
<TR>
<TH ALIGN="RIGHT">Cars and Trucks</TH>
<TD COLSPAN=2 ALIGN="MIDDLE">Volvo, Ford, Chevy</TD>
</TR>
</TABLE>
Example 4: INCLUDING AN IMAGE
This table:
|
Address: Office Distance Education & Educational Technology 303 MacKay Hall Phone: (515) 294-9198 |
 |
Is produced by this code:
<TABLE BORDER="0" CELLSPACING="5" CELLPADDING="0">
<TR VALIGN=middle>
<TD nowrap><B><FONT COLOR="#AB040B" SIZE=+1> Address:</FONT></B><BR> <P><B>Office Distance Education<BR> & Educational Technology</B></p>
<P>303 MacKay Hall<<BR>
Iowa State University<BR>
Ames, IA 50011 <P>
Phone: (515) 294-9198</P></TD>
<TD><IMG src="mackay.jpg" width="264" height="198 hspace="10"></TD></TR>
</TABLE>
Notes:
- This table has no visible borders (BORDER="0"). This is a nice way to add some formatting to a web document.
- HSPACE was used in the image tag to create a horizontal buffer, i.e. blank space on the left and right sides of the image. There is also a VSPACE argument that can be used to create a vertical buffer around images.
- Can include all regular text formatting within a table cell, e.g., <B>, <BR>, <P> etc.
- Can include a link in a table cell.
- A table will not begin to display on a user's browser until ALL the information for the table is transferred so it is often better to use a series of small tables instead of one large table.
Online Resources
-
HTML Code Tutorial, http://www.htmlcodetutorial.com/
-
Bare Bones Guide to HTML, http://werbach.com/barebones/
-
Websafe color palette, http://www.lynda.com/resources/webpalette.aspx
-
HTML code checker (HTML Tidy), http://www.washington.edu/webinfo/tidy.cgi
Practice Exercises
|
|
Office of Distance Education & Educational Technology, 303 MacKay Hall, Ames, Iowa 50011-1120 |