1. Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS

2. Add to your page. Open your Note Pad document from yesterday.

3. Add tags to your page Let’s add a paragraph of text to your page. Text is not formatted in a web page, so we will put it in order with some paragraph tags. – This is a sentence. This is a sentence. This is a sentence. This is a sentence. Opening paragraph tag Closing paragraph tag

4. Example of your page

5. Now make two real paragraphs Replace the “This is a sentence” sentences with real sentences. In this paragraph, describe in your own words, how you made this page up to this point. Make a new paragraph (don’t forget your p tags) In this paragraph, describe how you felt after making this page. (3-5 complete sentences)

6. Replace some information Replace “My first Web page” with How to make a Web page This is a Heading, there are 6 sizes, h1-h6 Which heading size is biggest??? Set a heading size that you want.

7. Add some decoration We are now going to insert a horizontal rule, this is nothing more than a line across your screen. - this is a one sided tag and has the / at the end of the tag instead of having an opening and closing tag. Insert a horizontal rule after your heading, after your first paragraph, and after your second paragraph.

8. Let’s add some color Web Design Lesson 4

9. Open your previous page

10. Add a style to your h1 tag Put the style inside the h1 tag, so it will only affect that tag’s contents

11. Now you have a red heading

12. Now let’s add color to our body Adding the style to the body tag, affects everything on the page. Again, keep it within the signs

13. Here is what it looks like now Black text on grey does not work well, so let’s change the text color to white

14. Add another style to Add a ; and another style

15. Now it looks like this

16. Now follow the link for styles http://www.w3schools.com/cssref/default.asp Try to style some other parts of your page.

17. A few words about styles Html tags are for CONTENT Styles are for how things are going to appear. – color, positioning, and decorations are now done with styles – mainly using CSS (Cascading Style Sheets) There are 3 types of CSS – – Inline (what we have used) – Embedded (at the top of the page in the head section) – External, on another document entirely.

18. A word about styles The newer web design rules (from the World Wide Web Consortium – W3C) dictate that styles should be used instead of deprecated (tags no longer used) tags. You will see some pages with font, center, and other types of deprecated tags. They do work, but it is not correct, it is not good web design practice.