Class 1: Introductions

Class 1
IntroduCtIons
Web Design , gR APH -327 1- 01
Instructor: Erika Tarte
Rhode Island School of Design
Wintersession 2011

the www vs. the internet

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.

web philosophy

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.

course 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.

file naming

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 organization

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

htMl 1
IntroduCtIon to Code
Wintersession 2011

html, the text that makes the web go ‘round

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 tags

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 attributes

All html tags have attributes

An attribute is a quality or characteristic of the element

Elements can have multiple attributes

html attributes

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

html attributes

At tRibute

html attributes

vAlue

html class & id attributes

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 + css

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 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: headlines

<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: paragraphs

<p>Paragraph of text</p>

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

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

html elements: links

<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: lists

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


<ol>
</ol>
this is an example of an oRDeReD lis t (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 lis t (ol) within an unoRDeReD lis t (ol)

html elements: strong words and emphasis

<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 2
seMantIC Code
Wintersession 2011

in-class exercise: digitizing a document

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

W 3 scHool s
http://w3schools.com

W 3 scHool s Html 5 elements RefeRence
http://www.w3schools.com/html5/html5 _ reference.asp

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

Class 1: Introductions

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Class 1: Introductions

Similar to Class 1: Introductions (20)

Recently uploaded

Recently uploaded (20)

Class 1: Introductions