Never confuse education with intelligence, you can have a PhD and still be an idiot.
- Richard Feynman -



Difference between revisions of "ITIC:HTML - Exercises"

From Juneday education
Jump to: navigation, search
(Hello HTML)
Line 47: Line 47:
 
Expand using link to the right to see a suggested answer/solution.
 
Expand using link to the right to see a suggested answer/solution.
 
<div class="mw-collapsible-content">
 
<div class="mw-collapsible-content">
You most likely see nothing (no content). This is not strange since the file <code>start.html</code> is empty.
 
 
 
The file should look something like:
 
The file should look something like:
 
<source lang="html">
 
<source lang="html">
Line 80: Line 78:
 
Expand using link to the right to see a suggested answer/solution.
 
Expand using link to the right to see a suggested answer/solution.
 
<div class="mw-collapsible-content">
 
<div class="mw-collapsible-content">
You most likely see nothing (no content). This is not strange since the file <code>start.html</code> is empty.
 
 
 
The file should look something like:
 
The file should look something like:
 
<source lang="html">
 
<source lang="html">

Revision as of 10:03, 10 October 2019

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 do this 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>