Basic HTML

1
Basic HTML
Part Four
Slides prepared by K. Clark
Modification Date June 2004
2
FORMS
Improved, modified, and corrected for June 2004
3
INTERACTIVE WEB PAGES
There is a need for interaction between web pages
displayed in a browser and the web server, for
online processing. Examples Order
processing, Personal registration for a
service, Data collection in general, Any
other purpose where information can be input.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
4
INTERACTIVE WEB PAGES
Information is generally entered in some sort of
form. The form container lt form . (attributes)
gt actual form code here lt /form
gt - contains all display information for the
form. - defines input information for the
form. - determines how the input is sent to
the server.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
5
INTERACTIVE WEB PAGES
Information is sent from the form to a processing
program on the web server. The processing program
is known as a common gateway interface, or cgi
program. cgi programs - decode information
from the sending form. - perform processing as
required. - interface with other server-side
programs. - communicate as needed back to the
browser.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
6
INTERACTIVE WEB PAGES
cgi programs may be in any language that runs on
the server and can perform the needed
task. Compiled c, c, and basic are common
languages. Interpreted known as scripts Perl
is a very commonly used scripting language. Html
extensions hybrids in which executable code is
blended with html-like tags. Miva (tmr) and php
are examples.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
7
INTERACTIVE WEB PAGES
Form Data
Form In Browser
Cgi Program
Response
Client
Server
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
8
FORMS
ltform action http//www. path.ca/cgi-bin/prog
.cgigt The action attribute specifies the URL of
the program which will receive information from
the form for processing. The program accepts
and processes the information in much the same
way as command-line argument list.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
9
FORMS
lt form action method post gt
or lt form
action method get gt The method
attribute defines how the information from the
form is to be sent. get appends the
information to the end of the URL post sends
the information as a multi-line message
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
10
FORMS
lt form action method get
enctype application/x-www.form-urlencoded
gt Causes the information to be arranged as a
single string that can be added to the end of the
URL in the action attribute. The general form is
var1value1var2value2var3value3. etc.,
where the var1 (etc) are variables defined in
the page and value1 (etc) are the values
entered into the form for them. This string is
passed, via the URL, to the specified program for
processing. This is the default enctype.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
11
FORMS
lt form action method post
enctype
multipart/form-data gt Creates a text message
from the information and sends that message to
the action URL (Header information
here) --------------------processidnumber Content-
Disposition form-data namevar1 Value1 ------
--------------processid number Content-Disposition
form-data namevar2 ( etc. )
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
12
FORMS
Example 1 lt form action http//www.abigsite.t
v/cgi-bin/prog.pl
method post enctype application/x-www.form
-urlencoded gt Begins a form entry section in the
web page, and specifies that information from
that page is to be encoded as a single string
message and sent to the program prog.htm at the
site www.abigsite.tv, separately from the URL. In
this instance, the cgi program is shown as a Perl
script, from the pl extension. enctype is
optional, but recommended.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
13
FORMS
Example 2 lt form action http//www.abigsite.c
a/program method get enctype
application/x-www.form-urlencoded gt Begins a
form entry section in the web page, and specifies
that information from that page is to be encoded
as a single string, attached to the URL after
program, and sent to program at the site
www.abigsite.ca. The enctype attribute here is
optional. In this instance, program is likely a
compiled program rather than a script, because it
has no extension shown and is located in the root
directory.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
14
FORMS
Example 3 lt form action mailto//keiron_at_yorku
.ca method post enctype
multipart/form-data gt Begins a form entry
section in the web page, and specifies that
information from that page is to be encoded as a
multi-line message, like in the earlier example.
and mailed as an email message to the address
shown in the mailto attribute. This is an easy
way to send form data, useful for small
applications. It is easy to implement, but
requires manual processing of the information!
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
15
FORMS Input Methods
Simplest input is a text box ltinput typetext
namethevalue valuedefault /gt Causes a
rectangular data entry box to appear on the
screen, showing the content default, and allows
the user to input text data into it. The word
default is replaced with the users input, and
the input is stored in a variable with the name
thevalue. May specify maximum number of
characters using the optional attribute
maxlength. eg maxlength30 would limit the
input value to thirty characters. Use size to
control the width of the displayed box.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
16
FORMS Input Methods
Another simple input, similar to text lttextarea
cols50 rows8 nametextinputgt
Some initial filler material here
lt/textareagt Displays an area fifty characters
wide by eight rows high, and accepts text. The
input is stored in the variable textinput.
Text inside the container is initially displayed
in the text area. Scrolling will normally occur
if more than eight (rows) lines are required.
Text wrap inside the box can be controlled with
the attribute wrap, and the values off,
soft, and hard.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
17
FORMS Input Methods
Drop-down list ltselect namevarnamegt ltoptiongtc
hoice onelt/optiongt ltoptiongtchoice
twolt/optiongt ltoptiongtchoice threelt/optiongt lt/sele
ctgt Displays a text-type box with a drop-down
list arrow. Only the values in the option list
may be selected. Only one item may be selected,
unless the multiple option is specified (next
slide). more
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
18
FORMS Input Methods
Drop-down list (2) ltselect namevarname size
3gt Would cause three items at a time to be
displayed in the list. ltselect namevarname
multiplemultiplegt Would allow more than one
selection to be made from the list.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
19
FORMS Input Methods
Drop-down list (3) ltoption valuesel3gtChoice
Threelt/optiongt Causes the value sel3 to be
placed into the select variable instead of
Choice Three. ltoption selectedselectedgtChose
n Choicelt/optiongt Causes this item to be
displayed as the default.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
20
FORMS Input Methods
Drop-down list EXAMPLE ltselect
namevarnamegt ltoption value1gtJanuarylt/option
gt ltoption value2gtFebruarylt/optiongt ltoption
value3 selectedgtMarchlt/optiongt ltoption
value4gtAprillt/optiongt lt/selectgt Provides
options of months. The number for the selected
month will be stored in varname. Initially,
March is chosen.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
21
FORMS Input Methods
Buttons Radio buttons ltinput typeradio
nameradbut1 valuechoice1 /gt ltinput
typeradio nameradbut1 valuechoice2
/gt ltinput typeradio nameradbut1
valuechoice3 /gt This code creates three radio
buttons. Only one can be chosen at a time. The
variable name will hold the value for whichever
button is chosen. Optional attribute
checkedchecked may be used to initialize one
button as selected otherwise browser sets
default.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
22
FORMS Input Methods
Buttons Checkbox buttons ltinput typecheckbox
namechkbut1 valuechoice1 /gt ltinput
typecheckbox namechkbut1 valuechoice2
/gt ltinput typecheckbox namechkbut1
valuechoice3 /gt This code creates three
checkboxes. More than one may be selected. The
variable name and selected value is repeated in
the data list for each chosen button. Optional
attribute checkedchecked may be used to
initialize one button as selected otherwise
browser sets default.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
23
FORMS Input Methods
Note with Checkbox Checkbox boxes are
independent but may have the same variable name,
or different variable names. If the same variable
name is used for more than one checkbox, special
handling, usually by using an array, is required
by the cgi program. A similar situation exists
with ltselectgt when multiple choices are
permitted.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
24
FORMS Input Methods
Buttons ltinput typereset nameres
valuePress to Reset /gt Causes a button to
appear with Press to Reset on it. When pressed,
all fields in the form revert to their default
initial values. ltinput typesubmit
namesendit valuePress to Send /gt This
creates a send button with Press to Send on it.
When clicked, the form data is assembled and sent
according to the instructions in the opening
ltform gt element. A form may have more than one
submit button, with different names. This is
useful for when the user makes the choice of what
to do.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
25
FORMS Input Methods
Buttons ltinput typehidden nameCodeType
valueBotched /gt Saves the value Botched in
the variable CodeType and passes it when the
data is submitted, but does not make any display
in the browser. Used to handle information which
does not change and which the user does not need
to know about. A form version number would be one
instance. ltinput typepassword namepword
valuespoof /gt This is the same as a text input
except that asterisks () are displayed instead
of the typed characters.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
26
FORMS
All elements relevant to a form must be located
inside the ltformgt .. lt/formgt container. They
will not work correctly otherwise. That is, they
will not be submitted when the form is
submitted.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
27
FORMS - Design
Good form design requires careful
planning. Working what is required on paper
first is a good approach it can save hours of
keying time. Consider using lttablegt elements to
arrange form elements on a page an easy way to
right align text on one side with left aligned
input areas on the right.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
28
META ELEMENTS
29
Meta Elements - Introduction
The (optional) element lt meta . something ..
/gt provides information to browsers and/or search
engines about the document. These MUST include
either name or http-equiv as an attribute,
but not both. ie lt meta name .. /gt or
lt meta http-equiv .. /gt
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
30
Meta Elements Introduction 2
Properly belong in the head section of
document. ltheadgt lttitlegt .. lt/titlegt ltmeta
nameetc .. /gt ltmeta http-equivetc..
/gt lt/headgt Some older browsers may not recognize
all meta elements.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
31
Meta Elements Examples 1
ltmeta namekeywords contentkey 1, key 2
/gt For Search Engines defines key words to be
used in indexing the document. Many key words may
be defined. Note words appearing in the list
should each appear in the first page of the
document. Some search engines will penalize the
page if this is not the case.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
32
Meta Elements - Examples 2
ltmeta http-equivexpires contentTue, 28 Oct
2003 000000 GMT /gt Browser should not cache
document after the expiry date. ltmeta
http-equivpragma content no-cache /gt Has
a similar effect, but is not date limited.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
33
Meta Elements - Examples 3
You can force a redirection of a web-page ltmeta
http-equivrefresh content 30 URL
http//somesite.ca/page.htm /gt Waits 30 seconds
then branches to the indicated URL If the URL is
omitted, the current page is reloaded after the
specified time. This can be useful for pages with
dynamically changing content.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
34
Meta Elements - Examples 4
ltmeta name Set-cookie contentwhatever
information is to be in the cookie! /gt This
causes the information specified to be included
in the cookie on the local machine. A dynamically
created (scripted) web page could include the
user name or ID number, for example.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
35
Meta Elements - Examples 5
ltmeta namedescription contentThis is the
ITEC 1010.30 A S04 Website! WOW! /gt Provides
actual text for some search engines to display in
their search results.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
36
Meta Elements - Examples 6
ltmeta name robots contentnoindex,
nofollow /gt Tells Search Engines not to index
(store) the page (noindex) and/or not to follow
links in the page (nofollow). This is useful for
pages which the user does not want to appear on
search engine results, such as private or test
pages.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
37
Meta Elements - Examples 7
ltmeta nameauthor contentKeiron Clark
/gt As it appears, identifies the author of the
page. ltmeta namegenerator content Whatever
/gt Identifies the html (etc) generator (ie
FrontPage) which was used in creating the
document.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
38
Meta Elements - Examples 8
ltmeta name revisit-after content21 Days
/gt Tells search engine spider to come back again
in twenty-one days. Helps to keep site in search
engines memory, so to speak. Caution do not set
time too short this may result in penalty
instead of benefit to placement.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
39
Meta Elements - Summary
There are a range of these elements to identify
html documents, identify their source
information, and instruct search engines handling
the page. The previous pages mention some of the
more commonly used ones. Further information
should be available in reference books or from
the w3 consortium website.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
40

• This set of PowerPoint (trade name owned by
  Microsoft) slides has been prepared by K. Clark
  for his personal use and the use of his students.
  Intellectual rights to these slides are retained.
  These slides are NOT the property of York
  University.
• June, 2003. Revision October, 2003 June, 2004

Slides prepared by K. Clark
41
End of Basic HTML - Four
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark