Web Fundamentals 1 Getting going

Web servers

You can think of the internet as a massive network of computers that can send files to one another. The computers that hold web pages are called servers. Servers are large, specialised computers that are permanently connected to the internet.

Once the address of the web server has been found your request is forwarded on to it, the web server will interpret your request and send back one or more files. We now look at the technology involved in this process.

Static vs dynamic sites

There are two main possibilities server-side: either your site is static or dynamic.

• In a static site all the pages are pre-prepared and the web server just sends them to the browser.
• In a dynamic site the pages are prepared on-the-fly pulling information out of a database depending on what the user asked for.

Most of the sites you can think of will be dynamic sites (e.g. [facebook.com], [reddit.com], [amazon.com], ..).

Server-side technologies

There are many options for building a dynamic server-side site - you’re pretty much free to do what you like. Some common choices are:

• 

  Ruby on Rails

  A web development framework written in the Ruby programming language.

• 

  php

  A programming language that formed the basis of most dynamic websites in the early 2000s.

• 

  django

  A web development framework written in the Python programming language.

• 

  Node.js

  A web development framework written in javascript.

• 

  Wordpress

  A blogging platform (now capable of much more) written in php.

Introducing the URL

Many of our web interactions begin with a URL (uniform resource locator) being typed into our web browser address bar. Let’s look at an example: http://www.bbc.co.uk/news/.

This URL has several different parts to it:

• http : the protocol or how to fetch the information
• www.bbc.co.uk : the host or where to fetch it from
• /news : the path or precisely what information to fetch

When we type the URL into the address bar a request is sent over the internet and some information is returned to us.

The protocol describes how the information is transmitted. Other possibilities include https for secured communication, ftp for file transfer and git which we’ll learn about later.

The host describes where the information should come from and the path tells that location precisely what information to send.

In general a URL can be more complicated than this. URLs can also contain query parameters, fragments and port information. We will leave these for now but will point them out when we meet them later. Instead we will focus on exactly what information is being sent and who is sending it.

Each computer on the internet has an address (an IP address) so that requests can be sent to it and files returned - much like a telephone number. The backbone of the internet is a network of routers that are responsible for routing files from one IP address to another.

DNS

IP addresses are a sequence of numbers and ‘.’s such as 212.58.244.67. These aren’t very easy to remember. Instead the internet works on a domain name system, that matches domain names such as bbc.co.uk to IP addresses.

One of the first things that happens when you type a URL into your browser is a DNS lookup: your computer contacts a DNS server (Domain Name System server), which is basically a massive address book of IP addresses. The DNS server converts the domain name from the URL (e.g. bbc.co.uk) into an address for a server (such as 212.57.244.67).

Putting up a website

If you want to put up your own website at your own domain name you need two things:

1. A web server to serve your site
2. A domain name to point towards it

There are many options for web servers - you don’t have to physically have your own one. There are many companies that will offer web hosting, often providing you with space on a shared server. Later in the course we will use the free hosting offered by GitHub through GitHub Pages.

To buy a domain name you need to use a domain registrar. Examples include 123-reg.co.uk, godaddy.com and namecheap.com. You pay the registrar to contact the body who manages a TLD (e.g. .com, .org., .co.uk) and put your server’s IP address in their DNS address book. If someone else already owns the domain you might be able to buy it off them, but this can be expensive!

Many domain registrars will try to sell you hosting and other site building tools when you buy a domain. It’s important to remember that the domain name is completely separate from the hosting and you don’t need to do them both through the same company - don’t buy anything you’re not going to use.

Creating an HTML page

One of the nice things about HTML is you don’t need a lot to test it out on your laptop: all you need is a text editor and a web browser.

Why index.html?

In the old days of the web, navigating a website was a lot more like moving around the folder system on your laptop. You’d go to a base site and there would just be a list of the files and folders available: an index. Because of this index.html is still the default file that a server will serve when you navigate to a folder in the web browser.

This is your first real html tag. It has an open and a close. It tells it to be a heading.

More HTML

A few things to look out for

HTML file layout

<!DOCTYPE html>
<html>
    <head>
        <title>Page title</title>
    </head>
    <body>
        ...
    </body>
</html>

• The doctype tells you what sort of html you’re using (html5, html4 …). With html5 it’s simple - you just write html.
• Everything is wrapped in an <html> ... </html> tag
• Only things within the <body> ... </body> tags are displayed on the page
• Things within the <head> .. </head> are used to provide more information about the page
• .. for exmple the thing within <title> ... </title> will be displayed in the browser bar

Headings

<h1>Top level heading</h1>

<h3>Lower level heading</h3>

• There are six levels of heading h1 .. h6
• The higher numbers are more important
• It’s usual to only have one h1 on a page
• You rarely see anything below h4 in real pages

Paragraphs and text

<p>This is a paragraph.</p>

<p>This is another paragraph. It has some <em>italic text</em> and some <strong>bold text</strong>.</p>

• Paragraphs are created using the <p> tag
• The <em> tag is used to provide emphasis. In reality that means italics - in fact the tag <i> also works. Using em is better though as it fits with the idea of semantic markup - marking your information as to its meaning, instead of how you want it to look.
• The <strong> tag is used to make text stand out. It basically means bold - <b> also works, but <strong> is better - see above.

Comments

<!-- comments look like this -->

• Comments will not display in the page
• … but they will display in the page source. Don’t be rude!

Lists

<ul>
    <li>Apples</li>
    <li>Oranges</li>
</ul>

• Lists have a nested structure
• <ul> is for an unordered list. This means bullet points.
• <ol> is for an ordered list. That means automatic numbering.
• In both types of list you add items using a <li> tag. This stands for list item.

Links

<a href="http://www.facebook.com">this is a link to facebook</a>

• The href property tells you where the link will point
• You can specify this link it different ways:
  • absolute external link e.g. “http://www.facebook.com”
  • absolute local link e.g. “/about”. This links to a file relative to the root of your webserver. For example if your site is at www.example.com the link will point to www.example.com/about
  • relative local link e.g. “about”. This links to a file relative to the current html document. In this case it will link to the file called about in the same folder as your current html file.
• You can also link to places in the same document using href="#my_tag". This
• You can get the link to open in a new tag like this: <a href="http://www.facebook.com" target="_blank">

Images

<img alt='my cat' src="my_cat.png">

• The alt tag is for providing a description of your image. This is useful for partially sighted people using screen readers, or in case the image doesn’t load.
• The file can be linked to in the same way as href. In the example above we use a relative local link to a file called my_cat.png in the same folder as the html file.

Tables

<table>
    <thead>
        <tr>
            <th>Column1 Heading</th>
            <th>Column2 Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row1, Column1</td>
            <td>Row1, Column2</td>
        </tr>
        <tr>
            <td>Row2, Column1</td>
            <td>Row2, Column2</td>
        </tr>
        <tr>
            <td>Row3, Column1</td>
            <td>Row3, Column2</td>
        </tr>
    </tbody>
</table>

Homework

Finishing off

Buy a domain name

Your domain name will be used to point towards your personal website for the course - it’s up to you exactly what this will be about. You might want to use this opportunity to create a basic ‘personal landing page’ saying a bit about yourself and where to find more information. Or you might want to put up a blog. Alternatively if you want you can put up a page about something you are interested in (or your dog). You will need to pick a domain name accordingly!

To buy a domain name you need to visit a domain registrar. Examples are:

• 123-reg
• Godaddy
• Namecheap
• dot.tk (.tk domains are completely free!)

There probably won’t be a huge difference in price between these sites. You might be able to find a special offer on one of them if you shop around a bit though. Ultimately the domain you choose isn’t that important for the course - the whole point is to practice pointing a domain name towards a server.

Preparation for next time

Make a start on your own site