Amazing Universal Web Page Requirements General Tag Form
advertisement
Dave’s Amazing HTML Cheat Sheet By David Schneider Universal Web Page Requirements Note:By default web browsers will look for a page called “index.html” in the specified directory. <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> <TAG ATTRIBUTE=”VALUE”> … </TAG> <TAG> <NESTED TAG> … </TAG> General Tag Form Standard Text Formatting <BR> <P> <B> <I> <TT> <HR> <PRE> <FONT SIZE=+n> <CENTER> <!-- -- > Line Break* Paragraph Break* Bold Italics Typewriter Font Horizontal Line across the width of the screen.* Pre-formatted Text Increase or decrease the font size by a factor of “n” The default font size is “3” and font sizes can range between 1 and 7 Center the text and objects within the tags Comment out the what lies between.* *Note: These do not require end tags Bulleted and Definition Lists Bulleted List <UL> <LI> </UL> Start Bulleted List First Bulleted Item in the List* Must End Bulleted List Definition List <DL> <DT> <DD> </DL> Start Definition List Term to be Defined* Definition (indented)* End Definition List Note: To create spaces in-between the lines of lists use the <P> tag. * Nested Tags Inserting Images <IMG SRC=”image_folder_name/image_name.ext”> Note: There is no end tag required! Available Attributes: ALIGN BORDER ALT Align the position of the images in the page. All other HTML objects will “wrap” around the image. Available attribute values are LEFT, CENTER, RIGHT, and JUSTIFY When using images as links a border is put around the image. To remove the border set BORDER=”0” Some old web browsers do not support images or may have a hard time loading larger images. Instead of a broken link, ALT tells the browser to display an alternate text message in its place. Ex. ALT=”alternate text” Making Links For a link to a page in the same directory as the current page: <A HREF=”page_name.html”> Anchor Text and/or Image </A> For a link to a page in lower directory: <A HREF=”directory_name/page_name.html”> Anchor Text and/or Image </A> For a link to a page in a higher directory: <A HREF=”../directory_name/page_name.html”> Anchor Text and/or Image </A> For a link to a page elsewhere in the World Wide Web: <A HREF=”http://www.webAddress.com”> Anchor Text and/or Image </A> To create a Jump Link <A HREF=”#Target_Name> Anchor Text and/or Image </A> <A NAME=”Target_Name”> Anchor Text and/or Image </A> The Link to the Target The Name and Location of the Target Note: Target names are CaSe sEnsITiVe For a link to a jump link target on another web page: <A HREF=”http://www.webAddress.com#Target_Name> Anchor Text and/or Image </A> A link to your e-mail: <A HREF="MAILTO:someone@someplace.ext"> Anchor Text and/or Image </A> A link allowing users to download a file from your current directory: <A HREF="file_name.ext"> Anchor Text and/or Image </A> <BODY> Attributes BACKGROUND BGCOLOR TEXT LINK ALINK VLINK Allows you to set the background of the page to an image that will be tiled across the page. Allows you to set the background of the page to a standard Hexadecimal (Hex) color value. Use the Hex color to set the color of ALL the Text on the page Use the Hex color to set the color of ALL the Unvisited Links on the page Use the Hex color to set the color of ALL the Active Links on the page Use the Hex color to set the color of ALL the Visited Links on the page Hexidecimal Color Chart Color Black Blue Brown Cream Cyan Dark Blue Dark Grey Dark Green Dark Purple Dark Red Dark Yellow Grass Green Green Light Gray Medium Grey Purple Red Sky Blue White Yellow Hexadecimal Color Value (#) 00 00 00 00 00 FF 99 66 33 FF FB F0 00 FF FF 00 00 80 80 80 80 00 80 00 80 00 80 80 00 00 80 80 00 C0 DC C0 00 FF 00 C0 C0 C0 A0 A0 A4 FF 00 FF FF 00 00 A6 CA F0 FF FF FF FF FF 00 <HEAD> Tags <TITLE> <META> Give a title to the page to be displayed at the top of the browser. Provides additional information to the “web-surfer” about your page Some <META> Attributes are: HTTP-EQUIV Used to declare what kind of extra information is being presented and will be included in a web browser response header You MUST use valid HTTP header names. Examples are: expires Let the user know how long the page will be up keywords Give the user an hint as to the pages content refresh How often should the user refresh the page CONTENT The extra information that is being presented NAME Declare the kind of extra information without the information being included in a response header <TABLE> Tags <TABLE> <TR> <TH> <TD> Create a Table Start a Row* Start the Header cell of a column* ** Start a Cell of a column* * Nested Tag, i.e. no end tag is required **Some browsers will interpret the first <TD> cell as a header cell if there is not a <TH> cell defined first. <TABLE> Attributes ALIGN WIDTH BORDER CELLSPACING CELLPADDING See “Inserting Images” The horizontal percentage of the screen that the table will take up Ex. WIDTH=75% ”ALL” makes the table’s border visible. The default is no border or “0”. Set the spacing between the cells in pixels Set the spacing within the data cells in pixels <TH> & <TD> Attributes ALIGN VALIGN COLSPAN ROWSPAN BGCOLOR See “Inserting Images” Align the Vertical position of a cell’s content. It’s values are TOP, BOTTOM and CENTER. Extend the Length of a single cell to cover more than one cell unit Extend the Height of a single cell to cover more than one cell unit Set the background color of a cell using the standard Hex color value. Setting Up a Frames Layout, <FRAMESET> and its Attributes <FRAMESET> Like <TABLE>, All of the arranging of frames occurs between this tag You do not need the <BODY> tag in the page that layouts the frames. Arrange the Frames’ Layout by properly nesting groups of <FRAMESET> with these attributes: COLS Set up the percentage of the screen that the columns will cover* ROWS Set up the percentage of the screen that the rows will cover* <FRAMESET COLS="25%,75%"> <FRAMESET ROWS="100%"> <FRAME SRC="page1.html"> </FRAMESET> <FRAMESET ROWS="25%,50%,25%"> <FRAME SRC="page2.html"> <FRAME SRC="page3.html"> <FRAME SRC="page4.html"> </FRAMESET> </FRAMESET> *Note: The percentages must add up to be 100% Setting Up Individual Frames, <FRAME> and its Attributes <FRAME> SRC BORDER FRAMEBORDER MARGINHEIGHT MARGINWIDTH One frame tag is required for every frame declared in <FRAMESET> There is no end tag for <FRAME>. It is a nested tag. Give a reference to the webpage that will be displayed in this frame. Displays a visible gray border around the frame. The default is TRUE. To make border invisible or sometimes white depending on the browser set it to FALSE or “0”. Works the same as BORDER. Some browsers recognize one and not the other so it is best to include both. The one not used will be ignored. Adjusts the space between the frame’s content and the top and bottom edge of the frame. The default unit is in pixels. Like MARGINHEIGHT, but effects the frame’s sides. Note: Many browsers will not allow you to set these attributes to zero and will interpret it as a command to use the browser’s default specifications whatever those may be. FRAMESPACING Adjusts the space between frames or if appropriate the thickness of the border. The default unit is pixels. Most browsers will accept a “0” value. SCROLLING Specify if a scroll bar will be displayed on the right side of the frame. The available values for this attribute are: AUTO This is the default. The browser will only display a scroll bar when it is needed. YES The scroll bar will Always be visible. NO The scroll bar will Never be visible even if it is needed. NAME Very Important!!! Assign a name to the frame for future link referencing. Links Within Frames, a.k.a. Targeting -- IMPORTANT!!! An additional Attribute for making links is: TARGET Specifies by NAME where the webpage that is being referenced by the link will be displayed. Ex. <A HREF=”page_name.html” TARGET=”target_name”> When clicked upon this link will display the page “page_name.html” in the frame called “target_name”. Note: a link that targets the frame “target_name” does not have to be in that frame. There are also four generalized TARGET values that can be used instead of targeting a name. _BLANK Load the link into a New, unnamed window _SELF Load the link over yourself -- often the default _PARENT Load this link over yourself and reset the window completely _TOP Load the link at the top level <BASE> Using this tag with the attribute TARGET sets ALL the links in the page to use that target as their default target. Dealing with Browsers that Cannot Support Frames, <NOFRAME> <NOFRAME> Ex. <HTML> <HEAD> </HEAD> <FRAMESET etc.> <FRAME etc.> </FRAMESET> <NOFRAME> <HEAD> </HEAD> <BODY> … </BODY> </HTML> Defines an area of the webpage that will only be displayed if the browser cannot use frames. It acts as a partition between the frame and non-frame versions. Note: There is no end tag needed. Image Maps Using “Spyglass Extensions” Declaring an Image Map reference is similar to calling a Jump Link: <IMG SRC="image_name.ext" USEMAP="#the_map’s_name"> <MAP NAME="the_map’s name"> … </MAP> Place the Image Name and Start the map Define the map Close the definition Defining the Image Map, <AREA> and its Attributes <AREA> Declares a “hot spot” area of the image. This is a nested tag. HREF Set the link that the “hot spot” will reference. SHAPE Defines the Shape of the “hot spot” There are four values for the SHAPE attribute: CIRCLE A circle “hot spot” RECT A rectangular “hot spot” POLYGON A “hot spot” of 3 or more sides DEFAULT If the user clicks anywhere on the image that is not a “hot spot” COORDS Set the coordinates for the hot spot. The origin of an image map starts in the upper left corner. X increases to the right. Y increases going down. The values COORDS takes depend on the value SHAPE has: For CIRCLE “x_center, y_center, radius” For RECT* “x_corner1, y_corner1, x_corner2, y_corner2” For POLY “x_point1, y_point1, x_point2, y_point2, …” *Note: the two corners specified have to be opposite corners Special Characters & > < “ ‘ “space” ( ) @ &amp &gt &lt &quot &#039 &nbsp &#040 &#041 &copy &#064 Note: End the ACS II decimal code equivalents with semi-colon # + * / % = &#035 &#043 &#045 &plusmn &times &#042 &divide &#047 &#037 &#061 $ ¢ £ ¥ § | _ ~ ; &#036 &cent &pound &yen &sect &#124 &deg &macr &shy &#160
