Lesson 1

Welcome to the world of web development!

Let’s start from the beginning – what are websites?

This is a complex question, of course, and we could write thousands of words to give an exhaustive answer. However, in the most basic form, it can be said that websites are folders that contain other folders and files and are placed on special computers called servers. Internet users can visit a given website using a web browser (eg Chrome, FireFox, Opera, Edge, Internet Explorer and others), calling the assigned address (domain or IP).

Let’s try to create our first website:

  1. Create a new folder anywhere on your computer and name it for example: ‘my-page’ or ‘www’
  2. Inside the folder, create a new text file and name it index.html (note – in many operating systems extensions of popular files [eg: .txt, .jpg, .html] are hidden.) Check how to change the default settings for Windows to display the extensions of all files )
  3. Open this file in a text editor (eg Notepad, Sublime, Atom) and write your name
  4. Voila! – we have created our first website. You can open it using the browser and read its contents

Well, it’s not a fully working website yet – most of all, it does not yet work on the internet – it’s only available on our (local) computer. Nevertheless, we created our first HTML file: index.html

HTML – what is it?

HTML – HyperText Markup Language – is a special programming language (or markup language to be precise), that uses TAGS. HTML allows us giving text elements additional meanings and making it a hypertext. It’s a simplified HTML definition, but it reflects its main assumptions.

TAGS are special words wrapped with < and > characters.

Pretty much everything in the HTML document is wrapped with some kind of tags. Wrapped means that before a given element you need to place an opening tag and after that element you place a closing tag. Closing tag looks almost like opening tag – but it has an extra “/” charachter. Just like this:

But before you start writing any HTML in your document you need to write something called document type declaration. This is the first thing you always need to put on top of every HTML document.

All it does is it tells the computer that this is a HTML document. So that the computer and the browser knows how to interpret it.

Now we can write our HTML tags!

The first HTML tags you will need to know are <head> and <body>.

Everything that will be wrapped by the <head> tag is not going to be visible to peopele looking at your webpage. Everything you put in <head> is just for your browser to process. Stuff that we will see on the webpage are within the <body> tag.

It is like in real life – we cannot really see what is in your head, we can only see your body.

What’s in your head?

So what kind of stuff do we put in head?

Well, things like meta tags

Meta tags are special kind of HTML tags that tell the browser some information. They are not visible for humans

They are also special as they do not need to be closed. There is no </meta>

The above metatag is responsible for telling your computer to show all the special characters, like: ś,ć,ó,ã,á,à,â,ç,é,ê,í,õ,ó…

Do I have to remember all the tags?

Many people are discouraged from programming, thinking that they need to remember all the tags and commands in their language. Don’t follow that path! The most common operations of novice programmers are “copy” and “paste”. There’s nothing wrong with it. Over time, you will remember the structure and syntax of web documents. For now, all you need is a good source from which you can copy.

The beginning of the document

Just remember that your every HTML document should start from doctype declaration and the first line inside your head tag should be <meta charset="utf-8">

The title

Next tag we will learn about is the <title> tag.

The title tag is inside the head tag so it is not visible on page.

Nevertheless, it is a very important and mandatory HTML tag.

In real life you can see title in action when you look at the browser’s tabs:

OK. Now we have just enough code in our head, so we can start with the body

Document body

Headings and paragraphs

All the content we put into HTML document needs to be marked-up by tags. We try to do it semantically – which means that we try mark our text and other elements with meaningful tags. So if we want to insert headings or paragraphs we do it in corresponding tags.

H1 tag is supposed to be used for the main heading on the page. This should clearly tell the user what is this page about. And becouse h1 should only be used for the main heading – it should only be used once per page. Tags h2, h3, h4, h5, h6, p can be used any number of times.

See the Pen NbPwJa by Dominik Koscielak (@domkoscielak) on CodePen.

paragraph should be used for the regular text and headings from h2 to h6should be used for sub-headings

By the way – this is h3 heading

And this is a paragraph.

Important thing to remember is that the heading tags cannot be containing one another –
THIS IS WRONG:  <h1>Some text <h2> and more text</h2></h1>

Neither can a paragraph contain heading or heading contain a paragraph.

Links

Internet would not be what it is now if it was not for links. Links are extremely important HTML elements, that allow making meaningfull relations and easy references between various web pages.

We make links with anchor tags (<a>) and they look like this:

For the link to actually work (link somewhere) we need to set a href attribute. This might sound scary, but it’s just a few letters that tell the anchor tag where to direct our user when he clicks our link:

See the Pen Creating Links by HackingHeroes.org (@hackingheroes) on CodePen.

Index Lesson 2 »