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>
Aggie Horticulture
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>
  1. Aggie
  2. Horticulture
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>
  • Aggie
  • Horticulture
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>
Aggie Horticulture1 Aggie Horticulture2
Aggie Horticulture3 Aggie Horticulture4
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>
Aggie Horticulture1 Aggie Horticulture2
Aggie Horticulture3 Aggie Horticulture4
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>
Aggie Horticulture1 Aggie Horticulture2
Aggie Horticulture3 Aggie Horticulture4
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>
Aggie Horticulture1 Aggie Horticulture2
Aggie Horticulture3
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"> 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 < >


| HORT 605 Index | Syllabus | Course Modules | Teachers | Class Directory | Check Grades | Links | Aggie Horticulture |

| Introduction | Before Begining | First Web Page | Terms | Code | Assignment | Course Modules |