Intro to HTML 4.01 Instructor: Dawn Friedman The Fuse Factory Electronic and Digital Arts Lab 09.16.09

Workshop Outline Presentation: How a web site works (understanding elements and tags: the DNA of HTML) Presentation part 2: Rules “beautiful” HTML code adheres to Hands on exercise: Getting started in HTML 09.16.09

Presentation: How a web site works (understanding elements and tags: the DNA of HTML)

Presentation part 2: Rules “beautiful” HTML code adheres to

Hands on exercise: Getting started in HTML

What is HTML? Hyper Text Markup Language Hyper : You can go anywhere and everywhere on a browser Text : You are working primarily with text Markup : The code necessary for making the HTML readable by a browser Language : Refers to the specific syntax of a programming or scripting language 09.16.09

Hyper Text Markup Language

Hyper : You can go anywhere and everywhere on a browser

Text : You are working primarily with text

Markup : The code necessary for making the HTML readable by a browser

Language : Refers to the specific syntax of a programming or scripting language

What is HTML? HTML is a markup (or scripting) language - not a programming language A markup language contains markup tags that describe how the text is to be formatted 09.16.09

HTML is a markup (or scripting) language - not a programming language

A markup language contains markup tags that describe how the text is to be formatted

09.16.09

What is HTML? In the same way that proofreader marks help editors format an essay, HTML tells browsers how to format your page 09.16.09

In the same way that proofreader marks help editors format an essay, HTML tells browsers how to format your page

HTML vs. CSS HTML for content (think of a scaffold), CSS for presentation (color, fonts, advanced layout) Many HTML elements and attributes declaring colors, fonts, background, etc. are deprecated Deprecated means the code will not be (or is not) supported by the most recent versions of HTML and web browsers 09.16.09

HTML for content (think of a scaffold), CSS for presentation (color, fonts, advanced layout)

Many HTML elements and attributes declaring colors, fonts, background, etc. are deprecated

Deprecated means the code will not be (or is not) supported by the most recent versions of HTML and web browsers

What is a Web Browser? A web browser is a computer application that does two things: It goes to a web server on the internet and requests a page, so it can pull the page through the network and into your machine It interprets the HTML elements and tags within the page in order to display it on the screen as the page’s creator intended 09.16.09

A web browser is a computer application that does two things:

It goes to a web server on the internet and requests a page, so it can pull the page through the network and into your machine

It interprets the HTML elements and tags within the page in order to display it on the screen as the page’s creator intended

How a Web Browser Works 09.16.09

Viewing the Page Source Viewing the page source is like popping up the hood of a car to look at the engine Don’t be intimidated by the code! It will become more familiar with practice Viewing source code is a great way to learn Check out: www.w3schools.com/html/html_intro.asp 09.16.09

Viewing the page source is like popping up the hood of a car to look at the engine

Don’t be intimidated by the code!

It will become more familiar with practice

Viewing source code is a great way to learn

Check out:

www.w3schools.com/html/html_intro.asp

Elements and tags 09.16.09 <title>This is a title</title>

Elements and tags 09.16.09 <title>This is a title</title> All of this is an element

Elements and tags 09.16.09 <title>This is a title</title> This is a start tag

Elements and tags 09.16.09 <title>This is a title</title> And this is an end tag

09.16.09 What Does HTML Look Like?

Recommended Text Editors (Windows) Notepad++ Caditor GNU Emacs Crimson Editor ConTEXT SciTE Komodo Edit jEdit 09.16.09

Notepad++

Caditor

GNU Emacs

Crimson Editor

ConTEXT

SciTE

Komodo Edit

jEdit

Recommended Text Editors (Mac) Bluefish Editor Text Wrangler Smultron GNU Emacs Komodo Edit jEdit 09.16.09

Bluefish Editor

Text Wrangler

Smultron

GNU Emacs

Komodo Edit

jEdit

HTML Toolbox: Lists and Links Text links Image links Open link in a new browser window or tab Page anchors Email links Ordered lists Unordered lists 09.16.09

Text links

Image links

Open link in a new browser window or tab

Page anchors

Email links

Ordered lists

Unordered lists

HTML Toolbox: Sample Tags <a href> (link tag) <img src> (image tag) <mailto:> (email link tag) <table> (to create a table) <ol> (ordered list opening tag) <ul> (unordered list opening tag) 09.16.09

<a href> (link tag)

<img src> (image tag)

<mailto:> (email link tag)

<table> (to create a table)

<ol> (ordered list opening tag)

<ul> (unordered list opening tag)

Validating Your HTML Making sure your HTML is “clean” HTML errors are not necessarily reflected in the appearance of your page http://validator.w3.org http://htmlhelp.com/tools/valet/ Firefox add-ons 09.16.09

Making sure your HTML is “clean”

HTML errors are not necessarily reflected in the appearance of your page

http://validator.w3.org

http://htmlhelp.com/tools/valet/

Firefox add-ons

Special HTML Characters HTML renders them with numeric or character encoding so that they can be included in the document properly There are several characters that should not be left unencoded Left unencoded, they can confuse the browser and not show up correctly 09.16.09

HTML renders them with numeric or character encoding so that they can be included in the document properly

There are several characters that should not be left unencoded

Left unencoded, they can confuse the browser and not show up correctly

Special HTML Characters Less-than sign: < Greater-than sign: > Ampersand: & Quotation marks “ ” 09.16.09

Less-than sign: <

Greater-than sign: >

Ampersand: &

Quotation marks “ ”

Special HTML Characters Done Right Less-than sign: & it; Greater-than sign: & gt; Ampersand: & amp; Quotation mark: & quot Full list of special characters: degraeve.com/reference/specialcharacters.php 09.16.09

Less-than sign: & it;

Greater-than sign: & gt;

Ampersand: & amp;

Quotation mark: & quot

Full list of special characters:

degraeve.com/reference/specialcharacters.php

Skills Supplementing HTML XHTML CSS Javascript JQuery Moo Tools Flash PHP CMS (Content Management System) 09.16.09

XHTML

CSS

Javascript

JQuery

Moo Tools

Flash

PHP

CMS (Content Management System)

Difference Between HTML and XHTML Since 2000, W3C recommendations based on XML Provides more robust and rigorous documentation All tags must be closed All attributes have to be in quotes All lower case 09.16.09

Since 2000, W3C recommendations based on XML

Provides more robust and rigorous documentation

All tags must be closed

All attributes have to be in quotes

All lower case

What Beautiful HTML Code Looks Like DOCTYPE properly declared Tidy head section Body ID’ed Semantically clean menu Important content first css-tricks.com/what-beautiful-html-code-looks-like/ 09.16.09

DOCTYPE properly declared

Tidy head section

Body ID’ed

Semantically clean menu

Important content first

css-tricks.com/what-beautiful-html-code-looks-like/

What Beautiful HTML Code Looks Like DOCTYPE properly declared Tidy head section Body ID’ed Semantically clean menu webdesignfromscratch.com/html-css/semantic-html.php Important content first 09.16.09

DOCTYPE properly declared

Tidy head section

Body ID’ed

Semantically clean menu

webdesignfromscratch.com/html-css/semantic-html.php

Important content first

What Beautiful HTML Code Looks Like Proper ending tags Code is tabbed into sections Hierarchy of header tags Content, content, content No styling! Leave it to CSS! 09.16.09

Proper ending tags

Code is tabbed into sections

Hierarchy of header tags

Content, content, content

No styling! Leave it to CSS!

09.16.09

http://css-tricks.com/ what-beautiful-html-code-looks-like/ What Beautiful HTML Code Looks Like 09.16.09

http://css-tricks.com/

what-beautiful-html-code-looks-like/

Now on to part two: The hands-on make your first web page with HTML part! 09.16.09