Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.
-
Upload
madeleine-jacobs -
Category
Documents
-
view
216 -
download
1
Transcript of Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.
![Page 1: Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7e5503460f94b810ee/html5/thumbnails/1.jpg)
Lesson 2
Adding more content to your web page.
Thanks to Richard Hudnutt, Luella HS
![Page 2: Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7e5503460f94b810ee/html5/thumbnails/2.jpg)
Add to your page.
• Open your Note Pad document from yesterday.
![Page 3: Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7e5503460f94b810ee/html5/thumbnails/3.jpg)
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
![Page 4: Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7e5503460f94b810ee/html5/thumbnails/4.jpg)
Example of your page
![Page 5: Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7e5503460f94b810ee/html5/thumbnails/5.jpg)
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)
![Page 6: Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7e5503460f94b810ee/html5/thumbnails/6.jpg)
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.
![Page 7: Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7e5503460f94b810ee/html5/thumbnails/7.jpg)
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.
![Page 8: Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7e5503460f94b810ee/html5/thumbnails/8.jpg)
Let’s add some color
Web Design Lesson 4
![Page 9: Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7e5503460f94b810ee/html5/thumbnails/9.jpg)
Open your previous page
![Page 10: Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7e5503460f94b810ee/html5/thumbnails/10.jpg)
Add a style to your h1 tag
Put the style inside the h1 tag, so it will only affect that tag’s contents
![Page 11: Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7e5503460f94b810ee/html5/thumbnails/11.jpg)
Now you have a red heading
![Page 12: Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7e5503460f94b810ee/html5/thumbnails/12.jpg)
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
![Page 13: Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7e5503460f94b810ee/html5/thumbnails/13.jpg)
Here is what it looks like now
Black text on grey does not work well, so let’s change the text color to white
![Page 14: Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7e5503460f94b810ee/html5/thumbnails/14.jpg)
Add another style to <body>
Add a ; and another style
![Page 15: Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7e5503460f94b810ee/html5/thumbnails/15.jpg)
Now it looks like this
![Page 16: Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7e5503460f94b810ee/html5/thumbnails/16.jpg)
Now follow the link for styles
• http://www.w3schools.com/cssref/default.asp
• Try to style some other parts of your page.
![Page 17: Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7e5503460f94b810ee/html5/thumbnails/17.jpg)
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.
![Page 18: Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.](https://reader036.fdocuments.us/reader036/viewer/2022062518/56649e7e5503460f94b810ee/html5/thumbnails/18.jpg)
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.