|
|
HTML--An IntroductionHTML consists of plain text. HTML files tell the browser what text to display, how to display it and what image files/sounds/videos etc. should be loaded into the Web Page. You should always test your HTML documents on a variety of browsers before uploading. This will allow you to get an idea of what your document will look like to users utilizing different browsers. This way you can manipulate your HTML, so your browser looks acceptable on all of the browsers you experimented with. You should try to conform to approved tags and avoid using proprietary Netscape/Internet Explorer tags unless the tags degrade gracefully on the incompatible browser. You also need to be careful when using text or graphics found on another Web page. It is extremely easy to copy another Web Page, make a few changes and call it your own. Remember, even though you can steal images and text easily, it doesn’t make it right, or legal for that matter. An HTML document contains the following minimum tags and text: <HTML> <HEAD> <TITLE>Hello Everyone!</TITLE> </HEAD> <BODY> </BODY> </HTML> There are two portions to an HTML document: the head and the body. These two portions are surrounded by opening and closing <HTML> tags. This lets the browser know that the document should be displayed as a Web page. These tags have been omitted safely. But remember, just because you can run a stop sign and not get smashed doesn’t make it right to do so. Remember that multimedia included in your web pages are referenced via HTML. This means that the images, sounds and movies you include in your pages are made up of separate files that are requested and loaded by the browser based upon your specific HTML tags. The files are not embedded into your Web page; they are just referenced from your page. You are limited in your ability to layout pages via HTML. HTML was designed to allow the maximum number of users access to the same information. The information is what matters to HTML’s creators, not the layout. As shown last week, users can create browser "style sheets" that allow them to choose their own font styles and font sizes, overriding the designer’s preferences. CONTENT BASED TEXT STYLES— These tags indicate to the browser that a specific portion of your HTML has a specific use or meaning. If you use the <CITE> tag, the browser will display the contained text so it will stand out. The browser decides how to show the text, not the programmer. Another CBTS commonly used is <EM></EM> You should use this tag if you want to emphasize text. Most browsers will italicize the text contained, but ultimately, it is an individual browser decision. In addition, if you want text to stand out, try the <STRONG></STRONG> tag. This tag is similar to bold, but is used to make text stand out in the way the browser finds appropriate. Not every browser will display text contained in the <STRONG> tag bold. According to the authors, you should always use CBTS styles because they specifically explain the reasons why the styles are being used. Labeling text for emphasis is more specific than just italicizing it. There are many reasons to italicize text, only one of which is for emphasis. You also italicize book titles, CD titles and movie titles. However, in these examples you are not italicizing to emphasize, but because it is grammatically correct to italicize a movie, CD or book title. Ultimately, choosing between CBTS and Physical Text Styles is your choice to make. PHYSICAL TEXT STYLE— These tags force the browser to display text in a certain format, regardless of whether or not it is appropriate. <I></I> is used by developers to force italics, <B></B> is used to force bold text, and <TT></TT> is used to force a monospaced typeface that you might achieve with CBTS’ <KBD>,<SAMP> or <CITE> As you can see, using <TT> gives no context as to why the text should be rendered in a plain typeface. LINE BREAKS— There are two ways to force a line break. The first way is by using the <BR> tag. This tag forces a line break. Another way is by using a horizontal line <HR> There are five attributes you can use with this tag.
Neither <BR> nor <HR> need a closing tag. <PRE></PRE> creates preformatted text. Spaces are included, but the text is rendered in a plain, monospaced font. ANATOMY OF A URL http—Tells the server you’re connecting to that you want a file sent via Hypertext Transfer Protocol. www—The name of the machine the web page is stored on yahoo—The name of the network the web page is stored on com—Represents the network’s type of organization. PAGE LENGTH You should try to minimize the size of each of your pages on your site. You could, conceivably, have one tremendously long page containing all of your site’s information. The upside would be that you would only have to maintain one single page instead of many different ones. However, many people would leave your site before they ever checked it out because the longer a page is, the longer it takes to load. In addition, if your page has a lot of images, download time is also lengthened. Your page should take no more than 40 seconds to load over a 28.8 modem. And that is a very liberal maximum. Not everyone will wait 40 seconds. Your first page should act as a site map. It should contain links to specific pages within your site. Those pages within should also link back to the first page so the surfer won’t get lost in your site. GIFS AND JPEGS These image files can be included in Web pages because browsers know how to decode them. A bitmap file can’t be included in a file because the browser, unless it's a newer version of IE, doesn’t know how to speak the bitmap’s "language." Except for the document structural tags like <HTML>, <HEAD>, and <BODY>, any HTML element we used to structure the content of a document is placed on a separate line and indented to show its nesting level within the document. Such elements include lists, forms, tables, and similar tags. Any HTML element used to control the appearance or style of text is inserted in the current line of text. This includes basic font style tags like bold, and document linkages. Avoid breaking a URL onto two lines. Add extra new line characters to allow a table or paragraph to stand out. Following these guidelines will allow you to change your HTML at a later date without having to scratch your head and say, "What the heck is this code supposed to do?" HTML DOCUMENTS All documents have a head and a body, consisting of text and tags. The tags are not visible to the end user. Besides what we’ve learned so far, tags contain references to images, and indicate the links to other web sites. HTML TAGS HTML tags consist of a tag name followed by an optional set of attributes. The attributes are always included in the opening tag. The <FONT> tag can be extended to include the size attribute and the face attribute. <FONT SIZE="7" FACE="Tahoma">Hello</FONT> You should have noticed that the closing tag did not indicate that there were any attributes. This is correct syntax. Tag and attribute names are not case sensitive. However some attribute values are, so proceed with caution. Attribute values appear after an equal sign. If there is more than one attribute, you do not put a comma between them. Also, it is a good habit to put all attribute values in quotes even though quotation marks aren’t necessary unless the attribute is more than one word. Tags can be nested inside of each other. <B>Hello <I>How are you?</I></B> However, make sure you close the nested tag first before you close the tag declared first. Think of a child going to school on the bus……picked up last, dropped off first. TAGS WITHOUT ENDS As stated earlier, certain tags do not need endings because they don’t act as containers. When you break a line using <BR>, the line is broken and <BR>’s job is finished. Other tags that don’t need endings include, <HR>,<IMG> and <OPTION>. <IMG> is used to place a reference to an image on the page, and <OPTION> is used to create a form option that can be selected in a list box. The author states that many HTML coders do not know that the </P> tag exists. This may be true, but a <P> tag signals the beginning of a paragraph, and the </P> tag, which can be safely left out, signals the end of the paragraph. Space between paragraphs can be fairly lengthy, so use <BR> if you don’t want too much excess white space. If you include redundant tags, the browser will likely ignore them. The reason for this is browsers are programmed to ignore tags they don’t understand. This will allow pages created in 4.0 to work in older browsers. The pages won’t be as aesthetically pleasing, but they won’t crash the browser either…..hopefully. CHARACTER ENTITIES Character entities are used to insert characters into documents that are normally used in HTML tags. If you used a greater than or less than sign in your text, the browser would become confused because it would think you were trying to open or close a tag. All character entities start with an ampersand, &. Then there is the entity followed by a semicolon. < will insert a less than symbol in your document and &rt; will insert a greater than symbol. Check the book’s appendix for every available entity. Keep in mind that not all browsers can display every character entity, so proceed with caution. COMMENTS Comments are a great way to help you remember the thought processes behind the code you created last week, last month or last year. Everything you code always makes crystal clear sense while you are working on it, but as time goes by, reading your own code can be like trying to read Egyptian Hieroglyphics. Using comments helps clear things up. Comments do not appear in browsers, just in the source code. Comments all start with <!- - and end with - -> There must be a space after the beginning of the comment tag and before the ending comment tag. Comments can span more than one line. THE DOCUMENT HEADER Most of the data entered into the header is never visible to the end user. The title appears in the title bar, but the rest of the information serves to help manage and define the document’s contents. You could find a number of META tags in the header that allow Web spiders to correctly index the site. In addition, you could use the STYLE tag. The HEAD tag contains no possible attributes and should always be closed with an end tag. The TITLE tag appears in the title bar, as stated earlier. If a user adds your page to his/her list of bookmarks, the document’s title is what appears in the bookmark list. Of course, the user can change the bookmark title if he/she chooses to do so. I have had to do this when the title of the document was cryptic and did not let me know what the page referred to. You should always make your titles as explicit as possible. Each page’s title should be able to stand on its own. Since Web spiders index your entire site, a search engine result could include a single page buried in your site. Make sure the user will be able to know what your page is about!! Good---Chapter Two Notes, Internet Navigation, Raritan Valley Community College—North Branch, NJ Bad—Chapter Two Notes The good example tells the user what chapter the notes are from, even though that probably won’t mean anything to people who aren’t registered in your course. However, if the surfer is interested in learning about navigating the Internet and would like a college-level reference, then the title will have told them that this page is for them. The bad example only lets users in the class know what they are getting. Remember a Web spider will index your page and your page will turn up in search engine results regardless of whether or not you registered your page. Make sure your title always stands on its own. Also, do not try to format the title by using HTML tags. Your formatting tags will be visible to the user, and the title’s format will still look exactly the same. THE BODY TAG The body tag can have many different attributes. The most commonly used ones are BACKGROUND, BGCOLOR, LINK, ALINK, VLINK. Examples: <BODY BACKGROUND="friend.gif" BGCOLOR="#FFFFFF" LINK="#00FF00" ALINK="00FF00" VLINK="#FF0000"> Background tells the browser what background image should be used, Bgcolor tells the browser what should be used for the background color if there is no background image specified or if the viewer is browsing with images off, link tells the browser what color an unvisited link should be, alink tells the browser what color a link should be while it is being clicked, and vlink tells the browser what color a link should be after the user has followed it. You don’t have to worry about placing explicit line breaks at the end of each line of text. A browser will automatically move text to the next line once it reaches the right margin. The browser may also hyphenate long words and justify fully to stretch out the entire width of the page. The <DIV> Tag The <DIV> tag is generally used to divide the document into sections larger than paragraphs. If you wanted to center two thirds of your document, you could surround the area with opening and closing DIV tags using the align="center" attribute. Keep in mind that the <DIV> tag can be nested and the outside tag will be overruled by the inner tag and any other special alignment tags contained within the <DIV> tag such as <CENTER>. DIV has a nowrap attribute. This tag, which only works in Internet Explorer, will move to a new line wherever there is a carriage return in the source code. All other browsers will just smash the text together. You can use the title attribute to give your division a name. In Internet Explorer, when the user's mouse passes over the division, the title will be displayed in the form of a tool tip. The <P> Tag The <P> tag signals the start of a paragraph. Using P tags will result in white space above and below the tag’s start and finish. You can safely omit ending <P> tags since a new <P> tag signals the beginning of a new paragraph. You can use the align attribute to center or right justify your paragraph’s text. align="left" is the default alignment. After a form, header, table and most other body content-related tags, a paragraph will revert to left alignment. Headings <H1> is the largest heading; <H6> is the smallest. H1 headings are generally used for document titles, and H2 headings are generally used for section titles. <H3> text is generally a little larger than regular text. Your first heading tag should be the same as your document title. If you forget to use end tags for the headings, there will be disastrous consequences. You can use the same alignment attributes with headings that you can with the <P> tag and the <DIV> tag. You should have only one <H1> heading in your document and it should be the first line of text in your page. Headings generally move from large to small during the course of a page. <H5> and <H6> are usually used to display legal information or explain how the viewer can contact the author. Text in these headings is usually rendered quite small. You should not surround your entire document with <H1></H1> to render your page extremely large. You violate the HTML standard when you include <DIV><P> or list tags inside a heading. Use the font tag to change your font sizes within a division or a paragraph. Also, you cannot use the heading tag to make text in the middle of a line large or small, since the end of a heading starts a new line. CONTENT BASED STYLE TAGS Your documents will be more consistent and will be better suited for automated searching if you use CBST. You may, someday, want to include a search engine in your page. If you do, CBST will make the engine’s job easier because you will have labeled your markup more specifically. <ABBR> and <ACRONYM> are not yet supported by the major browsers. Using <CITE> generally indicates that the text is a bibliographic citation, such as a book or magazine title. When citing a source, create a link to that source if it exists online. <CODE> will render the enclosed text in a mono-spaced format. This tag is generally used for displaying computer code such as a small portion of a computer program. <DFN> should be used when a definition is introduced for the first time. Do not use this tag every time the word is used, just the first. <EM> will emphasize the text in italicized format. <KBD> is used to emulate text that would appear on your computer screen. <SAMP> is used on the few occasions where you need to use a small bit of text that makes no sense on its own. A few letters strewn together to make a point could be marked up using the <SAMP> tag. <STRONG> will render the text in bold format. All of the above tags should have ending tags….no exceptions. These tags can be used in conjunction with each other…they can be nested. However, you may not always achieve your intended results. You will have to experiment to discover which tags rule the roost. For example, using <cite><strong>Moby Dick</strong></cite> will yield italicized bold text. You can use these tags within headings, but the heading tags’ specific format may override the CBSTs. PHYSICAL STYLE TAGS <B> is the equivalent of the <STRONG> tag, but gives no explanation why the tag is being used. <BIG> is used to make text one sized larger than the surrounding text’s font size. If the text is already size seven, the big tag is ignored. Since font size seven is usually larger than <H1>, text enclosed in heading one tags can still be enlarged by one size using the Big tag. Big tags can be nested within each other to render successive growth and shrinkage. Browsers that don’t support <BIG> often render text bold, so using <BIG> will still make the text stand out. <BLINK> is supported by Netscape. If you would like to drive your viewers away, this is the tag for you. As its name suggests, <BLINK> will cause the text enclosed within its opening and closing tags to blink. <I> is used to force italics. If the browser doesn’t have the italicized version of the text’s font available, it may highlight the text, use reverse video or underline the text. <SMALL> is the opposite of the <BIG> tag. It is used to make text one sized smaller than the surrounding text’s font size. If the text is already font size one, the small tag is ignored. Since font size one is usually smaller than <H6>, text enclosed in heading six tags can still be shrunk by one size using the Small tag. <S> or <STRIKE> is used to create strikethrough text. Using these tags gives the impression that you are crossing out, or proofreading a piece of text. This tag has been deprecated in HTML4.0 <SUB> is used to create text half the text’s height lower on the page. It is generally used in math equations, scientific notation and chemical formulas. <SUP> is used to create text half the text’s height higher on the page. It is generally used to denote exponents, and footnotes. <TT> will display text in a mono-spaced format. <U> will underline text. However, you should rarely, if ever, use this tag, because people assume all underlined text to be a link. This tag has been deprecated in HTML4.0 You can use physical tags in headings, but more than likely the heading format will override the physical style. If you want to combine styles, combine physical styles. The <FONT> tag is extremely powerful. It allows you to change the size, face and color of your font throughout your document. The size attribute should always be an integer between one and seven. The color attribute’s value can be a color or a hexadecimal number. Hexadecimal numbers are always identified with a number sign, followed by six digits or letters. The numbers zero through nine are used as are the letters A-F to identify number 10 through 16. The first two numbers in hexadecimal code identify the amount of red in a color, the second two identify the amount of green and the last two numbers identify the amount of blue in a color. Therefore #0000FF is the equivalent of blue because there is no red or green in the color and the maximum amount of blue. #FF0000 would yield red. If you use hexadecimal numbers, you should try to only use values of 00,33,66,99,CC,FF for your colors because you may wind up with dots in your picture from dithering if you choose alternate colors. This is because not all browsers support all of the colors and must compensate to display colors that are not "browser safe." Using the face attribute allows you to specify the font to be displayed. You can separate different face names with commas in case the user doesn’t have the font installed on their hard drive. You can force the browser to download the font using Dynamic HTML, but Netscape and IE use different ways of accomplishing this task. At this point you’ll be better off using the face attribute to accomplish your goal. Example <FONT FACE="Arial, Comic Sans MS, Helvetica"> You can use more than one attribute in a font tag and all font tags MUST be closed. <BR> When you include an image and align it to the left or right side of the page, text will normally flow to the right of the image. Therefore, using the BR tag, will cause a line break, but will not move the text below the picture. If you want to accomplish this, use the clear attribute. The clear attribute’s value can be left, right or all. You may want to use <BR CLEAR="all"> just to make sure the line break moves the text below the image. <PRE> Preformatted text can be used to create white space within a document. <PRE>
</PRE> will cause six blank lines to appear in your document. You can use Physical and Content based style tags in preformatted text, but the text will always be rendered in monospaced format. However, you should never use the <p> tag or any other tag that forces a line break. Since tags are allowed in preformatted text, you should use character entities to avoid problems with <,>, etc. <PRE> has an optional width value that you can use to determine the width of the text in pixels. The browser will extend the width beyond the screen if it has to. <CENTER> should only be used with small chunks of text that need to be centered. This tag always has an ending. Center has been deprecated in HTML 4.0. Use <Div Align = Center> to center individual lines. The Blockquote tag is used to set off long quotations. Using this tag will generally cause the enclosed text to be indented between the left and right margins. This tag has been abused by HTML hacks trying to cause indentation, similar to what one might achieve with tables. However, since not all browsers render blockquotes the same, the hacks can’t accurately determine how their "experiment" will turn out on every browser. Another reason why every page should contain an identifying address is because every page in your site might be indexed by a Web spider and could appear in a search engine. Therefore, people reaching your site for the first time may find themselves stuck in the middle. Let them know where they are and who you are no matter where they first touch base with you. Horizontal Rules If you want to create extra space above and below a horizontal rule, place it within opening and closing <P> tags. With a horizontal rule, using the noshade attribute makes no difference in Internet Explorer if you also use the color attribute. However, in Netscape, it will cause the 3-D bar to become gray since Netscape doesn't support the color attribute. When you specify the width of a horizontal rule, you are better off specifying by percentage. If you specify by pixel number, you are committing yourself to a certain sized line no matter what resolution the user is viewing your page in. The size attribute dictates how many pixels high the rule should be. A horizontal rule’s default alignment is center, but left and right can also be used. Horizontal rules should be used to separate content areas and should not be overdone. A great place for a horizontal rule is right below the first heading. You should have a standard header and footer to give your site a consistent look. The authors' example uses text, but today’s sites generally have a standard logo at the top and bottom of each page to preserve consistency. SPEEDING IMAGE DOWNLOADS Tips:
The <IMG> tag allows you to reference an image so it can be loaded into your browser. An image will be placed on the same line as nearby text if the image isn't so large as to require it be placed on a new line. In addition, text will continue after the image if room is available. Browsers reserve the right to modify the image size or complexity. For example, AOL's old browser would compress images even further, allowing them to load faster, but compromising image quality in the process. The image tag has several attributes: The src attribute is the image file's URL
HTML authors usually keep a separate directory for their images. The alt attribute allows you to add a text
substitute so users browsing on text browsers or with images off are able
to read a description of what is contained in your picture.
You can also use the left or right values for the align attribute. This will cause text to wrap around the right side of the image if the image is aligned to the left and vice versa. If you want to force text below the image use: <br clear="all"> If you align one small image to the left and one small image to the right, text will flow between the two images when the images are declared first in the HTML code. You can center an image using align="center", but only if the image is alone on the line. You can force a line break before inserting the image or insert the image inside opening and closing paragraph tags, to ensure the image is alone on a line. The border attribute is usually used to eliminate
the border that appears around an image that also acts as a link.
The height and width attributes are used to cause your page to load faster. If you indicate an image's height and width, the browser will reserve the proper space for the images and display the text while the image is loading. However, if you don't indicate the height and width of the image, the browser has to read the information from the image's data, increasing load time. EXAMPLE:<img src="fred.jpg" height="122" width="122"> You don't have to use the correct image height and width. The image can be shrunken or enlarged to fit in any area. However, a grossly enlarged image may look pixelated, and an image whose height/width ratio is changed may look distorted. One final thought......a large image turned into a thumbnail retains its original file size.........You should use a program like Paint Shop Pro to resize an image and save it as a smaller, faster loading file. The only problem with setting the height and width attributes is that the browser will reserve space for the image even if the user has image viewing disabled. This will cause ugly boxes to crowd your page. However, the box will be filled, somewhat, with the alt text you have specified using the alt attribute. The hspace and vspace attributes allow you
to put some space between your images and the rest of your page. The attribute
value represents the number of pixels you would like between your image
and the rest of your page.
You can include any legal combination of attributes. The order of the attributes is not important. EXAMPLE <img src="edna.jpg" alt="This is a picture of my friend Edna." height="122" width="221" hspace=15 vspace=15 align="absmiddle">will load edna.jpg 122 pixels high and 221 pixels wide with 15 empty pixels in each direction surrounding the image. The image will be aligned to the absolute middle of the line. Text browsers and people viewing with images off will see, "This is a picture of my friend Edna." DOCUMENT COLORS AND BACKGROUND IMAGES You can instruct the browser to load a background image and specify the background color by using attributes of the <BODY> tag. The bgcolor attribute allows you to select a color name or use a hexadecimal equivalent in order to choose the background color. Use the background attribute to include a background image. It does not matter if the image is a gif or a jpeg. It will be tiled across the browser window just like the wallpaper is on your desktop. Creating background images will be covered in a later class. However, you should try to keep your background image size small, and you should make sure always select a background color even if you specify a background image. This is because if the user browses with images off, the background color will be visible. In addition, the background color will be visible while the background image is downloading. The bottom line is the document must be readable at all times. Having similar background color/images helps accomplish this. In addition, IE has an attribute of the body tag available called <BGPROPERTIES>. Its only possible value is "fixed". If you are using a background image along with bgproperties, then the background image will act as a watermark and will remain fixed as the user scrolls down the page. Be careful that you choose a background image that is not too gawdy. It will make your Website look extremely cheesy. For great examples of what not to use as a background image, check out http://www.webpagesthatsuck.com You can specify the document text color using the text attribute of the body tag. Once again, the text color can be a hexadecimal number or an approved color name. You can override the text setting later in the document by using the font tag. Other attributes of the body tag include link, alink and vlink. The values of these attributes should be colors. The link attribute is the color of a link before it is visited, alink is the color of a link while it is being clicked and vlink is the color of a link after it has been visited. If you don't select any values, the defaults will be used. Example <BODY BACKGROUND="hello.gif" BGCOLOR="#00FF00" topmargin="15" leftmargin="15" LINK="black" ALINK="pink" VLINK="red" TEXT="yellow"> will display a green background color until the image "hello.gif" downloads. In Internet Explorer, the text will have a top and left margin of 15 pixels, links will be black, visited links will be red, active links will be pink, and the document's text will be rendered yellow. PROBLEMS WITH BACKGROUND IMAGES
Not every link needs to connect to a Web page. You can create links to sounds, videos and other images. If you create a link to an image, the user will see the image on a separate page after they click on the link. If you create a link to a sound or video, the browser may open a program that is part of the browser, a program on your hard drive, or a plug-in to allow the user to listen to the audio or view the video. It all depends on the type of file you are creating a link to. For example, if you have a link to a real audio file, the user will have to have the Real Audio plug-in in order to view the streaming/audio or video. However, if the object is a .wav file, most browsers have a sound player that will launch and play the wav file. Nevertheless, users can configure their own browsers to launch a separate application on the hard drive to play wav files. UNORDERED LISTS You should use an unordered list for lists of items that don't go in any particular order. The most common type of unordered list is a group of hyperlinks. An unordered list is surrounded by opening and closing <UL> tags. UL stands for unordered list. Each list item is preceded by an opening <LI> tag. LI stands for list item. There is no need for a closing </LI> tag because a new LI tag signifies the beginning of the next item in the list. You can include any HTML tags that you would have in the normal text body inside a list. You can even have another list inside the tag. This will form a nested list, very suitable for outlining. The browser typically displays an unordered list item with a solid bullet preceding it, slightly indented from the left margin. Example: My Three Best Friends
Browsers display unordered lists differently. There is a variety between how much space there is before the first item and how much space there is between list items. You can abuse unordered lists to achieve indentation by leaving off the <LI> tag before the item/s you want to indent. But, since browsers display lists differently, you may not achieve the specific effect you are looking for. The TYPE attribute of the <UL> tag allows you to specify what type of bullet symbol you would like each list item to have. There are three possible attributes:
You may also use the compact attribute to squeeze your unordered list into a smaller area, but some browsers don't support the compact attribute. ORDERED LISTS An ordered list is surrounded by opening and closing <OL> tags. OL stands for ordered list. You should use an ordered list when the sequence of the information you're presenting is important. Ordered lists are similar to unordered lists, except they are numbered instead of bulleted. Each successive item in an ordered list is incremented by one. Example: My Four Favorite Foods
The same rendition rules apply with ordered lists: There is a variety of difference between how much space there is before the first item and how much space there is between list items. You can use the START attribute of the <OL> tag to tell the browser where to start the numbering. Using <OL START=5>, the following ordered list would be rendered: My Favorite Foods Continued
As you can see, the list started at five and was incremented by one for each successive ordered list item. The TYPE attribute of the <OL> tag allows you to choose from the following values:
You can switch types during the list by using the type attribute of the <LI> tag, which is also used in ordered lists. Once again, <LI>'s ending tag is omitted because the next instance of the tag signifies a new list entry. The following HTML produces the frenetic list below it: <ol> <li>Eat</font></li> <li type="A">Sleep </font></li> <li type="i">Read</font></li> <li type="I">Watch TV</font></li> <li>Ponder the meaning of life</font></li> <li value="23"><font face="Arial">Watch metal rust</font></li> <li>Watch grass grow</font></li> </ol> On My Free Time I like to:
As you can see, changing the type does not change the fact that each successive link item is one larger than the one before it. In addition, once the value attribute of the <LI> tag is used to set the list value to 23, the next item is at number 24. Finally, you can see that there is no way to set the type back to Arabic without explicitly doing so since once the type is changed, it is not changed again until the type attribute of the <LI> tag is used again to do so. When you nest a list, the nested list items are indented further. If the nested lists are unordered, the bullets will generally be hollow for the nested lists. Don't worry about the directory and menu tags. DEFINITION LISTS A definition list is a great way to present a glossary or a list of terms that require definitions. Definition lists are comprised of three tags <DL>,<DT> and <DD>. The opening and closing <DL> tags surround the definition list. Definition terms are marked up with an opening <DT> tag. If you were defining the term "computer" inside of a definition list, the HTML would look something like this:
As you can see, the <DD> tag provides the definition. The definition term is generally flush to the left margin, and the defintion itself is generally indented starting on the next line. Text flowing onto subsequent lines will generally be indented the same amount as the text above it. Here is the above code rendered:
The DT and DD tags are only valid when used in a definition list. A DD tag can only be used directly following a DT tag and vice versa. Ending tags are not required for either since the browser assumes that a DD tag signifies the end of the DT, and a new DT signifies the end of a DD. An easy way to remember the order the tags operate under is by thinking of the old Ford LTD.
There can be any HTML inside a <DD> tag including other lists and multimedia elements. Some hackers abuse definition lists to force indentations. This is illegal and unintelligent considering that browsers may render definition lists differently. WHEN TO USE AN UNORDERED LIST
WHEN TO USE AN ORDERED LIST
WHEN TO USE A DEFINITION LIST
Forms Forms are the easiest way you can make your HTML truly interactive. They allow you to create Web pages that accept user input for perusing via E-mail, or for processing by the browser. Forms are accepted by the major browsers. A form can go anywhere inside of an HTML document. The contents of the form is surrounded by opening and closing <FORM></FORM> tags. Unlike the <LI> tag, you must force line breaks between form elements using <BR> and <P> When a form is submitted, the values of all of the named elements are submitted along with the corresponding names. In order for a form to be processed you must use the ACTION attribute of the FORM tag to let the browser know where the form elements' names and values should be sent. For our purposes, the value of the ACTION attribute will generally be an E-mail address since we don't have access to server-side processing at RVCC. In fact, a lot of Internet Service Providers don't allow you server-side processing because of security risks and the added strain it can put on the Web server. Example: As far as we're concerned the ENCTYPE attribute is extremely important to us because if we set the value of the ENCTYPE attribute to "text/plain", the submitted form will be easy to read and understand. Otherwise it will be encoded with + signs between spaces and & signs between each form element. This default form of encoding has the explicit ENCTYPE value "x-www-form-urlencoded". However, the "text/plain" value is not completely symbol free. Example Besides ACTION, METHOD is the other required attribute of the FORM tag. METHOD's value can either be "get" or "post". The post method encompasses two steps. First the browser contacts the Web server, then the browser sends the form. When the value is get, the browser appends the form data into the form action's URL and sends it to the server. This only requires a single step. Most beginners experimenting with server side applications should use the get value of the METHOD attribute. Post also has better security since the form's contents aren't appended to a URL. THE INPUT TAG As far as forms are concerned, the input tag is the by far the most versatile of all of the tags proprietary to form construction. You use the input tag to create text fields, multiple choice lists, clickable images and submission/reset buttons. There are many possible attributes for the INPUT tag, but the legal attributes are dependant upon the value of the TYPE attribute, which dictates the type of form field being created. The other required attribute besides TYPE is NAME. If you do not name an input tag, its contents won't be submitted upon submission. Names should be one word, using standard lettering. If you need your name to be more than one word, use the underscore character _ to combine two or more words into one single word. TEXT FIELDS IN FORMS There are three types of text fields that you can put into a form. One field is a standard text entry box, the second is a password field that is encoded with asterisks, and the last field names a file to be uploaded. The last option is only used with a server-side script. Hence, we should not be creating any forms with <INPUT TYPE="file" NAME="uploaded_file"> The most common and useful form field is the text field. To create a text field you specify text as the value of the attribute TYPE from within the INPUT tag. Example:
would result in the following displayed in the browser: As you can see, there is a lot more we need to learn about creating forms before they can be of any use to us. We can change the number of characters that can be entered into a text field by using the MAXLENGTH attribute of the INPUT tag. The value of MAXLENGTH should be the maximum number of characters the user can add into the text field. This is useful when you want to ensure the user doesn't input a 500 letter name or a 35 digit phone number. In addition, you can dictate the number of characters that can be visible at one time via the SIZE attribute of the INPUT tag. Example:
would result in the following displayed in the browser: As you can see, the number of visible characters that can be inputted has grown from the default, which varies from browser to browser, to the specified number, 45. In addition, 100 characters in all could be entered before the maximum was reached. After 45 characters, the text would begin to scroll to the left. Using traditional HTML, there is no way for you to dictate what the user types in. You can use JavaScript to do error correction on your document. Using JS, you could clear a text box that did not contain a valid phone number and send a nasty warning to the user that they shouldn't try any funny stuff. We are not going to worry about password fields or file fields since these are generally used with forms handled by a server. CHECKBOXES Checkboxes can be used to allow users to select multiple group items by checking off the items that pertain to them. Checkboxes are created by setting the value of the TEXT attribute to checkbox. Make sure you include name and value attributes/values to ensure that your field's data gets submitted and can be easily understood by you. Only checkboxes that are checked at submission time will have their names and values sent to you. You can "suggest" a value to the user by using the CHECKED attribute. This will cause the item to be checked after the user loads the page. Example:
would result in the following displayed in the browser: As you can see, Pizza is checked because the CHECKED attribute was selected in the input tag. In addition, just so you don't get confused, I deliberately misspelled the values of the foods to show you that what you type AFTER the tag appears in the browser. The values are what is sent when the form is submitted. They are not visible to the user unless he/she views the HTML source file. If the user checks more than one box, both names and values will be submitted. Perhaps you would like to know how much a user earns a year. Checkbox fields wouldn't be a great option because the user can select more than one. Radio buttons should be used when you only want the user to select a single field, such as when you would like to find out a visitor's annual income...if they're going to be honest and tell you the truth. I know that I always push myself up a bracket or two just to impress the site's Webmaster :) This type of input field received its name because in the old days, car radios used to have buttons. Once a listener pressed a button, he/she would go to a new station. Thus, you could only have one button activated at a time....see the connection? Radio buttons are created in a way that is extremely similar to the way checkboxes are created. The most obvious difference is that the INPUT TYPE is set to "radio". You can also use the checked attribute for ONE of your options. If you try to check more than one, only the first will be checked. In addition, all of your radio buttons MUST have the same name. It is a good idea for all of the members in a checkbox group to have the same name, but for checkboxes, it is optional. Example:
would result in the following displayed in the browser: ACTION BUTTONS Action buttons are generally used to submit a form to the value of the ACTION attribute or clear a form's contents. The simplest kind of submit button has the following HTML:
This will cause the following button to appear on your form: You can change what is written on the button without changing the button's function by using the VALUE attribute. For example, the code <INPUT TYPE=SUBMIT VALUE="CLICK HERE TO CRASH YOUR HARD DRIVE"> will merely place this text on the button. It will not crash the hard drive.....that is unless the computer panics and crashes just like someone drinking alcohol-free beer without realizing it becomes drunk :) If you provide a name attribute, the value of the Submit button, in this case what is written on the button, is submitted along with the rest of the form. The reset button is similar to the submit button as far as its attributes. The only difference is that once the user clicks on the reset button, all of the entered data is cleared. Now, you can be tricky and give the reset button a value of "submit" and the submit button a value of "reset", but that won't change what the buttons accomplish. All you will accomplish is gaining the satisfaction of knowing that you confused a great many of your visitors.....and they won't be coming back to visit your site ever again. You can use an image for a submission button by using "image" as the value of INPUT's TYPE attribute. If you choose to do this, you must include an SRC attribute, with its value being the image that is going to act as the submission button. TEXTAREA TAG The textarea tag allows you to create a text field that spans multiple lines. This way, users can expound at length on the merits of your site. You can include plain text between the opening and closing textarea tags. However, the user is going to have to erase what you set as the default text, before typing their own response. This might aggravate some visitors. Example:
will result in the following: As you can see, the user can scroll horizontally and vertically in the textarea. In addition, by using the COLS and ROWS attributes, you can change the number of visible columns and rows respectively. This is useful since most browsers' default settings for the textarea's visible area is rather small. Example:
will result in the following: Also, text will not flow to the right or left of a textarea. Therefore, you only need to break explicitly following your closing TEXTAREA tag if you want the text to begin on a new line. Users are not used to having to explicitly hit the enter key to move to a new line while typing. However, when filling in a textarea, users will have to punch the return key unless the page's designer includes the WRAP attribute in the TEXTAREA tag. There are three values for this attribute:
MULTIPLE CHOICE ELEMENTS If you want the user to be able to select more than one option, the best way to accomplish this is by using the SELECT tag. Using the select tag allows you to create a pull down menu of choices. Once again, a name should be given to the SELECT tag or its contents won't be submitted with the rest of the form. If the user selects more than one element, the differing elements are submitted with commas between them. You allow the user to select more than one option by including the stand alone MULTIPLE attribute inside the SELECT tag. Otherwise, only one option can be selected. The SIZE attribute determines how much of the pull down list the user can see without hitting the down arrow. The default, 1, will display a pop up list unless the MULTIPLE attribute is used. If you use the MULTIPLE attribute, this will cause the list to become one that scrolls. Only one item will be visible, but the list will be a scrolling one. By setting the size higher than one, more than one option will be visible in your scrolling list. EXAMPLE
will cause the following to appear: As you can see, only one option is visible. But if we add the MULTIPLE attribute, this happens: As you can see, only one option is still visible, but a scroll bar appears instead. But if we eliminate the MULTIPLE attribute and choose SIZE=3 instead, this happens: You should have noticed from the HTML above that OPTION tags are used to define the contents of the SELECT tag. You should also have noticed that closing OPTION tags are not necessary since a new tag implies that the previous OPTION has finished. If you want the form to submit the literal text related to the OPTION tag, no VALUE attribute is necessary. In other words, <OPTION>Rated G would return the value "Rated G" upon submission. You can change this by specifying a value as an attribute of the OPTION tag. If you want to "suggest" an option to the user, use the SELECTED attribute of the OPTION tag to have the selection highlighted beforehand. You can use SELECTED with more than one option if the MULTIPLE attribute of the SELECT tag has been specified. CREATING EFFECTIVE FORMS
Tables Tables have been used for layout purposes for quite some time, but only since HTML 3.2 have tables been legal. This is a blessing because tables allow you to manage document layout. We all know that HTML is all about content and not at all about presentation. However, the reality is that many surfers want to see pages that are pleasing to the eye. By controlling layout, you can control where your objects appear on the page. Tables make this happen. A table is a collection of numbers, words, images etc. arranged in rows and cells. All of the data is contained within opening and closing TABLE tags. Table headers, rows and individual cells each have their own corresponding tags. In HTML, each row is declared from top to bottom, with each cell in the row declared from left to right until the row is finished. Just about anything you would put inside the body of an HTML document you can put inside of a table cell. The browser treats each cell as an individual window. Hence, individual cells can have differing alignments, background colors, etc. However, HTML tables aren't as flexible as word processing tables. Since each cell is like an individual window, you cannot line up decimal points between cells unless you use a monospaced font. This is because different numbers are generally different widths. Standard HTML tables don't have running headers or footers. Therefore, if it takes more than one page to create your table, you won't see the header on the second page. Similarly, you won't see the table's footer until you reach the end of the table. Tables use five basic tags:
When you begin a table with the TABLE tag, the browser immediately moves to a new line. If you want to center a table, you should use the DIV tag with the align attribute set to center placed before the table. If you want text to flow around a table, use the left or right value of the ALIGN attribute. This will cause text to flow to the right or left of the table just like an image does when it's aligned the same way. You can use a specific background color for the table by using the BGCOLOR attribute of the TABLE tag. Set the value to a color name or hexadecimal value. If you don't mind proprietary tags, you can use the BACKGROUND attribute to tile an image behind your table in IE. However, make sure the background image is similar in color to the background color because users might be browsing in Netscape or with images off. As far as border colors are concerned, IE allows you to use three different border colors to achieve a three dimensional effect. Use the BORDERCOLORLIGHT, BORDERCOLORDARK, and BORDERCOLOR attributes of the TABLE tag to achieve three dimensional borders by making the light color 25 percent brighter than the border color and the dark color 25 percent darker than the border color. The standard BORDER attribute of the table tag is used to draw lines around the individual cells of the table. The default renders no lines whatsoever. You can specify an integer to dictate the number of pixels the border should encompass. IE uses proprietary tags to allow you to decide which areas of the cells should have borders around them. The FRAME attribute of the TABLE tag can have a value of above, below, lhs, rhs, hsides, and vsides. If the value is above, borders will be drawn on the top of each cell. If the value is below, then the border will be drawn at the bottom of the cell. Lhs and rhs stand for left hand side and right hand side, respectively while hsides (above and below combined) and vsides (lhs and rhs combined) stand for and horizontal sides and vertical sides Cellspacing The cellspacing attribute controls the amount of space between cells in a table. The default value for this attribute is two pixels and if you include a border in your table, cellspacing is expanded additionally by two pixels. You can set the cellspacing attribute to any positive integer. Using <TABLE CELLSPACING=0 BORDER=0> will result in the smallest possible width between cells. Cellpadding The cellpadding attribute controls the space between the cell’s walls and the data enclosed within. The default is one pixel. This attribute should also be set to a positive integer. Using <TABLE CELLPADDING=0> will result in no extra space allotted between cells. You can use the COLS attribute to let the browser know how many columns there are going to be in the table. However, if your table tags indicate that there is going to be a different number of columns than what you indicated in the COLS attribute’s value, the COLS attribute will be ignored. If the attribute is correct, the table will be formatted and displayed quicker than if the tag was not used, since the table isn’t displayed until the browser figures out how to display the ENTIRE table. HSPACE and VSPACE can be used to give your table some breathing room from the window edge and surrounding content. These attributes of the table tag work identically to the attributes of the <IMG> tag. IE has a proprietary attribute, VALIGN. It will set the vertical alignment for every cell in the table. In order to achieve the same results in Netscape, you must individually set the alignment for each row. The default vertical alignment value is center. You can also use top or bottom. The WIDTH attribute of the TABLE tag is extremely important. It allows you to set a specific width for the table. The width can be listed as a percentage of the available screen space or as a set number of pixels. A word of warning.... if the width you specify can not be accommodated, the browser will ignore your settings. In other words, if you don’t give the table enough room, the browser will MAKE room. In addition, you can set your table widths greater than 100 percent. Don’t worry about the HEIGHT attribute. It, unlike the WIDTH attribute, is of little use. TABLE ROWS Every row in a table is created with a <TR> tag. Within each TR tag, there lies <TD> tags that contain the table data or <TH> tags that contain table headings. Every row in a table has the same number of cells as the row with the greatest number of cells. The browser will create empty cells to make up for the ones not declared explicitly until each row’s cells number equally. You can use the ALIGN attribute of the <TR> tag to define the horizontal alignment of the cells in a specific row. The default alignment is left, but you can also use the values of center or right. In addition, if you are using IE, you can experiment with the justify value to make the cells in the row’s content stretch from side to side. Table rows can have individual background colors. This is accomplished by using the BGCOLOR attribute of the TR tag. The specified background color will override any background color set for the entire table. IE lovers can use the bordercolor, bordercolorlight and bordercolordark attributes to set these values for individual rows. However, the BACKGROUND attribute, which places a tiled image over an area, cannot be used for an entire row. This attribute only works when set in the entire table or in individual cells. According to the text, using the NOWRAP attribute of the <TR> tag will cause the text in a line to not break unless the designer explicitly places a <BR> or <P> tag. However, when I created very large text that took up three rows in a cell, I found the NOWRAP attribute to be useless. The HTML below yields the following in IE version 4. <table border="0">
You can experiment with the vertical alignment of table rows with the VALIGN attribute of the <TR> tag. Text is normally centered vertically within a cell, but you change the alignment to top, bottom or baseline. Baseline alignment lines the bottom of each letter, not including the descender, throughout the top line of each cell in the row. Larger letters in the row will be pushed closer to the top of the cell, while smaller letters will have more room. This attribute is proprietary for Netscape. <TH> and <TD> tags TH and TD tags go inside of table rows. Both tags are similar except that text contained within opening and closing TH tags are rendered bold and centered horizontally where table data is generally plain text and is left aligned. You can specify individual TD and TH attributes that override any others set for the row or the table. The full list of attributes are available on page 355 of your text. So, the order of attribute operations is as follows:
Anything you can put into an HTML document can be put into an individual table cell. Each cell, in essence, acts as a mini-window. You can even nest tables! If you don't have enough table cells in a row, blank cells will be appended to your row by your browser. However, these extra cells won't have any bordering. If you want the extra cells to be bordered, you must place the blank space character entity-- --in the number of cells needed to equal the cells in the row with the greatest number of cells. The width attribute is also very important when it comes to individual cells. You can specify a cell's width by pixels or by the percentage of space it should take up within the table. However, specifying a cell width will change the width of every cell in the same column. You should only dictate the width of the first cell in the column! If you try to specify the width of two cells in the same column, the larger width will be honored. Also, you can't make a width smaller than the browser needs to render the text. In this wrestling match, the browser wins. Don't worry about the height attribute. There are times when you want cell data to encompass more than one cell. When this is the case, you use the colspan and rowspan attributes of the TD or TH tags. Using the COLSPAN attribute set to an integer higher than one will cause the cell data to cover that number of cells in subsequent columns in the same row. Similarly, Using the ROWSPAN attribute set to an integer higher than one will cause the cell data to cover that number of cells in subsequent rows in the same column. <TABLE
BORDER=3>
As you can see, there are no border problems even though there are differing numbers of cells in each row, because in the first row, the header takes up two columns, as defined by the COLSPAN attribute's value of two. In addition, your COLSPAN and ROWSPAN values can't be extended beyond the existing table. In other words, if you define a COLSPAN value of eight to a table that has five cells in other rows, the browser will only render the COLSPAN to the end of the row. The same applies for ROWSPAN. The browser won't create new rows to span if the value of the attribute is greater than the number of exisiting rows. <TABLE
BORDER=3>
<TABLE BORDER=3>
You can also combine COLSPAN and ROWSPAN in the same cell. The CAPTION tag allows you to create a caption for your table. The caption tag can be placed anywhere in your table code as this does not effect the caption's placement. However, it is good practice to place the caption tag right after the <TABLE> tag. Unfortunately, aligning your caption is not simple because given the same attribute, IE and Netscape expect different values. Both Netscape and IE use the ALIGN attribute of the CAPTION tag to align the caption. The default alignment renders the caption centered at the top of the table. So, if this is sufficient, there is no need to use the ALIGN attribute. With Netscape, if you want to move the caption to the bottom of the table, use <CAPTION ALIGN="bottom"> However, IE uses the ALIGN attribute for the caption's horizontal alignment. Therefore, IE expects values of either left, center or right. In order to achieve vertical alignment, IE has created its own proprietary VALIGN attribute that can be set to bottom. I imagine you're better off leaving the caption at the top of the table! Here is code for a table that includes many of the tags and attributes we have just learned about: <table border="1"
cellpadding="5" cellspacing="0"
width="95%" | |||||||||||||||||||||||||