Learning to build a website - Lesson One

Posted on 06-11-19 in Computing

This post is part 1 of the Introduction to website design" series
Learning to build a website - Lesson One

Introduction to what a website is and what they include

Learning to build a website - Lesson Two

Basic Introduction to making a website

In this course we will cover a basic introduction to website design.

We will cover :

  • Why are websites made the way they are?
  • What HTML is and how to write common tags
  • What CSS is and how to write common selectors
  • Using classes and div tags
  • How to structure content on a webpage

What is a website?

A website is a collection of webpages. A webpage is document that can be placed onto the Internet. These can be viewed using a web browser, such as Firefox. How these documents are designed and written is the purpose of this short course.

For a single webpage there might be dozens, potentially hundreds of files, all brought together by the browser. At first glance this might seem bizarre. After all, this is not how normal people make a document! Consider the following

embedded video, no alt provided

In this video we can see a short example of writing a document in Libreoffice Writer. Note how if we want to set something to bold or underlined we need to select the text and perform the correct action. The document you make is what will be printed or saved. Essentially, what you see is what you get - better known as WYSIWYG.

file size of typical typesetting software such as Libreoffice Writer

For this particular file we can see that it has a filesize of 9.8 kB. For what is essentially just text this seems a bit much! The same text in a single textfile have a size of only 107 bytes. This is a hundred times bigger!

So why is this? In a normal document there is a lot of information that is stored. The page size, the page orientation, the font used, the font size, the size of the margins, ... and on and on. The more complex such a document the bigger such a file will become. It's easily possible to write a document that is not just kilobytes in size, but megabytes! This was simply too big for the original Internet. A single webpage holding just text would have taken minutes if not hours to load! So how is this fixed?

Hyper-Text Markup Language - HTML

The first plank of building a website is the structure. Consider the example in the video. This can be written in HTML [1] as :

<h1>Introduction to website design</h1>

<p>
In a <u>WYSIWYG</u> editor, we type <b>select</b> the things we <br>wish to change.
</p>

So what is going on? In HTML we write tags to specify behaviours we want. These tags are of the form <h1>Helloworld!</h1>. The tag here is h1 which stands for heading 1. Note that the opening tag just has the name of what we want, but the closing tag has the forward slash! We're free to write tags wherever or however we like. We can nest them (<h1><u>Underlined Header!</u></h1>).

HTML isn't quite a programming language in the same way that, for example, Python is. Writing bad HTML (hopefully) should never crash a web browser. So what are some tags we can use? In reality HTML is in constant development and there are over a hundred different tags! In this course we will try(!) to focus on using HTML5. Read more on this topic at HTML 5 tutorial.

[1]I'm aware the <u> tag is depreciated!

Exercises

  1. What is the name of the first web browser and when was it released?
  2. What does the <br> tag do?
  3. What happens if I open a tag but don't close it?
  4. Register with neocities using your school email address (if you have not already done so) and complete the introductory tutorial.