HTML and Blogger templates
his text presents basic concepts about the structure and HTML templates blogger, but without getting too by INFORMATIQUES. Serve to support the description of other techniques bloguÃsticas.
Content:
Structure of an HTML document
Concept of client / server
CSS and DIV
HTML or XML?
Structure of a template blogger
Structure of containers of template
Conclusion
Structure of an HTML document
An HTML document is a plain text document which mingle commands to the browser to interpret this text as you are reading. Generally, the structure of an HTML document is as follows:
<html>
<head>
.....
</ head>
<body>
.....
</ body>
</ html>
In this example we can see that:
The dots are content and miscellaneous commands, the rest are HTML commands;
HTML commands (called HTML tag or simply tag) are contained between <and> characters.
An HTML command is formed by a part of "opening" command (such as "<html>") and a "closing" command (such as "</ html>"). The opening part of a command begins with "<", followed by him command itself (characters up to the first space or by the ">" sign), continues with parameters specific to the command, and ends with ">". The closure part of the command begins with "</", followed by the same characters you command the opening and ending with ">." Thus, the command lines 1 and 8 form a respective pair of opening and closing.
Although not shown in the example, some commands close themselves, as is the case of the command that inserts an image: <img ..... />. These commands start "<", follows them the command itself (characters up to the first space), continue with specific parameters of the command and end with "/>".
An HTML document necessarily begins with line 1 and ends with the line 8. Lines 2 to 4 and rows 5 through 7 form two main blocks. The first block contains instructions for the browser and the second block contains the browser will display a page. Before the first line should contain information about which version of the document is being built, which is done with the command "<! DOCTYPE HTML PUBLIC .....>."
There are specific controls for each of these blocks.
Generally, HTML commands that contain the opening and closing can be chained within each other as long as they respect the order "first to open, last to close" (see the commands in lines 5 and 7).
Concept of client / server
Called client device where the HTML document will be shown (the browser, usually) and is called the server software that runs on the computer that can be accessed by a URL (the http://bloger.com, for example).
When entering in the browser the address of a site, the server processes the request and returns a result. Next, the browser receives the request and may perform additional processing until finally the result is shown. Example:
I type in the browser http://comptechdigg.blogspot.com;
Primir to enter, the browser sends the request to the blogger's blog home page;
blogger, containing the texts of posts in a database, read the blog settings, get the posts to show and mix them with a template that is in use. Then returns the result to the browser;
the browser handle the response returned by the blogger and interprets the response received. Besides the content to display, between commands may be formatting commands, positioning and further processing (with javascript). Having javascript to be processed, the browser executes it, can profoundly alter the response returned by the server;
finally the result is presented to the user.
CSS and DIV
The formatting and placement of the contents of an HTML page can be made with CSS, placing the class attribute in the HTML element. The properties defined by the class of an element will be valid for that element, and for those who are in it (unless they are redefined by another class or specific formats).
DIV is a structural element of HTML and mainly serves to define the position of content on a page. A DIV associated with a class allows you to position the contents and assign them to specific formatting.
HTML or XML?
An HTML document is a particularization of an XML document. This area will not go into specifics but who want to know more you can read here: http://pt.wikipedia.org/wiki/Xml
Structure of a template blogger
One blogger template is a special document in XML format, similar to an HTML document but with additional commands. A template can have various structures, and the following blocks an approach quite common:
Header (header);
Area posts (posts area);
Component area (widget area);
Footer (footer).
<? Xml .... ?>
<! DOCTYPE ... >
<html .... >
<head>
<b:skin> <! [CDATA [/ *
# outer-wrapper {
....
}
# header-wrapper {
....
}
# main-wrapper {
....
}
# sidebar-wrapper {
....
}
# footer-wrapper {
....
}
]]> </ b: skin>
... other settings ...
</ head>
<body>
<div id='outer-wrapper'>
<div id='header-wrapper'>
.....
</ div>
<div id = 'main-wrapper' >
.....
</ div>
<div id='sidebar-wrapper'>
.....
</ div>
<div id='footer-wrapper'>
.....
</ div>
</ div>
</ body>
</ html>
Lines 1 and 2 classify the template. From an existing template and leave them as they are.
Lines 3-40 are the HTML to send to the browser. Contains commands that are interpreted by the blogger before sending the response to the client.
The block head of the HTML document is between the lines 4-23. This block is where files include javascript, CSS and CSS which defines the structural blog (lines 5-21). The CSS structural blog defines a set of classes (containers), positioning the blocks as the previous figures in specific locations of the HTML page.
Between the Lines 00:39 is contained content of the blog itself (header, posts, sidebar, and footer). In the figure are shown blocks corresponding to the first of the three previous figures. Highlight:
the various blocks of the template are contained between DIV tags;
each DIV has a property "class" that identifies the corresponding CSS class d. This class is defined in the CSS block head.
The structure of the template containers DIV Within each of the containers forming the template, as there are blocks which follow:
<B: section ... >
<b: widget id = 'HTML1' type = 'HTML' ... >
<b:includable id='main'>
... content .....
</ b: includable>
</ b: widget>
</ b: section>
The "section" group blocks such as multiple columns in the sidebar. Within each are a "widget" which is the "gadget" that shows the contents of the section. Finally, within the widget are "includable" which are the actual content: text, images, javascript, etc..
The widget accept specific content based on their "type" and must have an identification (ID) unique throughout the template. This identification has to be formed by the following type of number.
Widgets can be of the following type:
- BlogArchive
- Blog
- Feed
- Header
- HTML
- SingleImage
- LinkList
- List
- Soon
- BlogProfile
- Navbar
- VideoBar
- NewsBar
