HTML - Beginners Guide Part 1
So you want to create your own website? Doing so is extremely easy in the basics, however if you want a fully-functional, professional-looking website then it's going to take some work and knowledge. I will divide this tutorial into 3 parts to keep it simple and short.
Lets start by noting that I am running a Windows 7 operating system, however basic HTML runs exactly the same in other operating systems and machines.
Lets start by noting that I am running a Windows 7 operating system, however basic HTML runs exactly the same in other operating systems and machines.
The Contents...
- Part 1 - Getting started - What do you need to create your first webpage. What is HTML?
- Part 2 - The basic layout and the basic tags.
- Part 3 - Saving HTML documents + headings and paragraphs.
Part 1 - Getting Started. What is HTML?
To create your first basic webpage, you don't need any high cost software or pay an experienced web designer... You just need to learn the languages that's behind every webpage. So we are starting with HTML - the language that builds the structure of a webpage.
The first question that you are probably asking is what do you need to create a webpage? All you need is a text editor, and it doesn't have to be a developer's text editor, Windows' built in Notepad is perfect and does the trick if you are building from scratch.
The first question that you are probably asking is what do you need to create a webpage? All you need is a text editor, and it doesn't have to be a developer's text editor, Windows' built in Notepad is perfect and does the trick if you are building from scratch.
The Notepad icon looks something like this in Windows Vista & 7. It is usually found in the Accessories folder in your start menu. It's recommended that you save a shortcut on your Desktop if you are going to be using this often for programming purposes.
However you can also download other text editors online and there is a whole variety to choose from. I will include below some other sites that offer text editors which you can download;
What is HTML?
- HTML stands for Hyper Text Markup Language.
- HTML is a markup language.
- HTML is the structure of the webpage, where CSS is the design.
- HTML documents contain tags and plain text.
Part 2 - The basic layout and basic tags.
First, lets talk about tags. Tags are what describe the webpage. For example... The <html> tags seen below are found in ALL HTML documents, and describes the webpage type - which of course is HTML. As you can see below, the first tag is <html> and the second is </html>. This is because the '/' symbol indicates that we are closing that element and any data written after the closing tag is not included with that element.
<html>
</html>
So that's how tags work. Now we are going to introduce some new tags. These include <head>, <title> and <body> - Lets talk about these more in detail.
<html>
<head>
<title> Website Preview </title>
</head>
<body>
</body>
</html
The above is the most simplistic and basic HTML layout for a beginner. As you can see, just like before we started with the <html> tag. We then added the <head> tag, which is the container for all head elements. This includes providing meta information and instructing the browser where to find style sheets etc. This will be included in later tutorials. Also inside the <head> tag is the <title> tag. In this element we want to add the webpage title. This defines the title of the document, and is shown in the browser's window. It is also the name given when the visitor saves the website as a favourite.
For instance, you can see that I named it 'Website Preview'. If you preview this in your browser you will see the webpage title as 'Website Preview'. We then of course closed the <title> tag and the <head> tag as we are not going to add any more information in that element in this tutorial.
We then come onto the <body> tag. This element includes everything on the website that is visible to the visitor. This includes text, images, lists, tables etc. All information that you want to share on your website will be in between the <body> and </body> tags.
Then of course we finish the document by closing the HTML tag (</html>).
Part 3 - Saving HTML Documents + Headings and Paragraphs.
So now you've learnt about the basic layout, some simple tags and what each of them mean. Now it's start adding some information on our webpage, however here's a few tips to get you started...
Now it's time for you to try it yourself. So let's start with headings. Start with using the layout above and save it as a .html file in your new folder named 'My Site'. If you try opening this it will preview in your browser, however it will be blank as we haven't added any information.
Headings are very easy to add if you remember that there's 6 heading sizes. 1 being the biggest and 6 being the smallest. Of course you can add normal text and configure the font sizes, however this is the easier way to add headings. Let's try it out...
- Create a folder on your Desktop called 'My Site'. This is where you can save your website files.
- Then create another folder inside the one you just created, and name that one 'Images'.
- Remember to ALWAYS save your webpage document as 'example.HTML' - This is extremely important as it tells the computer that it's a webpage document.
Now it's time for you to try it yourself. So let's start with headings. Start with using the layout above and save it as a .html file in your new folder named 'My Site'. If you try opening this it will preview in your browser, however it will be blank as we haven't added any information.
Headings are very easy to add if you remember that there's 6 heading sizes. 1 being the biggest and 6 being the smallest. Of course you can add normal text and configure the font sizes, however this is the easier way to add headings. Let's try it out...
<html>
<head>
<title> Website Preview </title>
</head>
<body>
<h1> Heading 1 (BIG) </h1>
<h3> Heading 2 (Medium) </h3>
<h6> Heading 3 (small) </h6>
<body>
</html>
Webpage Preview;
So that's how we add simple headings in webpages! We can also add paragraphs which is extremely easy and requires the <p> tag. I will now start to make an example website using the tags and layout that we have gone through. Let's get started...
<html>
<head>
<title> My First Site </title>
</head>
<body>
<h2> Welcome To My First Webpage </h2>
<p> This is my first webpage that I have created using Notepad in Windows from scratch.
This is my first time using the HTML language. </p>
<h5> Thank you for reading. </h5>
</body>
</html>
Webpage Preview;
So now you should of created your own basic webpage! As I said this is a beginner's guide and is very simple, yet I will get more advanced as I go on. I will continue from this point on the next guide, so keeping your folders and files in recommended.
Thank you for reading through my HTML beginner's guide. I hope you learnt something new about HTML, and that you progress throughout the tutorials. In future, I will talk about adding images, adding lists and using hyperlinks to create a functioning website. So I'll see you soon guys, be sure you share this guide with your friends!