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" />.