How to Start Making Websites the Modern Way
This was written for my colleagues on The University of Leicester’s Geology course who have to make a website as part of our Planetary Geology course. Although I imagine that it’ll be just as applicable to anyone who wants to start making websites the modern way.
Although I complained about it at the time, our lecturer’s advice wasn’t bad; just outdated. That doesn’t matter—he’s a scientist, not a web designer—he doesn’t need to keep up with the changing ways that websites are written.
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).
