jeudi 8 décembre 2011

HTML: terms and syntax (a tutorial for beginners)

At the end of October I published a post about CSS terminology which explained the basic usage of Cascading Style Sheets and technical terms used to identify and explain code parts.
Today we are going to do the same for HTML, because I feel that sometimes terms are not properly used, and we surely need to make things clear.
The following will be a short and undoubtedly not complete journey through the basic HTML programming. If you are a little bit experienced, you might find it boring... however, are we fully sure we use the correct terminology?

Follow me and see for yourself.


HTML
HTML stands for HyperText Markup Language and it is the programming language used to build web pages. The first version of HTML was defined in 1991. Today we often talk, write and discuss HTML latest version: HTML5.

The programming language is quite intuitive and it mainly consists of tags.

Tags
To show content on a web page we need to use tags. Basically every element in web page is composed by tags. An element is usually made of tag pairs. So here we go with the first terms! Let's try to explain tags with an example:
<p>Welcome to The Web Thought</p>
<p> is the start tag;
Welcome to the Web Thought is the content;
</p> is the end tag (made of a slash "/" and the tag name again);
<p>Welcome to The Web Thought</p> is an element.
There are HTML elements that do not have a start tag and an end tag. Those elements consists in only one tag (for example the <br> element).

Attributes
Every element might have attributes to better define its meaning. Attributes go in the start tag of an element and usually they consist of a name and a value enclosed in quotes.
<tagname attribute="value">content</tagname>
Now, something you might not know: quotes around values are not always needed, infact if the value has no space or any special characters like " ' ` = < and >, we can remove the quotes.
Another thing: we can use double quotes or single quotes, it doesn't matter.

HTML basic structure
The basic structure of an HTML page is made of the following elements:
  1. doctype
  2. html
  3. head
  4. body
So, we can create a simple HTML page like:
<!doctype html>
<html>
  <head>
    head content
  </head
  <body>
    body content
  </body>
</html>
The head content is different from the body content. The body content is where we want to insert our page elements, while in the head we are going to insert the document metadata.

Document metadata
The document metadata consists in a collection of information for the HTML document. The head element usually contains the document title, the character settings, the document description, keywords, scripts and information on stylesheets.
We shouldn't overlook the importance of the head element. First of all, it is to be noted that the document metadata will not be shown on the page (while the body content is). Secondly, in the head is where we insert references to JavaScript libraries such as jQuery, references to external stylesheets, we embed stylesheets and document related metadata such as title, keywords and so on.

Body content
In the body we can insert all the HTML elements that will generate the document as displayed by the browser. The general HTML structure should always be clear and immediately recognisable while programming. Indentation, for example, should be used to preserve the flowing of page elements in code view while consistent closing tags should follow a nesting structure.
An example:
<div>
  <font color="#000000">Welcome to The Web Thought </font>
</div>
The above code represents a good way of creating a document structure. Or, being more strict:
<div>
  <font color="#000000">
      Welcome to The Web Thought
  </font>
</div>
Remember that the more accurate is the coding process in terms of clarity, the easier it will be to understand and maintain the code itself.

Ok folks!, I think that's enough for today. I believe you've been bored enough.
Have a nice day and share your thoughts as usual!

author

This post was written by: Franklin Manuel

Franklin Manuel is a professional blogger, web designer and front end web developer. Follow him on Twitter

0 Responses to “HTML: terms and syntax (a tutorial for beginners)”

Enregistrer un commentaire

Inscription à : Publier les commentaires (Atom)
All Rights Reserved Blogging Tips | Blogger Template by Bloggermint
Sponsored by Florida Phone Book, Florida Accountants, Optician Jobs