W3b Sk1llz

Day 1 of 2

現在 !

“China could overtake the US as the country with the most internet users within two years, according to its government, which released figures showing that the nation's online population had increased to 137 million people in the last 12 months.”

12% of 1.6 Billion Chinese People Online

China now #1!


Day 1: Basic Web (HTML)



Hyper Text Mark-up Language

What is Hypertext?

In computing, hypertext is a user interface paradigm for displaying documents which, according to an early definition (Ted Nelson 1970), "branch or perform on request." The most frequently discussed form of hypertext document contains automated crossreferences to other documents called hyperlinks. Selecting a hyperlink causes the computer to display the linked document within a very short period of time.

Ted Nelson defined HTML as...

"...the lingua franca of the Net. It's a simple, universal mark-up language that allows Web publishers to create complex pages of text and images that can be viewed by anyone else on the Web, regardless of what kind of computer or browser is being used."

"Despite what you might have heard, you don't need any special software to create an HTML page; all you need is a word processor (such as SimpleText, BBEdit, or Microsoft Word) and a working knowledge of HTML. And lucky for all of us, basic HTML is dead easy." [3]

HTML is used to structure information — denoting certain text as headings, paragraphs, lists and so on — and can be used to describe, to some degree, the appearance and semantics of a document.

XHTML 1.0 is current standard

xhtml 1.0 specification All elements lowercase Use double-quotes All tags close Removal of some arcane tags (<blink />) Separation of style/css and structure/html

Why use standards?

Compliance on multiple operating systems Compliance on multiple web browsers Accessibility (disabilities) Scalable media (from computer to cell phone to PDA) Quality assurance


Create plain-text file in favorite text editor


Save file with name “index.html” Open web browser Drag your text file into browser window Now, make edit, and refresh the browser window to see changes.

Basic HTML Webpage
<html> <head> <title>Summer</title> </head> <h1>Summer Vacation</h1> <p>My summer vacation was sunny, silly, and far too short.</p> <p>How many days till Christmas?</p> </html>

Basic HTML Webpage
<html> <head> <title>Summer</title> </head> <h1>Summer Vacation</h1> <p>My summer vacation was sunny, silly, and far too short.</p> <p>How many days till Christmas?</p> </html>


Teach Yourself!
http://webmonkey.com/webmonkey/teachingtool/index.html http://webmonkey.com/webmonkey/reference/html_cheatsheet/ http://www.communitymx.com/content/article.cfm?cid=230AD http://en.wikipedia.org/wiki/HTML_element

Testing: Validation

Valid Basic Webpage
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Jon Phillips</title> </head> <body> <!-- menu start --> <p><a href="about.html">about</a> : <a href="http://www.rejon.org/">rejon.org</a> : <a href="projects/index.html">projects</a> </p> <!-- menu stop --> <h1>bio</h1> <p><b>Jon Phillips</b> (www.rejon.org) is an open source developer, artist, writer, educator, lecturer, and curator with 12+ years of experience creating communities and working within computing culture. His involvements with mixing culture and software development have been shown internationally at the Desktop Developers Conference (2005), SFMoMA (2004), University of Tokyo (2004), Korea's KAIST (2004), UCLA Hammer Museum's Digital Storytelling Conference, UC-Berkeley's 040404 Conference (2004), USC Aim Festival IV (2003), and the ICA London (2002). He is a core Open Source developer advocate and developer on Inkscape (http://www.inkscape.org), a scalable vector graphics editor and on the Open Clip Art Library (http://openclipart.org), and is writing/producing a book, "CVS: Concurrency, Versioning and Systems." Currently, he is visiting faculty at the San Francisco Art Institute (www.sfai.edu) in the Design+Technology department and is an Open Source developer for the Creative Commons (www.creativecommons.org).</p> <!-- footer start --> <p><a href="mailto:jon@rejon.org">email</a></p> <!-- footer stop --> </body> </html>



Create your own webpage with personal profile and with all your class work on it (linked to it)

Your Page MUST Validate: http://validator.w3.org/

Work in groups of 4-5 ppl. to make a simple group page with links to group member pages

TEACHING: Styling your Pages


By eslitereader, http://flickr.com/photos/eslitereader/1070233293/ http://creativecommons.org/licenses/by-nc/2.0

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.