[M1L0] Module 1: Introduction to Web Technologies

This module is an introduction to core languages of the web, HTML and CSS.  All websites, from simple text-based pages like this one to rich applications like email or maps are delivered using a combination of these technologies.

You might wonder why we have chosen to start our course by studying HTML and CSS.  There are many factors that make them good candidates, but here are a few key reasons:

First, they contribute towards a baseline understanding of how the Web works, which will help to inform conversations in the hackathon itself.  Such an understanding is important for any digital humanities project, because it helps to make conversations between different members of a project team more meaningful.  The best apps are produced when each of the roles within a team try hard to understand the needs and priorities of each of the other roles, rather than (for example) treating code as a mysterious black box that can only be understood by experts.  Functional literacy with – or at least curious engagement in – others’ spheres of knowledge can lead to more informed discussion and sharing of ideas, and helps to avoid dead-end discussions and miscommunication.

Second, they are simple languages that are easy to learn.

Third, they introduce some concepts and structures that you will encounter if you go on to learn other markup languages, like XML – which is common in digital literary editing.

Finally, they are a good entry point to coding because you can produce something very quickly.  Hopefully, this means they are also fun!

In the early days of the web, anyone who published online needed to understand how to write HTML.  Thfese days, many people publish online on blogs, websites, or social media platforms using simple What-You-See-Is-What-You-Get (WYSIWYG) editors, that handle all the behind-the-scenes coding for you – this page itself is written on one such platform (WordPress).  However they are created, though, every page on the Web includes some HTML, and it’s easy to take a look on most browsers.  Let’s have a look at the code of this page.  Read through the instructions in full before following them, or you might get lost:

  • Right-click anywhere on this page
  • Click ‘View Page Source’ (this menu item will be different depending on which browser you are using)
  • You will see something like this:
  • Scroll down to around line 200, and you should see these instructions.

How this Module Works

In this module, we will be creating a basic HTML profile page that looks like this:

 

 

The module is structured into 2 short practical lessons.

  1. HTML: Structuring Web Pages
  2. CSS: Adding Aesthetics

Setting Things Up

Before we begin in earnest, we need to set up our tools.  We recommend that you use a desktop web browser that is maximised so that it takes up the whole of your screen when working on these examples.

A few years ago you would have needed to install software on your computer in order to develop a web page, but fortunately that is no longer the case.  For our lessons we are going to use a fully-online development tool called Glitch.

You can use Glitch straight away without creating an account, but this module will be easier if you create an account so that you can easily find your project and use it in successive lessons.  (Glitch does save ‘anonymous’ projects, but it deletes them after 2 weeks, and you won’t be able to find them easily on a different computer).

  1. Go to glitch.com
  2. Click the ‘Sign in’ button in the top right
  3. If you don’t already have an account, you will be presented with a variety of ways of logging in.  You can use an existing account with Facebook, Google or GitHub or, if you don’t want to use those you can enter your email address and a special log-in link will be sent to you.  Pick one of the ‘log in with’ options and confirm that you want to allow Glitch to log in using your account, or enter your email address and follow the instructions in the email to set up your account.

Optional: Install Firefox

The site we are going to create should work in any Web Browser, but the examples I am going to give all use Firefox.  I recommend Firefox because it is fast and easy to use, but also because – unlike most other popular browsers – it is produced in an open way by a not-for-profit foundation whose goal is ‘Our mission is to ensure the Internet is a global public resource, open and accessible to all.’  Google’s goal, by contrast is to make money by showing as many adverts to as many people as possible.  This is not to say that Google necessarily produces a bad browser, or that the company’s actions are necessarily suspect, but the continued existence of products like Firefox is good for the health of the web and – arguably – for the public sphere in general.

If you have read all this then you are ready!  Go to the next lesson >