Web Page Creation Part I

1
Web Page Creation Part I

• ST Introduction to Web Interface Design
• Prof. Angela Guercio

2
Objective

• In this lecture, you will learn
• More tags in HTML
• Differences between HTML and XHTML
• Cascading Style Sheets (CSS)

3
Image Files

• GIF (Graphic Interchange Format)
• extension .gif
• JPEG (Joint Photographic Expert Group)
• extension .jpg
• Scanner create TIFF (Tagged Image File Format)
  file
• conversion in GIF or JPEG is done in software
• image in GIF is smaller but still good
• BMP (bitmap) digital image

4
Insert Images

• ltimg src"../../Desktop/aubree.jpg" alt""
  width"125" height"149"gt
• IMG creates an inline image
• i.e. treated like a single alphanumeric character
  which has a larger size than a regular character
• SRC specifies the image file and the physical
  location
• ALT specifies the size of the image
• Use it all the time because
• Lynx user (an old text-based browser) will
  recognize what they are missing if ALT is
  specified
• Text-to-voice browser for visually impaired, get
  a great amount of information from it.

5
Aligning and resizing images

• ALIGN inside IMG tag can be equal to
• Center
• Top
• Bottom
• Middle
• WIDTH and HEIGHT are used to resize
• resize but preserve original scale
• resizing does not reduce memory or bandwidth
  requirements
• Large image require long time to load.
• BORDER is used to frame a picture
• 0 no border

6
Colors

• Insert a background color
• 16,777,216 colors
• or 216 Web-safe colors
• colors are in hexadecimal notation (base 16)
• Obtained as a mix of Red, Green and Blue (RGB)

7
Graphics

• Insert a background color
• ltbody bgcolor000000 gt
• lt/bodygt
• Colors the background in black
• ltbody backgroundImage.jpggt
• lt/bodygt
• Uses an image as background
• Image is repeated to fill the whole area

8
Design Hints

• use bold headings and oversized fonts
• do not overload your page
• avoid to put images on top of a patterned
  background
• do not use a pattern that distracts the reader
  from the page
• images, background and special effects should not
  fight each other.
• if you use many pictures use a solid color for
  the background

9
HW to start in class

• Write a html file that produces this page (see
  next slide) as output.
• The instructions about the Format, the Style, the
  Font, and the Color are in the page.
• When completed, e-mail the file to your teacher
  (aguercio_at_kent.edu )
• Deadline Before next class.

10
Homework 2

• Write a html file that produces this page as
  output.

11
(No Transcript)
12
Styles in XHTML

• Every tag you have seen so far can be used in
  HTML, however styles in XHTML is described
• Either in the ltheadgt section of an XHTML document
• Use this when you want to apply the style only to
  that file
• Or in a separate file with the extension .css
• Use this when you want to apply the style to all
  the pages of your site.

13
Hands on 1.(Graded practice)

• Open Dreamweaver
• Select File -gt New
• In PageType select HTML and press Create
• The template of an html file is provided
• Click on Split so that you can see both the
  Code and the Design window
• After the ltbodygt tag, insert the code of next
  slide and save the file as YourFirstCSS.
• Press Live View to see the page result.

14
Code to insert after the ltbodygt tag

• lth1gtSCENE I. Rousillon. The COUNT's palace.lt/h1gt
• ltemgtEnter BERTRAM, the COUNTESS of Rousillon,
  HELENA, and LAFEU, all in blacklt/emgt ltpgt
• ltH2gtCOUNTESSlt/H2gt ltpgt
• In delivering my son from me, I bury a second
  husband. ltbr /gt
• ltpgt
• lth2gtBERTRAMlt/h2gt
• ltpgtAnd I in going, madam, weep o'er my father's
  death ltbr /gt
• anew but I must attend his majesty's
  command, to ltbr /gt
• whom I am now in ward, evermore in subjection.
• ltbr /gt
• ltpgt
• lth2gtLAFEUlt/h2gtlt/pgt

15
Hands on .(cont.)

• Insert in the head area of the file the code of
  Example 1 (in the next slide).
• Insert it soon after the tag lttitlegt
• The code describes the style of the page
• Save the page and view the results in the
  browser.
• What do you notice?
• Replace the code you just inserted with the code
  of Example 2 (two slides after)
• What do you notice?

16
Example 1 Cascading Style Sheets (CSS)

• ltstyle type"text/css"gt
• h1
• font-family Verdana
• font-size 18pt
• font-weight bold
• text-align center
• h2
• font-family Verdana
• font-size 12pt
• font-weight bold
• body
• font-family Georgia
• background-color aqua

17
Example 2 Cascading Style Sheets (CSS)

• ltstyle type"text/css"gt
• h1
• font-family Verdana, Arial, sans-serif
• font-size 2em
• font-weight bold
• color green
• text-align center
• h2
• font-family Verdana, Arial, sans-serif
• font-size 1.1em
• font-weight bold
• color red
• margin-left -1.5em
• body

18
Hands on .(cont.)

• Remove the code you just inserted and replace it
  with the line of code
• ltlink relstylesheet typetext/css
  hrefstyle.css /gt
• Select File -gt New
• In PageType select CSS and press Create
• The template of an CSS file is automatically
  provided
• This time you can see only the code window.
• Insert the code you have just removed and save
  the file as style.css.
• ATTENTION Be sure you save it in the same folder
  where you saved your YourFirstCSS html file.
• Go back to your YourFirstCSS file.
• Make changes in the style and save. Go back to
  your file. Do you see the changes?
• Turn your html and css file to your instructor
  for grade.