Class 1: Introductions

Class 1IntroduCtIons

Web Design, gR APH-327 1- 01

Instructor: Erika TarteRhode Island School of DesignWintersession 2011

the basICs

World Wide Web is not the Internet. The Internet is a network on computers that communicate with each other. It has been in existence since the 1960s. It does not have a presentation layer.

The World Wide Web is a system of publishing content (html), a system of addresses (urls), and a protocol for traversing between pages of content (http).

The World Wide Web begins with one webpage, which becomes a collection of webpages organized and connected with links that form a website, which becomes a collection of websites connected with links, and so on and so forth.

the www vs. the internet

The World Wide Web was created with the intention to provide universal access to knowledge. It uses languages with simple syntax, does not require special software, and is nationless.

web philosophy

The World Wide Web is a powerful creative tool. Our studio projects and exercises are intended move us beyond portfolios and corporate sites, to explore web design as a medium with rich potential for integration into our current design practices.

Our seminar readings and discussions will challenge us to think expansively about web design, web culture, and new media technologies. Rather than celebrating technology, they should encourage us to remain open-minded and critical.

course philosophy

best PraCtICes

No spaces

Only dash (-) and underscores (_) are allowed

Always use an extension, such as filename.jpg or filename.html

Good rule of thumb: lowercase.jpg, lower_case.jpg or lower-case.jpg or camelCase.jpg

file naming

Don’t develop on your desktop!

Create a dedicated folder for each project, exercise, etc.

For each project, it’s helpful to create a subfolder (with that project folder) for images

Similarly, you should create subfolders for your CSS and JavaScripts

file organization



htMl 1IntroduCtIon to Code

htMl

HTML = HyperText Markup Language

Formatting language

System of tags communicating a webpage’s content (elements) to the browser

Can be created in any text editor (TextEdit, Dreamweaver, Notepad, etc.)

Uses a .html extension

html, the text that makes the web go ‘round

syntax

Written inside angle brackets (<>)

Consists of an opening tag and closing tag

Tells browser which elements are contained on a page

html tags

<html> </html>a tAg consists of an oPening tAg & closing tAg for an html element

<h1>Primary Headline</h1>

<h2>Secondary Headline</h2>

<p>Paragraph of text</p>

<a href="http://www.google.com">Link</a>tags communicate content semAntics

html tags

All html tags have attributes

An attribute is a quality or characteristic of the element

Elements can have multiple attributes

html attributes

html attributes

<a href="http://google.com">Link</a>element

html attributes

<a href="http://google.com">Link</a> At tRibute

html attributes

<a href="http://google.com">Link</a> vAlue

These 2 attributes give you more control over the elements once you begin using CSS

No inherent styles or properties

Different elements can share the same class

IDs are unique, and different elements can’t share them

html class & id attributes

<a href="http://google.com" class="button">Link</a>

<a href="http://google.com" id="button1">Link</a>

html class & id attributes

CSS = Cascading Style Sheet

HTML says what to display, CSS says how to display it!

You should think about HTML as a structural layer, and CSS as presentation layer

Simple text file containing rules for how to display HTML elements

Browsers have default rules for displaying elements, so we use CSS to override those rules

But, concerning code, it all begins with HTML

html + css

htMl In aCtIon

Pendule deMo

the eleMents

There are many elements, and new ones were just recently introduced with HTML5

You don’t need to memorize them all

Bookmark W3Schools.com, an excellent resource for referencing elements, their tags, their attributes, and all the possible values of those attributes. You can see how the code is implemented, and experiment with live demonstrations.

html elements

<h1>Primary Headline (page title, site name, etc.)</h1>

<h2>Secondary Headline (subtitle, article headline, etc.)</h2>

<h3>Tertiary Headline (article subtitle)</h3>

<h4>...</h4>

<h5>...</h5>

<h6>...</h6>

html elements: headlines

<p>Paragraph of text</p>

<p>You can many of them</p>

<p>There’s no limit</p>

html elements: paragraphs

<p>You can nest elements, like <a href="http://google.com">a link</a> inside of your paragraph </p>

<p>You should always nest links within grouping element, like a paragraph or...</p>

html elements: links

<ul> <li><a href=”http://google.com”>Link</a></li> <li><a href=”http://google.com”>Link</a></li> <li><a href=”http://google.com”>Link</a></li> </ul>this is an example of an unoRDeReD list (ul)

html elements: lists

<ol> <li><a href=”http://google.com”>Link</a></li> <li><a href=”http://google.com”>Link</a></li> <li><a href=”http://google.com”>Link</a></li> </ol>this is an example of an oRDeReD list (ol)


Here’s an important lesson in semantic code

You can use CSS to identically style unordered and ordered lists

BUT you should use the proper list for the content you are organizing

Ordered lists contain information with an emphasis on order (a waitlist, for example)

Unordered lists contain information without such emphasis (a grocery list, for example)

Lists, regardless of type, may be nested within each other

Example: a grocery list (unordered) with nested brand preferences (ordered)


<ul> <li>Soda <ol> <li>Yacht Club Cola</li> <li>Coke</li> <li>Pepsi</li> </ol> </li> <li>Tortilla Chips</li> <li>Salsa</li> <li>Avocados</li> </ul>this is an example of an oRDeReD list (ol) within an unoRDeReD list (ol)


<p>Sometimes its difficult to distinguish between style and structure. In typographic design, bold and italicized styles are often used to improve or enhance readability. That’s the presentation layer.</p>

<p>To use bold and italicized text to communicate meaning and structure, web designers use <em>emphasis</em> and <strong>strength</strong> on a structural level, meaning some words should be <em>emphasizes</em> (typically but not necessarily with italics) some words should be <strong>strongly emphasized</strong>.</p>

html elements: strong words and emphasis



htMl 2seMantIC Code

Today we will practice HTML syntax (rules) and semantics (meaning) by translating printed documents into syntactically and semantically correct HTML code.

in-class exercise: digitizing a document

in-class exercise: digitizing a document

W3 scHools http://w3schools.com

W3 scHools Html 5 elements RefeRence http://www.w3schools.com/html5/html5 _ reference.asp

PeRioDic tAble of Html5 elements http://joshduck.com/periodic-table.html

http://typekit.com

http://typekit.com

http://typekit.com

http://typekit.com

Education

Class 1: Introductions