lesson 2 adding more content to your web page. thanks to richard hudnutt, luella hs
TRANSCRIPT
Lesson 2
Adding more content to your web page.
Thanks to Richard Hudnutt, Luella HS
Add to your page.
• Open your Note Pad document from yesterday.
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.– <p> This is a sentence. This is a sentence. This is
a sentence. This is a sentence. </p>
Opening paragraph tag
Closing paragraph tag
Example of your page
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)
Replace some information
• Replace “My first Web page” with <h1>How to make a Web page</h1>This is a Heading, there are 6 sizes, h1-h6Which heading size is biggest???Set a heading size that you want.
Add some decoration
• We are now going to insert a horizontal rule, this is nothing more than a line across your screen.
• <hr/> - 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.
Let’s add some color
Web Design Lesson 4
Open your previous page
Add a style to your h1 tag
Put the style inside the h1 tag, so it will only affect that tag’s contents
Now you have a red heading
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
Here is what it looks like now
Black text on grey does not work well, so let’s change the text color to white
Add another style to <body>
Add a ; and another style
Now it looks like this
Now follow the link for styles
• http://www.w3schools.com/cssref/default.asp
• Try to style some other parts of your page.
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.
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.