Developing a Buzz:Web Workshop

What is HTML

 * HTML = Hyper Text Mark-up Language
 * Developed originally by Tim Berners-Lee
 * What is Hypertext?
 * In computing, hypertext is a user interface paradigm for displaying documents which, according to an early definition (Nelson 1970), "branch or perform on request." The most frequently discussed form of hypertext document contains automated cross-references 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 is 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."
 * 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.
 * Standardization and HTML
 * XHTML 1.0 is current standard for web pages
 * xhtml 1.0 spec
 * lowercase
 * use double-quotes
 * all tags close
 * removal of some arcane tags
 * separation of form/style/css and content/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

HOWTO

 * Create plain-text file in favorite text editor
 * text-edit
 * commandline: pico
 * Open web browser like safari or firefox
 * Drag your file into a new browser window
 * Now, when you edit, all you have to do after saving the file with changes is to hit refresh in the browser window to see changes.

Basic HTML Page
Summer

Summer Vacation

My summer vacation was sunny, silly, and far too short.

How many days till Christmas?

Webmonkeys HTML Teaching Tool

 * View Source
 * Paragraphs
 * Headlines
 * Links
 * Mailtos
 * Comment tags
 * Bold/Italics
 * Preformatted text
 * Blockquotes
 * Line breaks
 * Ordered lists
 * Unordered lists

HTML Elements

 * Header elements defined in HTML 4.01
 * Body elements defined in HTML 4.01
 * Headings
 * Structured text
 * Block-level
 * Inline
 * Lists
 * Tables
 * Forms
 * Other containers
 * Presentational markup
 * Links and anchors
 * Images
 * Others
 * Frames

Valid Basic Page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">  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 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).

email

For Next Class

 * Make a simple page using your biographies
 * Make sure your pages validate (xhtml 1.0)
 * Read over instructions with your web-hosting in order to get your site up and running

Webhosting

 * Dreamhost
 * Websitesource

Officially, Stylesheets are Cascading Style Sheets
"In computing, Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL. The CSS specifications are maintained by the World Wide Web Consortium (W3C)." 

What is possible?

 * http://www.csszengarden.com/
 * More Examples

Specifications
The standard currently is CSS 2.1.


 * http://www.w3.org/Style/CSS/
 * http://www.w3.org/TR/CSS1
 * http://www.w3.org/TR/CSS2/
 * http://www.w3.org/TR/CSS21/

Basics
A style sheet consists of a list of rules. Each rule consists of a selector and a declaration block. A declaration-block consists of a list of semicolon-separated declarations in curly braces. Each declaration itself consists of a property, a colon then a value.

body { background-color: red; }

Basic 2
Elements are styled through selectors. Here are some examples:

All elements By element name Descendants class or id attributes Adjacent elements Direct child element By attribute
 * that is, using the * selector
 * e.g. for all p or h2 elements
 * e.g. for a elements that are descendants of li elements (e.g links inside lists) the selector is li a
 * e.g. .class and/or #id for elements with class="class" or id="id"
 * e.g. for all p elements preceded by h2 elements, the selector would be h2 + p
 * e.g. for all span elements inside p, but no span elements deeper within the hierarchy, the selector would be p > span
 * e.g. for all the selector would be input[type="text"]

In addition to these, a set of pseudo-classes can be used to define further behavior. Probably the best-known of these is :hover, which applies a style only when the user 'points to' the visible element, usually by holding the mouse cursor over it. It is appended to a selector as in a:hover or #elementid:hover. Other pseudo-classes and pseudo-elements are, for example, :first-line, :visited or :before. A special pseudo-class is :lang(c), where the style would be applied on an element only if it is in language "c".

p { font-family: "Garamond", serif; } h2 { font-size: 110%; color: red; background: white; } .note { color: red; background: yellow; font-weight: bold; } p#paragraph1 { margin: 0; } a:hover { text-decoration: none; }


 * I'm using examples from Wikipedia.

class
Classes are a type that may be used however many times you want. It is a blueprint for creating many different styles.

This paragraph will be rendered in red and bold, with a yellow background. HTML

p.note { color: red; font-weight: bold; background: yellow; } Stylesheet

id
IDs are meant to be used only once on a page, however, due to HTML glitches, you may use just like classes. Try to use only once per page though.

This paragraph will be rendered in red and bold, with a yellow background. HTML

p#note { color: red; font-weight: bold; background: yellow; } Stylesheet

inline
You would include stylesheets inside the tags as an attribute.

Hello this is a red paragraph.

global (embedded)
Title 

[DOCUMENT BODY GOES HERE]

linked (preferred)
 Linking Example (preferred)

 @import "example.css"; Linking Example 2 (doesn't work in all browsers)

inheritance
In cases where local, global, and linked style definitions conflict, the most specific stylesheet will generally take precedence: local overrides global, global overrides linked. Similarly, inline style attributes override ID, ID overrides class, and class overrides stylesheet-defined HTML elements. (Hence the concept of cascading stylesheets)

Comments
body { background: yellow; padding: 4px; /* border: 1px solid black; */ }

/* This is a comment and is not visible */

commandline and programming basics

 * Basic Concepts
 * Input and Output (black box concept)
 * Basic Binary logic
 * Storage, Processing, Retrieval
 * Basic Concepts
 * Storage = Variables
 * Processing = Functions
 * Retrieval = User Input + Opening Files etc
 * Basic Scripting using BASH (Mac OS X Commandline)
 * ls - list directory contents
 * wildcarding characters
 * cd - change working directory
 * cd ~
 * cd /
 * rm - remove a file or directory (rm -Rf)
 * pwd - get current working directory
 * mkdir DIRECTORY_NAME - make a directory
 * mv DIRECTORY_NAME DIR_NAME - change name or move to another location
 * cat - concatenate files (print files to stdout)
 * pico - basic text editor
 * concept of piping and redirecting
 * FTP
 * Concepts
 * local server
 * remote server
 * synchronization
 * Terminal - CLI
 * get - get files from server
 * put - put files on server
 * mget - use wildcard to get files (multiple files)
 * mput - use wildcard to put files (multiple files)
 * ls - to see what is in the directory on the remote server
 * lcd - local current working directory
 * lls - local directory listing
 * GUI (Graphical User Interface)
 * Cyberduck
 * Fetch
 * Filezilla
 * Your hosting company's backend (administrative interface)
 * Basic Programming Introduction using Perl (www.perl.com)
 * http://www.acm.uiuc.edu/sigunix/workshops/perltut/html/perltut.html

UNIX and Commandline Help

 * http://www.isu.edu/departments/comcom/unix/workshop/unixindex.html
 * http://www.ee.surrey.ac.uk/Teaching/Unix/
 * http://support.uchicago.edu/docs/misc/unix/tutorial/
 * http://amath.colorado.edu/computing/unix/

Tables, Images and Slicing in Photoshop

 * Tables
 * Tables in HTML
 * Tables in CSS
 * See jon's example at http://www.rejon.org/test (html and css)
 * http://www.w3.org/TR/REC-CSS2/tables.html
 * http://glish.com/css/
 * Images
 * Pages now should be from 300/k large maximum really including all html, css, and media (images)
 * Slicing in Photoshop
 * Use layers
 * save for web

Standards Compliant Web Design from End to End (Jon Stylee)

 * 1) Identify Goals + Site Structure (Think Hierarchical)
 * 2) How can you group content?
 * 3) Try to only make 5-7 categories for content
 * 4) Make Proposal/Contract with Client
 * 5) Be Specific as to what you are doing for them!
 * 6) Develop Concept Sketches
 * 7) Make Mockups in Favorite Professional Way
 * 8) Illustrator, Inkscape, Photoshop
 * 9) Why use Illustration program compared to photo-editing app?
 * 2:1 rule (about window size)
 * 1) Minimum: 600 px width by 300 px height
 * 2) Compression/Expansion: How will page compress and expand?
 * 3) Navigation
 * 4) Standard Navigation (unless really good idea to change)
 * 5) Think in terms of sections/boxes (general)
 * 6) Header
 * 7) menu
 * 8) body
 * 9) sidebar
 * 10) footer
 * 11) Slice and Dice: Create CSS+XHTML to match mockup
 * 12) Use text editor, browser and image editing program
 * 13) Test
 * 14) Browsers (Internet Explorer, Mozilla, on both Mac/PC)
 * 15) Validation/Compliance
 * 16) Demo Site and get Feedback
 * 17) If for client, then show to them
 * 18) If everything fine, then done, otherwise...
 * 19) Revise the site and go back to "Slice and Dice step" and continue

Examples

 * Open Clip Art Library (http://www.openclipart.org/)
 * Patrick Clancy Personal Website (http://www.patrickclancy.org/)

HTML tag format


CSS selctor format
a.myclass { color: blue; background: red; padding: 8px; }

INLINE

 * Does not break the current line.
 * EXAMPLES: b, i, span

BLOCK

 * Is a block that breaks a line
 * EXAMPLES: p, h1..h*, div, blockquote

DIV

 * DIV stands for block level division. It is generic.
 * DIVs are used in modern web design to create the overall look and feel of a page.

Example 1

div { padding: 2%; background-color: red; width: 20%; } Example 1 CSS

This is my sidebar. Example 2 HTML

div#sidebar { float: right; padding: 2%; background-color: #ccc; width: 25%; } Example 2 CSS

BOX MODEL

 * Box model is a way of understanding how block level elements styling works as a block.
 * interactive example
 * w3.org diagram of box
 * more examples
 * GO THROUGH THIS: http://www.w3.org/TR/REC-CSS2/box.html

hello friends Example 1 HTML

div#box { width: 100px; border: 1px solid #900; padding: 10px; margin: 10px; background: #fee; } Example 1 CSS

SPAN

 * This is used inline.

NEW UPDATE : This is a new item. Example 1

span.alert { color: red; text-decoration: blink; }

Unordered List
 item one</li> <li>item two</li> <li>item three</li> </ul> Example 1

ul { padding: 8px; background: #eeeeee; } Example 1 CSS

Ordered List
<ol> <li>item one</li> <li>item two</li> <li>item three</li> </ol>

ol { padding: 2%; background: green; } Example 1 CSS


 * http://www.w3schools.com/css/css_list.asp
 * list-style-type: none;

IMG
<img src="myimage.jpg" alt="Text here in case image not loading" name="Text for mouse when over image" class="myimage" />

Go through the previous web standards compliant design scheme

 * layout simple page using div, span, float
 * We are designing a page with one big main section, a header, and sidebar.

hello

This is the header. Maybe good to put your title here and menu.

This is where your main page section goes.

This is where possibly quick information, a menu, etc, might go.

HTML

body { margin: 0; padding: 0; }

width: 100%; background-color: blue; color: white; }
 * 1) header {

width: 80%; float: left; background-color: #eee; }
 * 1) main {

width: 20%; float: left; background-color: #ccc;
 * 1) sidebar {

}

CSS (Version 1)

html { margin: 0; padding: 0; }

width: 100%; background-color: blue; color: white; padding: 2%; }
 * 1) header {

width: 80%; float: left; background-color: #eee; padding: 2%; border: 1px dotted black; }
 * 1) main {

width: 20%; float: left; background-color: #ccc; padding: 2%;
 * 1) sidebar {

}

CSS (Version 2)

Customizing Your Site

 * Google Search
 * Meta Tags
 * Active Tabs
 * Popups (CSS)
 * Overflow Sections (No Frames)
 * Embed Video
 * Using Other Sites

Google Search
<form method="get" action="http://www.google.com/search"> <input name="q" size="15" maxlength="255" value="" class="text-input" type="text"> <input name="btnG" value="search" class="button" type="submit"> <input name="domains" value="http://YOUR_DOMAIN.XXX” type="hidden"> <input name="sitesearch" value="http://YOUR_DOMAIN.XXX” type="hidden">

Google Search Styling Forms
<form id=”search”> <input id=”query” name=”text-input” type=”text” /> <input id=”submit” name=”submit” type=”submit” />

Meta Tags

 * Meta stands for metadata
 * Metadata is “data about data”
 * Place inside ..

Meta Tags Cont'd
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="keywords, describe, content, tags" /> <meta name="description" content="A description of your site." /> <meta name="robots" content="index, follow" /> <meta name="authors" content="Your Name, Another Name" />

Meta Tags References
http://www.html-reference.com/META.htm http://www.w3.org/TR/html401/struct/global.html http://www.webdeveloper.com/html/html_metatags.html http://vancouver-webpages.com/META/ http://searchenginewatch.com/webmasters/article.php/2167931

Normal Menu
home</a> news</a> about</a>

Using Active Tabs
home</a> news</a> about</a>

Dropdown Menus (CSS)

 * Examples
 * http://www.alistapart.com/articles/horizdropdowns/
 * http://www.alistapart.com/articles/hybrid/
 * http://www.alistapart.com/articles/dropdowns/

HTML
<div id=”test”>hey

CSS
div#test { height: 100px; width: 100px; overflow: auto; }

Video

 * http://www.w3schools.com/media/media_browservideos.asp

Helper Style
<object data="video.avi" type="video/avi" />
 * NOT
 * Works with any file type

Hyperlink
 Click here to play a video file </a>
 * works for any media type

Using Other Sites (DO THIS)

 * http://www.flickr.com
 * http://www.myspace.com
 * http://www.tribe.net
 * http://www.upcoming.org
 * http://video.google.com
 * http://www.youtube.com
 * http://www.archive.org

Favicon
<link rel="icon" href="/favicon.ico" type="image/ico" /> <link rel="SHORTCUT ICON" href="/favicon.ico" />
 * Paste text into web head
 * specifics
 * 16 x 16 pixels
 * use gimp.org or photoshop
 * save as ico, png, jpg, gif or bmp (png or ico preferred)