Webdesign SP Session01-Lecture

The basics
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.
Best Practices
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
Web Design , GR APH -327 1- 01
Instructor: Erika Tarte
Rhode Island School of Design
Wintersession 2011
HTML
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

Syntax
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 IN ACTION
The Elements
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>
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

Webdesign SP Session01-Lecture

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Webdesign SP Session01-Lecture

Caricato da

Copyright:

Formati disponibili

The basics

the www vs. the internet

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

Don’t develop on your desktop!

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

HTML = HyperText Markup 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

Written inside angle brackets (<>)

Consists of an opening tag and closing tag

Tells browser which elements are contained on a page

All html tags have attributes

An attribute is a quality or characteristic of the element

Elements can have multiple attributes

No inherent styles or properties

Different elements can share the same class

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

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

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

CSS = Cascading Style Sheet

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

But, concerning code, it all begins with HTML

You don’t need to memorize them all

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

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

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

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

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

<p>You should always nest links within grouping element, like a

Here’s an important lesson in semantic code

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

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

<p>Sometimes its difficult to distinguish between style and

<p>To use bold and italicized text to communicate meaning and

W 3 School s HTML 5 elements reference

Periodic Tab le of HTML5 Elements

Potrebbero piacerti anche