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
(Copy the file start.html)
(Copy the file start.html)
Line 196: Line 196:
 
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.
 
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.
+
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">
 
<div class="mw-collapsible mw-collapsed">

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

Copy the file start.html

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.