But I know few people who disagree that Wikipedia is a fantastic source of knowledge and a platform from which to explore a subject in detail. I am also conscious of how many last-minute homework assignments that owe their grades to Wikipedia and such, I would like to share an easy way bypass the blackout; although I urge you not to use it without necessity, Wikipedia did this for a reason. 

The blackout is achieved by way of a JavaScript snippet — there is no need here to go into what that means — but to get around it, all you need to do is disable JavaScript!

Exactly how you do that varies from browser to browser and I don’t have the time to give instructions on how to do it in every browser. Simple google “Disable JavaScript in [BROWSER]” and substitute [BROWSER] with the name of your browser. 

If you use Safari, you can do it by enabling the “Develop” menu item by going into Preferences, Advanced, and clicking the tickbox to show the develop menu. From there, go to the develop menu and click “Disable JavaScript”.  

Javascript is something you’ll want to have enabled normally, so don’t forget to re-enable it afterwards.

Structure

The web isn’t just a collection of plain, one-column pages like we built last time; it has layout and structure. To do this, we need to start dividing your content.

We do this by putting some of your existing content into containers; you write an opening tag before the first bit of content in the group and a closing tag after the last bit. There a several of these containers and all have a slightly different part to play:

• <div> (division) a generic container for any content.
• <section> a generic container for related content.
• <nav> (navigation) a list of some of links to other pages on the site—you know what navigation is.
• <article> a specialised container for a news article, story or other self-contained piece of work.
• <header> a specialised container for the kind of information that goes in a header area—be that of the whole page or a single article.
• <footer> just like a header, it is a specialised container for the kind of content you need, but want to put out of the way in a footer. This can be for the whole page or a single article.
• <aside> this is a specialised container for information that is related to that of the main article but isn't crucial to understanding it.

Picture this…

You have the page title, below it a tagline and below that a list of other pages on the site. Then you have two articles, each with a title, the article itself, a few sentences about the author (you!) and some other information such as the date it was published, any references and copyright.

Here it is:

Around the page title and the tagline we’ll put a <header> because this is the main heading of the page and around the list of other pages (the navigation), we'll put a <nav>.

Then you open a <section> and then an <article>, don’t close either of them just yet. Then put a <header> around the article’s title and a <footer> around the author information, copyright and publishing date.

Now close the <article> and open another one; repeat what you just did for the <header> and <footer> of the last article. Now close the <section>.

This is what your site should look like now; the boxes are just to illustrate, you wont see them

ARIA roles

Now that you have broken down your content into blocks, you might want to tell the computer what each of these blocks is for. These roles are important for two reasons: one, because not everybody views the Internet like we do—if someone is having the page read out for them by a screen-reader they probably don't want to hear the name of the site and tagline on every page—they want to get straight to the actual content. And two, because we can use these roles to specify which object we want to style—we’ll get onto that next time.

Just like we used alt="" to describe an image for those who can’t see it we use role="" to describe what each part of your page does. Put this in a structural tag like those we just used. For example <header role="banner">.

• banner The primary branding area or masthead of the page—this can go on a <header> that is the heading of the page, but not the heading of an article.
• main The main content on the site, in our example above it would go on the <section> because all of the content is inside it.
• If you use an <aside> then you should probably give it a role="complementary" and if use a <footer> then you should give it a role="contentinfo". Likewise, the same applies for <nav> and role="navigation".

This may feel like doing things twice but you’ll thank me for it next time.

Okay… so I lied to you. That wasn't nearly as fun as I made it out to be last week—but you wouldn’t have read it if I said it was boring. If you compare your page before and after this lesson in a browser then it shouldn't have made any difference; what you can't see is we are now ready to start adding some style to your web page—but that is for next week! =P

That said, you shouldn’t learn techniques that are already at least a decade out of date. For that reason, I hope I’ll be able to teach you some of the basics of how to start making websites the modern way.

This will be an ongoing series, starting today with how to turn a page of text into something a computer can make sense of and gradually building up your skills until you can make a whole website using modern techniques.

Start with your content

It is very tempting to dive straight into designing your site but spare a moment to think about what matters most; it’s your content.

Go away and write your content first; at the end of the day, most of our marks will come from what we write, not from how the page looks and in the real world no one will visit your site in the first place if it doesn't have decent content.

See this? It’s actually an extract from some of our lecture notes. It’s not a webpage, just a good-ol’-fashioned page. To turn this into a webpage we need to ‘mark it up’—that is just a fancy way of saying we need to tell the computer what to do with our text. You can do this in Word, TextEdit, NotePad or the HTML editor in DreamWeaver, it doesn’t matter.

Tell the computer what to do

Everywhere you have a paragraph, write <p> before it and </p> after. This is known as ‘wrapping’ the text in a ‘tag’; in this case you are wrapping a paragraph in a <p> tag. Once you open a tag with a <p> you must close it with a </p>.

Lists may look a little more complicated but really they’re not. If you think about it, there are two types of lists, those that have a specific order to them: olivine, pyroxene, amphibole; and lists that are just in the order you think of them: sandstone, limestone, mudstone.

Lists with an order are marked up with an <ol> (ordered list) and lists with no order are done with <ul> (unordered list). You can think of <ol>s as numbered lists and <ul>s as bulleted lists.

The individual points in your lists, be they ordered or unordered, are all wrapped in an <li> for list item.

There are different types of headings, major headings that signal the start of a piece of work and smaller headings that denote different sections in the same piece of work.

Wrap your major heading in an <h1> and your smaller heading in an <h2>. Headings that divide up an <h2> can be marked up with an <h3> and headings in an <h3> can be marked up in an <h4> etc. all the way to <h6>.

Links and Images

That was pretty easy, all things considered. Now we want to put a link in.

The technical name for links are hyperlinks. They are written with an <a> tag (the a stands for anchor… don’t ask). Between the <a> and the </a> you write what you want the link to say, for example <a>download the supporting documentation</a>. That is all well and good but unless your computer is telepathic it doesn’t know where to take you; so you write href="" inside the opening <a> tag to make this: <a href="">. Inside the speech marks you put the web address that you want the link to take you to.

Now for images. This is actually quite easy but is where HTML (yes, you’re writing HTML) gets a bit abstract. The code goes something like this: <img src="img/image.jpg" alt="This is a picture">.

Let’s dissect that a moment: we have an <img> tag and inside it we have two other things. src means source, this is where you tell the computer where to find your image; you write src="" and in the speech marks you write the path that the computer follows to get to the image, then the image name. In the example above I have a folder called img and in that folder I have an image called image.jpg (the .jpg is the file format and should be next to the name of the image), the forward slash indicates a progression from one folder to another.

The alt="" is where you describe the image for someone who can’t see it. Blind people use the Internet too and it is for them that you must use an alt. You don’t need to close an <img> tag.

If you’re not confident, sit and digest that for a moment. Unfortunately, that is the direction we’re heading.

Brilliant! You have just turned a regular page into the beginnings of a webpage. Sit back, make yourself some tea and let me write the next bit. I’ll be teaching you how to divide a linear page of text and images into different blocks of content (it’s actually more interesting than it sounds).

I can’t tell you how you should revise; all I can tell you is how I like to revise. I’m not that smart (what? you thought I was? I’m flattered) but I generally do well because I put my absolute all into it. I can’t possibly do well if I don’t put absolutely 100% in 100% of the time.

So here goes; tips and methods that I have found useful:

Do something

You are not a sponge and information won’t soak into you. You have to work at it and pump it rather than expecting osmosis to do it for you.

Work hard

The more you think you’re going to fail, the more work you have to do. There are effective ways of revising that minimise the time, but there is no way of instantly revising everything.

Don’t overdose

Take breaks from revising every-so-often. If you tied for time and don’t think you can afford to take breaks then mix it up; while having a break from one subject, revise for a completely different one.

Sleep

Once your brain has gone, you’ve had it. Go to sleep, rest and make sure you aren’t tired during your exam.

How I revise

I download the syllabus and go through it, addressing each point in detail, then I make a note of how to do every skill I need to know—be those equations, methods or essay structures—I then make note of every ‘key definition’; going through the whole syllabus before moving on. This will end up being absolutely huge and completely the opposite of what everyone says is good practice (condensing down to a side of A4) but what you are doing is not making notes to then revise off, you are compiling a comprehensive list of everything you need to know and in the process are going through the entire syllabus a number of times. If you want quick references that is fine, assess where you need to work on and take out what you are already rock-solid on, leaving only the bits you struggle with.

For other methods of revising (for example ‘mind maps’ which I find stupidly chaotic and I can’t revise from but I know they are popular right now), just take a google. I had planned to detail a few here but there are just so many that it isn’t worth it.

So how do you revise? Please share ’cause you might help someone else.

I presume that it is supposed to level the playing field so that it is the best written, not the best typeset, statement that stands out; but still, presentation is very important, and typography—even just at a basic level—should be taught in school and be a mark of attention to detail, just like correct spelling and grammar.

Instead, even those who know better have to use bad typography in what has been described as ‘the most important piece of writing so far’. I don’t know how the paper system worked—I’m sure there were restrictions in place—but I’m also sure it gave much greater flexibility and allowed applicants to use the right glyphs in the right places.

I know it’s too late for any change to make a difference to me, but I’d really like to see a future version of UCAS Apply that has support for correct typography. I know computers are still very young and the focus of innovation has been in moving forward, but we are losing something in our haste; we are forgetting centuries of tradition and I would think the universities would be the perfect people to try and protect that while still being progressive. That may even be the case but UCAS really isn’t helping the matter.

P.S. If you are a university checking me out, please email me from a university email address and I will give you my personal statement typeset as I intended it.

So, I would hope that you can tell the difference between different typefaces, even if you can’t accurately describe them or put a name to them. So... Spot the difference:

While there are many different ways of classifying typefaces, I tend to use the simplest, most obvious and probably the most flawed system. They either have serifs or they don’t, either closely resemble handwriting or they don’t.

The most useful to us are the top two. A serif typeface (like Times New Roman, Georgia, Garamond, Caslon, ect.) has little details on the ends of the letter-forms which help to guide the eye along the lines; a sans-serif (like Arial, Helvetica, Verdana, Calibri, ect.) doesn’t have these but they can be just as useful.

While there are sub-divisions within these, I don’t think we really need to go into them—there are enough places on the internet where that kind of knowledge can be found.

Generally speaking, serifs are more readable in large blocks and so I would recommend that you use them for the text in your essays. Sans-serifs are more legible meaning they are easier to read at a glance and so I maybe put your name, word count and title in a sans. I personally prefer to do everything in pretty serifs, regardless of the implications to legibility. You don’t have to take my every word as gospel but make your own decisions what looks good and when visual appearance out-weighs functionality—in an essay situation, this rarely happens.

While in most situations I would strongly advise against using any kind of script or handwriting font in an essay—and never use one for large blocks of text—but there are times (for example in a pull-quote (I’ll come on to them later) or if you are writing something that should be hand written.

In Stephenie Meyer’s Twilight books, each character has their own distinct handwriting font which helps to show a little bit more character and allows the reader to see, at a glance who has written the letter. I can’t really see how you would integrate that into an essay but if it calls for it then I better give you some advise on what to do with them.

For one, I don’t care what you prefer normally, never justify the text, when was the last time you saw someone doing this in their handwriting. Secondly, the size and shape of the letters dictate how big to make the font and what the line-spacing/leading should be like. Finally, most scripts have interconnecting letters so don’t change the letter-spacing/tracking or this effect will be ruined.

It could be argued that this would be a pull-quote (I said I would get on to them), and I’m sure everyone who has ever read a newspaper has seen one of them—those quotes from people, usually set in larger text that breaks out from the rest of the page. While they are normally used in newspapers, a variation can be used to add some visual spark to your essays. You don’t have to have a quote from someone, maybe you have an important statistic or point to make that you want to show off, why not design that into your essays?

So now that we have talked about calling attention to a block of text, now lets look at calling attention to individual words. Firstly with italic or oblique (both slanted) text; with bold type; with colour; with small caps and with another typeface.

Probably the most used form of emphasis is slanted text, and for good reason;it is definitely noticeable, calls attention to itself subtly and doesn’t require a colour printer.

Most people would think that all slanted text is italics, but there are actually two types. Italics are redrawn to be more cursive while the second type—oblique—is just skewed slightly.

Second to that is probably the mighty bold. Simple and effective, this calls more attention to itself that italics and so should be used less.

As I mentioned last week, colour can be used for emphasis but make sure that you change the weight to bold to compensate for the power of the black text around it.

Small-caps are exactly what they say on the tin; small capital letters that can be used for emphasis.

Unfortunately, not all typefaces have them and if you let the computer draw them for you by simply scaling down full-sized capitals it’ll lose the effect.

Another method of emphasis is to use a different typeface altogether. If you are using a serif then a sans for emphasis can work really well and because it is so rarely done it can give a nice, unusual effect.

Headings can be another matter altogether. Although you must be careful not to go overboard, you can use pretty much whatever font you like here. This is the time to show off your sassy personality with a snazzy typeface. Bear in mind though, that it is still a piece of school work. Don’t use the yellow submarine font in your IT essays.

The most important thing is that here is a definite difference between heading and body text. You can do this with size, all-caps, small-caps, bold, different face... Sound familiar?

Finally, as you can see in the example above, drop-caps give a lovely effect. Follow this guide to use them in Microsoft Word. Don’t use them on every line, again the more you use something, the less effective it becomes. Try using them on the first paragraph of your essay or at the start of a new chapter.

I think the key is to use functional typefaces and make your essay stand out with the embellishments. Your teacher will most likely appreciate you making your work easier to read and more visually appealing.

Embarrassing confession moment. This was my GCSE geology coursework. While the content was actually alright, the design is plainly awful for so many reasons. The most obvious one is the orange gradients on the tables.

The scary thing was at the time I thought it looked good. For this reason I am begging you to stay away from gradients like that.

I think this is perfectly acceptable and wont give your teacher a headache.

This is how I do tables. I took my inspiration from this 24 Ways article by Mark Boulton and I find this to be the cleanest and most printer friendly way of setting tables. I highly recommend reading that article as it goes into so much more detail than I will be able to do specifically on the topic of tables.

As far as colour in pictures go, I would leave it there. Making pictures black and white can make the page look a bit boring, especially if you remove the colour and don’t up the contrast. If you don’t have access to a colour printer then make them black and white.

Colour can also be used for emphasis, red typically stands out strongly on a page and you don’t need much of it to make an impact, in fact too much can ruin the effect.

Blue can also be used for emphasis but because it recedes from the page you can use much more of it, but still use in moderation.

Yellow is far too pale to use for emphasis, make sure that whatever colour you use it is dark enough to be able to see it easily. Unless you have a good knowledge of colour theory I would stay away from using large amounts of it in your essays and don’t use colour for emphasis if you don’t have access to a colour printer.

By making things look simple you aren’t removing the design, just designing it to be functional, which is ultimately the most important thing where an essay is concerned. However, if you’re really feeling creative and you have a good knowledge of Photoshop or similar then you could have a go at producing something like this:

Again, only use in moderation, the less frequently you use something the more impact it will have. Also make sure you have a good reason for styling that paragraph so differently, again it all comes down to setting your content in such a way that it gets the best attention in the right places for the right reasons.