First steps with HTML

In this part of the course, we are going to see how to draft the HTML content of a web page.

In general a web page is composed of kind of programming languages:

  • HTML (mostly the text content)
  • CSS (mostly the design, look & feel)
  • JavaScript (mostly the interactions)

As you can read from above the explanations given for each are not very precise. The reason is that we don't want to make a full course about those three programming languages but just basic explanations.

In order to write those lines of code you will need to use some tools which are named text editors. Here is a tiny list of Open Source text editors:

  • Vim https://www.vim.org/
  • Geany https://www.geany.org/
  • Gedit
  • Nano

and also WYSIWYG Open Source text editors:

  • https://summernote.org/
  • https://simplemde.com/ (support markdown)

The question of which is the best text editor really depend of you. According to your own habits you will feel more comfortable with one or another.

Personnaly, I used to play with Geany because WYSIWYG text editors tends to add some extra tags that I don't want and I like to play with regular expressions which are supported in Geany.

Ok, so once we have our text editor in hand, we need to draft the skeleton of our web page.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>

<meta charset="UTF-8">
</head>
<body>
</body>
</html>

Source: https://www.w3.org/Style/Examples/011/firstcss.en.html#HTML

Those HTML tags are useful in order to structure your page:

  • html: indicates that the content your are inserting within this page is in HTML.
  • <meta charset="UTF-8">: indicates the encoding of the page.
  • head: location of information which are about the page.
  • title: the title of your page displayed within the browser.
  • body: where your text content will be.

Once your HTML skeleton is defined all you need to do is to copy and paste your text content within the body tag, which will result in:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
</head>
<body>
Current bitcoin price is (source Bitfinex):
Satoshis:
Convert
US dollars:
What is the Satoshi to US dollar online converter?
The idea of this project is to offer you the possibility to get the price of a satoshi directly.
</body>
</html>

But the result we would get out of it won't be that great because elements are not aligned and some elements should not be normal text but buttons or fields. This is where extra HTML tags are entering into play:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
<div align="center">Current bitcoin price is (source Bitfinex):</div><br>
<div align="center"><form>Satoshis:<input type="number" name="satoshis"><br>
<input type="submit" value="Convert"><br>
US dollars:<input type="number" name="usdollars"></form></div><br>
<h1 align="center">What is the Satoshi to US dollar online converter?</h1>
<p align="center">The idea of this project is to offer you the possibility to get the price of a satoshi directly.</p>
</body>
</html>

  • div: indicates that I want to consider this element as independent from others. It has an attribute align=center in order to indicate that I want to have it centered.
  • form: indicates that I am including a form on which people can interact with, like entering values within it.
  • input: corresponds to the value I will send and I want those values to be numbers. And I also want to provide a button, here "Convert" in order to act on those elements.
  • br: indicates that I want the next element to start on a new line.
  • h1: indicates that I will have a title to introduce a paraprah on the page.
  • p: to indicate that I will have a paragraph of text on the page.

Once your page is drafted, save it as a .html document and then open it up with a web browser.

Our final result is then this:

Final render

This is not perfect yet for many reasons:

  • The page is ugly.
  • The main feature is not working.
  • There are probably many other things that I would like to arrange.

But you probably understood here what is the point of HTML and that's the most important.



Last modified: Tuesday, 16 July 2019, 12:56 PM