Lecture Notes – Sept 4th

Quiz
Homework, quiz, grading
- Late homework – 1 day late = 50% off, >1 day late = 100% off
- Syllabus updated!
HTML
- HTML – page structure
  - CSS – page design
  - JS – page behavior
- Markup language
  - Tags: <p>
  - Elements: <p> content </p>
  - Attributes: <p lang=”en”>
- Standards groups, major versions
  - W3C: HTML 3.2, HTML 4.01, XHTML 1.0, HTML 5
    - https://www.w3.org
    - https://www.w3.org/TR/html/
  - Web Hypertext Application Technology Working Group (WHATWG): HTML (Living Standard)
    - https://whatwg.org
    - https://html.spec.whatwg.org/multipage/
- Resources
  - https://developer.mozilla.org/en-US/
    - https://developer.mozilla.org/en-US/docs/Web/HTML
  - https://webplatform.github.io/docs/Main_Page/index.html
    - Unfortunately “frozen”
  - https://www.w3schools.com/
  - Brackets
  - Sublime Text
  - Atom
  - IDEs
    - Eclipse
    - NetBeans
  - MAMP Mac and Windows
  - WAMP Windows
  - VirtualBox
  - Vagrant
  - Chrome DevTools
- Browsers – Developer modes
  - Chrome
  - Firefox
  - Safari
- DOCTYPE
- Content models
- Quick demo
  - <!doctype html>
    <html lang=”en”>
    <head>
    <meta charset=”utf-8″>
    <meta name=”description” content=”Notre Dame Web development course”>
    <title>Class Demo</title>
    </head>
    <body>
    <h1>Hello world!</h1>
    <p>This is a <b>very simple</b> demo. </p>
    </body>
    </html>
- Character encodings in HTML
  - https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
- Sectioning & semantic elements
  - Outlines
    - HTML DOM
  - Nav
  - Article
  - Section
  - Aside
  - Div
  - Main
  - Header
  - Footer
  - Address
- Accessible Rich Internet Applications (WAI-ARIA)
CSS
- Inline styles
  - <h2 style=”color:red; font-weight: normal;”>Example of inline styling.</h2>
  - Not easy to maintain, update
  - Used for HTML mail and scripting
- Style element in the <head>
  - CSS rules
    - <style>
      h2 {
      color: red;
      font-weight: normal;
      }
      </style>
      - <h2>I’m red.</h2>
    - <style>
      .warning {
      color: red;
      font-weight: normal;
      }
      </style>
      - <h2 class=”warning”>I’m red.</h2>
      - <h3 class=”warning”>I’m red.</h3>
    - <style>
      h2.warning {
      color: red;
      font-weight: normal;
      }
      </style>
      - <h2 class=”warning”>I’m red.</h2>
      - <h3 class=”warning”>I’m not red.</h3>
- External stylesheet
  - <link rel=”stylesheet” href=”styles.css”>
  - Content of “styles.css” might be what could be in the head’s style element of a single page, but now can be used by an entire web site (multiple web pages).
Bootstrap