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.
  - This is based on an older math mark up language called TeX/LaTeX
- 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 produced by the code <bug>this is an error </bug>