If you’re looking to learn Web Development, or simply want to be able to make minor modifications to your website without paying someone hundreds of dollars, this article is your first step. In this four part tutorial series, we are going to learn the basics of the markup language HTML and how it applies to Website development and maintenance. Each tutorial part will be kept relatively small, so as to keep you from feeling overwhelmed. To successfully follow along, all you need is your computer, a web browser, and text editor. Let’s get started!
HTML, The Language Of The Web
Instead of opening with a traditional preface regarding the origins of html, we are going to wade right into the weeds.
<html>
<head>
<title>My New Website</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
The code above is considered to be the very bare bones requirement for a valid html page. Html consist of “tags” that together, create elements. Each element consist of an opening tag and a closing tag. For example:
<body></body>
The body element above consists of the first tag, or opening tag, and the closing tag follows. Elements, in general, are used to enclose or nest other elements and/or text. For example, if we wanted to create some words in our body element, we could do this:
<body>Some Words!</body>
As you can see, our text is nested within our body tags. Nesting elements and text in this fashion creates the base of html programming.
Creating Basic Html Files
Next you are going to create your own html file that you can use to follow along with the rest of the tutorial. First, you’re going to need to decide what text editor you would like to use. At this point, the type of text editor you use is irrelevant, as long as it can create, edit, and save text files. Once you have your text editor open, you want to create a new file, then save that file as part_one.html. Make sure to save the file somewhere relatively easy to find. Your desktop is likely your best bet. Html files are simply text documents that contain the .html (or .htm) extension. So they are extremely simple to create. Once your file is created and saved, if it is not already open, go ahead and open it in your text editor and copy and paste this code into the file:
<html>
<head>
<title>My New Website</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
You can then save the file with the newly added code. Next, find the file you just created and double click on it. It should open the file using your default web browser. If it does not, you can open your web browser manually, and open the file using the “Open File..” option. Once the file is open, you should see a blank white screen with the words “Hello, World!” at the top left. Congrats! You’ve just created your first html template. It’s a little bare, but this is the base for every website on the internet.
Primary HTML Elements
Now that we have a working html template, let’s take a quick look at some basic html elements and what they can be used for. It’s important to keep in mind that there are many html elements that we will not cover in this tutorial. Near the end, we will discuss appropriate resources for looking up the type of element you require.
The first element in our template is the html element. This elements will always exist as the highest level element in your template. That means, the html tags will always wrap all other elements. The following is not considered valid html:
<body>
<html></html>
</body>
The next element in our template is the head element. The head element is where you place all of the non user visible elements in your template. A good example is the title element. Any css, javascript, or meta tags that your web page also requires should most likely be placed in the head element.
<head>
<title>A title element is placed in the head element because it will not be part of our visible web page</title>
</head>
The title tag in our template is also mandatory to create a valid html page. The title tag is used to declare the title of the html page and can be viewed at the very top left corner of your web browser. Remember, as mentioned previously, your title element will always exist inside your head element in your html template. Don’t forget this tag! It has significant validation and SEO impact on your websites.
<head>
<title>Your Page Title Goes Here</title>
</head>
The body tag is where your website content will begin. All parts of your website that you want viewed by it’s users should be wrapped in the body tag.
<body>
If your users will see it as part of the website,
it should be wrapped in the body tags like this.
</body>
Although the paragraph element is not really a “primary” html element, it is used enough that it should be considered a base element, at the least. The paragraph tag is named aptly, as it is used for wrapping text paragraphs.
<p>This is a paragraph of text that we will wrap in paragraph tags</p> <p>Another paragraph of text to be wrapped up</p>
Another base element are heading elements. Heading elements are used to indicate important page information. There are six heading elements in total and they range from most import, h1, to least important, h6. Copy the following text and paste it between your html files body tags, save the file, and refresh the html page in your web browser.
<h1>Some Import Text</h1> <h2>Some Import Text</h2> <h3>Some Import Text</h3> <h4>Some Import Text</h4> <h5>Some Import Text</h5> <h6>Some Import Text</h6>
You should see six representations of the headings element that looks similar to this:
Some Import Text
Some Import Text
Some Import Text
Some Import Text
Some Import Text
Some Import Text
With our new found knowledge of these basic html elements, let’s create a small text only web page. Place the following markup into your html file:
<html>
<head>
<title>My New Website</title>
</head>
<body>
<h1>My Website!</h1>
<p>This is a website created using only the most basic of html elements.</p>
<h2>What did we learn about html?</h2>
<p>In this article, we learned that html elements are created using an opening and closing tag. We also learned that html elements can be nested inside each other.</p>
<h2>What Elements Did We Learn?</h2>
<p>We learned the html, body, title, paragraph, and heading tags</p>
<h2>Did We Have Fun?</h2>
<p>We Sure did!</p>
</body>
</html>
Once copied to your html file, save and reload your page.
Congratulations! You’ve made it through your first html lesson. That was easy, wasn’t it? As always, if you have any difficulty, suggestions, or questions, feel free to leave a comment below.
