1 / 20

CPSP 229D: Web design

ALBERT WAVERING BOBBY SENG. CPSP 229D: Web design. Week 2: HTML + CSS. Quiz Announcements/questions/etc Some functional HTML elements. HTML User Input Elements. Checkboxes <input type="checkbox" name="flavor" value="Cherry" /> Radio buttons

feleti
Download Presentation

CPSP 229D: 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. ALBERT WAVERING BOBBY SENG CPSP 229D: Web design

  2. Week 2: HTML + CSS • Quiz • Announcements/questions/etc • Some functional HTML elements

  3. HTML User Input Elements • Checkboxes • <input type="checkbox" name="flavor" value="Cherry" /> • Radio buttons • <input type="radio" name="sex" value="male" /> • <input type="radio" name="sex" value="female" /> • Text fields • <input type="text" name="firstname" /> • Buttons • <button type="button">Go</button> • Can be grouped into a ‘form’

  4. HTML User Input: Forms <form> First name: <input type="text" name="firstname" /> <br /> Last name: <input type="text" name="lastname" /> <br/> Password: <input type="password" name="pwd" /> <br/> <input type="radio" name="sex" value="male" /> Male<br /> <input type="radio" name="sex" value="female" /> Female<br/> <input type="checkbox" name="vehicle" value="Bike" /> Bike<br /> <input type="checkbox" name="vehicle" value="Car" /> Car <br/> <button type=“button”>Submit</button> </form>

  5. More HTML stuff • Headings • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> • Used by search engines, etc to index page (use properly) • Horizontal rule (line) • <hr/> • <!-- This is a comment -->

  6. More HTML stuff • Anchors • <a> • Already saw use as links • Anchor certain places on a page: <a name="contents">Contents</a> …. <a href="#content">Go to Contents</a>

  7. HTML Tables • <table> table tag <tr> table row <td> table cell </td> … </tr> … </table>

  8. HTML Colors • Hexadecimal notation • #red green blue • Each color is expressed as a combination of its red, green, and blue components • Each component has a value from 0-255 (o to FF in hexadecimal) • Black = #000000, White = #FFFFFF • Pure red = #FF0000, Pure green = #00FF00, Pure blue = #0000FF

  9. HTML Colors • RGB notation • rgb(red,green,blue) • Integer values of components • 0-255 • Red = rgb(255,0,0), Blue = rgb(0,255,0) • Text notation • Blue, red, green, etc

  10. Introduction to CSS • Cascading Style Sheets • CSS provides a way to apply formatting to certain HTML elements • Class- or element-based • A CSS file can be included on any HTML page • CSS lets you make changes to an entire site by editing just one file

  11. Linking CSS to HTML • I have a file named style.css • To use this style sheet in my webpage: <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> • That’s it! Your CSS will be applied to the elements in your page

  12. Writing CSS • Plaintext • CSS applies properties to elements • Color • Alignment • Font styling (bold, underline, strikethrough) • Font family (Arial, etc) • Image size and location • Many other attributes!

  13. CSS Usage • Selector • Declarations p{ color: red; text-align: center; }

  14. CSS Usage [element] and/or [.class] or [#id]{ property: value; } (without the [ or ] characters)

  15. CSS Usage • Selector nesting #navigation a{ style… }

  16. Backgrounds and CSS • Common CSS background properties: • background-color:#012345 • background-image:url('flowers.jpg') • Many different properties; check resources online to learn specifics body{ background-color:#002000 }

  17. Formatting Text with CSS • Commonly used properties: • color: (red, #0000FF, rgb(1,2,3) • text-decoration: (none, overline, underline) • text-align: (center, right, justify) • Fonts • Generic family: similar-looking fonts (Serif, Sans-serif, Monospace) • Font family: (Verdana, Times New Roman, etc) • font-family: “Times New Roman” • font-style: (normal, italic, oblique)

  18. Formatting Text with CSS • Font size • font-size: (12px, 20px, 36px) • NOT INTERNET EXPLORER (yay standards) • For Internet Explorer: • ‘em’ unit equal to default text size • font-size:2em would be equal to double the normal text size

  19. Formatting Links with CSS • Properties • link unvisisted link • visisted visited link • hover mouse over link • active selected link • Can use text decoration, colors to assign values to these properties

  20. Assignment • Edit your previous week’s homework! • Include at least three new elements discussed today • Write a separate style sheet file and include it in your HTML file to style your page • Use at least three CSS selectors to style your page • Email by midnight next Wednesday to sduwebship@gmail.com

More Related