Preparations

Create a directory for these exercises, typically itic/html/exercises:

mkdir -p itic/html/exercises
cd itic/html/exercises

Start a browser, typically Firefox. Put the pointer in the location bar (you can do this by pressing Ctrl-L) and enter file://. Now click your way to the directory you just created ..... or do this a simpler way (if firefox is in your PATH):

firefox ./ &

You should now see an empty directory presented in Firefox. This directory is where we are going to place our HTML pages used to practice.

First HTML page

Empty page

Create an HTML page, start.html using an editor, typically by starting the editor from the shell:

gedit start.html &

Press save in gedit and go to Firefox and press reload (Ctrl-R). You should now (surprise!) see a page called start.html in Firefox. Click on the page (in Firefox). What do you see - try to explain this. Use file to check the file type.

Expand using link to the right to see a suggested answer/solution.

You most likely see nothing (no content). This is not strange since the file start.html is empty.

$ file start.html 
start.html: ASCII text

So, even if there's the html suffix the command file is not tricked into believing that this is an HTML file.

Hello

Add the text Hello Cleveland in the file start.html and save the file (Ctrl-S). Reload the page in Firefox. You should now see the text Hello Cleveland.

Note: this is not yet an HTML page, just a simple text file.

Hello HTML

Add some HTML tags (html, head, meta and body) to turn the page in to an HTML page. Put the text Hello Cleveland in between the body tags. Reload the browser. Use file to check the file type. Not much of a change is it? Don't worry, changes are coming whether you like it or not.

Expand using link to the right to see a suggested answer/solution.

The file should look something like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    Hello Cleveland
  </body>
</html>

Note: the colors are added in our wiki and possibly something similar in your editor.

Now, let's see what file has to say about start.html.

$ file start.html 
start.html: HTML document, ASCII text

So, now when there's the html code in the file, the command file see that this is an HTML file as well as an ASCII text file. Being both HTML and ASCII is not strange since HTML is plain text (ASCII) with some tags (written using text).

Title

In some situations a title is considered important, some even mistake titles for meritocracy. We do not believe a title makes you smarter or better but in HTML a title can be added to a page and we can live with that kind of title. So let's add Hello Cleveland as title.

Before you add the title check the top of the window frame of Firefox and you'll notice that there's some text telling which file (the path) Firefox is displaying. Add the title and reload Firefox. You should now see Hello Cleveland in the window frame instead. This is the title being displayed.

Expand using link to the right to see a suggested answer/solution.

The file should look something like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello Cleveland</title>
  </head>
  <body>
    Hello Cleveland
  </body>
</html>

Add some paragraphs

Write some text in two different paragraphs (after the Hello Cleveland part).

Expand using link to the right to see a suggested answer/solution.

The file could look something like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello Cleveland</title>
  </head>
  <body>
    Hello Cleveland
    <p>This is the first paragraph. Don't know what more to write in this paragraph. Are we supposed to just write some meaningless garbage? Well, I guess. Imagine being paid to write pointless garbage. I bet there's a career somewhere for this.</p>
    <p>And now, even more pointless crap? As if one paragraph wasn't hard enough. This time I will not waste my creative flow in my brain but rather I will keep this paragraph short and concise. Writing lots of text about nothing could never be a good thing. Or could it?  
  </body>
</html>

Add header 1

Let's make the text Hello Cleveland in to a header 1 (h1).

Expand using link to the right to see a suggested answer/solution.

The file could look something like:

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello Cleveland</title>
  </head>
  <body>
    <h1>Hello Cleveland</h1>
    <p>This is the first paragraph. Don't know what more to write in this paragraph. Are we supposed to just write some meaningless garbage? Well, I guess. Imagine being paid to write pointless garbage. I bet there's a career somewhere for this.</p>
    <p>And now, even more pointless crap? As if one paragraph wasn't hard enough. This time I will not waste my creative flow in my brain but rather I will keep this paragraph short and concise. Writing lots of text about nothing could never be a good thing. Or could it?  
  </body>
</html>

Emphasize some text

Let's make the text pointless garbage emphasized (em).

Expand using link to the right to see a suggested answer/solution.

The file could look something like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello Cleveland</title>
  </head>
  <body>
    <h1>Hello Cleveland</h1>
    <p>This is the first paragraph. Don't know what more to write in this paragraph. Are we supposed to just write some meaningless garbage? Well, I guess. Imagine being paid to write pointless garbage. I bet there's a career somewhere for this.</p>
    <p>And now, even more pointless crap? As if one paragraph wasn't hard enough. This time I will not waste my creative flow in my brain but rather I will keep this paragraph short and concise. Writing lots of text about nothing could never be a good thing. Or could it?  
  </body>
</html>

Add a hyperlink

Add a header saying Links at the end of the page. After this you should add a hyperlink to a Wikipedia page (of your choice). Make sure the links is "clickable".

Expand using link to the right to see a suggested answer/solution.

The file could look something like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello Cleveland</title>
  </head>
  <body>
    <h1>Hello Cleveland</h1>
    <p>This is the first paragraph. Don't know what more to write in this paragraph. Are we supposed to just write some meaningless garbage? Well, I guess. Imagine being paid to write <em>pointless garbage</em>. I bet there's a career somewhere for this.</p>
    <p>And now, even more pointless crap? As if one paragraph wasn't hard enough. This time I will not waste my creative flow in my brain but rather I will keep this paragraph short and concise. Writing lots of text about nothing could never be a good thing. Or could it?  
    <h1>Links</h1>
    <a href="https://en.wikipedia.org/wiki/Meritocracy">Meritocracy</a>
  </body>
</html>

Second HTML page

Two files and links in between

Copy the file, start.html, to a file called second.html. Change the content in the second file a bit so we know the difference.

Add a link from the first page (first.html) to the second page (second.html) and vice versa.

Expand using link to the right to see a suggested answer/solution.

start.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello Cleveland</title>
  </head>
  <body>
    <h1>Hello Cleveland</h1>
    <p>This is the first paragraph. Don't know what more to write in this paragraph. Are we supposed to just write some meaningless garbage? Well, I guess. Imagine being paid to write <em>pointless garbage</em>. I bet there's a career somewhere for this.</p>
    <p>And now, even more pointless crap? As if one paragraph wasn't hard enough. This time I will not waste my creative flow in my brain but rather I will keep this paragraph short and concise. Writing lots of text about nothing could never be a good thing. Or could it? </p> 
    <h1>Links</h1>
    <a href="https://en.wikipedia.org/wiki/Meritocracy">Meritocracy</a>
    <a href="second.html">second.html</a>
  </body>
</html>

second.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello Ohio</title>
  </head>
  <body>
    <h1>Hello Ohio</h1>
    <p>
    <h1>Links</h1>
    <a href="https://en.wikipedia.org/wiki/Elitism">Elitism</a>
    <a href="start.html">start.html</a>
  </body>
</html>

From this we can see that the file does not exist.

Bullet list of links

Make sure to have more than one link in the file second.html. By using <ul> and <li> we can create a bullet list of links.

Start the bullet list with <ul> and end it with </ul>. In between these tag you can put list items. Start and end a list item like this: <li>list item</li>.

Expand using link to the right to see a suggested answer/solution.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello Ohio</title>
  </head>
  <body>
    <h1>Hello Ohio</h1>
    <p>
    <h1>Links</h1>
    <ul>
      <li><a href="https://en.wikipedia.org/wiki/Elitism">Elitism</a></li>
      <li><a href="start.html">start.html</a></li>
    </ul>
  </body>
</html>

Index page

Remember that your browser displayed a listing of the files in the directory? Let's point your browser to that directory again. You should now see two files.

Firefox will not load any of them just to be nice to you. Not even of the files are called please-please-load-this-file.html. But if you place a file called index.html then the browser will load that file. Let's try this out, by:

make sure that the browser lists the two files
add a file index.html
reload the directory in the browser and hope that the index file is displayed

Unless you're using a web server the file index.html is not actually loaded automatically by the browser. Disappointing? A bit, yes we know. Hopefully your teacher has provided you with a proper web server so transfer all the files to that and make sure that the index file is loaded automatically.

Expand using link to the right to see a suggested answer/solution.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Just a simple html file</title>
  </head>
  <body>
    <h1>Hello world!</h1>
    <p>This file should be loaded (by the browser) automatically when entering the directory where this file is located.</p>
    <h1>Links</h1>
    <ul>
      <li><a href="start.html">start.html</a></li>
      <li><a href="second.html">second.html</a></li>
    </ul>
  </body>
</html>

Image gallery

Preparation

We should now combine bash scripting with HTML and create a image gallery. It's not going to be a Nobel Award winning gallery, but they who needs an award?

First of all let's create a directory images and then download some images. In case you have a hard time finding picture you've taken yourself you can download some images from here: Creative Commons Images. Save the images in a directory called images.

If you list the images you should see your images listed:

$ ls -1 images/
29042190747_cb32d57987_o.jpg
29483065427_c402e04678_o.jpg
29511513357_a77d68ea35_o.jpg
30578639507_86ff715453_o.jpg
33760414208_72352f3de7_o.jpg
43261560004_39742fdb25_o.jpg
43353548604_0609e3e273_o.jpg
43718964340_2da82102d4_o.jpg
43975122635_1a43c1b5c5_o.jpg
44276160240_1f4e2613e0_o.jpg
45687621412_e5bb9121d3_o.jpg
46617470001_71787c6dda_o.jpg
46723074865_0e3d948a0a_o.jpg
46927562374_0877edac34_o.jpg
47010077732_11dfd39ef7_o.jpg
48171962017_538aa1ff70_o.jpg
48690192303_c4eaa3f591_o.jpg

Note: the pictures listed in this example will of course be different from the pictures you'll see when listing

Create a script to generate an HTML page

Let's write a small script, gen-gallery.sh that creates an HTML page for us. The script should take the following arguments:

argument 1: the name of the HTML file to create
argument 2: the title for the gallery (used for title and header)

If the use does not provide two arguments the script should exit with 1.

So if the user executes the script like this ./gen-gallery.sh gallery.html "Awesome pictures from Ucklum" the HTML to produce should look like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Awesome pictures from Ucklum</title>
  </head>
  <body>
    <h1>Awesome pictures from Ucklum</h1>
  </body>
</html>

Expand using link to the right to see a suggested answer/solution.

#!/bin/bash

FILE="$1"
TITLE="$2"

to_stderr()
{
    echo "$*" 1>&2
}

#
# There are better ways of writing text to a file but we believe that
# this is straight forward and easy to understand
# 
to_html()
{
    echo "$*" >> $FILE
}

html_start()
{
    to_html "<!DOCTYPE html>"
    to_html "<html lang=\"en\">"
    to_html "  <head>"
    to_html "    <meta charset=\"utf-8\">"
    to_html "    <title>$TITLE</title>"
    to_html "  </head>"
    to_html "  <body>"
}

html_end()
{
    to_html "  </body>"
    to_html "</html>"
}

html_gallery()
{
    to_html "    <h1>$TITLE</h1>"
}

#
# make sure both arguments are set 
#
if [ "$FILE" = "" ] || [ "$TITLE" = "" ]
then
    to_stderr Missing arguments 
    to_stderr You need to supply a file and a title
    exit 1
fi

rm -f $FILE

html_start
html_gallery
html_end

Add images to HTML page

Let's extend the script so it adds images to the HTML file. Loop through the pictures in the images directory and create img tags, like this (assuming that we have a file called images/29042190747_cb32d57987_o.jpg):

      <img src="images/images/29042190747_cb32d57987_o.jpg">

Expand using link to the right to see a suggested answer/solution.

We've updated the function

html_gallery()
{
    to_html "    <h1>$TITLE</h1>"
    for i in $(ls images/*.jpg)
    do
        echo "Adding image: $i"
        to_html "      <img src=\"$i\">"
    done
}

Ok, it works. But the images are quite a bit too big. Let's create thumbnails (smaller versions) and use them instead. No, don't even think about using a photo program to do this. Imagine if you had 100 images, or 1000 or even 1 000 000 images. Simply not possible to do manually with a program. We need to script this.

Create and use thumbnails

ImageMagick

You to to install the program ImageMagick.

Ubuntu/Debian: sudo apt-get install imagemagick
MacOs/Brew: brew install imagemagick
Ubuntu for Windows: sudo apt-get install imagemagick

With ImageMagick you get a program called mogrify. With mogrify you can do a lot (yes, a lot!, just look at the manual linked earlier). You can use mogrify to create thumbnail versions of you file, let's say you want to create an image that is 10% of the original size, then you use mogrify like this: mogrify -geometry 10% your-image.jpg. The original is not kept so make sure you have a copy of the original somewhere.

Beep, let's go

The script should now:

create a thumbnails directory (thumbnails/images)
copy all images to this thumbnails directory
create mini versions of the copied files
use these mini version in the HTML page
create a link (href) to the original file

Expand using link to the right to see a suggested answer/solution.

We've updated the function a bit more

html_gallery()
{
    to_html "    <h1>$TITLE</h1>"
    mkdir -p thumbnails/images
    for i in $(ls images/*.jpg)
    do
        echo "Managing image: $i"
        echo " * creating thumbnail"
        cp $i thumbnails/images/
        mogrify -geometry 10% thumbnails/$i
        echo " * adding thumbnail to HTML: $i"
        to_html "      <img src=\"thumbnails/$i\">"

    done
}

Link to original images

The script should now create a link (href) to the original file (when clicking the thumbnail the original picture shall be shown in the browser)

Expand using link to the right to see a suggested answer/solution.

We've updated the function a bit more

html_gallery()
{
    to_html "    <h1>$TITLE</h1>"
    mkdir -p thumbnails/images
    for i in $(ls images/*.jpg)
    do
        echo "Managing image: $i"
        echo " * creating thumbnail"
        cp $i thumbnails/images/
        mogrify -geometry 10% thumbnails/$i
        echo " * adding thumbnail (with href) to HTML: $i"
        to_html "      <a href=\"$i\"><img src=\"thumbnails/$i\"></a>"

    done
}

The script (our version which is just a suggestion) now looks like this:

#!/bin/bash

FILE="$1"
TITLE="$2"

to_stderr()
{
    echo "$*" 1>&2
}

#
# There are better ways of writing text to a file but we believe that
# this is straight forward and easy to understand
# 
to_html()
{
    echo "$*" >> $FILE
}

html_start()
{
    to_html "<!DOCTYPE html>"
    to_html "<html lang=\"en\">"
    to_html "  <head>"
    to_html "    <meta charset=\"utf-8\">"
    to_html "    <title>$TITLE</title>"
    to_html "  </head>"
    to_html "  <body>"
}

html_end()
{
    to_html "  </body>"
    to_html "</html>"
}

html_gallery()
{
    to_html "    <h1>$TITLE</h1>"
    mkdir -p thumbnails/images
    for i in $(ls images/*.jpg)
    do
        echo "Managing image: $i"
        echo " * creating thumbnail"
        cp $i thumbnails/images/
        mogrify -geometry 10% thumbnails/$i
        echo " * adding thumbnail (with href) to HTML: $i"
        to_html "      <a href=\"$i\"><img src=\"thumbnails/$i\"></a>"
        
    done
}

#
# make sure both arguments are set 
#
if [ "$FILE" = "" ] || [ "$TITLE" = "" ]
then
    to_stderr Missing arguments 
    to_stderr You need to supply a file and a title
    exit 1
fi

rm -f $FILE

html_start
html_gallery
html_end

ITIC:HTML - Exercises

Contents

Preparations

First HTML page

Empty page

Hello

Hello HTML

Title

Add some paragraphs

Add header 1

Emphasize some text

Add a hyperlink

Second HTML page

Two files and links in between

Bullet list of links

Index page

Image gallery

Preparation

Create a script to generate an HTML page

Add images to HTML page

Create and use thumbnails

ImageMagick

Beep, let's go

Link to original images

Navigation menu

Search