1.1.
Introducción
HTML (Hyper Text Markup Lenguage) es un leguaje de marcado de texto, lo cual nos indica que no
es un lenguaje de programación como Java, PHP, C o VisualBasic. HTML es el lenguaje para escribir
páginas web. Las marcas, conocidas como etiquetas, describen la forma en la que se estructura el
contenido de una página web.
Las etiquetas describen diferentes elementos de la página, por ejemplo, la etiqueta <p> se utiliza
para delimitar párrafos de texto y la etiqueta <img> para definir imágenes. El encargado de
interpretar estas etiquetas es un programa llamado navegador (browser), por ejemplo, el navegador
Chrome de Google o el Firefox de Mozilla. Los archivos que contienen el código HTML tienen la
extensión .htm o .html, y son archivos de texto plano (sin formato). Más adelante veremos qué
editores se pueden utilizar para crearlos, en este curso vamos a utilizar el editor Brackets.
Etiquetas
Etiquetas
Las etiquetas (marcas) delimitan cada uno de los elementos que componen un
documento HTML.
El lenguaje HTML se basa en etiquetas, por eso es importante entender bien
la sintaxis de las etiquetas. El siguiente esquema muestra las partes de una etiqueta
HTML genérica.
La etiqueta de apertura está delimitada por el signo < "menor que", a continuación el
propio nombre de la etiqueta (en este caso p), y opcionalmente, un atributo (en este
caso class="fondo"), finalmente el signo > "mayor que".
A continuación está el texto del contenido de la etiqueta, lo más frecuente es un
texto, pero podría ser otra etiqueta, una imagen, ...
La etiqueta de cierre está delimitada por el signo < "menor que", a continuación la
barra inclinada /, el propio nombre de la etiqueta (en este caso p), y finalmente el
signo > "mayor que".
Algunas etiquetas no tienen contenido, y se cierran sobre sí mismas, no tienen etiqueta de
cierre, se llaman etiquetas vacías, como la etiqueta <br>. En estas etiquetas
opcionalmente se puede colocar una barra justo antes del signo >, por ejemplo: <br />. La
etiqueta <br> produce un salto de línea. Las etiquetas vacías no tienen contenido pero si
pueden tener atributos. Algunas otras etiquetas vacías son
<hr>, <img>, <input>, <link>, <meta>, <param> y <source>.
En una etiqueta, la primera palabra que aparece es el nombre de la etiqueta.
También podemos encontrar atributos con sus valores, siguiendo el
formato <etiqueta atributo1="valor" atributo2="valor">. La forma más
correcta es escribir el nombre de la etiqueta y los atributos en minúscula, y los valores
entre comillas dobles.
Por ejemplo, <a href="[Link] aulaClic</a>
Produce este resultado en el navegador:
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">.