HTML 1

The WWW Environment

- the web browser parses the HTML document and displays it according to it's parsing algorithm. (That is why when you use different browsers some sites look different).

Web Browsers

Chrome
Firefox
IE
Safari
Opera
Text Based

List/genealogy of Web Browsers

Notes

HTML (Hypertext Markup Language)

HTML is the World Wide Web's core markup language. It is constantly changing but gradually (someone who learned HTML 10 years ago will still recognize HTML today) with backward compatibility in mind.

Specification

HTML - a very technical specification
HTML5 Resources

A great resource you should bookmark and use:

w3schools HTML Tutorial

Notes

HTML document

Describes the structure/semantics (meaning) of a document and not its visual styling (form). Assumption is that documents have common elements like titles, paragraphs, and lists which describes document structure.

It also has elements such as <figure>, <article>, <nav> <summary> which describes how the content should be intepreted (semantics).
It does not want to describe page layout (form).
Here is a HTML page. To see it in HTML form,

On Chrome:

View -> Developer -> View Source

or Option + Cmd + U

CSS - Visual styling. CSS separates presentation from structure.
JavaScript - Adds programmed function. Makes the web page dynamic.

Notes

Creating an HTML file (1)

The HTML File
- An HTML file is a plain text file. When you use a text editor make sure you save the file as plain text without any formatting.
- A file saved as Word Doc is not plain text as it has embedded in the file, formatting and presentation information such as bold/italic text, chapters, and so on.
Text Editors
- Visual Studio Code, Sublime, Bracket, or Atom (no longer in development)

What makes HTML a code to be interpreted and not a text file?

- If you name it with a .txt extention, it will be treated as a text file. With a .html extension, it will be treated as a html document. The application used to interpret the file changes. (If you give it a .tif or .jpg extension, an app for image will open your file)

Art work that uses confusion between text and code:

- This classic net art by jodi http://wwwwwwwww.jodi.org/
- One sentence contained within every HTML tag in alphabetical order by Evan Roth

- p.s. Do not name files with spaces. I suggest you use "_" underbars instead.

Notes

Creating an HTML file (2)

Type in the following:

     <!DOCTYPE html>
     <html>
     <head>
     <title> The Title of this HTML Page </title>
     </head>

     <body>
     This is the body of this HTML Page
     </body>
     </html>

Notes

Creating an HTML file (3)

Save the file as plain text with the extension of .html (.htm is okay too).
Open this file from your browser.
On Chrome: File -> Open File
Whenever you change the content of the html file, and the change is saved, you should see the change reflected when you reload the page (Reload this page button on top left or Cmd+r ).

Notes

Full Template

     <!DOCTYPE html>
     <html lang="en">
     <head>
     <meta charset="utf-8">
     <title> The Title of this HTML Page </title>
     </head>

     <body>
     This is the body of this HTML Page
     </body>
     </html>

The area in red is required to pass the strictist HTML specification

Notes