1 / 18

- Relative and Absolute URLs - HTML and CSS Validation -Caches -3 ways of adding style -Firebug

CS110: Computer Science and the Internet. - Relative and Absolute URLs - HTML and CSS Validation -Caches -3 ways of adding style -Firebug. But before anything else…. Project partners: use the “questions” google group. HW1 Office hours right after class Tutor drop-in hours

kaia
Download Presentation

- Relative and Absolute URLs - HTML and CSS Validation -Caches -3 ways of adding style -Firebug

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. CS110: Computer Science and the Internet -Relative and Absolute URLs-HTML and CSS Validation-Caches-3 ways of adding style-Firebug

  2. But before anything else… • Project partners: use the “questions” googlegroup. • HW1 • Office hours right after class • Tutor drop-in hours • JaneYang 7:00-9:00 • CrystiWang 9:00-11:00

  3. Let’s validate some HTML • http://cs.wellesley.edu/~cs110/darakhshan/L03/testpage2.html

  4. Tree Structured Directory Subfolders and files inside the Joss folder, using “list” view on a Mac

  5. Tree Structured Directory Using Relative URLs • File in same folder: link in buffy.html to willow.html • File in sibling folder: link in mythology.html to angel.html • File in a folder “above”: link in host.html to season3.html • File in folder multiple levels up: link in buffy.html to comics.html • Add link in comics.html to gunn.html • Add link in host.html to buffy.html

  6. Fragments • Examples: navigation menu, e-mail your instructors • Create in two steps: (1) Give the destination a name <h2 id=“relative”>Relative URLs</h2> (2) Add destination name to the link in the same file: <a href=“#relative”>Relative URLs</a> from a different file: <a href=“http://cs.wellesley.edu/~cs110/lectures/L03-html/URLs.html#relative”> Relative URLs</a>

  7. Styling with CSS final snazzy page initial simple page

  8. Three ways to add style… <!doctype html> <head> <title>Intro CS courses</title> <meta charset="utf-8"> <!-- link to an external style sheet --> <link rel="stylesheet" href=“my-style.css"> <!-- document-level (internal) style sheet --> <style> h2 { color: blue; background-color: white; } </style> </head> <body> <!-- inline style to change this h1 header to blue --> <h1 style="color: blue; background-color: white"> Choosing an Introductory CS Course</h1> /* my-style.css style sheet */ strong { color: red; background-color: white; } h1, h2 { color: blue; background-color: white; } let's view the full webpage Which approach is best?

  9. Dueling Styles Exercise… /* my-style.css style sheet */ <head> <title>Stylish Page</title> <!-- link to an external style sheet --> <link rel="stylesheet" href=“my-style.css"> </head> <body> <h1>Adding style with CSS</h1> <p>Let’s see the winning styles</p> </body> external style sheet: style <p> to have yellow text on green background document-level style sheet: style <p> to have pink text on blue background and <h1> header to be green use inline style to display the <h1> header in maroon the envelope please...

  10. Firebug • Use firebug for this example.

  11. Cache • Shift+Reload

  12. Questions you asked Q: Also, why, when writing something like <span style="color:teal;background:white">super</span> must we specify that the background be white when it is in the first place? Q: Need more practice! Q: Id and class? Q: How to specify more than one font-family? Q: Does “_blank” in the target attribute of <a> open a new tab or new window?

  13. Questions you asked • Can we put a background image as the “background” in a CSS rule? body { background-image:url('gradient2.png'); } http://www.w3schools.com/css/css_background.asp

  14. Scott’s wonderful list to all your questions • http://cs.wellesley.edu/~cs110/scott/L03-css/css.html#section_14

  15. Fonts with CSS serif family sans-serif family A Times New Roman Georgia Verdana Arial body { font-family: Verdana, Arial, sans-serif; font-size: medium; font-weight: bold; font-style: italic; } em { font-family: Impact; } Specifying font size: font-size: 20px; font-size: 150%; font-size: 1.5em; Keywords: xx-small,x-small,small,medium, large,x-large,xx-large, smaller, larger default is normal Why use keywords and relative sizes?

  16. Designing CSS rules First, let’s sketch out the elements: h1 h2 . . . What tags need to be styled? Can we put all the CSS style rules in an external style sheet? (imagine lots more weeks on the webpage…) http://cs.wellesley.edu/~cs110/ellen/L3_CSS/americanLit.html

  17. Classes We can define a new class of <li> elements with red text: li.optional { color: red; background-color: white; } and use the classattribute to indicate that an <li> element belongs to this class: <li class=“optional”>Walt Whitman, <em>Song of Myself</em>

  18. Inheritance So do we also need to define new classes of the <em> element that are blue and red? No, because the nested <em> elements inherit the properties of their “parent” element body h1 h3 ul ul h3 h2 em em li li li li li li em em em em em em

More Related