Scribd
Upload
9 views

HTML (Part1)

The document provides an introduction to HTML5, covering basics like the markup language's structure and elements, as well as more advanced techniques such as tables, forms, internal linking, and meta elements. It explains how to write HTML5 code using a text editor and web browser, and includes examples of key HTML5 elements and tags for text formatting, images, and hyperlinks.

Uploaded by

vnaif.otb
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
9 views

HTML (Part1)

The document provides an introduction to HTML5, covering basics like the markup language's structure and elements, as well as more advanced techniques such as tables, forms, internal linking, and meta elements. It explains how to write HTML5 code using a text editor and web browser, and includes examples of key HTML5 elements and tags for text formatting, images, and hyperlinks.

Uploaded by

vnaif.otb
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 80

Part 1

Internet & World Wide Web


How to Program, 5/e

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


 2008 Pearson Education, Inc. All rights reserved.
 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

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.

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

 This first example displays the message Welcome to


HTML5! in the browser.

4
 2008 Pearson Education, Inc. All rights reserved.
 Using TextEdit in MacOS:
https://www.lifewire.com/edit-html-with-textedit-3469900

 Using Notepad In Windows:


https://www.w3schools.com/html/html_editors.asp

 2008 Pearson Education, Inc. All rights reserved.


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

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.

 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.
8
 2008 Pearson Education, Inc. All rights reserved.
 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

9
 2008 Pearson Education, Inc. All rights reserved.
 All text placed between the <p> and </p>
tags forms one paragraph.

 HTML5 provides six heading elements (h1 through


h6) for specifying the 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.

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

may not display properly


 Validation services (e.g.,

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.

 Web browsers typically underline text


hyperlinks and color them blue by default.

14
 2008 Pearson Education, Inc. All rights reserved.
 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.
15
 2008 Pearson Education, Inc. All rights reserved.
Note:
 The strong element <strong>indicates that the content has high

importance. Browsers typically render such text in a bold font.

 2008 Pearson Education, Inc. All rights reserved.


 2008 Pearson Education, Inc. All rights reserved.
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.

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

user to a corresponding web page—one of


the other examples in this chapter.

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

 The code can be:


 Word abbreviations
 Numbers
 Decimal
 Hexadecimal

30
 2008 Pearson Education, Inc. All rights reserved.
 Figure 2.9 demonstrates how to use special
characters in an HTML5 document.

 For an extensive list of character entities,


see
www.w3.org/TR/REC-html40/sgml/entities.html

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.

 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.
35
 2008 Pearson Education, Inc. All rights reserved.
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.

36
 2008 Pearson Education, Inc. All rights reserved.
 2008 Pearson Education, Inc. All rights reserved.
 2008 Pearson Education, Inc. All rights reserved.
Nested Lists

 Lists may be nested to represent


hierarchical relationships, as in a multi-level
outline.
 Figure 2.11 demonstrates nested lists and

ordered lists.
 The ordered-list element <ol> creates a list

in which each item begins with a number.

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.

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

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.

 Figure 2.14 is a simple form that sends data


to the web server for processing.

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

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

59
 2008 Pearson Education, Inc. All rights reserved.
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.

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.

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

61
 2008 Pearson Education, Inc. All rights reserved.
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.

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.

 Default text can be specified in other input types,


such as text fields, by using the value 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.

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

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.

 To link internally to an element with its id


attribute set, use the syntax #id.

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.

You might also like