web design:
DESCRIPTION
Web Design:. Fall 2010 Monday 7-9pm 200 Sutardja-Dai Hall Lecture Code: 390998. Basic to Advanced Techniques. HTML Introduction. Web Design: Basic to Advanced Techniques. Today’s Agenda. Enrollment Account setup Quiz Lecture Lab. Web Design: Basic to Advanced Techniques. - PowerPoint PPT PresentationTRANSCRIPT
Web Design:Basic to Advanced Techniques
Fall 2010Monday 7-9pm
200 Sutardja-Dai HallLecture Code: 390998
HTML Introduction
Today’s AgendaEnrollment
Account setup
Quiz
Lecture
Lab
The First Day - Quiz #1http://decal.aw-industries.com
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
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
With HTML
HTML and Web PagesSo… HTML formats text, but what about web pages? They
have geometric shapes, images, and movies – nothing like text at all!
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>
HTML Tags
Opening braceElement type
Closing brace
HTML ElementHTML elements are generally composed of opening tags
and closing tags
Some HTML elements can have attributes in the opening tag
<span class=“caption”>Hello, world!</span>Opening tag Closing tagContents
Name Value
Attribute 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>
Doctype<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Tells the browser what type of document it is and by which rules to follow when rendering the pageXHTML 1.0 StrictXHTML 1.0 TransitionalXHTML 1.0 Frameset
Not an actual HTML element!
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
Basic HTML Tags HTML: <html></html>
Head: <head></head>
Body: <body></body>
Headings (1-6): <h1></h1>
Break: <br>
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
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
body Element<body></body>
Where actual website content goes.
<h1></h1> (Headings)Creates a text heading
h1 through h6
<h1>This is an h1 text</h1>
<h4>This is an h4 text</h4>
<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
URLsURLs specify the location of files on the web.
http://www.berkeley.edu/img/sections/berkeley-text.gif
Protocol(https, ftp)
Prefix Path
Domain File
Absolute vs. Relative URLsWe begin at URL: http://www.dog.com/tricks/jump.php
Absolute URLhttp://www.dog.com/tricks/jumpingDog.jpg
Root Relative URL/tricks/jumpingDog.jpg
Relative URL jumpingDog.jpg
<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>
<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” />
<img /> (Image)
Block vs. InlineBlock elements are rendered on their own line
Inline elements are rendered next to adjacent inline elements
Block
Inline Inline
<p></p><span></span><span></span>
p
span span
<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>
<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>
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
<table></table> (Table) <table></table> table tags
<th></th> head tags
<tr></tr> row tags
<td></td> column tags
Every row must have the same number of columns!
<td colspan=“#”> Colspan attribute
<table cellspacing=“#”> Cellspacing is space between cells
<table cellpadding=“#”> Cellpadding is space between cell contents and cell wall
<table> 3 x 2 Table
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<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 AccountsServer: 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.aw-industries.com/cs198_xx/cs198_aa/index.html