Create an animated Otago Polytechnic timetable with HTML and CSS

Welcome to my basic HTML/CSS tutorial. After this tutorial you will be able to create basic HTML 5 documents with tables and style them with CSS 3 using a basic notepad editor. In my example I have used the Otago Polytechnic colour scheme.

Objectives: Create a table with HyperText Markup Language (HTML 5) Create a Cascading Style Sheet (CSS 3) Link the HTML page with the CSS Add the Otago Polytechnic colour scheme to your CSS Create a hover over effect in your CSS to reveal further class information

In this tutorial I will use Notepad++ because it is simple, color-coded for HTML & CSS and it is free. If you do not already have Notepad++ I recommended you download it from here: http://notepad-plus-plus.org/

Step One: Creating an HTML documentLaunch Notepad++, notepad++ will automatically create a new document for you to start working on.Copy this HTML skeleton frame this is how an HTML document begins. - To inform the browser that this is an HTML document.An opening tag and a closing tag . Everything related to this document belongs in-between these tags.Details about the HTML document can be found within the tags.All of the contents of the page can be found within the tags.

Step Two: Saving your document as an HTML documentOn the notepad++ editor, click on File in the top left corner and then click on Save As...This window will appear:Save in: Location on your PC where the file will reside.

File name: The name of your HTML document.

Save as type: Makes your document recognise as an HTML document.

First we will specify where on your PC to save the file, select the Save in: drop down menu and choose an appropriate location. We need to give this HTML document a suitable name, for this example we will call this page myPolytechnicTimetable. Before we save this page, click on the drop down menu labelled Save as type: Locate and click on Hyper Text Markup Language file Then click on Save

Great work! We have created a basic HTML page. We can launch our page although it will display a blank page.

Step Three: Creating a tableTo represent a timetable we can use an HTML element called a table. An HTML table consists of rows and columns. Here is an example of a visual representation of a table: Table header

Table row

Table data

We define a table by inserting a new line after the opening body tag and type in our opening table tag. We follow up by typing in a closing table tag and we have now successfully defined a table:

Next we will give the table some rows, columns and data.

Step Four: Populating the tableHere in this example we start by inserting a new table row with proceeded by six table headers, inside these table headers are the contents that will be displayed in our table. Our first column is the label Day as located on line 8. Every table header after Day will represent the class time slots from 8-10, 10-12, 12-1, 1-3 and 3-5, we close the table row tag and are now ready to define our next table row.

To fit the next image on the page I have split the single page into three images, the line count is listed to the left of each page. Each row after our first row represents a day of the school week with the first cell of each day being a label for each day of the week, we create a table data tag set for every time slot in the week:Page OnePage TwoPage Three

Step Five: Enter your class scheduleLocate the appropriate time slots (table cells) and enter your class timetable schedule as I have here:

Great work you have successfully created a timetable with an HTML table! When you open your HTML document with a browser you may find that your timetable looks incomplete:

Your table needs to be styled; this is where I introduce to you Cascading Style Sheets or CSS3 for short. Style sheets can be applied to HTML documents either internally with the HTML code or as an external style sheet. Internal style sheets live inside the head tags of an HTML document. We will use an external style sheet; external style sheets are contained within their own separate file and have the .css file extension type.

Step Six: Cascading Style SheetA cascading style sheet (CSS) is used to instruct to the internet browser how to display the elements found within an HTML document. Some examples of elements are tables, header rows of a table and paragraphs. We will now create a CSS sheet to turn our boring table into a more meaningful display of our Otago Polytechnic timetables.On Notepad++ click on File and then New and we have created a new document to work with. This document needs a meaningful name and the CSS extension as I have here:

We now have a blank CSS. For this tutorial we will save the CSS file in the same location as our HTML document, this helps for easier referencing and keeping track of the two files.

In the HTML document we instruct the document that it will be styled with our specified style sheet. A link to style sheet is defined in the head of the HTML document; note the file location is defined by the phrase href=OPTimetableStyle.css, replace the filename with your CSS file name.