Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Lecture_2 - Web Design
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 “<” 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
