Markup Language and Site Development Essentials

Central idea

Successful websites begin with shared requirements, appropriate standards, and clear ownership—not simply with writing code. Technical choices, audience needs, testing, communication, hosting, and maintenance all affect whether a site succeeds.

1. Lesson Direction And Responsibilities

PowerPoint slides 1–2

• The lesson connects three broad responsibilities: understand the Web technology stack, plan for people, and manage the complete site lifecycle.
• Technical knowledge is only one part of site development. A useful site also depends on audience research, stakeholder input, accessibility, testing, communication, and maintenance.
• Students should be able to explain why a technical decision was made and identify evidence showing that the decision works for the intended audience.

2. Creating Webpages And The Web Technology Stack

PowerPoint slides 3–5

HTML

• HTML supplies document structure and meaning. It identifies headings, paragraphs, links, images, forms, and other content relationships.
• HTML should not be treated as the primary tool for visual styling.

CSS

• CSS controls presentation, spacing, typography, color, and responsive layout.
• A shared external stylesheet improves consistency and allows a design change to be applied across many pages.

JavaScript

• JavaScript adds interaction, event handling, logic, and changes in page state.
• Essential content and structure should not depend unnecessarily on a script working perfectly.

Delivery context

• A page may be used through desktop browsers, phones, tablets, smart televisions, gaming devices, cloud services, assistive technologies, and other user agents.
• Responsive design and cross-device testing are therefore part of normal Web development.

Authoring tools

• A plaintext editor gives direct control of the markup and makes every character visible.
• A graphical editor can make authoring faster by generating code through visual controls.
• A cloud builder may combine authoring, hosting, and managed services.
• Regardless of the tool, the developer remains responsible for valid, accessible, maintainable output.
• Knowing markup prevents tool lock-in because developers can inspect, extend, repair, and migrate generated content.

3. History And Purpose Of Markup Languages

PowerPoint slides 6–10

• SGML is a metalanguage used to define rules for document languages.
• Early HTML adapted markup and hyperlinks to documents distributed on the Web.
• HTML 4.01 included historical Strict, Transitional, and Frameset variants.
• XML defines structured data vocabularies and emphasizes exact structure.
• XHTML applied XML-style syntax rules to HTML, including stricter case, nesting, and closure requirements.
• Modern HTML is maintained as a living standard. Older doctypes and historical syntax remain useful for recognizing legacy pages, but they should not control new development decisions.
• HTML represents Web documents, XML represents structured data using defined vocabularies, and XHTML is important historical context for XML-based HTML syntax.
• The correct language depends on the type of information, the consumer of that information, and the required processing rules.

Key modernization from the reading

• The reading frequently uses “HTML5” and describes the W3C as the primary HTML standard-setting body. The PowerPoint teaches current HTML as the WHATWG HTML Living Standard while retaining older terminology as historical and certification context.

4. The Web Development Trifecta

PowerPoint slide 11

• HTML provides structure and semantics.
• CSS provides presentation and responsive layout.
• JavaScript provides events, logic, and state changes.
• These technologies work together, but each has a different responsibility.
• Separating their responsibilities makes problems easier to diagnose. For example, an incorrect heading color is normally a CSS issue, while an incorrect heading level is an HTML issue.

5. The Web Development Project Cycle

PowerPoint slide 12

Plan

• Identify the audience, goals, scope, stakeholders, constraints, success measures, and ownership.

Build

• Create content, HTML structure, CSS presentation, JavaScript behavior, and media assets.

Validate

• Test standards conformance, accessibility, user tasks, browser support, performance, links, and security concerns.

Operate

• Publish, monitor, update, repair, document, and eventually retire content.

Important point

• Launch begins the maintenance phase; it does not end the project.

6. Accessibility And Verification

PowerPoint slides 13–15

• Accessibility should be included in requirements at the beginning of the project rather than added after development.
• WCAG provides testable accessibility success criteria and is useful well beyond any single legal requirement.
• Section 508 applies to U.S. federal information and communications technology.
• ADA obligations depend on legal and organizational context; a short technical checklist should not be presented as complete legal compliance.

Ways people may access content

• Visual access: readable text, sufficient contrast, zoom support, and meaningful image alternatives.
• Audio access: captions, transcripts, and equivalent text.
• Motor access: keyboard operation, visible focus, and usable target sizes.
• Cognitive access: clear language, predictable navigation, and manageable complexity.

Verification requires several methods

• Markup validation identifies syntax and conformance errors.
• Automated tools can identify some accessibility and link problems.
• Manual review is needed for meaning, focus order, alternative text quality, instructions, and usability.
• User-task testing determines whether members of the intended audience can complete real goals.
• Passing a validator does not prove that a page is usable or accessible.

Key modernization from the reading

• The reading includes older WCAG 2.0 and historical Section 508 material. The PowerPoint uses WCAG 2.2 as the current technical reference and separates technical guidance from legal conclusions.

7. Creating And Documenting A Website Plan

PowerPoint slides 16–20

A useful plan records

• Audience: users, contexts, abilities, priorities, and expectations.
• Message: the site’s central purpose and desired user action.
• Constraints: policy, technology, time, content, budget, and ownership limits.
• Acceptance evidence: what success looks like and how it will be tested.

Planning diagrams serve different purposes

• Site map: shows page hierarchy and navigation relationships.
• Storyboard: shows sequence, content, and presentation flow.
• Wireframe: shows page regions and hierarchy without finished styling.
• Prototype: allows interaction or technical assumptions to be tested before full production.

Culture and context

• Color, images, symbols, language, tone, and reading patterns can have different meanings for different audiences.
• Organizational culture also affects review, approval, and communication.
• Designers should gather evidence from the intended audience instead of assuming their own preferences are universal.

Stakeholders

• Customers clarify desired tasks and pain points.
• Employees explain internal workflows and maintenance needs.
• IT and security define infrastructure, data, access, and risk constraints.
• Marketing and leadership connect the site to branding, priorities, and business goals.

Documentation

• Preserve diagrams, decisions, owners, deadlines, feedback, and follow-up actions.
• A decision log helps future team members understand why a choice was made.

8. Communicating The Plan And Using Feedback

PowerPoint slides 21–23

• An oral explanation should emphasize purpose, tradeoffs, and decisions instead of reading the written plan aloud.
• Visual aids should make relationships easier to understand.
• Written support provides durable details, sources, decisions, and assignments.
• Plain language helps technical and nontechnical stakeholders discuss the same plan.

Effective meetings

• Open by stating the purpose and expected outcome.
• Keep discussion focused and invite relevant questions.
• Record decisions, owners, and due dates.
• Close by restating commitments and publishing minutes or follow-up notes.

Feedback process

• Elicit feedback from representative users and stakeholders.
• Listen for verbal, written, and nonverbal signals.
• Analyze the reason behind the response rather than accepting every suggestion literally.
• Improve the site, test the change, and document the result.

9. Development, Testing, And Site Management

PowerPoint slides 24–26

Development and release

• Create content and code using the approved plan.
• Review standards, accessibility, security, and content quality.
• Obtain authorization from the appropriate owner.
• Publish to the correct environment and verify the live result.

Pre-launch testing

• Compatibility: supported browsers, devices, viewports, and assistive technology.
• Functionality: links, navigation, forms, media, and error handling.
• Performance: expected traffic, connection speeds, loading behavior, and server response.
• Security and integrity: access control, data handling, transaction safety, and recovery.

Ongoing site management

• Update changing content.
• Repair broken links, access failures, and connectivity problems.
• Retire obsolete pages while preserving necessary redirects or records.
• Monitor feedback and assign clear maintenance ownership.

10. Intellectual Property, Outsourcing, And Confidentiality

PowerPoint slides 27–28

• Copyright protects qualifying original expression.
• Trademark protects source-identifying names and marks.
• A license defines permitted use, modification, attribution, and distribution.
• Permission records should preserve the source, scope, attribution requirements, consent, and relevant dates.
• Avoid plagiarism as well as copyright and trademark infringement.
• Consult authoritative sources and appropriate legal professionals when rights are unclear.

Remote work and outsourcing

• Outsourcing can add expertise and capacity but also introduces access and confidentiality risks.
• An NDA defines confidentiality duties when appropriate.
• Apply least access: share only the information required for the authorized work.
• Do not place credentials or sensitive information in ordinary project documents.
• Escalate uncertain privacy, licensing, contract, or regulatory questions.

11. Hosting And Web Service Providers

PowerPoint slides 29–32

Hosting models

• Managed or shared hosting: the provider operates more of the system, but customers have less control.
• Virtual server: provides an isolated server environment with more customer control.
• Dedicated hosting: reserves server resources for one customer.
• Co-location: customer-owned equipment operates in a provider’s facility.

Total cost considerations

• Compute, storage, databases, backups, and retention.
• Bandwidth, delivery, and traffic patterns.
• Support, monitoring, security, maintenance, and incident response.
• Development, integration, migration, and staff expertise.

Negotiating service requirements

• Estimate traffic volume, peak use, user locations, and growth.
• Define storage, database, backup, and recovery requirements.
• Identify runtime, integration, and custom application needs.
• Define availability targets, support response, security responsibilities, and ownership.

Controlled provider records

• Record account owners, roles, renewals, and support identifiers.
• Record approved IP addresses, DNS names, and endpoints.
• Document file locations, environments, and deployment instructions.
• Maintain escalation contacts without placing passwords in ordinary documentation.

12. uCorp Case and Application

PowerPoint slides 33–34

• uCorp is the recurring course example for applying Web development concepts.
• Its audience consists of people interested in high-quality audio products.
• Its business goal is to present products effectively while building trust and understanding.
• Technical and business team members share responsibility for the site.
• Evidence of success includes usable pages, a clear value message, working user tasks, and maintainable content.

Application project

• Define the audience, purpose, central message, and success measures.
• Create a site map and a wireframe, storyboard, or prototype.
• Identify accessibility, testing, content-rights, hosting, and ownership decisions.
• Present the plan, explain tradeoffs, record feedback, and assign actions.

13. Review Scenarios

PowerPoint slides 35–36

Scenario: A page validates, but keyboard users cannot operate its menu

• Governing concept: accessibility.
• Lesson: code conformance alone does not prove operability.

Scenario: A team sketches navigation and content order before styling

• Governing concept: planning and wireframing.
• Lesson: structure and requirements are being made visible before construction.

Scenario: A contractor requests unapproved customer data for a demonstration

• Governing concept: authorization, confidentiality, and least access.
• Lesson: sensitive data should be shared only for an authorized purpose with appropriate controls.

Scenario: Several published destinations now return errors

• Governing concept: link and site maintenance.
• Lesson: published sites require monitoring, ownership, verification, and repair.

14. Final Synthesis

PowerPoint slide 37

• Use standards with purpose: HTML, CSS, JavaScript, XML, authoring tools, and hosting services have different jobs.
• Plan with people: audience, accessibility, culture, stakeholders, and evidence shape technical decisions.
• Own the lifecycle: test, publish, maintain, document, protect, host, and retire content deliberately.

Reading Items to Use as Supplemental Practice

The uCertify lesson contains additional detail and activities that are summarized rather than reproduced step-by-step in the PowerPoint:

• Full certification objective list and glossary.
• Detailed markup-language history and historical specifications.
• Labs involving W3C standards, accessibility resources, browser extensions, browser comparisons, and accessibility-evaluation tools.
• Cultural-diversity research activity.
• Intellectual-property research activity.
• Hosting comparison tables and detailed benefits/drawbacks.
• Case Study: Plan It Out.
• Optional labs and skills review.

These reading activities are useful for homework, guided lab work, or deeper review. The PowerPoint is designed as the classroom teaching sequence, while the uCertify lesson remains the detailed reading and activity source.