1 . Introduction to HTML Part 2 Outline 4.1 Introduction 4.2 Basic HTML Tables 4.3 Intermediate HTML Tables and Formatting 4.4 Basic HTML Forms 4.5 More Complex HTML Forms 4.6 Internal Linking 4.7 meta Elements 4.8 frameset Element 4.9 Nested framesets 4.10 Web Resources
30
Embed
. 1 Introduction to HTML Part 2 Outline 4.1 Introduction 4.2 Basic HTML Tables 4.3 Intermediate HTML Tables and Formatting 4.4 Basic HTML Forms 4.5 More.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
.
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
2
.
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.
3
.
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
.
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
5
.
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
6
.
Example1: HTML Table: table1.html
<table border = "1" width = "40%" summary = "This table provides information about the price of fruit">
<caption><strong>Price of Fruit</strong></caption>
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
13
.
<form method = "post" action = "/cgi-bin/formmail"> <p> <input type = "hidden" name = "recipient“ value = "[email protected]" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> </p>
<p><label>Name: <input name = "name" type = "text" size = "25“ maxlength = "30" /> </label></p> <p> <input type = "submit" value = "Submit Your Entries" /> <input type = "reset" value = "Clear Your Entries" /> </p> </form>
Example3: Form design: form.html
14
.
4.5 More Complex HTML Forms
Sub-Element textarea: <textarea> </textarea> Inserts a multiline text box (text area)
<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>
17
.
<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>Ease of use <input name = "thingsliked" type = "checkbox" value = "Ease" /></label>
<label>Images <input name = "thingsliked" type = "checkbox" value = "Images" /></label>
<label>Source code <input name = "thingsliked" type = "checkbox" value = "Code" /></label> </p></form>
18
.
Example 5: Form including radio buttons and a drop-down list: form3.html
19
.
<strong>How did you get to our site?:</strong><br />
<label>Search engine
<input name = "howtosite" type = "radio"
value = "search engine" checked = "checked" /></label>
<label>Links from another site
<input name = "howtosite" type = "radio" value = "link" /></label>
<label>Deitel.com Web site
<input name = "howtosite" type = "radio" value = "deitel.com" /></label>
<label>Reference in a book
<input name = "howtosite" type = "radio" value = "book" /></label>
<label>Other
<input name = "howtosite" type = "radio" value = "other" /></label>
20
.
<label>Rate our site:
<select name = "rating">
<option selected = "selected">Amazing</option>
<option>10</option>
<option>9</option>
<option>8</option>
<option>7</option>
<option>6</option>
<option>5</option>
<option>4</option>
<option>3</option>
<option>2</option>
<option>1</option>
<option>Awful</option>
</select>
</label>
21
.
4.6 Internal Linking
Enables the user to jump between locations in the same document
Use anchor attribute: href = #section name
22
.
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>
<ul>
<li>You can meet people from countries around the world.</li>
<li>It is the technology of the future!</li>
</ul>
<h1 id = "bugs">My 3 Favorite Bugs</h1>
<p>
<a href = "#features">Go to <em>Favorite Features</em></a></p>
<ol>
<li>Fire Fly</li>
<li>Gal Ant</li>
<li>Roman Tic</li>
</ol>
id attribute creates an internal hyperlink destination
an internal link’s address is ‘#id’
23
.
4.7 meta Elements
Specify information about a document
Attributes Description
name
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
24
.
Example 7: meta tags provide keywords and a description: main.html
<head>
<title>Internet and WWW How to Program - Welcome</title>