Web Page Creation Part II

1
Web Page Creation Part II

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

2
Using HTML editors

• There are several user-friendly HTML editors.
• WYSIWYG editor (What You See Is What You Get)
• WYSIWYG editors are usually easier to use and
  don't require a knowledge of HTML
• use WYSIWYG editors when pressed.
• TEXT editor.
• Text editors are usually faster to edit HTML
  changes,
• they don't add in unexpected tags
• they can easily support new formats like XML.
• Attention Web pages that work well with one
  browser, do not necessarily work well another
  browser!

3
Review URL

• A URL (Uniform Resource Locator) is the global
  address of documents and other resources that are
  on the Web.
• It is formed by a IP address or the domain name
  and the protocol (ex. http) that should be used
  to access the page
• Ex
• http//www.cnn.com
• ftp//cs.kent.edu/aguercio/index.html

4
Hyperlinks

• Absolute URL
• connects a local web server with a remote web
  server
• http//www.cs.kent.edu
• Relative URL
• Connects one page to another page in the same Web
  server
• Named Anchor
• Connects 2 locations on the same Web Page

5
Absolute URL

• The URL is the destination link
• A link is created by using the tags
• ltAgt lt/Agt
• The destination link is added with the attribute
  HREF inside ltAgt
• Example
• ltA HREFhttp//www.cs.kent.edugt Department of
  Computer Science lt/Agt

6
Relative URL

• You need only the files name and its location
  relative to the current directory where your page
  is stored.
• Absolute URL
• HREFhttp//www.personal.kent.edu/Documents/bookli
  st.html
• Relative URL (if my current folder is Documents)
• HREFbooklist.html

7
Advantages of Relative URL

• Choose either absolute or relative URL but.
• Relative URL is best because it makes your page
  portable.
• Page Portability the ability to relocate a page
  on a new server
• Moving a page to a new server
• If your links were absolute URLs, any link that
  uses the old server full address needs to be
  reedited with the new domain server address
• If your links were relative URLs, they will work
  on the new server, unless you change the
  directory structure.

8
Named Anchors

• Anchors are very useful to reach parts of the
  same web page. in long pages that do not fit the
  screen.
• Ex. Titles of sections can be anchors that can be
  reached from an index of content at the top of
  the web page.
• Anchor Syntax A tag ltAgt with the attribute
  NAMEname
• To reach the anchor, a tag ltAgt with the links
  name is used
• Example The index of content and the anchors
• ltULgt
• ltLIgt ltA HREFFirstgt First Thinglt/Agt
• ltLIgt ltA HREFSecondgt Second Thinglt/Agt
• lt/ULgt
• ltH3gt ltA NAMEFirstgt First Sectionlt/Agtlt/H3gt
• ltH3gt ltA NAMESecondgt Second Sectionlt/Agtlt/H3gt

9
Important Rules

• Always check each link that you add to a Web page
  to be sure that it works!
• Maintain you page!
• Pages that are out there today might not be there
  tomorrow!

10
Tables

• Tables contain rows and columns
• ltTRgt table row
• ltTDgt table data
• Syntax
• ltTABLEgt
• ltTRgt
• ltTDgt
• insert here the content of a table cell
• lt/TDgt
• lt/TRgt
• lt/TABLEgt
• REMEMBER Lynx, which is a fast text-only Web
  browser, does not support tables or image or
  graphics

11
Rows and Columns

• Each ltTRgt lt/TRgt creates a row
• Each ltTDgt lt/TDgt creates a cell (i.e. a column)
• Many columns can be obtained by creating many
  cells in the same row
• ltTABLEgt
• ltTRgt
• ltTDgt
• insert here the content of a table cell
• lt/TDgt
• lt/TRgt
• ltTRgt
• ltTDgt
• insert here the content of a table cell
• lt/TDgt
• lt/TRgt
• lt/TABLEgt
• The code creates a table with 2 rows and 1 column

12
Tables with images

• Tables are great to organize images.
• ltTABLEgt
• ltTRgt
• ltTDgt
• ltIMG SRC "my_book.jpg" ALT a bookgt
• lt/TDgt
• lt/TRgt
• lt/TABLEgt
• The attribute ALT in IMG replaces the image with
  the text in " " if the browser cannot display the
  image

13
Add a border and resize images

• Add the attribute BORDER5 to the TABLE tag.
• A frame is added to the cell
• Add now WIDTH and HEIGHT
• use percent. The table will dynamically adjust
  itself according to the percent value whenever
  the browser window is resized
• Example
• ltTABLE BORDER5 WIDTH100 HEIGHT100
  BGCOLORyellowgt
• Be sure to have a nice background and look at the
  effect!
• Resizing an image does not change the memory size
  or the bandwidth
• Only compression reduces that amount!

14
More attributes for Tables

• CELLPADDING adds space between the item in the
  cell and the cell frame
• CELLSPACING adds space between cells
• BORDERCOLOR change the color of the border
• Try this table
• lttable border"1" width"100" cellpadding"20"
  cellspacing"2" bordercolorredgt
• lttrgt
• lttdgt
• ltimg SRC "my_book.jpg" ALT "my book"gt
• lt/tdgt
• lt/trgt
• lt/tablegt

15
What tables offer.

• Feel free to add your creativity! Use tables to
• Make the layout of a page more appealing
• Add margins around your text
• Create a small gallery of images that have
  clickable regions
• Create 2 columns display
• Override busy background pattern with regions of
  solid colors
• Add 3-D frames around a picture
• Center an image no matter how the browser is
  resized.
• Display table of numbers

16
Practice with Tables

1. Make a table with two columns
2. Set the width to 40
3. Add a thick border in green
4. Add additional space by modifying the CELLPADDING
   and CELLSPACING attributes
5. Observe the results

17
The div tag

• The ltdivgt tag defines a division or a section in
  an HTML document.
• The ltdivgt tag is often used to group
  block-elements to format them with styles.
• The div element is very often used with CSS to
  layout a web page.
• ltdiv style"colorF0F0F0"gt  lth3gtThis is a
  headerlt/h3gt  ltpgtThis is a paragraph.lt/pgt
• lt/divgt

18
Use of class in ltulgt
lthtmlgt ltheadgt lttitlegtMy first styled
pagelt/titlegt ltlink rel"stylesheet"
href"tt.css"gt lt/headgtltbodygt lt!-- Site
navigation menu --gt ltul class"navbar"gt ltligtlta
href"www.google.con"gtGooglelt/agt lt/ligtltligtlta
href"www.yahoo.com"gtYahoolt/agt lt/ligtltligtlta
href"www.ask.com"gtAsklt/agt lt/ligtltligtlta
href"http//www.dogpile.com/"gtDogpilelt/agt lt/ligtlt/
ulgt ltul class"navbar1"gt ltligtGoogle
lt/ligtltligtYahoo lt/ligtltligtAsk
lt/ligtltligtDogpile lt/ligtlt/ulgt lt!-- Main content
--gt lth1gtnbsplt/h1gt lt/bodygtlt/htmlgt
19
Add style.
lthtmlgt ltheadgt lttitlegtMy first styled
pagelt/titlegt ltstyle type"text/css"gt body
padding-left 11em font-family Georgia,
"Times New Roman", serif color purple
background-color d8da3d ul.navbar
position absolute top 2em left 1em
width 9em h1 font-family
Helvetica, Geneva, sans-serif
lt/stylegt lt/headgt ltbodygt
20
A CSS file

• You can use a different style for each class!

_at_charset "utf-8" / CSS Document / body
padding-left 11em font-family Georgia,Times,
serif color purple background-color
affeaf ul.navbar list-style-type none
padding 0 margin 0 position realtive
top 2em left 1em width 9em h1
font-family Helvetica, Geneva, Arial, sans-serif
ul.navbar li background white margin
0.5em 0 padding 0.3em border-right 1em
solid black ul.navbar a text-decoration
none alink color blue avisited
color purple ul.navbar1 li background
green margin 0.5em 0 padding 0.3em
border-right 1em solid black
21
Where to learn more?

• http//www.w3schools.com/