New Perspectives: HTML5 and CSS3, 7th Edition

Two-Sided Element Tag

<element>content</element>

@import

@import is a CSS at-rule used to import the content of a style sheet file: @import url(url), where url is the URL of an external stylesheet file

HTML (Hypertext Markup Language)

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

Client

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

Absolute Units

Absolute units are fixed in size regardless of the output device and are used only with printed media.

Text/Background Colors

CSS defines the text and background color for each element on a webpage color: color; background-color: color;

Character Set

Character set is a collection of characters and symbols rendered by the browser

Color Values

Color values are values in which the color is given by an exact numeric representation

Contextual Selectors

Contextual selectors specify the context under which a particular page element is matched. Context is based on the hierarchical structure of a document, which involves the relationships between a parent element containing one or more child elements and within those child elements several levels of descendant elements

Web Browser

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

Element Attributes

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

Embedded Styles

Embedded styles are added to the head of an HTML document

External Styles

External styles are created by a website author, placed within a CSS file, and linked to the page

Semantic Elements

HTML marks the major topical areas of a page using sectioning elements also referred to as semantic elements.

HTML5

HTML5 was developed as the de facto standard for the next generation of HTML.

Client-Server Network

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

Opacity

Opacity defines how solid a color appears. A color's opacity is specified using the following properties: rgba(red, green, blue, opacity) hsla(hue, saturation, lightness, opacity)

Progressive Enhancement

Progressive enhancement is a technique of placing the code conforming to elder standards before newer properties.

Sibling Selectors

Sibling selectors are used to select elements based on elements that are adjacent to them in the document hierarchy

Specific vs. General Fonts

Specific font is identified by name and based on a font definition file stored in a user's computer or accessible on the web. Generic font describes the general appearance of the characters in the text but does not specify any particular font definition file.

Style Inheritance

Style inheritance is a process in which properties are passed from a parent element to its children

World Wide Web Consortium (W3C)

The World Wide Web Consortium, or the W3C, created a set of standards or specifications for all browser manufacturers to follow. In the early years of HTML, browser developers were free to define and modify the language as no rules or syntax were defined.

Style Sheets

The actual appearance of the document is determined by style sheets

font-family property

The general structure of defining font for any page element is font-family: fonts; where fonts is a comma-separated list, also known as a font stack

General Syntax of CSS Style Rule

The general syntax of a CSS style rule is selector{ property1: value1; property2: value2; ... }

Style Specificity

The more specific style rule has precedence over the more general style rule. Specificity is an issue when two or more styles conflict. If two rules have equal specificity and equal importance, then the one that is defined last has precedence

Scheme: Location

The type of resource that a hypertext link points to is indicated by the link's URL--scheme: location. Examples: tel:# or mailto:address

World Wide Web (WWW)

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

@font-face rule

To access and load a web font, add the @font-face rule to the style sheet. Once a web font is defined using the @font-face rule, it is included in the font stack.

Linking a Style Sheet

To link an HTML document to an external style sheet file, add the following element: <link href="file" rel="stylesheet" />

Wildcard Selector

To match any element, a wildcard selector with the * character is used

Typography

Typography is the art of designing the appearance of characters and letters on a page

Validators

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

Vendor Prefixes

Vendor prefixes indicate the browser vendor that created and supports the style property.

Web Fonts

Web fonts are supplied to the browser in an external file because web safe fonts limit the number of fonts choices.

Web Server

Web pages are stored on web servers.

XHTML (Extensible Hypertext Markup Language)

XHTML (Extensible Hypertext Markup Language) is a different version of HTML enforced with a stricter set of standards.

<pre>

contains a block of preformatted text in which line breaks and extra spaces in the code are restrained (often displayed in monospace font)

<div>

contains a generic grouping of elements within the document

<li>

contains a single item from an ordered or unordered list

<dt>

contains a single term from a description list

<figure>

contains an illustration, photo, diagram, or similar object that is cross-referenced elsewhere in the document

<ol>

contains an ordered list of items

<ul>

contains an unordered list of items

<footer>

contains closing content that concludes an article or section

<header>

contains the opening content that introduces an article or section

<p>

contains the text of a paragraph

HTML comment

descriptive note added to the HTML file

<dl>

marks a description list containing one or more dt elements with each followed by one or more dd elements

<nav>

marks a list of hypertext or navigation links

<article>

marks a self-contained composition in the document such as a newspaper story

<hr>

marks a thematic break such as a scene change or a transition to a new topic (often displayed as a horizontal rule)

<address>

marks contact information for an individual or group

<aside>

marks content that is related to a main article

<html> tag

marks the beginning of the HTML document

<body> tag

marks the document body containing all the content that will appear on the page

<head> tag

marks the document head containing information about the document

closing tag

marks the end of the element content

opening tag

marks the start of the element content

Document Type Declaration

processing instruction indicating the markup language used in the document

Server

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

Markup Language

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

Network

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

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

Tools for Working with HTML

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

Browser Extensions

Browser extensions are an extended library of style properties in the browser

Browser Styles

Browser styles or user agent styles are built into the browser

Character Encoding

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.

Character Entity Reference

Character entity reference is also used to insert a special symbol using the syntax &char, where char is the character's entity reference

IDE (Integrated Development Environment)

IDE (Integrated Development Environment) is the 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

Inline Styles

Inline styles are added as element attributes within an HTML document and applied to only that particular element

CSS3

Latest version of the CSS language

Attribute Selectors

Selectors also can be defined based on attributes and attribute values within elements: id - Identifies specific elements within the document class- Identifies a group of elements that share a similar characteristic or property

<blockquote>

contains content that is quoted from another source, often with a citation and often indented on the page

<figcaption>

contains the caption associated with a figure

<dd>

contains the description or definition associated with a term from a description list

<body>

contains the entire content of the document

<section>

marks content that shares a common theme or purpose on the page

<h1>, <h2>...<h6>

marks major headings with <h1> representing the heading with the highest rank, <h2> representing next highest-ranked heading, and so on

<meta> tag

marks metadata containing information about the document

<main>

marks the main content of the document or application; only one main element should be used in the document

<title> tag

marks the page title that appears on the browser title bar or browser tab

Host

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

Local Area Network (LAN)

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

User-Defined Styles

User-defined styles are defined by a user based on the configuration setting of the user's browser

White-Space Character

A white-space character is any empty or blank character such as a space, tabs, or a line break. HTML file documents are composed of text characters and white space.

Empty Elements

Empty elements are elements that are either non-textual (images) or contain directives to the browser about how the page should be treated.

Web Page

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

Modules

Each module is focused on a separate design topic. CSS3 is built upon several modules.

Hexadecimal numbers

Hexadecimal numbers are expressed in the base 16 numbering system

Hue

Hue is the tint of a color, represented by a direction on a color wheel

<a>

Hypertext is created by enclosing content within a set of opening and closing <a> tags like: <a href="url">content</a>. Inline images can also be turned into links by enclosing the image within opening and closing <a> tags: <a href="ct_start.html"><img src="ct_logo2.png" /></a>.

Lightness

Lightness measures the brightness of a color and ranges from 0% (black) up to 100% (white)

Linking to Web Resources

Links to Web resources have a general structure like: http://server/path/filename#id, where server is the name of the web server hosting the resource, path is the path to the file on that server, filename is the name of the file, and if necessary, id is the name of an id within a file

Protocol

Protocol is a set of rules defining how information is passed between two devices

RGB Triplet

RGB triplet is the intensity of primary colors expressed as a set of numbers in CSS: rgb(red, green, blue)

Saturation

Saturation measures the intensity of a color and ranges from 0% (no color) up to 100% (full color)

Hypertext

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.

Inline Images

To support embedded content, content imported from another resource, HTML provides embedded elements. Inline images are images that are placed like text-level elements in line with the surrounding content. To embed an inline image into the document, use <img src="file" alt="text" />.