Creating HTML An Introduction

1
Creating HTML An Introduction

• Norman White
• Stern School of Business

2
Creation Tools

• Unix
• Pico editor
• Vi
• Emacs
• Windows
• Notepad
• Word 2000
• Bbedit
• Netscape Composer
• Dreamweaver
• Front Page

3
Why do we need to know HTML?

• There are many tools that will generate
  reasonable looking web sites
• However, you usually need to know HTML in order
  to connect your web page to a data base

4
Easiest Tools

• Unix
• Pico
• cd public_html
• pico file.htm
• chmod or file.htm (makes it readable)
• Windows (need to move file to sales)
• Notepad
• Word (add new ftp location to publish)
• Netscape Composer
• Probably easiest of all, but no advanced features
• Use to create initial document, then hack the
  html to add advanced features.

5
Advanced Tools

• Dreamweaver 3
• Handles Frames, Forms, Tables etc.
• Generates Javascript behaviours
• Handles site management details
• Broken links, publishing etc.
• Works with Flash and Fireworks
• Dreamweaver Ultra extends support to databases

6
Simple HTML Page
7
HTML BasicsImportant Tags

• Anchor statement
• Text to display
• Examples
• Click here for myfile
• Click here for
  myfile
• Click
  here for myfile
• Things to remember
• Links are relative to current folder if not fully
  specified
• I.e. /multim/myfile.htm means the myfile.htm
  file in the folder named multim underneath the
  current folder
• Good idea to use relative addresses whenever
  possible, then you can move complete sites around
  easily

8
The IMG tag

• Options
• align left

9
In-Line Image Maps

• 0,0,100,100
• coords50,50,25

10
Other areas

• Rect
• Circle CoordsX,Y,Radius
• Oval Coordsx1,y1,x2,y2
• Poly Coordsx1,y1,x2,y2,x3,y3
• Point Coordsx1,y1

11
Problems

• How do I find the coordinates?
• Top left is 0,0
• Bottom right is height, width (pixels)
• To find other coordinates, need to examine image
  with software like LVIEW, PAINTSHOP, PHOTOSHOP,
  IMAGE COMPOSER etc.

12
Other interesting tags

• Use to define multicolumn tables
• Useful for aligning items
• Easy to make and very flexible
• Example

13
Sample Table

• cell 1 row 1
• cell2 row 1 /td

14
Advanced tags

• Frames
• Forms
• Layers

15
Frames

• They allow the developer to display multiple
  windows at a time instead of just one. Each
  window will contain the contents from a
  different URL.
• Very powerful if used with JAVA or JavaScript
  (Now can have separate programs running in each
  Window).

16
Creating Frames

• (divides rows)

17
top.html
left.html
right.html
18
Frame Advantages

• I can specify an href that will appear on ANOTHER
  frame
• Makes it very easy to do menus, user clicks on a
  menu item, and the content shows up in another
  frame.
• junk
• will put junk.html in the right frame when user
  clicks junk

19
Examples (look at STERNet)

• Go to http//www.stern.nyu.edu/STERNet

20
Conclusion

• HTML is pretty simple
• Knowledge of a few tags can get you a long way..
• Have fun