Introduction to HTML

If you haven’t already, please read our Introduction to Coding For Building Websites. It talks about all the languages that you will learn in this 4-part course. This is the first lesson of the first part, and we will be starting to learn HTML. Please note that this is for beginners who know nothing about coding. Please skip ahead if necessary if you know the basics already.


Please open your text editor. A text editor is a type of program used for editing text. From the text editor you can create your very own website without having to download or buy anything- though it won’t have a proper domain. Everyone has one- if you are using Windows your text editor will be called Notepad, while it is called TextEdit for Mac. I will be using Notepad, but if you are using TextEdit don’t worry because it is basically the same thing. You should already have these programs installed already as it should have came with your computer.

Now with your text editor, try to type in the following code and I will explain what they mean soon. Try to actually type them out instead of copy and pasting, as it is always good to get used to typing them. Also note that you do not need all this formatting. The indents are there to let you see the code better. It is kind of like breaking an essay into paragraphs. You do not need to break them into paragraphs to separate into sections which makes it easier to read.

<html>
  <body>
    <h1>My First Website</h1>
    <p>Hello! Welcome to my first website. This is written in HTML. </p>
    <h2>What is HTML?</h2>
    <p>HTML is a "language that is used to create basic pages for building 
       websites. </p>
  </body>
</html>

Now that you typed this into your text editor, save it to your desktop and title it My First Website.html

You can title it anything you want, really, as long as it ends with a “.html”

Now, you have a file on your desktop. Open it and it should open with your browser. You have just created your own website. To check to see if you typed it correctly, please press this button

Tags

Now you might be wondering what you just typed. Don’t worry, it is quite simple. Characters within brackets make up something called a opening tag. An example is <html>. Note that the italics are just here to help you see better. When you actually use code you don’t italicize them. Characters within brackets that has a forward slash makes up a closing tag. An example is </html>. Characters inside the tag tells you what the tag does. For example, an <html> tag tells you that anything between the opening tag (<html>) and the closing tag (</html>) is HTML code.  We always use the html tag whenever we are dealing with html code. The <body> tells you that anything between it and the closing tag is the document’s body (kind of like a body paragraph of an essay).

Text

In the code above, after you look at it through your browser, you may have noticed that the fonts are different. HTML supports 8 main “fonts”, 6 of them are headings. The last ones are called Paragraph and Preformatted, but let’s look at headings first.

There are 6 headings. The tags are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>, going from biggest to smallest respectively. The <h1> tag is the main heading, and it should be the title of your page. In the code above, the title of your page is “My First Website,” and as you can see it is between the <h1> tags, meaning that it is the main heading. The <h2> tags are subheadings, and so on.

The 7th kind of format is called Paragraph, represented by the tag <p>. As the name says, it defines the paragraph of a text. note that it is slightly larger than the <h6> tag but a lot smaller than the <h1> tag.

The last kind of format is called Preformatted, and the tag is <pre>. Remember how I said that in coding, the formatting doesn’t matter? Like a code that is one space apart and a code that is 10 lines apart will be the same thing? Well, in Preformatted, formatting does matter between the tags. The main difference between a Preformatted text and a Paragraph text is that Preformmated preserves the spaces, indents, and line breaks, whereas Paragraph doesn’t.


Title

You might have noticed that on your browser tab when you went to your website it said “My First Website.php”, or whatever you saved your file name as. This is because while we did have a header 1 tag, we didn’t have a title tag. So guess what? We are going to create a title for your website. Go to your text editor and try to add in the highlighted lines:

<html>
  <head>
    <title>My First Website!</title>
  </head>
  <body>
    <h1>My First Website</h1>
    <p>Hello! Welcome to my first website. This is written in HTML. </p>
    <h2>What is HTML?</h2>
    <p>HTML is a "language that is used to create basic pages for building 
       websites. </p>
  </body>
</html>

Now save it again, and open it on your desktop again. It should open with your browser, and this time on the very top of your browser it will say “My First Website!”

The <head> tells you about the page. It is where you put the title tag, which is <title>.

The following two tabs change content below.
Profile photo of Christopher
Christopher Chang is the founder of BlokkyWeb and content writer and main designer for BlokkyWeb.
Profile photo of Christopher

Latest posts by Christopher (see all)

Profile photo of Christopher

Christopher

Christopher Chang is the founder of BlokkyWeb and content writer and main designer for BlokkyWeb.

Leave a Reply

Support us!

If you like this site and want to support Christopher Chang please like our facebook site!