HTML. Lesson I

Preliminars

Click on the following link and download and install the text editor "Bluefish".

Possible other editors (Sublime, Notepad, TextEdit,...) will not be used. We want to support helping others learn and spread knowledge. Here is how we may help do that:

Open Source/Copyleft software (as opposed to closed source/copyright software)

A bit of (my personal) history

Back in my days, computers, or anything remotely similar to what we know nowadays as computers, were only for the privileged ones or for companies: They were bulky and very, very expensive. E.g., Apple's Lisa, LisaII, or IBM's PC.

In the UK, Sinclair Ltd. developed two small computers affordable to anybody:

  • ZX80: 1KBi RAM, rubber keyboard. CPU: Zilog 80, 8bits 3MHz. Could only be used by programming in assembler due to the very limited size of the RAM.
  • ZX Spectrum 48: 48KBi RAM, rubber keyboard, BASIC interpreter included, CPU: Zilog80A, 8bits, 3MHz. This is what I got

I learned BASIC (a programming language) with it and then I started learning assembler a.k.a. machine code.

Question: Everybody knows what assembler is?

  • Machine code: It's the only thing that a computer really understands. No meaningful to a person.
    • String of 0's & 1's. Encodes instructions and data used by the CPU
    • Minimum block with meaning is 8bits = 1Byte
  • Assembler: Higher level language. It's the closest to machine code a person can use.
    • Example from Z80A: LD A, 65 Means "load #65 into register (kinda memory location) A. This is translated into numbers as "62 65" or "3E 41" and "00111110 01000001". The full Z80 assembler code.
    • Minimum block with meaning is 8bits = 1Byte

I then faced a problem. In order to practice assembler one needs a software called assembler/disassembler that translates back&forth between assembler and machine code. I was living in a small town and only 2 shops would sell stuff related to the ZX Spectrum. Alas, none had available such software for sell. Big disappointment for me, although I kept learning a bit simply in a "theorical" way (reading code from some magazines and doing some exercises on paper).

Nowadays, all this is different. Question: What makes it different nowadays?

  • The internet: Provides an immediacy that didn't exist back then.
  • Open Source/Copyleft movement: GPL. Allows us free access to programs and their code to learn with/from.

All of you have already had experience with programming in a languae (e.g., Scratch, Python,...). For that you installed a free software package (Scratch or Python, libraries and executables) that was readily available for you to download. As this is a learning course, it only feels morally the right thing to do as to support as much as possible the Open Source/Copyleft movement by using software that complies with that licensing mode.

Take-home lesson

Open Source/Copyleft (aka GPL) software facilitates and promotes the learning and distribution of knowledge to everybody, everywhere, almost independently of income level.

What-does-it-mean questions:

Go to Wikipedia and check the answers to the following questions. We will discuss them next day in class.

  1. What does RAM mean? What is it? How is it relevant for a computer?
  2. What does CPU mean? What is the role of a CPU in a computer?
  3. What does MHz mean? If we had two computers, one running at 1MHz and other at 10MHz, what would be the mmain difference we would notice?
  4. 1GHz is 1000 times as much as 1MHZ. My computer CPU runs at 2.6GHz. How much faster is it than the ZX80?

Basic structure of a web page

HTML language

HTML is a tagging language -not really a programming language.

HTML consists of elements that help the browser know what the content of the page is and how to lay it out.

HTML Element

An HTML Element consists of an opening tag and a closing tag which usually surround a content. This content can be either blank, a text, or another HTML Element.

Symbolically we may write this as: <tag></tag>. Let's see in detail how this looks.

Example of an HTML Element: <a href="http://www.google.com">Google</a> Where:

  • a is the Name of this HTML Element
  • href="http://www.google.com" altogether is an example of an Attribute of this HTML Element
    • href is the Name of the attribute, and...
    • "http://www.google.com" is the Value of the attribute.
This HTML Element corresponds to a hyperlink pointing to the search engine Google.

Web page

A web page consists of just two HTML Elements:

  1. The document type specification: <!doctype html>
  2. The document content: <html> </html>

Hello World page

Copy paste the following code into your text editor and save it as helloworld.html. Then open it with your browser. This corresponds to the minimum tags needed to write a web page conforming to the HTML5 standard.

<!doctype html >
<html>
  <head>
    <title>My first web page
    </title>
    <meta charset="utf-8">
  </head>
  <body>
    <Hello World!>
  </body>
</html>

Conclusions

As you may notice, this very same page where you are reading all this has almost no embelishment and a very, very simple layout.

We are only using bold face, emphasis, different headers (h1, h2, h3 and h4) and lists to give this content a minimum of visual layout.

In the first part of this course we will see how to make visually impacting pages that help us highlight the main points and make it much more visually appealing to read.

Exercise 1:

Write the "Hello World!" example on a text file and save it as "helloworld.html". Then open it with Firefox or Chrome.

You should see a window with the title "My first web page" and with a content of only "Hello World!".

Exercise 2:

Go to Wikipedia and read about the story of Sinclair ZX80 and the Sinclair ZX Spectrum. Both were little computers manufactured by Sinclair Ltd..

Write a web page with a litle summary (No more than 5 sentences. E.g., when did they come out? how much RAM did they have?) of the history of the Sinclair ZX80 and ZX Spectrum as a web page. Save it on a file called "sinclair.html". Hint: Take the hello world example and substitute the body content with your summary. Call the title "Sinclair"

You should see a window with the title "Sinclair" and with your summary as content.