Creating HTML Textbook Code

Tutorial One: pages HTML 3-
  • Two-sided tag needs an open and closing tag <p> and </p>
  • One sided tags don’t need a closing tag <br />
Opening Tag
Closing Tag
Description
<p>
</p>
Paragraph tag
<br />


<!—comment à

Comment tag
<html>
</html>
Start and stop an html web page, anything between these two tags makes up the content of a web page document
<head>
</head>
Contains info about the document (title, search engine, etc.)
<body>
</body>
All that is displayed on the web page, after the head tags
<title>
</title>
Page title comes between the head tags
<h1>
<h6>
</h1>
</h6>
Largest heading size
Smallest heading size
<h1 style=”text-align: center”>
<h1 align=”center”>
</h1>
</h1>
To change heading alignment
<ol>
</ol>
Ordered list
<li>
</li>
List items that come between the ordered list tags to make each item
<ul>
</ul>
Unordered list and also use the <li> for each bulleted item
<ol>
<li>
<ul>
<li>
<li>
</ul>
<li>
<li>
<ul>
<li>
<li>
</ul>
</ol>

Nested lists
<ol style=”list-style-type: lower-alpha”>

Changing list styles:
Disc
Circle
Square
Decimal
Decimal-leading-zero
Lower-roman
Upper-roman
Lower-alpha
Upper-alpha
None
<ul style=”list-style-image: url(pic.jpg)”>
</ul>
Image for the bullet
<ul list-style-position: position

Position: inside (content flows around the bullet) or outside (this is the way I like my bullets to look – outside is default)
<ul list-style-type: xxx position


<ol start=”number”>

Starting a list with a different number
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
Term
Definiton
Term
definition
Definition list term followed by a definition description
<address>
</address>
Italicized text for contaction information
<blockquote>
</blockquote>
Indentifies a long quotation indented at the right and left
<abbr>
</abbr>
Abbreviation
<acronym>
</acronym>
Acronym
<b>
</b>
Bold
<big>
</big>
Big text
<cite>
</cite>
A citation
<code>
</code>
Program code text
<del>
</del>
Deleted text
<dfn>
</dfn>
A definition term
<em>
<i>

Italicized text
<ins>
</ins>
Inserted text
<kbd>
</kbd>
Keyboard-style text (fixed width)
<q>
</q>
Quoted text
<s>
</s>
Strikethrough text (deprecated)
<Samp>
</samp>
Sample computer code text (fixed width)
<small>
</small>
Small text
<strike>
</strike>
Strikethrough text
<strong>
</strong>
Strongly emphasized text
<sub>
</sub>
Subscripted text
<sup>
</sup>
Superscripted text
<tt>
</tt>
Teletype text (fixed width)
<u>
</u>
Underlined text
<var>
</var>
Italicized text
<img src=”file.jpg” alt=”text” />

Inserting an image
<hr />

Horizontal rule
<hr width: value; height: value; align: “align”; color: color; background-color: color />

Horizontal rule with control of how long, how much of page %, color and background color
<hr style=”color: red; background-color: red; height: 2; width: 100% />

Example of horizontal rule
<meta name=”author” content=”info about the page”>
</meta>
Meta tag in the header section of a page, the content area is where you can list keywords for a search engine
©
­
·
°

<
>
&
&#233

Special characters that don’t appear on your keyboard:
Copyright
Registered trademark
Middle dot (bullet)
Degree symbol
Nonbreaking space, used to insert blank spaces
Less than symbol
Greater than symbol
Ampersand
E with an accent above it




Tutorial Two: pages HTML 55-

Special characters:
· · (no brackets just typed after text you get a dot to appear after the words

Opening Tag
Closing Tag
Description
<h2 id=”classes”> Section title
</h2>
Anchor tags at the top lead to these Links within the page (the word in quotes must be unique to each link)
<a href=”#classes”> section title the user will click
</a>
The words at the top of the page have these codes in them to create the link to the section titles you did in the middle of the page. This is where you are connecting the boat to the anchor you dropped above
<a href=”#classes”><img src=”pic.jpg” />
</a>
Anchor links can lead to pictures lower on the page, graphs, headings, etc.


Another version of anchoring was covered in this section, but it is for older browsers so there is no need to take extensive notes
<a href=”page.htm”> page title

<a href=”page.html”> page title
</a>
Linking to a web page that you have made and is on your computer (internal links)
<a href=”file.html#classes”> words that are the link
</a>
Linking to a location within another document (like an anchor tag which ends up on another page) – make sure you put in the anchor like <h2 id=”classes”> (internal links)
<a href=”folder/folder/file.htm”>
</a>
Links to files in other folders: the first folder listed in the sequence has to be the top level folder (like your directory name) for this to work (internal link)
<a href=”http://www.google.com”> Title of web page
</a>
Links to pages made by someone else tha are already live and on the web (external links)
<a href=”ftpserver/path/filename.extension”> words that make the link
</a>
Link to an FTP server
<a href=”ftp://username:password@hostname/path/filename
</a>
Link to an FTP server that requires a password
<a href=”news/newsgroupaddress”>
</a>
Link to an usenet or newsgroups
<a href=”file:server/path/filename”>

<a href=”file://documents/chemistry/chem.htm”>
</a>
Linking to a local file
<a href=”mailto:name@emailaddress.com”>
</a>
Linking to an email
<ahref=”url” target=”window”>

ahref=”url” target=”blank”>

ahref=”url” target=”self”>
</a>
Open in a second window
Blank window or in the same window
<a href=”page.htm” title=”text”>
</a>
Pop up titles
<a href=”page.htm” accesskey=”i”>

C reate an accesskey to hit on your keyboard to make the link go without moving your mouse to click. To use an access key you have to hold the control key on a mac and the alt key in a windows to use them.


Semantic keys


Link elements

Tutorial Three: pages HTML 107-

Opening Tag
Closing Tag
Description
Color: color
Background-color: color

<body style=”color: rgb(153,102,103); background-color: white”>
</body>
Element tags inside other tags to determin color of foreground and background (in body tags, font tags, etc.)
Rgb color triplets
#redgreenblue (hexcolor codes)
<body bgcolor=”yellow” text=”#99CCFF”>
</body>
Body background color and text color together
<font color=”color”>
</font>
Font color
font-family: Arial, Helvetica, sans-serif

Element tag inside a <h1> or <p> or <font> etc. You can put in any names of fonts, or you can simply say sans-serif or serif, or monospace, or cursive, or fantasy (this lets each individual computer choose the font that fits into the overall categories even if they don’t have a specifically named font)
Font-size: 0.5 in
Font-size: 36pt
Font-size: 3pc
Font-size: 150% (of the body text)
Font-size: medium
Font-size: large
Font-size: xx-large (xx-small)

Font size: you can put in a font tag, paragraph tag, or body tag
Letter-spacing: value

(with the rest of the font elements) Spacing between letters in words
Word-spacing: value

(with the rest of the font elements) Spacing between words in a line of text
Line-height: value

(with the rest of the font elements) Spacing between lines of text
Text-indent: value
Text-indent: 5%
Text-indent: 5em

Indenting the first line of text in a paragraph or section
Text-indent: -5em

To make a hanging indent use a negative value
Font-style: type

Types:
Normal, italic, oblique
Font-weight: value

Weight numbers are between 100-900 (900 is extra bold, 700 is bold, 400 is unbolded text)
Text-decoration: type

Types: underline, overline, line-through, blink
Text-tranform: type

Types: capitalize (so each word is capitalized), uppercase (all letters are in caps), lowercase, or none
Font-variant: type

Types: small caps
Vertical-align: type

Text align vertically types:
Baseline
Bottom
Middle
Sub
Super
Text-bottom
Text-top
Top
Vertical-align: 50%
Vertical-align: -100%

Lement is ½ of aline surrounding the content
Drops the element an entire line below the baseline of the current line
Font: italic small-caps bold 16pt/24pt Arial, sans-serif

Font: font-style font-variant font-weight font-size/line-height font-family

All font elements together… font size is 16 and line space is 24


Span element must come between <p> and </p> and can change one word or a small group of words within a paragraph to make it stand out.
<img src=”logo.jpg” >
No closing tag
Inserting an image
<img src=”logo.jpg” style=”float: position” />

Float: position can be an element tag in images, tables, etc. Text wrapping and Aligning an image
Positions: default, left or right
Clear: position /

To clear the textwrapping if you want a bit of white space (element can be placed in other tags, not just images, br , hr, p, etc.)
<img align=”position” />

Positions:
Absbottom
Absmiddle
Baseline
Bottom
Left
Middle
Right
Texttop
top
< img src=”logo.jpg” margin-top: length; margin-right: length; margin-bottom: length; margin-left: length />

< img src=”logo.jpg” margin: top right bottom left />

<img src=”logo.jpg” margin: 5 5 5 5 />

Margin around images
<img src=”logo.jpg” stle=”float: right; margin: 0 0 50 15” />

Example
<img src=”logo.jpg” vspace=”length” hspace=”length” />

Margin around an inline image
<img src=”logo.jpg” style=”float: right; margin: 0 0 50 15” width=”210” height=”280” />

Controlling image size
<body background-image: url(logo.jpg)>

Image as a background for the web page body
<body style=”background-image: url(logo.jpg); background-repeat: type;” >

Image repeats in the background types:
Repeat, Repeat-x, repeat-y or no-repeat
< body style=”background-image: url(logo.jpg); background-repeat: type; background-position: horizontal vertical;”>

The horizontal and vertical can be 10% and 20% from top left and bottom (or you can use pixels)
<body background-image: url(logo.jpg) background-repeat: type background-position: horizontal vertical background-attachment: type>

Background is fixed and does not move when the user scrolls down the text
Types: scroll, fixed (creates the effect of a watermark behind things)
<body background: coor image repeat attachment position>

<body background: yellow url(logo.gif) no-repeat fixed center center>

Example
<map name=”map” id=”map”> hotspots
</map>
Image maps to make images hotspots (put this code below the image tag) “map” is where you simply name what you are working with – suggested that you name and id the same -- and something similar to the picture you are mapping
<img src=”logo.jpg” usemap=”#map”>

Add the usemap=”#map” tag to the image tag so the hotspot will work and use the same word for map as you did in the map tag (This is similar to the idea of anchor tagging. If they are not the same, then the links will not work together.)
<area shape=”shape” coords=”coords” href=”url” />

<area shape=”rect” coords=”350, 38, 582, 200” href=”water.htm”>

<area shape=”circle” coords=”255,133,74” (radius is the last number)

<area shape=”poly” coords=”all corners>

Set the hotspot area
Shapes: rect, circle, poly
<img src=”logo.jpg” usemap=”#map” style=”border-width=”0” />

image maps have a default border, if you want to remove it… add to the image tag


Tutorial Four: pages HTML 173-

Opening Tag
Closing Tag
Description
<pre>
</pre>
Preformatted text: anything you type between these tags will appear as is, so you can use a specific number of spacebars to make it space over and match the line above.
<table>
</table>
Opening table code
<tr>
</tr>
Table row (can be more than one in each table)
<td>
</td>
Table data cell (can be more than one in each row)
<th>
</th>
Table headings for the tops of columns
<thead>
</thead>
Table headings for groups of rows; lets you color code the heading row <th> codes between <thead> codes
<tfoot>
</tfoot>
Table footer
<tbody>
</tbody>
To put the actual table rows into (only when you use headers and footers)
<caption>
</caption>
Descriptive info about the taqbles’s contents: must appear after the opening <table> tag and it appears by default centered above the table
<caption align=”position”>content info
</caption>
Position is either “bottom” to be centered below the table; “top” for centered above the table; “left” to place the caption above the table and aligned with the left margin; “right” for above the table and aligned with right margin
<caption style=”font-weight: bold”>
</caption>
Bold the caption
<table summary=”description”>
</table>
For a description for people who are not using the internet visually or are visually impaired.
<table>
<caption> title of table or other info </caption>
<thead>
<tr>
<th> bolded title </th>
<th> a second bolded title </th>
</tr>
</thead>
<tbody>
<tr>
<td> first cell </td>
<td> second cell </td>
</tr>
<tr>
<td> another cell </td>
</tr>
</tbody>

Example
<table border-“1”>
</table>
Table border code is put as an element in the opening table code to control the entire table; the number is in pixels (one is very thin and the larger the number the wider the border)
<table border=”1” bordercolor=”hexnumber”>
</table>
Color is an element in the table code and controls entire table border
<table bordercolorlight=”hex” bordercolordark=”hex”>
</table>
To control a 3D border (not all browsers support, but most do)
<table frame=”type”>
</table>
Frame is an element in the table code an controls the entire table appearance and lets you change from a simple border to other: type=”above” make the cell frame on the top of the cell only; “below”, “box”, “hsides” on the top and bottom sides of the table (horizontal), “lhs” left hand side, “rhs” right hand side, “vsides” vertical sides only, “void” the cells have borders but not the outside of the table
<table rules=”type”
</table>
Rules are elements inside the table code To control only parts of the table:
“all” around cells
“cols” around columns
“groups” around row groups
“none” no rules
“rows” around rows
<table cellspacing=”value”>
</table>
Cell spacing by pixels (the space between the cells) the lower the number the smaller the amount of space, the larger the number the more space
<table cellpadding=”value”>
</table>
Cell padding (the space between the text and the border of the cell)
<table width=”value” height=”value”>

Setting table height and width (overall size with either pixel size or percentage) --- usually control the width with a percentage of the width of the page, and the height will auto adjust.
<td height=”value” width=”value”>
</td>
Sets the height and width of the cells (by pixel or percentage) --- usually you just control the width with a % and the height will auto adjust
<td nowrap=”nowrap”>
</td>
Preventing line wrap in a cell (like for a column title)
<td rowspan=”value” colspan=”value”>
</td>
Values are usually the number of columns
<td align=”position”
</td>
Align contents of a cell position can be “left” “right” “center” “justify” “char” (by position of the characters such as a decimal point, dollar sign, or percent symbol)
<td align=”position” valign=”position”>
</td>
Vertical alignment “top” “middle” “bottom” “baseline” (for
<table style “font-family: Arial, Helvetica, san-serif; font-size: 1em”>
</table>
For fonts in the table
<table style=”background-color: hexnumber”>
<tr style=”background-color: colorname”>
<td style=”background-color: lightblue”>
</table>

</tr>

</td>
Element tag for Background color for tables, cells, or rows
<table background=”pic.jpg”>
<tr background=”pic.jpg”>
<td background=”pic.jpg”>
</table>
</tr>
</td>
Element tag for Background images for tables, cells or rows
<table float: position>
</table>
Align a table on a web page (with a margin, or by centering) position = right, left or center
<table float: position; margin: 5 0 5 5”>
</table>
Align a table on a web page with margins set on the top, sides and bottom
<colgroup span=”3” />
<colgroup span=”2” />

<colgroup span=”4” style=”background-color: white” />
<colgroup span=”2” style=”background-color: yellow” />

<colgroup span=”3” style=”background-color: white” />
<col style=”color: black” />
<col style=”color: red” />
<col style=”coor: blue” />

<colgroup span=”5” style=”background-color: white” />
<col style=”color: black” span=”2” />
<col style=”color: red” />
<col style=”coor: blue” span=”2” />
</colgroup>

</colgroup>

</colgroup>

</colgroup>
Column groups: placed after the caption tag (if you had 5 columns and 3 were in one group, and 2 in another,

These are three different options to do this


Nested tables: make two separate tables, view them in a web browser to make sure that they appear correctly by themselves. Then the entire table (from opening table tag to closing table tag) that you want to appear inside of a cell can be copy and pasted between two <td> tags
Tutorial Five: pages HTML 243-
Taylor: pages 243-248
||



Opening Tag
Closing Tag
Desc
frame:

a section of the browser window capable of displaying the contents of an entire web page




Jay: pages 248-254
||
Opening Tag
Closing Tag
Desc
<frameset rows="row1, row2, row3,...">frames
</frameset>
To create frames laid out in rows
<frameset cols="column1, column2, column3,...">frames
</frameset>
To create frames laid out in columns


row value must define height and column value must define width
can use px % or * (denotes the rest of the page)
-must hae at least 2 columns or rows
Dustin
<frame src="url" />

To create a frames element




Diven: pages 255-258
|Formatting a Frame|
Opening Tag (all placed in a frame src tag) dustin
Closing Tag
Desc
scrolling="type"

It is either a yes or no as the type, it controls whether a frame contains a scroll bar or not
marginwidth="value" marginheight="value"

To control the amount of space between the frame source and the frame boundary
noresize="noresize"

Keeps users from resizing frames

Blair: pages 259-267 (top half)
||
Opening Tag
Closing Tag
Desc
<frame src="url" name="name" />

Used to assign a name to a frame, add the name attribute to the frame tag.
target="name"

Used to point the link to a specific frame.
Reserved target names

Special names that can be used in place of a frame name as targets.
_blank

Loads the target document into a new browser window.
_self

Loads the target document into the frame containing the link.
_parent

Loads the target document into the parent of the frame containing the link.
_top

Loads the document into the full display area, replacing the current frame layout.

Travis: pages 267 (bottom half)-274
Opening Tag
Closing Tag
Desc
<noframes>
</noframes>
creates content for "fame blind' browsers
after no frame put body tags and content between
bordercolor="color"

sets the color of a frames border
frameborder='value"

0=no border 1=border (put in each frame- Dustin)
border="value

just like frameborder but placed in the frameset
<iframe>
</iframe>
a floating frame displayed as a separate box or window within a webpage
Dustin and Dayna: double check everyone and tweak notes (someone else will have to do this next chapter)

Tutorial Six: pages HTML 291-


Dayna page 291-294
Opening Tag
Closing Tag
Desc
Control Elements:
Input boxes
Selection lists
Option Buttons
Check boxes
Group boxes
Text areas
form buttons

Field
Field value (or value)

Server-based programs
have made man things
possible including:

Languages:

(These are the different parts of the form.)
For text and numerical entries
For long lists of options, usually appearing in a drop-down list box
also called radio buttons for selecting a single option from a predefined list
For specifying an item as either present or absent
For organizing form elements
For extended entries that can include several lines of text
That users can click to start processing the form

Each control element in which the user can enter information.
Information entered into the field.

- online databases containing customer information.
- online catalogues for ordering and purchasing merchandise
- dynamic Web sites with content that is constantly modified and updated.
- message boards for hosting online discussion forms.
The most common is Common Gateway Interface (CGI) scripts. (Written in a language called perl.)
Other popular languages widely used today:
AppleScript
ASP
ColdFusion
C/C++
PHP
TCL
the UNIX shell
Visual Basic
Dustin page294-296
||
Opening Tag
Closing Tag
Desc
<form attributes//>
</form>
attributes will control how the form is processed
-important that you put in a form name (name="value") and form id (id="value") into each from to avoid confusion from the server especially if there is more than one form on a page.
Jay page 296-303
||
Opening Tag
Closing Tag
Desc
type="button"

Display a button that can be clicked to perform an action from a script
type="checkbox"

Display a check box
type="file"

Display a browse button to locate and select a file
type="hidden"

Create a hidden field, not viewable on the form
type="image"

Display an inline image that can be clicked to perform an action from a script
type="password"

Display an input box that hides text entered by the user
type="radio"

Display an option button
type="reset"

Display a button that resets the form when clicked
type="submit"

Display a button that submits the form when clicked
type="text"

Display an input box that displays text entered by the user
<input name="name" id="id" value="value" size="value" maxlength="value" />

To create an input box
Dustin page 303-305
||
Opening Tag
Closing Tag
Desc
<input type="password" />

hides the content of an input field making text appear as bullets or asterisks
-not to be confused with having a secure connection
<label for="id">lable text
</label>
lets you link a label with an associated text element
-make sure to put the same text as you did for "id'
-allows for speed when filling out a form by allowing user to click on the name of the field and having the field selected
Blair page 305-312
||
Opening Tag
Closing Tag
Desc
Selection List

List box form which a user selects a particular value or set of values.
<select name="name" id="id">
<option>item1</option>
<option>item2</option>
</select>

General syntax for the select and option elements.
name and id = identify the selection field
option = represents an individual item in the selection list
<select size="value">
</select>

General syntax for changing the number of options displayed by modifying size.
value = number of items that the selection list displays in the form
<select multiple="multiple">
</select>

Enables multiple selections from a list
Noncontiguous Selections

Press and hold the Ctrl key while you make your selections
Contiguous Selection

Select first item... Press and hold Shift key.. Select last item in range
<option value="value">item</option>

General syntax for specifying the value that is sent to the server with the value attribute.
<option selected="selected">item</option> OR
<option selected>item</option>

Used to specify which value is highlighted.
Option Groups

Organizes selection lists into distinct groups.
<select attributes>
<optgroup label="label1">
<option>itema1</option>
<option>itema2</option>
</optgroup>
<optgroup label="label2">
<option>itemb1</option>
<option>itemb2</option>
</optgroup>
</select>

General syntax for creating an option group.
label1 & label2 = labels for the different group options
Diven page 313-315
||
Opening Tag
Closing Tag
Desc
<input type="radio" name="name" id="id" value="value" />

name=field containing the option button
id=specific option value
value=specific value sent to the server when option button is selected
<input type="radio" checked="checked" />

particular option button the default option
Taylor page 315-320
||
Opening Tag
Closing Tag
Desc
<fieldset>
</fieldset>
A way to organize option buttons
<legend>
</legend>
for your (click one)
Diven page 320-323
||
Opening Tag
Closing Tag
Desc
<textarea name="name" id="id" rows="value" cols="value"> default text
</textarea>
default text is the text that is displayed in the text area and the rows
and cols attributes specify the number of liness in the text area and
the number of characters in each line, respectively
<textarea wrap="type">...
</textarea>
type="off" to turn off text wrapping
"soft" to wrap the text without sending the text wrap info
"hard" to wrap the text and send the text wrap to the server
Travis: page 323-331
||

Opening Tag
Closing Tag
Desc












Dayna page 332-333
||

Opening Tag
Closing Tag
Desc
<input name="fname" tabindex="1" />
<input name="fname" tabindex="2" />

<input name="lname" accesskey="l" />

This allows the cursor to tab from one field to another in the order you want.
It goes from the lowest number to the highest.
Fields with zero or negative tab indexes are omitted from the tab order entirely.
This makes it jump to that control element within the form.
(Must make sure that you must use letters that are not reserved by your browser.)
Alt + letter for Windows
Command + letter for Macintosh


You can underline the character corresponding to the access key to make it known.



Summary of Tips for Creating Effective Forms

- Label all control elements clearly and concisely
- Use horizontal lines, tables, and line breaks to separate topical groups from one another.
- Use field sets to organize common groups of fields, especially option buttons.
- Specify the tab order to ensure that users will move correctly from one field to another.
- Use option buttons, check boxes, and selection lists whenever possible to limit a user's choice of entries, thus reduces the chance of an erroneous data value. Use input boxes only when the field has no predefined list of values.
- Use selection lists for items with several possible options. use option buttons for items with few options. Use a check box for each item with only two possible values.
- Let users know the correct form for input box text by inserting default text in the appropriate format (for example, insert the text string, "mm/dd/yyyy" in a Date input box to indicate the format for inserting date values.)
- Use password fields for sensitive or confidential information (such as passwords).
- Because form elements differ between browsers, view your form on different browsers and different browser versions to ensure that the form displays correctly in all situations.
-