Introduction to HTML Part 2

Outline
4.1
4.2
4.3
4.4
4.5
4.6
4.7
4.8
4.9
4.10

Introduction
Basic HTML Tables
Intermediate HTML Tables and Formatting
Basic HTML Forms
More Complex HTML Forms
Internal Linking
meta Elements
frameset Element
Nested framesets
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 Webpage 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.
2

4.1 Introduction

Tables: present information

Forms: collect information from visitor

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 (1/)

specifies the tables border width in pixels

Summary (text)

describes the tables contents

align (left/center/right)

specifies the alignment of a table according to

surrounding text

bgcolor (#xxxxxx/color)

Specifies the background color for a table

cellpadding (pixels)

Specifies the space between the cell wall and

the cell content

Cellspacing (pixels)

Specifies the space between cells

Width (pixels/%)

Specifies the width of a table

Table caption (defined with a caption element)

Head section (header cell, defined with a thead element)

Contains header information such as column names

Foot section (defined with a tfoot element)

Sub-elements (for thead & tfoot)

Description

tr

individual table row

th

columns in the head section

Table body (defined with a tbody element)

Data cells (defined with td element)

Example1: HTML Table: example1.html

<table border = "1" width = "40%"
summary = "This table provides information about the price of fruit">
<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>
6

<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>
7

</table>
.

Break here on 09/30/2014

4.3 Intermediate HTML Tables &Formatting

Element colgroup: groups and formats columns

Element col:

attributes

Description

align

determines the alignment of text in the column

span

determines how many columns the col element formats

tr and th attributes:

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: example2.html

<table border = "1">
<colgroup> <col align = "right" span = "1" /> </colgroup>
merge two rows
<thead>
merge four columns
<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>

10

<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>

11

4.4 Basic HTML Forms

Element form: <form> </form>

Attributes

Description

method
method = post
method = get

specifies how the forms data is sent to Web

server
Appends form data to the browser request
Appends form data directly to the end of the URL

action

Specifies the URL of a script on the Web server

12

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

Attributes

Description

type
type = hidden
type = text
type = submit
type = reset

Type of forms input

hidden input passed to server-side script
Textbox with specific size
Submit button
Reset 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 = "deitel@deitel.com" />
<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:

example3html

14

4.5 More Complex HTML Forms

Sub-Element textarea: <textarea> </textarea>

Inserts a multiline text box (text area)
Attributes

Description

rows

Specifies the number of rows

cols

Specifies the number columns

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

Attributes
type
type = password
type = checkbox
type = radio

Description
Type of forms input
Password box with specific size
Enable users to select from a set of options
Radio button
15

Sub-Element select: <select> </select>

Drop down list

Contains element option: <option> </option>

Sub-Element option:

Adds items to the drop-down list

Attributes

Description

selected

Specifies which item initially is

displayed as the selected item

16

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

example4.html
<form method = "post" action = "/cgi-bin/formmail">
<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: example5.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: example6.html

<h1 id = "features">The Best Features of the Internet</h1>
<p><a href = "#bugs">Go to <em>Favorite Bugs</em></a></p>

an internal links
address is #id

id attribute creates an internal

hyperlink destination

<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>
.

23

4.7 meta Elements

Provides metadata about the HTML document.

It will not be displayed on the page, but will be machine parsable.
It is typically used to specify page description, keywords, author of
the document, last modified, and other metadata.
It can be used by browsers (how to display content or reload
page), search engines (keywords), or other web services.

Attributes
name
name

Description
Identifies the type of meta element

= keywords

search engines with a list of words that

describe a page
name = description Provides a description of a site
content

Provides

Provides the information search engine use to

catalog pages
24

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

<meta> tags provide search engines with information used to catalog a site

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

<meta name = "keywords" content = "Web page, design, XHTML, tutorial,

personal, help, index, form, contact, feedback, list, links, frame, deitel" />
<meta name = "description" content = "This Web site will help you learn the basics
of XHTML and Web page design through the use of interactive examples and
instruction." />
</head>

25

4.8 frameset Element

Allow browser display more than one document

simultaneously
Element: frameset
Attributes

Description

cols

Specifies the framesets column layout

rows

Specifies the number of rows and the size of each row

Sub-Element: frame
Specifies the documents that will be loaded
Attribute src: specifies URL of the page to display
<noframes> tag is a fallback tag for browsers that do not support
frames.
It can be used to link to a non-frameset version of the web site
or to display a message to users that frames are required.

26

27

<frameset cols = "110,*">

frame elements specify which pages

are loaded into a given frame

<frame name = "leftframe" src = "nav.html" />

<frame name = "main" src = "main.html" />
<noframes>
<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>.
</p>
</body>
</noframes>
</frameset>
28

4.9 Nested framesets

framesets within framesets

29

Example 8: Framed web site with a nested frameset: example8.html

<frameset cols = "110,*">

nested framesets are used to change the

formatting and layout of the frameset

<frame name = "leftframe" src = "nav.html" />

<frameset rows = "175,*">
<frame name = "picture" src = "picture.html" />
<frame name = "main" src = "main.html" />
</frameset>
<noframes>
<body>
<p>This page uses frames, but your browser
does not support them.</p>
</body>
</noframes>
</frameset>
30

4.10 frameset with linking

ExampleFE.html:
<html>
<head>
<title>My Frames Page</title>
</head>
<frameset cols="120,*">
<frame src="linkPage.html" name="menu">
<frameset rows="*,50">
<frame src="example2.html" name="main">
<frame src="example3.html" name="bottom">
</frameset>
</frameset>
</html>
31

4.10 frameset with linking

linkPage.html:
<!-- Comment -->
<!-- Our first Web page -->
<html>
<head>
<title>Website Design Fall 2014</title>
</head>
<body>
<a href="http://www.ccu.edu.tw/">CCU website 1</a>
<a href="http://www.ccu.edu.tw/" target="main">CCU website 2</a>
<a href="http://www.ccu.edu.tw/" target="bottom">CCU website 3</a>
</body>
</html>

32

HTML short quotations

The HTML <q> element defines a short

quotation.

Browsers usually insert quotation marks around

the <q> element.
Ex. <p>WWF's goal is to: <q>Build a future where
people live in harmony with nature.</q></p>

The HTML <blockquote> element defines a

quoted section.

Browsers usually intend <blockquote> elements.

33

iframe

Is used to display a webpage within a web page

We can set height and width of the frame

<iframe src="demo_iframe.htm" width="200" height=

"200"></iframe>

Can set attribute value 0 to remove border

<iframe src="URL"></iframe>

<iframe src="demo_iframe.htm" frameborder="0"></i

frame>

Can use iframe with a link

<iframe src="demo_iframe.htm" name="iframe_a"><

/iframe><p><a href="http://www.w3schools.com" tar
get="iframe_a">W3Schools.com</a></p>
34

HTML color names

There are 140 color names supported by all browsers

Colors are defined using a hexadecimal (hex)

notation for the of Red, Green, and Blue values
(RGB).
The lowest value for each light source is 0 (hex
00). The highest value is 255 (hex FF).
Hex values are written as # followed by either
three or six hex characters.
Three-digit notations (#rgb) are automatically
converted to six digits (#rrggbb)

Ex. #FF0000 => rgb(255,0,0)

How to convert from integer to HEX?

For more color reference

http://www.w3schools.com/html/html_colornames.asp
.

35