HTML For Beginners Part 1
HTML For Beginners Part 1
Welcome to our HTML for Beginners series- perfect for beginners who are looking to get into web developing or just learn some basic HTML. This series is split up into 4 parts and we will be looking at some of the core aspects of HTML and how to use it.
The first part will focus on creating HTML pages using the basic setup tags. We will look at some of the most commonly used HTML tags that are used to create pages and by the end of it hopefully you will have a good understanding of the basic HTML page structure.
Creating A HTML Page
Anyone with a computer can create a HTML page. All you need is a text editor, like notepad, and you can begin creating your own HTML page. We are just going to simply create a HTML page that will be stored on your computer that you can access.
So open up your text editor, like notepad, and type some text such as "Hello World". Now save the file, and this bit is important, as hello.html - notice the .html extension? This will tell your computer to save the document as a HTML formatted page. If you go to view the file saved on your computer, you will see that it has turned into a webpage icon. Double clicking it will open up the document in your default web browser and display the text Hello World.
That's it! You've created your very own HTML page. You can create any HTML page just by adding the .html extension to the name. The web browser will then parse your HTML code and display it in your web browser.
We haven't actually used any HTML code yet; but we now can parse the different tags and attributes to make our page. If you didn't save the document with a .html extension, the file would just be a simple text document.
You can edit your HTML file simply by opening it up with your text editor again. It will display any code you have written as text again without opening it up in your web browser. To view any changes you make to your file, simply refresh the page in your web browser.
HTML Tags
You don't actually need to write any HTML tags in a HTML document for it to be considered a HTML page. In fact, you could just write plain text and the web browser would still parse it. But that's no fun and not very useful. So this section of the tutorial will introduce the concept of HTML tags and attributes.
A HTML tag usually follows the format of having an opening less than sign followed by a tag word followed by a greater than sign. That may sound confusing, but really it's not. The follow are examples of HTML tags:
<html>
<body>
<head>
<b>
<i>
All of the above are HTML tags. You can see that the tag is enclosed by less than and greater than signs. This is one way to recognise HTML content by looking at the tags. Each tag does something different. We will look at specific tags in the next section.
HTML tags can have a counterpart closing tag. For example:
<html></html>
<body></body>
<head></head>
<b></b>
<i></i>
These tags allow us to put text in between the tags. The text between the tags will then take on the effect of the whatever the tag does. For example, the <b> tag will make text between it bold. So the following line will output Hello World in bold:
<b>Hello World</b>
Not all tags have an opening and closing tag. Some tags are standalone tags, such as:
<br />
<input />
<hr />
Tags can also have attributes. These are settings that can be applied to the tag to make it act in a certain way. For example:
<input type="text" />
<input type="password" />
<input type="button" />
The follow input tag has the "type" attribute. In the examples above we have change the attribute to text, password and button. These are values which will change the way the tag work (when using this tag with an attribute of text, it will create a text field, when using it with an attribute of password, it will create a password field where the characters appear as ***** and when using it with the attribute as button, it will create a button that the user can click on).
HTML Page Structure
Now that we know what HTML tags are and how to use them, let's look at how we should structure our HTML document. We can put HTML tags anywhere in a document and they will be processed. However, in some scenarios, there is a format to where we should use the HTML tags. For example, Google Search Engines when looking at HTML pages, will process data which is properly formatted in the correct page structure and rank these pages higher than ones which have badly formatted pages. Different web browsers (such as Internet Explorer, Firefox and Google Chrome) will interpret HTML different if the HTML tags aren't used in the correct way.
The HTML structure makes use of 4 tags. It's quite simple to use and get going. Let's add the page structure to our already created HTML file hello.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Hello World
</body>
</html>
The first tag we use is called the DOCTYPE tag, which basically tells the page we are going to use HTML and to process the next code as HTML.
The 3 tags we have used after are the <html>, <head> and <body> tags. At the start of any HTML document, you want to enclose your page content in the <html></html> tags. This tells the web browser that you are using HTML.
Next we use the <head></head> tags; we will get onto these in the next section.
The <body></body> tags is used for where we put our HTML content that we want to display in the web browser. In this case we have used the Hello World example. You won't notice anything different between this version and your simple Hello World version because they do the exact same thing. Only now we have the correct structure in place for our HTML page.
Notice that the HTML tags are properly enclosed with each other. The <html> tag includes all the other tags and then is closed off at the bottom </html>. We want to put all our HTML content inside the <html> tags to tell the browser that we have HTML code that wants executing. We have the Hello World code inside the <body> tags which lets the browser know the content we want to display.
The <head> tag
The <head> tag is used to place all our HTML header tags. It sounds obvious enough; there are certain HTML tags that will have an affect on your browser or are used to output data to certain sources, such as bots like Google searching your page. We will quickly look at a few tags that we can place inside our <head> tag.
<head>
<title>Title of my page</title>
</head>
Here we are using the <title></title> tag. This allows us to name the document. Your web browser will display the title in it's browser window bar and on the tab that you are viewing. The name goes in between the two <title> tags. You can see that the <title> tag is inside the <head> tags too because the <title> tag is a header type tag.
<meta name="author" content="Patchesoft">
<meta name="description" content="HTML Guide For Beginners">
<meta name="keywords" content="HTML,Guide,Tutorials,Beginners">
The above tag shows the <meta> tag. Here you can see that this tag takes two attributes: the name attribute and the content attribute. For the name, we can have predefined values such as name, description and keywords (there are more!). The content attribute is used to define the data for the type of data. So for the <meta> tag with the name attribute set to author, we can put the content as our name (in this case Patchesoft).
<meta> tags are used to relay information about your page. Computer bots can scan your page for this information and use it to learn about the page. The keywords can also be used to help boost SEO (search engine optimisation) ranking so if you put in highly search keywords here that are relevant to your page it will give your page a higher chance of being found.
Conclusion
That wraps up the first part of our HTML guide! We have looked at the basic tags of HTML and how we can use attributes to set certain data values. In the next chapter we will look at tags used inside the <body></body> tags (output display tags!) that will allow us to create more useful looking content.
We will leave with a simple HTML example based on the content of this guide, see if you can figure out everything that is going on:
<!DOCTYPE html>
<html>
<head>
<title>Hello World Page</title>
<meta name="author" content="Patchesoft" />
<meta name="description" content="My first web page. Hello World!" />
<meta name="keywords" content="hello world, first, page" />
</head>
<body>
Hello <b>World</b>!
</body>
</html>
Enjoyed that? Check These Posts Out
Leave A Comment