A Quick Intro to HTML

• We will use HTML all semester as the foundation of our assignments.
  • It will provide a reasonable GUI (what is a GUI?)
  • It will also allow us to document our code.
• We do not need to master HTML
  • That is not the purpose of this class.
  • You need to be able to produce the homework for this class.
  • But it is not a bad thing to know.
• I will provide
  • Introduction to the parts I use.
  • Examples of what I want you to do.
  • References.
    • https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML#elements_%e2%80%94_the_basic_building_blocks one reference.
  • By the way, I like MDN Web Docs for reference.
  • The W3Schools site is good as well.
• If you know more HTML, or even CSS, please feel free to make your documents as fancy as you wish.
  • But make the required programming components work.
• HTML is the Hypertext Markup Language
  • A Markup Language allows you to turn plain text into documents
    • The expression

      $\Sigma_{i=0}^{\inf} \frac{x^2}{\log x}$
              

    • Is marked up text in mathml, which is interpreted to produce:
    • $\Sigma_{i=0}^{\inf} \frac{x^2}{\log x}$
    • In this case _, ^, {}, \log, \inf \Sigma are all elements of the markup language.
  • Hypertext - generally text with links in it.
    • You read novels sequentially, page 1 to the end. No real need for html!
    • You skip around in scientific text books. Needs HTML!
• HTML is constructed from basic elements.
  • These are portions of a text document
    • Text items
    • Headers
    • Titles
    • Images
    • Hyper links
  • Your browser takes these elements, and creates the viewable document.
  • You can always view the document in chrome by right clicking on the page and selecting view page source.
  • NOTE: This is a valid method for learning HTML however
    • You really should understand what you are copying.
  • Another way to look at the code is
    • In chrome, <ctrl><shift> j to bring up the console
    • Click on Elements to browse the html code
  • Caching
    • Since it is expensive to transfer data across the network, browser cache pages.
    • This is good if the page doesn't change.
    • But if you are developing a page, this is a problem.
    • In chrome
      • Start the console
      • Select the settings icon (little gear)
      • Scroll down to Network
      • Select Disable Cache (while DevTools is open)
• Basic HTML elements
  • A good reference
  • Mostly marked with a pair of tags.
  • Generally in the form <tagname attribute list> contents <\tagname>
• The HTML parsers are very forgiving.
  • They will try to render everything they can.
  • The following line in code will show up:

    this is an error

  • It was <bug>this is an error </bug>