Developed and taught by Mel Leggatt
This week’s session is a departure from the usual format. We start putting all the theory and context we’ve amassed so far into practice and take you through the practicalities of setting up your first web page using your MCS account.
The practical is to continue to work on your first pages and to begin to create the bare bones of what will become your first website and therefore also your first project.
Aims during the session
You’ll be logging into your MCS account and editing the default index.html file in your public_html directory. This directory is unique in your MCS filespace as it is not private to you, in fact its contents are world readable. Every MCS account is given this directory with these permissions when it’s created so that you can host your own Cambridge website from your MCS account if you wish. We’ll experiment with using Dreamweaver in ‘split’ view so that you can see the contents of the file in both graphical and code mode and the changes in real time.
We’ll also be showing you how to embed images from your Flickr or Picasa account and videos from YouTube.
This is the technology you’ll be using to complete your first project. We’ll then move on to using the WordPress Content Management System for the rest of the course. So why change? Well, we think the skills you’ll acquire through having to work with Dreamweaver and at least viewing the code that underpins your work will serve you well in the future. At the very least you’ll have a good deal more confidence in working with more point-and-click systems such as WordPress.
A brief description of the anatomy of an HTML document
We’re all aware of the various files that we access online via a web browser that end .html, but what is a .html file? If you’re assuming that .html is just another file extension to identify a file type like a .docx, .xls or .odt you’re right. Web servers and their clients (our devices whether they’re PCs, Macs, tablets or smartphones by means of a browser) both know what to do with .html files and how they should be structured. Web servers and browsers understand other data formats too, but we’ll come to those later in the course. For now we’re concerning ourselves solely with HTML files as the basic building blocks of the Web.
HTML stands for Hyper Text Markup Language. Wikipedia’s entry on this markup language goes into more detail about its evolution and form, but suffice it to say for now this file format saw the Web through its earliest stages of development, and, in combination with Cascading Style Sheets (of which more in a moment), beyond. What follows is a very cut-down, simplified account of the anatomy of an HTML file, but it covers the points with which are concerned at this point.
Basic HTML files were typically fit-for-purpose in the early days of the Web. They allowed you to place textual and image content into a website following the necessary standards without too much difficulty. Each file contained everything the server and client’s browser needed to know in order to distribute and view it – all the content, all the metadata and all the style information. That’s a lot of information in a single file, so how did it work?
HTML files are divided up into two main parts, the header and body sections. The header contains all the information about the file, so, for example, what character encoding it uses and the descriptive metadata and keywords used to describe the content. The body section contains the actual content itself. So how are the different elements, or sections, in an HTML file defined? Everything in an HTML file is tagged. What follows is perhaps the most basic HTML file it’s possible to have.
<!DOCTYPE html> <html> <body> <p>Hello world.</p> </body> </html>
This page would simply render as a single line of
Whilst there are many tags, some of which take a different form, this small selection serves to illustrate the basic principle of tagging. Every tag must open and close with, for example, <p> and </p> (paragraph tags) with the ‘/’ serving to close it. Some tags are self-closing, but for now, if you’ve grasped this basic premise you’ve understood enough. Further, if you’ve started to realise that the key to understanding how web pages work has as much to do with syntax and grammar as programming you’d be right, thus proving again that there is no reason for students of and specialists in languages to be daunted by web development.
Cascading Style Sheets
Clearly, when you had only a few files to share and your content was pretty basic – at least in terms of the technology needed to upload it rather than its intellectual worth – having everything built into one file wasn’t a problem and the technology scaled. Things started to change as more and more content came online and the number of sites and the number of pages within them grew exponentially. Making major or minor tweaks to tens or hundreds of files at a time became cumbersome to say the least. Something was going to have to be done.
And the result was the development of the Cascading Style Sheet (CSS). Cascading Style Sheets take all the design elements out of the HTML file that is only then required to reference the stylesheet in its head section using code something similar to this
<link rel="stylesheet" href="stylesheets/full-stylesheet.css" /> <link rel="stylesheet" href="stylesheets/styleguide.css" />
At last, a change to a single file could radically alter the look and feel of a whole website. It was revolutionary. Luckily for us we don’t even have to design our own CSS files from scratch as lots of developers have made their designs freely available for our use online. Take a look at some of the CSS sites in this week’s scoop for some useful examples.
This all may sound a little theoretical at the moment, so let’s have a real go.
Visit the World Wide Web Consortium’s Core Styles page. Follow the link to ‘pick your favourite style sheet’ and then switch between the different options. Hint – choosing the Midnight style will have the greatest impact. Hopefully now you’ll have a fuller appreciation of the power of CSS. So now have a go with your own index.html
Copy this code to somewhere between your <head> and </head> tags and then change the name of the core style you’re using, so, for example, swap Modernist for Chocolate.
<link rel="stylesheet" href="http://www.w3.org/StyleSheets/Core/Modernist" type="text/css">
You can use remote style sheets such as these that are referenced directly from the W3C.org website, or chose a stylesheet to download from a free repository, examples of which you can find in this week’s scoop. Best practice in web development suggests that you setup separate directories for e.g. your style sheets and images, so within your public_html folder you should setup ‘style’ and ‘images’ (though it’s most likely that you’ll use images embedded from your Flickr (or other photo sharing) site).
Another useful way of witnessing the power of CSS is to visit the CSS Zen Garden. Here it’s simple to swap between different styles through the side menus – the content remains the same. Even more usefully, it’s possible to download both the CSS and HTML files so that you can absolutely reproduce the look of your chosen design and then merely change the content.
Using others’ templates
Even more usefully, sites like html5templates.com let you download their templates so that you can use their design, menu systems and CSS. Perfect! Then all you have to do is change the menu headings and images, tweak things to your liking and then use the Save As option in Dreamweaver to duplicate your initial homepage to create your other pages and therefore your first project. Some designs are chargeable, but there are lots of excellent freely available ones to chose from.
Photo and video hosting
Flickr, Google’s Picassa and YouTube (amongst others) all allow you to host your photos and videos online. If you haven’t already setup a Flickr or Picassa account that should be the next thing on your CHUCOL TODO list. For Flickr the National Museums Scotland provide an excellent guide on how to get setup on the system, so we won’t duplicate their excellent efforts.