A Flying Start in HTML and CSS

Although there are many things like "Wix" and "Square Space" to help you make a simple website, sooner of later, as you add complexity, you will have to use bits of HTML, CSS and Javascript, the languages that "Wix" and "Square Space" etc. will always turn your web-pages into anyway.

To start in these languages is a lot easier than it sounds and although at first it may not be as seductive as "Wix" or "Square Space" you will find that for a little bit of extra work at the beginning you save a lot of work at the end.

Teaching Method

The;

1. Hyper Text Mark-up Language (HTML),
2. Cascading Style Sheets (CSS), and
3. Javascript

files for these tutorials are specially created so as to be clear and so as to serve as the material from which we will start to learn.

We are going to take these three file types and make changes to them and see the effects of those changes.

These files contain lots of human readable comments that explain the code in the files themselves when you look at them.

By changing the text and the image to be your own you will start to create your own web-page.

To start in these languages is a lot easier than it sounds, but this material was intended to support my zoom course. You are free to use it anyway but be forgiving because I didn't write it for independent study so explanations might be lacking. Hopefully the comments in the files will guide you through.

It will be best to read this page to the bottom because it really does give you some important background.

The Idea of HTML

The internet its self existed before web-pages and was just a way for computers to be networked between organisations.

In 1980, physicist Tim Berners-Lee at CERN, proposed a digital document sharing system.

A system so that documents held on various computer systems "servers" could be read on various other computer systems "clients" using special programs called "browsers". In principle the servers and browsers could be anywhere in the world.

The first objective was that documents could be read on lots of different computer terminals or printed out on different format printers but still remain intelligible. This objective that HTML pages can be browsed on lots of different devices with different formats, remains with us today.

A second objecting was that references to other documents could be made within the text, and that these references could be simply followed to look at those other documents. These are the links that we normally click on to go to another web-page. The other document or web-page (the same thing really) could be served by the same computer or served by another computer somewhere else in the world. So one could form a web of linked documents, hence the name World Wide Web (WWW).

This ability for a document to link to link to another document was called "Hyper Text".

In order for the documents to be able to be browsed on many different systems they needed all to be written in a special "Mark-up Language", this is a language that in the old days of the printing press told the printer where to use headings and that sort of thing i.e. how to lay out the pages in the final print.

Hence the name "Hyper Text Mark-up Language" or just HTML.

In order for the server computers to communicate with the browsers on the client computers, Tim Berners-Lee defined a protocol called Hyper "Text Transfer Protocol" or HTTP.

Here is a link with more about Tim Berners-Lee. Back in the days of green screen terminals, the link would have had a number next to it but today you can just click on the link to go to the other web-page / HTML document.

Here is a link to one of the original WWW project pages at CERN.

You don't need to read the linked pages for this tutorial but they might just be interesting because they tell you about the history.

At that time there was no CSS there was only HTML. The idea of a choice of typefaces (fonts) was not considered because very few devices had more than one font.

• Click this link to see how this web-page might have looked then on a green screen terminal using just the HTML file. I have used a bit of CSS and a different font to produce this retro style.
• Click this link to see how this web-page might have looked some years later on an Atari home computer using just the HTML file and assuming there even was a browser written for it. Again I have used a bit of CSS and a different font to produce this retro style.
• Click this link to see how this web-page looks on your browser without a CSS file i.e. without the style information. The browser uses its default styles.
• Click this link to see how this web-page looks on your browser with a decent CSS file designed to make it look half decent. This is the CSS file we will develop our website from.

In the early days even text styles like bold text, italic text and underlined text were luxuries most browsers did not have. Now these styles can be combined such as bold italic text or bold italic underline text or in any other way you want. There are now also many fonts to choose from which is how I can choose fonts to create the retro styles above.

Necessary Downloads

You can download all the material of the tutorials as a zip-file from GitHub like this.

1. Click on this link for GitHub
2. Look for the green button on the right marked <>Code ▾
3. Click on it and a menu opens.
4. The last item on the menu that appears is "Download Zip" Click it.
5. Then the zip file is handled the same as any download on your computer.

You can unzip "computology-main.zip" to any folder on your system you prefer and we can use it from there.

The zip-file contains a folder called "computology-main" and in it you will find a folder called "htmlcss" and in that are the folders for each of the tutorials.

Setting things up

Your going to need two things, a web browser, you probably already have that or you wouldn't have found computology, and a text editor with "syntax highlighting". That means that the text editor will show you key words in your HTML, CSS and Javascript files, in different colours. It might sound unimportant but it really helps.

Linux

With Linux it's easy because you probably have a text editor called "Pluma" installed with the operating system, and it's perfect.

Mac

On the Mac, to open TextEdit on the desktop menu select Go>Applications>TextEdit, a dialogue opens, on the bottom left click on the "New Document" button. You might prefer to use another text editor if you have one but TextEdit will do for now. You will be using TextEdit or your preferred text editor to type or edit all programs you write.

Windows

There is an editor you can install called "Notepad++" that is better than the "Notepad" which comes with windows. You need to get this installed. I believe you can find it at notepad-plus-plus.org. Install it.

When you're sitting comfortably let us begin

Open the tutorial folder tutorial0-0, your editor and a web browser. I will be using firefox.

Now you are all set.

The Home Page

A single HTML document is the same thing as a single HTML page or web-page and is a single HTML file on the computer.

A web-site consists of a number of web-pages and so a number of HTML files on the computer.

Every website has a "home page" which is always a file called "index.html". It is the opening page of the web-site. The index.html page originally was the index to what a site had to offer and that convention has remained. It is also the first thing that Google will look for when trying to index your website so it's important.

Go to the first tutorial;

• Tutorial 0-0: Start HTML & CSS

Each tutorial page has a link back to this page.

A single HTML document is the same thing as a single HTML page or web-page and is a single HTML file on the computer.

A web-site consists of a number of web-pages and so a number of HTML files on the computer.

Every website has a "home page" which is always a file called "index.html". It is the opening page of the web-site. The index.html page originally was the index to what a site had to offer and that convention has remained.