1 / 29

Web Design:

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.

tasha-bullock
Download Presentation

Web Design:

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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

  2. Today’s Agenda • Enrollment • Account setup • Quiz • Lecture • Lab Web Design:Basic to Advanced Techniques

  3. The First Day - Quiz #1 http://decal.aw-industries.com Web Design:Basic to Advanced Techniques

  4. 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 is HTML? Web Design:Basic to Advanced Techniques

  5. Without HTML (plain text) With HTML 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 What can HTML do for us? • Gives structure to ordinarytext viatags Web Design:Basic to Advanced Techniques

  6. 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

  7. 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> HTML Tags Opening brace Closing brace Element type Web Design:Basic to Advanced Techniques

  8. HTML Element • HTML 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 Contents Closing tag Name Value Attribute Backslash Web Design:Basic to Advanced Techniques

  9. HTML Document Structure Web Design:Basic to Advanced Techniques <!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>

  10. Doctype Web Design:Basic to Advanced Techniques • <!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 page • XHTML 1.0 Strict • XHTML 1.0 Transitional • XHTML 1.0 Frameset • Not an actual HTML element!

  11. html Element Web Design:Basic to Advanced Techniques <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

  12. 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 Basic HTML Tags • HTML: <html></html> • Head: <head></head> • Body: <body></body> Web Design:Basic to Advanced Techniques

  13. head Element Web Design:Basic to Advanced Techniques • <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

  14. body Element Web Design:Basic to Advanced Techniques <body></body> Where actual website content goes.

  15. Creates a text heading h1 through h6 <h1>This is an h1 text</h1> <h4>This is an h4 text</h4> <h1></h1> (Headings) Web Design:Basic to Advanced Techniques

  16. 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 <br /> (Break) Web Design:Basic to Advanced Techniques

  17. URLs URLs specify the location of files on the web. Path Prefix http://www.berkeley.edu/img/sections/berkeley-text.gif Protocol (https, ftp) Domain File Web Design:Basic to Advanced Techniques

  18. Absolute vs. Relative URLs Web Design:Basic to Advanced Techniques • 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

  19. 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> <a></a> (Anchor) Web Design:Basic to Advanced Techniques

  20. <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) Web Design:Basic to Advanced Techniques

  21. Block vs. Inline Block p <p></p><span></span><span></span> Inline span Inline span Web Design:Basic to Advanced Techniques Block elements are rendered on their own line Inline elements are rendered next to adjacent inline elements

  22. <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

  23. <span></span> Span <span>TEXT</span> Inline element ( <span>I am in a span</span>

  24. < 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>

  25. Creates a bulleted, top-to-bottom list <ul></ul> unordered list element <li></li> list items Nested structure <ul></ul> (Unordered List) <ul> <li>first item</li> <li>second item</li> </ul> Web Design:Basic to Advanced Techniques

  26. 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

  27. <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> Web Design:Basic to Advanced Techniques

  28. colspan <TABLE BORDER=1 CELLPADDING=4> <TR> <TH COLSPAN=2>Candies</TH> </TR> <TR> <TD>Raha Mutisya</TD> <TD>3</TD> </TR> </TABLE>

  29. 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.aw-industries.com/cs198_xx/cs198_aa/index.html

More Related