Web Design I Spring 2009 Kevin Cole Gallaudet University

Plain Text No layout (structure, format)‏ No color No images No fonts No LINKS!

Plain Text Example This is a plain text file. There is nothing fancy. No fonts. No bold. No centering. No images.... It looks like it was typed on an old typewriter.

Markup Copy editors "mark up" plain text Use special symbols and abbreviations Commonly recognized standards

Markup example The quik quick brown fox...¶ Examples of common symbols:

Language Markup evolved from pen/paper to computers Standard Generalized Markup Language (SGML)‏ SGML difficult to learn

HyperText hyper-: extra, super, more than hypertext: text that "does more" Text "within" text links allow active cross-referencing A web of documents woven together

HTML HyperText Markup Language (HTML) is a standard set of codes (tags, and attributes) recognized by several different computer programs, which allows documents to be linked together and "marked up" with layout, fonts, colors, and pictures.

HTML Example Main Page My Home Page Hello, world! My Home Page Hello, world!

HTML Example Main Page My Home Page Hello, world! My Home Page Hello, world!

Some layout considerations Splitting into multiple pages Layout (position, columns)‏ Fonts and text emphasis Pictures Background and text colors

Style element: a meaningful section of a document examples include paragraphs, headings, lists, tables elements have functional meaning, and a default style style: color, size, position, borders, etc element function and style should be independent

Cascading Style Sheets (CSS)‏ style sheet: a list of styles for an element of text Examples: h1 {font-size: 32px; color: red;} p {margin: 1.2em 0;} The element will appear in red and large font. The element will have specific margins.

Plain text editors Produces files which are compatible with Windows, Mac OS X, Linux, BSD, Unix, etc. Do not "think" for you and "help" you by adding unexpected, unwanted format codes Do not hide information HTML is plain text with "markup" codes added.

page1.html My First Page My First Page This is a simple paragraph on a simple web page. Another paragraph... A third paragraph.

style1.css h1 {font-family: verdana; font-size: 48px; color: red;} p {margin: 1.2em 0;} img {border: thin solid green; padding: 5px;}

style2.css body {background: #ffffbf;} h1 {font-family: monospace; font-size: 20px; color: blue;} p {margin: 50px; font-family: cursive; font-size: 16px;} img {display: none;}

page1.html My First Page My First Page This is a simple paragraph on a simple web page. Another paragraph... A third paragraph.