HTML Notes for Course .com
This is how HTML Sites used to look!!


Chapter A - Chapter B - Chapter C - Chapter D - Chapter E - Chapter F - Chapter G  - Chapter H

Grading


Chapter A - 4 critical concepts
Use of Programs:
  • HTML Sites are composed in NOTEPAD, previewed in your BROWSER
  • The Notepad file must be saved with the extension .htm or .html
  • The Notepad File contains a HEAD and a BODY
  • The body contains TAGS which are Commands  placed in angle Brackets <>, and
    and CONTENT which is the text that will appear on the website.
               Example of a TAG: <H1>

Tags:

Most Tags require an opening and closing Tag

Example<H1>Welcome to Tech ED</H1>

Heading Tags

<H!> is the Largest, <H6> is the smallest!
 

HYPERLINK TAG

                                Opening - <A HREF=>
                    Closing - </A>

WRITTEN

                         <A HREF="File Name">CLICK HERE </A>

Assignment:

Create a simple file called construction.htm and get your page to link to it.

It must be in the SAME FOLDER as your Nomad project file

On the link make a "Click here to return to HOMEPAGE" link.

Make an external link to "tivertonschools.org"
        <A HREF="http://www.tivertonschools.org"> Click here to view "tivwchools"</A>
 

 
Chapter B - Formatting
 
NOTES:

IF YOUR LIST DOES NOT WORK
If you are not getting your list to work make sure you are using the Letter I and not the number 1.

LINKS:
The Links DO NOT WORK!!!!

If your want them to work...
    1. create a html file called "construction.html"
    2. Save it in your HTML Projects/Chapter B

LISTS
The common tag - <LI> -stands for list item
<UL> Unordered List
<OL> - Ordered List

FORMATTING
<B> - bold
<I> - Italic
<U> - Underline

<FONT FACE=""> Sets typeface
<FONT COLOR=""> Sets Color
<FONT SIZE=""> - Sets font sze

ATTRIBUTES: Appears after a TAG Extra setting available in most HTML Tags that allow you to add or change a tag's default settings
<P ALIGN="left">
<P ALIGN="right">
<P ALIGN="center">
<P ALIGN="justify">

 

Chapter C - IMAGES

IMORTANT - Read the first paragraph
                        Read minimizing download times

The pictures will not show on your project website unless you
     1. go to student downlads
     2. copy the images folder
     3. Paste it into the project folder

The Image map assignment on page C-11 will not have functioning links unless you:
     1. Go to student downloads
     2. copy the 3 link files (appalationtrail.htm, sequia.htm, and teton.htm)
     3. Paste them into the Unit C Projects file

IMAGE TAG - <IMG> Unpaired and requires no closing tag.

                                         SRC - Location of file   
                              Align - Alignment between left and right margain relative to text
                              Height - Image display height
                              Width - Image display width
                              Alt - Alternate text for graphic

Example:                <IMG SRC="Images/webdesigngraphic.jpg" ALIGN="left">
                        The Address Images/"filename" must be used if you create a Images folder

\
Linking with Graphics - Place the Image tag between the Hyperlink Open and Close Tags

                                <A HREF="thsindex.html.">
                          <IMG SRC="images/Click_here_to _enter_THS.jpg">
                          </A>
                                
Background Image  <BODY BACKGROUND="FILENAME">

 
Chapter D - Forms

FORMS

<FORM> </FORM>  - Creates a form name for reference
<INPUT> Specifies the type of form to be created

Example <INPUT TYPE="text" SIZE="40" Name="FirstForm">

<SELECT> </SELECT> - Pull Down Menu
<OPTION VALUE> - Pull down menu items

 
Chapter E - Tables and Cells

TAGS:
<TABLE></TABLE>    Define start and end of table contents
<TR></TR>   Mark content of each table row
<TH></TH>   marks content that follow as a table cell and applies to header format
<CAPTION></CAPTION> formats text to appear as a caption centered above the table.

ATTRIBUTES:
<TABLE>ALIGN - Sets horizontal position of table within browser window
<TR> amd<TD> ALIGN - Sets horizontal position of cell contents between left and right border
                           VALIGN - sets vertical position of cellcontents between top and bottom border

<TH>ALIGN -sets horizontal position of cell contents between left and right border
         VALIGN- sets vertical  position of cell contents between ltop and bottom border



 
Chapter F -  frames
TAGS
<FRAMESET> </FRAMESET> - mark frameset contents and describe their layout.

Attributes to <FRAMESET>
ROWS - defines the number and sizes of horizontal frames to create.
COLS - defines number and sizes
FRAMEBORDER - turns border between frames on or off; set to "0" or "no" to turn borders off.

<FRAME>specifies a frame's source file and name

Attributes for FRAME
SRC - defines location and file name for frame contents
NAME - defines frame name of reference by hyperlink

<NOFRAMES> - Format Alternative for incompatible browsers
<BASE> - allows you to specify the URL for and HTML Document.

Attribute for <BASE>:
     TARGET - Specifies the default Target Window or Frame every hyperlink in a document

Attributes for <FRAMESET> for Formatting frame Borders
    FRAMEBORDER - Determines whether or not border appears.  "0" or "no" = off,  "1" or "yes" = on.
    BORDER - Specifies space between frames in older browsers
    FRAMESPACING - Specifies space between frames in more recent browsers
    BORDERCOLOR - customises color of lines

Attributes for <FRAME>
    MARGINHEIHT - specifies space between frame contents and top and bottom borders
    MARGINWIDTH - specifies space between frame contents and let and right borders
    NORESIZE - prevents users from changing a frames dimention
    SCROLLING - controlls the appearence of the frames scrollbars.
         

Chapter G  - Design
*****DON'T SKIP PAGES ON DESIGN AND CROSS PLATFORM!!!

ALSO - The website shown in the picture on pageG-13, "WEBMONKEY" is the guide many use for generating code based sites.  Click here to check it out!

 
Chapter H - Scripting
Scripting produces a program that can be executed by a browser!
IT  gives you:
        immediate response,
        interactivity, and
        reduced server load.

COMMON EXAMPLE: Information form error messages

<SCRIPT> </SCRIPT> HTML codes used to insert script.

Want to hide your script? Some older (real older!!!!) Browsers do not support scripting so you should use the following "hide commands" so the script does not show up on the browser!
 
   Beginning        <!--
    End                 -->

Insert a Alert/Comment Box:

       ALERT("Your comment")

Script usually is inserted between the </TITLE> tag and the </HEAD> Tag

Object: An element in them browser window identified by Java script as a distinct unit; each object has a default name and discriptive features based o its location and function.

Properties: An objects properties such as size, location and type.

Methods: Actions that an object can carry out.