x

I have a 3 week old baby at home, my response may not be a quick as it normally is.

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.

Newsletter Signup

Timothy Oxendales website Design

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.

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.

tim oxendale View All Blog Posts

Related posts

10 Spectacular Web Design Trends for 2019

More than two-thirds of people will give up on a website if it is ugly to look at. What people view as unattractive web design can change over time, too. You definitely don’t want to be stuck with a gimmicky design that is five years out of date. Knowing what is trending going into the next  … Read more

The Importance of Website Design and What You Need to Know

Understanding the importance of website design can be difficult. This is especially true when your business is putting forth a big investment towards it. Many come to terms with the mentality that if the website exists and functions, then it’s “good enough”. This is far from the case, unfortunately. In a digital era where the  … Read more

How to Reduce Your Website Page Weight

In 2018, Google announced that it is including loading times for all sites, including mobile sites, as part of their online search rankings. Page weight is basically internet gravity that slows load time. Several forces affect your website’s performance and user experience. The way to lessen the drag is to reduce pageweight or reduce page  … Read more

Newsletter Signup