Lesson 21 - Review
Basic Tags
You have been introduced to countless details on how to create web pages. Now, step back and take the chance to see the big picture.
First, review all the basic tags that every web page should have:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
..........
</html> |
This is the doctype statement. There are several forms of doctypes out there. Just copy and paste this code.
The <html> tag tells the browser that the document is this type of code and therefore, readable by browsers.
The closing </html> tag should be the last tag in your document. |
Next comes the head of the document.
This part can contain only very specific elements.
<head>
<title>Acme Seed Company</title>
<meta name="keywords" content="magic seeds">
<meta name="description" content="These seeds will revolutionize your life, add spunk to your step, and I.Q. points to your brainpower.">
<link href="first.css" rel="stylesheet" type="text/css">
<script LANGUAGE="JavaScript"> ......... </script>
</head> |
After the opening <html> tag, open the <head>.
The <title> of the document is up here. Remember, this title will appear way up at the top, in the browser frame.
Metatags are the tags that let search engines find your page (Lesson 19).
A link to a style sheet is always located in the head section (Lesson 13).
Any Javascript styles are also located in the head (Lesson 20).
And, that's it. Close the </head>. |
And then, open the body section. Everything else goes into the body section. Anything that will actually show up on your web page will be in this section.
<body>
<body bgcolor="#ffffff">
<body bgcolor="#ffffff" onLoad="startclock()">
</body> |
The <body> tag, which appears after the closing </head> tag can be all by itself, or it can have attributes added to it in order to:
If you have more than one attribute you want to add, string them together in the opening <body> tag. You can't open up more than one body.
You can only have two <body> </body> tags - the 1st to open and the last to close. The closing </body> tag will be the penultimate tag in your document, right before the closing </html> tag. |
So, this is the basic outline of any webpage:
- Open the <html> tag after the <doctype..> statement.
- Open the <head> section, put in <title>, links to stylesheets, metatags, Javascript styles. Close the </head> section.
- Open the <body> section. Put in everything else. Close the </body> section.
- Close the </html> tag.
Tags are the main building blocks of your page. These basic tags have been covered to get your page started:
- <html>
- <head>
- <title>
- <body>
Remember to include all their matching closing tags:
- </title>
- </head>
- </body>
- </html>
Tags & Attributes
There are tags that work all by themselves, like:
| <b>....</b> |
- displays all the writing in between the tags in bold.
- must have a closing tag.
- In xhtml code, the <b> tag has been replaced by <strong>.....</strong>. Right now, either <b> or <strong> tags will be recognized by all browsers.
|
| <i>......</i> |
- displays all the writing between the tags in italic.
- must have a closing tag.
- In xhtml code, the <i> tag has been replaced by the emphasis tag, <em>...</em>. Right now, either <i> or <em> tags will be recognized by browsers. |
And then, there are the tags that use attributes to further define their appearance or placement on the webpage. Remember, the format for attributes is always the same: the attribute name, equal sign, quotes around the value, with no spaces in any of that. The only space is between the tag and the attribute name, or between individual attributes.
<ul>
<li>..</li>
</ul> |
- makes an unordered list, using different kind of bullets. The bullets can be modified using attributes:
<ul type="circle">........</ul>
- must have a closing tag.
|
<ol>
<li>....</li>
</ol> |
- makes an ordered list, using different kind of numbering system. The numbering system plus the beginning number can be modified using attributes:
<ol type="i" start="3">....</ol>
- must have a closing tag.
|
| <img> |
- displays an image on your page. Attributes define what source to use, how many pixels the border should be, the alignment, the size and the alternative text that can be displayed or read. For example:
<img border="1" src="gavlogo.gif" border="10" align="center" width="23" height="23" alt="Gavilan logo">
- doesn't need a closing tag.
|
| <a> |
- creates links to other pages, or other parts of a particular page. Attributes that have been covered, define what address to link to, and whether to open a separate window. For example:
<a href="http://www.gavilan.edu" target="_blank">The College of Choice</a>
- must have a closing tag. The words between the opening and closing tags will be the highlighted links on your page. |
Header tags (<h1>.....<h6>) are tags that you can use to set up subdivisions for your page. There are several good reasons to use these tags:
- Search engines look for them,
- readers use them to scan your page, and
- automated readers for the blind can be set to tab from one header tag to the next.
| <h1>....</h1> |
- is the largest size heading. Attributes can be added in a style sheet to change the alignment of the text. Browsers automatically show the text in bold and add a return (forcing a blank space under the heading) after the closing </h1> tag.
<h1>....</h1>
- must have a closing tag.
|
| <h6>....</h6> |
- is the smallest size heading. |
Table tags include tags to open the table, open a row, open an individual cell in the row, close the cell, close the row, and close the table. All these tags need to be nested in the proper order, or the browser will get confused and make a mess of your table.
But, they are worth the effort. Tables are about the only way to spread information across the page, leave empty margins around your content, design the layout of your page so that it looks the same no matter what size monitor your user has, or what browser he/she is using.
| <table>...</table> |
- opens the table. Attributes can include size (by percentage or by pixel size), alignment, background color, cell padding and spacing.
<table width=85% align="center" bgcolor="#FFFF99" cellpadding="5" cellspacing="5">
- The above code sets up a table that will take up 85% of the browser window, placed in the center of the window with a light yellow background. The cells will have 5 pixels of space between them, and the contents of each cell will be 5 pixels away from the borders of the cell.
- must have a closing tag, after all the information for each row and each cell has been laid out.
|
| <tr>...</tr> |
- opens a row in the table. Attributes can include background color.
<tr bgcolor="#ffffff">
- This code opens up a row that will be white. If this line is inserted in the table defined above, the row will be white, but the padding between rows and cells will be a light yellow color.
- must have a closing tag at the end of each row. If you have 3 rows in your table, you should open and close all those 3 rows.
|
| <td>...</td> |
- opens up an individual cell in a row of the table. Attributes can include background color, width of the cell (in percentages or pixel size), how many cells to span.
<td width="50%" bgcolor="#CCFFCC" colspan="2">
- This code will open up a cell that will take up 50% of the row, have a light blue background, and span 2 columns.
- You can put anything into a cell that you could put anyplace else: links, images, even another table.
- must have a closing tag. |
A special piece of code was introduced in Lesson 9, the blank space:
Sometimes, you'll need to force the browser to leave spaces. You can put this space holder in tables, in paragraphs (<p> </p>), or as a string of spaces to move the text over:
This line of garble will move the cursor over 4 spaces.
Cascading Style Sheets
Cascading Style Sheets are ways to define your tags (give them attributes) without having to code every single tag. You can set all your <h1> tags to have a certain color, a specific weight, a particular font size and alignment, with just one style sheet, rather than setting attributes for each individual <h1> tag.
Or, you can define several 'classes', so that one <h1> tag will have one set of attributes, but the next <h1> tag can have another set of attributes.
| To define a tag: |
- list the tag, insert a curly bracket, then list all the attributes that you want. Each attribute is followed by a colon, a space, and the value. After the value, add a semicolon. At the end of your list, close the curly bracket.
h1 { color: #006600; font-size: 40px; font-weight: bold; }
|
| To define a class: |
- start with a dot, then give the class a name, a space, and an opening curly bracket. Next, list the attributes and finally, close the curly bracket.
.navigation { position: absolute; margin-top: 10px; border-right: 1px solid #C6EC8C; z-index: 25; width: 20%; height: 600px; }
|
| To use a class: |
- call the class like you would any other attribute.
<li>This is the first item in my list.</li>
<li class="youarehere">This is the second item.</li>
- In the above code, the second list item will have a lime-green background, since that class (youarehere) is defined that way in the stylesheet.
|
Forms
All forms need to start with a <form> tag that will describe the action and the method. The action will usually give a URL to a script that will translate the information submitted. The method will either be "post" or "get". Only "post" has been covered in this course.
<input> tags make up the bulk of the form layout. For almost every <input> tag, you'll need a type, a name, and a value.
- type designates one of several different options for your form. Do you want a radio button, a checkbox, a text box? This is where you make that choice.
- name is the label that will come back on your email form for this function. Is it the reader's address, name, opinion about the rain forests in Thailand?
- value is the content of the label named above. In the case of radio buttons and checkboxes, you have to give each option a value, since the user won't be typing in anything. In the case of text boxes and text areas, the reader will supply the value with what he/she types into the boxes.
Here are the types:
| type="hidden" |
- name="emailto" tells the browser to send the results of this form to your email address. Your email address is going to be the value.
<input type="hidden" name="emailto" value="youraddress@company.com">
- name="nextpage" - tells the browser where to send the reader after the Submit button is clicked. The URL is going to be the value.
<input type="hidden" name="nextpage" value="http://www.otherplace.edu">
- name="subject" - tells the browser what subject line should be in the email message that comes to you. The subject you want is going to be the value.
<input type="hidden" name="subject" value="results_of_survey">
|
| type="radio" |
- creates a radio button. Readers can choose only one of the options.
- name will be the label that comes back to your email address. In a list that has readers choosing a form of transportation, you might have a name of transport. For each option, this name will be the same.
- value will be each option. One might be bike, another might be boat, and a third might be rail.
<input type="radio" name="transport" value="bike">Bike
<input type="radio" name="transport" value="boat">Boat
<input type="radio" name="transport" value="rail">Rail
- The next two lines of code will put two more radio buttons. The words at the end of the line is the text that will show up next to each button.
|
| type="checkbox" |
- creates a check box. Readers can choose more than one of the options.
- name will be the label in your email message. For this list, each option will have a different name, since the user has the option of checking more than one.
- value will be the individual choices for each box.
<input type="checkbox" name="fruit1" value="rambuttan">Rambutan
<input type="checkbox" name="fruit2" value="mangosteen">Mangosteen
<input type="checkbox" name="fruit3" value="dragon">Dragon Fruit
- The next two lines of code will put two more checkboxes.
|
| type="text" |
- creates a rectangular box. Readers can fill in the box. The default size of the box is somewhere between 35 and 45 characters. You can change that by adding a size attribute.
- name will be the label for this text box, when the information gets to your email box.
- value will be the information typed in by the user. You don't have to name it.
- size will be the number of characters that will show up on the webpage. Readers can type more than this amount, but the text will scroll.
<input type="text" name="seeds" size="5">
- The above line of code creates a five-character long box for the user to type in a number. Obviously, the author of this page does not expect anyone to want more than 99999 seed packets.
|
| type="submit" |
- creates a button that, when clicked, will start the operations defined in the <form> tags (action and method).
- No name is required.
- value will be the text that shows up on your page inside the button.
<input type="submit" value="Send">
- The above line of code creates a rectangular button with the word Send on it. When clicked, the information collected in the various <input> tags will be collected and sent on its way.
|
| type="reset" |
- creates a button that, when clicked, will erase all the information collected by the <input> tags.
- No name is required.
- value will be the text that shows up on your page inside the button.
<input type="reset" value="Start over">
- The above line of code creates a rectangular button with the words Start over on it. When clicked, the information collected in the various <input> tags will be erased. |
Textarea
Textareas don't use <input> tags. They are a tag unto themselves. And as tags, they take certain attributes:
| <textarea....> </textarea> |
- creates a multiple line text-input area on your page.
- name is to label the information coming to your email inbox.
- no value is needed. The value is provided by the reader.
- rows is the number of rows you want to appear in the box.
- cols is the number of columns, or characters. A typical box would be 4 rows and 50 cols.
<textarea name="comments" rows="4" cols="45">Type your comments here.</textarea>
- The above line of code creates a rectangular box for users to type in. The words Type your comments here will appear in the box. If you want the words to appear above the box, your code would be like this:
Type your comments here:</br>
<textarea name="comments" rows="4" cols="45"></textarea> |
You should understand these tags and use them in your Final Website Project.
This is the end of Lesson 21. Please go to the next lesson.
|
