HTML exercises

Each exercise solution can be viewed in the online code editor so that you can expirement with the code as much as you like.

Jump to:

Basics | Text | Text formatting | Links | Images

HTML basics exercises

Create a webpage that prints your name to the screen. [See solution]
Create a webpage that prints the numbers 1 - 10 to the screen. [See solution]
Create a webpage and set its title to "This is a webpage". [See solution]
Create a webpage that prints the message "When was this webpage created? Check page's title for the answer." to the screen, and set the title of the page to the current date.[See solution]
Create a webpage that prints any text of your choosing to the screen, do not include a head section in the code. [See solution]
Repeat exercise #5, but this time include a head section in the code. [See solution]

NOTE: Include comments in every HTML basics exercise.

^Back to top

HTML text exercises

Print your name in green. [See solution]
Print the numbers 1 - 10, each number being a different color. [See solution]
Prints your name in a Tahoma font. [See solution]
Print a paragraph with 4 - 5 sentences. Each sentence should be a different font. [See solution]
Print a paragraph that is a description of a book, include the title of the book as well as its author. Names and titles should be underlined, adjectives should be italicized and bolded.[See solution]
Print your name to the screen with every letter being a different heading size.[See solution]

^Back to top

HTML text formatting exercises

Print the squares of the numbers 1 - 20. Each number should be on a separate line, next to it the number 2 superscripted, an equal sign and the result. (Example: 10² = 100) [See solution]
Prints 10 names with a line break between each name. The list should be alphabetized, and to do this place a subscripted number next to each name based on where it will go in the alphabetized list. (Example: Alan₁). Print first, the unalphabetized list with a subscript number next to each name, then the alphabetized list. Both lists should have an <h1> level heading.[See solution]
Print two paragraphs that are both indented using the   command.[See solution]
Print two lists with any information you want. One list should be an ordered list, the other list should be an unordered list. [See solution]
Prints an h1 level heading followed by a horizontal line whose width is 100%. Below the horizontal line print a paragraph relating to the text in the heading. [See solution]
Print some preformatted text of your choosing. (hint: use the <pre> tag) [See solution]
Print a long quote and a short quote. Cite the author of each quote. [See solution]
Print some deleted and inserted text of your choosing. [See solution]
Print a definition list with 5 items. [See solution]
Print two addresses in the same format used on the front of envelopes (senders address in top left corner, receivers address in the center). [See solution]
Print ten acronyms and abbreviations of your choosing, each separated by two lines. Specify the data that the abbreviations and acronyms represent. [See solution]

^Back to top

HTML link exercises

Create some links to various search engines (google, yahoo, altavista, lycos, etc). [See solution]
Create links to five different pages on five different websites that should all open in a new window. [See solution]
Create a page with a link at the top of it that when clicked will jump all the way to the bottom of the page. [See solution]
Create a page with a link at the bottom of it that when clicked will jump all the way to the top of the page. [See solution]
Create a page with a link at the top of it that when clicked will jump all the way to the bottom of the page. At the bottom of the page there should be a link to jump back to the top of the page. [See solution]

^Back to top

HTML image exercises

Display five different images. Skip two lines between each image. Each image should have a title. [See solution]
Display an image that has a border of size 2, a width of 200, and a height of 200. [See solution]
Display an image that when clicked will link to a search engine of your choice (should be opened in a new window). [See solution]
Display an image that when clicked will link to itself and will display the image in the browser by itself. [See solution]

NOTE: Include the alt attribute in every <img> tag in the HTML image exercises.

^Back to top