Scribd
Upload
43 views5 pages

HTML Styling Exercises Guide

The document contains a series of HTML exercises that demonstrate various text formatting techniques, such as changing color, font, alignment, and size. It also includes exercises for applying bold, italics, underline, subscript, superscript, and strikeout formatting, as well as image manipulation and hyperlinking. Each exercise is presented with corresponding HTML code to illustrate the desired outcome.

Uploaded by

nw613909
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
43 views5 pages

HTML Styling Exercises Guide

The document contains a series of HTML exercises that demonstrate various text formatting techniques, such as changing color, font, alignment, and size. It also includes exercises for applying bold, italics, underline, subscript, superscript, and strikeout formatting, as well as image manipulation and hyperlinking. Each exercise is presented with corresponding HTML code to illustrate the desired outcome.

Uploaded by

nw613909
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Exercise 1:

Change the text color of the paragraph to "blue".


<!DOCTYPE html>
<html>
<body>
<p style="color:blue">This is a paragraph.</p>
</body>
</html>

Exercise 2 :
Change the font of the paragraph to "courier".
<!DOCTYPE html>
<html>
<body>
<p style="font-family:courier">This is a paragraph.</p>
</body>
</html>

Exercise 3:
Center align the paragraph.
<!DOCTYPE html>
<html>
<body>
<p style="text-align:center">This is a paragraph.</p>
</body>
</html>

Exercise 4:
Change the text size of the paragraph to 50px.
<!DOCTYPE html>
<html>
<body>
<p style="font-size:50px">This is a paragraph.</p>
</body>
</html>
Exercise 5:
Mark the text Bold.
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>
</body>
</html>

Exercise 6:
Mark the text italics.
<!DOCTYPE html>
<html>
<body>
<p><i>This text is italics</i></p>
</body>
</html>

Exercise 7:
Underline the text .
<!DOCTYPE html>
<html>
<body>
<p><u>This text is underline</u></p>
</body>
</html>

Exercise 8:
Apply subscript formatting to the number "2" in the text below.
<!DOCTYPE html>
<html>
<body>
<p>H<sub>2</sub>O is the scientific term for water</p>
</body>
</html>
Exercise 9:
Apply superscript formatting to the number "2" in the text below.
<!DOCTYPE html>
<html>
<body>
<p>9<sup>2</sup> square of a number</p>
</body>
</html>

Exercise 10:
Add a line through (strikeout) the letters "blue" in the text below.
<!DOCTYPE html>
<html>
<body>
<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>

Exercise 11:
<!DOCTYPE html>
<html>
<body style="background-color:yellow">
<h1 style='Color:blue;font-family:arial;font-size:80px;text-align:center'>This is a
heading</h1>
<p style='Color:red;font-family:Courier;font-size:50px;text-align:right'>This is a
paragraph</p>
<a href="[Link] style='Color:green;font-
family:Courier;font-size:30px'>This is a link</a>
<br>
<br>
<img src="[Link]" width="250" height="300"> This is a image</img>
</body>
</html>
Exercise 12:
Center align all content on the page.
<!DOCTYPE html>
<html>
<body style="text-align:center">
<h1>This is a heading</h1>
<h2>This is also a heading</h2>
<p>This is a paragraph.</p>
<p>This is also paragraph.</p>
</body>
</html>

Exercise 13:
Highlight the word "FUN" in the text below.
<!DOCTYPE html>
<html>
<body>
<p>HTML is <mark>FUN</mark> to learn!</p>
</body>
</html>

Exercise 14:
Double the width and height of the image below. From 48
<!DOCTYPE html>
<html>
<body>
<img src="[Link]" alt="Computer Man"
width="96" height="96">
</body>
</html>
Exercise 15:
Double the width and height of the image below. From 128px
<!DOCTYPE html>
<html>
<body>
<img src="[Link]" alt="HTML5 Icon"
style="width:256px; height:256px">
</body>
</html>

Exercise 16:
Add a link to the image below (make it go to "[Link] if you
click on it).
<!DOCTYPE html>
<html>
<body>
<a href="[Link]
<img src="[Link]" alt="HTML tutorial"
style="width:42px; height:42px">
</a>
</body>
</html>

You might also like