. 1 Introduction to HTML Part 2 Outline 4.1 Introduction 4.2 Basic HTML Tables 4.3 Intermediate HTML...

transcript

Introduction to HTML Part 2Outline4.1 Introduction4.2 Basic HTML Tables4.3 Intermediate HTML Tables and Formatting4.4 Basic HTML Forms4.5 More Complex HTML Forms4.6 Internal Linking4.7 meta Elements4.8 frameset Element4.9 Nested framesets4.10 Web Resources

Objectives

To be able to create tables with rows and columns of data.

To be able to control table formatting. To be able to create and use forms. To be able to create and use image maps to aid in Web-

page navigation. To be able to make Web pages accessible to search

engines using meta elements. To be able to use the frameset element to display

multiple Web pages in a single browser window.

4.1 Introduction

Tables: present information

Forms: collect information from visitor

Internal linking and image maps: Enhance Web page navigation

Frames: display multiple documents in the browser

4.2 Basic HTML Tables

Organize data into rows and columns

table element:<table></table>

Attributes Description

border specifies the table’s border width in pixels

summary describes the table’s contents

Caption (sub element) describes the table’s content and helps text-based browsers interpret table data

Head section (header cell, defined with a thead element) Contains header information such as column names

Foot section (defined with a tfoot element)

Table body (defined with a tbody element)

Data cells (defined with td element)

Sub-elements (for thead & tfoot) Description

tr individual table row

th columns in the head section

Example1: HTML Table: table1.html

<caption><strong>Price of Fruit</strong></caption>

<thead> <tr> <th>Fruit</th> <th>Price</th> </tr> </thead>

<tfoot> <tr> <th>Total</th> <th>$3.75</th> </tr> </tfoot>

<tbody> <tr> <td>Apple</td> <td>$0.25</td> </tr>

<tr> <td>Orange</td> <td>$0.50</td> </tr>

<tr> <td>Banana</td> <td>$1.00</td> </tr>

<tr> <td>Pineapple</td> <td>$2.00</td> </tr> </tbody>

</table>

4.3 Intermediate HTML Tables &Formatting

Element colgroup: groups and formats columns

Element col:

tr and th attributes:

attributes Description

align determines the alignment of text in the column

span determines how many columns the col element formats

attributes Description

rowspan,colspan specify the number of rows or columns occupied by a cell

valign= top= middle= bottom= baseline

aligns data vertically

Example2: Complex HTML table: table2.html

<thead> <tr> <th rowspan = "2"> <img src = "camel.gif" width = "205" height = "167" alt = "Picture of a camel" /> </th> <th colspan = "4" valign = "top"> <h1>Camelid comparison</h1><br /> <p>Approximate as of 9/2002</p> </th> </tr>

merge two rows

merge four columns

<tr valign = "bottom"> <th># of Humps</th> <th>Indigenous region</th> <th>Spits?</th> <th>Produces Wool?</th> </tr> </thead> <tbody> <tr> <th>Camels (bactrian)</th> <td>2</td> <td>Africa/Asia</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <th>Llamas</th> <td>1</td> <td>Andes Mountains</td> <td>Yes</td> <td>Yes</td> </tr> </tbody> </table>

4.4 Basic HTML Forms

Element form: <form> </form>

Sub-element: input <input />

methodmethod = “post”method = “get”

specifies how the form’s data is sent to Web serverAppends form data to the browser requestAppends form data directly to the end of the URL

action Specifies the URL of a script on the Web server

Sub-Element input: <input> </input>

typetype = “hidden”type = “text”type = “submit”type = “reset”

Type of form’s input‘hidden’ input passed to server-side scriptTextbox with specific sizeSubmit buttonReset button

name Name passed to server-side script as parameter

value ‘Visible’ name on the form

Example3: Form design: form.html

4.5 More Complex HTML Forms

Sub-Element textarea: <textarea> </textarea> Inserts a multiline text box (text area)

Sub-Element input: <input> </input>

rows Specifies the number of rows

cols Specifies the number columns

typetype = “password”type = “checkbox”type = “radio”

Type of form’s inputPassword box with specific size Enable users to select from a set of optionsRadio button

Sub-Element select: <select> </select> Drop down list Contains element option: <option> </option>

Sub-Element option: Adds items to the drop-down list

selected Specifies which item initially is displayed as the selected item

Example 4: Form with text areas, a password box and checkboxes: form2.html

<p><label>Comments:<br /> <textarea name = "comments" rows = "4" cols = "36"> Enter your comments here. </textarea> </label></p> <p><label>E-mail Address: <input name = "email" type = "password" size = "25" /> </label></p>

<p> <strong>Things you liked:</strong><br />

<label>Site design <input name = "thingsliked" type = "checkbox" value = "Design" /></label> <label>Links <input name = "thingsliked" type = "checkbox" value = "Links" /></label>

<label>Images <input name = "thingsliked" type = "checkbox" value = "Images" /></label>

<label>Source code <input name = "thingsliked" type = "checkbox" value = "Code" /></label> </p></form>

Example 5: Form including radio buttons and a drop-down list: form3.html

<label>Search engine

<input name = "howtosite" type = "radio"

value = "search engine" checked = "checked" /></label>

<label>Links from another site

<label>Deitel.com Web site

<label>Reference in a book

<label>Other

<label>Rate our site:

<option selected = "selected">Amazing</option>

<option>Awful</option>

</select>

</label>

4.6 Internal Linking

Enables the user to jump between locations in the same document

Use anchor attribute: href = #section name

Example 6: Internal hyperlinks: links.html

<h1 id = "features">The Best Features of the Internet</h1>

<p><a href = "#bugs">Go to <em>Favorite Bugs</em></a></p>

<li>You can meet people from countries around the world.</li>

<li>It is the technology of the future!</li>

<h1 id = "bugs">My 3 Favorite Bugs</h1>

<a href = "#features">Go to <em>Favorite Features</em></a></p>

<li>Roman Tic</li>

id attribute creates an internal hyperlink destination

an internal link’s address is ‘#id’

4.7 meta Elements

Specify information about a document

name = “keywords”

name = “description”

Identifies the type of meta element

Provides search engines with a list of words that describe a pageProvides a description of a site

content Provides the information search engine use to catalog pages

Example 7: meta tags provide keywords and a description: main.html

<head>

<title>Internet and WWW How to Program - Welcome</title>

personal, help, index, form, contact, feedback, list, links, frame, deitel" />

of XHTML and Web page design through the use of interactive examples and

instruction." />

</head>

4.8 frameset Element

Allow browser display more than one document simultaneously

Element: frameset

Sub-Element: frame Specifies the documents that will be loaded Attribute src: specifies URL of the page to display

cols Specifies the frameset’s column layout

rows Specifies the number of rows and the size of each row

Example 8: XHTML frames document with navigation and content: index.html

<body>

<p>This page uses frames, but your browser

does not support them.</p>

<p>Please, <a href = "nav.html">follow this

link to browse our site without frames</a>.

</body>

</noframes>

</frameset>

<body>

<p>Please, <a href = "nav.html">follow this

link to browse our site without frames</a>.

</body>

</noframes>

</frameset>

frame elements specify which pages are loaded into a given frame

4.9 Nested framesets

framesets within framesets

Example 9: Framed web site with a nested frameset: index2.html

</frameset>

<body>

</body>

</noframes>

</frameset>

</frameset>

<body>

</body>

</noframes>

</frameset>

nested framesets are used to change the formatting and layout of the frameset

4.10 Web Resources

www.vbxml.com/xhtml/articles/xhtml_tables www.webreference.com/xml/reference/xhtml.html

. 1 Introduction to HTML Part 2 Outline 4.1 Introduction 4.2 Basic HTML Tables 4.3 Intermediate HTML...

Documents