HTML
Headings:
Exercise 1:
Use the correct HTML tag to add a heading with the text "London".
<h1>London</h1>
Exercise 2:
Add six headings to the document with the text "Hello".
Start with the most important heading (the largest) and end with the least important heading (the
smallest).
<html>
<body>
<h1>Hello</h1>
<h2>Hello</h2>
<h3>Hello</h3>
<h4>Hello</h4>
<h5>Hello</h5>
<h6>Hello</h6>
</body>
</html>
Exercise 3:
Mark up the text with appropriate tags:
"Universal Studios Presents" is the most important heading.
"Jurassic Park" is the next most important heading.
"About" is the third most important heading.
The last sentence is just a paragraph.
Start with the most important heading (the largest) and end with the least important heading (the
smallest).
<h1>Universal Studios Presents</h1>
<h2>Jurassic Park</h2>
<h3>About</h3>
<p>On the Island of Isla Nublar, a new park has been built: Jurassic Park is a theme park of cloned
dinosaurs!!</p>
Paragraphs:
Exercise 1:
Use the correct HTML tag to add a paragraph with the text "Hello World!".
<p>Hello World!</p>
Exercise 2:
Clean up this document with proper end tags.
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
Exercise 3:
Add a horizontal rule between the heading and the paragraph.
<h1>London</h1>
<hr>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.</p>
Exercise 4:
Add a line break in the middle of the paragraph:
<p>My Bonnie lies<br>over the ocean.</p>
Exercise 5:
Wrap this poem around HTML tags that will preserve all spaces and linebreaks when the element is
displayed.
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
Styles:
Exercise 1:
Use the correct HTML attribute, and CSS, to set the color of the paragraph to "blue".
<p style="color:blue;">This is a paragraph.</p>
Exercise 2:
Use CSS to set the font of the paragraph to "courier".
<p style="font-family:courier;">This is a paragraph.</p>
Exercise 3:
Use CSS to center align the paragraph.
<p style="text-align:center;">This is a paragraph.</p>
Exercise 4:
Use CSS to set the text size to 50 pixels.
<p style="font-size:50px;">This is a paragraph.</p>
Exercise 5:
Use CSS to set the background color of the document to yellow.
<html>
<body style="background-color:yellow;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Exercise 6:
Use CSS to center align the document.
<html>
<body style="text-align:center;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS:
Exercise 1:
Use CSS to set the background color of the document (body) to yellow.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:yellow;
}
</style>
</head>
<body>
<h1>My Home Page</h1>
</body>
</html>
Exercise 2:
Use CSS to set the font of the document to "courier".
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family:courier;}
</style>
</head>
<body>
<h1>My Home Page</h1>
</body>
</html>
Exercise 3:
Use CSS to set the text color of the document to red.
<!DOCTYPE html>
<html>
<head>
<style>
body {color:red;}
</style>
</head>
<body>
<h1>My Home Page</h1>
</body>
</html>
Exercise 4:
Use CSS to make a yellow, 1 pixel thick, border around all paragraphs.
<!DOCTYPE html>
<html>
<head>
<style>
p{border: 1px solid yellow;}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
Links:
Exercise 1:
Use the correct HTML to make the text below into a link to "default.html".
<a href="default.html" >Visit our HTML tutorial. </a>
Exercise 2:
Use CSS to remove the underline from the link.
<a href="html_images.asp" style="text-decoration:none;">HTML Images</a>
Exercise 3:
Use the correct HTML attribute to make the link open in a new window.
<a href="html_images.asp" target="_blank">HTML Images</a>
Exercise 4:
Use the correct HTML to make the image become a link to "default.html".
<a href="default.html">
<img src="smiley.gif">
</a>
Exercise 5:
Add a "tooltip" to the link.
The "tooltip" should say "Home".
<a href="default.html" title="Home">Back to Home</a>
Images:
Exercise 1:
Use the HTML image attributes to set the size of the image to 250 pixels wide and 400 pixels tall.
<img src="scream.png" width="250" height="400">
Exercise 2:
Use CSS to set the size of the image to 250 pixels wide and 400 pixels tall.
<img src="scream.png" style="width:250px;height:400px;">
Exercise 3:
Use the correct HTML to make the image become a link to "default.html".
<a href="default.html">
<img src="smiley.gif">
</a>
Exercise 4:
Make the image below float to the right of the paragraph.
<p>
<img src="smiley.gif" style="float:right;">
This is a paragraph.
This paragraph contains an image
</p>
Exercise 5:
Add the correct HTML attribute to display the "smiley.gif" image.
<img src="smiley.gif">
Exercise 6:
Specify an alternate text for the image.
The alternate text should say "Smiley".
Alternate text is useful when the image cannot be displayed, like when the page is read by a screen
reader.
<img src="smiley.gif" alt="Smiley">
