Pages Menu
Categories Menu

Posted by on Aug 24, 2012 in Guides / Tips |

HTML for Beginners Course, part II

HTML for Beginners Course, part II

On Wednesday we started with our HTML for beginners . Here we explain the reasons for learning even without being web designers and programmers, as well as having a little bit about the origin of language, the importance of the correct labels and file naming. Today we will go a little further with the basic structure of an HTML document, the major labels and their attributes.

Structure of a document

For a browser can properly read an HTML document, of course have to have a certain order, and the information must be locked in the correct tags. Again, we stress the importance of closing all the labels that are ever opened.

HTML documents are divided into two parts, the header and the body. In the previous installment, we talk about how important it was the before it starts. Now let me explain a little more about it. But first, we must clarify that all HTML documents open with the and end with html>. Maybe we can see the format we tested whether locally, but is unacceptable – from any point of view! – Start a document without adding this tag.

As mentioned, the marks the beginning of the header. This section of the document will find all the elements of the page that will not be visible to the user but that will be interpreted by the browser. For example, JavaScript scripts, metadata, page title, etc.. Here is also included CSS code that will give you the page layout. Which leads us to make a clarification to delve into another delivery: no longer the ’90s and we’re not hosteando our pages on Geocities. Not use HTML to try to design “cute”.

The second part of the paper is the body, whose beginning is marked by the tag. Here are all the contents that will be visible to the user. So whatever is JavaScript, CSS, can not be included within the body-except the external JavaScript link before closing the body. The labels are made so we can work in peace and have all our well structured spaces.

Tags important

Before listing the most popular tags we have to make a clarification on the types of items that may contain a label. Each label can contain within it another label that marks certain semantic features. For example, within the label

(in paragraph or paragraph) I can add the label to determine typography, the label to emphasize or to put in bold.

In the old HTML, the most primitive, the latter two labels mentioned were considered as an aspect of design and identified as (in bold) and (in italic). Today this is defined through CSS and what we do with HTML is to explain this change in semantics to the text format. This is how we emphasize, but not put in bold, because then through CSS we can create a rule that all bold typography and color have a different, for example.

Returning to the main theme, this label in labels is because we have two types of elements that can differentiate the browser. This is inline elements or inline elements and block elements or block elements. The difference is that the block elements always occupy the entire space of the block to the end of the line, whereas only inline elements occupy space having determined. The majority of the block elements may contain elements inside line, but not the reverse. So, I can have a

within, but not vice versa.

We then list and describe the most important tags of an HTML document:

  • <html>: this tag is responsible for marking the beginning and end of the document.
  • <head>: is responsible for defining the header. Here you will find information on the page is important for the browser and the operation of the page, but invisible to the user.
  • <title>: is included in the header and the owner is responsible for the page. We may see the name in the browser tab.
  • <body>: marks the beginning of the document and the content that the user can view. Inside the body tag are all tags that mark the structure and format of the page.
  • <p>: paragraph tag. This marks the beginning and end of a paragraph. We can make a continuous text of several paragraphs without using the browser and see no difference where one begins and the other ends. This tag has several formatting attributes that can be applied, as discussed below.
  • <h1>, <h2>, etc: labels are headed. Not to be confused with the , these tags are contained within the body and serve to create titles and subtitles. Through CSS you can give them different attributes.
  • <table>: used to create tables within the document. In the early days of the Internet, in order to give a more attractive format the pages, using HTML tables are used to create the structures. This of course gave an impressive weight to pages and was very sloppy, fortunately in this DIV we deal with, but not for this course. Tables, surprisingly, are still used to create web pages, although not recommended.
  • <form>: is the label that marks the creation of a form. Now there are many ways to create online forms, and if we are only just beginning with HTML should be used to practice and nothing else. This tag has many tags as own allowing the user to complete fields.
  • <iframe>: with this tag we can insert complete web pages in other websites. It can serve to create image galleries, and more. Today its maximum deployment in the tabs of Facebook, with a much more modern but with the same spirit.
  • <a>: this is the label of the links. You can link to external HTML documents or different parts of the same document through anchors. For example, the menu of every Wikipedia article, when extensive, is handled with anchors. Each time you click on one of these titles anchor us to the part of the document to which we want to go.

These are not the only available HTML tags to a document. As we move forward, we need more labels. But the more join, eg in the case of the tables, the heavier the document and the longer open the browser. The idea is to make a light and avoid site free use of labels. Attributes We finish our day delivery with tag attributes. You can go by the name of imagining what it is. What attributes do is give the browser information on the label to be read properly and our more complete. Attributes are a way to customize the HTML tags.

Each HTML tag has a list of attributes that can be used. Generally repeat from label to label but some attributes will not work on certain labels. The attributes that are used for all labels are called common attributes and soon we’ll have them memorized. In turn, these common attributes are divided into core, internationalization and scripting. In HTML Help can find a complete list with all the attributes of this type.

But nowadays most used attributes are id and class. The id attribute helps us create a unique identifier for the label, that differ from the rest of the document. With the class attribute we are creating a class label, which will differ from the rest. The fundamental difference between class and id is that multiple tags can have the same class, but the id will be unique to a particular tag.

Why are the most popular? Well, are most commonly used in CSS and JavaScript. Through id and class can create different CSS rules to create formats. And because of the existence of these two attributes, the attributes that are typically imposed on <body> <p> or more are no longer used.For example, if we wanted to change the font before a single paragraph in the entire document, we had to use the <p> not <font> in order to do so, and add more attributes. With CSS we can create an id in the HTML for the particular paragraph we want change, and we will be saving good addition lines of code in the document weight.

In the next installment, we’ll be talking about the DOCTYPE, links and anchors, and the correct use of the images on a web page. We’re saving the big guns-tables and forms-for last.

Tags: , ,