HTML and its Basic Structure

HTML and its Basic Structure: Before we begin to give life to the layouts we need to get to know some knowledge. The first step is to understand how a document or layout should be coded so that it is understood by a browser software.

The documents available on the Internet, regardless of the topic that they address (news, entertainment, science, commerce, etc.), are structured through a Hypertext Markup Language known as HTML. A markup language is a mechanism to add marks with some meaning to a text. Such marks are omitted from the version of the text that is displayed to the user.

Using an unformatted text editor (like Notepad or gedit), type the text piece below that represents the basic structure of an HTML page. After typing, save the file named “example.html”.

<Html>

<Head>

</ Head>

This is my first page!

</ Body>

</ Html>

The “example.html” file, if opened by a browser will present the result of the HTML writing. Note that most of the typed text (commands or tags) are deleted, so that only content between the tags is displayed.

There are numerous software programs that allow the construction of HTML pages without its user to know in depth the details of the language. However, it is recommended that at first, you use a text editor without resources for formatting to know and appropriate the basics of markup language to be able to exploit them in the future in greater depth, using an editor which will greatly facilitate the work.

The HTML language is used to work the structure of a website. It is true that it also allows you to act on this presentation, although it is not its specialty. Note that in the previous example, only two items are visible after the browser processing: the title, “My Page” and the information “This is my first page.” The remaining text only served to inform how the browser should display the information.

The marks used to give meaning to the text are known as tags. Most of the tags is the container type, ie, there is an initial mark that delineates the statement start and another one to close, closing the education effect on the content. The closing tag has the same name as the original mark and differentiates just because it starts with a slash (/). Some tags, however, are independent, meaning there is no need of a mark to close.

Tags can also contain attributes, as is the case of the <body> tag which marks the beginning of the body of the page and uses the bgcolor attribute to set the background color of the content area. The value of an attribute is always placed between quotation marks.

Note that the <html> tag delimits the beginning and the end of the HTML document (it is the first tag to open and the last to be closed). Also note that the tags can be presented hierarchically, ie within each other. This is the case of the <head> and <body> which mark respectively the header area and the document body.

The header section does not produce visual information and is used as a configuration section, in which we can indicate commands that should be read before loading the content that will be displayed. It is in this section that indicate, for example, the page title (<title> tag) and also metadata such as the author of the page, description, keywords, language, among others. The use of header <head> tag is optional.

Finally, after the header section, begins, necessarily, the body of the page – the <body> tag. The main body defines the area that will be displayed as content, ie, the visible area of the page. It is from the <body> tag that the HTML document will be structured. Some attributes of the <body> tag allow, for example, change the background color (bgcolor) and then use a background image.