This document provides exercises to learn some basics of web programming. Mostly these exercises deal with JavaScript programming.
To do these exercises, you need an editor and a web browser. The editor should be such that it can highlight the syntax of the HTML, CSS, and JavaScript languages. For example, Notepad++ is a suitable editor.
You should test your HTML pages with several browsers to ensure that they work as required.
EXERCISES RELATED TO BASICS OF HTML
HTML is an acronym of Hyper-Text Mark-up Language. With this language, all the pages that are available on the Internet are described. These pages are commonly called HTML pages although they may contain also other languages than plain HTML. The term Hyper-Text is used in the name of the language just to tell that the texts in HTML pages differ in many ways from conventional texts, such as the pages of a book.
With HTML it is possible to describe the content of a web page. In addition, it is possible to use another language called CSS to specify what the content of a web page looks like on the screen. In these exercises, however, we’ll just concentrate on HTML.
Exercise 1:
Create an HTML file (e.g. first_page.html) that specifies a page that contains a heading and
two paragraphs of text. Use the HTML tags <h1>,</h1> and <p>,</p> in this exercise.
As the texts in the heading and paragraphs, you can use any texts you like.
Exercise 2:
Add an unordered list to your first web page. An unordered list should look like the following when it is shown by a browser:
• An unordered list can be specified with the tags <ul> and </ul>.
• An unordered list typically contains a number of list items that can be specified with tags <li> and </li>.
• After you have created your unordered list, check out what happens when you convert it to an ordered list by replacing the tags <ul> and </ul> with <ol> and </ol> respectively.
Exercise 3:
Add an image to your web page. In this exercise, you must use the <img> tag. As an image, you can use any .jpg or .png file you find on the Internet.
Exercise 4:
Create another .html file that contains a heading and a couple of paragraphs. You could name this new file another_page.html, and you should place it into the same folder where your first .html is.
After you have created the new .html page, add a link to the first page so that the browser will load another_page.html when you click the text Go to the other page. on the first page.
You need to use the<a> and </a> tags in this exercise. Inside the tag <a>you need to use a href attribute that specifies which page will be loaded when the link is clicked.
Exercise 5:
HTML tags like <a> can have certain attributes. The href attribute is mandatory in the <a>
tag. Additionally, it is possible to use the title attribute which specifies a text that emerges
when the mouse cursor is moved above a link. This kind of text is called a tooltip.
Modify the link that you created in the previous exercise so that a tooltip says "This leads
you to another page." when the mouse cursor is over the link.
Exercise 6:
It is possible to use a picture (image) as a link. Modify your page so that the picture that is on your page will also serve as a link that leads to another page.
Exercise 7:
Upload your two .html files to a server and test that they work as real internet pages.
