CHS Web Design Track

The Structure of an HTML5 Document

Exploring the World Wide Web

Network

A network is a structure in which information and services are shared among devices

Host or a node

A host or a node can be any device that is capable of sending and/or receiving data electronically

Server

A server is a host that provides information or a service to other devices on the network

Client

A computer or other device that receives a service is called a client

Client-server network

In a client-server network, clients access information provided by one or more users

Local area network

A network confined to a small geographic area, such as within a building or department

Wide Area Network (WAN)

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
• 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

Web Pages and Web Servers

Web page

Each document on the web is referred to as a web page

web servers

Web pages are stored on web servers

Web browser

Documents on the web are accessed through a software program called a web browser

Introducing HTML

HTML (Hypertext Markup Language)

A Web page is a text file written in HTML (Hypertext Markup Language)

Markup language

A markup language describes the content and structure of a document by identifying, or tagging, different document elements

The History of HTML

• In the early years of HTML, browser developers were free to define and modify the language as no rules or syntax were defined
• The World Wide Web Consortium, or the W3C, created a set of standards or specifications for all browser manufacturers 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
• XHTML (Extensible Hypertext Markup Language) is a different version of HTML enforced with a stricter set of standards
• HTML5 was developed as the de facto standard for the next generation of HTML
• Older features of HTML are often deprecated, or phased out; you may need to use them if you are supporting older browsers

Tools for Working with HTML

• Basic text editor such as Windows Notepad
• Other HTML editors such as Notepad++, UltraEdit, CoffeeCup, BBEdit, and ConTEXT

IDE (Integrated Development Environment)

A software package that provides comprehensive coverage of all phases of the development process from writing HTML code to creating scripts for programs running on web servers

Validators

are programs that test code to ensure that it contains no syntax errors

Exploring an HTML File

To open the ct_start.html file:

1. Use the editor of your choice to open the ct_start.html file from the html01 > tutorial folder.
2. Scroll through the document to become familiar with its content but do not make any changes to the text.

The Document Type Declaration

The first line in an HTML file is the document type declaration, or doctype, that indicates the type of markup language used in the document

Introducing Element Tags

Element

tag is the fundamental building block in every HTML document that marks an element in the document

A starting tag (<element>)

indicates the beginning of an element

Ending tag (</element>)

indicates the ending

The general syntax of a two-sided element tag is:

The following code marks a paragraph element

Empty elements

are elements that are either nontextual (images) or contain directives to the browser about how the page should be treated

− For example, <br /> is used to indicate the presence of a line break in the text

The Element Hierarchy

<!DOCTYPE html> 
<html> 
    <head> 
        head content 
    </head> 
    <body> 
        body content 
    </body> 
</html>

• An HTML document is divided into two main sections: the head and the body
• The head element marks information about the document
• The body element marks the content that will appear in the web page
• The body element is always placed after the head element

Introducing Element Attributes

Element attributes

provide additional information to the browser about the purpose of the element

The general syntax of an element attribute

<element attr1=”value1” attr2=”value2” ...> content</element>
where attr1, attr2, etc. are the names of attributes associated with the element and value1, value2, etc., are the attribute values

Handling White Space

• HTML file documents are composed of text characters and white space
• A white-space character is any empty or blank character such as a space, tabs, or a line break
• You can use white space to make your file easier to read by separating one code block from another

Viewing HTML File in a Browser

To open the ct_start.html file in a web browser:

1. Open your web browser. You do not need to be connected to the Internet to view local files stored on your computer.
2. After your browser loads its home page, open the ct_start.html file from the html01 > tutorial folder.
3. Reduce the width of your browser window and note that when the width falls below a certain value (in this case 480 pixels), the layout automatically changes to a stacked row of images (as shown in the mobile device image in Figure 1-4) that are better suited to the narrower layout.
4. Increase the width of the browser window and confirm that the layout changes to a 2x3 grid of images (as shown in the tablet device image in Figure 1-4), which is a design more appropriate for the wider window.

To begin writing the HTML file:

1. Using the editor of your choice, create a new blank HTML file in the html01 > tutorial folder, saving the file as ct_about.html.
2. Enter the following code into the file:

   <!DOCTYPE html>
   <html>
       <head>
       </head>
       <body>
       </body>
   </html>
                           

3. Save your changes to the file.

• HTML describes a document's content and structure, but not its appearance
• The actual appearance of the document is determined by style sheets

Creating the Document Head

Setting the Page Title

To insert the document title:

1. Directly after the opening tag, insert the following title element, indented to make the code easier to read.
   <title>About Curbside Thai</title>
2. Save your changes to the file.

Adding Metadata to the Document

Meta

element is used for general lists of metadata values. The meta element structure is <meta attributes />

Character encoding

is the process by which a computer converts text into a sequence of bytes and vice versa when it stores the text and when the text is read

To insert metadata:

1. Directly after the opening <head> tag, insert the following meta elements, indented to make the code easier to read:
   

   <meta charset=”utf-8” /> 
   <meta name=”keywords” content=”Thai, restaurant, Charlotte, food” />

2. Save your changes to the file.
3. Open the ct_about.html file in your browser. Confirm that the browser tab or rowser title bar contains the text “About Curbside Thai”. There should be no text displayed in the browser window because you have not added any content to the page body yet.

Adding Comments to Your Document

Comment

A comment is descriptive text that is added to the HTML file but does not appear in the browser window <!--comment -->

• Comments can be spread across several lines
• It is a good practice to always include a comment in the document head

To add a comment to the document:

1. Return to the ct_about.html file in your HTML editor.
2. Directly after the opening <head> tag, insert the following comment text, indented to make the code easier to read:
   

   <!-- 
       New Perspectives on HTML5 and CSS3, 7th Edition  Tutorial 1 
       Tutorial Case 
       General Information about Curbside Thai  Author: your name 
       Date:   the date 
       Filename: ct_about.html 
       -->

   where your name is your name and the date is the current date. Figure 1-10 highlights the newly added comment in the file
3. Save your changes to the file.

Session 1.1 Quick Check

1. What is a markup language?
2. What is XHTML? How does XHTML differ from HTML?
3. What is the W3C? What is the WHATWG?
4. What is a doctype? What is the doctype for an HTML5 document?
5. What is incorrect about the following code? Suggest a possible revision of the code to correct the error.

   <p><strong>Curbside Thai now delivers!</p></strong>

6. Provide code to mark Curbside Thai Employment Opportunities as the document title.
7. Provide code to create metadata adding the keywords food truck, North Carolina, and dining to the document.
8. Provide code to tell the browser that the character encoding UTF-16 is used in the document.
9. Provide code to add the comment Created by Sajja Adulet to the document.