|
|||
|
Overview of
Common HTML Elements HTML is a very simple language that doesn’t take very long to learn. Unlike many computer-programming languages, it offers some leeway (such as placing quotations, capitalization, etc.). Its quite possible for you to learn HTML by analyzing HTML on other Web pages and seeing how various HTML elements behave according to the Web page’s layout. You can do this by clicking "View" on the file menu and going to "View Source" (or use the Ctrl+U shortcut) in Netscape. Many HTML elements are self-explanatory. To learn HTML, we strongly suggest that you analyze a few Web pages on the Net and practice building basic Web pages using the language. Furthermore, you may find typing an HTML element and attribute pair in your document, saving it, and updating the sample Web page helpful to visualize what each HTML element does. With this method, you’ll have a greater understanding of how various implementations relate to page layout and you’ll have the convenience of learning bits of HTML as you proceed with your learning process. Below you’ll find a listing of common HTML elements followed by a brief explanation. This is by no means a complete listing of all HTML elements available to you. Our overview is intended to familiarize you with the language. (If you’re interested in learning more elements and their appropriate attributes, visit http://www.htmlcompendium.org for a complete listing.) You will learn how to implement these elements in the preceding section, "Implementing HTML to your Web page."
E L E M E N T S F O R T H E H E A D S E C T I O N These elements are applied outside the introductory <HEAD> tag and before the </HEAD> closure tag. TITLE - Document title META - Meta information (Common attributes include NAME="x" (where "x" is usually either "ROBOTS, AUTHOR, KEYWORDS, DESCRIPTION, or GENERATOR"), HTTP-EQUIV="x" (where "x" is usually "expires" or another page control or information source), CONTENT="x" (where "x" is the definition of your "name" or "HTTP-EQUIV" attribute, for example a listing of keywords or a definition of when your page expires (define an expiration date in the form of content="july30/99+30", with "30" being the amount of days our page expires.) SCRIPT - Inline script (Common attributes include LANGUAGE="x", where "x" is the script language (such as "JavaScript".) STYLE - Style information (used for style sheets)
E L E M E N T S F O R T H E B O D Y S E C T I O N These elements are applied outside the introductory <BODY> tag and before the </BODY> closure tag. Common attributes for this tag include BACKGROUND="x" (where "x" is the background graphic’s filename), BGCOLOR="#xxxxxx", TEXT="#xxxxxx", LINK="#xxxxxx", VLINK="#xxxxxx", and ALINK="#xxxxxx" (where "xxxxxx" is the hexadecimal number for an HTML color value.) B L O C K - L E V E L E L E M E N T S H E A D I N G S H1 - Level 1 header (equal to HTML size 6, bold or 24 pt) H2 - Level 2 header (equal to HTML size 5, bold or 18 pt) H3 - Level 3 header (equal to HTML size 4, bold or 14 pt) H4 - Level 4 header (equal to HTML size 3, bold or 12 pt) H5 - Level 5 header (equal to HTML size 2, bold or 10 pt) H6 - Level 6 header (equal to HTML size 1, bold or 8 pt) Note: Remember that you can always use the <SMALL> and <BIG> tags interchangeably to either increase or decrease font size limitations. L I S T S UL - Unordered List OL - Ordered list DIR - Directory list MENU - Menu item list LI - List item (Inserted between any of these list items. Although its not entirely necessary, we recommend closing the "LI" tag in case an HTML validator picks it up as an error, which can waste time correcting them.) DL - Definition list DT - Definition term DD - Definition T E X T C O N T A I N E R S P - Paragraph (Common attributes include ALIGN="left", ALIGN="center", and ALIGN="right") PRE - Preformatted text BLOCKQUOTE - Large quotation ADDRESS - Address information O T H E R S DIV - Logical division (Common attributes include ALIGN="left", ALIGN="center", and ALIGN="right") FORM - Input form (See below for more information) HR - Horizontal rule (Common attributes include WIDTH="x" (where "x" is the numeric/percentage width of your line break). Sometimes the attribute HEIGHT="x" (where "x" is the numeric height of the line) is used to specify a height attribute. To make the line solid, type in the NOSHADE attribute. If you want to set alignment, type in align="x" (where "x" can be "top", "middle", or "bottom, depending on your alignment preference). By default, line breaks will appear with a 3D shade effect in most browsers.) TABLE - Tables (See below for more information) T E X T - L E V E L E L E M E N T S Note: If you want to create a double space (such as when you start a new sentence), you will need a special HTML code to create it, if desired. After hitting the space bar on your keyboard, enter to create this space ("nbsp" stands for "non-breaking space"). If you type this command more than once, you’ll find that it further indents your text or other page element. Other commands exist for allowing special characters to appear in Web pages, such as & (the ampersand), and © (the copyright symbol) to name a few examples. Most HTML editors have a "Symbols" dialog box available somewhere in the program’s menu bar so you don’t necessarily need to know all of the available HTML symbol equivalents to use them. L O G I C A L M A R K U P EM - Emphasized text STRONG - Strongly emphasized DFN - Definition of a term CODE - Code fragment CITE - Short citation P H Y S I C A L M A R K U P I - Italics B - Bold U - Underline STRIKE - Strikeout BIG - Larger text SMALL - Smaller text SUB - Subscript SUP - Superscript S P E C I A L M A R K U P A - Anchor (Common attributes include HREF=x" (where "x" is the URL of any form electronic content on the Web) and NAME="x", (where "x" is usually the name of a page bookmark, in the form "#anyname"). Be sure that when setting bookmarks, you use separate "A" tags for the "HREF" attribute that refers to the bookmark and the "NAME" attribute that defines the bookmark location. When referring to a bookmark separate from your local page, type the page’s full URL (or filename if stored in the same directory) and add your bookmark’s name in the same format above. IMG - Image (Common attributes include SRC="x" (where "x" is the image location), ALT="x" (where "x" is any description you want to give your image when a user moves their mouse pointer over it), WIDTH="x" (where "x" is the numeric width of your image), HEIGHT="x" (where "x" is the numeric height of the image), and BORDER="x" (where "x" is the numerical border width, if desired). If you want to wrap text around your image, you’ll need to set the image alignment properties with ALIGN="x" (where "x" can be "top", "middle", or "bottom, depending on your alignment preference). If you decide to have text wrap around your image, you might want to consider creating horizontal and vertical spacing to create a little "breathing space" between the elements. To do this, type in the attribute HSPACE="x" (with "x" being the numerical horizontal spacing property) and VSPACE="x" (with "x" being the numerical horizontal spacing property). FONT - Font modification (Common attributes include SIZE="x" (with "x" being the numeric font size value from 1-7, with 7 being the largest), COLOR="#xxxxxx" (where "xxxxxx" is the hexadecimal number for an HTML color value, as with light blue and its equivalent "#0080FF", to name an example), and FACE="x" (where "x" is the font type, such as "Times New Roman"). BR - Line break F O R M S The form tag is defined as <FORM> and common attributes associated with this tag are NAME="x" (where "x" is the form’s name for identification purposes when the results are forwarded to you), ACTION="x" (where "x" defines the form action, usually calling up a PERL or CGI script or instructing the form to send the form data to an e-mail address or multiple e-mail addresses), and METHOD="x" (where "x" can be either POST or GET, depending on how you want your form data saved). In some cases, more so with PERL and CGI scripts, Web developers use the <INPUT TYPE="hidden" NAME="namevalue" and VALUE="valuename"> to instruct how the form handles data, etc. Usually, instructions are included with commercial or 3rd party scripts that give you various options here.) INPUT - Input field, button, etc. (Common attributes include [for rectangular buttons] TYPE="submit", TYPE="reset" [for single text lines] TYPE="text", SIZE="x" (where "x" is the numeric width of your text line) [for checkboxes] TYPE="checkbox" [for radio buttons] TYPE="radio" [for all] VALUE="x" (where "x" can be "Reset", "Submit", or "ON", to name a few) NAME="anyname".) SELECT - Selection list (Common attributes include SIZE="x" (where "x" is the numeric width of your text line), NAME="x" (where "x" is your specific name for the selection criteria), and simply MULTIPLE to allow multiple selections.) There are tags that are placed inside the "SELECT" tags but not within the brackets. These are the "OPTION" tags. Refer below for some attributes. OPTION - Selection list option (Common attributes include SELECTED (if you want a pre-selected choice on the list), and VALUE="x", (with "x" being your specific value).) TEXTAREA - Input area (The attribute, WRAP="soft" disallows text from spanning across a single line. The "TEXTAREA" tag is intended for collecting larger amounts of data in a viewable area. Therefore, we recommend you use the WRAP="soft" attribute to allow automatic shifting of data to the following line. Without this attribute, it essentially performs the same function as the "INPUT" tag which only spans across a single line. T A B L E S The table tag is <TABLE> and some common attributes here are WIDTH="x" (where "x" is the numeric/percentage width of your table). Sometimes the attribute HEIGHT="x" (where "x" is the numeric height of the cell) is used to specify a height attribute. Another table attribute is BORDER="x" (where "x" is the numeric border width value of your table, with the number "1" being the smallest). If you don’t want a table border, enter the number "0" for "x." You can also set the table background to either an image or a color. We recommend using only background images for tables containing 1 row and 1 cell because the image will repeat on other cells (unless that’s the desired effect). To set a background image, type BACKGROUND="x" (where "x" is the background graphic’s filename). To set a background color, type in BGCOLOR="#xxxxxx", where "xxxxxx" is the hexadecimal number for an HTML color value. TR - Table row (Common attributes include VALIGN="x" (where "x" can be "top", "middle", or "bottom") and ALIGN="x" (where "x" can be "top", "middle", or "bottom, depending on your alignment preference). Some people like to just set the <TR> alignment and dimensions so they don’t have to go through and edit each individual <TD> cell in the same row. In some instances, individual <TD> cells need to be defined manually.) TD - Table cell (Common attributes include COLSPAN="x" (where "x" is the numeric span of the TD), VALIGN="x" (where "x" can be "top", "middle", or "bottom"), ALIGN="x" (where "x" can be "top", "middle", or "bottom), and WIDTH="x" (where "x" is the numeric/percentage width of your cell). Sometimes the attribute HEIGHT="x" (where "x" is the numeric height of the cell) is used to specify a height attribute. If the cell happens to be the header cell, some Web developers use <TH> instead of using <TD> for designating these cells.) M I S C E L L A N E O U S ! - Comments (ex. <!-- Your comment here -->) |
||
|
|||
