27 Sep For this lab, you’ll need a computer running macOS or Windows. ?Your computer should be connected to the Internet. ?The instructions are generalized; they provide helpful guidelines bu

Lab: Design Your Home Page

HTML CAN BE FUN. Really! The basics of HTML and CSS are easy, and this lab will give you an opportunity to design a customized home page.

REQUIREMENTS:

For this lab, you’ll need a computer running macOS or Windows. Your computer should be connected to the Internet. The instructions are generalized; they provide helpful guidelines but not specific steps. You may have to explore a bit to find all the tools needed to complete the assignment, but that is all part of the learning experience.

ASSIGNMENT:

1

Connect to an online HTML editor, from a site such as  www.jsfiddle.net or  www.rendera.org .

You might be happiest with an HTML editor that allows you to save your work, so look for a Save button before you begin. When this book was published, jsFiddle and Rendera both offered great tools for HTML and CSS.

2

Enter the outline for a basic HTML document using the template in Figure 4-30.

3

Modify the template to add your name as an h1 heading at the beginning of the Body section of the document.

The HTML code will look something like this:

<p><h1> Sarah Smith </h1></p>

4

Make sure the editor is able to show you what your Web page will look like when displayed in a browser.

If you are using jsFiddle, click the Run button and look for your results on the right side of the screen. If you are using Rendera, click the gray “Click me” bar near the top of the screen.

5

Next, locate a photo that you like on the Wikimedia site and copy its URL.

To copy the URL, right-click the photo and select Copy Image URL.

6

Return to the HTML editor and enter the tags to insert the image. Make sure you include the quotation marks. The HTML should look something like this:

<img src=“http://name_of_photo.jpeg” style=“left:5 6px;top:236px;height:232px;width:174px;position: absolute; > </img>

You can play around with the numbers for left, top, height, and width until the image is positioned where you want it to be.

Add two more images positioned artistically on the page.

7

Add a hypertext link under the photos that leads to your favorite Wikipedia page. Your link should look something like this:

<p> <a href=" https://en.wikipedia.org/wiki/Astronomy"> I love Astronomy! </a> </p>

8

Next, turn to the CSS tab or work area and enter the code to center the h1 style for your name and display it in the color of your choice. Here is a sample:

body

{ font-family: arial; }

h1 { color: purple; text-align: center; }

9

Finally, select colors for the link and add the code to the CSS, like this:

a:link { color: green; }

a:visited { color: blue; }

10

Save your work in a format that you can submit to your instructor. Depending on the HTML editor you used, you may:

1. Take a screenshot using the PrtSc key (Windows) or Command-Shift-4 (Mac).

1. Save a file locally and email it to your instructor.

1. Save the URL and submit it to your instructor.

1. Copy the text of your HTML and CSS, then paste it into a text editor, such as Notepad or TextEdit. Submit that document to your instructor.