Die2mrw007 Posted September 6, 2011 Report Posted September 6, 2011 STRUCTURE OF HTML FILES - GENERAL PRESENTATION An HTML file must begin with the tag <html> and end with the tag </html>. For the purpose of this tutorial (and the following ones), we will be working on the same example as before (our HTML file page.html). Remember that you will be using Notepad in order to modify the HTML code and that you will be visualizing the webpage using your favorite browser. A typical HTML file is composed of two different parts, namely the header and the body. These two parts play a very intuitive role: the header of a HTML page is there to contain basic information about the file: its document type, its title, the basic information that search engines should use in order to reference the file aka the meta tags, the external tools which will be used in the design of the page (for instance CSS stylesheets, which must be declared within the header). the body of a HTML page contains all the main content of the page, that is to say the content that you -the webmaster- want to deliver to your visitors. It will thus be constituted of paragraphs, lines, text, links, images, videos, etc … In addition to the above, an html file might also contain certain scripts, for instance javascript, which will be executed by your computer (provided that javascript or the relevant scripting language is enabled in your web browser). In order to insert lines of comments in a HTML file, you must start the first line of comments with <!-- and end the last one with --> Learn the HTML code: STRUCTURE OF HTML FILES - THE HEADER The header of your html file is contained within the tags <header> and </header>. Learn the HTML code: The document type The document type is there to indicate which type of document/encoding your browser will be dealing with. Most of the time, you can just omit this precision and your browser will be interpreting your document just fine (things get a little more complicated when you use special characters, in which case the document type might become compulsory). In the following, we will omit to mention the document type in the HTML code of our example file. The title The title of your HTML file is contained within the tags <title> and </title> (themselves included within the header of the HTML file). The title tag is there to determine the title of your webpage; this is an important element for at least three reasons: The title appears on the window displaying your webpage (or on the navigation bar) and indicates to the visitor which kind of content he can expect when visiting your page The title appears before the description of your webpage on search engines: that is thus the first thing that internet users will see and that will play a role in deciding whether they will visit your website or not. The ranking of your webpage in search engines is partly determined by the congruence between its content and its title. Indeed, titles contain keywords that should be correlated with those found in the body of the page. Learn the HTML code: Display the HTML file in your browser: The meta tags The meta tags are there to provide search engines with a certain amount of information about your webpage in order to optimize their indexing; the most important meta tags will be the title, keywords, description, language, and robot tags. A special tutorial will be dedicated to meta tags and how they are inserted within the header of your HTML file. The CSS declarations CSS (Cascade Style Sheets) allows you to define the format of your webpage in an external file (the interest being that you will be able to reuse this format for other webpages without re-typing all the definitions every time). A series of tutorials will be dedicated to CSS. For the time being, we will not use any CSS declaration in our examples. STRUCTURE OF HTML FILES - THE BODY The body of your html page is contained within the tags <body> and </body>. It is composed of paragraphs, lines, text, links, images, videos, etc … which are inserted according to a specific protocol. We now add a line of blue text to our previous example (the color element will be explained in another tutorial) : Learn the HTML code: Display the HTML file in your browser: STRUCTURE OF HTML FILES - TERMINOLOGY The previous example permits us to introduce a little terminology pertaining to the structure of HTML files. An HTML file is composed of elements which can be specified by attributes (each attribute being assigned a value). Back to our previous example, the font element has an attribute color whose value is blue. More generally: An element begins with the code <element> and ends with the code </element>. Its attributes and values are inserted within the first code as follows: <element attribute1="value1" attribute2="value2"> </element>. An HTML file is structured with elements, attributes and values. Typically, it contains a header and a body. The elements of the header play a role in the description of the HTML file, while the body contains all the information that the webmaster wants to deliver to his visitors (precisely the reason for the webpage). Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.