| |
Quiz1. What three HTML tags are used to describe the overall structure of a Web page, and what do each of them define?
2. Where dose the <TITLE> tag go , and what is it used for ?
3. How many different levels of headings does HTML support? What are their tags ?
4. Why is it a good idea to use two-sided paragraph tags, even though the closing tag </P> is optional?
5. What two list types have been deprecated? What can you use in place of the deprecate list types? Answers1. The <HTML> tag indicates the file is in the HTML language. The <HEAD> tag specifiles that the lines within the beginning and ending points of the tag are the prologue to the rest of the file . The <BODY> tag encloses the remainder of your HTML page (text,links, pictures, and so on).
2. The <TITLE> tag is used to indicate the title of a Web page in a browser's bookmarks, hotlist program, or other programs that catalog Web pages .This tag always goes inside the <HEAD> tags.
3. HTML supports six levels of headings. Their tags are <H1 ... /H1> through <H6 ... /H6>.
4. The closing </P> tag becomes important when aligning text to the left, right, or center of a page Q : You mentioned that some of the list tags and attributes have been deprecated in HTML 4.0 What should I use instead?
A : In a way , it depends on your audience. For example, if your Web pages reside on a corporate intranet where you know for sure that everyone is using an HTML 4.0 browser that supports Cascading Style Sheets (CSS),you can use CSS Properties and values in place of the deprecated tags. However, if your Web pages reside on the World Wide Web, where people using a wide variety of browsers and PC platforms are accessing your site, it may be to your advantage to continue using the deprecated tags to make your pages presentable in older browsers. You'll learn more about the pros and cons of each approach, and see some examples of how to replace deprecated tags, in Day 24, "Designing for the Real World" Workshop You've learned a lot in this chapter, and the following workshop will help you remember some of the most important points. I've anticipated some of the questions you might have in the first section of the workshop. Q&AQ : I've noticed in many Web pages that the page structure tags (<HTML>,<HEAD>,<BODY>) aren't used. Do l really need ot include them if pages work just fine without them?
A : You don't need to ,no. Most browsers will handle plain HTML without the page structure tags. But including the tags will allow your pages to be read by more general SGML tools and to take advantage of feature browsers.And , using these tags is the "correct" thing to do if you want your pages to confirm to true HTML format.
Q : My glossaries came out formatted really strangely ! The terms are indented farther in than the definitions!
A : Did you mix up the <DD> and <DT> tags? The <DT> tag is always used first (the definition term),and then the <DD> follows (the definition). I mix them up all the time There are too many D tags in glossary lists.
Q : I've seem HTML files that use <LI> outside a list structure, alone on the page, like this:
<L> And then the duck said , "put it on my bill"
A : Most browsers will at least accept this tag outside a list tag and will format it either as a simple paragraph or as a non-indented bulleted item. However, according to as a simple paragraph or as a non-indented bulleted item. However, according to the true HTML definition, using an <LI> outside a list tag is illegal, so "good" HTML pages shouldn't do this. And , because you're striving to write good HTML (right?), you shouldn't write your lists this way either. Always put your list items inside lists where they belong. HTML a text-only markup language used to describe hypertext pages on the World Wide Web , describes the structure of a page, not its appearance.
In this chapter, you learned what HTML is and how to write and preview simple HTML file you also learned about the HTML tags shown in Table | Tag | Attribute | Use | | <HTML>...</HTML> | | The entire HTML page | | <HEAD>...</HEAD> | | The head, or prologue,of the HTML page. | | <BODY>...</BODY> | | All the other content in the HTML page. | | <TITLE>...</TITLE> | | The title of the page. | | <H1>...</H1> | | First-level heading. | | <H2>...</H2> | | Second-level heading. | | <H3>...</H3> | | Third-level heading. | | <H4>...</H4> | | Fourth-level heading. | | <H5>...</H5> | | Fifth-level heading. | | <H6>...</H6> | | Sixth-level heading. | | | | | | | | |
<HTML>
<HEAD>
<TITLE>Camembert Incorporated</TITLE>
</HEAD>
<BODY>
<H1>Camembert Incorporated</H1>
<P>"Many's the long night I dreamed of cheese -- toasted , mostly . " -- Robert Louis Stevenson</P>
<H2>What We Do</H2>
<P>We are paid an swful lot of money by people who like cheese.
<H2>Our Favorite Cheeses</H2>
<UL>
<LI>Brie
<LI>Havarti
<LI>Camembert
<LI>Mozzarella
</UL>
</BODY>
</HTML>
Save the example ot an HTML file, open it in your browser, and see how it came out.
If you have access to another browser on your computer or, even better, one on a different computer, I highly recommend opening the same HTML file there so you can see the differences in appearance between browsers. Sometimes the differences can surprise you; lines that looked fine in one browser might look strange in another browser.
At this point , you know enough to get started creating simple HTML pages. You understand what HTML is, you 've been introduced to a handful of tags, and you 've even tried browsing an HTML file. You haven't created any links yet, but you'll get to that soon enough, in the next chapter.
This exercise shows you how to create an HTML file that uses the tags you've learned about up to this point.It will give you feel for what the tags look like when they're displayed onscreen and for the sorts of typical mistakes you're going to make. (Everyone makes them,and that's why using an HTML editor that does the typing for you is often helpful. The editor doesn't forget the closing tags, leave off the slash, or misspell the tag itself.)
So, create a simple example in that text editor of yours. Your example doesn't have to say much of anything; in fact, all it needs to include are the structure tags, a title, a couple of headings, and a paragraph or two, Here's an example You can put comments into HTML pages to describe the page itself or to provide some kind of indication of the status of the page . Some source code control programs can put page status into comments, for example.Text in Comments is ignored when the HTML file is parsed; comments don't ever show up on screen--- that's why they're comments. Comments look like the following:
<!-- This is a Comment -->
Each line of text should be individually commented. Not including other HTML tags within comments is usually a good idea. (Although this practice isn't strictly illegal,many browsers may get confused when they encounter HTML tags within comments and display them anyway.) As a good rule of thumb, don't include <, >, or -- inside an HTML comment.
Here are some examples:
<!-- Rewrite this section with less humor -->
<!-- Neil helped with this section -->
<!-- Go Tigers! --> Many browsers format nested ordered lists and nested unordered lists differently from their enclosing lists . For Example, they might use a symbol other than a bullet for a nested list, or number the inner list with letters (a,b,c ) instead of numbers . Don't assume that this will be the case, however, and refer back to "section 8, subsection b" in your text, because you cannot determine what the exact formatting will be in the final output.
The following input and output example shows a nested list and how it appears in Internet Explorer
<H1>Pappers</H1>
<UL>
<LI>Bell
<LI>Chile
<UL>
<LI>Serrano
<LI>Jalapeno
<LI>Habanero
<LI>Anaheim
</UL>
<LI>Szechuan
<LI>Cayenne
</UL> The following input and output example shows how a glossary list is formatted in Internet Explorer
<DL>
<DT>Basil<DD>Annual. Can grow four feet high; the scent of its itny white flowers is heavenly.
<DT>Oregano<DD>Parennial. Sends out underground runners and is difficult to get rid of once established.
<DT>Coriander<DD>Annual. Also called cilantro, coriander likes cooler weather of spring and fall.
</DL> What happens if you put a list inside another list? Nesting lists is fine as far as HTML is concerned: just put the entire list structure inside another list as one of its elements. The nested list just becomes another element of the first list, and it is indented from the rest of the list. Lists like this work especially well for menu-like entities in which you want to show hierarchy or as outlines.
Indenting nested lists in HTML code itself helps show their relationship to the final layout:
<OL>
<UL>
<LI>WWW
<LI>Organization
<LI>Beginning HTML
<UL>
<LI>What HTML is
<LI>How to Write HTML
<LI>Doc structure
<LI>Headings
<LI>Paragraphs
<LI>Comments
</UL>
<LI>Links
<LI>More HTML
</OL> Glossary lists are usually formatted in browsers with the terms and difinitions on separate lines, and the left margins of the definitions are indented.
You don't have to use glossary lists for terms and definitions, of course. You can use them anywhere that the same sort of list is needed. Here's an example:
<DL>
<DT>Macbeth<DD>I'll go no more. I am afraid to think of what I have done; look on't again I dare not.
<DT>Lady Macbeth<DD>Infirm of purpose! Give me the daggers. The sleeping and the dead are as but pictures. 'Tis the eye if childhood that fears a painted devil. If he do bleed, I'll gild the faces if the grooms withal, for it must seem their guilt. (Exit. Knocking within)
<DT>Macbeth<DD>Whence is that knocking? How is't wit me when every noise apalls me? What hands are here? Ha! They pluck out mine eyes! Will all Neptune's ocean wash this blood clean from my hand? No. This my hand will rather the multitudinous seas incarnadine, making the green one red. (Enter Lady Macbeth)
<DT>Lady Macbeth<DD>My hands are of your color, but I Shame to wear a heart so white.
</DL> Just as you can change the numbering scheme in the middle of an ordered list, you can change the type of bullet mid-stream in a list by using the TYPE attribute in the <LI> tag. Glossary lists are slightly different from other lists. Each list item in a glossary list has two parts:
- A term
- The term's definition
Each part of the glossary list has its own tag:<DT> for the term ("definition"). and <DD> for its definition ("definition definition"). <DT> and <DD> are both one-sided tags,and they usually occur in pairs, although most browsers can handle single terms of definitions.The entire glossary list is indicated by the tags </DL>("definition list").
In glossary lists, each list item has two parts: a term and a definition. Glossary lists are sometimes called definition lists.
The following is a glossary list example with a set of herbs and descriptions of how they grow:
<DL>
<DT>Basil<DD>Annual. Can grow four feet high; the scent of its tiny white flowers is heavenly
<DT>Oregano<DD>Perennial. Sends out underground runners and is difficult to get ird of once established.
<DT>Coriander<DD>Annual. Also called cilantro, coriander likes cooler weather of spring and fall.
</DL> If you use the TYPE attribute in the <UL> tag., some browsers can display other types of markers to delineate entries. According to the HTML 3.2 specification, the TYPE attribute can take three possible values: - "disc" A disc; this style is generally the default.
- "square" Obviously, a square instead of a disc.
- "circle" As compared with the disc, which most browsers render as a filled circle, this value should generate an unfilled circle on compliant browsers.
In the following input and output example, you see a comparison of these three types as rendered in Internet Explorer
<UL TYPE="disc">
<LI>DAT - Digital Audio Tapes
<LI>CD - Compact Discs
<LI>Cassettes
</UL>
<UL TYPE="circle">
<LI>DAT - Digital Audio Tapes
<LI>CD - Compact Discs
<LI>Cassettes
</UL> Unordered Lists In unordered lists, the elements can appear in any order. An unordered list look just like an ordered list in HTML except that the list is indicated by using <UL>..</UL>tags instead of <OL>. The elements of the list are separated by <LI>, just as with ordered lists.Browsers usually format unordered lists by inserting bullet or some other symbolic marker; Lynx, a text browser, inserts an asterrisk (*).
The following input and output example shows an unordered list. Figure 4.7 shows the results in Internet Explorer.
<P>Things I Like to do in the moring:</P>
<UL>
<LI>Drink a cup of coffee
<LI>Watch the Sunrise
<LI>Listen to the birds sing
<LI>Hear the wind rustling through the trees
<LI>Curse the construction noises for spoiling the peaceful mood
</UL> As with ordered lists, unordered lists can be customized with HTML 3.2 attributes (these are also deprecated in HTML 4.0) By default, most browsers (Netscape and Internet Explorer included) use bullets to delineate entries on unordered lists. Text browsers such as Lynx generally opt for an asterisk. For example, you can list the last six months o the year,and start its numbering with the Roman numeral VII as follows . the results appear in Figure 4.6.
<P>the Last Six months of the Year:</P>
<OL Type="I" START=7>
<LI>July
<LI>August
<LI>September
<LI>October
<LI>November
<LI>December
</OL>
Like with the TYPE attribute, you can change the value of an entry's number at any point in a list. You do so by using the VALUE attribute in the <LI> tag. Assigning a VALUE in an <LI> tag restarts numbering in the list starting with the affected entry.
For instance, what if you wanted the last three items in a list of ingredients to be 10,11 and 12 instead of 6,7 and 8. You can reset the numbering at Eggs using the Value attribute:
<P>Cheesecake ingredients: </P>
<OL Type="I">
<LI>Quark Cheese
<LI>Honey
<LI>Cocoa
<LI>Vanilla Extract
<LI>Flour
<LI Value=10>Eggs
<LI>Walnuts
<LI>Margerine
</OL> As an example, consider the followinglist:
<P>The Days of the week in french:</P>
<OL>
<LI>Lundi
<LI>Mardi
<LI>Mercredi
<LI>Jeudi
<LI>Vendredi
<LI>Samedi
<LI>Dimanche
</OL>
If you were to add TYPE="I" to the <OL> tag, as follows, it would appear inInternet Explorer as shown in Figure 4.5
<P>The Days of the Week in French:</P>
<OL Type="I">
<LI>Lundi
<LI>Mardi
<LI>Mercredi
<LI>Jeudi
<LI>Vendredi
<LI>Samedi
<LI>Dimanche
</OL>
The TYPE attribute can also be applied to the<LI> tag, effectively changing the numbering type in the middle of thelist. When the TYPE attribute is used in the<LI> tag, it affects the item in question and all entries following it in thelist.
Using another attribute, START ,you can specify what number or letter to start yourlist. The default starting point is 1,of course. You can change this number by using START. For example, <OL START=4> would start thelist at number 4, whereas <OL TYPE="a" START=3> would start the numbering with c and move thorugh the alphabet from there. Attributes are extra parts of HTML tags that contain options or orther information about the tag itself.
You can customize ordered lists in two main ways: how they are numbered and what number with which the list starts. HTML 3.2 provides the TYPE attribute, which can take one of five values to define what type of numbering to use on the list:
- "1" Specifies that standard Arabic numerals should be used to number the list (that is, 1, 2, 3, 4, and so on)
- "a" Specifies that lowercase letters should be used to number the list (that is, a, b, c, d, and so on)
- "A" Specifies that uppercase letters should be used to number the list (that is, A, B, C, D, and so on)
- "i" Specifies that lowercase Roman numerals should be used to number the list (that is,i,ii,iii,iv, and so on)
- "I" Specifies that uppercase Roman numerals should be used to number the list (that is,I,II,III,IV, and so on)
Types of numbering can be specified in the <OL> tag as follows : <OL TYPE="a">. By default, Type="1" is assumed.
The nice thing about Web browsers is that they generally ignore attributes they don't understand. For example, if a browser dosn't support the TYPE attribute of the <OL> tag, it will simply ignore it when it is encountered. <P>Installing Your New Operating system</P>
<OL>
<LI>Insert the CD-ROM into your CD-ROM drive.
<LI>Choose RUN.
<LI>Enter the drive letter of your CD-ROM (example: D:),followed by SETUP.EXE.
<LI>Follow the prompts in the setup program.
<LI>Reboot your computer after all files are installed.
<LI>Crosss your fingers.
</OL>
Run in browser and View Output. HTML 3.2 provided several attributes for ordered lists. They were used to customize how the browser renders the list. These attributes allowed you to control several features of ordered lists including what numbering scheme to use and from which number to start counting (if you don't want to start at 1). In HTML 4.0, the attributes mentioned in this section are deprecated in favor of using style sheet properties and values that accomplish the same task. However, to support HTML 3.2 browsers, you may have a need to use these attributes on occasion. When the browser displays an ordered list, it numbers (and often indents ) each of the elements sequentially. You do not have to do the numbering yourself, and , if you add or delete items, the browser will renumber them the next time the page is loaded.
Ordered lists are lists in which each item is numbered.
Use numbered lists only when you want to indicate that the elements are ordered---that is, that they must appear or occur in that specific order. Ordered lists are good for steps to follow or instructions to the readers. If you just want to indicate that something has some number of elements that can appear in any order, use an unordered list instead.
So,for example, the following is an ordered list of steps that tell you how to install a new operating system, with each list item a step in the set of procedures. The following input and output examples show this list. You can see how it appears in Internet Explorer Although the tags and the list items can appear in any arrangement in your HTML code, I prefer ot arrange the HTML for producing lists so that the list tags are on their own lines, and each new item starts on a new line. This way, you can easily pick out the whole list as well as the individual elements. In other words, I find the following arrangement
<P>Dante's Divine Comedy consists of three books : </P>
<UL>
<LI>The Inferno
<LI>The Purgatorio
<LI>The Paradiso
</UL>
easier to read than
<P>Dante's Divine Comedy consists of three books : </P>
<UL><LI>The Inferno<LI>The Purgatorio<LI>The Paradiso</UL>
even though both result in the same output in the browser. Numbered lists are surrounded by the <OL>...</OL> tags (OL stands for Ordered List), are each item within the list begins with the <LI> (List Item) tag.
The <LI> tag is one-sided; you do not have to specify the closing tag. The existence of The next <LI> (or the closing </OL>tag) indicates the end of that item in the list. Browsers generally continue to support deprecated elements for reasons of backward compatibiliity. There is still a need to learn about and use the deprecated elements if you expect that a portion of your audience will be using HTML 3.2 - level browsers, like Netscape Navigator 3 and earlier, or Microsoft Internet Explorer of earlier. However, because deprecated elements may become obsolete in future versions of HTML, you should try to use the newer methods when possible.
The majority of tags and attributes that are deprecated in HTML 4.0 are done so in favor of using Cascading Style Sheet (CSS) properties and values, which you will learn more about in Day 10,"Style Sheets." List TagsAll the list tags have common elements:
- The entire list is surrounded by the appropriate opening and closing tag for the kind of list (for example, <UL>and</UL>,or <OL> and </OL>).
- Eash list item within the list has its own tag: <DT> and <DD> for glossary lists and <LI> for all the order lists.
Some people like to use extra<P> tags between paragraphs to spread out the text on the page. Once again, here's the cardinal reminder: Design for content, not for appearance. Someone with a text-based browser or a small screen is not going ot care much about the extra space you so carefully put in, and some browsers may even collapse multiple <P> tags into one, erasing all your careful formatting.
For Example input this tag in Web Design
<P>The dragon fell to the ground, releasing an anguished cry and seething in pain. The thrust of Enigern's sword proved fatal as the dragon breathed its last breath. Now Enigern was free to release Lady Aelfleada from her imprisonment in the dragon's lair.</P>
Lists, Lists, and More Lists In addition to headings and paragraphs, probably the most common HTML element you'll use is the list . After this section, you 'll not only know how to create a list in HTML, but also how to create several different kinds of lists----a
- Numbered, or ordered lists, typically labeled with numbers
- Bulleted, or unordered lists, typically labeled with bullets or some other symbol
- Glossary lists, in which each item in the list has a term and a definition for that term, arranged so that the term is somehow highlighted or drawn out from the text
Most early browsers assumed that paragraphs would be formatted this way. When they came across a <P> tag, these older browsers started a new line and added some extra vertical space between the line that just ended and the next one.
In the HTML 4.0 specification (as with HTML 3.2 and 2.0), and as supported by most current browsers, the paragraph tag is revised. In these versions of HTML, the paragraph tags are two-sided (<P>...</P>), but <P> indicates the beginning of the paragraph. Also, the closing tag (</P>) is optional. So the Enigern story would look like this in the current versions of HTML:
<P>Slowly and deliberately, Enigern approached the mighty dragon.A rustle in the trees of the nearby forest distracted his attention for a brief moment, a near fatal mistake for the brave knight.</P>blast of fiery breath. Enigern fell to the ground as the dragon hovered over him. He quickly drew his sword and thrust it into the dragon's chest.</P>
Getting into the habit of using<P> at the start of a paragraph is a good idea; it will become important when you learn how to align text left, right, or centered. Older browsers will accept this form of paragraphs just fine. Whether you use the </P> tag of not is up to you; it might help you remember where a paragraph ends, or it might seem unnecessary. I'll use the closing </P> throughout this book.
Figure 4.2 shows various headings as they appear in Internet Explorer.
<H1>Mythology Through the Ages</H1>
<H2>Common Mythological Themes</H2>
<H2>Earliest Known Myths</H2>
<H2>Origins of Mythology</H2>
<H3>Mesopotamian Mythology</H3>
<H3>Egyptian Mythology</H3>
<H4>The Story of Isis and Osiris</H4>
<H4>Hours and Set : the Battle of Good vs. Evil</H4>
<H4>The Twelve Hours of the Underworld</H4>
<H4>The River Styx</H4>
<H2>History in Myth</H2> Paragraphs
Now that you have a Web page title and several headings, you can add some ordinary paragraph
The first version of HTML specified the <P> tag as a one-sided tag. There was no corresponding </P> ,and the <P> tag was used to indicate the end of a paragraph (a paragraph break),not the beginning. So paragraphs in the first version of HTML looked like this:
Slowly and deliberately, Enigern approached the mighty dragon. A rustle in the trees of the nearby forest distracted his attention for a brief moment, a near fatal mistake for the brave knight.</P> The dragon lunged at him, searing Enigern's armor with a rapid blast of fiery breath. Enigern fell to the ground as the dragon hovered over him. He quickly drew his sword and thrust it into the dragon's chest.</P>
A common practice is to use a first-level heading at the top of your Web Design page to either duplicate the title (which is usually displayed elsewhere), or ot provide a shorter or less contextual form of the title. For example, if you have a Web page that shows several examples of folding bed sheets, part of a long presentation on how to fold bed sheets,the title might look something like this:
<TITLE>How to Fold Sheets : Some Examples </TITLE>
The topmost heading, however, might just be as follows:
<H1>Examples</H1>
Don't use headings to display text in boldface tyoe or to make certain parts of your Web page stand out more.Although the result may look cool on your browser, you don't know what it'll look like when other people use their browsers to read your Web page. Other browsers may number headings or format them in a manner that you don't expect. Also,tools to create searchable indexes of Web pages may extract your headings to indicate the important parts of a Web Design page. By using headings for something other than an actual heading. you may be foiling those search programs and creating strange results.
|
 |
www.AllthaiideA.Com
E-mail : allthaiidea@gmail.com
Mobile : 080-593-9988
|
 |
|
Web Design
