ITIC:HTML - Exercises

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 and save the file (Ctrl-S). Reload the page in Firefox. You should now see the text <code>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.

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

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

So, now when there's the html suffix 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).

</div>