HTML


John Alexis Guerra Gómez


Slides:http://johnguerra.co/lectures/webDevelopment_spring2025/02_HTML/

Class page:http://johnguerra.co/classes/webDevelopment_spring_2025/

Readings discussion

  • questions?

Random Questions

  • What's a class?
  • What's an attribute?
  • What's the id?
  • What's the difference between the head and the body
  • Content vs Style
  • What's the DOM

Setting up your environment

Working online

  • Good for quick coding
  • All being taken care
  • Can share links
  • Good for asking questions
  • I recommend JSFiddle

Working locally

  • Better for debugging and organizing
  • Need setup
  • Better linters!!
  • I recommend Sublime
  • Or VS Code with Copilot

Setting up locally

HTML MDN Guide

https://developer.mozilla.org/en-US/docs/Web/HTML

Content Categories

  • Main Content Categories
  • Form-Related Categories
  • Specific Content Categories

Main Content Categories

https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories
  • Metadata (base, link, meta, noscript, script, style, title)
  • Flow content (ul)
    • Sectioning content (article, aside, nav, section)
    • Heading content (h1-h6)
    • Phrasing content (b, em, i, strong, span)
    • Embedded content (audio, embed, iframe, img, object, source, track, video)
    • Interactive content (a, button, details, embed, iframe, img, input, label, select, textarea)
    • Form-associated content (form, input, label, legend, meter, output)

Group Exercise

Here are some of the SF Airbnb listings for Sept 2023. Let's design a web page to display them and rate them.

Audience and objective

  • Who are we targeting? Users
  • What do we want them to do? Task

Resources

What do we have to show?

  • Listing
    • Host
    • Listing Info
    • Price
    • Images
    • Date
  • Neighborhood?
  • What else?

Wireframe it

Test it

Code it

Web Developer tools

Exercise

Design and write the HTML of your home page

  • Code it and put it on github

Share your results