text

text

text

text

and a

tags instead of
tags.



To separate single list items use
• and
tags.



There are special settings that you can use to customize the lists on your page.

BULLETED LISTS
• text
• text
• text


Makes a bulleted list using the default bullet type: • text • text • Text




Starts a bulleted list using discs as bullets: • This is one line • This is another line • And this is the final line




Starts a bulleted list using circles as bullets: o This is one line o This is another line o And this is the final line




Starts a bulleted list using squares as bullets:  This is one line  This is another line  And this is the final line

NUMBERED LISTS
1. text
2. text
3. text


Makes a numbered list using the default number type: 1.text 2.text 3.Text




Starts a numbered list, first # being 5. 5.This is one line 6.This is another line 7.And this is the final line




Starts a numbered list, using capital letters. A.This is one line B.This is another line C.And this is the final line




Starts a numbered list, using small letters. a.This is one line b.This is another line c.And this is the final line

NUMBERED LISTS


Starts a numbered list, using capital roman numbers. I.This is one line II.This is another line III.And this is the final line




Starts a numbered list, using small roman numbers. i.This is one line ii.This is another line iii.And this is the final line




Starts a numbered list, using normal numbers. 1.This is one line 2.This is another line 3.And this is the final line




An example of how type and start can be combined. VII.This is one line VIII.This is another line IX.And this is the final line

BASIC TABLES



Tables are defined with the tag. To insert a table on your page you simply add these tags where you want the table to occur: The above table would be of no use since it has no rows and no columns.



ROWS:

 

 





To add rows to your table use the and tags. Example: It doesn't make sense to write the above lines in itself, cause you can't write content outside of table cells. If you do write things outside of cells it will appear right above the table.

BASIC TABLES 

COLUMNS:  You can divide rows into columns with and tags: 

Example:

This is row one, left side.	This is row one, right side.
This is row two, left side.	This is row two, right side.

This is row one, left side.

This is row one, right side.

This is row two, left side.

This is row two, right side.

TABLE TAGS Property

Description

align= left center right

left align table center table right align table

background=filename

image inserted behind the table

bgcolor=#rrggbb

background color

border=n

border thickness

bordercolor=#rrggbb

border color

bordercolordark=#rrggbb

border shadow

cellpadding=n

distance between cell and content

cellspacing=n

space between cells

nowrap

protects agains linebreaks, even though the content might be wider than the browser window.

TABLE TAGS Property

Description

frame= void, above, below, lhs, rhs, hsides, vsides, box

removes all outer borders shows border on top of table shows border on bottom of table shows border on left side of table shows border on right side of table shows border on both horizontal sides shows border on both vertical sides shows border on all sides of table

valign= top bottom

aligns content to top of cells aligns content to bottom of cells

width= n,n n,n%

minimum width of table in pixels minimum width in percentage of window size

GIF & JPG 

Computers store images in several different ways.



Some storage methods focus on compressing the size of the image as much as possible.



A major problem with using images on websites is that images take much longer to load than text.



To reduce download times as much as possible two of the best image compressing formats used on the web are:

GIF

JPG

256 colors

Unlimited colors

Can handle transparent areas

Can't handle transparent areas

This format is not good at compressing photographs

Excellent for compressing photographs and complex images

In general, it is excellent for banners, buttons and clipart

In general, it is not good for banners, buttons and clipart.

GIF & JPG 

This means that: 

Banners, buttons, dividers, clipart and other simple images usually work best as GIF's.



Photographs and other complex images usually work best as JPG's

INSERTING IMAGE 

The tag used to insert an image is called img.



Below you see an image called "rainbow.gif".



Here is the HTML code used to insert the image on this webpage:



If the image is stored in the same folder as the HTML page, you can leave out the domain reference (http://www.echoecho.com/) and simply insert the image with this code:

INSERTING IMAGE 

You can change the size of an image using the width and height attributes



You can add a border to the image using the border setting shown in the example below:

INSERTING IMAGE 

You can easily add space over and under your images



You can also use

Alignment - Image

FORMS





A form is simply an area that can contain form fields

Form fields are objects that allow the visitor to enter information - for example text boxes, drop-down menus or radio buttons

A typical form example would be a search engine



This is what happens when the form is submitted:    

The search words are sent to a program on the server. The program will search a database for matches. The program creates a webpage with the results. The results webpage is sent back to the visitor.

A typical form example would be a Login page



This is what happens when the form is submitted:    

The ID and password are sent to a program on the server. The program will search a database for valid entries. If the entry is valid the visitor is sent to the protected page. If the entry is invalid the visitor is sent to a "failure" page

CGI SCRIPTS 

When your form is submitted you need a program that can receive the information and do something with it.



Such programs are sometimes referred to as: CGI programs.



CGI stands for Common Gateway Interface, which is computer latin for a program that translates information.



This translation is necessary because the server might be a UNIX machine while the visitor might be sending information from a Windows platform.



Windows and UNIX handle information differently - so if there were no CGI, then UNIX machines could only communicate with other UNIX machines etc. and that is pretty far from the basic idea of the world wide web.



Now, you might be thinking "Well, I can't run programs on my server so this is nothing for me".



Fortunately you're most likely wrong.



There are dozens of free services on the web that will offer you free CGI for almost any purpose you might have.

THE FORM TAG  



When a form is submitted, all fields on the form are being sent. The
tag tells the browser where the form starts and ends. You can add all kinds of HTML tags between the and
tags. Look at this example:




Note: Unlike a table, forms are not visible on the page.



The form in our example is useless for two obvious reasons: 



First it contains no form fields. It is simply comparable to a blank sheet of paper. Second, it does not contain a recipient for the form once it is submitted.



To let the browser know where to send the content we add these properties to the
tag:  

action=address method=post or method=get



The address is the url of the cgi script the content should be sent to. The post and get methods are simply two different methods for submitting data to the script.



If you are using a pre-programmed script (which we assume here) it is not important to understand the difference between get and post.



In the description of the script you are using it will be made clear whether the scripts should be addressed using one method or the other.

Example 

Below is an example of a typical form tag, with both action and method specified.




All we need now, is to allow the visitor to enter some information

FORM FIELDS 

These fields can be added to your forms:          

Text field Password field Hidden field Text area Check box Radio button Drop-down menu Submit button Reset button Image button

TEXT FIELD 

Text fields are one line areas that allow the user to input text. If you want several lines you should use a text area instead.



HTML

EXPLANATION

text size= maxlength= name= value= align= tabindex=

One line text field Characters shown. Max characters allowed. Name of the field. Initial value in the field. Alignment of the field. Tab order of the field.

EXAMPLE



















Now we are inside the area - which is nice.

FORM - CHECK BOX 



Check boxes are used when you want to let the visitor select one or more options from a set of alternatives. If only one option is to be selected at a time you should use radio buttons instead. HTML

EXPLANATION

checkbox name= value= align= tabindex= checked

Choose one or more options Name of the field. Value that is submitted if checked. Alignment of the field. Tab order of the field. Default check this field.

EXAMPLE

Milk
Butter
Cheese


FORM - RADIO BUTTON HTML

EXPLANATION

radio name= value= align= tabindex= checked

Choose one - and only one - option Name of the group. Value that is submitted if checked. Alignment of the field. Tab order of the field. Default check this field.

EXAMPLE

FORM - DROP DOWN MENU HTML

EXPLANATION

select name= size= multiple=

Drop-down menu Name of the field. Visible items in list. Allows multiple choices if yes.

option selected value=

Individual items in the menu. Default select the item. Value to send if selected.



EXAMPLE


<select name="mydropdown"> Fresh Milk Old Cheese Hot Bread


Butter

FORM - BUTTONS HTML

EXPLANATION

submit name= value= align= tabindex=

Submit button Name of the button. Text written on the button. Alignment of the button. Tab order of the button.

 

EXAMPLE



IMAGE BUTTON HTML

EXPLANATION

image name= src= align= border= width= height= vspace= hspace= tabindex=

Submit button Name of the image. Url of the image. Alignment of the image. Border width around the image. Width of the image. Height of the image. Spacing over and under image. Spacing left and right of image. Tab order of the image.



EXAMPLE



FRAMES 

Frames can divide the screen into separate windows.



A file that specifies how the screen is divided into frames is called a frameset. If you want to make a homepage that uses frames you should:



make an HTML document with the frameset



make the normal HTML documents that should be loaded into each of these frames.



When a frameset page is loaded, the browser automatically loads each of the pages associated with the frames.



The HTML for the above frameset:

Examples 

On this page you can see examples of different framesets. Top Bottom





Examples 

tl

tr bottom





Examples 

top

. left

right





Examples 

topleft

topright

leftbottom

rightbottom





Examples topleft

topright

  



botleft

brtl

brtr botrbot



Cascading Style Sheets - CSS 

CSS is an excellent addition to plain HTML.



With plain HTML you define the colors and sizes of text and tables throughout your pages. If you want to change a certain element you will therefore have to work your way through the document and change it.



With CSS you define the colors and sizes in "styles". Then as you write your documents you refer to the styles. Therefore: if you change a certain style it will change the look of your entire site.



Another big advantage is that CSS offers much more detailed attributes than plain HTML for defining the look and feel of your site.



Finally, CSS can be written so the user will only need to download it once - in the external style sheet document. When surfing the rest of your site the CSS will be cached on the users computer, and therefore speed up the loading time.



CSS stands for Cascading Style Sheets. It is a way to divide the content from the layout on web pages.



How it works:   



A style is a definition of fonts, colors, etc. Each style has a unique name: a selector. The selectors and their styles are defined in one place.

In your HTML contents you simply refer to the selectors whenever you want to activate a certain style.

SELECTORS 

Selectors are the names that you give to your different styles.



In the style definition you define how each selector should work (font, color etc.).



Then, in the body of your pages, you refer to these selectors to activate the styles.

SELECTORS 

For example: <style type="text/css"> B.headline {color:red; font-size:22px; font-family:arial; text-decoration:underline} This is normal bold
This is headline style bold



In this case B.headline is the selector This is normal bold

This is headline style bold



There are three types of selectors:



HTML selectors Used to define styles associated to HTML tags. (A way to redefine the look of tags) Class selectors Used to define styles that can be used without redefining plain HTML tags. ID selectors Used to define styles relating to objects with a unique ID (most often layers)





TAG SELECTORS 

The general syntax for an HTML selector is: 



HTMLSelector {Property:Value;}

For example: <style type="text/css"> B {font-family:arial; font-size:14px; color:red} This is a customized headline style bold



HTML selectors are used when you want to redefine the general look for an entire HTML tag.

CLASS SELECTORS   

The general syntax for a Class selector is: .ClassSelector {Property:Value;} For example: <style type="text/css"> .headline {font-family:arial; font-size:14px; color:red} This is a bold tag carrying the headline class
This is an italics tag carrying the headline class

SPAN and DIV as carriers 

Two tags are particularly useful in combination with class selectors: <SPAN> and




Both are "dummy" tags that don't do anything in themselves. Therefore, they are excellent for carrying CSS styles.



<SPAN> is an "inline-tag" in HTML, meaning that no line breaks are inserted before or after the use of it.




is a "block tag", meaning that line breaks are automatically inserted to distance the block from the surrounding content (like
or
tags).




has a particular importance for layers. Since layers are separate blocks of information.
is an obvious choice when defining layers on your pages

ID SELECTORS 

The general syntax for an ID selector is: #IDSelector {Property:Value;}



<style type="text/css"> #layer1 {position:absolute; left:100;top:100; z-Index:0} #layer2 {position:absolute; left:140;top:140; z-Index:1}
THIS IS LAYER 1 POSITIONED AT 100,100
THIS IS LAYER 2 POSITIONED AT 140,140


GROUPED SELECTORS 

.headlines{ font-family:arial; color:black; background:yellow; font-size:14pt; } .sublines { font-family:arial; color:black; background:yellow; font-size:12pt; } .infotext { font-family:arial; color:black; background:yellow; font-size:10pt; }



.headlines, .sublines, .infotext { font-family:arial; color:black; background:yellow; } .headlines {font-size:14pt;} .sublines {font-size:12pt;} .infotext {font-size: 10pt;}

CONTEXT DEPENDANT SELECTORS 

It is possible to make selectors that will only work in certain contexts. For example, you can define a style for the tag that is only triggered if the text is not only bold but also written in italics. For example, the style should be in effect here: example but not here : example.



Simply adding a normal style to the tag is done like this: B {font-size:16px} Adding a context dependent style, like the one described above is done like this: I B {font-size:16px;} We simply separated the contextual tag from the tag with a space.



USING GROUPED AND CONTEXT DEPENDENT SELECTORS AT THE SAME TIME: It is possible to use context dependent and grouped selectors at the same time. For example, like this: I B, .headlines, B .sublines {font-size:16px;} In the example the font-size of 16 pixels is in effect on: 1) All tags enclosed by tags 2) All headlines classes. 3) sublines classes enclosed by tags.

WHERE TO PLACE IT 

CSS can be added to your pages at 3 different levels.



It is possible to create CSS styles that only work for the single tag it is defined for.



Single tag CSS is used when the style is used in a single place on the entire site.



Usually a certain style appears more than once on your pages, and thus you should use the second technique: adding styles that are defined once for the entire page.



If, however, that certain style is used on more than a single page, you should use the third - and most powerful - technique described: adding styles that are defined once for the entire site.

SINGLE TAGS 

CSS can be defined for single tags by simply adding style="styledefinition:styleattribute;" to the tags. Look at this example: It is NOT me.



You should limit your use of single tag CSS.



If you define your styles for each and every tag they're used on, you will lose much of the power associated with CSS.



For example, you will have to define the style over and over again whenever it's used, rather than just defining it once and then referring to that one definition whenever it's used.



Furthermore, if you wanted to change a certain style, you'd have to change it all over in your document, rather than in one place.

SINGLE PAGES 

<style type="text/css"> .headlines, .sublines, .infotext {font-face:arial; color:black; background:yellow; font-weight:bold;} .headlines {font-size:14pt;} .sublines {font-size:12pt;} .infotext {font-size: 10pt;} <span class="headlines">Welcome

This is an example page using CSS.
The example is really simple,
and doesn't even look good,
but it shows the technique.





As you can see: The styles even work on tables.
---
Example from checkit.com.
---


ENTIRE SITES 

File: example.html <span class="headlines">Welcome

This is an example of a page using CSS.
The example is really simple,
and doesn't even look good,
but it shows the technique.
As you can see: The styles even work on tables.
---
Example from CheckIT.Com.
---






The above example is the exact same as we used for CSS defined for entire pages, with one important exception: There is no style definition on the page. Instead we added a reference to an external style sheet: File: whatever.css .headlines, .sublines, infotext {font-face:arial; color:black; background:yellow; font-weight:bold;} .headlines {font-size:14pt;} .sublines {font-size:12pt;} .infotext {font-size: 10pt;}



Now if you just add the line to the of all your pages, then the one style definition will be in effect for your entire site.