Home > Chapter Review and Exercises > Chapter 4 - Creating a simple page
Chapter 4 introduces HTML and its syntax via a series of five steps that create a simple web page. You can work along with exercises that show the effects HTML tags and a style sheet have on the way the document is rendered in the browser. Revealing effects in small increments shows which parts of the code are responsible for the final product.
In Chapter 4, you will learn the following:
How to configure TextEdit (macOS) and Notepad (Windows) for HTML documents
A feel for how markup works and how browsers interpret it
The recommended minimal structure of an HTML5 document
How to name files correctly
The importance of a descriptive title
The syntax for elements, empty elements, and attributes
Why semantic markup is important
Block and inline elements
HTML comments
How images are added to the page
The effect of a style sheet on the presentation of the page
Troubleshooting tips for HTML
syntax
The rules for how code must be structured to function properly.
markup
The tags added around content that describe the semantic meaning and function of the content.
tag
Consists of the element name (usually an abbreviation of a longer descriptive name) within angle brackets (< >).
element
Consists of both the content and its markup (the start and end tags).
empty element
An element that does not contain content, but provides a directive or embeds an external resource on the page.
attribute
Instructions that clarify or modify an element.
document type declaration (DOCTYPE)
Code at the beginning of an HTML document that tells the browser what version of HTML the document is written in.
root element
The element that contains all the elements and content in the document. In HTML documents, the html element is the root element.
document head
The section of the HTML document, defined with the head element, that contains elements pertaining to the document that are not part of the rendered content.
document body
The section of the HTML document, defined by the body element, that contains all the content that displays in the browser.
metadata
Information about the document, provided with the meta element in the head of the document.
character set
A standardized collection of letters, numbers, and symbols.
coded character set
A standardized collection of characters with their reference numbers (code points).
character encoding
The manner in which characters are converted to bytes for use by computers.
Unicode (Universal Character Set)
A super-character set that contains characters from all active modern languages.
HTTP header
Information about the document that the server sends to the user agent before sending the actual document.
semantic markup
Marking up a document in a way that provides the most meaningful description of the content and its function.
DOM (Document Object Model)
An API for accessing and manipulating the elements and attributes in the document based on the document structure.
Boolean attribute
An attribute that describes a feature that is either on or off. In HTML syntax, Boolean attributes may be written as a single word (such as checked for a form input element).
valid HTML
HTML that is written according to all the syntax rules for its declared version of HTML, without errors.
validator tools
Software that checks an HTML source against the specification to be sure it is valid and error-free.
4-1: Entering content
Students type in several paragraphs of text and open the document in the browser without any HTML markup. In the resulting page, everything runs together because line breaks are ignored.
4-2: Adding minimal structure
Minimal structure markup is added to the sample (DOCTYPE, html, head, title, meta, body). When viewed in the browser, the only difference is the title is added in the browser tab. Content is unaffected.
4-3: Defining text elements
Markup identifying basic text elements (h1, h2, p, and em) is added to the sample document. When displayed in the browser, the headings are now distinct from the paragraphs due to the browser’s built-in default style sheet.
4-4: Adding an image
A logo image is added to the page with the img element.
4-5: Adding a style sheet
Students add a few style rules in a style element in the head of the document. Viewing the page in the browser shows how its presentation has changed. This is the first introduction to style rules in the book. These particular styles were chosen because they are intuitive even if you don’t know CSS. It is easy to compare the rules to the results.