1. Getting Started with HTML5

2. The Structure of an HTML5 Document
New Perspectives on HTML and CSS, 6th Edition

3. Exploring the History of the World Wide Web
A network is a structure linking computers together for the purpose of sharing information and services
Users typically access a network through a computer called a node or host
A host that provides information or a service is called a server
New Perspectives on HTML and CSS, 6th Edition

4. Exploring the History of the World Wide Web
A computer or other device that receives a service is called a client
One of the most commonly used designs is the client-server network
If the computers that make up a network are close together (within a single department or building), then the network is referred to as a local area network (LAN)
New Perspectives on HTML and CSS, 6th Edition

5. Exploring the History of the World Wide Web
A network that covers a wide area, such as several buildings or cities, is called a wide area network (WAN)
The largest WAN in existence is the Internet
Today the Internet has grown to include an uncountable number of networks and hosts involving computers, mobile phones, PDAs, MP3 players, gaming systems, and television stations
New Perspectives on HTML and CSS, 6th Edition

6. Exploring the History of the World Wide Web
Timothy Berners-Lee and other researchers at the CERN nuclear research facility near Geneva, Switzerland laid the foundations for the World Wide Web, or the Web, in 1989
They developed a system of interconnected hypertext documents that allowed their users to easily navigate from one topic to another
Hypertext is a method of organization in which data sources are interconnected through a series of links or hyperlinks that users can activate to jump from one piece of information to another
New Perspectives on HTML and CSS, 6th Edition

7. Web Pages and Web Servers
Each document on the World Wide Web is referred to as a Web page
Web pages are stored on Web servers, which are computers that make Web pages available to any device connected to the Internet
A Web browser retrieves the page from the Web server and renders it on the user’s computer or other device
The earliest browsers, known as text-based browsers, were incapable of displaying images
New Perspectives on HTML and CSS, 6th Edition

8. Introducing HTML
A Web page is a text file written in Hypertext Markup Language
A markup language is a language that describes the content and structure of a document by identifying, or tagging, different elements in the document
New Perspectives on HTML and CSS, 6th Edition

9. The History of HTML
The first popular markup language was Standard Generalized Markup Language (SGML)
In the early years of HTML, Web developers were free to define and modify HTML in whatever ways they thought best
New Perspectives on HTML and CSS, 6th Edition

10. The History of HTML
A group of Web designers and programmers, called the World Wide Web Consortium, or the W3C, created a set of standards or specifications that all browser manufacturers were to follow
The W3C has no enforcement power
The recommendations of the W3C are usually followed since a uniform approach to Web page creation is beneficial to everyone
New Perspectives on HTML and CSS, 6th Edition

11. The History of HTML
Older features of HTML are often deprecated, or phased out, by the W3C That does not mean you can’t continue to use them—you may need to use them if you are supporting older browsers
Current Web developers are increasingly using XML (Extensible Markup Language)
XML is a metalanguage like SGML, but without SGML’s complexity and overhead
New Perspectives on HTML and CSS, 6th Edition

12. The History of HTML
New Perspectives on HTML and CSS, 6th Edition

13. HTML and Style Sheets
HTML marks the different parts of a document, but it does not indicate how document content should be displayed by browsers
For this reason, the exact appearance of each page element is described in a separate document known as a style sheet
Internal style sheets specify the appearance of different HTML elements
New Perspectives on HTML and CSS, 6th Edition

14. Tools for Creating HTML Documents
Basic text editor such as Windows Notepad
Other software programs that enable you to create documents in different formats, such as Microsoft Word or Adobe Acrobat, include tools to convert their documents into HTML for quick and easy publishing on the Web
Web publishing software manages all of the code and extended features of your site
New Perspectives on HTML and CSS, 6th Edition

15. Entering Elements and Attributes
An HTML document is composed of elements that represent distinct items in the Web page, such as a paragraph, the page heading, or even the entire body of the page itself
Elements are marked by one or more tags
A two-sided tag is a tag that contains some document content. General syntax for a two-sided tag:
<element>content</element>
New Perspectives on HTML and CSS, 6th Edition

16. Marking Elements with Tags
A two-sided tag’s opening tag (<p>) and closing tag (</p>) should completely enclose its content
Elements can contain other elements
Tags cannot overlap
<p>Welcome to the J-Prop Shop</p>
New Perspectives on HTML and CSS, 6th Edition

17. Adding an Attribute to an Element
To add an element attribute, use the format
<element attribute1=”value1” attribute2=”value2” ...>content</element>
where attribute1, attribute2, etc. are the names of attributes associated with the element, and value1, value2, etc. are the values of those attributes
New Perspectives on HTML and CSS, 6th Edition

18. White Space and HTML
HTML file documents are composed of text characters and white space
White space is the blank space, tabs, and line breaks within the file
HTML treats each occurrence of white space as a single blank space
You can use white space to make your document more readable
New Perspectives on HTML and CSS, 6th Edition

19. Exploring the Structure of an HTML File
<html> <head> head content </head> <body> body content </body> </html>
New Perspectives on HTML and CSS, 6th Edition

20. The Structure of an HTML File
An HTML document is divided into two main sections: the head and the body
The head element contains information about the document, for example the document title or the keywords
The content of the head element is not displayed within the Web page
New Perspectives on HTML and CSS, 6th Edition

21. The Structure of an HTML File
The body element contains all of the content to appear on the Web page
The body element can contain code that tells the browser how to render the content
New Perspectives on HTML and CSS, 6th Edition

22. Converting an HTML Document into XHTML
There is considerable overlap between HTML and XHTML
You can convert an HTML file into an XHTML file by replacing the opening <html> tag with the following three lines of code:
<?xml version="10" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Strict//EN“ “
<html xmlns=
New Perspectives on HTML and CSS, 6th Edition

23. The Document Type Declaration
Prior to the opening <html> tag, many HTML files also include a Document Type Declaration, or doctype, to indicate the type of markup language used in the document
<!DOCTYPE html>
New Perspectives on HTML and CSS, 6th Edition

24. Defining the Page Title
New Perspectives on HTML and CSS, 6th Edition

25. Adding Comments The comment tag adds notes to your HTML code
Comments can be spread over several lines
Comments are useful in documenting your HTML code for yourself and others
New Perspectives on HTML and CSS, 6th Edition

26. Adding Comments
New Perspectives on HTML and CSS, 6th Edition

27. Displaying an HTML File
As you continue modifying the HTML code, you should occasionally view it with your Web browser to verify that you have not introduced any errors
You may want to view the results using different browsers to check for compatibility
New Perspectives on HTML and CSS, 6th Edition

28. Displaying an HTML File
New Perspectives on HTML and CSS, 6th Edition

29. Defining the Structure of the Page Body
New Perspectives on HTML and CSS, 6th Edition

30. Defining the Structure of the Page Body
New Perspectives on HTML and CSS, 6th Edition

31. Marking Structural Elements in HTML5
To mark the page header, use the header element
To mark the page footer, use the footer element
To mark a main section of page content, use the section element
To mark a sidebar, use the aside element
To mark an article, use the article element
New Perspectives on HTML and CSS, 6th Edition

32. Marking a Section with the div Element
New Perspectives on HTML and CSS, 6th Edition

33. Page Content Elements
New Perspectives on HTML and CSS, 6th Edition

34. Working with Grouping Elements
New Perspectives on HTML and CSS, 6th Edition

35. Working with Grouping Elements
Grouping elements are elements that contain content that is viewed as a distinct block within the Web page
Heading elements are block-level elements that contain the text of main headings on the Web page
<hn>content<hn>
n is an integer between 1 and 6
<h1> is the largest heading
<h6> is the smallest heading
New Perspectives on HTML and CSS, 6th Edition

36. Marking Grouping Content
To mark a heading, enter
<hn>content</hn>
where n is an integer from 1 to 6 and content is the text of heading
To mark a paragraph, enter
<p>content</p>
To mark a block quote, enter
<blockquote>content</blockquote>
New Perspectives on HTML and CSS, 6th Edition

37. Adding Headings
New Perspectives on HTML and CSS, 6th Edition

38. Marking Paragraph Elements
New Perspectives on HTML and CSS, 6th Edition

39. Marking a Block Quote The syntax for making an extended quote is
<blockquote>content</blockquote>
New Perspectives on HTML and CSS, 6th Edition

40. Marking an Address <address>content</address>
New Perspectives on HTML and CSS, 6th Edition

41. Marking a List
HTML supports three kinds of lists: ordered, unordered, and description
You use an ordered list for items that must appear in a numerical order
You use an unordered list for items that do not need to occur in any special order
One list can contain another list. This is called a nested list
New Perspectives on HTML and CSS, 6th Edition

42. Description Lists
The description list contains a list of terms, each followed by the term’s description
Web browsers typically display the definition description below the definition term and slightly indented:
Basic Stick
Easiest stick to learn
New Perspectives on HTML and CSS, 6th Edition

43. Applying an External Style Sheet
Style sheets are written in the Cascading Style Sheet (CSS) language
To apply an external style sheet to a Web page, you create a link within the document head to the style sheet file using the link element
<link href=”file” rel=”stylesheet” type=”text/css” />
New Perspectives on HTML and CSS, 6th Edition

44. Linking to a JavaScript File
New Perspectives on HTML and CSS, 6th Edition

45. Marking Text-Level Elements
New Perspectives on HTML and CSS, 6th Edition

46. Using the Generic Elements div and span
HTML supports two such generic elements: div and span
The div element is used to mark general grouping content
The span element is used to mark general text-level content
New Perspectives on HTML and CSS, 6th Edition

47. Marking a Line Break
New Perspectives on HTML and CSS, 6th Edition

48. Inserting an Inline Image
New Perspectives on HTML and CSS, 6th Edition

49. Working with Character Sets and Special Characters
To insert a symbol based on the encoding number, use the entity
&#code;
where code is the encoding number.
To insert a symbol based on a character entity reference, use the entity
char;
where char is the name assigned to the character.
To insert a nonbreaking space, use the following entity:
To insert the < symbol, use the following entity:
<
To insert the > symbol, use the following entity:
>
New Perspectives on HTML and CSS, 6th Edition

50. Working with Character Sets and Special Characters
New Perspectives on HTML and CSS, 6th Edition

51. Specifying a Character Set
New Perspectives on HTML and CSS, 6th Edition

52. Developing a Basic Web Site

53. Creating Hyperlinks
New Perspectives on HTML and CSS

54. Hierarchical Structures
New Perspectives on HTML and CSS

55. Mixed Structures
As Web sites become larger and more complex, you often need to use a combination of several different structures
The overall form can be hierarchical, allowing the user to move from general to specific; however, the links also allow users to move through the site in a linear fashion
A site index is a page containing an outline of the entire site and its contents
New Perspectives on HTML and CSS

56. Mixed Structures
New Perspectives on HTML and CSS

57. Protected Structures
Sections of most commercial Web sites are off-limits except to subscribers and registered customers
New Perspectives on HTML and CSS

58. Creating a Navigation List
Every Web site should include a navigation list, which is a list containing links to the main topic areas of the site
HTML5 introduced the nav structural element to make it easier to mark up navigation lists
New Perspectives on HTML and CSS

59. Creating a Hypertext Link
Hypertext links are created by enclosing some document content within a set of opening and closing <a> tags
To mark content as a hypertext link, use
<a href=”reference”>content</a>
where reference is the location being linked to and content is the document content that is being marked as a link
New Perspectives on HTML and CSS

60. Creating a Hypertext Link
Figures 2-11 – 2-12
New Perspectives on HTML and CSS

61. Attributes of the a Element
New Perspectives on HTML and CSS

62. Specifying a Folder Path
New Perspectives on HTML and CSS

63. Specifying a Folder Path
To create a link to a file located in a different folder than the current document, you must specify the file’s location, or path
An absolute path specifies a file’s precise location within a computer’s entire folder structure
A relative path specifies a file’s location in relation to the location of the current document
If the file is in the same location as the current document, you do not have to specify the folder name
If the file is in a subfolder of the current document, you have to include the name of the subfolder
New Perspectives on HTML and CSS

64. Specifying a Folder Path
If you want to go one level up the folder tree, you start the relative path with a double period (..), a forward slash, and then provide the name of the file
To specify a different folder on the same level, known as a sibling folder, you move up the folder tree using the double period (..) and then down the tree using the name of the sibling folder
You should almost always use relative paths in your links
New Perspectives on HTML and CSS

65. Specifying a Folder Path
New Perspectives on HTML and CSS

66. Setting the Base Path
A browser resolves relative paths based on the location of the current document
You can change this behavior by using the base element to specify a different starting location for all relative paths
To set the default location for a relative path, add the element
<base href=”path” />
to the document head, where path is the folder location that you want browsers to use when resolving relative paths in the current document
New Perspectives on HTML and CSS

67. Marking Locations with the id Attribute
To jump to a specific location within a document, you first need to mark that location
One way to identify elements in an HTML document is to use the id attribute
Id names must be unique
Id names are not case sensitive
New Perspectives on HTML and CSS

68. Linking to Locations within Documents
New Perspectives on HTML and CSS

69. Linking to an id <a href=”#id”>content</a>
Once you’ve marked an element using the id attribute, you can create a hypertext link to that element using the a element
<a href=”#id”>content</a>
New Perspectives on HTML and CSS

70. Creating Links between Documents
To create a link to a specific location in another file, enter the code
<a href="reference#id">content</a>
where reference is a reference to an HTML or XHTML file and id is the id of an element marked within that file
New Perspectives on HTML and CSS

71. Creating Links between Documents
New Perspectives on HTML and CSS

72. Image Maps and External Links
New Perspectives on HTML and CSS

73. Working with Linked Images and Image Maps
A standard practice on the Web is to turn the Web site’s logo into a hypertext link pointing to the home page
<a href="reference"><img src="file" alt="text" /></a>
Thumbnail images are small representations of larger image files
HTML also allows you to divide an image into different zones, or hotspots, each linked to a different destination
New Perspectives on HTML and CSS

74. Working with Linked Images and Image Maps
New Perspectives on HTML and CSS

75. Working with Linked Images and Image Maps
To define these hotspots, you create an image map that matches a specified region of the inline image to a specific destination
HTML supports two kinds of image maps:
Client-side image maps
Server-side image maps
New Perspectives on HTML and CSS

76. Client-Side Image Maps
A client-side image map is inserted in an image map defined in the Web page
The Web browser locally processes the image map
Because all of the processing is done locally, you can easily test Web pages
More responsive than server-side maps
The browser’s status bar displays the target of each hotspot
Older browsers do not support client-side images
New Perspectives on HTML and CSS

77. Server-Side Image Maps
In a server-side image map, the image map is stored on the Web server
Server-side image maps are supported by most graphical browsers
Server-side image maps can be slow to operate
The browser’s status bar does not display the target of each hotspot
New Perspectives on HTML and CSS

78. Introducing URLs
To create a link to a resource on the Internet, you need to know its URL
A Uniform Resource Locator (URL) specifies the precise location and type of a resource on the Internet
A protocol is a set of rules defining how information is passed between two resources
New Perspectives on HTML and CSS

79. Introducing URLs
Your Web browser communicates with Web servers using the Hypertext Transfer Protocol (HTTP)
The URLs for all Web pages must start with the http scheme
Other Internet resources use different protocols and have different scheme names
New Perspectives on HTML and CSS

80. Internet Protocols
New Perspectives on HTML and CSS

81. A sample URL for a Web page
Linking to a Web Site
A sample URL for a Web page
New Perspectives on HTML and CSS

82. Linking to a Web Site
If a URL includes no path, then it indicates the topmost folder in the server’s directory tree
If a URL does not specify a filename, the server searches for the default home page
The server name portion of the URL is also called the domain name
The top level, called an extension, indicates the general audience supported by the Web server
<a href=" Photo</a>
New Perspectives on HTML and CSS

83. Linking to a Web Site
New Perspectives on HTML and CSS

84. Linking to FTP Servers
FTP servers are another method of storing and sharing files on the Internet
FTP servers transfer information using a communications protocol called File Transfer Protocol (FTP)
An FTP server requires each user to enter a password and a username to access its files
New Perspectives on HTML and CSS

85. Linking to FTP Servers
New Perspectives on HTML and CSS

86. Linking to a Local File
On occasion, you may see the URL for a file stored locally on your computer or local area network
If you are accessing a file from your own computer, the server name might be omitted and replaced by an extra slash (/)
The file scheme here does not imply any particular communication protocol; instead the browser retrieves the document using whatever method is the local standard for the type of file specified in the URL
New Perspectives on HTML and CSS

87. Linking to an E-Mail Address
Many Web sites use to allow users to communicate with a site’s owner, sales representative, or technical support staff
You can turn an address into a hypertext link; when a user clicks the link, the user’s program opens and automatically inserts the address into the “To” field of the new outgoing message
New Perspectives on HTML and CSS

88. Linking to an E-Mail Address
The mailto protocol also allows you to add information to the , including the subject line and the text of the message
mailto:address?header1=value1&header2=value2& ...
This%20is%20a%20test%20message
Spaces are replaced with the %20 character code since URLs cannot contain blank spaces
New Perspectives on HTML and CSS

89. Linking to an E-Mail Address
If you need to include an address in your Web page, you can take a few steps to reduce problems with spam:
Replace all addresses in your page with inline images of those addresses
Write a program in a language JavaScript to scramble any address in the HTML code
Replace the characters of the address with escape characters (character codes)
New Perspectives on HTML and CSS

90. Linking to an E-Mail Address
New Perspectives on HTML and CSS

91. Working with Hypertext Attributes
HTML provides several attributes to control the behavior and appearance of your links
You can force a document to appear in a secondary window or tab by adding the target attribute to the tag <a> tag
If you want to provide additional information to your users, you can provide a tooltip to your links
A tooltip is a descriptive text that appears whenever a user positions the mouse pointer over a link
New Perspectives on HTML and CSS

92. Working with Hypertext Attributes
New Perspectives on HTML and CSS

93. Working with Hypertext Attributes
New Perspectives on HTML and CSS