Presentation is loading. Please wait.

Presentation is loading. Please wait.

- Relative and Absolute URLs -HTML and CSS Validation -Caches -3 ways of adding style -Firebug CS110: Computer Science and the Internet.

Similar presentations


Presentation on theme: "- Relative and Absolute URLs -HTML and CSS Validation -Caches -3 ways of adding style -Firebug CS110: Computer Science and the Internet."— Presentation transcript:

1 - Relative and Absolute URLs -HTML and CSS Validation -Caches -3 ways of adding style -Firebug CS110: Computer Science and the Internet

2 But before anything else… Project partners: use the “questions” google group. HW1 Office hours right after class Tutor drop-in hours – Jane Yang 7:00-9:00 – Crysti Wang 9:00-11:00

3 Let’s validate some HTML 3/testpage2.html 3/testpage2.html

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

5 Tree Structured Directory 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 Using Relative URLs

6 Fragments Examples: navigation menu, your instructorsnavigation menu your instructors Create in two steps: (1) Give the destination a name Relative URLs (2) Add destination name to the link in the same file: Relative URLs from a different file: Relative URLs

7 Styling with CSS final snazzy page initial simple page

8 Three ways to add style… Intro CS courses h2 { color: blue; background-color: white; } Choosing an Introductory CS Course /* 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… Stylish Page Adding style with CSS Let’s see the winning styles /* my-style.css style sheet */ the envelope please... (1) external style sheet: style to have yellow text on green background (1) document-level style sheet: style to have pink text on blue background and header to be green (1) use inline style to display the header in maroon

10 Firebug Use firebug for this example.

11 Cache Shift+Reload

12 Questions you asked Q: Also, why, when writing something like super 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 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'); }

14 Scott’s wonderful list to all your questions css/css.html#section_14 css/css.html#section_14

15 Fonts with CSS serif familysans-serif family 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; } default is normal 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 A Why use keywords and relative sizes?

16 Designing CSS rules (imagine lots more weeks on the webpage…) What tags need to be styled? Can we put all the CSS style rules in an external style sheet? h1 h2... First, let’s sketch out the elements:

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

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


Download ppt "- Relative and Absolute URLs -HTML and CSS Validation -Caches -3 ways of adding style -Firebug CS110: Computer Science and the Internet."

Similar presentations


Ads by Google