290 likes | 422 Views
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
E N D
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 • notepad • word/wordperfect/other word processor • HTML authoring program • HotMeTaL, Front Page, HotDog, etc.
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
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)
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>
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>
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>
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
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.
Body tags • Text formatting tags • Form tags • Graphic display tags • Java applets • JavaScript or VBScript • Basically anything that doesn’t go in the header.
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>
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
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>
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
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
Paragraph formatting • All white space is compressed • Paragraphs and breaks must be specified • Indenting and other spacing • Organizing the page
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>
<pre></pre> Returns and space for formatting Tab support Fixed-width characters <xmp></xmp> Displays any tag except </xmp> Preformatted text
<!-- comment --> Can be placed around other tags <!-- <H1>This header is hidden</H1> --> Comments
<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
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
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
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
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
Basic Web Publishing M. Scott Gartner sgartner@primenet.com 7/15/98