Transforming Your HTML Page with Style

In this task, you will take a plain HTML page and enhance it with inline styles, headings, and images.

Activity 1: Build the Page (Parsons Problem)

Drag the HTML lines into the correct order, then click Preview to see the completed webpage.

Parsons HTML Lines

Activity 1 Result

Activity 2: Transform and Style the HTML

Edit the starter HTML and use the preview to test each formatting step.

index.html

Result

Instructions

Step 1: Add page background
Edit your <body> tag to:

<body style="background:lightblue;">

Step 2: Style the main heading
Edit your <h1> tag to:

<h1 style="color:red;text-align:center;border:4px solid grey">Developing for the Web</h1>

Step 3: Replace the paragraph with a subheading
Replace the first paragraph under the <h1> with:

<h2 style="font-family:Arial;font-weight:bold;">This website will provide you with information on the following:</h2>

Step 4: Style the list and add images
Change your list block to this pattern (update image file names if needed):

<ul style="font-family:Arial;font-size:18px;color:darkblue;">
  <li>Using <u>HTML</u> to produce the pages of your website</li>
  <img src="code.jpg" width="15%">
  <li>Implementing CSS to format your web pages</li>
  <img src="css.png" width="15%">
  <li>How search engines work</li>
  <img src="search engine.png" width="15%">
  <li>Improving search results</li>
  <img src="search_results.jpg" width="15%">
</ul>

Step 5: Format the final paragraph
Edit the final paragraph to:

<p style="font-family:Arial;font-size:16px;">
  <strong>Hypertext Markup Language (HTML)</strong> and
  <strong>Cascading Style Sheets (CSS)</strong> are used to create and format pages of a website.
</p>