W3Schools HTML Excercises
Create an id selector named "special". Add a color property with the value "blue" inside the "special" declaration block. <!DOCTYPE html> <html> <head> <style> _________ ___ __________ ; ___ </style> </head> <body> <p id="special">My paragraph</p> </body> </html>
#special { color:blue }
In the <style> section, create a class selector named "special". Add a color property with the value "blue" inside the "special" class. <!DOCTYPE html> <html> <head> <style> _______ ___ __________ ; ___ </style> </head> <body> <p class="special">My paragraph</p> </body> </html>
.special { color:blue }
Set the size of the image to 250 pixels wide and 400 pixels tall. <img src="w3schools.jpg" width="___" height="___">
250 400
Add comment tags around the paragraph: ______ <p>This is a paragraph.</p> ______
<!-- -->
Use the HTML comment tag to make a comment out of the "This is a comment" text. <h1>This is a heading</h1> ______ This is a comment ______ <p>This is a paragraph.</p>
<!-- -->
Clean up this document with proper end tags. <h1>This is a Heading___ <p>This is a paragraph.___
</h1> </p>
Use the correct HTML to make the text below into a link to "default.html". __ ____________ >Visit our HTML tutorial. ___
<a href="default.html" </a>
Use the correct HTML to make the image become a link to "default.html". __ ________ <img src="smiley.gif"> __
<a href="default.html"> </a>
Change text direction. Make the text below go right-to-left. ________ What a beautiful day! ________
<bdo dir="rtl"> </bdo>
The text below should be a quoted section. Add the proper HTML element to it, and specify that it is quoted from the following URL:http://www.worldwildlife.org/who/index.html ________ ____="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. ________
<blockquote cite </blockquote>
Add a line break in the middle of the paragraph: <p>My Bonnie lies ___ over the ocean.</p>
<br>
In the form below, add a <button> element with the text "Click Me". <form action="/action_page.php"> < _________________ > </form>
<button>Click Me</button>
Add a table caption that says "Names". <table> ____________ <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th></tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> </table>
<caption>Names</caption>
Define the text "var person;" as programming code. <p>Code example: ________ var person; _________ </p>
<code> </code>
Use the correct HTML elements to make a description of each term in the description list. <dl> <dt>Coffee</dt> ____ - black hot drink _____ <dt>Milk</dt> ____ - white cold drink ______ </dl>
<dd> </dd> <dd> </dd>
Add a line through (strikeout) the letters "blue" in the text below. <p> My favorite color is ______ blue ______ red. </p>
<del> </del>
Emphasize the word "metropolitan" in the text below. <h1>Tokyo</h1> <p> Tokyo is the capital of Japan, the most populous _____ metropolitan _____area in the world. </p>
<em> </em>
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). ___Universal Studios Presents___ ___Jurassic Park___ ___About___ ___On the Island of Isla Nublar, a new park has been built: Jurassic Park is a theme park of cloned dinosaurs!!___
<h1> </h1> <h2> </h2> <h3> </h3> <p> </p>
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> ______ ______ ______ ______ ______ ______ </body> </html>
<h1>Hello</h1> <h2>Hello</h2> <h3>Hello</h3> <h4>Hello</h4> <h5>Hello</h5> <h6>Hello</h6>
Use the correct HTML tag to add a heading with the text "London". ____________ <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>__
<h1>London</h1>
Add a horizontal rule between the heading and the paragraph. <h1>London</h1> ___ <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>
<hr>
Create an iframe with a URL address that goes to "default.html". ___________________________________________________
<iframe src="default.html"></iframe>
Add a list item with the text "Coffee" inside the <ul>. <ul> ____ Coffee ____ </ul>
<li> </li>
Highlight the word "FUN" in the text below. <p> HTML is ______ FUN ______ to learn! </p>
<mark> </mark>
Finish the HTML code to make an ordered list. ____ <li>Coffee</li> <li>Tea</li> <li>Milk</li> ____
<ol> </ol>
Use the correct HTML tag to add a paragraph with the text "Hello World!". <html> <body> _____________ </body> </html>
<p>Hello World!</p>
Define the text inside the <code> element as preformatted text (to preserve spaces and line breaks). <p>Code example:</p> _______ <code>var person = { firstName:"John", lastName:"Doe" }</code> _______
<pre> </pre>
Wrap this poem around HTML tags that will preserve all spaces and linebreaks when the element is displayed. ___ 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> </pre>
Use an HTML element to add quotation marks around the letters "cool". <p> I am so ______ cool ______. </p>
<q> </q>
Add extra importance to the word "degradation" in the paragraph below. <p> WWF's mission is to stop the ______ degradation ______ of our planet's natural environment. </p>
<strong> </strong>
Apply subscript formatting to the number "2" in the text below. <p> H ______ 2 ______ O is the scientific term for water. </p>
<sub> </sub>
Add a table row at the end of the table, with two table cells. The two table cells should have the value "Eve Jackson" and "94". <table> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Jill Smith</td> <td>50</td> </tr> ____ _________________ ___________ ____ </table>
<tr> <td>Eve Jackson</td> <td>94</td> </tr>
Add a table row with two table headers. The two table headers should have the value "Name" and "Age". <table> ____ ________ ________ ____ <tr> <td>Jill Smith</td> <td>50</td> </tr> </table>
<tr> <th>Name</th> <th>Age</th> </tr>
Define the character "x" in the equation as a variable. <p>A simple math equation: _______ x _______ = 3 + 2; </p>
<var> </var>
Use CSS to set the background color of the document to yellow. <html> <body style=" ______ :yellow;"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
background-color
Use CSS to set the background color of the document (body) to yellow. <!DOCTYPE html> <html> <head> <style> _____ __ ____________ :yellow; __ </style> </head> <body> <h1>My Home Page</h1> </body> </html>
body { background-color }
Use CSS to display an iframe with no borders. <iframe src="https://www.w3schools.com" style=" _______________ "></iframe>
border:none
Add two classes to the H1 element, to make the background pink and the color red. <!DOCTYPE html> <html> <head> <style> .intro {background:pink;} .special {color:red;} </style> </head> <body> <h1 ________________ >My Home Page</h1> </body> </html>
class="intro special"
Add the correct class to make the H1 element red. <!DOCTYPE html> <html> <head> <style> .mystyle {color:red;} </style> </head> <body> <h1 __________ >My Home Page</h1>< /body> </html>
class="mystyle"
Use CSS to set the text color of the document to red. <!DOCTYPE html> <html> <head> <style> body { ______ :red;} </style> </head> <body> <h1>My Home Page</h1> </body> </html>
color
Use the correct HTML attribute to make the first TH element span two columns. <table> <tr> <th ____________ >Name</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
colspan="2"
Disable the input field below. <form action="/action_page.php"> <input type="text" ______________ > </form>
disabled
Use JavaScript to change the image source from "scream.png" to "smiley.gif". <body> <img id="demo" src="scream.png"> <scrip> ________ .getElementById("demo"). ________ = "smiley.gif"; </scrip> </body>
document src
Make the image below float to the right of the paragraph. <p> <img src="smiley.gif" style=" ______ ;"> This is a paragraph. This paragraph contains an image </p>
float:right
Use CSS to set the font of the document to "courier". <!DOCTYPE html> <html> <head> <style> body { ________ :courier;} </style> </head> <body> <h1>My Home Page</h1> </body> </html>
font-family
Use CSS to set the font of the paragraph to "courier". <p style=" ______ :courier;">This is a paragraph.</p>
font-family
Use CSS to set the text size to 50 pixels. <p style=" ______ :50px;">This is a paragraph.</p
font-size
Use JavaScript to change the HTML content of the <p> element to "Hello World!". <body> <p id="demo">Hi.</p> <scrip> document. __________ ("demo").innerHTML = "Hello World!"; </scrip> </body>
getElementById
Make the element below into a link that goes to "https://www.w3schools.com". <a ___ "https://www.w3schools.com">This is a link</a>
href=
Add the correct HTML attribute to make the H1 element red. <!DOCTYPE html> <html> <head> <style> #myheader {color:red;} </style> </head> <body> <h1 _____________ >My Home Page</h1> </body> </html>
id="myheader"
In the form below, add an input field with the type "button" and the value "OK". <form> < ___________________ > </form>
input type="button" value="OK"
In the form below, add two radio buttons, both with the name "fav_language". <form> < ___________________ value="html"> HTML < ___________________ value="css"> CSS </form>
input type="radio" name="fav_language" input type="radio" name="fav_language"
In the form below, add an input field for text, with the name "username" . <form action="/action_page.php"> < _________________ > </form>
input type="text" name="username"
Use CSS to display squares instead of bullets. <ul style=" _________ ;"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
list-style-type:square
Set the max numbers of characters allowed in the input field to 40. <form action="/action_page.php"> <input type="text" ______________ > </form>
maxlength="40"
Specify that the form is submitted using the "POST" method. <form action="/action_page.php" ___________ > Name: <input type="text" name="name"> <input type="submit"> </form>
method="post"
1. In the form below, add an input field that can only contain numbers 2. Use the correct input attributes to only allow numbers between 1 and 5. <form action="/action_page.php"> <input type=" __________ " ________ ="1" ________ ="5"> </form>
number min max
In the form below, add two option elements to the drop down list. The first option must have the value "Volvo"The second option must have the value "Ford". <form action="/action_page.php"> <select name="cars"> < _________________ >Volvo</ __________ > < _________________ >Ford</ ___________ > </select> </form>
option value="Volvo" option option value="Ford" option
Use CSS to make a yellow, 1 pixel thick, border around all paragraphs. <!DOCTYPE html> <html> <head> <style> __ { ______ : ___ solid _____ ;} </style> </head> <body> <p>This is a paragraph.</p ><p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html>
p border 1px yellow
In the input field below, add placeholder that says "Your name here". <form action="/action_page.php"> <input type="text" ______________ > </form>
placeholder="Your name here"
Set the input field to be read only (meaning that the value cannot be changed). <form action="/action_page.php"> <input type="text" ______________ > </form>
readonly
Use the correct HTML attribute to make the second TH element span two rows. <table> <tr> <th>Name</th> <td>Jill Smith</td> </tr> <tr> <th ______________ >Phone</th> <td>555-77854</td> </tr> <tr> <td>555-77854</td> </tr> </table>
rowspan="2"
In the form below, add an empty drop down list with the name "cars". <form action="/action_page.php"> < _______________________ > </ _____________ > </form>
select name="cars" select
Create an iframe with a URL address that goes to https://www.w3schools.com. <iframe ____ ="https://www.w3schools.com"></iframe>
src
Add the correct HTML attribute to display the "smiley.gif" image. <img ____________>
src="smiley.gif"
Use JavaScript to set the color of the <p> element to "red". <body> <p id="demo">Hi.</p> <scrip> document.getElementById("demo"). ________ . _________ = "red"; </scrip> </body>
style color
Use the correct HTML attribute, and CSS, to set the color of the paragraph to "blue". <p ___ =" ___ ;">This is a paragraph.</p>
style color:blue
Use JavaScript to change the text size of the <p> element to 40 pixels. <body> <p id="demo">Hi.</p> <scrip> document.getElementById("demo"). ________ . _________ = "40px"; </scrip> </body>
style fontSize
Use CSS to center align the document. <html> <body ______ =" ______ ;"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
style text-align:center
Use CSS styles to make the table 300 pixels wide. <table ______________ > <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th></tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> </table>
style="width:300px;"
Use the correct HTML attribute to make the link open in a new window. <a href="html_images.asp" ____________ >HTML Images</a>
target="_blank"
Use CSS to center align the paragraph. <p style=" ______ :center;">This is a paragraph.</p>
text-align
Use CSS to remove the underline from the link. <a href="html_images.asp" style=" ____________ ">HTML Images</a>
text-decoration:none;
In the form below, add a text area with the name "note". <form action="/action_page.php"> < ______________ ></ __________ > </form>
textarea name="note" textarea
Add a "tooltip" to the paragraph below with the text "About W3Schools". <p____="About W3Schools">W3Schools is a web developer's site.</p
title
Add a "tooltip" to the link. The "tooltip" should say "Home". <a href="default.html" ________ >Back to Home</a>
title="Home"
Use the correct HTML attribute to display letters (uppercase ABC) instead of numbers. <ol _________ > <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
type="A"
Use the correct HTML attribute to display uppercase roman numbers. <ol _________ > <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
type="I"
Add two radio buttons with the name "color". <form action="/action_page.php"> Favorite color: Blue <input value="blue" _________ _________ > Red <input value="red" _________ _________ > <input type="submit"> </form>
type="radio" name="color" type="radio" name="color"
In the form below, add a submit button with the value "Submit Form". <form action="/action_page.php"> <input type="text" name="username"> <input _________________ > </form>
type="submit" value="Submit Form"
Use the HTML image attributes to set the size of the image to 250 pixels wide and 400 pixels tall. <img src="scream.png" ______ ="250" ______ ="400">
width height
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
Use an iframe attribute to make the iframe 500 pixels wide. <iframe src="https://www.w3schools.com" __________ ></iframe>
width="500"
The letters "WHO" in the text below is an abbreviation of "World Health Organization". Use an HTML element to provide the specified abbreviation of "WHO". <p> The < ______ ______ "World Health Organization"> WHO</ ______ > was founded in 1948. </p>
abbr title= abbr
Add a submit button, and specify that the form should go to "/action_page.php". <form ________ ="/action_page.php"> Name: <input type="text" name="name"> < ________________ > </form>
action input type="submit"
Specify an alternate text for the image. Alternate text is useful when the image cannot be displayed, like when the page is read by a screen reader. <img src="w3schools.png" ___ ="w3schools Logo">
alt
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"
