HTML Tutorial 1: Creating Your First Website
Getting Started
The intention of this tutorial is to outline the basic concepts to creating simple web pages using HTML. Basic web pages can easily be created within a few minutes and without much instructions using the HTML language.
I'll begin with a bit of background information about HTML. An important fact to consider is that HTML isn't a programming language, rather a formatting language which can be used to format and change the way raw content is displayed on a web page. The letters stand for HyperText Markup Language and the elements used can be considered the basic building-blocks for creating your first web page.
For those of you interested in the history of the language, it was first specified in 1990 by the British physicist Tim Berners-Lee, who is known as the inventor of the World Wide Web. For the past 22 years, HTML has remained as the main language in which to design basic web pages.
Creating Your First Page
To create your first page, you'll need a basic text editor. Assuming your using a windows PC, you can start by using Notepad. Once you open Notepad there are a few tags you'll need to create your first page. HTML tags are words enclosed in greater-than and less-than characters (<>). Below, you'll see the bare-bones of any HTML web page.
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </BODY> </HTML>
What These Tags Mean
HTML pages are interpreted by browsers on your computer. Each tag tells the browser what to do. Below, I've outlined what each of the tags used above means. Everything between the opening tag (enclosed in <>) and the end tag ( enclosed in </>) is the content which is being manipulated.
- The <HTML> tag shows the browser that this is the start of your HTML code. The </HTML> is the end of your code.
- The <HEAD> tag includes important information about your webpage. I'll explain more about what goes in these tags later on.
- The <TITLE> tag is where you include the title of your webpage. This is the title that would usually be displayed in the bar at the top of your browser. The title tags must always be included in between the <HEAD> tags.
- The <BODY> tag is the main body of your webpage.
Below, I've added some content to show you what an extremely basic webpage could look like.
<HTML> <HEAD> <TITLE>My First Web Page</TITLE> </HEAD> <BODY> <p>This is a paragraph of writing.</p> </BODY> </HTML>
This time I added the <p> tags. These tags tell the browser that this is a paragraph of writing. You can try using this code for yourself now. Copy and paste the code into your text editor (Notepad) and save the file with a .html extension. Take a look at fig.1 to see how this is done.
To view your webpage after doing this, go to the folder where you saved the file and open it. Your webpage should look like the one below (Fig.2). Well done, although very basic, you've just created your first web page.
Some More Tags To Learn
Now you know how to set up your first page, you can continue by adding some more tags in the BODY area of the page. Here are a few for you to play with:
- <B></B> - The text between these tags will appear in bold.
- <I></I> - The text between these tags will appear in italics.
- <hr> - This tag creates a horizontal rule across the page. There is no end tag required here.
- <h1></h1> - These tags create a large header with the text.
- <h6></h6> - These tags create a small header. (Replacing the number after the letter changes the size of the header, 1 being the largest and 6 being the smallest.
These are just a few examples of basic HTML tags to play around with for now. In the next tutorial I'll go into more detail on how to create more visually appealing pages with the use of more tags.
Please Note: This tutorial is intended for complete beginners with no previous knowledge of creating web pages. I'd love to hear feedback if you found this tutorial useful or not and any ideas on how to improve.
Comments
No comments yet.
