html tutorial, internet tutorials

  Lesson 2: Understanding the HTML Basics  

    Meaning of HTML, Elements, Tags & Attributes    

First of all, let´s take a look at some terms you should know:

HTML stands for Hyper Text Markup Language. It´s a markup language that can be interpreted by different softwares like a web browser that reads and translates the HTML code and displays a webpage to the user according to the commands given in the HTML code.

HTML is a very easy and comprehensive markup language as you will see in a moment. The "World Wide Web Consortium" (W3C.org) is the international organization who develops web standards, web technologies and also defines the HTML specifications.

An HTML document is structured with elements, which represent different parts of the document. Most elements consist of three parts: an opening tag, some content and a closing tag. To illustrate the different parts of an element, let´s take a look at the element used for text paragraphs - P.

The opening tag contains the element name "P" within angle brackets "<" and ">". Hence, in the example above, "<p>" is the opening tag. Next comes the content (any text you like) and finally the closing tag which is similar to the opening tag but includes one forward slash "/" right before the element name.

So the function of tags is to tell a browser where a given element starts and where it ends and how it should handle the content within this element.

Important to know is that the element names are case-insensitive, which means that it makes no difference whether you use "<p>" or "<P>" inside your HTML code.

Empty Tags (also called "stand-alone tags") are elements which only consist of an opening tag. They don´t have neither content, nor a closing tag. You will get to know an empty tag in the next lesson.

Attributes are parameters used to further define and format the content of an element. They are included only inside the opening tags, behind the element name, in the following syntax:
Attribute-Name="Attribute-Value".

While the attribute names are case-insensitive (just like the element names), some of their values might be case-sensitive, so in order to avoid confusion and to stay on the safe side I recommended you use always lower case letters.

Here´s an example for an attribute.

centered paragraph

You see, the name of the attribute is "align" and its value in the above example is "center". And you guess what its function is ...
... you´re right - displaying all content within this paragraph in the center of the web page.

Display Example: This is how it looks like in your browser.

<p>this is a paragraph</p>

<p>this is another paragraph</p>

<p align="center">and this is a centered paragraph</p>



    The basic structure of an HTML document    

Watch the video to learn the very basic structure of an HTML document.

video
Video button not working ? Click Here

Display Example: This is how it looks like in your browser. ( just a blank page )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>
</head>

<body>
</body>

</html>

Now it´s time to get active yourself and create your first HTML document. We´re going to use this document in the following lessons to play around with HTML code. Watch the video and follow me through these steps:

  • open your text editor
  • copy and paste the above code in a new blank document
  • create a new folder for your website on a local drive of your computer and save the HTML document as "1stwebpage.html" in this folder.

video
Video button not working ? Click Here

In the next lesson I´m going to show you the bare minimum of information that you need to include in the HEAD section of your HTML documents. We´ll keep this very short and simple.


previous lesson top of page next lesson


    Web Design

  • Design and market your own professional-looking website with easy-to-use tools.

  The Lessons  

Introduction
Skills & Tools
HTML Basics
The Head Section
The Body Section
Images
Anchors & Links
Lists
Tables
Font Styles
Cascading Style Sheets
Website Layout
Domainname Registration
Website Logos & Buttons
Main Webpages
Legal Documents
Web Hosting Providers
Publishing Your Website

Editing Images


Glossary

FAQ / Support

Resources


Cheap Website Hosting
DailyRazor offers a full featured hosting plan for only $ 1.66 per month. Best choice for people on a low budget for hosting one website.

Multiple Site Hosting
Some webhosts allow you to host several different websites under one hosting account. This makes your hosting costs per site very cheap. My favorite webhosts:
Bluehost
Hostgator
Lunarpages

CSS Tutorial
"Styling with CSS" is a comprehensive and easy guide to web design with CSS for beginners. Highly recommended book that should be on your shelf.
Buy it from Amazon.

Home   :::    Contact   :::    Advertise   :::    Submit Tutorials   :::    Links   :::    Sitemap
Terms of Use, Disclaimers, Privacy Policy
© 2005-2009 EASYWEBTUTORIALS.COM
Page copy protected against web site content infringement by Copyscape