What is a web page
Everything you see in the browser is a web page, the blog you are reading now is a web page, and the form you filled out to sign up for this workshop is a web page. Some web pages are more complex with more functionalities, like submitting information into a database (you submitted the form and we can see how many people are coming to the workshop), and the others are simpler like displaying an article. We will start with building the simplest web page first and as we go along and learn more and more, we will be able to build all kinds of complex web pages one day.
What is HTML
HTML is the language for web pages. It looks like this:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>This Is My First Web Page</h1>
<p>My first paragraph.</p>
</body>
</html>
If you go to any web page and right click anywhere on the page, and select "Inspect". You will see a window pop up and you will see HTML code exactly like our little snippet above, just a lot more complicated. Every web page is an HTML page.
So essentially, we write HTML in our editor VS Code and it will show up as a nice web page.
How does HTML work
HTML is made up of a lot of elements, and an HTML element looks like this:
<div></div>
An opening element and a closing element make up a pair which is an HTML element
<div> is the opening element and </div> with the slash is the closing element. An opening element needs a closing element, otherwise the browser doesn't understand what you are trying to do. div is the most common HTML element we will be using but there are a lot of other ones too.
<div></div> // meaning division, a generic container to put things in
<h1></h1> // header 1, the biggest header
<h2></h2> // header 2
...
<h6></h6> // header 6, the smallest header
<p></p> // paragraph
...
Each element has a slightly different style except div has no style.
Exercise:
Create this page 👇
Each HTML element is like a container
Not only you can put text in between the opening and closing elements and it will show on the web page, but you can also put elements inside elements, which is called nesting elements. Think about HTML elements like containers, in which you can put whatever you want.
In the example below, if we have a div and imagine it is a box, we can add another div element in it and it is like having a box inside a box.
Another more complex example, see if you can understand it:
It seems pretty useless now but once we want to style our web page and play with the layout, this is essential to understand.
Exercise:
Get a piece of paper and draw the boxes according to this code.
A very common HTML structure
Now that we have learned a little about how HTML element works, we will learn how to write a proper web page. Imagine the code we wrote before was like drawing an arm or a leg, but now we are going to draw a whole person. The code below is the most basic structure for a web page and what each section implicates, we might add more things to it later but now we will keep it simple for now.
Line 1: we tell the browser: this document is an HTML page.
Line 2: Everything goes inside html container
Line 3 - 5: head of our HTML man, inside head goes everything about the web page but doesn't show on the page itself, for example, the title on the tab. Or the tiny icon next to the title on the tab, learn how to add the icon here.
Line 6 - 9: body contains everything that you want to show on the page.
Copy the template below and use it every time you create a new page.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>This Is My First Web Page</h1>
<p>My first paragraph.</p>
</body>
</html>
Try more HTML elements
Exercise:
Create a web page using all what you have learned today, give a little thought about the content, you can make a little introduction about yourself, or a news bulletin, go as creative as you like. If you don't have an idea, you can also recreate our RefugeesCode website.