HTML (Part1)
HTML (Part1)
3
2008 Pearson Education, Inc. All rights reserved.
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.
4
2008 Pearson Education, Inc. All rights reserved.
Using TextEdit in MacOS:
https://www.lifewire.com/edit-html-with-textedit-3469900
6
2008 Pearson Education, Inc. All rights reserved.
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 (=).
7
2008 Pearson Education, Inc. All rights reserved.
HTML5 markup contains text (and images, graphics, animations,
audios and videos) that represents the content of a document and
elements that specify a document’s structure and meaning.
9
2008 Pearson Education, Inc. All rights reserved.
All text placed between the <p> and </p>
tags forms one paragraph.
10
2008 Pearson Education, Inc. All rights reserved.
2008 Pearson Education, Inc. All rights reserved.
2008 Pearson Education, Inc. All rights reserved.
HTML5 documents that are syntactically
correct are guaranteed to render properly.
HTML5 documents that contain syntax errors
validator.w3.org/#validate-by-upload)
ensure that an HTML5 document is
syntactically correct
13
2008 Pearson Education, Inc. All rights reserved.
A hyperlink references or links to other
resources, such as HTML5 documents and
images.
14
2008 Pearson Education, Inc. All rights reserved.
Links are created using the <a> (anchor) element.
18
2008 Pearson Education, Inc. All rights reserved.
2008 Pearson Education, Inc. All rights reserved.
2008 Pearson Education, Inc. All rights reserved.
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
(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.
21
2008 Pearson Education, Inc. All rights reserved.
2008 Pearson Education, Inc. All rights reserved.
2008 Pearson Education, Inc. All rights reserved.
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
The alt attribute makes web pages more
accessible to users with disabilities, especially
vision impairments
Width and height are optional attributes
If omitted, the browser uses the image’s actual width
and height
Images are measured in pixels
24
2008 Pearson Education, Inc. All rights reserved.
2008 Pearson Education, Inc. All rights reserved.
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.
The alt attribute is also important for
accessibility—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.
26
2008 Pearson Education, Inc. All rights reserved.
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" />
27
2008 Pearson Education, Inc. All rights reserved.
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
28
2008 Pearson Education, Inc. All rights reserved.
HTML5 provides character entity references
(in the form &code;) for representing special
characters that cannot be rendered
otherwise
30
2008 Pearson Education, Inc. All rights reserved.
Figure 2.9 demonstrates how to use special
characters in an HTML5 document.
32
2008 Pearson Education, Inc. All rights reserved.
2008 Pearson Education, Inc. All rights reserved.
2008 Pearson Education, Inc. All rights reserved.
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.
36
2008 Pearson Education, Inc. All rights reserved.
2008 Pearson Education, Inc. All rights reserved.
2008 Pearson Education, Inc. All rights reserved.
Nested Lists
ordered lists.
The ordered-list element <ol> creates a list
39
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.
Tables are frequently used to organize data into rows and columns.
44
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.
A table can be split into three distinct sections:
Foot (<tfoot> element)
Head (<thead> Body (<tbody> Calculation results.
element). element). Footnotes.
Table titles Primary table Above body section in the
Column headers. data. code, but displays at the
bottom in the page.
<tr> Element
Defines individual table rows
Element <th>
Defines a header cell
<td> Element
Contains table data elements
49
2008 Pearson Education, Inc. All rights reserved.
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.
50
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.
Forms
HTML5 provides forms for collecting
information from users.
55
2008 Pearson Education, Inc. All rights reserved.
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
58
2008 Pearson Education, Inc. All rights reserved.
action Attribute of the form Element
59
2008 Pearson Education, Inc. All rights reserved.
Hidden Inputs
Forms can contain visual and nonvisual components.
60
2008 Pearson Education, Inc. All rights reserved.
text input Element
The <input> of type text inserts a text field into
the form, which allows the user to input data.
61
2008 Pearson Education, Inc. All rights reserved.
submit and reset input Elements
62
2008 Pearson Education, Inc. All rights reserved.
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.
63
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.
2008 Pearson Education, Inc. All rights reserved.
The input of type “password” inserts a
password box into a form.
70
2008 Pearson Education, Inc. All rights reserved.
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.
71
2008 Pearson Education, Inc. All rights reserved.
2008 Pearson Education, Inc. All rights reserved.
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.
73
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.
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
78
2008 Pearson Education, Inc. All rights reserved.
2008 Pearson Education, Inc. All rights reserved.