Unidad 2. HTML básico (I)


A continuación vamos a ver los elementos básicos o fundamentales del HTML. Primero veremos la estructura general de las etiquetas, luego la estructura básica de la página, a continuación empezaremos a colocar cosas en la página, primero texto, luego imágenes, enlaces y por último hablaremos brevemente del elemento que nos sirve para colocar cada cosa en el sitio que queramos, las capas.

2.1. Etiquetas

Ver el videotutorial

El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las etiquetas.

Al realizar nuestro primer ejemplo, hemos visto algunas etiquetas.

Las etiquetas siempre van contenidas entre los signos de desigualdad < y >. Por ejemplo <body>,<title> o <p>.

Las etiquetas tienen una etiqueta de apertura y una de cierre, marcada por el signo /. Por ejemplo <body> (apertura) y </body> (cierre). Entre la apertura y el cierre, está el contenido de la etiqueta, que puede ser texto u otras etiquetas, depende del tipo de etiqueta. Algunas etiquetas, no tienen contenido, y se cierran sobre sí mismas. Esto se expresa colocando la apertura y el cierre en la misma etiqueta, como por ejemplo: <br />, que equivaldría a <br></br>. La etiqueta <br /> escribe un salto de línea.

Vamos a fijarnos en la apertura de la etiqueta. La primera palabra que aparece es el nombre o identificador de la etiqueta. A parte, podemos encontrar atributos con sus valores, siguiendo el formato <etiqueta atributo1="valor" atributo2="valor">. La forma correcta de escribirlo es escribir el nombre de la etiqueta y los atributos en minúscula, y los valores contenidos entre comillas dobles. Si un atributo tiene más de un valor, se escriben todos los valores dentro de las mismas comillas, separados por espacios en blanco, por ejemplo <etiqueta atributo="valor1 valor2">.

Hasta hace poco, lo más usual a la hora de escribir páginas web era que cada etiqueta tuviera bastantes atributos, que se referían a propiedades del formato o representación de los elementos. La tendencia actual es la de separar el formato del contenido, descartando estos atributos, sustituyéndolos por propiedades de estilo.

Por ejemplo, para escribir la siguiente línea:

Bienvenidos a www.aulaclic.es

Antes, sin estilos:

<p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a www.aulaclic.es</font></p>

Ahora, con estilos:

<p class="presentacion">Bienvenidos a www.aulaclic.es </p>

Como veremos en el siguiente tema, en otro lugar se definen las caracteristicas del estilo.


Enero-2010
Pág. 2.1

Atrás  Inicio  Adelante




.