1 / 27

Basic Web Publishing

Basic Web Publishing. M. Scott Gartner sgartner@primenet.com 7/15/98. Introduction. What will I be covering? What won’t I cover? Should you create a web page?. 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

libby-goff
Télécharger la présentation

Basic Web Publishing

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Basic Web Publishing M. Scott Gartner sgartner@primenet.com 7/15/98

  2. Introduction • What will I be covering? • What won’t 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 ISP’s 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 • <html> • <head><title>A minimal example</title></head> • <body>This is the body of the page</body> • </html>

  7. What is a tag? • Enclosed in angle brackets “<“ and “>” (less-than and greater-than signs) • The name of the tag. • A list of zero or more attributes • For example: • <tagname attribute=value attribute1=value> • Tag names are not case sensitive • <BR> is identical to <br>, <Br>, or <bR>

  8. Closing tags • Uses the same tag name but begins with a forward slash • <tagname>Some enclosed text</tagname> • Most tags in HTML have both tags and closing tags • Tags can enclose other tags • <B><I>Bold and Italics</I></B> • Some have only the opening tag • <br>, <hr>

  9. Back to the minimal web page • the <HTML></HTML> tag pair encloses the entire page • Text outside of this tag may not be processed by a web browser. • the <HEAD></HEAD> 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 • <TITLE></TITLE> sets the window title • <META> denotes information about the page • There can only be one <HEAD> section in a web page.

  11. Body tags • Text formatting tags • Form tags • Graphic display tags • Java applets • JavaScript or VBScript • Basically anything that doesn’t go in the header.

  12. The Body Tag has attributes • Background image • <body background=“URL”> • Various colors • Background <body bgcolor=color> • Foreground <body text=color> • Links <body link=color> • Visited links <body vlink=color> • Active links <body alink=color>

  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 • <body bgcolor=black text=white link=#FFCC66>

  15. Character formatting tags • strong - <strong> - usually bolded • emphasis - <em> - usually italicized • cite - <cite> - usually italicized • usually fixed width tags • keyboard - <kbd>, sample - <samp> • code - <code>, typewriter - <tt> • bold - <B> - bold • italic - <I> - 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 - <div align=value></div> • paragraph - <P align=value></P> • break - <br> • nobreak - <nobr> • heading tags levels 1 (largest) through 6 (smallest) • <H1>This is a large heading</H1> • <H6>This is a small heading</H6>

  19. Special characters

  20. <pre></pre> Returns and space for formatting Tab support Fixed-width characters <xmp></xmp> Displays any tag except </xmp> Preformatted text

  21. <!-- comment --> Can be placed around other tags <!-- <H1>This header is hidden</H1> --> Comments

  22. <HR> Produces a horizontal line Width and height of line can be controlled <hr align=value size=10 width=100> width can also be a percentage of browser width <hr align=center size=10 width=50%> <hr align=right size=2 width=25%> Separators

  23. A file in the HTML directory <img src=“picture.gif” alt=“Description of picture” width=250 height=92> A file in a sub-directory <img src=“graphics/picture.gif”> A file at some absolute location <img src=“http://www.somewhere.com/graphics/whatever.jpg”> Images

  24. GIF - Graphics Interchange Format Limited to 256 colors Useful for cartoon style graphics JPG - Something May be millions of colors Better compression, but “lossy” What formats to use

  25. Also called “anchors” Transfers control to another HTML file <a href=“URL”>Text to highlight</a> Another file in the HTML directory <a href=“newfile.html”> A file in a sub-directory <a href=“directory/newfile.html”> Hyperlinks

  26. 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@primenet.com Conclusion

  27. Basic Web Publishing M. Scott Gartner sgartner@primenet.com 7/15/98

More Related