Web Development Study Guide: Online Lessons 1–2

How to use this guide

Use this guide after reading Lessons 1 and 2 and completing the related activities. For each lesson, practice three things: define the important terms, explain why the concepts matter, and recognize or write the related HTML. Pay special attention to comparisons; many Web development decisions depend on choosing the right tool or standard for a particular purpose.

The ideas that connect Lessons 1–2

Lesson 1 explains how to plan and evaluate a Website for real people, organizations, and user agents. Lesson 2 applies that planning mindset to actual HTML5 documents. In both lessons, the goal is consistent, valid, accessible, maintainable work:

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

Lesson 1 — Markup Language and Site Development Essentials

The Web development trifecta

The three core technologies have different jobs:

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

Do not use one technology to replace another. For example, HTML identifies a heading; CSS changes its appearance; JavaScript might respond when a user interacts with it.

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 the older DTD-based declarations. XHTML remains useful historical context because it emphasizes lowercase names, strict nesting, and closing container tags.

Standards, universal markup, and accessibility

The W3C (World Wide Web Consortium) develops and publishes Web standards used throughout this course. 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; its original requirements were based on WAI/WCAG checkpoints. 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 to a person, 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 with multiple user agents helps reveal differences in rendering, scripting, tables, images, and support for markup versions.

Planning a Website

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

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: language choice, common color meanings, and messages that appeal to the 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. A marketing representative is especially concerned with whether the Website addresses relevant customer needs and follows branding standards. When collecting feedback, email surveys can create a spam-reputation risk and may overrepresent people with unusual perspectives, so interpret feedback carefully and test the resulting changes.

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.

Common intellectual-property distinctions:

Term	Protects or permits
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 course materials may show the XHTML-style <br/>; the important distinction is that the element does not contain content.

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 a correct doctype, 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 and formatting

<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 the 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. Use CSS for general visual styling rather than relying on obsolete presentation tags.

Nesting, lists, and comments

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>

The following crosses the element boundaries and is invalid:

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

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>

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. Comments do not make random whitespace harmless, disable images automatically, or disable stand-alone non-empty tags.

Good coding and validation habits

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. Read the validator’s errors, correct the source, and validate again.

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