SE371 · Chapter 2 · Annotated SlidesHTML
Original
Overview

HTML

HTML syntax, elements and attributes, semantic markup, the structure of an HTML5 document, headings, paragraphs, links and absolute vs. relative URLs, images, entities, lists, HTML5 semantic elements, tables with colspan and rowspan, forms (GET/POST, text, choice and button controls, labels) and validation.

How to read this page

Every original slide is shown unchanged. Yellow marks on a slide point to a numbered note: hover or tap a mark to jump to its note, and hover a note to see its marks. Questions tagged Past exam appeared on a real paper; Prediction questions are likely angles, not confirmed. Pick an answer to each question: a wrong pick tells you why it is wrong, so you can try again.

All 73 slides
  1. 1 Fundamentals of Web Development
  2. 2 In this chapter you will learn . . .
  3. 3 What Is HTML and Where Did It Come From?
  4. 4 HTML Syntax
  5. 5 Empty Element
  6. 6 Semantic Markup
  7. 7 Structure of HTML Documents
  8. 8 The title element and SEO
  9. 9 Structure elements of an HTML5 document
  10. 10 DOCTYPE
  11. 11 <Html> element
  12. 12 <Head> Element
  13. 13 <Body> Element
  14. 14 Nesting HTML Elements
  15. 15 Correct Nesting
  16. 16 Quick Tour of HTML Elements
  17. 17 Quick Tour of HTML Elements (cont)
  18. 18 In the browser
  19. 19 Headings
  20. 20 Paragraphs and Divisions
  21. 21 HyperLinks
  22. 22 Kinds of Links
  23. 23 Class Task
  24. 24 Absolute and Relative URLs
  25. 25 Relative URLs
  26. 26 Inline Text Elements
  27. 27 Images
  28. 28 Character Entities
  29. 29 Lists
  30. 30 HTML5 Semantic Structure Elements
  31. 31 HTML5 Semantic Structure
  32. 32 and figcaption
  33. 33 Home Task
  34. 34 Fundamentals of Web Development
  35. 35 In this chapter you will learn . . .
  36. 36 HTML Tables
  37. 37 Additional table elements
  38. 38 Basic table structure
  39. 39 Spanning columns
  40. 40 Colspan? Rowspan?
  41. 41 Introducing Forms
  42. 42 Form Structure
  43. 43 The <form> Element
  44. 44 Query Strings
  45. 45 GET
  46. 46 POST
  47. 47 Form Control Elements
  48. 48 Text Input Controls
  49. 49 Choice Controls
  50. 50 Select Lists
  51. 51 Select Lists (ii)
  52. 52 Task
  53. 53 Radio Buttons
  54. 54 Checkboxes
  55. 55 Button Controls
  56. 56 Example button elements
  57. 57 Example button elements
  58. 58 Revise
  59. 59 codes form [part B]\45_num_range_color
  60. 60 codes form [part B]\45_num_range_color
  61. 61 Date and Time Controls
  62. 62 Date and time controls Figure
  63. 63 Associating labels and input elements
  64. 64 Validating User Input
  65. 65 Where to Perform Validation
  66. 66 Types of Input Validation
  67. 67 Notifying the User
  68. 68 Notifying the User (Figures)
  69. 69 How to Reduce Validation Errors
  70. 70 Color Models
  71. 71 RGB Color Model
  72. 72 Slide 72
  73. 73 Live Server
Slide 1 / 73

Fundamentals of Web Development

Slide 1: Fundamentals of Web Development
Slide 2 / 73

In this chapter you will learn . . .

Slide 2: In this chapter you will learn . . .
Slide 3 / 73

What Is HTML and Where Did It Come From?

Slide 3: What Is HTML and Where Did It Come From?
Slide 4 / 73

HTML Syntax

Slide 4: HTML Syntax
Slide 5 / 73

Empty Element

Slide 5: Empty Element

Notes

  1. Empty (void) elements have no content or closing tag: <img>, <br>, <input>, <meta>.

Slide 6 / 73

Semantic Markup

Slide 6: Semantic Markup

Notes

  1. Semantic markup: tags describe MEANING (header, nav, article), not appearance; helps SEO, accessibility, maintenance.

Slide 7 / 73

Structure of HTML Documents

Slide 7: Structure of HTML Documents
Slide 8 / 73

The title element and SEO

Slide 8: The title element and SEO
Slide 9 / 73

Structure elements of an HTML5 document

Slide 9: Structure elements of an HTML5 document
Slide 10 / 73

DOCTYPE

Slide 10: DOCTYPE

Notes

  1. <!DOCTYPE html> tells the browser to use HTML5 standards mode.

Slide 11 / 73

<Html> element

Slide 11: <Html> element
Slide 12 / 73

<Head> Element

Slide 12: <Head> Element
Slide 13 / 73

<Body> Element

Slide 13: <Body> Element
Slide 14 / 73

Nesting HTML Elements

Slide 14: Nesting HTML Elements

Notes

  1. Nesting must be correct: close inner elements first: <p><strong>…</strong></p>.

Slide 15 / 73

Correct Nesting

Slide 15: Correct Nesting
Slide 16 / 73

Quick Tour of HTML Elements

Slide 16: Quick Tour of HTML Elements
Slide 17 / 73

Quick Tour of HTML Elements (cont)

Slide 17: Quick Tour of HTML Elements (cont)
Slide 18 / 73

In the browser

Slide 18: In the browser
Slide 19 / 73

Headings

Slide 19: Headings
Slide 20 / 73

Paragraphs and Divisions

Slide 20: Paragraphs and Divisions
Slide 21 / 73

HyperLinks

Slide 21: HyperLinks

Notes

  1. <a href="…">: links to pages, sections (#id), email (mailto:), files.

Slide 22 / 73

Kinds of Links

Slide 22: Kinds of Links
Slide 23 / 73

Class Task

Slide 23: Class Task
Slide 24 / 73

Absolute and Relative URLs

Slide 24: Absolute and Relative URLs

Notes

  1. Absolute URL: full address (https://…). Relative: from the current location (images/a.png, ../index.html).

Exam angle

PredictionQ1

From /site/pages/about.html, "../images/logo.png" points to:

Slide 25 / 73

Relative URLs

Slide 25: Relative URLs
Slide 26 / 73

Inline Text Elements

Slide 26: Inline Text Elements
Slide 27 / 73

Images

Slide 27: Images

Notes

  1. <img src alt>: the alt text is required for accessibility.

Slide 28 / 73

Character Entities

Slide 28: Character Entities
Slide 29 / 73

Lists

Slide 29: Lists
Slide 30 / 73

HTML5 Semantic Structure Elements

Slide 30: HTML5 Semantic Structure Elements

Exam angle

PredictionQ1

Which element is meant for a site’s main navigation links?

Slide 31 / 73

HTML5 Semantic Structure

Slide 31: HTML5 Semantic Structure
Slide 32 / 73

and figcaption

Slide 32: and figcaption
Slide 33 / 73

Home Task

Slide 33: Home Task
Slide 34 / 73

Fundamentals of Web Development

Slide 34: Fundamentals of Web Development
Slide 35 / 73

In this chapter you will learn . . .

Slide 35: In this chapter you will learn . . .
Slide 36 / 73

HTML Tables

Slide 36: HTML Tables

Notes

  1. Tables: <table>, <tr> rows, <th> headers, <td> cells; <thead>, <tbody>, <tfoot>, <caption>.

Slide 37 / 73

Additional table elements

Slide 37: Additional table elements
Slide 38 / 73

Basic table structure

Slide 38: Basic table structure
Slide 39 / 73

Spanning columns

Slide 39: Spanning columns

Notes

  1. colspan merges cells across columns; rowspan merges down rows.

Exam angle

PredictionQ1

To make a cell span two columns, use:

Slide 40 / 73

Colspan? Rowspan?

Slide 40: Colspan? Rowspan?
Slide 41 / 73

Introducing Forms

Slide 41: Introducing Forms
Slide 42 / 73

Form Structure

Slide 42: Form Structure
Slide 43 / 73

The <form> Element

Slide 43: The <form> Element
Slide 44 / 73

Query Strings

Slide 44: Query Strings
Slide 45 / 73

GET

Slide 45: GET
Slide 46 / 73

POST

Slide 46: POST
Slide 47 / 73

Form Control Elements

Slide 47: Form Control Elements

Notes

  1. Controls: text, password, email, number, textarea, select/option, radio (one of a group: same name), checkbox (any number), submit/reset/button.

  2. Trap Radio buttons in one group must share the same name attribute.

Exam angle

PredictionQ1

To let a user choose exactly one of several options, use:

Slide 48 / 73

Text Input Controls

Slide 48: Text Input Controls
Slide 49 / 73

Choice Controls

Slide 49: Choice Controls
Slide 50 / 73

Select Lists

Slide 50: Select Lists
Slide 51 / 73

Select Lists (ii)

Slide 51: Select Lists (ii)
Slide 52 / 73

Task

Slide 52: Task
Slide 53 / 73

Radio Buttons

Slide 53: Radio Buttons
Slide 54 / 73

Checkboxes

Slide 54: Checkboxes
Slide 55 / 73

Button Controls

Slide 55: Button Controls
Slide 56 / 73

Example button elements

Slide 56: Example button elements
Slide 57 / 73

Example button elements

Slide 57: Example button elements
Slide 58 / 73

Revise

Slide 58: Revise
Slide 59 / 73

codes form [part B]\45_num_range_color

Slide 59: codes form [part B]\45_num_range_color
Slide 60 / 73

codes form [part B]\45_num_range_color

Slide 60: codes form [part B]\45_num_range_color
Slide 61 / 73

Date and Time Controls

Slide 61: Date and Time Controls
Slide 62 / 73

Date and time controls Figure

Slide 62: Date and time controls Figure
Slide 63 / 73

Associating labels and input elements

Slide 63: Associating labels and input elements

Notes

  1. <label for="id"> associates text with an input (click the label to focus; better accessibility).

Slide 64 / 73

Validating User Input

Slide 64: Validating User Input
Slide 65 / 73

Where to Perform Validation

Slide 65: Where to Perform Validation

Notes

  1. Validate on the client (fast feedback: required, pattern, type) AND on the server (security: the client can be bypassed).

Exam angle

PredictionQ1

Client-side validation is enough to protect the server.

Slide 66 / 73

Types of Input Validation

Slide 66: Types of Input Validation
Slide 67 / 73

Notifying the User

Slide 67: Notifying the User
Slide 68 / 73

Notifying the User (Figures)

Slide 68: Notifying the User (Figures)
Slide 69 / 73

How to Reduce Validation Errors

Slide 69: How to Reduce Validation Errors
Slide 70 / 73

Color Models

Slide 70: Color Models
Slide 71 / 73

RGB Color Model

Slide 71: RGB Color Model
Slide 72 / 73

Slide 72

Slide 72: Slide 72
Slide 73 / 73

Live Server

Slide 73: Live Server