reading-notes

Class 4 - Structure Web Pages with HTML

Basic HTML Outline

Lab 4 - Structure Web Pages with HTML

Requirements

  1. Partner up, draw a wireframe: keep it low-fidelity (basic elements of final web page), show general content areas
  2. Apply htmml to structure: discuss which html tags to use
  3. Choose content: don’t need full sentences, just a plan
  4. Write the code
    • Each partner creates own repo, index file, write in VS code and use ACP to push to GitHub, link up pages so user can navigate to both pages.

Read 4 - Structure Web Pages with HTML Reflection and Discussion

Resources Link/Pages:

  1. Wireframe and Design
    • Wireframing is planing where to put information on a web page using simple diagrams. You want to figure out strucutre, organization, and where to put important information. A good wireframe needs clarity, confidence, and simplicity.
  2. Mozilla HTML Basics
    • Nesting elements can be put inside other elements.
    • Void elements have no closing tags and embed things without effecting other content around it.
    • There are usually the same couple of elements that go into an HMTL document:
      • <!DOCTYPE html>: Specifies the HTML version.
      • <html>: Wraps the entire content of the page.
      • <head>: Acts like a container for content in HTML page
      • <title>: Creates titile of page
      • <body>: Contains the content of the web page.
  3. Semantics
    • Semantics gives meaning to written code and creates a webpage that is readable.
  4. Mozilla HTML Docs
  5. Mozilla HTML Elements

Answer

  1. What is HTML and why do we use it?
    • HTML is a markup language used to structure a web page. We use it because it creates structure on a webpage so it is organzied and readbable.
  2. What are the 3 main parts of an HTML element?
    • An element contains an opening tag, the content between, and a closing tag.
  3. What is it called when you give an element extra information?
    • They are called attributes.
  4. What is a semantic element?
    • A tag that carry meaning about the structure of a webpage