CS495 Design of Web-based

Applications

Chapter 2
Introduction to HTML
Internet & World Wide Web How to Program, 5/e
Faculty of Computers and Information Technology

Future University in Egypt (FUE)

Chapter Objective
Chapter Structure

© 2008 Pearson Education, Inc. All rights reserved.

2.1 Introduction
⦁ HTML5 (Hyper Text Markup Language 5)
▪ markup language that specifies the structure and content of
documents that are displayed in web browsers
⦁ We introduce some basics, then cover more
sophisticated HTML5 techniques such as:
▪ tables, which are particularly useful for structuring information
from databases (i.e., software that stores structured sets of
data)
▪ forms for collecting information from web-page visitors
▪ internal linking for easier page navigation
▪ meta elements for specifying information about a document
2.2 Editing HTML5
⦁ We’ll create HTML5 documents by typing HTML5 markup text in
a text editor (such as Notepad, TextEdit, vi, emacs) and saving it
with the .html or .htm filename extension.
⦁ Computers called web servers store HTML5 documents.
⦁ Clients (such as web browsers running on your local computer or
smartphone) request specific resources such as HTML5
documents from web servers.
2.3 First HTML Example
2.3 First HTML Example
⦁ Document Type Declaration
⦁ The document type declaration (DOCTYPE) is required in HTML5
documents so that browsers render the page in standards mode.
⦁ Some browsers operate in quirks mode to maintain backward
compatibility with web pages that are not up-to-date with the latest
standards.
⦁ Comments
⦁ Insert comments in your HTML5 markup to improve readability and
describe the content of a document.
⦁ The browser ignores comments when your document is rendered.
⦁ Comments start with <!-- and end with -->.
⦁ HTML Element
▪ The HTML element encloses the head section (represented by the
head element) and the body section (represented by the body
element). © 2008 Pearson Education, Inc. All rights reserve9d.
2.3 First HTML Example
▪ HEAD Section
▪ The head section contains information about the HTML5 document,
such as the character set (UTF-8, the most popular character-
encoding scheme for the web) that the page use—which helps the
browser determine how to render the content—and the title.
▪ The head section also can contain special document-formatting
instructions called CSS3 style sheets and client-side programs
called scripts for creating dynamic web pages.
▪ The head element is called a nested element, because it’s enclosed
in the html element’s start and end tags.

© 2008 Pearson Education, Inc. All rights reserve9d.

2.3 First HTML Example
▪ Title Element
▪ The title element describes the web page, it is also a nested element,
because it’s enclosed in the head element’s start and end tags.
▪ Titles usually appear in the title bar at the top of the browser
window, in the browser tab on which the page is displayed, and also
as the text identifying a page when users add the page to their list of
Favorites or Bookmarks, enabling them to return to their favorite
sites.
▪ Search engines use the title for indexing purposes and when
displaying results
▪ Body Section
▪ The body section contains the page’s content, which the browser
displays when the user visits the web page.

© 2008 Pearson Education, Inc. All rights reserve9d.

2.3 First HTML Example
▪ Paragraph Element (<p>...</p>)
⦁ All text placed between the <p> and </p> tags forms one
paragraph.
▪ Body Section
▪ The body section contains the page’s content, which the browser
displays when the user visits the web page.

© 2008 Pearson Education, Inc. All rights reserve9d.

2.4 W3C HTML5 Validation Services
⦁ HTML5 documents that are syntactically correct are guaranteed
to render properly
⦁ HTML5 documents that contain syntax errors may not display
properly
⦁ Validation services (e.g., validator.w3.org/ #validate-by-upload)
ensure that an HTML5 document is syntactically correct

© 2008
Pearson
Education,
2.5 Headings
⦁ HTML5 provides six heading elements (h1 through h6) for
specifying the relative importance of information
▪ Heading element h1 is considered the most significant heading
and is rendered in the largest font.
▪ Each successive heading element (i.e., h2, h3, etc.) is rendered in
a progressively smaller font.

© 2008 Pearson Education, Inc. All rights reserv1e9d.

2.5 Headings

© 2008 Pearson Education, Inc. All rights reserved.

2.6 Linking
⦁ A hyperlink references or links to other resources, such as HTML5 documents and images.

⦁ Web browsers typically underline text hyperlinks and color them blue by default.
⦁ Links are created using the a (anchor) element.

⦁ Attribute href (hypertext reference) specifies a resource’s location, such as

▪ a web page or location within a web page
▪ a file
▪ an e-mail address

⦁ When a URL does not indicate a specific document on the website, the web server returns
a default web page. This page is often called index.html, but most web servers can be
configured to use any file as the default web page for the site.
⦁ If the web server cannot locate a requested document, it returns an error indication to the
web browser (known as a 404 error), and the browser displays a web page containing an
error message. © 2008 Pearson Education, Inc. All rights reserv2e4d.
2.6 Linking
⦁ The strong element indicates that the content has high importance. Browsers typically
render such text in a bold font.

© 2008 Pearson Education, Inc. All rights reserv2e4d.

Hyperlinking to an E-Mail Address
▪ Anchors can link to an e-mail address using a mailto: URL
• When a user clicks this type of anchored link, most browsers launch the
default e-mail program (e.g., Mozilla Thunderbird, Microsoft Outlook or Apple
Mail) to enable the user to write an e-mail message to the linked address.

© 2008 Pearson Education, Inc. All rights reserv2e9d.

Hyperlinking to an E-Mail Address

© 2008 Pearson Education, Inc. All rights reserv2e9d.

2.7 Images
⦁ The most popular image formats used by web developers today are PNG (Portable Network
Graphics) and JPEG (Joint Photographic Experts Group).
⦁ Users can create images using specialized software, such as Adobe Photoshop Express
(www.photoshop.com), G.I.M.P. (www.gimp.org), Inkscape (www.inkscape.org) and many more.

⦁ Images may also be acquired from various websites, many of which offer royalty-free images.

© 2008 Pearson Education, Inc. All rights reserv3e3d.

2.7 Images

© 2008 Pearson Education, Inc. All rights reserved.

2.7 Images
⦁ The img element’s src attribute specifies an image’s location
⦁ Every img element in an HTML5 document must have an alt attribute, which contains
text that is displayed if the client cannot render the image
▪ The alt attribute makes web pages more accessible to users with disabilities,
especially vision impairments—speech synthesizer software can speak the alt
attribute’s value so that a visually impaired user can understand what the browser
is displaying. For this reason, the alt attribute should describe the image’s
contents.
▪ Width and height are optional attributes
• If omitted, the browser uses the image’s actual width and height
• Images are measured in pixels

© 2008 Pearson Education, Inc. All rights reserv3e7d.

2.7 Images

© 2008 Pearson Education, Inc. All rights reserved.

2.7 Images
Void Elements
• Some HTML5 elements (called void elements) contain only attributes and do not
mark up text (i.e., text is not placed between a start and an end tag).
• You can terminate void elements (such as the img element) by using the forward
slash character (/) inside the closing right angle bracket (>) of the start tag.
⦁ For example:
<img src = "jhtp.png" width = "92" height = "120" alt = "Java How to
Program book cover" />

Using Images as Hyperlinks

• By using images as hyperlinks, you can create graphical web pages that link to other
resources.

© 2008 Pearson Education, Inc. All rights reserved.

2.7 Images

© 2008 Pearson Education, Inc. All rights reserved.

2.7 Images

© 2008 Pearson Education, Inc. All rights reserved.

2.8 Special Characters and Horizontal
Rules
⦁ HTML5 provides character entity references (in the form &code;) for representing special
characters that cannot be rendered otherwise
⦁ The code can be:
▪ Word abbreviations
▪ Numbers
• Decimal
• Hexadecimal
⦁ For an extensive list of character entities, see
www.w3.org/TR/REC-html40/sgml/entities.html

© 2008 Pearson Education, Inc. All rights reserv4e6d.

2.8 Special Characters and Horizontal
Rules

© 2008 Pearson Education, Inc. All rights reserved.

2.8 Special Characters and Horizontal
Rules

© 2008 Pearson Education, Inc. All rights reserved.

2.8 Special Characters and Horizontal
Rules
⦁ A horizontal rule, indicated by the <hr> tag renders a horizontal line with extra space above
and below it in most browsers.
⦁ The horizontal rule element should be considered a legacy element and you should avoid
using it.
⦁ CSS can be used to add horizontal rules and other formatting to documents.

⦁ Special characters can also be represented as numeric character references—decimal or

hexadecimal (hex) values representing special characters.
▪ For example, the & character is represented in decimal and hexadecimal notation as &#38;
and &#x26;, respectively.
⦁ Hexadecimal numbers are discussed in Appendix E, Number Systems, which is available
online at www.deitel.com/books/iw3htp5/.
© 2008 Pearson Education, Inc. 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.

⦁ Ordered list element ol

▪ creates a list in which each item in the list begins with a number (typically 1)
2.9 Lists

© 2008 Pearson Education, Inc. All rights reserved.

2.9 Lists
Nested Lists
⦁ Lists may be nested to represent hierarchical relationships, as in a multi-
level outline.
⦁ The ordered-list element ol creates a list in which each item begins with
a number.

© 2008 Pearson Education, Inc. All rights reserv5e6d.

© 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—one of the many
HTML5 features that is used by speech devices to make the table more
accessible to users with visual impairments.
▪ The caption element specifies a table’s title.

© 2008 Pearson Education, Inc. All rights reserv6e1d.

© 2008 Pearson Education, Inc. All rights reserved.
2.10 Tables
⦁ 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
⦁ tr Element
• Defines individual table rows
⦁ Element th
🞄 Defines a header cell
⦁ Td Element
© 2008 Pearson Education, Inc. All rights reserved.
• Contains table data elements
2.10 Tables
Using rowspan and colspan with 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.

• The br element is render as a line break in most browsers—any markup or text

following a br element is rendered on the next line.
• Like the img element, br is an example of a void element.
• Like the hr element, br is considered a legacy formatting element that you should
avoid using—in general, formatting should be specified using CSS.

© 2008 Pearson Education, Inc. All rights reserved.

© 2008 Pearson Education, Inc. All rights reserved.
© 2008 Pearson Education, Inc. All rights reserved.
2.11 Forms
⦁ HTML5 provides forms for collecting information from users.

© 2008 Pearson Education, Inc. All rights reserved.

2.11 Forms

© 2008 Pearson Education, Inc. All rights reserved.

2.11 Forms
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 © 2008 Pearson Education, Inc. All rights reserved.
2.11 Forms
action Attribute of the form Element
• The action attribute of the form element specifies the script to which
the form data will be sent.
• 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.

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.
© 2008 Pearson Education, Inc. All rights reserved.
2.11 Forms
text input Element
The text input inserts a text field into the form, which allows the user to input data.
Password input Element
⦁ The password input inserts a password box into a form.
▪ Allows users to enter sensitive information, such as credit card numbers and
passwords, by “masking” the information input with another character, usually
asterisks.
▪ The actual value input is sent to the web server, not the asterisks that mask the input.

Label Element
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.
© 2008 Pearson Education, Inc. All rights reserved.
2.11 Forms
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.

Additional Form Elements

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

© 2008 Pearson Education, Inc. All rights reserved.

2.11 Forms
⦁ 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.

© 2008 Pearson Education, Inc. All rights reserved.

© 2008 Pearson Education, Inc. All rights reserved.
© 2008 Pearson Education, Inc. All rights reserved.
© 2008 Pearson Education, Inc. All rights reserved.
© 2008 Pearson Education, Inc. All rights reserved.
© 2008 Pearson Education, Inc. All rights reserved.
2.12 Internal Linking
⦁ The a tag can be used to link to another section of the same document by specifying the
element’s id as the link’s href.
⦁ To link internally to an element with its id attribute set, use the syntax #id.

© 2008 Pearson Education, Inc. All rights reserv9e3d.

© 2008 Pearson Education, Inc. All rights reserved.
2.13 Meta Elements
⦁ One way that search engines catalog pages is by reading the meta element’s contents.
▪ The name attribute identifies the type of meta element
▪ The content attribute
• Of a keywords meta element: provides search engines with a list of words that
describe a page, which are compared with words in search requests
• Of a description meta element: provides a three- to four-line description of a site in
sentence form, used by search engines to catalog your site. This text is sometimes
displayed as part of the search result

© 2008 Pearson Education, Inc. All rights reserv9e9d.

© 2008 Pearson Education, Inc. All rights reserved.
Questions?