So, you’ve hopefully watched the opening video in this course and are now ready to begin coding your very first web page. In this tutorial we look at how HTML markup language is formed and we will write our main heading and starting paragraphs.
To start with, create a folder that will contain all of your website files. I will call the folder, beginner's course, and I will locate mine in the documents section of my hard drive, but you can place yours anywhere you like, as long as you are aware of the file location.
Next, open the folder in your code editor, which we downloaded for free in the first part of this beginner’s course. Now we can control all of our website files and folders from within the code editor.
So, let’s create a new document file in our folder, which we will call index.html. The home page of any website is called the index page, and it is the standard page the web browser looks for when a URL is entered into the search engine.
We give our document the extension of html, as that is the type of document we will be creating. This is similar to, for example, when we create a word document in Microsoft Word, and it is a docx file type.
OK, we have our blank index.html document as our website home page now. If we load this into our web browser, by opening the file, we can see that the web page is blank. Depending on your computer settings, when you double click the file to open it, it may try and open it with a different program, or even ask you what you want to open the file with. Simply choose your web browser if asked, or right click and choose your web browser that way.
Now, to understand why we use HTML at all, and to prove the web page is working, let’s run a little test.
We will write something into our blank index.html document. I will write the main heading for the page we are going to build in this beginner’s course, “WebCodeFun’s Pizza Tomato Sauce Recipe”. But you can write whatever you would like your very first website words to be!
WebCodeFun’s Pizza Tomato Sauce Recipe
If we refresh the browser, we can see the text printed out on our webpage in the top left-hand corner.
Now, to expand this test, let’s write a couple of starter paragraphs. I will write some opening lines for our pizza sauce. I will space this out, as we would normally.
WebCodeFun’s Pizza Tomato Sauce Recipe This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away. You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.
If you refresh the web page in your browser, you will see that the web browser has completely ignored the spacing we have entered. All the words are together on the same line and only one space between words.
This is because the browser needs to be told how we want it to display our web page. We need to tell it to add line breaks, or to space out words. We need to tell it whether we want text to be small, large, bold, in a list, etc.
Imagine if we wanted to add colour and graphics; how will the web browser know what to do with them? Where will they sit? What size will they be?
This is where HTML, or HyperText Markup Language, comes into play. It is a set of rules that all web browsers can translate, and so we can use it to tell the web browser how we want our web page to be interpreted.
Let’s add our first piece of HTML and spruce up what we have a little bit. Firstly, we will tell the browser that we are using HTML to markup our web page. HTML5 is what all new websites use.
Every html page we build will always start with <!DOCTYPE html> at the very top.
When previous versions of html were being used back in the old days, the browser had to be told which version of HTML, or other language, was being used. Fortunately, those days are over, and this is all we have to add. You will do this for every web page that you create, so it will become second nature after a short while.
We then create our root element for the page with the <html> tag. Simply type the opening tag <html> and the closing tag </html>.
<!DOCTYPE html> <html> </html>
HTML tags can be written in any case, as they are case-insensitive. But it’s best practice to write them in lower case, as it makes our code easier to read. The html element wraps all the content on the page. Within this is the <head> element and the <body> element.
<!DOCTYPE html> <html><head> </head> <body> </body></html>
The head element is a container for all the things we want for the page, that isn’t the content we want to display. This will include links to our CSS, what language the page is written in, etc. Anything you write within the head tags is not expected to appear on the web page for viewers. Within the body element, is all the content we do want to display on our web page. This can be headings, text, images, videos, games, etc. Let’s move our text into this element then.
<!DOCTYPE html> <html><head> </head> <body></html>WebCodeFun’s Pizza Tomato Sauce Recipe This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away. You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</body>
OK, our text is now in the right place, but it will still not be formatted at all, to do that we need to add some more markup to it. Before we do that though, let’s quickly learn how to add comments to our HTML page.
Comments are ignored by the browser, so whatever we put in a comment will have no bearing on our web page. To create a comment, we open it with <!-- and we close it with -->. Anything we put between these two markers will be ignored!
We should use comments to keep track of our code, make it more readable and easier to skim to the section we want. Although comments will not appear on the web page, anyone can read them if they open the source code for the page, so don’t put anything you wouldn’t want to be read in there. We will use comments throughout this course to help with our learning.
<!DOCTYPE html> <html><head></html><!--HEAD SECTION--></head> <body><!--BODY SECTION--> WebCodeFun’s Pizza Tomato Sauce Recipe This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away. You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</body>
To start with, we have added a comment to the top of the head and body elements on our web page.
Our heading and opening paragraphs will form the header section of our page. The header represents our introductory content. We can create our header element in HTML by wrapping the content in the <header> tag.
Within our header we have our heading, and we can make an element a heading in HTML, by wrapping the content in a heading tag. A heading tag contains a number from 1 to 6, i.e. these tags are h1 to h6. We will give our heading a <h1> tag, as it is the most important heading on the page.
Our two paragraphs within the header element will use the <p> tag, which in HTML is used for paragraph elements. These are probably the most common elements you will use in building web pages.
<!DOCTYPE html> <html><head></html><!--HEAD SECTION--></head> <body><!--BODY SECTION--> <header></body><!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p></header>
Now if we refresh the web page, we can see the heading is bigger and bolder, and our paragraphs are separated out below! Let’s take a closer look at what is going on in our code.
The tags tell the browser what type of element we are creating. An element is basically anything we want to be on our page, a heading, a paragraph, an image. Depending on what tags we wrap our content in, they will have a pre-set formatting that the browser will use. When the browser sees that we have marked our heading with the <h1> tag, it increases the font weight, adds some space around it, and increases the font size.
Similarly, the <p> element has a standard font size but will add some space below to differentiate that it is a paragraph. This is just like you would do if you wrote a paragraph with pen and paper, or on Microsoft Word for example. Now, these changes are generic and simplistic, and you’ll know from experience that when viewing a website, the site will look a lot different to what we have created so far here, but every website follows these same rules by using HTML. What we can do is override these standardised formatting rules and apply our own, using CSS, which we will get to in our beginner’s CSS course, but first we need to have a firm grasp on HTML.
You will always use <h1> for your most important heading and scale down depending on the importance of your subheadings. Your page should only ever have one <h1> heading, but you can choose as many of the other numbers as you wish. Whilst HTML provides us with 6 heading elements, in truth you will probably never need more than 3 or 4. With 6 they were making sure no one ever had a chance to run out.
That’s it for this tutorial. We have given our page its outline structure and created out header element, learning our first markup. In the next lesson, we’ll take a look at what sort of information we can put in the <head> tag and what affect this has on our website.