Announcements

1
Announcements
2
WWW and HTML

• Review what is WWW
• Description of HTML
• HyperText Markup Language

3
What is WWW?

• Via Internet, computers can contact each other
• Public files on computers can be read by remote
  user
• usually HyperText Markup Language (.html)
• HTTP - HyperText Transfer Protocol
• URL - Universal Resource Locator - is name of
  file on a remote computer
• http//www.msu.edu/urquhar5/tour/active.html

4
How to make a web page

• Define the two basic steps required in making a
  web page.

5
Two Basic Steps

• Create an HTML File
• Upload file to server

6
.html

• Web documents are text files with .html extension
• These text files have HTML tags in them

7
HTML Tags

• Each opening HTML tag has a closing HTML tag that
  matches it.
• ltPgt for begin paragraph is followed by lt/Pgt for
  end paragraph
• ltPgt goes at beginning of paragraph
• lt/Pgt goes at end of paragraph

8
Example of Tags

• ltPgtHere is the paragraph about somethinglt/PgtltPgtHer
  e is the second paragraphlt/Pgt

What it will look like Here is the paragraph
about something. Here is the second paragraph.
9
Essential HTML Tags

• ltHTMLgt begins HTML document
• ltBODYgt begins body of document
• ltH1gtHeres a header in big typelt/H1gt
• ltPgtHeres a paragraphlt/Pgt
• lt/BODYgt ends body
• lt/HTMLgt ends HTML document

10
Browser Output of Page
If you opened that page in Netscape Navigator, it
would look like this
Heres a header in big type Heres a paragraph
11
View Page Source

• Using View Page Source allows you to see the
  HTML behind a page
• When we get into advanced HTML pages, this can be
  really important for learning how someone did
  something
• http//puffin.bird.audubon.org/

12
File Transfer Protocol

• FTP Program (also called FTP client) used to
  transfer files from your computer to your public
  web directory housed on the MSU computers
• WS_FTP LE is a good, free FTP program
• In MSU Labs, can directly save stuff in your AFS
  space, on the P drive, in the web directory

13
Your personal web space

• http//www.msu.edu/pilotname/index.html
• Three steps
• Make your pilot web space public (in advanced
  features)
• Create a file named index.html
• Use FTP to transfer a file named index.html into
  your web directory

14
Web Design Packages

• Microsoft FrontPage
• Adobe GoLive
• Netscape Composer
• Macromedia DreamWeaver

15
Netscape Composer

• Netscape Composer allows WYSIWYG
  (what-you-see-is-what-you-get) editing of web
  pages
• Controls similar to Microsoft word font
  formatting, colors, etc.

16
Macromedia Dreamweaver

• Excellent Site Building Tool
• Allows organization of files, ftp, and WYSIWYG
  editing all-in-one
• Principal program we will use in class
• Create page, then go to Site Put and it
  transfers it for you!

17
Dreamweaver

• You can download a trial version of Macromedia
  Dreamweaver by going to
• http//www.macromedia.com/software/dreamweaver/tri
  al/
• Expires in 30 days

18
HTML Advanced

• NeoTrace
• Hyperlinks and WWW
• Advanced HTML Formatting

19
Where is a Domain Server?

• Domain www.microsoft.com is on a server owned by
  Microsoft. But where is the server?
• How does your computer contact that server?

20
NeoTrace

• NeoTrace is a shareware program that allows you
  to watch the hops and stops in a search for a
  web document

21
What is a Hyperlink?

• Hyperlinks (also called links) are references
  in an HTML file that allow a user to connect to a
  different URL
• Hyperlinks are the magic behind the WWW - they
  transport you to a different world
• Michigan State University
• You may link to any page you wish!

22
Hyperlinks in HTML Code

• lta hrefURLgtText for linklt/agt

23
Hyperlinks in Action

• ltpgtWelcome to Lyman Briggs School.
• lta hrefhttp//www.msu.edu/lbs/index.htmlgt
• Lyman Briggs School
• lt/agt
• is a residential science program. lt/pgt
• What it will look like
• Welcome to Lyman Briggs School. Lyman Briggs
  School is a residential science program.

24
Local Hyperlinks

• If you are linking to a file in your directory,
  you do not need the entire URL. lta
  hrefpersonal.htmlgtPersonal Statementlt/agt
• You may also link to a location within the page
  (link to a target)
• Done

25
Inserting a Link in Macromedia Dreamweaver
Highlight Text Go to Link part of properties box
(may need to expand box using lower right
arrow) Local Click on Folder to Right of Link
Box and find file -or- Remote Type in
hyperlink must include http// e.g.
http//www.harvard.edu
26
Question?

• How would you make a three column layout in a web
  page?
• Talk to your neighbor and figure it out

27
Tables in HTML

• Tables are incredibly difficult to hand code.
• Why? Each cell needs a lttdgtlt/tdgt tag, each row
  needs a lttrgtlt/trgt tag, and the outer table needs
  a lttablegtlt/tablegt tag.
• Use Microsoft Word or Netscape Composer to edit
  tables. I recommend NC.
• Done

28
Why Tables?

• CONTROL!
• Tables allow you to control where items appear on
  pages.
• LBS Homepage is all tables (without borders)

29
Inserting Tables in Macromedia DreamWeaver
30
A Word about Frames

• Frames are also used to control layout
• Each cell is a separate window
• Frames are BAD! because they are user-UN-friendly

31
Graphics

• Question How does a web page include graphics?
  
• Are the graphics included in the HTML file or
  separate files?

32
Graphics JPGs

• JPG (JPEG) is a file format standing for Joint
  Photographic Experts Group
• Use .jpg ending on files
• JPGs are the best format for color photos and
  high-color images on the web
• Scanned photos should be saved as JPGs
• Photoshop, SuperPaint or other image editor is
  good for editing JPGs

33
Graphics GIFs

• GIF stands for Graphic Image Format
• .gif ending on GIF files
• GIFs are perfect for graphical images with only a
  few colors (e.g. text headers)
• Very bad for photographs
• Photoshop, SuperPaint, PowerPoint and others good
  for GIFs

34
Graphics in HTML

• ltimg srcURLgt
• Can include size parameters
• ltimg srcURL height80 width240gt
• ltimg srcdru.gif height25 width100gt
• Note No closing tag!