Publicado en HTML, Tutoriales

HTML – Parte 2 – Elementos del Lenguaje I

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.

Publicado en HTML, Tutoriales

HTML – Parte 1 – Introducción a HTML

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje que se emplea para el desarrollo de páginas de internet.

El lenguaje HTML es un estándar reconocido en todo el mundo. Sus normativas están definidas por  y un organismo sin ánimo de lucro llamado World Wide Web Consortium (http://www.w3.org/), más conocido como W3C.  HTML es un estándar reconocido por todo el mundo, lo que permite que una misma página HTML pueda visualizarse de forma muy similar en cualquier navegador de cualquier sistema operativo.

HTML es un lenguaje muy fácil de aprender. Está basado en el uso de etiquetas, formadas por textos ASCII y encerradas entre los caracteres: < y >.

La etiqueta de fin contendrá el mismo texto que la de inicio añadiéndole al principio una barra inclinada /. La etiqueta afectará por tanto a todo lo que esté incluido entre las etiquetas de  inicio y fin. No obstante, existen algunas que no necesitan cierre, ya que en estas etiquetas se presupone su final, como por ejemplo; <P> párrafo, <BR> salto de línea ó <IMG> inclusión de una imagen.

Estructura HTML

Para entender mejor veamos la estructura básica de una página o documento HTML:

Estructura HTML (Rincón Freelance)
Estructura HTML (Rincón Freelance)

Las etiquetas <HTML></HTML> indican el principio y fin de la página web, la cual está dividida en dos secciones enmarcadas por las etiquetas <HEAD></HEAD>, que representan el inicio y fin de la sección de cabecera de la página, y <BODY></BODY>, que encierran el cuerpo del documento HTML.

Mi primera página HTML

pagina1.html (Roncón Freelance)

Ahora manos a la obra. Hagamos nuestra primera página HTML. Para ello podemos utilizar cualquier procesador de textos, como Bloc de Notas, por ejemplo. Después de abrir el procesador de textos de su preferencia, escriba o copie el siguiente código HTML:

Después de editar el siguiente código guarde el archivo como pagina1.html y ábralo en su navegador favorito.

¿Extensión .HTM o .HTML?

Al guardar un documento HTML, puede utilizarse tanto la extensión .html como .htm. Nosotros utilizaremos en nuestros tutoriales la extensión .html.

El resultado del código lo apreciamos en la siguiente imagen. Podemos vepagina1.html (Rincón Freelance)r el título de la página: “Mi primera página HTML” (enmarcado por la etiqueta <TITLE></TITLE> dentro de la sección de cabecera) y el cuerpo del documento que aparece después de una línea en blanco (etiqueta <BR>). También note que la palabra “HTML” aparece en negrita por estar dentro de las etiquetas <B></B>.

Fuente: Rincón del Freelance