HTML Text

Basic HTML Tutorial

HTML is a short acronym for HyperText Markup Language. The language consists of tags surrounded by angle brackets and can affect the way a person sees a website. It can be used in scripting languages like PHP, and JavaScript to person any number of actions.

Example of a tag:

<head>

A basic page consists of several key points that should be placed in the layout. There will be another tutorial illustrating how to build a basic page, but below is very general example of how a web page is composed. In a way, the HTML to a browser is somewhat like writing is to a Book. It tells a story all in itself on how the page should look.

Here is the basic bare bones structure of a page:

<!DOCTYPE html>
<html>
<head>
<title>Your Site Title</title>
</head>
<body>
<p>Your Site Content Goes Here.</p>
</body>
</html>

The Document Type, HTML Head, Title, Body, tags are extremely important and should always exist when coding a website layout or the page may not show up properly or not at all. If you notice, the tags seem to be repeated, but the second time it is repeated with a forward slash (‘/’) in front of the tag name. For every open tag, there must be a closed tag. Some tags like linebreak (br), and image source (img) tags are singular tags and the forward slash is within the url.

Just a few example of tags that do not have a paired tag:

<br/>

<img src="YOURIMAGEFILEHERE" alt="IMAGENAMEHERE" />

If you put a web page together, you can label the page with the extension of .html or .htm and view it offline (without accessing the Internet) or you can load it to a server, whether you pay for a webhost or for a free account.

When breaking down the code above for the basic HTML page, you will note that there are really 3 main sections: the header, the content, and the footer.

The Header

<!DOCTYPE html>
<html>
<head>
<title>Your Site Title</title>
</head>
<body>

The Content

<p>Your Site Content Goes Here.</p>

The Footer

</body>
</html>

In between the body tags goes the code for all of your layout and content. In the header, that is normally where you will put in your style sheet code and any elements like JavaScript or other script to help allow your layout to dynamically function.

Timothy Oxendale
I’m a freelance web designer & developer and I work with great individuals, small-to-medium sized businesses and start-ups. I aim to have a great relationship with all my clients where I can add value to their business by being dependable, honest and by doing the type of work that makes a difference.

Newsletter Signup

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.