 |
 |
 |
 |
 |
 |
 |
Basic HTML Code
"remember that for every <b> there must be a </b>, and for every <a href="xx.gif"> there must be a </a>"
| Required Elements of the Basic HTML Page | ||||||
To begin/end an HTML document
|
<html>...</html> | |||||
| Contains title and some scripts, including java and frame scripts | <head>...</head> | |||||
| Title of page; title displays in the title bar of the browser | <title>Aggie Horticulture</title> |  |
||||
| To begin/end the body of the HTML document | <body>...</body> | |||||
| Basic Page Layout | ||||||
| Line break; inserts a break at the end of the line; equivalent to one carriage return | <br> | |||||
| Line break below object; used to prevent word wrapping around images or other objects inserted into a block of text. | <br clear="right"> <br clear="left"> <br clear="all"> |
|||||
| Paragraph break; inserts a blank line above the new paragraph; equivalent to two carriage returns | <p> | |||||
| Blockquote; indents left and right margin; used for long quotations | <blockquote>...</blockquote> | |||||
|
Horizontal rule; inserts a line across the page |
<hr> | |||||
| Center text on page | <center>Aggie Horticulture</center> | |||||
| Page Layout Enhancements | ||||||
|
Specify background color; can be inserted into the body command (affects the entire page) or into table commands (table, tr, td) to affect only the specified table, tr, or td |
<td bgcolor="781738"> | |||||
| Specify background pattern; similar to background color except inserts an image instead of a color | <td background="aggiehorticulture.jpg"> | |||||
| Specify colors of text elements; inserted into the body command | <body text="#781738"> <body link="blue"> <body alink="#298613"> <body vlink="#B0B0B0"> |
Aggie Horticulture Aggie Horticulture Aggie Horticulture Aggie Horticulture |
||||
| Font Enhancements | ||||||
| Specify heading size; there are 6 sizes ranging from 1 to 6 with 1 being the largest and 6 being the smallest | <h6>Aggie Horticulture</h6> | Aggie Horticulture |
||||
| <h1>Aggie Hortuculture</h1> | Aggie Horticulture |
|||||
| Make font bold | <b>Aggie Horticulutre</b> | Aggie Horticulture | ||||
| Make font italic | <i>Aggie Horticulture</i> | Aggie Horticulture | ||||
| Specify font type | <font face="arial">Aggie Horticulture</font> |
Aggie Horticulture | ||||
| Specify font color | <font color="#781738">Aggie
Horticulture</font> |
Aggie Horticulture | ||||
| Specify font size | <font size=+3>Aggie
Horticulture</font> |
Aggie Horticulture | ||||
| <font size=-2>Aggie Horticulture</font> | Aggie Horticulture | |||||
| Superscript; decreases font size and raises text | Aggie<sup>Horticulture</sup> | AggieHorticulture | ||||
| Subscript; decreases font size and lowers text | Aggie<sub>Horticulture</sub> | AggieHorticulture | ||||
| Common Text Layout Options | ||||||
| List Item; indicates that the item that follows the tag is an item within a list | <li>...</li> | |||||
| Ordered list with numbers; indicates the beginning and end of an ordered list Note: you do not put in numbers; that's done automatically |
<ol> <li>Aggie</li> <li>Horticulture</li> </ol> |
|
||||
| Unordered list with bullets; indicates the beginning and end of an unordered list Note: you do not put in bullets; that's done automatically. As with ordered lists, the indenting and spacing is done automatically. |
<ul> <li>Aggie</li> <li>Horticulture</li> </ul> |
|
||||
| Tables | ||||||
| Basic Table | <table> <tr><td>Aggie Horticulture1</td> <td>Aggie Horticulture2</td></tr> <tr><td>Aggie Horticulture3</td> <td>Aggie Horticulture4</td></tr> </table> |
|
||||
|
Basic table commands; attributes that are inserted into the table command; include: border, horizontal alignment, width, cellpadding, cellspacing, background color/image |
<table border="1" align="center" width="150" cellpadding="2" cellspacing="2" bgcolor="781738"> <tr><td>Aggie Horticulture1</td> <td>Aggie Horticulture2</td></tr> <tr><td>Aggie Horticulture3</td> <td>Aggie Horticulture4</td></tr> </table> |
|
||||
|
Basic table row commands; attributes that are inserted into the tr command; include: vertical alignment, background color |
<table <tr valign="top" bgcolor="#781738"><td> Aggie Horticulture1</td> <td>Aggie Horticulture2</td></tr> <tr><td>Aggie Horticulture3</td> <td>Aggie Horticulture4</td></tr> </table> |
|
||||
|
Basic table data commands; attributes that are inserted into the td command; include: horizontal alignment, row width of data cell, column width of data cell, background color/image |
<table> <tr><td align="center"> Aggie Horticulture1</td> <td bgcolor="#781738"> Aggie Horticulture2</td></tr> <tr><td colspan="2"> Aggie Horticulture3</td></tr> </table> |
|
||||
| Hypertext Links Between Files and Between Servers | ||||||
|---|---|---|---|---|---|---|
|
Relative link; hypertext link to a file within the same root directory |
<a href="aggiehorticulture.html">Aggie Horticulture</a> | Aggie Horticulture | ||||
| Absolute link; hypertext link to a file within a different root directory/server; | <a href="http://aggie-horticulture.tamu.edu/ tamuhort.html">Aggie Horticulture</a> |
Aggie Horticulture | ||||
|
Popdown; hypertext link to a specific location within a file; requires two sets of code, one where the link is given, and another at the specified location |
<a href="aggiehorticulture.html" #aghort">AgHort</a> <a name="aghort">AgHort</a> |
AgHort AgHort |
||||
| Displaying and Modifying Images | ||||||
| Basic code for displaying an image file; image must be either in jpeg (jpg or jpe) or gif format | <img src="aggiehorticulture.jpg"> |  |
||||
| Adjust image size; the height command adjusts the height of the image and the width command adjusts the width of the image; helps the image load faster; Note: when using the image size commands to increase/decrease the size of an image be careful to make sure to make the height/width adjustments proportional to one another to avoid the image from becoming distorted. | <img src="aggiehorticulture.jpg" height="17" width="82"> | |
||||
| <img src="aggiehorticulture.jpg" height="14" width="40"> | |
|||||
| Alt tag; displays text when mouse is rolled over the image | <img src="aggiehorticulture.jpg" alt="Aggie Horticulture"> | |
||||
| Vertical Alignment; aligns text to an inline image; can equal top, middle, bottom; the default alignment is bottom | <img src="aggiehorticulture.jpg" align="top">AgHort AgHort AgHort AgHort AgHort AgHort AgHort AgHort | AgHort AgHort AgHort AgHort AgHort AgHort AgHort AgHort |
||||
| Horizontal alignment; aligns image on page; wraps text; can equal right, left; default alignment is left | <img src="aggiehorticulture.jpg" align="right">AgHort AgHort AgHort AgHort AgHort AgHort AgHort AgHort | AgHort AgHort AgHort AgHort AgHort AgHort AgHort AgHort |
||||
| Text offset; hspace= horizontal text offset; vspace= vertical text offset; given in pixels | < img src="aggiehorticulture.jpg" hspace="10" vspace="10">AgHort AgHort AgHort AgHort AgHort AgHort AgHort AgHort | AgHort AgHort AgHort AgHort AgHort AgHort AgHort AgHort |
||||
| Border; sets border width; given in pixels; default width for browsers is border=0 which results in an unseen border | <img src="aggiehorticulture.jpg" border="10"> | |
||||
| Clickable image link | <a href="http://aggie-horticulture.tamu.edu/"><img src="aggiehorticulture.jpg"></a> | |
||||
| Clickable image link border; the width of the border around the image; the default border for Internet Explorer is border="0", which results in an unseen border; the default border for Netscape Navigator is border="2"; the color of the link border is the same as the color of your links | Explorer: <a href="http://aggie-horticulture.tamu.edu"><img src="aggiehorticulture.jpg"></a> | |
||||
| Netscape: <a href="http://aggie-horticulture.tamu.edu/"><img src="aggiehorticulture.jpg"></a> | |
|||||
| Extra Tidbits | ||||||
|
Meta tags; four main types; one for rating, description, keywords, author; contained within the heading; optional- not required |
<meta name="description" content="Aggie Horticulture Web Site"> | |||||
| Space; to insert a space |  |
|||||
| Less than and greater than signs |  |
< > | ||||
 
| Introduction | Before Begining | First Web Page | Terms | Code | Assignment | Course Modules |
|