Basic Web Publishing

1
Basic Web Publishing

• M. Scott Gartner
• sgartner_at_primenet.com
• 7/15/98

2
Introduction

• What will I be covering?
• What wont I cover?
• Should you create a web page?

3
Steps to creating a web site.

• Get an ISP account and an e-mail address
• Get some web space
• 5Mb should be plenty
• Get an editor
• notepad
• word/wordperfect/other word processor
• HTML authoring program
• HotMeTaL, Front Page, HotDog, etc.

4
More steps

• Have a goal
• Getting a job
• Selling a product
• Research
• Publishing your own writings or graphics
• Design the site
• Upload the site to the ISPs computer
• Update it often

5
What is a web site?

• A set of files (the part you provide)
• HTML
• graphics
• image maps
• Java class files
• etc.
• A computer connected to the Internet.
• A web server (Netscape, Apache, IIS)

6
Creating your first web page

• A minimal example
• lthtmlgt
• ltheadgtlttitlegtA minimal examplelt/titlegtlt/headgt
• ltbodygtThis is the body of the pagelt/bodygt
• lt/htmlgt

7
What is a tag?

• Enclosed in angle brackets lt and gt (less-than
  and greater-than signs)
• The name of the tag.
• A list of zero or more attributes
• For example
• lttagname attributevalue attribute1valuegt
• Tag names are not case sensitive
• ltBRgt is identical to ltbrgt, ltBrgt, or ltbRgt

8
Closing tags

• Uses the same tag name but begins with a forward
  slash
• lttagnamegtSome enclosed textlt/tagnamegt
• Most tags in HTML have both tags and closing tags
• Tags can enclose other tags
• ltBgtltIgtBold and Italicslt/Igtlt/Bgt
• Some have only the opening tag
• ltbrgt, lthrgt

9
Back to the minimal web page

• the ltHTMLgtlt/HTMLgt tag pair encloses the entire
  page
• Text outside of this tag may not be processed by
  a web browser.
• the ltHEADgtlt/HEADgt tag pair encloses the page
  header
• Text within here will not be displayed within the
  web page

10
Header tags

• Some tags only make sense in the header
• ltTITLEgtlt/TITLEgt sets the window title
• ltMETAgt denotes information about the page
• There can only be one ltHEADgt section in a web
  page.

11
Body tags

• Text formatting tags
• Form tags
• Graphic display tags
• Java applets
• JavaScript or VBScript
• Basically anything that doesnt go in the header.

12
The Body Tag has attributes

• Background image
• ltbody backgroundURLgt
• Various colors
• Background ltbody bgcolorcolorgt
• Foreground ltbody textcolorgt
• Links ltbody linkcolorgt
• Visited links ltbody vlinkcolorgt
• Active links ltbody alinkcolorgt

13
Colors in HTML

• Common names red, purple, gray, etc.
• Hexadecimal triplets
• Red, Green, and Blue are written as
• RRGGBB
• For example
• White is FFFFFF, black is 000000, and yellow
  would be FFFF00

14
Body tag using color

• background color will be black
• foreground color will be white
• link color will be apricot
• ltbody bgcolorblack textwhite linkFFCC66gt

15
Character formatting tags

• strong - ltstronggt - usually bolded
• emphasis - ltemgt - usually italicized
• cite - ltcitegt - usually italicized
• usually fixed width tags
• keyboard - ltkbdgt, sample - ltsampgt
• code - ltcodegt, typewriter - ltttgt
• bold - ltBgt - bold
• italic - ltIgt - italic

16
Font size and color

• range from 1 (small) to 7 (large), default 3
• Seven, Six, Five, Four, Three, Two, One
• Font colors are hex triplets or color names
• Black, maroon, green, olive, navy, purple, teal,
  gray, silver, red, lime, yellow, blue, fuchsia,
  aqua

17
Paragraph formatting

• All white space is compressed
• Paragraphs and breaks must be specified
• Indenting and other spacing
• Organizing the page

18
Section tags

• division - ltdiv alignvaluegtlt/divgt
• paragraph - ltP alignvaluegtlt/Pgt
• break - ltbrgt
• nobreak - ltnobrgt
• heading tags levels 1 (largest) through 6
  (smallest)
• ltH1gtThis is a large headinglt/H1gt
• ltH6gtThis is a small headinglt/H6gt

19
Special characters
20
Preformatted text

• ltpregtlt/pregt
• Returns and space for formatting
• Tab support
• Fixed-width characters
• ltxmpgtlt/xmpgt
• Displays any tag except lt/xmpgt

21
Comments

• lt!-- comment --gt
• Can be placed around other tags
• lt!-- ltH1gtThis header is hiddenlt/H1gt --gt

22
Separators

• ltHRgt
• Produces a horizontal line
• Width and height of line can be controlled
• lthr alignvalue size10 width100gt
• width can also be a percentage of browser width
• lthr aligncenter size10 width50gt
• lthr alignright size2 width25gt

23
Images

• A file in the HTML directory
• ltimg srcpicture.gif altDescription of
  picture width250 height92gt
• A file in a sub-directory
• ltimg srcgraphics/picture.gifgt
• A file at some absolute location
• ltimg srchttp//www.somewhere.com/graphics/whatev
  er.jpggt

24
What formats to use

• GIF - Graphics Interchange Format
• Limited to 256 colors
• Useful for cartoon style graphics
• JPG - Something
• May be millions of colors
• Better compression, but lossy

25
Hyperlinks

• Also called anchors
• Transfers control to another HTML file
• lta hrefURLgtText to highlightlt/agt
• Another file in the HTML directory
• lta hrefnewfile.htmlgt
• A file in a sub-directory
• lta hrefdirectory/newfile.htmlgt

26
Conclusion

• Writing HTML is easy
• Creating a web site is hard
• Keep it simple
• Use tools where you can
• HTML links on my web site
• www.primenet.com/sgartner
• Questions to me at
• sgartner_at_primenet.com

27
Basic Web Publishing

• M. Scott Gartner
• sgartner_at_primenet.com
• 7/15/98