webdesign sp session01-lecture

8/7/2019 Webdesign Sp Session01-Lecture

1/38

the basICs


2/38

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 o publishing content (html), a system o addresses (urls),

and a protocol or traversing between pages o content (http).

The World Wide Web begins with one webpage, which becomes a collection owebpages

organized and connected with links that orm a website, which becomes a collection o

websites connected with links, and so on and so orth.

the www vs. the internet


3/38

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 sotware,

and is nationless.

web philosophy


4/38

best PraCtICes


5/38

No spaces

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

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

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

fle naming


6/38

Dont develop on your desktop!

Create a dedicated older or each project, exercise, etc.

For each project, its helpul to create a subolder (with that project older) or images

Similarly, you should create subolders or your CSS and JavaScripts

fle organization


7/38

Web Design, gRAPH-3271-01

Instructor: Erika Tarte

Rhode Island School o Design

Wintersession 2011

htMl 1

IntroduCtIon to Code


8/38

htMl


9/38

HTML = HyperText Markup Language

Formatting language

System o tags communicating a webpages 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


10/38

syntax


11/38

Written inside angle brackets ()

Consists o an opening tag and closing tag

Tells browser which elements are contained on a page

html tags


12/38

a tAg consists of an oPening tAg&closing tAg for an html element

Primary Headline

Secondary Headline

Paragraph of text

Link

tags communicate content semAntics

html tags


13/38

All html tags have attributes

An attribute is a quality or characteristic o the element

Elements can have multiple attributes

html attributes


14/38

html attributes

Link

element


15/38

html attributes

Link

AttRibute


16/38

html attributes

Link

vAlue


17/38

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

No inherent styles or properties

Dierent elements can share the same class

IDs are unique, and dierent elements cant share them

html class &id attributes


18/38

Link

Link

html class &id attributes


19/38

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 fle containing rules or how to display HTML elements

Browsers have deault rules or displaying elements, so we use CSS to override those rules

But, concerning code, it all begins with HTML

html + css


20/38

htMl In aCtIon


21/38


22/38


23/38


24/38

the eleMents


25/38

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

You dont need to memorize them all

Bookmark W3Schools.com, an excellent resource or reerencing elements, their tags, their

attributes, and all the possible values o those attributes. You can see how the code is

implemented, and experiment with live demonstrations.

html elements


26/38

Primary Headline (page title, site name, etc.)

Secondary Headline (subtitle, article headline, etc.)

Tertiary Headline (article subtitle)

...

...

...

html elements: headlines


27/38

Paragraph of text

You can many of them

Theres no limit

html elements: paragraphs


28/38

You can nest elements, like a link

inside of your paragraph

You should always nest links within grouping element, like a

paragraph or...

html elements: links


29/38

Link

Link

Link

this is an example of an unoRDeReD list (ul)

html elements: lists


30/38

Link

Link

Link

this is an example of an oRDeReD list (ol)



31/38

Heres an important lesson in semantic code

You can use CSS to identically style unordered and ordered lists

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

Ordered lists contain inormation with an emphasis on order(a waitlist, or example)

Unordered lists contain inormation without such emphasis (a grocery list, or example)

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

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



32/38

Soda

Yacht Club Cola

Coke

Pepsi

Tortilla Chips

Salsa

Avocados

this is an example of an oRDeReD list (ol) within an unoRDeReD list (ol)



33/38

Sometimes its difcult to distinguish between style and

structure. In typographic design, bold and italicized styles

are often used to improve or enhance readability. Thats the

presentation layer.

To use bold and italicized text to communicate meaning and

structure, web designers use emphasis

and strength on a structural level, meaning

some words should be emphasizes (typically but not

necessarily with italics) some words should be stronglyemphasized.

html elements: strong words and emphasis


34/38

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


35/38


36/38


37/38


38/38

in-class exercise: digitizing a document

W3 scHoolshttp://w3schools.com

W3 scHools Html 5 elements RefeRencehttp://ww w.w3schools.com/ht ml5/html5 _ reference.asp

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

webdesign sp session01-lecture

Documents