Ver más ...
Mostrar Navegación Móvil

jueves, 3 de mayo de 2012

, , ,

Elementos HTML I

Claudio - mayo 03, 2012

Tutoriales Freelance


La Cabecera del documento


Cabecera del documento es la que está delimitada por las etiquetas HTML <HEAD></HEAD>
La cabecera de un documento HTML se utiliza para incluir definiciones generales que afectarán a todo el documento, como por ejemplo el título de la página que vimos en el capítulo anterior:

<TITLE>Título de la Página</TITLE>

Veremos otras etiquetas y funcionalidades de la cabecera del documento en capítulos posteriores.

El cuerpo del documento


El cuerpo del documento es aquel que está delimitado por las etiquetas <BODY></BODY>
En el cuerpo de un documento HTML es donde se introducen las distintas instrucciones propias del lenguaje HTML y el contenido en sí de nuestra página Web como los son: textos, imágenes, enlaces a otras páginas, etc..

Las Cabeceras HTML


Las cabeceras (Header) son etiquetas que formatean el texto como un titular, asignándole un tamaño mayor a la letra y colocando el text en negrita.
Las etiquetas utilizadas son <H1><H2><H3><H4><H5> y <H6>, siendo que <H1> indica la cabecera mayor, <H2> corresponde el segundo nivel y así hasta la etiqueta <H6> que representa la cabecera de menor tamaño.

Así es como se ve:



Las cabeceras, así como otras etiquetas soporta el atributo align para alinear el texto. El siguiente ejemplo mostrará la cabera en el centro:

<h2 align=”center”>Cabecera Secundaria</h2>

El texto de la cabecera se mostraría en el navegador con el siguiente formato:

Cabecera Secundaria

Los párrafos HTML


Los párrafos están definidos por las etiquetas <P></P>. En la mayoría de los navegadores añaden un salto de línea después de la etiqueta </P>.

Veamos en acción:


Atributos de Textos


Los textos de un documento HTML pueden tener varios formatos o atributos. Veamos algunos de los más utilizados:

Atributo Etiqueta Ejemplo Resultado
Negrita <B>…</B>
<strong>…</strong>
<b>Texto en negrita</b>
<strong>Igual que negrita</strong>
Texto en negrita
Igual que negrita
Cursiva <I>…</I> <i>Texto en cursiva</i> Texto en cursiva
Subrayado <U>…</U> <u>Texto subrayado</u> Texto subrayado
Tachado <S>…</S> <s>Texto tachado</s> Texto tachado
Centrado <center>…</center> <center>Texto centrado</center>



Texto centrado
Cita <CITE>…</CITE> <cite>Igual que cursiva</cite> Igual que cursiva
Superíndice <SUP>…</SUP> <sup>Texto superíndice</sup> Texto superíndice
Subindice <SUB>…</SUB> <sub>Texto subíndice</sub> Texto subíndice


Imágenes HTML


Utilizamos la etiqueta <IMG> para insertar una imagen en nuestro documento HTML. Esta etiqueta no tiene finalización y como mínimo debe contener los atributos src y alt.

El atributo src se utiliza para indicar el nombre del archivo que contiene la imagen.

En un servidor Linux los nombres de los archivos son sensibles a mayúsculas y minúsculas por lo que es recomendable utilizar sólo minúsculas.
Por otra parte el atributo alt se utiliza para incluir un texto que debe describir el contenido de la imagen. Este es el que verán usuarios que visiten el sitio con un navegador que sólo permite texto o tenga desactivada la opción de descarga de imágenes.

La sintaxis de la etiqueta <IMG> es la siguiente:

<img src=”miImagen.jpg” alt=”Mi imagen en JPG”> 

También podemos utilizar los atributos width y  height para determinar el ancho y el alto de la imagen.

Observe el siguiente ejemplo:


Hipervínculos HTML

Para definir un hipervínculo se utiliza las etiquetas <A></A>. Un hipervínculo puede apuntar a un punto determinado del documento HTML que tenemos abierto, a otra página del mismo sitio o a enlaces externos.

La sintaxis del hipervínculo es la siguiente:

<a href=”pagina1.html”>Ir a página 1</a>

El atributo href de la etiqueta <A> hace referencia a la página que debe mostrar el navegador si el visitante hace clic sobre el hipervínculo, que en este caso apunta a pagina1.html que está en el mismo sitio.


Free Website Hosting