Webdesign Sp Session01-Lecture
-
Upload
erika-tarte -
Category
Documents
-
view
226 -
download
0
Transcript of Webdesign Sp Session01-Lecture
-
8/7/2019 Webdesign Sp Session01-Lecture
1/38
the basICs
-
8/7/2019 Webdesign Sp Session01-Lecture
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
-
8/7/2019 Webdesign Sp Session01-Lecture
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
-
8/7/2019 Webdesign Sp Session01-Lecture
4/38
best PraCtICes
-
8/7/2019 Webdesign Sp Session01-Lecture
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
-
8/7/2019 Webdesign Sp Session01-Lecture
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
-
8/7/2019 Webdesign Sp Session01-Lecture
7/38
Web Design, gRAPH-3271-01
Instructor: Erika Tarte
Rhode Island School o Design
Wintersession 2011
htMl 1
IntroduCtIon to Code
-
8/7/2019 Webdesign Sp Session01-Lecture
8/38
htMl
-
8/7/2019 Webdesign Sp Session01-Lecture
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
-
8/7/2019 Webdesign Sp Session01-Lecture
10/38
syntax
-
8/7/2019 Webdesign Sp Session01-Lecture
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
-
8/7/2019 Webdesign Sp Session01-Lecture
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
-
8/7/2019 Webdesign Sp Session01-Lecture
13/38
All html tags have attributes
An attribute is a quality or characteristic o the element
Elements can have multiple attributes
html attributes
-
8/7/2019 Webdesign Sp Session01-Lecture
14/38
html attributes
Link
element
-
8/7/2019 Webdesign Sp Session01-Lecture
15/38
html attributes
Link
AttRibute
-
8/7/2019 Webdesign Sp Session01-Lecture
16/38
html attributes
Link
vAlue
-
8/7/2019 Webdesign Sp Session01-Lecture
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
-
8/7/2019 Webdesign Sp Session01-Lecture
18/38
Link
Link
html class &id attributes
-
8/7/2019 Webdesign Sp Session01-Lecture
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
-
8/7/2019 Webdesign Sp Session01-Lecture
20/38
htMl In aCtIon
-
8/7/2019 Webdesign Sp Session01-Lecture
21/38
-
8/7/2019 Webdesign Sp Session01-Lecture
22/38
-
8/7/2019 Webdesign Sp Session01-Lecture
23/38
-
8/7/2019 Webdesign Sp Session01-Lecture
24/38
the eleMents
-
8/7/2019 Webdesign Sp Session01-Lecture
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
-
8/7/2019 Webdesign Sp Session01-Lecture
26/38
Primary Headline (page title, site name, etc.)
Secondary Headline (subtitle, article headline, etc.)
Tertiary Headline (article subtitle)
...
...
...
html elements: headlines
-
8/7/2019 Webdesign Sp Session01-Lecture
27/38
Paragraph of text
You can many of them
Theres no limit
html elements: paragraphs
-
8/7/2019 Webdesign Sp Session01-Lecture
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
-
8/7/2019 Webdesign Sp Session01-Lecture
29/38
Link
Link
Link
this is an example of an unoRDeReD list (ul)
html elements: lists
-
8/7/2019 Webdesign Sp Session01-Lecture
30/38
Link
Link
Link
this is an example of an oRDeReD list (ol)
html elements: lists
-
8/7/2019 Webdesign Sp Session01-Lecture
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)
html elements: lists
-
8/7/2019 Webdesign Sp Session01-Lecture
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)
html elements: lists
-
8/7/2019 Webdesign Sp Session01-Lecture
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
-
8/7/2019 Webdesign Sp Session01-Lecture
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
-
8/7/2019 Webdesign Sp Session01-Lecture
35/38
-
8/7/2019 Webdesign Sp Session01-Lecture
36/38
-
8/7/2019 Webdesign Sp Session01-Lecture
37/38
-
8/7/2019 Webdesign Sp Session01-Lecture
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/