Get up to 80 % extra points for free! More info:

Solved tasks for HTML and CSS lessons 1-3

The following exercises will help you put your knowledge of web design (HTML/CSS) from previous lessons to the test. Try to solve them on your own, but know that you could always download the working solutions under the article. Nonetheless, beware that when you view the solution without solving the exercise, you won't learn anything :)

If you find yourself stuck at some point, you should always try going back to check previous tutorials first and figure the problem out by yourself.

Easy exercise

Create an HTML document using the proper structure, set the page title to "Blackbird" and insert the following text split into three paragraphs (source: https://en.wikipedia.org/…on_blackbird).

The text:

The common blackbird (Turdus merula) is a species of true thrush. It is also called Eurasian blackbird (especially in North America, to distinguish it from the unrelated New World blackbirds), or simply blackbird where this does not lead to confusion with a similar-looking local species. It breeds in Europe, Asia, and North Africa, and has been introduced to Canada, United States, Mexico, Peru, Brazil, Argentina, Uruguay, the Falkland Islands, Chile, South Africa, Australia and New Zealand. It has a number of subspecies across its large range; a few of the Asian subspecies are sometimes considered to be full species. Depending on latitude, the common blackbird may be resident, partially migratory, or fully migratory.

The male of the nominate subspecies, which is found throughout most of Europe, is all black except for a yellow eye-ring and bill and has a rich, melodious song; the adult female and juvenile have mainly dark brown plumage. This species breeds in woods and gardens, building a neat, mud-lined, cup-shaped nest. It is omnivorous, eating a wide range of insects, earthworms, berries, and fruits.

Both sexes are territorial on the breeding grounds, with distinctive threat displays, but are more gregarious during migration and in wintering areas. Pairs stay in their territory throughout the year where the climate is sufficiently temperate. This common and conspicuous species has given rise to a number of literary and cultural references, frequently related to its song.

The final document will look somthing like this:

Exercise for HTML – Structure and paragraphs - Make Your First Website, Step by Step!

Intermediate exercise

Create an HTML document with the following text and image so the output would be the same as in the screenshot below.

The text:

We're a social IT network with a wide community of active members.
We're hosting the largest database of freely accessible articles and tutorials about programming and IT on the entire internet.
At ICT.social, beginners become experienced programmers. As you know, IT guys don't have it bad at all (financially speaking).
You can create your own portfolio and upload your applications. You'll get feedback and rating. Even experienced programmers will find useful materials, inspiration, and challenges there.

The image:

ICT.social Logo - Make Your First Website, Step by Step!

The appearance of the final document (The text is from our Czech website. We're not that big... yet :P ):

Exercise for HTML – Image and text highlighting - Make Your First Website, Step by Step!

Advanced exercise

Create 7 HTML documents that represent various locations in an online game. The locations will contain a title, an image, and a text paragraph. You will have to come up with a title and descriptions by yourself, images are able for download below. You will also add links to the nearby locations under each image. Use arrow images to code these links and link them to the other documents. How the locations will be connected is shown in the following map:

Exercise for HTML – Locations map - Make Your First Website, Step by Step!

A sample location screenshot:

Exercise for HTML – Location - Make Your First Website, Step by Step!

Necessary images are available for download below:

Arrow up - Make Your First Website, Step by Step! Arrow left - Make Your First Website, Step by Step! Arrow right - Make Your First Website, Step by Step! Arrow down - Make Your First Website, Step by Step!

Location images

House - Make Your First Website, Step by Step! Castle - Make Your First Website, Step by Step! Forest - Make Your First Website, Step by Step! Forest without a magpie - Make Your First Website, Step by Step! Pond - Make Your First Website, Step by Step!

 

Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.

Download

By downloading the following file, you agree to the license terms

Downloaded 182x (510.29 kB)
Application includes source codes in language HTML

 

In order to absolve this article, please pass all exercises above by submitting them.

Previous article
Images and links in HTML
All articles in this section
Make Your First Website, Step by Step!
Skip article
(not recommended)
Tables in HTML
Article has been written for you by David Capka Hartinger
Avatar
User rating:
10 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn university David learned IT at the Unicorn University - a prestigious college providing education on IT and economics.
Activities