Basic HTML Tutorial – What is HTML?

HTML is a short acronym for HyperText Markup Language. The language consists of tags surrounded by angle brackets and can effect the way a person sees a website. It can be used in scripting languages like cgi, 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.


This is where YARRP will go

About Nile

Nile is a 32 year old female from Southern Illinois. Nile is a mother of 1 son. She is also a web designer and developer, a graphic designer, and a public speaker, who exclusively designs using WordPress. She is currently a student working for a Bachelors in Business. She also blogs at FamousBloggers.net

Comments

  1. Thanks remind my old college days. Those days i was little confuse in the usage of blackquote and pre tags.
    My recent post Samsung RF511-S02 Price – 156-inch Entertainment Laptop

  2. I like xhtml better than regular HTML. xhtml is more strict and you must close all tags. I think xhtml is a more modern coding, and is easyer to make work in different web browsers.. But the main structure you describe here is the same for both languages.
    My recent post How to maximize the link building value

  3. I`am just analyzed my template for HTML error and got 100 line mentioned error, can you suggest something to get rid of them? I`am blogspot user. thank you.
    My recent post You’re Luckier Than You Think And Yes It`s True!

  4. This tutorial is very enlightening .. I found it helpful.. thanks a lot.
    Anonymous recently posted..EMD- Expert Magento DevelopersMy Profile

  5. Actually i;m not a designer or coder but i know that html is one of the essential code. Thanks for this basic tips.
    ajmal recently posted..WordPress Newspaper and Magazine Themes | WordPress Newspaper and Magazine Themes 2012My Profile

  6. Hi Nile, This is great information! Html is a mystery to me, but you have given me some understanding. Am I ready to tackle it……um, I’ll have to say no on that. lol
    Thanks so much! You are a great help!
    Lynn
    Lynn Jones recently posted..It’s Time to Debunk the Myths about What Brings You JoyMy Profile

  7. Nice tutorial. It gives conceptual understanding of what html is.

  8. Thanks. This is something I want to know. In fact I want to study web development if I have the chance.
    Matt recently posted..AirAsia Direct Flights (Singapore to Clark Philippines) PromoMy Profile

  9. This is an auto development mode, studies are too tough for web development.

Speak Your Mind

*

CommentLuv badge