lesson 2 adding more content to your web page. thanks to richard hudnutt, luella hs
Post on 12-Jan-2016
222 Views
Preview:
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.
top related