⏱️ Do It Now - HTML
Create a OneNote Page and copy this into the title:
Lesson 2 - Summer 1 - Images and Additional Tags
(1) Copy the text (in the expanding section below) into the HTML editor at the bottom
Text for you to use (all about potatoes)
History of the Potato
Arrival in Europe
Potatoes were brought to Europe in the 16th century by Spanish explorers.
At first, Europeans were suspicious of them (they’re part of the nightshade family),
but by the 18th century they had become a staple food,
especially in places like Ireland and United Kingdom.
(2) Use HTML tags so that it contains:
- Headings <h1>...</h1>
- Sub-headings <h2>...</h2>
- Paragraphs <p>...</p>
(3) So it looks like this
History of the Potato
Arrival in Europe
Potatoes were brought to Europe in the 16th century by Spanish explorers. At first, Europeans were suspicious of them (they’re part of the nightshade family), but by the 18th century they had become a staple food, especially in places like Ireland and United Kingdom.
(4) Screenshot your code and the output (beside it), then paste it into the OneNote page
🎯 Learning Objectives
- LO1: Be able to store image media in a website directory
- LO2: Be able to use the image tag to display an image on a webpage
- LO3: Be able to use the image tag to display an image on a webpage
🎥 Adding images to a website directory
(1) Open up your project My Website:
(2) Work with This video to learn how images are added to a website directory
➡️ Next Slide ➡️
🎥 Adding images to a webpage
⌨️ Additional HTML Tags
You should now know how to create the following HTML tags.
- Different Levels of Heading
- Paragraph Text
- Images
(1) Continue Editing Your Page
You must now continue to edit your webpage so it contains a combination of text and images
(2) Additional HTML Tags
Also you may wish to make use of these HTML tags
- <hr> This tag creates a horizontal rule (line between parts of the page)
- <br> This tag creates a new line of text (regardless of whether you use it within a paragraph or elsewhere).
➡️ Next Slide to edit the CSS style of your images ➡️
🎥 CSS for Images
(1) Watch This video to add CSS styles to your images
(2) Here are some links that help you with more advanced image CSS properties:
- Click This Link to make further tweaks to the border radius
- Click This Link to make further tweaks to the border style
➡️ Next Slide ➡️
|
📝 MWB Reflection Task |
|
Open the mini-whiteboard app in a new tab Your teacher will start with these leading questions:
|