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.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s