w3b sk1llz at zhongshan university china day 1 of 2

8/14/2019 W3b Sk1llz at Zhongshan University China Day 1 of 2

1/46


2/46


3/46


4/46


5/46


6/46


7/46

China could overtake the US as

the country with the most internetusers within two years, accordingto its government, which released

figures showing that the nation'sonline population had increased to137 million people in the last 12

months.http://www.guardian.co.uk/media/2007/jan/25/china.digitalmedia


8/46

12% of 1.6 BillionChinese People Online


9/46

China now #1!


10/46


11/46


12/46


13/46


14/46


15/46

?


16/46


17/46


18/46


19/46


20/46

Day 1: Basic Web (HTML)


21/46


22/46

HTML


23/46

=


24/46

Hyper Text Mark-up Language


25/46

What is Hypertext?


26/46

In computing, hypertext is a user interfaceparadigm for displaying documents which,according to an early definition (Ted Nelson1970), "branch or perform on request." The

most frequently discussed form of hypertextdocument contains automated cross-references to other documents calledhyperlinks. Selecting a hyperlink causes thecomputer to display the linked documentwithin a very short period of time.

http://en.wikipedia.org/wiki/Hypertext


27/46

Ted Nelson defined HTML as...


28/46

"...the lingua franca of the Net. It's asimple, universal mark-up languagethat allows Web publishers to create

complex pages of text and imagesthat can be viewed by anyone elseon the Web, regardless of what kind

of computer or browser is beingused."

http://webmonkey.com/webmonkey/96/53/index0a.html?tw=authoring


29/46

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

http://webmonkey.com/webmonkey/96/53/index0a.html?tw=authoring


30/46

HTML is used to structureinformation denoting certain textas headings, paragraphs, lists andso on and can be used todescribe, to some degree, theappearance and semantics of adocument.

http://en.wikipedia.org/wiki/Html


31/46

XHTML 1.0 is current standard xhtml 1.0 specification All elements lowercase Use double-quotes All tags close

Removal of some arcane tags () Separation of style/css and structure/html

http://www.w3.org/TR/xhtml1/


32/46

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


33/46

HOWTO Create plain-text file in favorite text editor

notepad

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.


34/46

Basic HTML Webpage

Summer

Summer Vacation

My summer vacation was sunny, silly, and far tooshort.

How many days till Christmas?


35/46

Basic HTML Webpage

Summer

Summer Vacation

My summer vacation was sunny, silly, and far tooshort.

How many days till Christmas?


36/46

http://rejon.org/wiki/Developing_a_Buzz:Web_Workshop
http://rejon.org/wiki/Developing_a_Buzz:Web_Workshophttp://rejon.org/wiki/Developing_a_Buzz:Web_Workshop


37/46

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
http://webmonkey.com/webmonkey/teachingtool/index.htmlhttp://webmonkey.com/webmonkey/reference/html_cheatsheet/http://www.communitymx.com/content/article.cfm?cid=230ADhttp://en.wikipedia.org/wiki/HTML_elementhttp://en.wikipedia.org/wiki/HTML_elementhttp://www.communitymx.com/content/article.cfm?cid=230ADhttp://webmonkey.com/webmonkey/reference/html_cheatsheet/http://webmonkey.com/webmonkey/teachingtool/index.html


38/46

Testing: Validationhttp://validator.w3.org/
http://validator.w3.org/http://validator.w3.org/


39/46

Valid Basic Webpage

Jon Phillips

about :

rejon.org :

projects

bio

Jon Phillips (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 withmixing 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'sDigital 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 visitingfaculty 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).

email

http://rejon.org/wiki/Developing_a_Buzz:Web_Workshop#Valid_Basic_Page
http://rejon.org/wiki/Developing_a_Buzz:Web_Workshop#Valid_Basic_Pagehttp://rejon.org/wiki/Developing_a_Buzz:Web_Workshop#Valid_Basic_Page


40/46

NEXTCLASS


41/46

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


42/46

Your Page MUS T Validate:http://validator.w3.org/
http://validator.w3.org/http://validator.w3.org/http://validator.w3.org/


43/46

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


44/46

TEACHING: Styling your Pages


45/46

STOP


46/46

By eslitereader, http://flickr.com/photos/eslitereader/1070233293/

[email protected]

w3b sk1llz at zhongshan university china day 1 of 2

Documents