| The first is to clarify that these tutorials are not just HTML. Also work with stylesheets, the CSS, which will be responsible for defining, as the name implies, the styles of HTML tags. For example, in HTML use the label or tag < p > to write in a text that will fill a paragraph in our browser, and the style sheet for example define the color and font size of the text of that paragraph. |
| Every HTML document has a structure that clearly identifies it. Are a few opening and closing tags which identify and divided into parts with different functions. |
 |
| |
 < HTML > < / HTML >
|
| They are the first and last tags of our HTML code. Before < HTML > can not be anything that we want the browser to interpret it as HTML code, and after < / HTML > either. |
| < HEAD > < / HEAD > |
| It defines the beginning and end of the head section, containing information about the document, including title, author ... |
| < BODY > < / BODY > |
| It defines the beginning and end of the body of the document. All the code on our website will be between these two tags. |
| |
|
| Thus, a brief example of your website could be the first ejemplo1.html file: |
 |
| Where the line < p > Hola < / p > specifies that displayed a paragraph with the word hola (Hello in spanish) and the line < title > specifies the name of our website (top left of the browser window will appear this title). |
| NOTE: Both the HTML document as the stylesheet, it should be written on a plain text file. A program that could serve as editor for this is the notepad, for example. The name of the HTML document must have extension .htm or .html and the stylesheet .css. |
| We will learn some ways to write content on our site, but before you get full access to HTML elements, I will define an important distinction between them: |
| |
| HTML has two types of elements, the "block level" elements and "inline" elements. |
| "inline" Elements: |
| Can only contain data and other elements inline. Are represented from left to right, an inline element is positioned to the right of the last item shown inline, and so on. |
| "Block Level" Elements: |
| May contain other block-level elements and inline elements. Are represented from top to bottom, ie a block element is positioned below the last item placed on the page. This is because it causes a line break at the beginning and end of their representation. |
| NOTE: Only for the two definitions, it is understood that the concept of block element implies that the largest element inline. In fact, we use the block to be containers of other elements of both block and inline elements. |
| |
|
| May now be a little trouble, but as we move around will be easier. As a quick example, say that the HTML element < p > is an inline element used to display a paragraph of text and, if it contains other elements, element will be inline, while < div > is a block element that serves to specify a container like a box to get inside other elements. |
| Now we define it to write some text in HTML |
| |
| < P > < / P >: |
| Is the element that is used to write a paragraph of text. Is inline. |
| < H1 >< / H1 >,< H2 >< / H2 >,< H3 >< / H3 >,< H4 >< / H4 >,< H5 >< / H5 >,< H6 >< / H6 >: |
| These are called headers. Elements are inline. Often used to describe the sections they introduce. For example, we may write the title of a story with a headline and the text of the story with paragraphs. |
| There are 6 levels of headers, H1 being the most important and H6 the least. Visually, the browser will allocate the largest fonts led to major and smaller fonts the least important. |
| < BR >: |
| Force a line break. It is important to say that it has no closing tag. |
| < PRE >< / PRE >: |
| This element tells us that all the text contained therein is preformatted, ie appears in the browser as it is written. |
| NOTE: In item than < PRE >, the accumulation of white space are represented as one, and just a blank space after an opening tag, or just before a closing can not be displayed. |
| |
|
| The resulting code of the HTML document using these elements:: |
 |
| The aspect of the website is this: |
 |
| Click on this link ' EXAMPLE ' to view. |
| NOTE: The appearance may change depending on the size of the window. Consider the effect of the different sizes of headers, the result of applying the < BR > between paragraphs (a much larger-spaced) and the disappearance of the multiple spaces between words except in the formatted text with the tag < PRE > . |
| We know how to write a header and some text on our website, but we have not used anything for stylesheets. |
| Styles can be defined in two ways mainly. It can be done directly in the html document and can also be done in a separate document. To define the styles in the same document, we must declare the < STYLE > and < / STYLE > within the document header (between the < HEAD > and < / HEAD >). Currently use this form. The following tutorial explains how to do it in a different file. |
| To start using the styles, I will define a unique property of CSS to provide an example to us, but in another more complete CSS tutorial I´ll write about it again. |
| |
COLOR |
| Property that determines the color of the font text. It can be a keyword or a numerical RGB (Red, Green, Blue). The keywords correspond to the numerical values that represent, but you can select the code number you want (Usually use any graphics editing software to visually choose the color that we like and then see that the numerical code applicable). |
|
 The list of keywords with values are: |
|
maroon #800000, red #ff0000, orange #ffA500, yellow #ffff00, olive #808000, purple #800080, fuchsia #ff00ff, white #ffffff, lime #00ff00, green #008000, navy #000080, blue #0000ff, aqua #00ffff, teal #008080, black #000000, silver #c0c0c0, gray #808080. |
| |
|
| The syntax of CSS consists of a selector followed by a block of statements. |
| A block of statements begins with a key left ({) and ends with the right key (}) for. In the middle of them must have a list of zero or more statements separated by semicolons (;). |
| We can use an attribute such as color, with an HTML element name. This will cause all elements of this type that we use on our website, will be affected by the attributes that we have designated the stylesheet for that label. |
| For example, if we make a |
| P {color:blue;} |
| We will be giving the blue color to any text that is written on our website under the tag < p >. |
| We also can make a |
| .letraazul {color:blue;} |
| This defines the class letraazul. This class is what makes the font color blue. But what font colors? What we want. You just have to name this class in any of the HTML document and the text of that element is colored blue. |
| To name this class we´ll do in the HTML document: |
| < H5 class="letraazul">text< / H5 > |
| Note that unlike the first example, now I can choose another color of the letters of a different color header H5, just defining another class, and calling from anywhere. |
| The resulting code of the HTML document using the style of the font color is: |
 |
| Click on this link ' EXAMPLE ' to view. |
| NOTE: The appearance may change depending on the size of the window. Observe as the H5 type labels that make no reference to any class, because it has been assigned the color blue for all elements of the H5 website. The same is not done in other cases. |
| With this I conclude this tutorial basico. Any questions you can ask for email, or expose it in the guestbook, so we all learn together. |
Español
English
