(HTML and CSS Visual QuickStart Guide, 8e Elizabeth Castro, Bruce Hyslop)
(Instructor Manual)
HTML5 & CSS Chapter 1: Webpage Building Blocks
Introduction
This chapter will introduce you to the basic building blocks of webpages. First, we
will identify and label the different parts that go into a webpage. A webpage is
primarily made up of three components: text content, references to other files,
and markup. In turn, HTML markup is composed of elements, attributes, and
values.
Best practices for working with HTML will also be considered and discussed. It is
important that you mark up your content with semantic HTML, and let CSS
control its appearance. Take the time to really understand the basics of building
webpages presented in this chapter. Next, you’ll be learning to work with
webpage files.
Objectives
When students have finished reading this chapter, they will be able to:
• Identify the basic building blocks of HTML webpages.
• Distinguish the different parts of HTML markup.
• Define best practices for building effective websites.
• Explain best practices for writing HTML.
• Mark up content with semantic HTML.
• Improve site accessibility and efficiency using semantic HTML.
• Explain CSS's role in HTML presentation.
• Create proper file and folder names.
,Definitions and Keywords
A element: Used to define a link to another page. Also known as the anchor element.
Absolute URL: Looks exactly the same, whether the reference is on your server or
another server.
Accessibility: The practice of making content available to all users, regardless of their
capabilities.
Alt attribute: Displays text if image doesn’t load.
Article element: Defines a distinct piece of content.
Attributes: Contains information about content without being content itself.
Block-level: HTML elements that display on their own line.
Child: An element enclosed in a parent element.
DOCTYPE: Identifies the version of HTML in page's content.
In-line: HTML elements that render in the same line as other content.
Markup: HTML elements that describe text content and make references work.
Elements: Describe different parts of a webpage.
Em element: Means “stress emphasis.” Dictates semantic, not visual, emphasis.
Empty (void) element: An element that doesn't surround any text content.
Extension: Tells a browser that it should read a text document as a webpage.
File name: Identifies a webpage for visitors and web browsers.
Heading element: Provides six heading levels to structure page's outline.
Img element: Primary choice for displaying an image.
P element: Used to mark up a paragraph.
Parent: An element that contains another element.
Phrasing content: Elements and their contained text that primarily appear within a
paragraph.
,Predefined (or enumerated) values: Value must be selected from a standard list of
choices.
Relative URL: URLs are relative to the file’s location on the server. Locates file by
referring to the location of the file that contains the URL reference.
Search engine optimization (SEO): A page's ranking in a search engine's results.
Semantic: Describes content’s meaning, not its display.
Semantic HTML: Refers to content that is marked up with the HTML elements that best
describe it and without regard for how the content should look.
Text content: Bare text that appears on the page.
URL: Uniform Resource Locator (URL) is a technical name for a web address. It contains
information about a file’s location and instructions for the browser.
Values: Numerical values paired with attributes.
, Quiz
Markup is the:
Information about the content.
Meaning of the content.
Bare text that appears on the page.
Link to other HTML pages and assets.
Text content is the:
Information about the content.
Meaning of the content.
Bare text that appears on the page.
Link to other HTML pages and assets.
HTML5 re-categorizes in-line elements as:
Block-level elements
Phrasing content
New categories that focus on semantics.
All of the above
The ____ element defines a distinct piece of content.
Heading
Anchor
Article
Em
P
The heading element provides _____ heading levels to structure
a page's outline.
Five
Six
Ten
Twelve
It is the most powerful element in all of HTML because it links pages and parts of
pages together, forming the web.
Em
A
Alt
H
HTML semantics matter because they:
Improve accessibility and interoperability.
Improve search engine optimization (SEO).
(Instructor Manual)
HTML5 & CSS Chapter 1: Webpage Building Blocks
Introduction
This chapter will introduce you to the basic building blocks of webpages. First, we
will identify and label the different parts that go into a webpage. A webpage is
primarily made up of three components: text content, references to other files,
and markup. In turn, HTML markup is composed of elements, attributes, and
values.
Best practices for working with HTML will also be considered and discussed. It is
important that you mark up your content with semantic HTML, and let CSS
control its appearance. Take the time to really understand the basics of building
webpages presented in this chapter. Next, you’ll be learning to work with
webpage files.
Objectives
When students have finished reading this chapter, they will be able to:
• Identify the basic building blocks of HTML webpages.
• Distinguish the different parts of HTML markup.
• Define best practices for building effective websites.
• Explain best practices for writing HTML.
• Mark up content with semantic HTML.
• Improve site accessibility and efficiency using semantic HTML.
• Explain CSS's role in HTML presentation.
• Create proper file and folder names.
,Definitions and Keywords
A element: Used to define a link to another page. Also known as the anchor element.
Absolute URL: Looks exactly the same, whether the reference is on your server or
another server.
Accessibility: The practice of making content available to all users, regardless of their
capabilities.
Alt attribute: Displays text if image doesn’t load.
Article element: Defines a distinct piece of content.
Attributes: Contains information about content without being content itself.
Block-level: HTML elements that display on their own line.
Child: An element enclosed in a parent element.
DOCTYPE: Identifies the version of HTML in page's content.
In-line: HTML elements that render in the same line as other content.
Markup: HTML elements that describe text content and make references work.
Elements: Describe different parts of a webpage.
Em element: Means “stress emphasis.” Dictates semantic, not visual, emphasis.
Empty (void) element: An element that doesn't surround any text content.
Extension: Tells a browser that it should read a text document as a webpage.
File name: Identifies a webpage for visitors and web browsers.
Heading element: Provides six heading levels to structure page's outline.
Img element: Primary choice for displaying an image.
P element: Used to mark up a paragraph.
Parent: An element that contains another element.
Phrasing content: Elements and their contained text that primarily appear within a
paragraph.
,Predefined (or enumerated) values: Value must be selected from a standard list of
choices.
Relative URL: URLs are relative to the file’s location on the server. Locates file by
referring to the location of the file that contains the URL reference.
Search engine optimization (SEO): A page's ranking in a search engine's results.
Semantic: Describes content’s meaning, not its display.
Semantic HTML: Refers to content that is marked up with the HTML elements that best
describe it and without regard for how the content should look.
Text content: Bare text that appears on the page.
URL: Uniform Resource Locator (URL) is a technical name for a web address. It contains
information about a file’s location and instructions for the browser.
Values: Numerical values paired with attributes.
, Quiz
Markup is the:
Information about the content.
Meaning of the content.
Bare text that appears on the page.
Link to other HTML pages and assets.
Text content is the:
Information about the content.
Meaning of the content.
Bare text that appears on the page.
Link to other HTML pages and assets.
HTML5 re-categorizes in-line elements as:
Block-level elements
Phrasing content
New categories that focus on semantics.
All of the above
The ____ element defines a distinct piece of content.
Heading
Anchor
Article
Em
P
The heading element provides _____ heading levels to structure
a page's outline.
Five
Six
Ten
Twelve
It is the most powerful element in all of HTML because it links pages and parts of
pages together, forming the web.
Em
A
Alt
H
HTML semantics matter because they:
Improve accessibility and interoperability.
Improve search engine optimization (SEO).
