Download Lecture_2 - Web Design

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

Document related concepts

URL shortening wikipedia , lookup

URL redirection wikipedia , lookup

Transcript
Web Design:
Basic to Advanced Techniques
Fall 2010
Monday 7-9pm
200 Sutardja-Dai Hall
Lecture Code: 390998
HTML Introduction
Web Design:
Basic to Advanced Techniques
Today’s Agenda
 Enrollment
 Account setup
 Quiz
 Lecture
 Lab
Web Design:
Basic to Advanced Techniques
The First Day - Quiz #1
http://decal.aw-industries.com
Web Design:
Basic to Advanced Techniques
What is HTML?
 HyperText Markup Language
 HyperText – text displayed on a computer with references
(hyperlinks) to other text that the reader can immediately
access, usually by a mouse click or keypress sequence
 Markup Language – a system for annotating text (just like
LaTeX and XML). Not a programming language!
 HTML files are really just text files (extension .html) that
are then rendered by the browser
 Standardized by the World Wide Web Consortium (W3C)
http://www.wc3.org
Web Design:
Basic to Advanced Techniques
What can HTML do for us?
Gives structure to ordinary text via tags
Without HTML (plain text)
About Us Who We Are French Bros., a family owned and
operated company, was established in San Francisco Bay in
1954 specializing in commercial and residential floors (i.e.,
carpet, vinyl, hardwood & laminate) as well as ready-made
window coverings. Founders Robert and Ray Levesque built
French Bros. on one principle: To provide their customers
with outstanding service, incredible savings, personal
attention and fantastic products to enhance your living
environment - a mission carried on today by the current
owners (Ray's children) Jim, Brad, and Susan. French Bros.
provides complete no-cost consultations on all projects. No
job is too big or too small for our dedicated sales staff who
are committed to providing the technical support and
innovative product knowledge that will empower you, our
customer, to make the best buying decisions for your home
or office. Call us today to see what French Bros. can do for
you! What We Do We do it all...from the ground up (Floor
Coverings)... to a little privacy (Window Coverings)... and
more... All at prices you can afford! Floor Coverings: Carpet,
vinyl, hardwood & laminate Window Coverings: Hunter
Douglas: Country Woods, Silhouette, Window Shadings,
Duette, Honeycomb Shades Home Furnishings: Complete,
no-cost consultations with our interior design specialists to
meet all your home furnishing needs
Web Design:
Basic to Advanced Techniques
With HTML
HTML and Web Pages
 So… HTML formats text, but what about web pages? They
have geometric shapes, images, and movies – nothing like
text at all!
Web Design:
Basic to Advanced Techniques
HTML Tags
 Separate portions of plain text in a document
 Does not show on a web page, but is interpreted by the
browser
 “<“ and “>” differentiate tags from rest of document.
 Bonus: what if you want “<“ or “>” to be part of the text?
 Use escape characters “&lt” and “&gt” respectively
<img>
Opening brace
Closing brace
Element type
Web Design:
Basic to Advanced Techniques
HTML Element
 HTML elements are generally composed of opening tags
and closing tags
 Some HTML elements can have attributes in the opening
tag
Opening tag
Contents
Closing tag
<span class=“caption”>Hello, world!</span>
Name
Value
Attribute
Web Design:
Basic to Advanced Techniques
Backslash
HTML Document Structure
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8”
/>
<title>Untitled Document</title>
</head>
<body></body>
</html>
Web Design:
Basic to Advanced Techniques
Doctype
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
 Tells the browser what type of document it is and by
which rules to follow when rendering the page
 XHTML 1.0 Strict
 XHTML 1.0 Transitional
 XHTML 1.0 Frameset
 Not an actual HTML element!
Web Design:
Basic to Advanced Techniques
html Element
 <html xmlns="http://www.w3.org/1999/xhtml">
 </html>
 xmlns is a required attribute and should be set to what
appears above
 Later versions of xhtml may allow custom namespaces
Web Design:
Basic to Advanced Techniques
Basic HTML Tags

HTML: <html></html>

Headings (1-6): <h1></h1>

Head: <head></head>

Break: <br>

Body: <body></body>

Anchor (typically known as a Hyperlink): <a
href=“…”></a>

Image: <img src=“…” />

Unordered List: <ul><li></li></ul>

Table: <table><tr><td></td></tr></table>

Paragraph: <p></p>

Span:<span></span>

Div:<div></div
Web Design:
Basic to Advanced Techniques
head Element
 <head></head>
 Place for meta data
 And <meta /> tags
 Description
 Keywords
 Title of page
 <title></title>
 Content Type




<meta http-equiv="Content-Type" content="text/html; charset=UTF-8” />
Text/html
Image/jpeg
Video/mpeg
Web Design:
Basic to Advanced Techniques
body Element
 <body></body>
 Where actual website content goes.
Web Design:
Basic to Advanced Techniques
<h1></h1> (Headings)
 Creates a text heading
 h1 through h6
 <h1>This is an h1 text</h1>
 <h4>This is an h4 text</h4>
Web Design:
Basic to Advanced Techniques
<br /> (Break)
 Creates a line break/return
 No attributes
 1 x Gives next line
 Here is some text<br>
Here is more text
 2 x Gives extra space
 Here is some text<br><br>
Here is more text with extra spacing
Web Design:
Basic to Advanced Techniques
URLs
URLs specify the location of files on the web.
Path
Prefix
http://www.berkeley.edu/img/sections/berkeley-text.gif
Protocol
(https, ftp)
Web Design:
Basic to Advanced Techniques
Domain
File
Absolute vs. Relative URLs
 We begin at URL: http://www.dog.com/tricks/jump.php
 Absolute URL
 http://www.dog.com/tricks/jumpingDog.jpg
 Root Relative URL
 /tricks/jumpingDog.jpg
 Relative URL
 jumpingDog.jpg
Web Design:
Basic to Advanced Techniques
<a></a> (Anchor)
 Creates a hyperlink to a new page or renders image link
 <a href=“URL” title=“TOOLTIP”>TEXT</a>
 ToolTip – a message snippet that pops up when the mouse
is hovered over an object
 <a href=“http://google.com” title=“click to redirect to
Google”>A Link to Google</a>
Web Design:
Basic to Advanced Techniques
<img /> (Image)
 <img src=“URL” alt=“DESCRIPTION” />
 alt – displays alternative text if URL is bad. Also serves as tooltip if
title attribute is not specified
 <img src=“http://www.google.com/intl/en_ALL/images/logo.gif”
alt=“Google logo” />
 <img src=“bad URL” alt=“Google logo” />
Web Design:
Basic to Advanced Techniques
Block vs. Inline
 Block elements are rendered on their own line
 Inline elements are rendered next to adjacent inline
elements
p
Block
span
span
Inline
Web Design:
Basic to Advanced Techniques
<p></p><span></span><span></span>
Inline
<p></p> (Paragraph)
 Implicitly has new lines at the beginning and end of the
element because it is a block-level element (more on that
later)
 <span>Why are you so far away?</span>
<p>I'm in a paragraph, so I have a sort of invisible forcefield </p>
<span>Keep your distance!</span>
Web Design:
Basic to Advanced Techniques
<span></span> Span
 <span>TEXT</span>
 Inline element (
 <span>I am in a span</span>
< div ></div> Div
 < div >TEXT</ div >
 Block-level element
 <span>Extra spacing here</span><div>I am in a
div</div><span>Extra spacing here</span>
<ul></ul> (Unordered List)
 Creates a bulleted, top-to-bottom list
 <ul></ul> unordered list element
 <li></li> list items
 Nested structure
<ul>
<li>first item</li>
<li>second item</li>
</ul>
Web Design:
Basic to Advanced Techniques
Nesting HTML Tags
<ul>
 <li>
 </li>
</ul>
 Must be closed in reverse order of opening
 Blocks can contain inline, but inline CAN’T contain block
 Nesting allows you to create rich content
Web Design:
Basic to Advanced Techniques
<table></table> (Table)
 <table></table> table tags
 <th></th> head tags
<table>
<tr>
<td></td>
 <tr></tr> row tags
<td></td>
 <td></td> column tags
 Every row must have the same
number of columns!
<td></td>
</tr>
<tr>
 <td colspan=“#”> Colspan
<td></td>
attribute
<td></td>
 <table cellspacing=“#”>
Cellspacing is space between cells
 <table cellpadding=“#”>
Cellpadding is space between cell
contents and cell wall
Web Design:
Basic to Advanced Techniques
3 x 2 Table
<td></td>
</tr>
</table>
colspan
<TABLE BORDER=1 CELLPADDING=4>
<TR>
<TH COLSPAN=2>Candies</TH>
</TR>
<TR>
<TD>Raha Mutisya</TD>
<TD>3</TD>
</TR>
</TABLE>
FTP Accounts
 Server: ftp.aw-industries.com
 Login: cs198_xx
 Password: webdecal
 Create a folder for your individual account inside “public”
folder
 For example: /public/cs198_aa/index.html
 Viewable: http://users.decal.awindustries.com/cs198_xx/cs198_aa/index.html