Understand important components of HTML5
documents.
Use HTML5 to create web pages.
Add images to web pages.
Create and use hyperlinks to help users
navigate web pages.
Mark up lists of information.
Create tables with rows and columns of data.
Create and use forms to get user input.
HTML5 (HyperText Markup Language 5)
▪ markup language that specifies the structure and
content of documents that are displayed in web
browsers
HTML只管內容與結構，不管呈現之格式
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
We’ll create HTML5 documents by typing
HTML5 markup text in a text editor (such as
Visual Studio Code, Notepad++, sublime,
atom, TextEdit, vi, emacs) and saving it with
the .html or .htm filename extension.
使用一般記事本即可編輯 亦可用線上可視化編輯器：
HTML5，建議使用Visual [Link]
Studio Code [Link]
可再用HTML Formatter整理：
[Link]
[Link] 4
Figure 2.1 is an HTML5 document named
[Link], which is stored in the
examples/ch02 folder.
This first example displays the message
Welcome to HTML5! in the browser.
5
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.
7
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 -->.
8
html, head and body Elements
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.
Markup就像是用螢光筆在書上標記
HTML5的markup可用來表達Hypertext的結構與意義
9
▪ 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.
10
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” (empty element)
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 (=).
11
14
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
13
16
Paragraph Element (<p>...</p>)
Alltext 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.,
[Link]/#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
20
21
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.
20
23
24
The strong element indicates that the content
has high importance. Browsers typically render
such text in a bold font.
(此類tag可少用，之後以CSS替代其功能)
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
▪ an e-mail address
If the web server cannot locate a requested
document
It returns an error indication to the web browser (known
as a 404 error) 23
26
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.
[Link]
25
28
30
The most popular image formats used by web
developers today are PNG (Portable Network
Graphics) and JPEG (Joint Photographic Experts
Group).
Images may also be acquired from various
websites, many of which offer royalty-free
images.
28
32
33
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
31
•這是一個放大縮小圖片的重要工具
•也可以讓圖片載入更快！
•需要考慮是否跨裝置顯示都符合預期
35
36
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 = "[Link]" width = "92" height = "120"
alt = "Java How to Program book cover" />
34
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.
35
39
40
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
38
43
44
45
46
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 & and &, respectively.
emojis: [Link]
43
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.
44
49
50
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.
47
52
53
54
55
▪ 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.
52
57
58
59
60
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
57
tr Element
▪ Defines individual table rows
th Element
▪ Defines a header cell
Td Element
▪ Contains table data elements
58
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 rendered 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. 59
64
65
66
67
HTML5 provides forms for collecting
information from users.
Figure 2.14 is a simple form that sends data
to the web server for processing.
Form name, date,
url, etc..
New Page
Server 64
69
70
71
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
•與Server端銜接後會更清楚知道method與action的用處
•目前可以暫時不用放這兩個attribute 68
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
[Link] 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.
69
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.
•目前hidden input會較少用到
•日後與Server銜接後hidden input會成為解決一些難題的重要工具
70
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.
可輸入的文字長度
71
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.
將Form當中的data送到server端某一支Server Script程式(如
[Link], JSP, [Link]或PHP)
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.
72
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.
73
78
79
80
81
82
83
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.
80
The checkbox input element enables users to
select options. (多選題)
▪ 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
The 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.
81
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.
82
83
84
85
86
iframe用於在網頁內顯示網頁(嵌入網頁)。
<iframe src="URL"></iframe>
▪ 在src放入要嵌入的網頁網址
▪ YouTube與GoogleMap都允許此方式把影片或地圖加到
我們的網頁中
87
YouTube影片可選[分享]->[嵌入]
88
再把iframe code複製到網頁中即可。
▪ 若選“開始處”則嵌入的影片會從目前的時間開始播放。
89
90
Google Map可點[選單]->[分享或嵌入地圖]
90
91
選[嵌入地圖]，即可得到iframe code，再複製到我
們的html中。
91
MDN
▪ [Link]
W3schools
▪ [Link]
HTML速查
▪ [Link]
HTML Tutorial
▪ [Link]
網頁程式設計基礎課程
▪ [Link]
92