Scribd
Upload
52 views37 pages

Chapter 2part 2 Introduction To HTML5: Internet & World Wide Web How To Program, 5/e

Uploaded by

Yousef Qasas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
52 views37 pages

Chapter 2part 2 Introduction To HTML5: Internet & World Wide Web How To Program, 5/e

Uploaded by

Yousef Qasas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 37

Chapter 2Part 2

Introduction to HTML5
Internet & World Wide Web
How to Program, 5/e

Copyright © Pearson, Inc. 2013. All Rights Reserved.


2.9 Lists
 Unordered list element ul
 creates a list in which each item in the list begins
with a bullet symbol (typically a disc)
 Each entry is an li (list item) element. Most web
browsers render these elements with a line break
and a bullet symbol at the beginning of the line.

2
 2008 Pearson Education, Inc. All rights reserved.
<!DOCTYPE html>
<!-- Unordered list containing hyperlinks. -->
<html>
<head>
<meta charset = "utf-8">
<title>Links</title>
</head>
<body>
<h1>Here are my favorite sites</h1>
<p><strong>Click on a name to go to that page</strong></p>
<!-- create an unordered list -->
<ul>
<!-- the list contains four list items -->
<li><a href = "http://www.youtube.com">YouTube</a></li>
<li><a href = "http://www.wikipedia.org">Wikipedia</a></li>
<li><a href = "http://www.amazon.com">Amazon</a></li>
<li><a href = "http://www.linkedin.com">LinkedIn</a></li>
</ul>
</body>
</html>

 2008 Pearson Education, Inc. All rights reserved.


 2008 Pearson Education, Inc. All rights reserved.
2.9 Lists (Cont.)
Nested Lists
 Lists may be nested to represent

hierarchical relationships, as in a multi-level


outline.
 the next example demonstrates nested lists

and ordered lists.


 The ordered-list element ol creates a list in

which each item begins with a number.

5
 2008 Pearson Education, Inc. All rights reserved.
<!DOCTYPE html>
<!-- odered list containing. -->
<html>
<head>
<meta charset = "utf-8">
<title>Links</title>
</head>
<body>
<h1>Here are my favorite courses and programming language</h1>
<ul>
<li>courses
<ol>
<li>DataBases system</li>
<li>Operating system</li>
<li>Web Design 1 and 2</li>
</ol>
</li>
<li>programming language
<ol>
<li>Java</li>
<li>C#</li>
<li>HTML</li>
</ol>
</li>
</ul>
</body>
</html>

 2008 Pearson Education, Inc. All rights reserved.


2.10 Tables
 Tables are frequently used to organize data into rows
and columns.
 The table element defines an HTML5 table
 The summary attribute summarizes the table’s
contents and is used by speech devices to make the
table more accessible to users with visual
impairments.
 The caption element specifies a table’s title.
 It’s good practice to include a general description of a
table’s information in the table element’s summary
attribute—one of the many HTML5 features that make
web pages more accessible to users with disabilities.
 Speech devices use this attribute to make the table more
accessible to users with visual impairments.

7
 2008 Pearson Education, Inc. All rights reserved.
<!DOCTYPE html>
<html>
<body>
<caption><strong>student first name (1st column) and
last name (2nd column) the grades (third colummn)</strong></caption>
<table border="1" style="width:100%">
<thead>
<tr> <!-- inserts a table row -->
<!-- insert a heading cell -->
<th>firstname</th>
<th>lastname</th>
<th>grades</th>
</tr>
</thead>
<tr>
<td>ahmed</td>
<td>ali</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
 2008 Pearson Education, Inc. All rights reserved.
2.10 Tables (Cont.)
 A table can be split into three distinct
sections:
 Head (thead element)
 Table titles
 Column headers
 Body (tbody element)
 Primary table data
 Table Foot (tfoot element)
 Calculation results
 Footnotes
 Above body section in the code, but displays at the
bottom in the page

9
 2008 Pearson Education, Inc. All rights reserved.
2.10 Tables (Cont.)
 tr Element
 Defines individual table rows
 Element th
 Defines a header cell
 Td Element
 Contains table data elements

10
 2008 Pearson Education, Inc. All rights reserved.
2.10 Tables (Cont.)
Using rowspan and colspan with Tables
 introduces two new attributes that allow you to build more

complex tables.
 You can merge data cells with the rowspan and colspan attributes

 The values of these attributes specify the number of rows or


columns occupied by the cell.
 Can be placed inside any data cell or table header cell.

11
 2008 Pearson Education, Inc. All rights reserved.
Table Cells that Span Many Columns Table Cells that Span Many Rows
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <body>
</head> <h2>Cell that spans two rows:</h2>
<body> <table border="1" style="width:50%">
<h2>Cell that spans two columns:</h2> <tr>
<table border="1" style="width:100%"> <th>First Name:</th>
<tr> <td>Bill Gates</td>
<th>Name</th> </tr>
<th colspan="2">Telephone</th> <tr>
</tr> <th rowspan="2">Telephone:</th>
<tr> <td>555 77 854</td>
<td>Bill Gates</td> </tr>
<td>555 77 854</td> <tr>
<td>555 77 855</td> <td>555 77 855</td>
</tr> </tr>
</table> </table>
</body> </body>
</html > </html>

 2008 Pearson Education, Inc. All rights reserved.


2.11 Forms
 HTML5 provides forms for collecting
information from users to be sent to server.

<form>
.
input elements
.
</form>
 HTML Forms - The Input Element
 The most important form element is the <input>
element.
 An <input> element can vary in many ways, depending
on the type attribute.
 An <input> element can be of type text field, checkbox,
password, radio button, submit button

13
 2008 Pearson Education, Inc. All rights reserved.
2.11 Forms
input types :Text Fields
<input type="text"> defines a one-line input
field that a user can enter text into:
Example:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

 2008 Pearson Education, Inc. All rights reserved.


2.11 Forms
 input types :Password Field

<input type="password"> defines a password


field:
 Example:

<form>
Password: <input type="password" name="pwd">
</form>

 2008 Pearson Education, Inc. All rights reserved.


2.11 Forms
input types : Radio Buttons
<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a
limited number of choices:
Example:
<form>
<input type="radio" name=“gender“ value="male“ >
Male<br>
<input type="radio" name=“gender" value=
"female">Female
</form>

 2008 Pearson Education, Inc. All rights reserved.


2.11 Forms
input types : Checkboxes
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE
options of a limited number of choices.
Example:
<form>
<input type="checkbox" name="vehicle" value="Bike">I
have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I
have a car 
</form>

 2008 Pearson Education, Inc. All rights reserved.


2.11 Forms
 input types : Submit Button
<input type="submit"> defines a submit button.
 A submit button is used to send form data to a server.

The data is sent to the page specified in the form's action


attribute. The file defined in the action attribute usually
does something with the received input:
Example
<form name="input" action="demo_form_action.asp"
method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

 2008 Pearson Education, Inc. All rights reserved.


<!DOCTYPE html>
<!-- Form with a text field and hidden fields. -->
<html>
<head>
<meta charset = "utf-8">
<title>Forms</title>
</head>
<body>
<h1>Feedback Form</h1>
<p>Please fill out this form to help us improve our site.</p>

<!-- this tag starts the the form, gives the -->
<!-- method of sending information and the -->
<!-- location of the form-processing script -->

<form method = "post" action = "http://www.deitel.com">


<!-- hidden inputs contain non-visual -->
<!-- information that will also be submitted -->
<input type = "hidden" name = "recipient" value = "[email protected]">
<input type = "hidden" name = "subject" value = "Feedback Form">
<input type = "hidden" name = "redirect" value = "main.html">
<!-- <input type = "text"> inserts a text field -->
<p><label>Name:
<input name = "name" type = "text" size = "25" maxlength = "30">
</label></p>

 2008 Pearson Education, Inc. All rights reserved.


<p>
<!-- input types "submit" and "reset" insert -->
<!-- buttons for submitting and clearing the -->
<!-- form's contents, respectively -->
<input type = "submit" value = "Submit">
<input type = "reset" value = "Clear">
</p>
</form>
</body>
</html>

 2008 Pearson Education, Inc. All rights reserved.


 2008 Pearson Education, Inc. All rights reserved.
2.11 Forms (Cont.)
method Attribute of the form Element
 A form is defined by a form element

 Attribute method specifies how the form’s data is


sent to the web server.
 Using method = "post" appends form data to the
browser request, which contains the protocol
(HTTP) and the requested resource’s URL.
 The other possible value, method = "get",
appends the form data directly to the end of the
URL of the script, where it’s visible in the browser’s
Address field.
 The action attribute of the form element specifies
the script to which the form data will be sent

22
 2008 Pearson Education, Inc. All rights reserved.
2.11 Forms (Cont.)
action Attribute of the form Element
 The action attribute of the form element
specifies the script to which the form data will be
sent.
 Since we haven’t introduced server-side
programming yet, we set this attribute to
http://www.deitel.com for now.
 input elements that specify data to provide to the
script that processes the form (also called the
form handler).
 An input’s type is determined by its type
attribute.

23
 2008 Pearson Education, Inc. All rights reserved.
2.11 Forms (Cont.)
Hidden Inputs
 Forms can contain visual and nonvisual
components.
 Visual components include clickable buttons and
other graphical user interface components with
which users interact.
 Nonvisual components, called hidden inputs,
store any data that you specify, such as e-mail
addresses and HTML5 document file names that
act as links.

24
 2008 Pearson Education, Inc. All rights reserved.
2.11 Forms (Cont.)
text input Element
 The text input inserts a text field into the form,
which allows the user to input data.
 The label element provides users with
information about the input element’s purpose
 The size attribute specifies the number of
characters visible in the text field.
 Optional attribute maxlength limits the number
of characters input into a text field.

25
 2008 Pearson Education, Inc. All rights reserved.
2.11 Forms (Cont.)
submit and reset input Elements
 The submit input element is a button.
 When the submit button is pressed, the form’s data is
sent to the location specified in the form’s action
attribute.
 The value attribute sets the text displayed on the
button.
 The reset input element allows a user to reset all
form elements to their default values.

26
 2008 Pearson Education, Inc. All rights reserved.
2.11 Forms (Cont.)
Additional Form Elements
 Figure 2.15 contains a form that solicits user
feedback about a website.
 The textarea element inserts a multiline text
area into the form.
 The number of rows is specified with the rows
attribute, and the number of columns (i.e.,
characters per line) with the cols attribute.
 Default text can be specified in other input
types, such as text fields, by using the value
attribute.

27
 2008 Pearson Education, Inc. All rights reserved.
<!DOCTYPE html>
<!-- Fig. 2.15: form2.html -->
<!-- Form using a variety of components. -->
<html>
<head>
<meta charset = "utf-8">
<title>More Forms</title>
</head>
<body>
<h1>Feedback Form</h1>
<p>Please fill out this form to help us improve our site.</p>

<form method = "post" action = "http://www.deitel.com">

<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><label>Name:
<input name = "name" type = "text" size = "25">
</label></p>

 2008 Pearson Education, Inc. All rights reserved.


<!-- <textarea> creates a multiline textbox -->
<p><label>Comments:<br/>
<textarea name = "comments“ rows = "4" cols = "36">Enter comments here.</textarea>
</label></p>
<!-- <input type = "password"> inserts a -->
<!-- textbox whose display is masked with asterisk characters -->
<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>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>
 2008 Pearson Education, Inc. All rights reserved.
<!-- <input type = "radio"> creates a radio -->
<!-- button. The difference between radio buttons and checkboxes is that only one radio
button -->
<!-- in a group can be selected. -->
<p>
<strong>How did you get to our site?:</strong><br>
<label>Search engine
<input name = "howtosite" type = "radio“ value = "search engine" 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>
</p>
<p>
<label>Rate our site:
<!-- the <select> tag presents a drop-down list with choices indicated by the -->
<!-- <option> tags -->
<select name = "rating">

 2008 Pearson Education, Inc. All rights reserved.


<option 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>
</p>
<p>
<input type = "submit" value = "Submit">
<input type = "reset" value = "Clear">
</p>
</form>
</body>
</html
 2008 Pearson Education, Inc. All rights reserved.
 2008 Pearson Education, Inc. All rights reserved.
2.11 Forms (Cont.)
 The checkbox input element enables users to select
and option.
 When the checkbox is selected, a check mark appears in the
checkbox . Otherwise, the checkbox is empty
 checkboxes can be used individually and in groups.
checkboxes that are part of the same group have the same
name
 radio buttons are similar to checkboxes, except
that only one radio button in a group can be selected
at any time.
 All radio buttons in a group have the same name attribute but
different value attributes.
 The select input provides a drop-down list of items.
 The name attribute identifies the drop-down list.
 The option element adds items to the drop-down list.

33
 2008 Pearson Education, Inc. All rights reserved.
2.11 Forms (Cont.) (Textarea)
<p>Tell us about yourself:<br/>
<textarea rows="10" cols="40" name="about">
I love building web sites in PHP and MySQL.
</textarea>
</p>

34
 2008 Pearson Education, Inc. All rights reserved.
2.11 Forms (Cont.) (Mselelection)
<p>Which are awesome?<br/>
<select multiple="multiple" name="code[]">
<option value="python">Python</option>
<option value="css">CSS</option>
<option value="html">HTML</option>
<option value="php">PHP</option>
</select>

35
 2008 Pearson Education, Inc. All rights reserved.
2.11 Forms (Cont.) (Mselelection)
<p>Which are awesome?<br/>
<select multiple="multiple" name="code[]">
<option value="python">Python</option>
<option value="css">CSS</option>
<option value="html">HTML</option>
<option value="php">PHP</option>
</select>

36
 2008 Pearson Education, Inc. All rights reserved.
Forms: More HTML 5 inputs
<input type="color" name="favcolor" value="#0000ff"><br/>
Birthday:
<input type="date" name="bday" value="2013-09-02"><br/>
E-mail:
<input type="email" name="email"><br/>
Quantity (between 1 and 5):
<input type="number" name="quantity"
min="1" max="5"><br/>
Add your homepage:
<input type="url" name="homepage"><br>

 2008 Pearson Education, Inc. All rights reserved.

You might also like