HTML/XHTML exercises

Jump to:

Basics exercises | Text exercises | Text formatting exercises | Link exercises | Image exercises

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 exercise.

Text exercises

Create a webpage that prints your name to the screen in green. [See solution]
Create a webpage that prints to the screen the numbers 1 - 10, each number being a different color. [See solution]
Create a webpage that prints your name to the screen in a Comic Sans MS font. [See solution]
Create a webpage that prints to the screen a paragraph with 4 - 5 sentences. Each sentence in the paragraph should be a different font. [See solution]
Create a webpage that prints to the screen a description of a book. Include within the description the title of the book as well as its author. Within the description, names or titles should be underlined, adjectives should be italicized and bolded.[See solution]
Create a webpage that prints your name to the screen, with every letter being a different heading size.[See solution]

Text formatting exercises

Create a webpage that outputs the squares of the numbers 1 - 20. Print each number on a separate line, next to it the number 2 superscripted, an equal sign and the result. (Example: 10² = 100) [See solution]
Create a webpage that prints to the screen 10 names, each separated by two lines. 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 a <h1> level heading.[See solution]
Create a webpage that prints to the screen two paragraphs that are both indented using the   command.[See solution]
Create a webpage that prints to the screen two lists of your choosing. One list should be an ordered list. The other list should be an unordered list. [See solution]
Create a webpage that prints a heading of your choosing 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]
Create a webpage that displays preformatted text of your choosing. (hint: use the <pre> tag) [See solution]
Create a webpage that prints a long quote and a short quote of your choosing. Cite the author of each quote. [See solution]
Create a webpage that deletes and inserts text of your choosing. [See solution]
Create a webpage with a definition list with 5 items. [See solution]
Create a webpage that prints to the screen two addresses in the same format used on the front of envelopes (senders address in top right corner, receivers address in the center). [See solution]
Create a webpage that prints to the screen ten acronyms and abbreviations of your choosing, each separated by two lines. Specify the data that the abbreviations and acronyms represent. [See solution]

Link exercises

Create a page that links to various search engines (google, yahoo, altavista, lycos, etc). [See solution]
Create a page that links to five different pages on 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 to the top of the page. [See solution]

Image exercises

Create a page with five different images. Skip two lines between each image. Each image should have a title. [See solution]
Create a page with an image that has a border of size 2, a width of 200, and a height of 200. [See solution]
Create a page with an image that when clicked will link to a search engine of your choice. [See solution]
Create a page with 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.