Orientation, HTML HTML exercises CMS + HTML CMS exercises Conclusion Contact

[ back ]
HTML exercises

There are 4 exercises, 1 for each of the four HTML tutorials.  The exercise is set as an image of a web page which you have to create by writing the HTML to do this.  Once you have finished you can check that your answer is correct by loading it into a browser.  If you see the desired page you are corrrect.  If not, workout why your page is wrong and correct it.

Excercise 1

image for exercise 1Write the HTML to create this page.  Note that the tab is labeled "Test Page".  You can call your html file anything you like and can store it anywhere you like on your computer.

Excercise 2

image for exercise 2

Write the HTML to create this page.  Note that the tab is labeled "Test Page 2".

You can copy and paste from the text underneath the image to save typing it all out, but remember you have to control the spacing with HTML tags.


First line second Line.
The quick brown fox jumps over the lazy dog.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin dolor turpis, semper a molestie non, ultrices at diam.
Vivamus vitae sem sit amet libero tincidunt iaculis.
Nullam leo nulla, ultrices malesuada semper at, accumsan porta ligula.

Note that the paragraph in the exercise is not spaced like my copy and paste text, but the browser fills the line to the width of the browser window.  You can control the width of the browser by dragging its edge to make it narrower (or wider).  We have not learned how to control widths in HTML yet.  It is better done in CSS.  When we get there it is important to resist the temptation to work in pixels and fit it nicely to our own screens.  Web pages can look terrible on mobile phones unless they are designed with "fluid flow".

Excercise 3

image for exercise 3Write the HTML to create this page.  Note that the tab is labeled "Test Page 3".  One of the annoying things at first with HTML is that you can't arrange data in columns under each other by padding out with spaces.  Remember "white space", the browser treats any number of spacces as a single space.  There are techniques with the preformated tag <pre> and the non-blank space "&nbsp;", but the easiest way for tabular data is using tables.


Excercise 4

image for exercise 4Write the HTML to create this page.  Note that the tab is labeled "Test Page 4".  You can call your html file anything you like and can store it anywhere you like on your computer.  You will need two images which you can download from these links; starav and starling.  Starav is the first image and starling is the second image.  Note the second image is larger than shown on the required web page so you will need to use the width/height attribute(s) on the second link to reduce its size.  In both cases the displayed image, when clicked on should link to the full size starling image.  This will require combination of the anchor and image tags.

The fourth tutorial raised some interesting points that he didn't fully expand on.  They are more of side issues than the main concepts, so it was right not to confuse you with two much detail at the time.  But I bring them up now for completeness.

He only talks of http but there is also https.  They both signify that the HTTP protocol will be used but the s signifies that in addition Secure Sockets Layer will be used.  The details of this only need to be understood by windows programmers but it means encryption will be used which gives security against eaves-dropping.  There is a general misconception that http is not safe which is not entirely true.  Only https encrypts and so is essential for exchange of sensitive information such as credit card numbers, passwords and the like.  Browsers usually indicate this in some way; a colour code, an open or closed padlock, the words SAFE or NOT SAFE.  But for ordinary non sensitive web browsing it is not necessary, and if your browser indicates a site is not safe, it only means "not safe for sensitive information".  You do not need a secure site to find out what the weather will be like today, unless you do not want eaves-droppers to know that you enquired.

He mentions the <alt> tag but does not mention the <title> tag.  This is used to tell the browser to associate a tooltip with the image, this is text which is displayed if the mouse pointer hovers over a link or image.  Some people use the <alt> tag for this but it is incorrect.  The waters have been muddied by Microsoft who chose to use the text from the <alt> tag as a tooltip if a <title> tag was ommited.  This however is a non standard extension; Microsoft made several of these improvements?.

The image tag has width and height attributes and the way he presented them seemed to imply they were used for distortion. They can be, but there are other considerations he didn't mention. If neither width nor height is specified then the browser will use the values from the downloaded image.  If only one is specified then that will be applied to the image and the other dimension will be scaled to preserve the aspect ratio of the downloaded image.  If both are specfied the image will be scaled to those dimensions, which may result in distortion of the image.

Now a point that wasn't made was that the browser lays out the page as it reads the HTML, but when it comes to an image, unless width and height values are given, it allocates a default space for the image.  It takes the path from the source attribute and adds that to the download queue and continues with page layout.  When the image is eventually downloaded and the actual width and height known it might be necessary to reformat the page, because the allowed (guessed) space was incorrect.  This results in the page jumping about on the screen, which is very annoying for the end user if he has started to read it, or is chasing a moving link around the screen.  For this reason it is considered good practice to specify both height and width on all image tags.  With faster broadband speeds this is less of a problem than it used to be with dial-up modems, but it can still be a problem with large images and sites, or sites with server links to heavily congested advertising sites.

Another bad habit prevalent among inexperienced web designers is to use a large 24 megapixel image, as it is when saved from the camera, and then resize it to 800x600 say for display.  If you are only going to display 480kb, why waste everyones time and money by downloading 24 mb?  The resizing should be done before the web page is built.

Another thorny issue is copyright.  There is another general misconception that everything on the web is in the public domain.  This is incorrect.  The internet is, like any other published material, subject to copyright.  There is the "fair use" provision, but unless you are well trained in copyright law the safest course is to assume that images may not be reused without express permission.  Although in the past I have used images gathered from the web, I now only use images from Wikipedia.  These all have copyright information provided and are mostly pubic domain under a creative commons license.

For example this image.  When you click on an image on Wikipedia you are taken to the creative commons information and a downoad link is provided.  If you click this link you get download options for what sizes are available and a pop-up box with the author's requested copyright text.  You can code this information in your HTML, this is the HTML code used for the image on the right.

<a href="https://commons.wikimedia.org/w/index.php?curid=1484324">
<img src="cc.png" width="64" height="64" title="By Creative Commons, fixed by Quibik - Official Creative Commons' base, Public Domain" align=right></a>.

JG - 6 May 2019

[ top - to be continued ]