Embed Size (px)
DESCRIPTION
Basic Web Publishing. M. Scott Gartner [email protected] 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 - PowerPoint PPT Presentation
Citation preview
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>
Special characters
Ampersand - & - & Superscript 0 - ° - 0
Less than - < - < Superscript 1 - ° - 1
Greater than - > - > Superscript 2 - ° - 2
Double quote - " - ” Superscript 3 - ° - 3
Copyright - © - One quarter - ¼ - ¼
Registered - ® - One half - ½ – ½
Three quarters - ¾ - ¾
Preformatted text
• <pre></pre>
• Returns and space for formatting
• Tab support
• Fixed-width characters
• <xmp></xmp>
• Displays any tag except </xmp>
Comments
• <!-- comment -->
• Can be placed around other tags– <!-- <H1>This header is hidden</H1> -->
Separators
• <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%>
Images
• 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”>
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”
Hyperlinks
• 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”>
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:– [email protected]
