HTML and CSS Reference
In-Depth Information
In the Lab continued
4. Add an unordered list with the two list items, as shown in Figure 3-53. These two items will be
used to link to the two sections of text below them. ( Hint: Note that the bullets are square.)
5. Add one h1 heading, one h2 heading, and two h3 headings.
6. Add an inline style sheet changing the first three words of the first paragraph to be color #19212d
and font-weight of bold. ( Hint: Use the <span></span> container.)
7. Add the two images provided (creek.jpg and valley.jpg).
8. Create a link target at the top of the page named top.
9. Add two To top links, one after each section, as shown in Figure 3-53. Set the link to direct to the
top target at the top of the page.
10. Create links from the bulleted list to the two targets. ( Hint: Remember to insert a unique id for
both targets.)
11. Create an e-mail link, as shown in Figure 3-53.
12. Save the HTML file in the Chapter03\IntheLab folder using the file name lab3-2solution.html.
13. Validate the lab3-2solution.html file.
14. Print the lab3-2solution.html file.
15. View the Web page in your browser.
16. Print the Web page.
17. Submit the HTML file and Web page in the format specified by your instructor.
In the Lab
Lab 3: Creating Two Linked Web Pages
Problem: Your Communications instructor has asked each student in the class to create a two-page
Web site to help students in the class get to know more about the subject area in which you are
majoring in school. She suggested using the basic template shown in Figures 3-54a and 3-54b as a
starting point. The first Web page (Figure 3-54a) is a home page that includes basic information about
your major. Really try to answer the questions listed (for example, why you chose this major), as shown
on the Web page. If you can, add an image related to your chosen field somewhere on the Web page.
Add a link to the second Web page. The second Web page (Figure 3-54b) includes a paragraph of text
and numbered lists with links.
Instructions: Perform the following steps:
1. Start Notepad++ and create a new HTML file with the title Lab 3-3 in the head section.
2. In the first Web page, include a Heading style 1 heading, similar to the one shown in Figure 3-54a,
and a short paragraph of text. Experiment and use any color for the heading (navy is shown).
( Hint: Review the text-align: center property and value in Appendix D and online.)
3. Create a text link to the second Web page, lab3-3specifics.html.
4. Save the HTML file in the Chapter03\IntheLab folder using the file name lab3-3solution.html.
Validate the lab3-3solution.html file. Print the lab3-3solution.html file.
5. Start a new HTML file with the title Lab 3-3 Specifics in the head section.
Search WWH ::

Custom Search