HTML BASICS II

1
HTML BASICS -II

• CS 3505
• WB_html_basics_II

Tables Image maps Meta elements
Meta transitions Frames
2
Tables

• Used for tabular data
• Simple table tutorial see http//www.w3schools.com
  /html/html_tables.asp
• These days, mostly used for fancy layout
• Layout table formats see Deitel 4.5,Greenlaw 7.5
• Basic Table Tags
• ltTablegtlt/Tablegt makes enclosed text a table
• Border -- border line thickness in pixels
• CellSpacing --space between cells
• CellPading --space between cell content and
  border
• Width or -- of table in pixels of of
  document
• Align right, left, center only works when
  width lt100

3
Tables

• Basic Table Tags Cont
• ltCaptiongtlt/Captiongt --table heading
• ltTheadgtlt/Theadgt -- enclosed the headings
• ltTrgtlt/Trgt-- Enclosed a row in head or body
• ltThgtlt/Thgt--Header column cell data
• ltTbodygtlt/Tbodygt -- Encloses body
• ltTdgt/ltTdgt -- Body column cell data

4
Tables

• Basic Table layout

ltTable width 100 border 2gt ltCaptiongt Your
Caption lt/Captiongt ltTheadgt lttrgt ltthgt Col
1 lt/thgt ltthgtCol 2lt/thgt lt/trgt lt/Theadgt ltTBodygt ltt
rgt lttdgt Data 1,1 lt/tdgt lttdgt Data 1,2 lt/tdgt
lt/trgt lttrgt lttdgt Data 1,1 lt/tdgt lttdgt Data 1,2
lt/tdgt lt/trgt lt/Tbodygt lt/Tablegt
5
Tables For Fancy Formatting

• Table cells can include content other than text
  such as images, hyperlinks, etc
• -lttrgt lttdgt ltIMG SRC "Snowflake.gif" Height30
  width 30gt lt/tdgt lttdgt Data 1,2 lt/tdgt lt/trgt

• More Tags
• ltColgroupgtltColSpan2gtltColSpan3gt lt/Colgroupgt
  -formats columns
• ltTd or Td Rowspangt -- specifies of rows
• ltTh or Th Colspangt --specifies of columns

6
Table Geography
1) Layout table on virtual grid defined by
Max of lttdgt or ltthgt tags
Max of lttrgt tags
2) Fill in data items one at a time as you would
type
1
2
3
4
5
6
7
9
3) Use rowspan3 Colspan 2 to reserve a 2x3
cell set
8
11
10
12
7
Tables For Fancy Formatting

• Program from upper left to lower right
• Row and Col span reserves space

8
Tables For Fancy Formatting

• See table example in sfanw5_table

Row 1 first element spans two rows and columns
ltth colspan2 rowspan2gt
Row1 second element spans two columns ltth
colspan2gt
Row 2 cell 2
Third row lttd rowspan4gt
Third row contains three more cells
Row 4 to 6 contain 3 more cells each
9
Image Maps

• Image Maps are clickable images
• Provides hot spots
• Uses
• display image map of an area links zoom in on
  area or provide info about area
  www.terraserver.microsoft.com (OK 6/16/03)
• Navigation bars www.amazon.com (along the top)
• On image replacement text
• Sometimes to get fancy fonts you use a picture of
  text image maps let you keep the text live use
  usemapmapName in IMG tag, then add an named
  MAP tag

10
Image Maps How to

• Define Image and map to use
• Usemap mapid
• Define map and areas
• ltMAP IDMAPIDgt ..ltAREA/gt..lt/mapgt

ltIMG SRC"nuke.gif" usemap"skierMap"gt ltmap
name"skierMap"gt ltarea coords"0,0,40,40"
href"sfanw1.html"gt ltarea coords"0,40,40,80"
href"sfanw2.html"gt lt/MAPgt
11
Image Maps How to

• Define Image and map to use
• Usemap mapid
• Define map and areas
• ltMAP IDMAPIDgt ..ltAREA/gt..lt/mapgt

IMG SRCSkier.jpg" height200 width100 Alt
skier usemap"skierMap"gt
ltMAP id"skierMap"gt ltarea coords"0,0,100,100"
href"sfanw1.html"gt ltarea coords"0,100,200,200"
href"sfanw2.html"gt lt/MAPgt
12
Area Tag

• Coordinates start in the upper left hand corner,
  with positive Y going down and positive X to the
  right
• First pair is the upper left of the area, second
  pair is the lower right
• Can also use other shapes
• ltAREA SHAPEcircle COORDS"x1, y1, r"
  HREF"url_for_region"gt
• ltAREA SHAPE"polygon" COORDS"x1, y1, x2, y2 ...
  xn, yn" HREF"url_for_region"gt
• SHAPE rect is the default

13
Image map Example ImageMap-II
rect
poly
Reference url for hot spot
14
META Elements

• ltMETA gt tags are included in the header to
  provide keyword and descriptive information used
  for indexing
• ltMETA HTTP-EQUIVgt define additional information
  to be sent to the browser in the http header.
• ltMETA NAMEgt define information which is to be
  referenced outside of the document.
• General format
• ltmeta name tag type content abc gt
• Tag types
• Keywords
• Description
• Author
• date

15
META Name Elements Examples

• See ImageMap-MetaTag.html

• lt!-- the following meta tags are used for search
  engine indexing --gt
• ltmeta name "keywords" content "CS3505,
  tutorial, HTML, Meta" /gt
• ltmeta name "description" content "Internet
  HTML mata tag example" /gt
• ltmeta name "author" content " W. Baer"
  /gt
• ltmeta name "date" content " 1/3/02" /gt
• lt!-- the following tag prevent search engine
  indexing --gt
• ltmeta name "robots" content
  "noindex.nofollow" /gt
• Additional meta tag attributes can be defined but
  are not necessarily recognized by standard
  browsers or search engines See
• http//www.html-reference.com/META.htm

16
Example ImageMap-MetaTag.HTML
Look at the source code
17
META Http-equiv

• Http-equiv attribute controls browser operations
• Netscape cache control
• ltMETA HTTP-EQUIV"expires" CONTENT"Wed, 26 Feb
  1997 082157 GMT"gt
• ltMETA HTTP-EQUIV"Pragma" CONTENT"no-cache"gt
• ltMETA HTTP-EQUIV"Set-Cookie" CONTENT"cookievalue
  xxxexpiresWednesday, 21-Oct-98 161421 GMT
  path/"gt
• ltMETA HTTP-EQUIV"Window-target" CONTENT"_top"gt
• ltmeta http-equiv"Content-Type"
  content"text/html charsetiso-8859-1"gt
• ltmeta http-equiv"Content-Language" content"en"gt
  
• Content Rating
• ltMETA http-equiv"PICS-Label" content'(PICS-1.1
  "http//vancouver-webpages.com/VWP1.0/" l gen
  true comment "VWP1.0" by "scott_at_hisdomain.com" on
  "1997.10.28T1234-0800" for "http//www.hisdomain.
  com/" r (P 2 S 0 SF -2 V 0 Tol -2 Com 0 Env -2 MC
  -3 Gam -1 Can 0 Edu -1 ))'gt
• http//www.webdeveloper.com/html/html_metatags.htm
  l

18
META Transitions

• See MetaTag-Transitions.html
• ltmeta http-equiv"Page-Enter" content
  "revealTrans(Duration4.0,Transition3)" /gt
• Transition 0 square in, 1 square out
• 2 circle in , 3 circlc out
• Many others
• Ive tried up to 30 and there are more
• For color blending use
• contentblendTrans(Duration4.0,Transition3)
• Transition Definitions See
• http//www.html-reference.com/transition.htm

19
META Transitions (Cont)

• Refresh transitions are automatically evoked to
  show a new HTML page after a certain time
• ltmeta http-equivrefresh" content Wait Time
  URLNew_document_Pathname" /gt
• Wait time time in seconds before refresh
• New_document_Pathname The pathname of the HTML
  document to be shown
• For color blending use
• contentblendTrans(Duration4.0,Transition3)
• For undefined transition, i. e. large numbers,
  the transition is randomly selected

20
Other META Transitions (Cont)

• Site-Enter Specifies the transition effect
  that is to be performed when the site is loaded.
• ltMETA HTTP-EQUIV"Site-Enter" CONTENT"RevealTrans
  (Duration4, Transition23)"gt
• Site-Exit Specifies the transition effect that
  is to be performed when the site is unloaded. .
• ltMETA HTTP-EQUIV"Site-Exit" CONTENT
  "RevealTrans(Duration4, Transition23)"gt
• Page-Exit Specifies the transition effect that
  is to be performed when the page is unloaded.
• ltMETA HTTP-EQUIV"Page-Exit" CONTENT
  "RevealTrans(Duration4, Transition23)"gt

21
FRAMES

• Frames are the way to include multiple pages in
  a single Browser
• Control were new pages are displayed
• Prevent users from leaving your site
• ltframe gt defines an individual frame
• ltframesetgtlt/framesetgt defines the pattern in
  which they are to appear

22
FRAMES

• Build frame content pages with Hlinks to
  reference pages and target
• Build Frameset page to place content
• Name and position content frames

Targetmain
Frameset_left.html Hlink to reference pages
Frameset_main.html Hlink to reference pages
Ref. Page
23
FRAMES

• Target
• normally the name of the frame you want the
  referenced page to appear
• target _blank in new window
• target _self in page from which
  referenced
• target _top in whole window (removesthe
  frameset)

lta HrefMetaTag-Transitions-I.html target"left"gt
display something in left or new ltagt
24
FRAMES
lt!-- Frameset.html--gt lt/Htmlgt ltHeadgt ltTitlegtFramse
tlt/Titlegt ltbase target"_self"gt lt/Headgt ltFrameset
cols 20,80gt ltframe name "left"
srcFrameset_left.htmlgt ltframe name "main"
srcFrameset_main.html scrollingautogt ltnoframes
gtltbodygt This page uses framesltbrgt but your
browser does not support them lt/bodygtlt/noframesgt lt
/Framesetgt lt/Htmlgt

• ltframesetgt
• Cols
• Rows
• ltframe..gt
• Name
• ltnoframesgt

25
NestedFRAMES

• Two vertical framesltframeset row100,gt
• One top frame
• One bottom frame with two horizontal nested
  frames

ltframeset rows100,gt ltframe name"topframe"
srcFrameset_top.htmlgt ltFrameset cols
20,80gt ltframe name "navigation"
target"main" srcFrameset_left.htmlgt
ltframe name "main" target"main"
srcFrameset_main.html scrollingautogt lt/frames
etgt lt/framesetgt
26
Still To Go

• Dynamic Pages
• CSS
• Document Object Models
• Page Changes in response to events
• Interactive
• Forms
• CGI
• JavaScript
• Programming Integration examples