Week 3

1
Week 3

• Construct image maps
• Define tables in HTML
• Use tables to display information

2
HW1 Review

• Using Unix command create all folders and set
  permission
• Do the following if you havent done anything
• Start\Run and type
• telnet students.depaul.edu
• Use login name and password
• mkdir public_html (Create a public folder
  Public_html )

3

• Chmod 755 public_html
• cd public_html ( now I am in public_html
• Folder)
• mkdir IT130
• mkdir images
• Chmod 755 IT130
• Chmod 755 images

4

• Using a text editor and HTML code create your
  main webpage and name it main .html
• ftp main,html to your students account.
• Always re ftp your file once you change.
• How to do that?
• Open Internet explorer, type ftp//students_at_depaul
  .edu in the address bar
• Use login name and address.
• Drag and drop the file into correct folder at
  ftp site.
• You need to set the permission for the file using
  unix command.
• Go to students account using telnet ( if it is
  not open)
• cd public_html
• chmod 611 main.html

5
Comments on hw1

• The url address of your image (say image.jpg) is
  something like
• http//students.depaul.edu/loginname/ect270/imag
  es/image.jpg
• (this was also specified in the hwork
  instructions!)
• URL addresses for web pages use the HTTP protocol
  not the ftp protocol!
• This is WRONG ftp//students.depaul.edu/loginnam
  e/ect270/images/image.jpg

6
Which tag goes first?

• Are the following HTML codes right or wrong?
• lta hrefwww.depaul.edugt lth2gt De Paul homepage
  lt/agt lt/h2gt
• lta hrefwww.depaul.edugt lth2gt De Paul homepage
  lt/h2gtlt/agt
• ltpgt ltigt ltbgt Welcome to ECT270 lt/bgtlt/igtlt/pgt
• ltpgt ltstronggt ltigt Welcome to ECT270
  lt/igtlt/stronggtlt/pgt
• ltimg srcphoto.jpggt
• ltbodygt
• ltpgt This is my picture lt/pgt
• lt/bodygt

7
Lab1
8
Client-side image maps

• Designate certain sections of an image as
  hotspots. Metra System Criminal justice
  Mount Laguna observatory
• http//kaiserpermanente.org/locations/index.html
• Often used as navigation tools for instance at
  www.yahoo.com www.amazon.com
• Each hotspot will hyperlink to a different page
• Create a map of the image specifying the shape of
  each hotspot and the coordinates of the vertices.
• The name of the map to be used is then referenced
  in the ltimggt tag.

9
Image map syntax

• ltmap namemapnamegt
• ltarea shapeshape coordscoordinates
  hrefurl targetwindow altalternative
  textgt
• (1 area for each hotspot in the image map)
• lt/mapgt
• ltimg srcphoto.jpg usemapmapnamegt

SHAPE rect (default - for rectangular shapes),
circle, polygon (polygonal shape) COORDS The x
and y coordinates of the crucial points of
each shape. The coordinates are relative to
the top left corner of the image. The x axis
extends horizontally, the y axis extends
vertically. HREF location of the linked page for
that hotspot
10
Shapes and coordinates
ltarea shaperect coordsx1,y1,x2,y2
hrefurlgt ltarea shapecircle coordsx,y,r
hrefurlgt ltarea shapepolygon
coordsx1,y1,x2,y2,.x5,y5 hrefurlgt
HTMimagemap
11
The ISMAP Trick

• Using Netscape or IE, you can find the x-y
  coordinates for any spot
• Set up an IMG tag with an ISMAP attribute
• lta hrefplaceholder.htmlgtltimg srctest.jpg
  ismapgtlt/agt
• Display the HTML file using a browser
• Place the cursor inside the image and look at the
  status message at the bottom of the browser
  window. You should see the coordinates of the
  cursor position.
• An alternative method is to use MapEdit (look in
  the CD attached to the book or
  http//www.boutell.com/mapedit/)

12
Class exercise Navigation bar in www.yahoo.com

• Complete the HTML code to
• insert the image contained in the file
  yahoomap.gif and
• create the image map for the three hotspots
  defined above.

13
Basic HTML Tables

• A table organizes data in rows and columns (of
  columnsof cells)
• lttablegt lt/tablegt Enclose the table structure
• lttrgt lt/trgt Table row
• lttdgt lt/tdgt Each data cell within a row. The
  smallest area of the table we are able to format

14
Basic table structure

• lttablegt
• lttrgt
• lttdgtA1lt/tdgt
• lttdgtA2lt/tdgt
• lttdgtA3lt/tdgt
• lt/trgt
• lttrgt
• lttdgtB1lt/tdgt
• lttdgtB2lt/tdgt
• lttdgtB3lt/tdgt
• lt/trgt
• lt/tablegt

15
Table Caption and Headers

• ltcaption alignvaluegtlt/captiongt A caption is
  centered at the TOP/BOTTOM of the table.
• ltthgt lt/thgt special cells that act as table
  headers (centered and boldface)

lttablegt ltcaptiongtThis is a tablelt/captiongt
lttrgt ltthgtFirst Rowlt/thgt lt/trgt
lttrgt lttdgtA1lt/tdgt lt/trgt lt/tablegt
This is a table
Html_table.html
16
ltTablegt attributes

• BORDER pixels? Size of the border around the
  table
• CELLSPACING pixels? space inserted b/w cells
• CELLPADDING pixels? size of the gap b/w the
  cell text and the cell border
• ALIGN

LEFT/RIGHT? table is placed on the left/right
and text is wrapped around the
table CENTER ? table is placed in the center of
the page. Text is not wrapped around the
table
17
More ltTablegt Attributes

• BORDERCOLORcolor? changes the color of the
  border
• BORDERCOLORDARKcolor?BORDERCOLORLIGHTcolor?
  creates a 3D effect for the border

18
HTML and Colors

• Colors in HTML documents are represented by a
  triplet of numbers, called and RGB triplet, based
  on theirs Red, Green, and Blue component.
  Intensity 0-255 in decimal base.
• RED (255,0,0)
• HTML requires that the color values be entered as
  3 two-digits hexadecimal numbers.
• RED FF0000
• digit1 digit2 digit3 digit4
  digit5 digit6
• red green
  blue
• Colors may appear differently in different OS or
  browsers.
• Use 216 Web safe colors displayed consistently on
  all types of computers.

19
Color names and RGB values
20
More on RGB code for colors

• Use Web Safe colors (216 color palette) that are
  independent on the computer used
  http//www.lynda.com/hexh.html.
• Tool to generate hexadecimal code
• MS Paint hexadecimal converter in Windows
  calculator
• Other tools available on the web
• ColorMix at www.colormix.com
• Palette Man at www.paletteman.com, etc
• For color charts go to http//www.hypersolutions.
  org/rgb.html

21
More ltTablegt attributes

• FRAMEoption Controls which side of the table
  has borders
• Where option can be one of the following

22
More ltTablegt attributes

• RULESallrowscolsnone? controls around which
  cell the border is drawn.

23
ltTABLEgt,ltTDgt,ltTHgt attributes

• WIDTHpixels or ? Table/cell width in pixels
  or as of the page/table
• HEIGHTpixels or ? Same as above
• BGCOLORcolor? Change the table/cell background
  color
• BACKGROUNDpic.jpg? Tiles a picture as a
  background

24
Cell attributes (ltTDgt,ltTHgt)

• COLSPAN? this cell spans for columns
• ROWSPAN? this cell spans for rows
• ALIGN
• VALIGN

LEFT/RIGHT? text in the cell is aligned
left/right CENTER? text in the cell is centered
TOP/BOTTOM? text in the cell is aligned
top/bottom MIDDLE? text in the cell is aligned
with the middle of the cell
25
Align and valign attributes
26
Example of spanning cells
Cell spans two cols and two rows lttd rowspan2
colspan2gt
Cell spans three cols lttd colspan3gt
Spancell.html
Cell spans . lttd .gt Complete
27
Using tables for page layout

• To display content in newspaper-like columns or
  separates the page in different topical areas.
• Start with the outer table and work your way in
  using nested tables
• Add background color to visually separate column
• Add cell padding to avoid crowding
• Do not use too many nested tables it slows down
  the web page may confuse browsers!

HTMLLayout.html
28
(No Transcript)
29
Tables and Graphics

• lttablegt
• lttrgtlt!--first row--gt
• lttd rowspan"2" align"center"gt
• ltimg src"sila1thin.jpg" width"222"
  height"608"gt lt/tdgt
• lttd align"center"gt
• ltimg src"silahead.gif" width"232"
  height"164"gt lt/tdgt
• lttd rowspan"2" align"center"gt
• ltimg src"sila1thin.jpg" width"222"
  height"608"gt lt/tdgt
• lt/trgt
• lttrgtlt!--second row--gt
• lttd align"center"gt
• ltimg src"sila2.jpg" width"267" height"334"gt
• lt/tdgt lt/trgt lt/tablegt

Tablegraph.html
30
How many rows and columns?
Topframe.html
31
Web page layout using tables

• Financial Times http//news.ft.com/home/us/
• Calendar of Events http//www.cs.depaul.edu/calen
  dar/calendar.asp
• http//events.tc.umn.edu/months.xml
• CTI homepage
• http//www.cs.depaul.edu/news/default.asp

32
Final remarks

• Work plan
• Diagram the layout before you start writing
• Create the text for various cols in separate
  files, to insert later.
• Start from the outer table first, and gradually
  work inward
• Insert comment tags lt!-- text--gt to identify the
  different sections of the Web page
• Use cell padding cell spacing to avoid
  overcrowded web pages
• Use the valigntop attribute for cells
  containing articles/text.
• Use no more than three/four cols of text. Keep
  the layout of your web page simple!

33
Examine the following code and predict how it
will display the table. Draw the table by hand!

• lthtmlgt
• ltheadgt lttitlegt ECT270 - Exercise on tables
  lt/titlegt lt/headgt
• ltbodygt
• lttable border"1" cellpadding"1"
  cellspacing"10"gt
• lttr align "center"gt
• lttd width"25" bgcolor"red"gt ltpgt lt/pgt lt/tdgt
• lttd width"50" bgcolor"yellow"gt Hello Sunshine!
  lt/tdgt
• lttd rowspan"2" width"25" bgcolor"orange"gt
  ltpgtlt/pgt lt/tdgt
• lt/trgt
• lttrgt
• lttd colspan"2" bgcolor"blue"gt Did you draw the
  right table? lt/tdgtlt/trgt
• lt/tablegt
• Solution

34
Assignment 2hw2.htm

• Create a Form

• Rewrite main.htm using tables for the layout!