HTML documents are in plain text format and can be created using any text editor
Sample HTML Document
<HTML>
<HEAD> <TITLE>Demo
page</TITLE> <!--Created by: wingky chan, jul 8,
2002 --> </HEAD>
<BODY> <H1>Demo
page</H1> HTML document are in plain text format and
can be created using any text editor.<p>
</BODY> </HTML>
HTML uses markup tags to tell Web browser how to display text HTML tags are usually paired --
<H1>and</h1>
<H1>tells Web browser to start formatting level-one heading
</H1>tells browser that heading is complete
Sample exception to pairing rule is <p>(paragraph) tag
Note: HTML is not case sensitive.<title>is equivalent to <TITLE> or <TiTlE> <! -- text --> is comment in HTML source and is not displayed on the page. not all tags are supported by all Web browser. if browser does not support tag, it just ignores it.
Web browsers ignore multiple spaces, line breaks, and starts new paragraph only when it reachs <P> tag
Browsers ignores any indentations or blank lines in source text. However, to preserve readability in HTML files, headings should be on separate lines, and paragraphs should be separated by blank lines (in addition to <P> tags)
Orginally <P> tag was un-matched and used at end of paragraph
Newer version can be used with matching <P> ... </P> tags
This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river. This victory, along with that at Gattysburg, Pennsylvania, (July 1-3, 1863) titled the war in favor of the North.
The chief power of HTML comes from its ability to link regions of text (and also images) to another document. The browser highlights these regions (usually with color blue and underlines) to indicate that they are hypertext links
HTML's single hypertext-related tag is <A>, which stands for anchor To include anchor with<A
Specify document that's being pointed to by entering parameter HREF="filename" followed by closing right angle bracket >
Enter text that will serve as hypertext link in current document.
Enter ending anchor tag: </A>
<A HREF="matinstats.html">Matin</A>
matinstats.html is in the same directory as the first document.
Link to documents in other directories by specifying relative path from current document to linked document.
Definition list usually consists of alternating term (abbreviated as DT) and definition (abbreviated as DD)
<DL> <DT> NCSA <DD> NCSA, National Center for Supercomputing Applications, is located on campus of University of Illinois at Urbana-Champaign. NCSA is one of participants in National MetaCenter for Computational Science and Engineering.
<DT> Cornell Theory Center <DD> CTC is located on campus of Cornell University in Ithaca, New York. CTC is another participant in National MetaCenter for Computational Science and Engineering. </DL>
NCSA
NCSA, National Center for Supercomputing Applications, is located on campus of University of Illinois at Urbana-Champaign. NCSA is one of participants in National MetaCenter for Computational Science and Engineering.
Cornell Theory Center
CTC is located on campus of Cornell University in Ithaca, New York, CTC is another participant in National MetaCenter for Computational Science and Engineering.
Use the <PRE> tag (which stands for "preformatted") to generate text in fixed-width font and cause spaces, new lines, and tabs to be significant
<PRE> #!/bin/csh cd $SCR cfs get mysrc.f:mycfsdir/mysrc.f cfs get myinfile:mycfsdir/myinfile fc -02 -o mya.out mysrc.f mya.out cfs save myoutfile:mycfsdir/myoutfile rm * </PRE>
#!/bin/csh cd $SCR cfs get mysrc.f:mycfsdir/mysrc.f cfs get myinfile:mycfsdir/myinfile fc -02 -o mya.out mysrc.f my.out cfs save myoutfile:mycfsdir/myoutfile rm *
Start with <tag>, where tag is desired formatting tag, to indicate beginning of tagged text.
Enter tagged text
End passage with </tag>
<B> Bold text -- Be Prepared <I> Italic text -- Semper Fidelis <CODE> for snippets of computer CODE -- The iostream.h header file. (Displayed in fixed-width font.) <SUP> SUPerscript (exponent) -- X2
<SUB> SUBscript --ai <STRIKE> STRIKE-through style -- Please don't drink and drive
<U> Underline --Pegasus was named for the winged horse. (Don't use this. It looks too much like a hyperlink!)
<BIG> BIGger font -- When the hammer hit her thumb, she screamed in agony.
<SMALL> SMALLer font -- Across the room he caught a glimpse of a tiny little mouse heading toward.
Four characters left angle bracket(<), right angle bracket(>), ampersand (&) and double quote (") have special meaning within HTML and therefore cannot be used "as is" in text. To use one of these characters in HTML document, you must enter its special character sequence instead:
<HR> tag produces horizontal line width of browser window Default is shaded engraved line
<HR SIZE=number> -- how thick is horizontal rule to be.
<HR WIDTH=number/percent> -- Default horizontal rule is always as wide as page. With WIDTH tag, author can specify exact width in pixels, or relative width measured in percent of document width.
<HR ALIGN=LEFT/RIGHT/CENTER> -- For small rules, pushed up against left margin, right margin, or centered on page.
<HR NOSHADE> -- for those times when you really want a solid bar.
Netscape allows specification of images's width and height in pixels.
<IMG SRC="images/mon.gif" WIDTH=400 HEIGHT=300>
Do this for speed, the browser will leave the right amount of space for image, but will continue laying out document with hole into which image will be placed.
WIDTH and HEIGHT values that differ from the actual width and height of image will cause the image to be scaled to fit the given dimensions. Be sure to use width and height that have same ratio as actual image or you will get strange images.
<IMG SRC="images/mon.gif" WIDTH=200 HEIGHT=150>
<IMG SRC="images/mon.gif" WIDTH=600 HEIGHT=450>
Can also use percentages
<IMG SRC="images/mon.gif" WIDTH=50% HEIGHT=75%>
Netscape will display image 50% as wide as screen size and 75% as high as screen size. You can specify ONLY width or height.Netscape will scale other dimension appropriately and display the image.
<IMG SRC="images/mon.gif" WIDTH=100>
will display smaller (but appropriately scaled) image 100 pixels wide.
<IMG SRC="images/mon.gif" HEIGHT=75%>
will display larger (but appropriately scaled) image 75% as high as screen size browser other than Netscape may ignore WIDTH and HEIGHT attributes.
Most browser recognize LOWSRC Those that do not just ignore it and load normal SRC image LOWSRC image loaded on "first pass" through document when all text and all LOWSRC images loaded, SRC images loaded on "second pass" through document
LOWSRC can be "low resolution" small (fast loading) image file SRC can be "high resolution" large(slow loading) image file .gif and .jpeg images can be used for either LOWSRC or SRC and can be mixed WIDTH and HEIGHT attributes used for both LOWSRC and SRC
if no WIDTH and HEIGHT attributes given, size of LOWSRC is used for SRC.
why? The "Hole" in the document for the image is determine by the size of the first image.
When it does, it becomes a slide show presentation or animation.
GIF89a Specification
Examples of Animated GIF Images
The newest Microsoft Internet Explorer display multiple images in a single .gif file
A .gif"image" can contain several separate images, information on timing, and whether or not to "loop" the animation
Multiple images can be used along with transparency
Simple to use -- Just imbed the image inline via <IMG SRC="images/sylvester.gif">
Much simple than Java or Shockwave animations
Tools are available to combine multiple .gif images into one "animated .gif"
WARNING: Browsers that cannot display multiple .gif images will usually display only the first of the first of the set -- which may not be very meaningful!
By default aligns text with bottom of images. <IMG ALIGN=BOTTOM SRC=image_URL>
ALIGN=TOP aligns text with top of image <IMG ALIGN=TOP SRC=image_URL>
ALIGN=MIDDLE aligns text with center of image <IMG ALIGN=MIDDLE SRC=image_URL>
With ALIGN=LEFT,graphic will float down and over to current left margin, and subsequent text will wrap around right hand side of graphic until <BR CLEAR=LEFT> With ALIGN=RIGHT,graphic will float down and over to current right margin, and subsequent text will wrap around left hand side of graphic until <BR CLEAR=RIGHT>
HSPACE and VSPACE leave horizontal and vertical white space between the image and things around it <IMG SRC=image_URL HSPACE=80>
An image that is to be used as background for document
Used to tile full background of document-viewing are <BODY BACKGROUND="metal/mainalig.gif"> ....Document here... </BODY>
BGCOLOR ATTRIBUTE
Change the color of the background without having to specify separate image that requires another network access to load.<BODY BGCOLOR="color">Document here</BODY>
Where "color" is "#RRGGBB" hexadecimal red-green-blue (RGB) triplet or a color name
RGB color value consists of three two-digit hexadecimal numbers (00-FF)
Each two-digit value specifies intensity of corresponding color
Color value#FF0000 is red because red number is set to highest value with green and blue set to zero
The Pound sign(#) is optional -- but is generally used with RGB values.
16 "primary" color names:
Aqua Black Blue Fuchsia Gray Green Lime Maroom
Navy Olive Purple Red Silver Teal White Yellow
These color display as: AquaBlackBlueFuchsiaGrayGreenLimeMaroom NavyOlivePurpleRedSilverTealWhiteYellow
Curiously color name RED and value #FF0000 are the same
Color name BLUE and value #0000FF are the same
BUT, color name GREEN and value #00FF00 are NOT the same -- probably because #00FF00 looks more like LIME
TEXT ATTRIBUTE To control the color of all normal text in a document:
<BODY TEXT="color">Document here</BODY>
LINK, VLINK, AND ALINK, ATTRIBUTE
VLINK stands for visited link, and ALINK stands for active link. Default coloring of these is LINK="BLUE", VLINK="PURPLE", and ALINK="RED".
Can change font size. Valid values range from 1-7. Default FONT SIZE is 3. Value given to size can optionally have a '+'or'-' in front of it to specify that it is relative to document BASEFONT. Default BASEFONT is 3. This is <FONT SIZE=+3> This is <FONT SIZE=+1> This is <FONT SIZE=-2> <FONT SIZE=+1> is the same as <BIG> <FONT SIZE=-1> is the same as <SMALL>
<FONT COLOR=color>...</FONT>
Can change font color. "Color" is "#rrggbb" hexadecimal red-green-blue triplet or a color name used to specify color.
This is <FONT COLOR="BLUE">
<FONT FACE=face>...</FONT>
<FONT FACE="face1,face2, ... ,facen"> ... </FONT>
Can change font face. Specify one or more font faces to use (in preference order). If none are available, standard face (usually "Times") will be used.
We advise you to use<FONT FACE="Helvetica,Utopia" SIZE=+3 COLOR="RED">extreme caution</FONT> when handling sulfuric acid.
We advise you to use extreme caution when handling sulfuric acid.
<TR...></TR> stands for table row <TD...></TD> stands for table data, and specifies standard table data cell. Each row need not have same number of cells specified. Short rows will be padded with blank cells on the right. Default alignment of table data is ALIGN=LEFT.
<TH...></TH> stands for table header. Header cells are identical to data cells in all respects, with exception that header cells are in bold FONT, and have default ALIGN=CENTER.
<CAPTION...><CAPTION> represents caption for table. CAPTION tags should appear inside TABLE but not inside table rows or cells. CAPTION accepts alignment attribute that defaults to ALIGN=TOP but can be explicitly set to ALIGN=BOTTOM. Captions are always horizontally centered with respect to table, and may have their lines broken to fit within width of table.
Figure 4.12. Attendance at and State of the last two seminars.
Name
Attendance
State
Hong Kong
75
S.A.Region
China
1254
Country
<TABLE BORDER=2> <CAPTION> Figure 4.12. Attenance at and State of the last two seminars. </CAPTION>
<TR> <TH>Name</TH> <TH>Attendance</TH> <TH>State</TH> </TR>
<TR> <TD>Hong Kong</TD> <TD ALIGN=RIGHT>75</TD>
<TD ALIGN=CENTER>S.A.Region</TD> </TR> <TR> <TD>China</TD>
<TD ALIGN=RIGHT>1254</TD> <TD ALIGN=CENTER>Country</TD> </TR> </TABLE>
COLSPAN attribute can appear in any table cell (TH or TD) and it specifies how many columns of table this cell should span. Default COLSPAN for any cell is 1.
Tables can use ALIGN=LEFT or ALIGN=RIGHT in which case they work just like images with text wrapping around them.
Name
Attendance
State
Hong Kong
75
S.A.Region
China
1254
Country
This crucial Civil War campaign (April-July 1863) captured the last Confederate fortrerss on the Mississippi River. divided the Confederacy in two, and gave the Union complete control of the river.
<TABLE BORDER=5 ALIGN=LEFT> <TR> <TH>Name</TH> <TH>Attendance</TH> <TH>State</TH> </TR>
<TR> <TD>Hong Kong</TD> <TD ALIGN=RIGHT>75</TD>
<TD ALIGN=CENTER>S.A.Region</TD> </TR> <TR> <TD>China</TD>
<TD ALIGN=RIGHT>1254</TD> <TD ALIGN=CENTER>Country</TD> </TR> </TABLE> This crucial Civil War campaign (April-July 1863) captured the last Confederate fortrerss on the Mississippi River. divided the Confederacy in two, and gave the Union complete control of the river. <BR CLEAR=LEFT>
Name
Attendance
State
Hong Kong
75
S.A.Region
China
1254
Country
This crucial Civil War campaign (April-July 1863) captured the last Confederate fortrerss on the Mississippi River. divided the Confederacy in two, and gave the Union complete control of the river.
<TABLE BORDER=5 ALIGN=RIGHT> <TR> <TH>Name</TH> <TH>Attendance</TH> <TH>State</TH> </TR>
<TR> <TD>Hong Kong</TD> <TD ALIGN=RIGHT>75</TD>
<TD ALIGN=CENTER>S.A.Region</TD> </TR> <TR> <TD>China</TD>
<TD ALIGN=RIGHT>1254</TD> <TD ALIGN=CENTER>Country</TD> </TR> </TABLE> This crucial Civil War campaign (April-July 1863) captured the last Confederate fortrerss on the Mississippi River. divided the Confederacy in two, and gave the Union complete control of the river. <BR CLEAR=RIGHT>
Netscape 3.0 above and Internet Exolorer 3.0 above support table cell background colors
bgcolor attribute can be used with TABLE, TH,TR,TD tags
This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river.
<CENTER> <TABLE WIDTH=85%> <TR> <TD ALIGN=CENTER BGCOLOR="SILVER"> Mississippi River Campaign </TD> </TR> <TR> <TD BGCOLOR="YELLOW">
This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river. </TD> </TR> </TABLE> </CENTER>
VALIGN tag controls whether text inside the table cell is aligned to TOP of cell, MIDDLE of cell (default), or BOTTOM of cell.
Mississippi River Campaign
This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river. This victory, along with that at Gettysburg, Pennsylvania, (July 1-3, 1863) tilted the war in favor of the North.
<TABLE BORDER=5> <TR> <TD>Mississippi River Campaign</TD> <TD>This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river. This victory, along with that at Gettysburg, Pennsylvania, (July 1-3, 1863) tilted the war in favor of the North.</TD> </TR> </TABLE>
Mississippi River Campaign
This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river. This victory, along with that at Gettysburg, Pennsylvania, (July 1-3, 1863) tilted the war in favor of the North.
<TABLE BORDER=5> <TR> <TD VALIGN=TOP>Mississippi River Campaign</TD> <TD>This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river. This victory, along with that at Gettysburg, Pennsylvania, (July 1-3, 1863) tilted the war in favor of the North.</TD> </TR> </TABLE>
Tables can contain hyperlinks, images, images that are hyperlinks, and different color fonts
<TITLE>International Programs (study abroad, student, scholars, campus seminars, faculty resource guide)</TITLE>Commas are ignored for keywords
Many search engines use the first 200-300 words for extracting a description and identifying keywords
Some search engines (for example, InfoSeek, Alta Vista) will let you specify these yourself using META tag attribute NAME
Remember: META tag must be in HEAD of HTML document
<META NAME="Description" CONTENT="The mission of the Office of International Programs at open source is to facilitate the development of educational opportunities, research and other services essential to open source ability to perform its land-grant university mission in the context of the global environment of the 21st century.">
Some search engines (for example, Excite) pay attention to comments as well as regular text. Use a comment to specify keywords withouts destroying the readability of the page.
Allows HTTPserver to run programs that generate dynamic documents, rather than being restricted to delivering only static documents
To enable CGI on a Web server, Web Master designates directory as CGI-bin directory
"bin" comes from old convention that directory containing executable program has "bin" (for BINary code) in its name -- /bin/usr/local/www/bin
Often programs named with suffix .cgi (like search.cgi)
When client requests document from this directory, rather than sending program to client, Web server runs program and sends output from program to client
Should use CGI programming whenever you need to get input from user or whenever information you want to send is dynamic
Any programming language that is supported on server machine can be used for CGI programs
Popular language are Java, Perl (Practical Extraction and Report Language), TCL
Imagemap program is usually part of cgi-bin directory
1. Create an image 2. Create an imagemap file
File maps regions in the image to URLs
Imagemap is collection of polygons, rectangles, and circles
Try to keep individual items in image spaced out far enough so user clearly knows what he or she is clicking on
Identifying pixel locations in images -- A way to identify pixel locations in an image used in a clickable image map
Every line in imagemap file:
method URL coord1 coord2 ... coordn
method is one of the following:
default -- default URL -- coordinates: none (if click is not in a polygon, rectangle, or circle)
circle -- coordinates: center edgepoint
poly -- coordinates: up to 100 vertices in any order
rect -- coordinates: upper-left lower-right
URL must be full (not relative) URL
Each method is evaluated in order placed in imagemap file
For overlapping areas (circle inside of a rectangle), place whichever one you want evaluated first before the other in the imagemap file
Limitations of server side image map implementation:
1. Server transaction required to determine where link is directed 2. No way for browser to show where portion of image map leads before user clicks on it
Client Side Image Map
USEMAP attribute of IMG element indicates client-side image map
Argument to USEMAP specifies which map to use with image
Format similar to HREF attribute on anchors
If argument to USEMAP starts with a "#", assumed to be in the same document as the IMG tag
Name specifies name of map so can be referenced by IMG element
Shape gives shape of area
Currently supported shapes include rectangles (RECT), polygons (POLY), circles (CIRCLE), and default (DEFAULT)
RECT
-- coordinates: upper-left lower-right
POLY
-- coordinates: up to 100 vertices in any order
CIRCLE
-- coordinates:center radius (NOTE! Differs from server-side image map which uses center and edgepoint)
DEFAULT usually unnecessary
-- any region of image not defined by AREA tag assumed to do nothing
If DEFAULT is used to map to some other URL, put it last -- otherwise, nothing after it works (NOTE! Differs from server-side image map which uses DEFAULT in more sane manner)
COORDS tag gives coordinates of shape
HREF tag specifies where click in that area should lead
By default aligns text with bottom of images.
