Workshop in Computational Bioskills - Spring 2008

Briefly on HTTP and HTML

HTTP - HyperText Transfer Protocol : We went over this briefly in Lesson 6 

HTML - HyperText Markup Language

One of the main languages that is being used in the Web
Defines the content and the style of the page
Consists of free text and tags
The tags have an Hierarchical structure 
<tag_name> free text </tag_name> 
Very easy to write and to fix mistakes 

Basics
Attributes
Images and Links
Lists and Tables
Frames
Forms
Your First Steps




Let's write a simple HTML document 

An HTML document contains two distinct parts - the head and the 
body. The head contains information about the document that 
is not displayed. The body contains the content displayed on the screen. 

 example 1  and the source code.


Tags define entities, and each entity has attributes that characterize it.
Here's a partial list of entities: 

Attributes
Each tag can contain attributes which describe 
the characters of the displayed information. Attributes may appear in several entities. 
Here's a list for the most common attributes: 
size
color
face
align
bgcolor
text
link
vlink: visited link

 example 2  and the source code

Images and Links
The HTML links enables you actually to traverse the web. 
There are different types of links: local - in the same 
file, and external - to another file (any accessible file). 
Images can be a link too! 

 example of local link
 and example of absolute link. see code.
 example of external link . see code



Images and Links have additional attributes
href: the link
target: where to display the link 
name: name of the link 
src: source of image 
align
height
width
alt: text appears when mouse is on image 

Lists and Tables

HTML has special entities that describe 
lists (ordered or not) and tables. 

example of a list  see code 
example of a table see code 

Frames
Instead of a body, the document can have a frameset
element, which split the page into several frames, 
each shows a different document. Frames can hold other frames.
 
< frameset >: cols, rows 
< frame >: src, name, scrolling 
< noframe >: element which does not support frames 

example of a simple frame    see code 

Forms

Forms enables the user to send information to the server.
The server processes the information using a program 
which is specified in the form definition. Forms include 
text boxes, radio buttons, submit buttons etc.
< form >: defines the form area. Attributes:

method [get | post] : 
 Arguments are passed in one of these methods,

 In the GET method: 
all information is passed after the URL.
 For example: passing the argument name=Dani and age=13 
 to the program action.php. Will look like this: 
 http://www.cs.huji.ac.il/~bioskill/Lesson9/action.php?name=Dani&age=13
 
 In POST method: the data is passed to the server in a hidden way. 
 There is no limit on the length of the arguments here.


action: link to the accepting program (e.g. action.php)

< input >: includes almost all the features of the form:
type [text | password | checkbox | radio | submit | reset ] 
name: name of variable which the feature defines, needed 
for the accepting program
value: different meaning for each feature - 
    text/password: the default value
    checkbox/radio: value of variable when checked
    submit/reset: written on the button. 
checked: checked by default 
size: fonts size
maxlength: max length for text/password

< textarea >: free text box 
name: name of variable
rows
cols


example of a form    see code 

Your First Steps

In order to create your own web page, you should have the directory 
www in your home directory. File index.html is the file that is 
called by default when browsing to "http://www.cs.huji.ac.il/~login".
This lesson gives only basic information. You can learn a lot from
looking at web pages sources. In addition, there are many "learning HTML" 
sources on the web. A clear and convenient one is www.w3schools.com. 
If you want to learn more, you can also look at dbi first few lessons.
   
Good Luck!