HTML
- Origins of HTML
- Basic syntax and text formatting
- Images, links and lists
- Tables and frames
Origins of HTML
- Derived from SGML (Standardized Markup Language)
- General layout language for documents to be displayed on computers
- Recent versions:
- HTML 4.0
- Added many new features and deprecated many older features
- XHTML 1.0
- Introduced a modified syntax to fit the XML formatting style
Basic Syntax
- Page elements are delimited by tags (eg <h1> and </h1>)
- The content of an element appears between its opening tag and its closing tag
- Not all elements have content (eg <br>)
- If a tag has attributes, they appear between within its opening tag
- Format for comments:
<!-- a comment -->- Browsers ignore comments, unrecognizable tags, line breaks, and extra spaces
HTML Document Structure
- Documents must have <html> as its root
- A document contains a head (<head>) and a body (<body>)
- Title tag (<title>) is used to give the document a title
<html> <head> <title>Title</title> ... other headers, meta-tags, etc. </head> <body> ... body of the document </body> </html>
Basic Text Formatting
- Text without tags is displayed in lines, with as many words as will fit in each line
- Some of the most common formatting tags we will use are:
- Paragraphs and line breaks
- Headings
- Blockquotes
- Styles and sizes
Paragraphs and Line Breaks
- The <p> tag breaks the current line and inserts a blank line
- The effect of the <br> tag is the same as that of <p>, except for the blank line
On the plains of hesitation <p> bleach the bones of countless millions </p> <br> who, at the dawn of victory <br> sat down to wait, and waiting, died.On the plains of hesitationbleach the bones of countless millions
who, at the dawn of victory
sat down to wait, and waiting, died.
Headings
- There are six sizes of headings, specified with <h1> to <h6>
- Browsers usually put some vertical space before and after a heading
<h1> Aidan’s Airplanes </h1> <h2> The best in used airplanes </h2> <h3> "We’ve got them by the hangarful" </h3>Aidan’s Airplanes
The best in used airplanes
"We’ve got them by the hangarful"
Blockquotes
- Used to set a block of text off from the normal flow and appearance of text
- Browsers usually indent the text, some even italicize it
<blockquote> On the plains of hesitation bleach the<br> bones of countless millions<br> who, at the dawn of victory sat down<br> to wait, and waiting, died. </blockquote>On the plains of hesitation bleach the
bones of countless millions
who, at the dawn of victory sat down
to wait, and waiting, died.
Styles and Sizes
- The font style and size can be set with the following tags:
- Boldface - <b>
- Italics - <i>
- Larger - <big>
- Smaller - <small>
- Typewriter - <tt>
The <big> sleet <big> in <big> <i> Crete </i><br> lies </big> completely </big> in </big> the streetThe sleet in Crete
lies completely in the street
Images
- Image are inserted into a document with the <img> tag
- "src" attribute names the image file
- "alt" attribute is used to give an alternative description for browsers than cannot display an image
- Images are typically of type "gif" or "jpg" (better compression)
<h1> Aidan's Airplanes </h1> <h2> The best in used airplanes </h2> <h3> "We've got them by the hangarful" </h3> <h2> Special of the month </h2> 1960 Cessna 210 <br> 577 hours since major engine overhaul <br> 1022 hours since prop overhaul <br><br> <img src="c210.jpg"> <br> Buy this fine airplane today at a remarkably low price <br> Call 999-555-1111 today!Aidan's Airplanes
The best in used airplanes
"We've got them by the hangarful"
Special of the month
1960 Cessna 210
577 hours since major engine overhaul
1022 hours since prop overhaul![]()
Buy this fine airplane today at a remarkably low price
Call 999-555-1111 today!
Hypertext Links
- The ability to link pages is an essential feature of the Web
- Both links and targets of links are created with the anchor tag (<a>)
- The target of the link is specified in the href attibute
- The content of the <a> tag is the text to be displayed for the link
- The target is usually another web page, but could be on the same page
<h1> Aidan's Airplanes </h1> <h2> The best in used airplanes </h2> <h3> "We've got them by the hangarful" </h3> <h2> Special of the month </h2> 1960 Cessna 210 <br> <a href="c210data.html"> Information on the Cessna 210 </a>Aidan's Airplanes
The best in used airplanes
"We've got them by the hangarful"
Special of the month
1960 Cessna 210
Information on the Cessna 210
Defining Targets for Links
- Targets can be document fragments or parts (in the same or another page)
- In these cases, the target must be marked with an anchor tag
<a name="basket"> <h1>Baskets</h1> </a>- Target labels can also be defined in many different tags with the id attribute
<h1 id="baskets"> Baskets </h1>- The link to a document fragment must be preceded by a pound sign (#); if the target is in the same document, this target could be
<a href="#baskets"> What about baskets? </a>- If the link is in a different document, the document URL must be included
<a href="myAd.html#baskets"> link </a>- For example, we can assign an id to the the first slide, and create a link to it; clicking the "back" button gets you back here
<h2 id="first">HTML</h2> <a href="#first">Go back to the top</a>Go back to the top
Images as Links
- Links can have images; simply include the <img> tag inside the anchor tags
<a href="search.html"> <img src="searchbutton.gif" alt="Search"></a>![]()
Lists
- Unordered lists are specified within <ul> tags
- List elements are indicated by <li> tags
<h3>Some NHL Teams</h3> <ul> <li>Ottawa Senators <li>Toronto Maple Leafs <li>San Jose Sharks </ul>Some NHL Teams
- Ottawa Senators
- Toronto Maple Leafs
- San Jose Sharks
- Ordered lists are contained in <ol> tags
- In the display, each item will be preceded by a sequence value
<h3>Current Team Rankings</h3> <ol> <li>Ottawa Senators <li>Toronto Maple Leafs <li>San Jose Sharks </ol>Current Team Rankings
- Ottawa Senators
- Toronto Maple Leafs
- San Jose Sharks
- A third type of list are definition lists (<dl>)
- The terms defined are surrounded by <dt> tags; the definitions themselves are contained in <dd> tags
<h3>Common Acronyms</h3> <dl> <dt>HTML <dd>HyperText Markup Language <dt>URL <dd>Uniform Resource Locator <dt>MIME <dd>Multi-purpose Internet Mail Extension </dl>Common Acronyms
- HTML
- HyperText Markup Language
- URL
- Uniform Resource Locator
- MIME
- Multi-purpose Internet Mail Extension
Tables
- A table is a matrix of rows and columns, each potentially having content
- Each position in a table is referred to as a cell
- Some cells contain labels, most cells have data
- A table is specified as content of a <table> tag
- The border attribute indicates the width of the border between the cells
- Without the border attribute the table will have no lines
- Use the <caption> tag to give the table a title
Table Elements
- Each row is indicated by a <tr> tag
- Table headings (or labels) are specified by <th> tags
- The contents of a cell are specified by <td> tags
<table border="1"> <caption>Balance Sheet</caption> <tr> <th></th> <th>Revenues</th> <th>Cost</th> <th>Net Margin</th> </tr> <tr> <th>1998</th> <td>10,000</td> <td>7,500</td> <td>2,500</td> </tr> <tr> <th>1999</th> <td>20,000</td> <td>45,000</td> <td>(25,000)</td> </tr> <tr> <th>2000</th> <td>80,000</td> <td>250,000</td> <td>(160,000)</td> </tr> </table>
Balance Sheet Revenues Cost Net Margin 1998 10,000 7,500 2,500 1999 20,000 45,000 (25,000) 2000 80,000 250,000 (160,000)
Spanning Multiple Rows or Columns
- Table cells can span multiple rows or columns
- The colspan attribute specifies the number of columns to span
- Similarly, for rows use the rowspan attribute
<table border="1"> <caption>Spanning Rows and Columns</caption> <tr> <td rowspan="3"> Rows </td> <th colspan="2"> Columns </th> </tr> <tr> <td> Cell </td> <td> Cell </td> </tr> <tr> <td> Cell </td> <td> Cell </td> </tr> </table>
Spanning Rows and Columns Rows Columns Cell Cell Cell Cell
Controlling Table Layout
- Several attributes provide a fine degree of control over the layout of the table
- Control the alignment of text inside a cell
- The align attribute determines the horizontal alignment
- The valign attribute determines the vertical alignment
<table border="1"> <tr> <th align="left" colspan="2">Download Details</th> </tr> <tr> <td align="left">Company:</td> <td align="right">www.adobe.com</td> </tr> <tr> <td align="left" valign="top">Requirements:</td> <td align="right" valign="top">Mac OS X 10.0 or later</td> </tr> </table>
Download Details Company: www.adobe.com Requirements: Mac OS X 10.0 or later
- Control the height and width of a cell, or the whole table
- Use the height and width attributes
<table width="200" border="1"> <tr> <th align="left" colspan="2">Download Details</th> </tr> <tr> <td width="50%" align="left">Company:</td> <td width="50%" align="right">www.adobe.com</td> </tr> <tr> <td align="left" valign="top">Requirements:</td> <td align="right" valign="top">Mac OS X 10.0 or later</td> </tr> </table>
Download Details Company: www.adobe.com Requirements: Mac OS X 10.0 or later
- Control the amount of space between cells and padding within a cell
- The cellspacing attribute determines the distance between cells
- The cellpadding attribute determines how much space is inserted between the content of the cell and its boundary
<table width="200" border="1" cellspacing="0" cellpadding="0"> <tr> <th align="left" colspan="2">Download Details</th> </tr> <tr> <td width="50%" align="left">Company:</td> <td width="50%" align="right">www.adobe.com</td> </tr> <tr> <td align="left" valign="top">Requirements:</td> <td align="right" valign="top">Mac OS X 10.0 or later</td> </tr> </table>
Download Details Company: www.adobe.com Requirements: Mac OS X 10.0 or later <table width="200" border="1" cellspacing="10" cellpadding="10">
Download Details Company: www.adobe.com Requirements: Mac OS X 10.0 or later
Using Color in Tables
- You can set the background color of each cell in a table independently using the cell's bgcolor attribute
- To set all cells in one row to the same color, use the row's bgcolor attribute
<table width="200" cellspacing="0"> <tr bgcolor="#E2EEFF"> <th align="left" colspan="2">Download Details</th> </tr> <tr> <td width="50%" align="left">Company:</td> <td width="50%" align="right">www.adobe.com</td> </tr> <tr bgcolor="#E2EEFF"> <td align="left" valign="top">Requirements:</td> <td align="right" valign="top">Mac OS X 10.0 or later</td> </tr> </table>
Download Details Company: www.adobe.com Requirements: Mac OS X 10.0 or later
Building a Navigation Bar
- To close of the discussion of tables, let us go through the code it takes to define a navigation bar using tables
- In the first example, the navigation bar is text-based, and uses color high-lighting to indicate the currently displayed category
<table border="1" cellspacing="0"> <tr> <th bgcolor="#E2EEFF" width="150">Web</th> <th width="150"><a href="images.html">Images</a></th> <th width="150"><a href="groups.html">Groups</a></th> <th width="150"><a href="directory.html">Directory</a></th> </tr> </table>
Web Images Groups Directory
- In the second example, the navigation bar uses images
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href="search.html"> <img src="searchbutton.gif"></a></td> <td><a href="map.html"> <img src="mapbutton.gif"></a></td> <td><a href="store.html"> <img src="storebutton.gif"></a></td> </tr> </table>
Frames
- Frames are rectangular sections of the browser window
- Each frame can display a different document
- One common use of frames is to display a table of contents and a main document frame on the same page
- The table of contents is typically a list of links to an area of the web site
- Each link specifies that the main document frame, or target, should be loaded with the linked page (the navigation area remains on the page)
Top Left Right
Framesets
- The relative position and size of the frames is specified using (nested) <frameset> tags; the frames themselves are defined via the <frame> tag
- The cols and rows attributes of a frameset define the relative size and number of frames (eg "20%,50%,*" indicates the size of three frames)
<html> <frameset rows="20%,*"> <frame src="top.html" name="top"> <frameset cols="20%,*"> <frame src="left.html" name="left"> <frame src="right.html" name="right"> </frameset> </frameset> </html>![]()
- In the above example, the page inside the the navigation frame (left) refers to the main frame via its name (right)
<a target="right" href="about.html">About us</a>- See the files bookaholics, left, and right