Hello, and welcome to your first lesson! This tutorial will show you the basics of getting started with HTML and creating your first hand-coded page.
What You’ll Need:
1) Notepad or a similar text editing program, such as TextEdit
OR
2) Dreamweaver
If you have Dreamweaver, there is a lot of help available within the program, such as auto-completing, that will really help you on your way. But, if you want to learn to do this manually so that you have a better understanding of what you’re doing and why certain code does what it does, then you should use a text editing program until you are more comfortable with the workings of HTML.
Getting Started:
You can begin a simple HTML page very easily. The following code will display a web page in your web browser when viewed:
<html>
<head>
<title>Lesson 1: HTML Introduction</title>
</head>
<body>
<p>This is our first web page!</p>
<p>This is a second paragraph!</p>
</body>
</html>
Let’s run through each part of the code step by step. First of all, you may have noticed that I have typed little angle brackets around a bunch of weird little lowercase titles. These are called element tags, and they tell the browser how to display the web page. You may have also noticed that I have typed them all in loercase. Currently, the standard says it’s okay to type these in either uppercase or lowercase, and while switching back and forth would still work in most browsers, it is better to stay consistent. I choose to try to use all lowercase because the World Wide Web Consortium (W3C) recommends lowercase in HTML4, and demands lowercase in XHTML. So, I would also recommend using lowercase when writing your HTML to prepare you for expansions, as eventually you will probably want to learn the standard practices for code writing and will want to ensure your code is valid as well. You’ll probably be thankful for that choice later on as you grow and learn more.
Okay, so next we’ll inspect each tag and what it does. The first tag we have is:
<html>
HTML stands for Hyper Text Markup Language. This language is used to tell the browser how to display the page. As you learn more tags, you’ll see how much of an affect HTML has on your text and the positioning of the elements within your page.
This tag is known as an opening tag. In order to have a well-formed and valid document, you must close all element tags as well. A closing tag consists of the same format, except you will add a slash (/) after the left angle (<) bracket, like this:
</html>
In order to avoid unexpected results or errors, you should always include closing element tags. While some elements allow you to omit the closing tag, such as paragraph tags, some browsers will still not display these elements as expected. It is better to stick with the preferred format in order to avoid future issues. This preferred format allows your documents to be considered valid and well-formed, and will soon become the standard, which means eventually, omitting tags WILL cause errors and your pages WILL not be displayed properly or at all.
So the opening and closing HTML tags tell the browser that all of the text and code between these two tags should be treated like a HTML document.
Next we have the <head> tag. Elements within the head element instruct the browser on where to find information about the web page, such as style sheets, meta information, the title, and much more. To keep things simple, we are only learning about the title of the web page in this tutorial.
The next tag is the <title> tag. This tells the browser that the text between the opening and closing <title> tag should be treated as the title of the web page, which will display at the top of the web page. This also serves as what the web page is called when a user saves this page to their favorites as well as the title that shows up in search engines. In our case, the title of the web page is "Lesson 1 – HTML Introduction".
After we set the title of our web page, we close the title element (</title>), then we close the head element (</head>). Next we are ready to start outputting text to our web page!
The next tag, <body>, tells the browser we are going to begin writing the body of our web page. Everything between the opening and closing body tags will be what is displayed on the web page.
The next tag, <p>, is the paragraph tag. It tells the web browser that this text is to be treated like a paragraph. After each paragraph, you include an ending paragraph tag (</p>) to let the browser know that is the end of that particular paragraph. I have added a second paragraph in order to show you what this element actually does. You can see that each paragraph actually creates an empty line after each paragraph. It is important to know this in order to ensure your web page looks exactly the way you want it to.
After writing up our paragraphs and closing them properly, we have to close our body element (</body>). And finally after that, we close the HTML element (</html>), letting the browser know we are finished with the web page.
Save this web page with whatever name you want, such as test, or index, and be sure to include the .html extension after the name, such as test.html or index.html. This tells the computer and web browsers to treat this document as an HTML document instead of just a plain text document. If you do not add this extension, the web browser will not know to read the HTML tags and act accordingly. Instead, it would simply output all of the text you have just typed, tags and all, which is not at all what we want. To save in TextEdit, you have to make sure you select the HTML file format, or else the file will not be saved properly. In Notepad, if you just type the extension after the file name, it should save properly.
Save the file to a location you will remember, such as your desktop or a folder somewhere on your computer. I tend to create a folder on my desktop or in my Documents folder for testing purposes. After saving your newly created HTML file, you can double click on it to open it in your default browser. You can also right click on it and choose to open it with your web browser of choice. Or, if you need to edit it to make changes, you can right click on it and choose to open it with the program you used to create it (Dreamweaver, Notepad, TextEdit, etc.). You can also open the program you used to create the document and simply go to Open and find the document you want to edit.
If you’d like to view your newly created document, double-click it to view it in your web browser, or right-click on it and select “Open With” and then select your favorite web browser.
When you view your new document in the web browser, you should see this:
If you don’t see what I have shown in the above image, double check your coding and make sure there are no mistakes or simply copy and paste my code into your document and save it.
Congratulations! You have just completed your very first HTML web page! Continue to the next tutorial to continue learning about HTML and creating web pages.
Facebook
Twitter
LinkedIn
Myspace
Youtube
