Now that you’ve learned how to make a basic web page using HTML and CSS, you’re going to get creative with your skills! For this activity, you will be making a web page with a tutorial explaining a favorite hobby, game, or process.
For an example, check out this tutorial of how to play a tambourine!
Your tutorial must include the following elements:
An informative title
A brief overall description of the hobby, skill, or process
At least two different headings
An ordered list to show the steps required, with a nested unordered list for at least one step (Remember what nested means? Think “a list within a list”)
A picture for each ordered list that demonstrates the corresponding part of the process
At least four CSS rules for the various elements on your web page
A caption under each picture that includes the source of the image
can you tell me the html coding part to
Sure! Here's an example of the HTML coding part for a web page tutorial explaining a favorite hobby:
```html
<!DOCTYPE html>
<html>
<head>
<title>How to Play Guitar</title>
<style>
body {
background-color: #f1f1f1;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
h2 {
color: #666;
}
ol {
margin-left: 20px;
}
li {
margin-bottom: 10px;
}
img {
max-width: 100%;
height: auto;
}
.caption {
font-style: italic;
font-size: 14px;
color: #888;
}
</style>
</head>
<body>
<h1>How to Play Guitar</h1>
<p>Guitar playing is a popular hobby that allows you to create beautiful music. In this tutorial, you will learn how to play basic chords and strumming patterns.</p>
<h2>Materials Required</h2>
<p>Before you start learning, make sure you have the following items:</p>
<ul>
<li>A guitar - acoustic or electric</li>
<li>A guitar pick</li>
<li>A guitar tuner</li>
</ul>
<h2>Steps to Play Guitar</h2>
<ol>
<li>Tune your guitar using a guitar tuner.
<ul>
<li>Pluck the first string and adjust the tuning peg until the tuner displays the correct note.</li>
<li>Repeat this process for the remaining strings.</li>
</ul>
<img src="tuning.jpg" alt="Guitar tuning" />
<p class="caption">Image source: www.example.com</p>
</li>
<li>Learn basic chords.
<img src="chords.jpg" alt="Basic guitar chords" />
<p class="caption">Image source: www.example.com</p>
</li>
<li>Practice strumming patterns.
<img src="strumming.jpg" alt="Guitar strumming" />
<p class="caption">Image source: www.example.com</p>
</li>
</ol>
</body>
</html>
```
In this example, I've included the necessary HTML tags to create headings, paragraphs, ordered and unordered lists, images, and captions. I also added a `<style>` section in the `<head>` to define some CSS rules for the elements on the page. Please note that you may need to replace the image source URLs with actual image URLs.