Review session for Web development

1
Review session for Web development
2
Todays class

• Review the web designing.
• Filling out instructor evaluation form.

3
Time line of the internet history

• When was the ARPANET first demostrated?
• When did the NFSNet replace it?
• When did the email(ftp, www) appear?
• Exact year not required, but you need to know the
  era.

4
Basics of Internet

• What is an IP address.
• What is the structure of an IP address.
• What is the static IP and dynamic IP.
• What are domain names?
• How does a domain name corresponding to an IP
  address.
• www.lib.msu.edu
• 35.8.220.219

5
Domain names

• What are first level, second level domain names?
• .com .org .edu are top level domains, which
  specify the category of the domain name user.
• Second level domain name gives the entitys name.
  This must be unique in the top level domain.
• Low level domain gives the servers name.
• What is the difference between a domain name and
  a URL

6
Universal Resource Locator Static
http//www.msu.edu/urquhar5/tour/active.html
http// identifies type of transfer
/urquhar5/tour/active.html File Location on
Remote Computer This part is CasE SenSiTiVe.
www.msu.edu Domain Name - name of remote computer
7
Universal Resource Locator Dynamic
http//www.msu.edu/cgi-bin/redirect.cgi?qLBSsite
Web
http// identifies type of transfer
Folder name /cgi-bin/ Server program name
redirect.cgi Argument of the server program
?qLBSsiteWeb
www.msu.edu Domain Name - name of remote computer
8
Web Page Development Cycle
EDIT and SAVE the file in your AFS p\web\test.htm
l
TEST by BROWSING to the page http//www.msu.edu/
msunetid/test.html
9
HTML File Structure

• ltHTMLgt
• ltHEADgt
• lt/HEADgt
• ltBODYgt
• lt/BODYgt
• lt/HTMLgt

10
Essential HTML tags

• ltHTMLgt lt/HTMLgt
• ltheadgt lt/headgt
• ltbodygt lt/bodygt
• ltpgt lt/pgt
• lta hrefhttp//www.msu.edu/gt MSU lt/agt
• ltimg srcfilename.jpggt
• H1, H2, u, em.

11
Cascading Style Sheets (CSS)

• A Cascading Style Sheet is a file with a list of
  formatting instructions.
• When a CSS file is attached to an HTML file, the
  appearance of the HTML will be defined by the CSS
  file.
• What can CSS change
• Define customized style and apply to the content.
• Redefine the appearance of HTML tags.
• Advanced HTML tags. alink, ahover

12
Separation of Content and Presentation

• Content
• Use tags like lth1gt, lth2gt, ltpgt, ltemgt or ltligt to
  indicate the structure of your pages
• Presentation
• Use a CSS style sheet to determine how the tags
  are formatted
• Advantage of separation
• Changing the formatting only requires editing the
  style sheet

13
Hyperlinks in HTML Code

• lta hrefURLgtText for linklt/agt

Tag Attribute URL
Closing Tag
Opening Tag
Link text
href Hyper Text Reference
14
Types of link

• Absolute link
• lta hrefhttp//www.msu.edugt lt/agt
• Relative Link
• lta hrefresume.htmlgt lt/agt
• Email Link
• lta hrefmailtonanzhang_at_msu.edugt lt/agt
• Anchor Link
• lta hrefAnchorNamegt lt/agt

15
Color Control Codes

• Computer monitors combine Red, Green and Blue
  (RGB) in various amounts
• Hexadecimal codes tell the computer how much Red,
  Green and Blue to display
• Red FF0000
• Green 00FF00
• Blue 0000FF
• Other colors? Combinations! Yellow FFFF00
• White FFFFFF
• Black 000000
• Approximately 17 million combinations.

16
Graphics

• Types of graphics that can be insert into HTML
• Jpeg
• Gif
• What are they good for?

17
Graphics in HTML

• First step Copy the graphics into your web
  folder, because graphics is NOT embedded in HTML.
• ltimg srcURLgt
• or ltimg srcfile.namegt
• Can include size parameters
• ltimg srcURL height80 width240gt
• ltimg srcdru.gif height25 width100gt
• Note No closing tag!

18
Additional graphics features

• Graphics as link
• How?
• Image map
• What is it?
• Rollover images
• What is under beneath the rollover images?

19
General steps of web site design

• Survey
• Whos my audience
• Decide the general style
• Organize information
• Layout design
• Template design
• Implementation
• Generating content page from template.
• Testing the web site
• Publishing

20
Layout design

• Two methods
• Using table
• Using layout view to draw layout cells.
• Dreamweaver automatically translate the layout
  table and cell to standard tables.

21
Dreamweaver Template

• What is a Dreamweaver template?
• A special HTML file (with .dwt)
• What are the advantages of using a template to
  create the pages in a web site?
• Why is it better than reusing previously created
  HTML files?
• How template file differs from an HTML file
• Non-editable region same for every pages
• Editable region different in different pages