Now that you have gone through the Step-by-Step exercises, it's time to practice what you have learned. The following exercises will not have as much detail in the directions.
Look back at the Step-by-Step pages if you need a refresher on how to do something. There are new methods and information in these exercises. They are not just review!
In the following exercises you will practice your skills by creating some web pages. Include all of the parts and characteristics. The directions assume you are writing in Notepad. You can, of course, create the same pages using another text editor or you could use an HTML editor.
|What you will do:||
Title the page
Create an internal style sheet
Format the page
Insert an image
Create a text link and an image link
Apply heading tags
Add styles to an internal style sheet
Adjust text wrapping
Add and style a horizontal rule
Insert a timestamp from Notepad
Print from Notepad and the browser
You will format a simple page for Hector's son Ricardo.
Start with: , Notepad or other text editor
The graphics that you will insert below are also in the folder. These files may also be on your hard disk if you copied the web resource files there. They are also available online at https://www.jegsworks.com/lessons/resources/web_resources/HTML.
In File Explorer, verify that the images sasha.jpg and icon-lobos.gif are in the folder ricardo.
If necessary, copy and paste these images from the resource files folder Exercises to the folder ricardo.
Make the following changes. Use an internal style sheet for your styles.
Background Color - Custom color (red =255 green=200 blue=145)
Text color = Green
Heading 2 = green, font-family = Trebuchet MS, Tahoma, sans-serif
regular paragraphs = green, font-family = Comic Sans MS, Arial, sans-serif
Add paragraphs at the bottom:
Los Lobos - my team
Back to Hector's page
Place sasha.jpg at the beginning of the first
regular paragraph. Use an inline style to make it float at the left with 10px margin all around.
ALT text = "Sasha"
Place icon-lobos.gif at
the left of the line "Los Lobos - my team".
ALT text = "Los Lobos"
Make the second paragraph start below the image.
Use a relative link to make "Hector's page" a link back to your last version of Hector's page, hector25-Lastname-Firstname.htm which is NOT in the same folder as Ricardo's page. It's two levels up:
At the bottom of the page before the BODY tag, add a new paragraph and insert from Notepad's Edit menu the time and date.
(Don't forget to update this before printing.)
Footer > Page &p
Print from Notepad.
(Your code may look different from the illustration, depending on exactly how you wrote the styles and other content, especially blank lines, spaces, and indentions.)
Open the page in your browser.
Test the link to Hector's page by clicking on
it. Return to Ricardo's page with the Back button.
If the link does not work, edit it.
(There is no page yet for Los Lobos so you cannot test that link.)