View
2.534
Download
2
Category
Preview:
Citation preview
Webdesign Basics
What is the Internet?
Most people use a
browser on their
computer to view
webpages.
Wikipedia on Safari Mobile, iPhone
Wikipedia on a regular cellphone
iPhone applications Widgets
3 Layers
HTML (structure)
CSS (presentation)
JavaScript (interaction)
HTML
HyperText Markup Language
Files usually have .htm or .html as extension
Basic Structure of an HTML Document
• Doctype
• Head
‣ Title
‣ Metadata
• Body
‣ Content
Basic Structure of an HTML Document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Hello World</title></head><body> <h1>Hello World</h1></body></html>
Tags (HTML Elements)
Container Elements
<tag>text or other elements go here</tag>start tag + content + end tag
Empty Elements
<tag />single tag
Headings
<h1> Heading Level 1 (most important)
<h2><h3><h4><h5><h6> Heading Level 6 (least important)
Headings
<h1>This is the main heading</h1><h2>This is a subheading</h2>
Paragraphs
<p>This is a paragraph.</p><p>This is another paragraph.</p>
Forced Line Breaks
<p>This is a very very long line of text.<br />This piece of text is forced to the next line.</p>
Unordered Lists
<h1>Colors</h1><ul>
<li>Blue</li><li>Red</li><li>Orange</li><li>Green</li>
</ul>
Ordered Lists
<h1>My Favorite Movies</h1><ol>
<li>Star Wars Episode IV: A New Hope</li><li>A Nightmare On Elm Street</li><li>Fritz the Cat</li><li>Kids</li>
</ol>
Definition Lists
<dl><dt>CSS</dt><dd>Cascading Style Sheets is a style sheet language used to describe the presentation semantics of a document written in HyperText Markup Language.</dd>
</dl>
Emphasis
<p>Within a larger body of text, a piece in <em>italics</em> does not stand out much; instead, it signifies a context difference only <em>while</em> the text is being read.</p>
http://en.wikipedia.org/wiki/Emphasis_(typography)
Strong Emphasis
<p>By contrast, <strong>boldface</strong> makes text darker than surrounding text. With this technique, the emphasized text strongly stands out from the rest.</p>
http://en.wikipedia.org/wiki/Emphasis_(typography)
First Assignment
This will be a collaborative project.
The end product will be a small website.
Each one of you will make one page.
You will learn about:
• Structuring text (HTML)
• Typography for the web (CSS)
• Art Direction for the web (CSS + Photoshop techniques)
Part I: Structuring Text
• Choose a page from Wikipedia with a lot of text.
• Analyse the text and remove all unnecessary items ([footnotes], [edit],
image captions, ...).
• Add structure to the text using the html tags you’ve just learned.
The final stuctured text
will look somewhat like
this page.
Software
For the class asignments we will use Firefox
as our main development Browser.
You will also need to install the following add-ons:
• Web Developer by Chris Pederick
• Firebug by Joe Hewitt & Rob Campbell
Software
Install a few other browsers on your computer
• Safari
• Opera
• Chrome (Windows Only)
• Internet Explorer (Windows Only)
• Other less popular browsers: Flock, Camino, …
Software
In class we will use TextWrangler and Vormplus Webtools to
create HTML and CSS files.
http://www.barebones.com/products/TextWrangler/
http://vormplus.info/rmatica/vormplus-webtools
Software
Get a good text editor that supports
syntax highlighting.
Mac OS X
• TextWrangler
• BBEdit
• TextMate
• Espresso
Windows
• Crimson Editor
• Notepad++
• UltraEdit
Questions?
Software Demo
Installing Firefox and Add-ons
Installing TextWrangler and Vormplus Webtools
Working with Vormplus Webtools
Recommended