Scribd
Upload
92 views

Ccsw321 Ch02 Html5 p1

This document discusses HTML5 markup language and provides examples of basic HTML5 code. It covers: - The basics of HTML5 for structuring documents and introducing more sophisticated techniques like tables, forms, internal linking and meta elements. - How to create HTML5 documents using a text editor and save them with the .html or .htm file extension for web servers to store and clients to request. - A first example HTML5 document that displays "Welcome to HTML5!" and explains the DOCTYPE, comments, HTML, head and body elements, start/end tags, and the title element. - Other code examples that demonstrate headings, links, images, special characters, and horizontal rules in HTML

Uploaded by

Aseil Nagro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
92 views

Ccsw321 Ch02 Html5 p1

This document discusses HTML5 markup language and provides examples of basic HTML5 code. It covers: - The basics of HTML5 for structuring documents and introducing more sophisticated techniques like tables, forms, internal linking and meta elements. - How to create HTML5 documents using a text editor and save them with the .html or .htm file extension for web servers to store and clients to request. - A first example HTML5 document that displays "Welcome to HTML5!" and explains the DOCTYPE, comments, HTML, head and body elements, start/end tags, and the title element. - Other code examples that demonstrate headings, links, images, special characters, and horizontal rules in HTML

Uploaded by

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

Chapter 2

Introduction to HTML5
Part 1
2.1 Introduction
 HTML5 (HyperText Markup Language 5) 
markup language that specifies the structure and 
content of documents displayed in web browsers
 Basics and more sophisticated HTML5 techniques as: 
tables: particularly useful for structuring information 
from databases (i.e., software that stores structured 
sets of data)
Forms: collect information from web‐page visitors
internal linking: easier page navigation
meta elements: specify information about a document

5
2.2 Editing HTML5
We’ll create HTML5 documents by typing HTML5 
markup text in a text editor (such as Notepad++, 
TextEdit, emacs) and saving it with the .html or .htm
filename extension.
Web servers store HTML5 documents. 
Clients (browsers on PC or smartphone) request specific 
resources such as HTML5 documents from web servers. 

6
2.3 First HTML5 Example

Figure 2.1 is an HTML5 document named main.html. 
This first example displays the message Welcome to 
HTML5! in the browser. 

7
2.3 First HTML5 Example
Document Type Declaration (DOCTYPE) 
 Required in HTML5 documents so browsers render 
the page in standards mode (W3C and IETF 
recommendations ). 
 Some browsers operate in Quirks mode to maintain 
backward compatibility with web pages that are not 
up‐to‐date with the latest standards. 

9
2.3 First HTML5 Example
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 -->. 

10
2.3 First Example
html, head and body Elements
 HTML5 contains text, 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 and the body elements. 
The head section contains information about the HTML5 
document (i.e. UTF‐8 character set encoding scheme); helps 
browsers determine how to render the content and the title. 
The head section also can contain the CSS3 style sheets and 
client‐side JavaScript 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
2.3 First Example (cont.)
Start Tags and End Tags
 HTML5 documents delimit 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 “void elements” that do not have end tags.
 Many start tags have attributes that provide more information 
about an element. Browsers use it to decide how to process it. 
 Attributes have name and value separated by an equal sign (=). 

12
2.3 First Example (Cont.)

Title Element
 The title element is called a nested element, For 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 .

 Search engines use the title for indexing purposes and when 
displaying results

14
2.3 First HTML5 Example (Cont.)
Paragraph Element (<p>...</p>)
 All text placed between the <p> and </p> tags forms 
one paragraph. <!DOCTYPE html>

<!-- Fig. 2.1: main.html -->


<!-- First HTML5 example. -->
<html>
<head>
<meta charset="UTF-8">
<title>Welcome</title>
</head>

<body>
<p>Welcome to HTML5!</p>
</body>
</html>

16
2.4 W3C HTML5 Validation Service

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

17
2.5 Headings
HTML5 provides six heading elements (h1 through h6) 
for specifying the relative importance of information
Heading element h1 is considered 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.

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

24
2.6 Linking (Cont.)
 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 web 
page or location in a web page, a file or 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 with an error message.

27
2.6 Linking (Cont.)
Hyperlinking to an E‐Mail Address
Anchors can link to an e‐mail address using 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. 

29
2.7 Images
 The most popular image formats used by web 
developers are PNG (Portable Network Graphics) and 
JPEG (Joint Photographic Experts Group). 
 Users can create images using specialized software, 
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.

33
2.7 Images (cont.)
 The img element’s src attribute specifies image’s 
location
 The img element must have an alt attribute, contains 
text displayed if the client cannot render the image
The alt attribute makes web pages more accessible 
to users with disabilities, mainly 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

37
2.7 Images (Cont.)
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.

40
2.7 Images (Cont.)
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 (as the img element) 
by using the forward slash character (/) inside the 
closing right angle bracket (>) of the start tag. 
 Example, 
<img src = "jhtp.png" width = "92" height = "120"
alt = "Java How to Program book cover" />

41
2.7 Images (Cont.)
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. 

42
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

46
2.8 Special Characters and Horizontal Rules
(Cont.)

 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‐tml40/sgml/entities.html

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

52
2.9 Lists (Cont.)
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.

55
2.10 Tables
Tables are frequently 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.

60
2.10 Tables (Cont.)
A table can be split into three distinct sections: 
Table Head (thead element)
Table titles
Column headers
Table 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

65
2.10 Tables (Cont.)
tr Element 
Defines individual table rows
Element th
Defines a header cell
td Element 
Contains table data elements

66
2.10 Tables (Cont.)
Using rowspan and colspan attributes 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 
 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.

67
2.11 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. 

72
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

76
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 server‐side programming is not introduced yet, 
the attribute is set to http://www.deitel.com.
input elements specifies data to provide to the script 
that processes the form (i.e. form handler).
An input’s type is determined by its type attribute. 

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

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

79
2.11 Forms (Cont.)
submit and reset input Elements
 The submit input and reset elements are buttons.
 When the submit button is pressed, the form’s data is 
sent to the location 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.

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

81
2.11 Forms (Cont.)
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.

88
2.11 Forms (Cont.)
 Type checkbox input element enables select options.
If selected, a check mark appears in the checkbox. 
Can be used individually and in groups.
checkboxes of same group have same name.
 radio buttons are similar to checkboxes, except only 
one radio button in a group is selected at any time.
All radio buttons of a group have the same name 
attribute.
 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.

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

92
2.13 meta Elements
Metadata is used by browsers (display content), search 
engines (catalogue pages), or other web services.
The name attribute identifies type of meta element
The content attribute
Of a keywords meta element: provides search 
engines with a list of words that describe pages, 
and 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 site. Sometimes 
displayed as part of the search result
98

You might also like