Web Development Study Guide: Lessons 1–3

How to use this guide

Use this guide after reading Lessons 1–3 and completing the related activities. For each lesson, practice defining the important terms, explaining why the concepts matter, and recognizing or writing the related HTML and CSS. Pay special attention to comparisons: each language, file type, hosting choice, and layout method has a particular purpose.

The ideas that connect Lessons 1–3

The lessons move from planning a Website, to writing its structure, to controlling its presentation:

Plan before building. Identify the audience, purpose, requirements, stakeholders, constraints, and success measures.
Separate responsibilities. HTML provides structure and meaning; CSS provides presentation; JavaScript provides behavior.
Use standards consistently. Choose a standard, write predictable markup, validate it, and test it in more than one environment.
Design for people. Accessibility, language, culture, device size, readability, and assistive technology are part of the requirements.

Lesson 1 — Markup Language and Site Development Essentials

The Web development trifecta

Technology	Primary responsibility
HTML5	Structures and gives meaning to Webpage content
CSS3	Controls presentation, formatting, and visual layout
JavaScript	Adds scripting, interaction, and dynamic behavior

Markup-language history and comparisons

Language	Main idea
SGML	A metalanguage used to define other markup languages; it describes document structure rather than visual appearance and traditionally uses a DTD.
HTML	A simpler markup language for Web documents and hyperlinks.
XML	Describes and exchanges structured data, including the function and context of information; it does not primarily format Webpages.
XHTML	Reformulates HTML using stricter XML-style rules so HTML documents can move toward XML compatibility.
HTML5	The modern HTML standard used to structure Web content; it adds semantic elements and native support for features such as audio and video.

SGML and XML describe the data and structure from which Webpages are created; they do not format Webpages. A metalanguage, such as SGML, is a language used to create other languages. The main goal of XHTML is to provide a transition from HTML to XML.

Remember the historical HTML 4.01 flavors:

Transitional allowed CSS and older formatting practices.
Strict required CSS-based presentation and rejected deprecated tags.
Frameset was used for pages built with frames.

HTML5 is not based on SGML and uses the short <!DOCTYPE html> declaration instead of older DTD-based declarations. XHTML remains useful historical context because it emphasizes lowercase names, strict nesting, and closing container tags.

Standards and accessibility

The W3C (World Wide Web Consortium) develops and publishes Web standards. Universal markup means selecting one standard, such as HTML5, and applying it consistently across a document or site. Consistency makes code easier to validate, maintain, scale, and interpret across user agents.

The Web Accessibility Initiative (WAI) develops accessibility guidance, including the Web Content Accessibility Guidelines (WCAG). Important practices include providing text alternatives for non-text content, making forms usable with screen readers, supporting keyboard interaction, avoiding color as the only way to communicate information, avoiding flashing content, and making sure people with disabilities can use Web development tools themselves. Section 508 requires U.S. federal agencies to make electronic and information technology accessible. The Americans with Disabilities Act (ADA) is a broader U.S. civil-rights law that also affects access to services provided through the Web.

A user agent is software that presents Web content, such as a graphical browser, a command-line, text-only browser such as Lynx (often used by people who are visually impaired because it works with software that renders text into voice), a phone browser, or a screen reader. Testing multiple user agents reveals differences in rendering, scripting, tables, images, and markup support.

Planning a Website

Before you create a Website, create a Website plan. Planning should establish the site’s purpose, intended audience, central message, required pages, technology, budget, schedule, and success measures. The development cycle continues through building, validation, publishing, and ongoing management.

A storyboard or site diagram describes the purpose and audience of a Website and provides a rough outline of the pages needed, including the home page.
A wireframe is a visual outline of a page’s structure before final visual design, and wireframing is the process of working on an outline for a Web presence. Several wireframes can contribute to a storyboard.
When you communicate your plan to stakeholders, use presentation aids such as slide-based software to help illustrate it.
Stakeholders include people such as marketing, IT, sales, customers, and organizational leaders who provide requirements or approve decisions.

Validate design choices for demographic and cultural issues such as language choice, common color meanings, and messages that appeal to intended customers. Organizations create multiple sites in different languages mainly to accommodate an international audience (sometimes a government also requires it). Organizational design standards and the latest Web technology are not demographic or cultural issues. Marketing representatives care about branding standards and whether the site addresses relevant customer needs. Use succinct wording because many users scan pages quickly for specific information or links. Email surveys can create a spam-reputation risk and may overrepresent people with unusual perspectives, so interpret feedback carefully.

Tools, testing, intellectual property, and confidentiality

Most graphical user interface (GUI) HTML editors allow you to modify the HTML code manually, but learning to write HTML by hand still matters because GUI editors may lag behind current markup standards or generate code that needs correction. A text editor gives direct control over the source. Show file-name extensions so .html, .css, and .txt files are not confused, and save source as plain text. Test pages in multiple browsers and devices because a page that appears correct in one environment may render differently in another.

Term	Protects or describes
Copyright	The legal ownership of expression by an author, such as written content, images, and code
Trademark	A unique word, phrase, or symbol officially registered with the government to identify a source
License	The legally authorized use of another person’s or entity’s copyrighted intellectual property, with its permissions and limits
Trade secret	Intellectual property that must remain private for a company to retain its value
Plagiarism	A specific instance of infringement in which someone claims content (images, writing, or other exact expressions) that other developers created
Non-Disclosure Agreement (NDA)	Confidentiality obligations that help protect trade secrets or intellectual property when work is outsourced

Mobile and cloud issues

Mobile devices have smaller screens that are used to view Webpages once viewed only on much larger PC monitors. For that reason, Web designers modify existing sites or create alternative sites for mobile users.

Hosting choices

Hosting option	Main trade-off
Your own server	More configuration choices and control, but you buy and maintain hardware and software.
ISP hosting	Less setup and no need to purchase hardware, but fewer configuration choices and more dependence on the provider.
Cloud service provider	Highly customizable services, but cost, security, and uptime depend on the provider and usage.
Dedicated hosting	A provider configures a server for one customer, usually with quick deployment but fewer low-level choices.
Virtual server	Lower cost and fast deployment, but you control only your virtual environment and files rather than the physical server.
Co-location	You own and control the hardware in a provider’s facility, but support, security, and cost remain your responsibility.

When evaluating a provider, obtain account information, IP addresses, DNS server names, file locations, directory instructions, storage needs, backups, support expectations, and security responsibilities.

Lesson 1 terms to know

markup language, metalanguage, SGML, HTML, XML, XHTML, HTML5, DTD, W3C, WAI, WCAG, Section 508, ADA, user agent, storyboard, wireframe, wireframing, presentation aids, stakeholder, GUI editor, Lynx, copyright, trademark, license, trade secret, plagiarism, NDA, ISP, virtual server, dedicated hosting, co-location

Lesson 2 — HTML5 Coding

Elements, tags, attributes, and values

An element identifies the kind of content, such as p for a paragraph. A tag is the angle-bracket markup used to write the element. An attribute adds information to an element, and an attribute’s value supplies its setting.

<p class="intro">Plan before you build.</p>

In this example, p is the element, class is the attribute, and "intro" is the value. The text between the tags is the element’s content.

Container elements have an opening tag and a closing tag with content between them, such as <strong>Important</strong>. Stand-alone (empty or void) tags do not contain content and do not use a closing tag. A bare stand-alone tag such as <br/> is a stand-alone empty tag. A stand-alone tag that carries attributes, such as <link href="style.css" rel="stylesheet"/> or <meta/>, is a stand-alone non-empty tag.

The HTML5 document skeleton

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
  <title>Page Title</title>
</head>
<body>
  <!-- Visible page content goes here. -->
</body>
</html>

Know the purpose of each part:

<!DOCTYPE html> declares HTML5 and should be the first line. Without it, a validator may reject the page and a browser may render elements differently than intended.
<html> is the root container. Its lang attribute identifies the document’s primary language.
<head> contains metadata and resource relationships that are not normally visible as page content.
<meta charset="utf-8"> identifies the character set.
<link> connects an external stylesheet in the head.
<title> supplies the text used for a browser tab, history entry, or bookmark.
<body> contains the content visitors see and use.

Prepare the development environment with a plain-text editor, visible file-name extensions, and multiple browsers. A file accidentally saved as page.html.txt is still a text file, not the intended HTML document.

Text structure, nesting, and lists

<p> creates a block-level paragraph and normally has space before and after it.
<br> creates one line break within the same block; it is not a replacement for separate paragraphs or CSS spacing.
<h1> through <h6> provide six heading levels. Use them to show document hierarchy, not merely to choose a font size. Headings are automatically preceded and followed by paragraph breaks, so do not add paragraph breaks around them.
<pre> preserves line breaks, tabs, and repeated spaces, which is useful for genuinely preformatted text or simple tabular data.
<blockquote> marks a block quotation and can identify its source with cite. Browsers indent it, so it is also the tag to use when you want to indent a piece of text.

A block-level element affects at least an entire paragraph. Text-level or phrasing elements, such as the tags that make text bold or italic, affect a word or short phrase within a line. <strong> is preferred to <b> when text is important because it communicates meaning: it denotes bold text when printed and strongly spoken text when output through an audio device. <em> communicates emphasis.

HTML elements must be nested in last-in, first-out order: the last element opened is the first one closed.

<h1><em>Site Development Associate</em></h1>

Use <ul> for an unordered, bulleted list and <ol> for an ordered, numbered list. Both use <li> for each list item.

<ul>
  <li>Plan</li>
  <li>Build</li>
  <li>Test</li>
</ul>

Comments and validation

HTML comments use :

<!-- Explain why this section exists or temporarily disable it while testing. -->

Comments do not appear on the rendered page. They can inform others about important elements in the code, remind the developer why code was added, or temporarily disable a section during troubleshooting. They do not make random whitespace harmless, disable images automatically, or disable stand-alone non-empty tags.

Use lowercase element and attribute names, quote attribute values, close container elements, indent nested content, and keep one HTML standard throughout the site. A browser’s ability to recover from invalid markup does not prove that the source is correct. Validate against the selected standard and test in multiple browsers and user agents.

Lesson 2 terms to know

element, tag, attribute, value, container element, empty element, void element, stand-alone empty tag, stand-alone non-empty tag, DOCTYPE, root element, head, body, meta, link, title, character set, UTF-8, block-level element, text-level element, paragraph, line break, heading, preformatted text, blockquote, strong, em, unordered list, ordered list, list item, comment, validation, forward-compatibility

Lesson 3 — Cascading Style Sheets (CSS3) and Graphical Elements

Why CSS exists and rule anatomy

HTML describes content and structure. Cascading Style Sheets (CSS) describe presentation: color, typography, spacing, backgrounds, borders, and layout. Keeping presentation in CSS makes a site easier to update, keeps pages visually consistent, and lets one external stylesheet serve many pages.

body {
  background-color: tan;
  color: #161616;
}

Part	Meaning in the example
Selector	`body`; identifies the elements to style
Property	`background-color` and `color`; names the presentation feature
Value	`tan` and `#161616`; supplies the setting
Declaration	The property-value pair(s) inside braces, such as `{background: tan;}`; a single pair such as `color: #161616;` is also called a declaration
Rule	The selector plus its declaration block

Use a colon between a property and its value and a semicolon between declarations. The selector body, the rule body { background: tan; }, the value tan, the declaration { background: tan; }, and the property background are different pieces of the same CSS statement. Some properties inherit from a parent. When declarations compete, the cascade considers priority, specificity, scope, and source order. Use !important sparingly.

Applying CSS and typography

Method	Where it is written	Best use
Inline	In one element’s `style` attribute	A one-off exception or demonstration
Internal	In a `<style>` block in the head	One page’s rules
External	In a separate `.css` file linked with `<link>`	Reusable site-wide styling and easiest maintenance

<link rel="stylesheet" href="styles/site.css">

If a user’s system does not support a named font, the browser uses a default or fallback font. Provide a font stack:

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
}

Images and file formats

The <img> element is a void element. Its src identifies the image file and its alt provides alternative text while the image loads, if it fails, or in a non-graphical browser.

<img src="images/campus-map.png"
     alt="Map showing the accessible campus entrance">

Format	Typical use and characteristics
JPEG	Photographs and complex images; supports up to 24 bits of color information (16.7 million colors) and lossy compression. More compression usually means smaller files and lower quality. A JPEG can be much smaller than a similar-sized PNG.
GIF	Line art, simple drawings, and navigation graphics; supports 256 colors, transparency, interlacing, and animation.
PNG	Lossless Web graphics developed using open standards, with adjustable bit depth and transparency.
BMP	Usually uncompressed and large, so it is inefficient for ordinary Web delivery.

The WebP format was introduced by Google in 2010.

Use concise alternative text that describes the information or action, not merely the file name. If an image is decorative and communicates nothing, use an empty alternative such as alt="". Avoid spaces or hard returns inside an <img> tag because XHTML will render the additional spaces or hard returns, which may affect the placement of the image on the page.

Color systems and accessibility

Screens mix light using RGB. Red, green, and blue values commonly range from 0 through 255; all three at their highest values produce white, while all zeroes produce black. In RGB code, the lower the numeric value representing a color, the darker that color will be, and the higher the value, the lighter it will be.

Hexadecimal: #RRGGBB; #FFFFFF is white and #000000 is black. Hexadecimal uses 0–9 and A–F, so A = 10, F = 15, 10 = 16, and FF = 255, the top of the 0–255 range.
RGB: rgb(255, 255, 255) identifies red, green, and blue components.
RGBA: RGB plus an alpha value for transparency.
HSL: Hue, saturation, and lightness; hue is measured around a 0–360-degree color wheel.
CMYK: A print color model that is not supported as a normal HTML5 Web color scheme.

The historical browser-safe palette used 216 colors for older 8-bit displays. Current design decisions should emphasize contrast, readable text, visible focus, user settings, and tested browser support. Do not communicate status by color alone.

Layout and page design

Use succinct wording because many users scan pages quickly for specific information or links. Keep each page focused, divide content into meaningful sections, and include navigation links at the top and bottom of the page and within the body of the page to reduce the need to scroll, not only at the top.

A fixed-width layout uses set dimensions and may force horizontal scrolling on small screens.
A liquid or fluid layout uses relative space and adapts more easily to different screens; it is the preferred general approach for modern responsive pages.
The default image alignment relative to text is bottom.
Horizontal rules commonly display with a three-dimensional shading effect by default, but their presentation should be controlled with CSS.
HTML entities represent reserved or non-keyboard characters, such as ©, €, ¥, <, >, and &. Browsers collapse extra spaces and ignore hard returns, so to indent a paragraph or add extra spaces between words, insert non-breaking spaces ( ); prefer CSS for general layout.

Lesson 3 terms to know

CSS, selector, property, value, declaration, rule, cascade, inheritance, specificity, !important, inline CSS, internal stylesheet, external stylesheet, font stack, fallback font, hr, HTML entity, non-breaking space, RGB, RGBA, hexadecimal, HSL, CMYK, browser-safe palette, JPEG, GIF, PNG, BMP, WebP, lossy compression, alt, fixed-width layout, liquid layout, responsive design