KUAS Engineering

Week 13 — Web content

This week's topic is about creating content for the Web.

Evaluation

Up to 10 points can be gained towards your final score by completing the in-class exercises on Friday.

What you will learn from this class

  • What HTML is.
  • What the basic structure of a Web page is.
  • How to divide your page into sections.
  • How to add lists and tables to your page.
  • How to include graphics in your page.
  • How to make a hyperlink to another (external) Web page.
  • How to use fragments to identify different parts of your Web page as part of its URL.
  • How to make a hyperlink to another part of your (current) Web page.
  • How to use CSS to change the style of different elements in your web page.
  • How to identify a specific element by naming it, or a group of elements by collecting them into a class.
  • How to add simple dynamic behaviour to a web page using JavaScript.

Preparation

This week's preparation is to watch two videos about Web pages, specifically about hypertext markup language (HTML) and cascading style sheets (CSS), and then to complete a few exercises that will familiarise you with the basics of HTML and CSS.

Videos

HTML tutorial (33 minutes) https://www.youtube.com/watch?v=PlxWf493en4
Intro to CSS (3 minutes) https://www.youtube.com/watch?v=EP9QMdoXvXE

The first video (HTML tutorial) covers most (but not all) of the material in the exercises below. I recommend you follow along practically with the first video, creating your own small web site.

Exercises

1. Create a small "Web development" environment

First, create a file called “index.html” in your current directory that contains the following text: 

<!DOCTYPE html>
<html>
  <body>
    <p>Welcome to your Computer-Wide Web!</p>
  </body>
</html>

This is “the world's simplest Web page”. To display it in your browser you have two options: open the page directly, or run a small Web server.

Option 1: display the page directly

  1. Open a blank page or tab in your favourite Web browser.
  2. Open a file manager on the current directory. Either navigate there in your file manager, or open a new file manager window from a terminal; for example:
    • on Windows, type: explorer.exe .
    • on Mac, type: open .
    • on Linux, type: thunar . (or substitute whatever your file manager is called).
  3. Drag the file index.html from the file manager window into the address bar of your browser window.

Option 2: run a small HTTP server

  1. Open a new terminal window.
  2. Use cd to navigate to the directory where you created index.html.
  3. Run the HTTP server: python3 -m http.server
  4. Type this URL into your Web browser address bar: http://localhost:8000/index.html

You can make changes to index.html using any text editor. Press the “reload” button (Control+r and/or F5) in the browser window to see the changes.

2. Add a heading to the page

Look at your Web page. It contains three nested elements that are delimited by starting and ending tags:

  1. The entire page which is enclosed in: <html> … </html>
  2. Inside that, the visible content of the page which is enclosed in: <body> … </body>
  3. Inside that, a single paragraph of text which is enclosed in: <p> … </p>

(The first line is not really part of the Web page. It is an SGML document type declaration which tells the browser exactly which set of rules it should follow when trying to understand the rest of the file's contents.)

To make a heading you surround some text with <h1> and </h1>. Since the heading should be visible, it must be inside the body element. Since the logical place for the heading would be before the paragraph of text, it should also come before the p element. 

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello, world</h1>
    <p>Welcome to your Computer-Wide Web!</p>
  </body>
</html>

Modify the file and refresh the page to see the heading.

The elements in a Web page form a “hierarchical” tree structure, just like the tree structure of folders and files in a file system. The root of the hierarchy is the html element. The body element is a child of the html element. In your original document the body element is the parent of the p element, and the p element is a child of the body element.

Elements can have any number of children. When you added the h1 element for the heading you put it inside the body element. The h1 is therefore a child of the body element and a sibling of (which means “has the same parent as”) the p element.

Child elements are ordered. Since you added the h1 before the p element in the document, it comes before the p element in the list of children belonging to the body.

(Try swapping the order of the h1 and p elements. The page changes in the obvious way, because you have changed the order of the child elements in the body element.)

3. Add some font weight and style changes

Anything that looks like <word> is called a start tag and it indicates the start of some element in the page. Anything that looks like </word> is called a end tag and it indicates the end of some element in the page. With only a few exceptions, the <word> and </word> tags must come in matching pairs. The corresponding element groups its content (everything inside it) together and affects how that content is interpreted or displayed.

For example, to make some text bold you can surround it with <b> and </b> tags. Make the word “your” bold by surrounding it with these tags and refreshing the page in the browser.

To make some text italic you can surround it with <i> and </i> tags. Make the words “Computer-Wide” italic by surrounding them with these tags and refreshing the page in the browser. 

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello, world</h1>
    <p>Welcome to <b>your</b> <i>Computer-Wide</i> Web!</p>
  </body>
</html>

Everything in a Web page must follow a strictly nested structure and must be nested without overlapping. For example, in your Web page you have this paragraph: 

<p>Welcome to <b>your</b> <i>Computer-Wide</i> Web!</p>

The </b> ends the b element, and the <i> starts the i element. Those two tags cannot be swapped, like this 

<p>Welcome to <b>your<i> </b>Computer-Wide</i> Web!</p>

because then the elements would overlap, and the single space between <i> and </b> would have to belong to two elements at the same time. Even though many browsers will do what you expect if you write HTML this way, the results are not guaranteed and you should try hard to avoid it.

4. Give your page a title

You have probably noticed that your browser tabs contain the name of the web site they are displaying. Each page can specify what it wants this title to be, along with many other kinds of meta data describing the page. This information is not part of the page content and so, logically, it should not be part of the body.

The html (root) element always has two children, the body and another element called the head. The head element contains information about the page (rather than the actual content of the page) and is always present (even if you omit its tags in your HTML code and never mention it at all). The children of the head contain the meta data for the page, e.g., its title.

To add the title to your page, begin by adding the missing <head> and </head> tags before the body. Then inside the head, add a title element that contains the text you want to appear in the browser tab for your page. 

<!DOCTYPE html>
<html>
  <head>
    <title>Hello page</title>
  </head>
  <body>
    <h1>Hello, world</h1>
    <p>Welcome to <b>your</b> <i>Computer-Wide</i> Web!</p>
  </body>
</html>
5. Add a horizontal rule at the end of your page

A hr element creates a horizontal rule. Since it separates paragraphs, it should be placed outside any paragraph p tag.

The hr element has no children, so there is no point having separate start <hr> and end </hr> tags. The end tag is incorporated into the start tag by placing the / just inside the end of the start tag, like this: <hr /> 

<!DOCTYPE html>
<html>
  <head>
    <title>Hello page</title>
  </head>
  <body>
    <h1>Hello, world</h1>
    <p>Welcome to <b>your</b> <i>Computer-Wide</i> Web!</p>
    <hr/>
  </body>
</html>
6. Add an image to your page

Since images can be embedded in text they should appear inside paragraph p elements.

Add another paragraph element after your h1 heading. You can put some text in it, if you want, but the real purpose is to put an image in it. The next step is therefore to find (or download) an image that you like and copy (or save) it in the same directory as your index.html file. Let's say it is called image.jpg.

To add an image to the page, create an img element to hold it. This img element is special in two ways:

  1. Just like the hr element, the img element does not have any children. The end tag can be included in the start tag by putting the “/” inside the start tag, like this: <img />
  2. The img needs to know where the image is stored. It gets this information through a src (source) attribute that is attached to the tag: <img src=“path-to-image”/>

From now on I will leave out most of the code, so here is just the part of the file near the img: 

<h1>Hello, world</h1>
<p>At least it is not a kitten: <img src="image.jpg"/></p>
<p>Welcome to <b>your<i> </b>Computer-Wide</i> Web!</p>

(Obviously, replace image.jpg with the actual name of your image.)

Is your image too large or too small? You can put more attributes inside the tag. The width attribute affects how wide the image will be when rendered. To make it occupy 20% of the width of the screen, set the width attribute to "20%". 

<h1>Hello, world</h1>
<p>At least it is not a kitten: <img src="image.jpg" width="20%"/></p>
<p>Welcome to <b>your<i> </b>Computer-Wide</i> Web!</p>

Note that the attribute values (the name of the image file, the quantity describing the width) should always be written inside quotation marks.

7. Add some lists to your document

HTML supports several kinds of list. An unordered list has items indicated by bullets. The ul element represents an unordered list. It has zero or more li list item child elements.

Lists are usually displayed between paragraphs and so should appear outside p paragraph elements. 

<h1>Hello, world</h1>
<ul>
  <li>use <tt>head</tt> to hold the meta data</li>
  <li>use <tt>body</tt> to hold the content</li>
</ul>

(Note the tt elements, within the li list items, that cause their content to be rendered in teletype [fixed-width] font.)

An ol ordered list has numbered items. Its children are the same li elements, but instead of bullets they are indicated by numbers. Try changing <ul>…</ul> to <ol>…</ol> and check the effect.

8. Add a table

A table element contains zero or more table row elements. A table row tr element contains zero or more table data elements. A table data td element contains text, images, or any other content that can appear in a paragraph. 

<h1>Hello, world</h1>
<table>
  <tr> <td><tt>ul  </tt></td> <td>for an unordered (bullet) list </td> </tr>
  <tr> <td><tt>ol  </tt></td> <td>for an ordered (numbered) list </td> </tr>
  <tr> <td><tt>li  </tt></td> <td>for each item in either list   </td> </tr>
  <tr> <td><tt>html</tt></td> <td>for the entire Web page        </td> </tr>
</table>
9. Add a hyperlink to your page

Hyperlinks are represented by anchor a elements. The target URL is given as an href (hypertext reference) attribute to the start tag. The children of the a element are the text, images, or other content that will be the “clickable link” visible on the page. 

<h1>Hello, world</h1>
<p>Let's go <a href="http://kuas.org">somewhere else</a>!</p>
10. Add some style to your page to make things look different

Every element has a default “look and feel”. The defaults can be changed by specifying style attributes for elements. Style information is placed inside a style element, and style elements can be placed anywhere in the document (either the head or the body).

A simple style might place a border around our table. 

<head>
  <title>Hello page</title>
  <style>
    table {
      border: 1px solid red;
    }
  </style>
</head>

The style element contains selectors and associated declarations. In the example above, the selector table refers to every table element in the document.

Following the selector, enclosed in curly braces, are a set of declarations that apply to the selector. Each declaration has the form: property : value ;

In this example the table selector has only one property affected by style. The border property controls how the outside border of the table elements will be drawn. This example sets the border of all tables to be one pixel wide (1px) drawn as a solid line in the colour red.

11. Add some dynamic behaviour using JavaScript

Let's add a button to the page and make it do something fun when it is pressed.

A button element works a bit like an anchor (a) element. Since buttons can appear anywhere in a paragraph, they should appear inside p elements. The children of the button element specify the content of the button's label. 

<h1>Hello, world</h1>
<p>Here is a strange button!
  <button>
    Click Me!
  </button>
</p>

The action that occurs when the button is clicked can be affected by attributes attached to the button element. The onclick attribute contains JavaScript code that will run when the button is clicked. Let's use it to change the colour of the heading.

The first thing we have to add is an identifier that will give a unique name to the heading that we want to modify. To do that, add an id attribute to the h1 element. The value of the id is the name by which we can look up the heading. 

<h1 id='hello'>Hello, world</h1>

After adding this attribute we can use a JavaScript function getElementById() to find the heading by its identifier. Once found, the same JavaScript code can set the heading's style.color attribute to change its colour. 

<h1 id='hello'>Hello, world</h1>
<p>Here is a strange button!
  <button onclick="document.getElementById('hello').style.color='red'">
    Click Me!
  </button>
</p>

Note that, in JavaScript, strings can be surrounded by "double quotes" or 'single quotes'. As shown in the above example, this is convenient when, e.g., JavaScript strings have to be written inside attribute values (which also must be strings).

Finally, to truly make the button strange, try this: 

<button id='clicky' onclick="document.getElementById('clicky').remove()">
  Click Me!
</button>
Summary

Your final index.html should look something like this. 

<!DOCTYPE html>
<html>
  <head>
    <title>Hello page</title>
    <style>
      table { border: 1px solid red; }
    </style>
  </head>
  <body>
    <h1 id='hello'>Hello, world</h1>
    <p>
      Here is a strange button!
      <button onclick="document.getElementById('hello').style.color='red'">
        Click Me!
      </button>
    </p>
    <p>
      Let's go <a href="http://kuas.org">somewhere else</a>!
    </p>
    <table>
      <tr> <td><tt>ul  </tt></td> <td>for an unordered (bullet) list</td> </tr>
      <tr> <td><tt>ol  </tt></td> <td>for an ordered (numbered) list</td> </tr>
      <tr> <td><tt>li  </tt></td> <td>for each item in either list  </td> </tr>
      <tr> <td><tt>html</tt></td> <td>for the entire Web page       </td> </tr>
    </table>
    <ul>
      <li>use <tt>head</tt> to hold the meta data</li>
      <li>use <tt>body</tt> to hold the content</li>
    </ul>
    <p>
      At least it is not a kitten: <img src="image.jpg" width="20%"/>
    </p>
    <p>
      Welcome to <b>your<i> </b>Computer-Wide</i> Web!
    </p>
    <hr/>
  </body>
</html>

Further information

We have only scratched the surface of HTML, CSS, and JS. (Each one of them could be an entire course all by itself.) If you want to learn more then there is a huge amount of information online about HTML, CSS, and JavaScript. One very good place to start is: https://www.w3schools.com/

Last modified: 2020/12/08 12:53