Web technologies: HTML

Introduction

You are looking at a web page. But have you ever asked yourself,

What is a web page?

In short, it is a HTML formatted text document, stored on a web server and accessed using the HTTP protocol.

For a proper understanding of the above , you will need to understand the concept of client-server, the role of protocols in communication, and how HTML(HyperText Markup Language) is complemented by its related technologies CSS and Javascript.

All of this is covered in typical Level 3 qualifications. In particular, OCR A Level Computer Science requires you to know all of the following HTML tags:

<html>
<link>
<head>
<title>
<body>
<h1> <h2> <h3>

<img> including src, alt, height and width attributes
<a> including the href attribute

<div>
<form>
<input>

<p>
<ol>
<ul>
<li>

<script>

A HTML tag is something that is used to distinguish the content of a HTML document from commands that modify how that content is treated by the web browser. Tags usually (but not always) come in pairs, an opening tag, and a closing tag. For for a large heading, the tag h1 is used like so:

<h1>Welcome to this website</h1>

The code above will display Welcome to this website in a large font like the heading at the top of this page.

HTML documents are made up of HTML elements. A HTML element comprises the opening and closing tags, the content, and any additional attributes needed, for example:

<img src = "weblogo.jpg" height = "200" width = "200"/>

Note <img> is one of the few HTML tags that does not have a closing tag, and instead a / precedes the > character at the end of the element. Here an attribute src, gives a location to load an image from, and attributes for height and width set the size of the image on the page.

Creating a web page

Creating a web page is a simple matter of entering the content into a text editor, saving it, and then viewing the page in a web browser. Every operating system has a text editor available, (e.g. notepad on Windows, or vim on Linux) but to make things easier it is worth downloading and installing a text editor that can provide features such as syntax highlighting and code completion of HTML. Some examples for you to download are:

If you cannot download and install programs on your computer, use notepad or any other text editor that is available and be careful to save your HTML code with a filename that ends in an extension of .htm or .html (this can be particularly annoying in notepad, as when saving and loading files you MUST drop down the save as type drop down box and specify “All Files”)

A saved HTML file can be copied to a web server and then viewed in a web browser by typing the address of the file into the browser address bar. If it is correctly saved in a folder on your own computer with a .html extension, you can simply double click on the file to open it in a web browser. In this way you can write HTML, test it and revise it as needed.

Activity 1

Read the tutorial here, then use a text editor to create a page as follows:

  1. Create two paragraphs of text
  2. A heading
  3. An unordered list
  4. An ordered list
  5. Add an image (plus an alt attribute)
  6. Add a hyperlink to an external site
  7. Add a hyperlink to a second page

Activity 2

Now create a completely new page, and using the tutorial here, do the following:

  • Add a form
  • Ensure it has at least 3 fields
  • Ensure it has a submit button
  • Ensure it has a reset button

Knowledge check

  • What is a tag?
  • What is an attribute?
  • What is an element?
  • What is the structure of a HTML document?
  • What tags go inside a HTML form?
  • How do we process the contents of a form?

User codepen to test your recall of today’s lesson by creating a simple page.

Next lesson: CSS