SICT

WEB700

Web Programming Foundations

Schedule Notes Resources Graded Work MyApps Instructions Vercel Guide Code examples

WEB700 Week 6 Notes

HTML

HTML is the HyperText Markup Language. It allows us to write content in a document, just as we would in a file created by a word processor. Unlike a regular text file, it also includes structural and layout information about this content. We literally mark up the text of our document with extra information.

When talking about HTML’s markup, we’ll often refer to the following terms:

HTML Document

First HTML page ever created was built by Tim Berners-Lee on August 6, 1991.

Since then, the web has gone through many versions:

Basic HTML5 Document

Here’s a basic HTML5 web page:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My Web Page</title>
    </head>

    <body>
        <!-- This is a comment -->
        <h1>Hello World!</h1>
    </body>
</html>

Let’s break this down and look at what’s happening.

  1. <!doctype html> tells the browser what kind of document this is, and how to interpret/render it
  2. <html> the root element of our document: all other elements will be included with <html>...</html>.
  3. <head> provides various information about the document as opposed to providing its content. This is metadata that describes the document.
  4. <meta> an example of some piece of metadata, in this case defining the character set used in the document: utf-8
  5. <title> an example of a specific (named) metadata element: the document’s title, shown in the browser’s title bar. There are a number of specific named metadata elements like this.
  6. <body> the content of the document is contained within <body>...</body>.
  7. <!-- ... --> a comment, similar to using /* ... */ in C or JavaScript
  8. <h1> a heading element (there are headings 1 through 6), which is a title or sub-title in a document.

Now let’s try creating and loading this file in our browser:

During the last couple of classes we learned how to create a simple web server using Node.js with the Express.js module. We will be using this code once again to create a local web server, which will be responsible for returning requests for our HTML document on the default route, ie “/”.

NOTE: Try to familiarize yourself with these steps, as we will be doing this over and over in class, every time we wish to create a new web server. A more detailed guide can be found as a part of the week 4 notes (“Building a simple web server using Node.js with Express.js”) as well as within the Vercel Guide.

  1. Make a directory on your computer called test-server
  2. Open Visual Studio Code and choose File > Open to open your newly created test-server folder
  3. Create a new file called server.js
  4. Open the Integrated terminal useing the keyboard shortcut (ctrl + `) or select “View” -> “integrated terminal” from the top menu.
  5. Run the npm init command to generate your package.json file (you can choose all of the defaults)
  6. Run the command npm install express --save

  7. Enter the following code for your server.js file

     var HTTP_PORT = process.env.PORT || 8080;
 var path = require("path");
 var express = require("express");
 var app = express();

 // setup a 'route' to listen on the default url path
 app.get("/", (req, res) => {
     res.sendFile(path.join(__dirname,"/views/hello.html"));
 });

 // setup http server to listen on HTTP_PORT
 app.listen(HTTP_PORT, function(){ console.log('server listening on: ' + HTTP_PORT )});
  8. Create a new folder in test-server named views
  9. Within the views folder, create a file called hello.html
  10. Open the newly created hello.html file and paste the html code from above and save the file
  11. Go back to the Integrated terminal and type the command node server.js. You should see the message: server listening on: 8080
  12. Open your web browser (Chrome, Firefox, etc) and enter http://localhost:8080 in the URL bar
  13. Make sure you can see a new page with Hello World! in black text.

Now let’s make a change to our document:

  1. Go back to your editor and change the hello.html file so that instead of Hello World! you have This is my web page.
  2. Save your hello.html file.
  3. Go back to your browser and hit the Refresh button.
  4. Make sure your web page now says This is my web page.

Every time we update anything in our web page, we have to refresh the web page in our browser. The web server will serve the most recent version of the file on disk when it is requested.


Common HTML Elements

There are dozens of HTML elements you’ll learn and use, but the following is a good set to get you started.

Metadata

Information about the document vs. the document’s content goes in various metadata elements:

Content Sections

These are organizational blocks within the document, helping give structure to the content and provide clues to browsers, screen readers, and other software about how to present the content:

Text Content

We organize content into “boxes,” some of which have unique layout characteristics.

Inline Text

We also use elements within larger text content to indicate that certain words or phrases are to be shown differently:

Multimedia

In addition to text, HTML5 also defines a number of rich media elements:

Scripting

We create dynamic web content and applications through the use of scripting:


HTML Element Types: Block vs. Inline

Visual HTML elements are categorized into one of two groups:

  1. Block-level elements: create a “block” of content in a page, with an empty line before and after them. Block elements fill the width of their parent element. Block elements can contain other block elements, inline elements, or text.
  2. Inline elements: creates “inline” content, which is part of the containing block. Inline elements can contain other inline elements or text.

Consider the following HTML content:

<body>
    <p>The <em>cow</em> jumped over the <b>moon</b>.</p>
</body>

Here we have a <p> paragraph element. Because it is a block-level element, this paragraph will fill its container (in this case the <body> element). It will also have empty space added above and below it.

Within this block, we also encounter a number of other inline elements. First, we have simple text. However, we also see the <em> and <b> elements being used. These will affect their content, but not create a new block; rather, they will continue to flow inline in their container (the <p> element).


Empty Elements

Many of the elements we’ve seen so far begin with an opening tag, and end with a closing tag: <body></body>. However, not all elements need to be closed. Some elements have no content, and therefore don’t need to have a closing tag. We call these empty elements.

An example is the <br> line break element. We use a <br> when we want to tell the browser to insert a newline (similar to using \n in C):

<p>Knock, Knock<br>Who's there?</p>

Other examples of empty elements include <hr> (for a horizontal line), <meta> for including metadata in the <head>, and a dozen others.


Grouping Elements

Often we need to group elements in our page together. We have a number of pre-defined element container options for how to achieve this, depending on what kind of content we are creating, and where it is in the document:

Sometimes there is no appropriate semantic container element for our content, and we need something more generic. In such cases we have two options:

<div>
    <p>This is an example of a using a div element. It also includes this <span><em>span</em> element</span>.</p>
    <p>Later we'll use a div or span like this to target content in our page with JavaScript or CSS styles.<p> 
</div>


Tables

Sometimes our data is tabular in nature, and we need to present it in a grid. A number of elements are used to create them:

We define rows and columns of data within the above using the following:

We can use the rowspan and colspan attributes to extend table elements beyond their usual bounds, for example: have an element span two columns (colspan="2") or have a heading span 3 rows (rowspan="3").

<table>
    <caption>Order Information</caption>

    <thead>
        <tr>
            <th>Quantity</th>
            <th>Colour</th>
            <th>Price (CAD)</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>Red</td>
            <td>$5.60</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Blue</td>
            <td>$3.00</td>
        </tr>
        <tr>
            <td>8</td>
            <td>Blue</td>
            <td>$1.50</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th colspan="2">Total</th>
            <th>$26.60</th>
        </tr>
    </tfoot>
</table>


Multimedia: <img>, <audio>, <video>

HTML5 has built in support for including images, videos, and audio along with text. We specify the media source we want to use, and also how to present it to the user via different elements and attributes

<!-- External image URL, use full width of browser window -->
<img src="https://images.unsplash.com/photo-1502720433255-614171a1835e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=344dfca9dc8cb137a4b1c2c711752bc5">

<!-- Local file cat.jpg, limit to 400 pixels wide -->
<img src="cat.jpg" alt="Picture of a cat" width="400">

HTML5 has also recently added the <picture> element , to allow for an optimal image type to be chosen from amongst a list of several options.

We can also include sounds, music, or other audio:

<!-- No controls, music will just auto-play in the background. Only MP3 source provided -->
<audio src="https://ia800607.us.archive.org/15/items/music_for_programming/music_for_programming_1-datassette.mp3" autoplay></audio>

<!-- Audio with controls showing, multiple formats available -->
<audio controls>
    <source src="song.mp3" type="audio/mp3">
    <source src="song.ogg" type="audio/ogg">
    <p>Sorry, your browser doesn't support HTML5 audio. Here is a <a href="song.mp3">link to the audio</a> instead</p>.
</audio>

Including video is very similar to audio:

<!-- External Video File, MP4 file format, show controls -->
<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls></video>

<!-- Local video file in various formats, show with controls -->
<video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <source src="video.webm" type="video/webm">
    <p>Sorry, your browser doesn't support HTML5 video</p>
</video>

NOTE: the <audio> and <video> elements must use source URLs that point to actual audio or video files and not to a YouTube URL or some other source that is actually an HTML page.


Including Scripts

JavaScript is an extremely versatile language. So far, we have been using it in the context of creating a web server using Node.js and the Express.js framework. However, it can also be executed within the context of a web browser (Chrome, Firefox, etc.). While we will not be focusing on writing client-side JavaScript in this course, it is still valuable to know how to include scripts in your HTML code. For example, the JavaScript code included with the Bootstrap Framework.

External Scripts Linked via URL

To reference an “external script” within your HTML code, the following <script> code can be used. This JavaScript file can be located either on your working server, or somewhere on the web (accessible via it’s full URL).

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Web Page with Script</title>
    </head>

    <body>
        <script src="script.js"></script>
    </body>
</html>

Notice how we include a src="script.js" attribute. Much like the <img> element, a <script> can include a src URL to load at runtime. The browser will begin by loading your .html file, and when it encounters the <script src="script.js"> element, it will begin to download script.js from the web server, and then run the program it contains.

Using this syntax, we can include as many scripts as we need. The scripts we include can be:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Web Page with Scripts</title>
    </head>

    <body>
        <script src="https://scripts.com/some/other/external/script/file.js"></script>
        <script src="local-script.js"></script>
        <script>
            // Use functions and Objects defined in the previous two files
            doSomethingAmazing();
        </script>
    </body>
</html>


Validating HTML

It’s clear that learning to write proper and correct HTML is going to take practice. There are lots of elements to get used to, and learn to use in conjunction. Also each has various attributes that have to be taken into account.

Browsers are fairly liberal in what they will accept in the way of HTML. Even if an HTML file isn’t 100% perfect, a browser can often still render something. That said, it’s best if we do our best to provide valid HTML.

In order to make sure that your HTML is valid, you can use an HTML Validator. There are a few available online:

Both allow you to enter a URL to an existing web page, or enter HTML directly in a text field. They will then attempt to parse your HTML and report back on any errors or warnings, for example: an element missing a closing tag.