Web Programming 02ALL

Web Programming
CS333-CS644
Dr Safa’a Saleh
1
Lecture 2
HTML5 (HyperText 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
6
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.
7
8
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.
9
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 .
10
html, head and body Elements
 The html element encloses the head section (represented by the
head element) and the body section (represented by the body
element).
 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 body section contains the page’s content, which the browser
displays when the user visits the web page.
11
Start Tags and End Tags
HTML5 documents delimit most elements with a start tag and end tag.
A start tag consists of the element name in angle brackets
 For example, <html>
An end tag consists of the element name preceded by a forward slash (/)
in angle brackets
 For example, </html>
There are several so-called “void elements” that do not have end tags.
Many start tags have attributes that provide additional information about
an element, which browsers use to determine how to process the element.
Each attribute has a name and a value separated by an equals sign (=).
12
Title Element
The title element is called a nested element, because it’s
enclosed in the head element’s start and end tags.
The head element is also a nested element, because it’s
enclosed in the html element’s start and end tags.
The title element describes the web page.
 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
14
Paragraph Element (<p>...</p>)
All text placed between the <p> and </p> tags forms
one paragraph.
15
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
16
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.
17
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.
19
The strong element indicates that the content has high
importance. Browsers typically render such text in a bold font.
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.
21
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.
22
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)
The img element’s src attribute specifies an image’s location
Every img element must have an alt attribute, which
contains text that is displayed if the client cannot render
the image
 Width and height are optional attributes
If omitted, the browser uses the image’s actual width and height
Images are measured in pixels
25
alt Attribute
A browser may not be able to render an image.
Every img element in an HTML5 document must have an alt
attribute.
If a browser cannot render an image, the browser displays the
alt attribute’s value.
27
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, lines 15–16 of Fig. 2.6 could be written as
follows:
<img src = "jhtp.png" width = "92" height = "120"
alt = "Java How to Program book cover" />
28
Using Images as Hyperlinks
By using images as hyperlinks, you can create
graphical web pages that link to other resources.
In Fig. 2.7, we create five different image hyperlinks.
Clicking an image in this example takes the user to a
corresponding web page—one of the other examples
in this chapter.
29
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
31
Unordered list element ul
 creates a list in which each item in the list begins with a
bullet symbol (typically a disc)
32
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.
34
 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.
37
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
38
tr Element
 Defines individual table rows
 Element th
Defines a header cell
Td Element
 Contains table data elements
39
Using rowspan and colspan with Tables
Figure 2.13 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.
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.
42
HTML5 provides forms for collecting information
from users.
Figure 2.14 is a simple form that sends data to the
web server for processing.
46
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
48
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.
49
Inputs
50
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.
51
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.
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.
52
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.
53
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.
60
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.
61
Try these form elements
62
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.
64
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
70

Web Programming 02ALL

Uploaded by

Copyright:

Available Formats

Web Programming 02ALL

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Programming 02ALL

Uploaded by

Copyright:

Available Formats

Web Programming

We introduce some basics, then cover more

The document type declaration (DOCTYPE) is

Some browsers operate in quirks mode to maintain

submit and reset input Elements

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.