Lecture_2 - Web Design
Download
Report
Transcript Lecture_2 - Web Design
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 “<” and “>” 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