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)

Specification

We will use a combination of HTML4 and HTML5.

A great resource you should bookmark and use:

http://www.w3schools.com/

Notes

HTML document

Describes the structure/semantics of a document and not its visual styling. Assumption is that documents have common elements (titles, paragraphs, and lists).
It does not describe page layout.
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
- TextWrangler, Atom, Sublime, Bracket

What makes HTML a code 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