Difference between revisions of "ITIC:HTML - Exercises"

From Juneday education
Jump to: navigation, search
(Created page with " = Preparations = Create a directory for these exercises, typically <code>itic/html/exercises</code>: <source lang="bash"> mkdir -p itic/html/exercises cd itic/html/exercises...")
 
(Index page)
(19 intermediate revisions by the same user not shown)
Line 37: Line 37:
 
== Hello ==
 
== Hello ==
  
Add the text <code>Hello Cleveland</code> in the file <code> and save the file (Ctrl-S). Reload the page in Firefox. You should now see the text <code>Hello Cleveland</code>.
+
Add the text <code>Hello Cleveland</code> in the file <code>start.html</code> and save the file (Ctrl-S). Reload the page in Firefox. You should now see the text <code>Hello Cleveland</code>.
  
 
'''''Note:''' this is not yet an HTML page, just a simple text file.''
 
'''''Note:''' this is not yet an HTML page, just a simple text file.''
Line 44: Line 44:
 
Add some HTML tags (<code>html</code>, <code>head</code>, <code>meta</code> and <code>body</code>) to turn the page in to an HTML page. Put the text <code>Hello Cleveland</code> in between the <code>body</code> tags. Reload the browser. Use <code>file</code> to check the file type. Not much of a change is it? Don't worry, changes are coming whether you like it or not.
 
Add some HTML tags (<code>html</code>, <code>head</code>, <code>meta</code> and <code>body</code>) to turn the page in to an HTML page. Put the text <code>Hello Cleveland</code> in between the <code>body</code> tags. Reload the browser. Use <code>file</code> to check the file type. Not much of a change is it? Don't worry, changes are coming whether you like it or not.
  
 
+
<div class="mw-collapsible mw-collapsed">
 
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:
 +
<source lang="html">
 +
<!DOCTYPE html>
 +
<html lang="en">
 +
  <head>
 +
    <meta charset="utf-8">
 +
  </head>
 +
  <body>
 +
    Hello Cleveland
 +
  </body>
 +
</html>
 +
</source>
 +
 
 +
'''''Note:''' the colors are added in our wiki and possibly something similar in your editor.''
 +
 
 +
 
 +
Now, let's see what <code>file</code> has to say about <code>start.html</code>.
 
<source lang="bash">
 
<source lang="bash">
 
$ file start.html  
 
$ file start.html  
 
start.html: HTML document, ASCII text
 
start.html: HTML document, ASCII text
 
</source>
 
</source>
So, now when there's the <code>html</code> suffix the command <code>file</code> 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).
+
So, now when there's the <code>html</code> code in the file, the command <code>file</code> 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></div>
 +
 
 +
== Title ==
 +
 
 +
In some situations a title is considered important, some even mistake titles for [https://en.wikipedia.org/wiki/Meritocracy 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 <code>Hello Cleveland</code> 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 <code>Hello Cleveland</code> in the window frame instead. This is the title being displayed.
 +
 
 +
<div class="mw-collapsible mw-collapsed">
 +
Expand using link to the right to see a suggested answer/solution.
 +
<div class="mw-collapsible-content">
 +
The file should look something like:
 +
<source lang="html">
 +
<!DOCTYPE html>
 +
<html lang="en">
 +
  <head>
 +
    <meta charset="utf-8">
 +
    <title>Hello Cleveland</title>
 +
  </head>
 +
  <body>
 +
    Hello Cleveland
 +
  </body>
 +
</html>
 +
</source>
 +
</div></div>
 +
 
 +
== Add some paragraphs ==
 +
Write some text in two different paragraphs (after the Hello Cleveland part).
 +
 
 +
<div class="mw-collapsible mw-collapsed">
 +
Expand using link to the right to see a suggested answer/solution.
 +
<div class="mw-collapsible-content">
 +
The file could look something like:
 +
<source lang="html">
 +
<!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>
 +
</source>
 +
</div></div>
 +
 
 +
== Add header 1 ==
 +
Let's make the text <code>Hello Cleveland</code> in to a header 1 (<code>h1</code>).
 +
 
 +
<div class="mw-collapsible mw-collapsed">
 +
Expand using link to the right to see a suggested answer/solution.
 +
<div class="mw-collapsible-content">
 +
The file could look something like:
 +
<source lang="html">
 +
<!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>
 +
</source>
 +
</div></div>
 +
 
 +
== Emphasize some text  ==
 +
Let's make the text <code>pointless garbage</code> emphasized (<code>em</code>).
 +
 
 +
<div class="mw-collapsible mw-collapsed">
 +
Expand using link to the right to see a suggested answer/solution.
 +
<div class="mw-collapsible-content">
 +
The file could look something like:
 +
<source lang="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>
 +
</source>
 +
</div></div>
 +
 
 +
== Add a hyperlink ==
 +
Add a header saying <code>Links</code> 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".
 +
 
 +
<div class="mw-collapsible mw-collapsed">
 +
Expand using link to the right to see a suggested answer/solution.
 +
<div class="mw-collapsible-content">
 +
The file could look something like:
 +
<source lang="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? 
 +
    <h1>Links</h1>
 +
    <a href="https://en.wikipedia.org/wiki/Meritocracy">Meritocracy</a>
 +
  </body>
 +
</html>
 +
</source>
 +
</div></div>
 +
 
 +
= Second HTML page=
 +
 
 +
== Two files and links in between ==
 +
 
 +
Copy the file, <code>start.html</code>, to a file called <code>second.html</code>. Change the content in the second file a bit so we know the difference.
 +
 
 +
Add a link from the first page (<code>first.html</code>) to the second page (<code>second.html</code>) and vice versa.
 +
 
 +
<div class="mw-collapsible mw-collapsed">
 +
Expand using link to the right to see a suggested answer/solution.
 +
<div class="mw-collapsible-content">
 +
<code>start.html</code>:
 +
<source lang="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>
 +
</source>
 +
 
 +
 
 +
<code>second.html</code>:
 +
<source lang="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>
 +
</source>
 +
From this we can see that the file does not exist.
 +
</div></div>
 +
 
 +
== Bullet list of links ==
 +
 
 +
Make sure to have more than one link in the file <code>second.html</code>. By using <source lang="html" inline="true"><ul></source> and <source lang="html" inline="true"><li></source> we can create a bullet list of links.
 +
 
 +
Start the bullet list with <source lang="html" inline="true"><ul></source> and end it with <source lang="html" inline="true"></ul></source>. In between these tag you can put list items. Start and end a list item like this: <source lang="html" inline="true"><li>list item</li></source>.
 +
 
 +
<div class="mw-collapsible mw-collapsed">
 +
Expand using link to the right to see a suggested answer/solution.
 +
<div class="mw-collapsible-content">
 +
<source lang="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>
 +
    <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>
 +
</source>
 +
</div></div>
 +
 
 +
=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 <code>please-please-load-this-file.html</code>. But if you place a file called <code>index.html</code> 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 <code>index.html</code>
 +
* reload the directory in the browser and hope that the index file is displayed
 +
 
 +
Unless you're using a web server the file <code>index.html</code> 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.
 +
 
 +
<div class="mw-collapsible mw-collapsed">
 +
Expand using link to the right to see a suggested answer/solution.
 +
<div class="mw-collapsible-content">
 +
<source lang="html">
 +
<!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>
 +
</source>
 
</div></div>
 
</div></div>

Revision as of 11:54, 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 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>