HTML

Introduction  

A web document is comprised of three components: content, presentation, and behavior. Hypertext Markup Language, or HTML, is the first component, CSS the second, and JavaScript the third. The latter two hinge on HTML, so it's important from the outset to get the content part correct.

That said, you'll learn to author pages that communicate clearly and efficiently between server and client, conform to the W3C standard, and are portable across all W3C–compliant browsers.

The concepts covered in class will include paragraphs, headings, tables, unordered, ordered, and definition lists, comments, formatting, proper document organization, proper documentation, and file exchanging.

Prerequisite:
No previous programming knowledge is necessary.

top

Prerequisite

Students should be proficient with web browsers and the Internet.

top

Topics Covered  

• Basic formatting tags for paragraphs, boldface, italics, underlines, rules, etc
• Tables
• Lists (nested and non–nested)
  • Unordered
  • Ordered
  • Definition
• Code conformance with the W3C standard for HTML 4.01
• File transferring with ftp
• File permissions
• Commenting and proper documentation techniques

top

Assignments  

There will be two homework assignments and a project.

Compiling Environment

You'll write your source code in any text editor and check your code with HTML Tidy. Any Internet browser will serve as your HTML code interpreter. No other software program will be needed to produce Web documents.

top

Announcements  

7 June 2010:

• Class on 21 June is canceled. At our next session, we'll discuss how to make it up.

Time and Place  

• Mondays
• 6:00 PM — 8:00 PM
• 1025 East building, Hunter College (map)

There'll be a 15–minute break at about 7:00 PM

top

Dates  

Monday, 7 June 2010

• Introduction to the course
• Introduction to HTML
• Introduction to HTML Tidy

Monday, 14 June 2010

• Introduction to file systems
• How to navigate through files/folders/directories from the command line
• Text basics
• Homework 1 due

TBD

• Review of the structural tags
• FTP: ftp program, Cyberduck (for the Macintosh) and SmartFTP (for Windows®)
• Homework 2 due

Monday, 28 June 2010

• Lists (ordered, unordered, and definition)

Monday, 5 July 2010

• Rules and forms
• Images and image maps

Monday, 12 June 2010

• Tables
• Project due

top

Textbook

Free online sources will be the textbook for this course. Refer to the Assigned Readings section for more.

Assigned Readings  

Getting Started With HTML

http://www.w3.org/MarkUp/Guide/

Advanced HTML

http://www.w3.org/MarkUp/Guide/Advanced.html

top

Suggested Readings  

Title	Author	Edition	ISBN	Book cover
HTML & XHTML Pocket Reference	Jennifer Niederst Robbins	Third	0596527276
HTML & XHTML: The Definitive Guide	Chuck Musciano & Bill Kennedy	Sixth	0596527322

top

Homework  

HW 1

1. Visit the Software section below and install the software tools you'll need for the semester.
2. Read Getting Started With HTML as listed in the Assigned Readings section above.
3. Go to http://www.w3schools.com/htmL/tryit.asp?filename=tryhtml_basic and edit the text input area on the left. This will give you an idea of how basic content works.
4. Go to http://www.w3schools.com/htmL/tryit.asp?filename=tryhtml_paragraphs1 and edit the text input area on the left. This will give you an idea of how basic paragraphs work.
5. Ensure tidy is working fine. In Mac OS X, launch the terminal, or in Windows® launch the command prompt. (For the terminal: command key + space bar, then “terminal” in the Spotlight® text box; for the command prompt: Windows® key + r, then “cmd” in the Run prompt.) Now type
   
   
   tidy –help
   
   
   A screenful of information should be rendered on the screen.

HW 2

Build a page from scratch. Include the following tags:

<h1>, <h2>, <h3>, <em>, <strong>, <br>, <p>, <hr>, <img>, and <a>.

Include keywords (see the source of this page for more), comments, and the proper DTD. Observe proper formatting and ensure that tidy reports no "warnings or errors." Test in multiple browsers.

top

Project  

Summer 2010 Project

Resources  

• Closed Google group for this course
• HTML 4.01 Specification
  ⌊ http://www.w3.org/TR/html4/

top

Software  

The software tools that you'll use for this course are

Amaya

I advise you to use the W3's Amaya, which is free and available for Mac OS X, Windows, Linux.

• Windows NT/2000/XP: 13.9MB
• Mac™
  • PPC (22.0MB)
  • Intel Tiger (21.3MB)
  • Intel Leopard (20.6MB)

Notepad++ for Windows

For the Windows people, if you try Amaya and don't like it, try Notepad++.

TextWrangler for Mac

For the Mac folks, if you try Amaya and it isn't your thing, try TextWrangler.

HTML Tidy

The Linux version of Tidy is 223kb

The Mac version of Tidy is 250kb

• Watch the three–minute tutorial on how to install tidy on Mac OS X (9.2MB)

The Windows version of Tidy is 135kb

• Watch the two–minute tutorial on how to install tidy in Windows (9.2MB)

Any Browser

I encourage you to visit Kelson Vibber's Alternative Browser Alliance. Links to many free alternative web browsers are listed there, and the information contained on its pages will prove very useful as you learn HTML.

7–Zip

A free, open source packing/unpacking program, much like WinRAR or WinZip.

Link Checker

A tool to check for valid links on your pages.

top

Contact  

E–mail: rvanegas at hunter dot cuny dot edu

top

---

Last modified: