Back

HTML

Introduction
HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are two of the main tools for designing and and displaying websites and web pages. If they are combined with a client-side processing language like JavaScript to add dynamic and interactive content, then websites can be built that are clear, memorable, useful, informative, accessible, organised and maintainable. This section deals with HTML.

HTML (HyperText Markup Language)
A typical web page might contain text, pictures, animation, movies and sound and collectively, they are known as multimedia. HTML is a computer language whose purpose is to create multimedia pages on a computer. The first page of a web site is called the 'homepage'. Its file name is usually always either index.html or index.htm and this is the special file a server looks for first when you request a web page. HTML is a mark-up language. It is written as a script - a sequence of instructions called tags that tell a web browser how to display something. It is not a programming language as such - it doesn't use programming constructs such as SEQUENCE, SELECTION and ITERATION. However, it is possible to 'embed' a program written in e.g. JavaScript into an HTML page to add some interactive capabilities or add dynamic data.

Many but not all HTML tags come in pairs. You can view tags and pairs of tags by viewing the HTML code of this page. For example, in Explorer, go to VIEW - SOURCE. The tags are in angled brackets. A web page has a HEAD and a BODY. The information held in the HEAD isn't displayed. It contains metadata, or the words a search engine will use when indexing a page. The BODY holds both the information to be displayed and the tags needed by web browsers to decide how to format the information. Carriage returns and extra spaces are ignored in web browsers. If you need to create spaces between words, or to layout text in a certain way, there are many tricks around. For example, you can use 'invisible' tables or white space pictures to layout work, or space work out using the non breaking space code.

Hotlinks
You can access web pages by typing in a URL in a web browser. However, you can also access pages by using hotlinks (also known as hyperlinks). This is simply a technique used in HTML that allows a reader on one web site to quickly access other pages in the same web site, or on other web sites, by clicking on a word or picture that has been set up for that purpose. It saves the user having to type in long URL links, which is time-consuming and prone to mistakes. Somebody who designs a large web site will typically split up their site into a number of pages. There will be the ‘homepage’, which is the main, introductory page and then there will be many other pages, each with some logically grouped information on them. Connections between each page in a web site will then be achieved through the use of hotlinks. 

What do OCR students need to know for both the AS Level and the A Level qualification?
According to the OCR specifications for the AS and A level qualifications, OCR students are expected to have an awareness of the following HTML tags, and any other tags used in an examination question will be introduced in the question itself.

<html>
<link> to link to a CSS file
<head>
<title>
<body>
<h1> <h2> <h3>
<img> including the src, alt, height and width attributes.
<a> including the href attribute.
<div>
<form>
<input> where the input is a textbox (i.e. has the attribute type="text" and another attribute name
to identify it) or a submit button (i.e. has the attribute type="submit")
<p>
<li>
<ol>
<ul>
<script>
Any other elements used will be introduced in the question.

NotepadHTML tutorials
Because HTML has been around for so long now, there are thousands of excellent tutorials. The trick is to find one that is both up-to-date with the latest standards and in a style of delivery that suits you. At the time of writing, the latest version of HTML is HTML 5. The basic core features of HTML have remained unchanged. You can easily write HTML using any text editor e.g. Notepad in Windows and any web broswer. There are also HTML editors, which do the same job as text editors but have additional features that make writing and testing code that little bit easier. Don't use any word processors, as they make use of hidden codes in pages that can make the production of HTML very messy and problematic. You can find a list of HTML editors here:

List of HTML editors 

A personal favourite is the excellent and free Notepad++.

A quick search for HTML tutorials, HTML beginner or Learning HTML will reveal many sets of step-by-step lessons for you to explore. Here are some favourites, which I have used in the past and can recommend:

A set of video lessons
An excellent and easy to follow tutorial by w3schools.com
Lissa explains html here
Echoecho.com
Code Academy
YouTube tutorials 

Back