UT 2: Lenguajes de Marcas: HTML

1. ¿Qué es HTML?
Definiéndolo de forma sencilla, "HTML es el lenguaje utilizado para crear páginas web". HTML
son las siglas de HyperText Markup Language.

Los diseñadores utilizan el lenguaje HTML para crear sus páginas web, los programas que utilizan los
diseñadores generan páginas escritas en HTML y los navegadores que utilizamos los usuarios
muestran las páginas web después de leer su contenido HTML.

El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un organismo
llamado World Wide Web Consortium, más conocido W3C. Este organismo elabora las normas que
deben seguir los diseñadores de páginas web para crear las páginas HTML.

El propio W3C define el lenguaje HTML como "un lenguaje reconocido universalmente y que
permite publicar información de forma global".

Como se trata de un estándar reconocido por todas las empresas relacionadas con el mundo de
Internet, una misma página HTML se visualiza de forma muy similar en cualquier navegador de
cualquier sistema operativo.

Las últimas novedades relativas a HTML y publicadas por W3C, las podemos encontrar en el siguiente
enlace: Estado Actual HTML.

Las normas oficiales están escritas en inglés y se pueden consultar de forma gratuita en la siguiente
dirección:

Especificación oficial de HTML 4.01: http://www.w3.org/TR/html401

Especificación oficial de XHTML: XHTML 1.0

1.1. Características de HTML

El World Wide Web (WWW) es un sistema que contiene una cantidad de información múltiple y
variada. Pero esta información debe estar ordenada de alguna forma de manera que sea posible
encontrar lo que se busca.

La unidad básica donde está almacenada esta información son las páginas Web. Estas páginas se
caracterizan por contener texto, imágenes, animaciones... e incluso sonido y vídeo.

Una de las características más importantes de las páginas Web es que son hipertexto. Esto quiere decir
que las páginas no son elementos aislados, sino que están unidas a otras mediante los links o enlaces

1
 UT 2: Lenguajes de Marcas: HTML

hipertexto. Gracias a estos enlaces el navegante de internet puede pulsar sobre un texto, una imagen,
o cualquier otro elemento enlazable y navegar de una página a otra.

1.2. HTML y CSS

Originariamente las páginas HTML sólo incluían información sobre sus contenidos de texto e
imágenes. Con el desarrollo del estándar HTML, las páginas empezaron a incluir también información
sobre el aspecto de sus contenidos: tipos de letra, colores y márgenes.

Incluir en una misma página HTML los contenidos y sus aspectos, provoca complicaciones excesivas
en el diseño, y dificulta su posterior mantenimiento, debido a que los contenidos y el diseño de la
página web son responsabilidad de diferentes personas, por lo que es conveniente separarlos.

La aparición de CSS (Cascading Style Sheet), proporcionó el mecanismo que permite separar los
contenidos definidos mediante XHTML y el aspecto que deben presentar esos contenidos.

Figura 1. Esquema de la separación de los contenidos y su presentación

Además separando contenido de presentación, también conseguimos solucionar uno de los problemas
que se estaban planteando debido a la aparición de multitud de dispositivos para mostrar la
información, dispositivos como móviles, pda, impresoras, pantallas de ordenador,....

2.- Estructura HTML básica

2.1.- Qué se necesita para crear una página web
No es necesario ningún programa especial para crear una página Web. Gracias a ello se ha conseguido
que se puedan crear páginas con cualquier ordenador y sistema operativo.

El código HTML, como hemos adelantado en el párrafo anterior, no es más que texto y por tanto lo
único necesario para escribirlo es un editor de texto plano, como editplus, gedit, bloc de notas,...

También se puede usar procesadores de texto, que son editores con capacidades añadidas, como
pueden ser Microsoft Word pero hay que tener cuidado porque en ocasiones hacen traducciones
automáticas del código HTML que no siempre son deseadas.

2
 UT 2: Lenguajes de Marcas: HTML

Una vez hemos escrito el código deberemos guardar el archivo (con formato de texto) con la extensión
.html. Es un error común llamar a un archivo index.html y luego referirse a él como Index.html.
Aunque en nuestro ordenador puede funcionar al publicarlo seguramente no lo hará. Por esta razón
es una norma general usar siempre minúsculas para los nombres de los archivos html.

Otros editores que podemos usar para la creación de páginas Web, son los llamados editores
WYSIWYG (What You See Is What You Get). Estos editores permiten crear páginas web sin escribir
código HTML como si se tratase de un programa de dibujo por ordenador. Algunos ejemplos de este
tipo de editores son Macromedia Dreamweaver o Kompozer.

De manera general podemos representar toda página Web como un árbol genealógico cuya estructura
común, para todas las webs, podemos decir que será la siguiente:

El Modelo de Objetos del Documento (DOM) es una interfaz de programación de aplicaciones (API)
para documentos HTML y XML. Define la estructura lógica de los documentos y el modo en que se
accede y manipula un documento. En la especificación del DOM, el término "documento" se utiliza en
un sentido amplio

Esto significa lo siguiente:

3
 UT 2: Lenguajes de Marcas: HTML

 Hay una etiqueta padre de todo, la etiqueta html y entre la apertura y el cierre de esta etiqueta
meteremos el resto de nuestra página.
 La etiqueta html tiene dos hijos, la etiqueta head que es la cabecera, que ya veremos qué
elementos contiene, y la etiqueta body que es la que en realidad contiene los elementos de mi
web.
 A su vez esas dos etiquetas anteriores pueden tener sus propios hijos y así sucesivamente.

Un ejemplo de esto sería:

estructura.html

<!DOCTYPE html>
<html lang="es">
<head>
<!--Cabecera -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mi primera página</title>
</head>
<body>
<!-- Cuerpo -->
<h1>HOLA MUNDO</h1>
</body>
</html>

2.2.- Las bases de HTML

Como todo lenguaje, HTML no va a ser una excepción, y para escribir órdenes es necesario la
utilización de comandos llamados etiquetas que pueden tener o bien la siguiente estructura:

<NOMBRE_ETIQUETA/>

O bien esta otra:

<NOMBRE_ETIQUETA> CUALQUIER ELEMENTO HTML </NOMBRE ETIQUETA>

Pero las etiquetas no se limitan a indicar ordenes tan sencillas, estas órdenes tienen en ocasiones
parámetros. Y a estos parámetros los llamamos atributos.

Este nuevo elemento se introduce en una etiqueta de la siguiente manera:

4
 UT 2: Lenguajes de Marcas: HTML

<etiqueta atributo="valor">

Es decir, en primer lugar ponemos el nombre de la etiqueta, después el nombre del atributo seguido
por un signo igual y posteriormente el valor que queramos darle a ese atributo encerrado entre
comillas.

2.2.1.- Elementos HTML

El lenguaje HTML clasifica a todos los elementos en dos grupos:

➢ Elementos en línea (inline elements en inglés) y ➢

Elementos de bloque (block elements en inglés).

La principal diferencia entre los dos tipos de elementos es la forma en la que ocupan el espacio
disponible en la página. Los elementos de bloque siempre empiezan en una nueva línea y ocupan todo
el espacio disponible hasta el final de la línea, aunque sus contenidos no lleguen hasta el final de la
línea. Por su parte, los elementos en línea sólo ocupan el espacio necesario para mostrar sus
contenidos.

2.3.- Estructura de una página

Para indicar al navegador web que vamos a desarrollar una página web, lo primero que debemos
especificar es que estamos escribiendo un documento HTML, y para ello hemos de usar las etiquetas
<html> al principio del documento, y la etiqueta </html> al final del mismo.

Pero además de ello también tenemos que especificar las dos partes en las que se divide todo
documento html: la cabecera (head) y el cuerpo (body).

<head>: delimita la parte de la cabecera del documento. La cabecera contiene información

sobre el propio documento HTML, como por ejemplo su título y el idioma de la página. Los
contenidos indicados en la cabecera no son visibles para el usuario, con la excepción de la
etiqueta <title>, que se utiliza para indicar el título del documento y que los navegadores lo
visualizan en la parte superior izquierda de la ventana del navegador.

<body>: delimita el cuerpo del documento HTML. El cuerpo encierra todos los contenidos
que se muestran al usuario (párrafos de texto, imágenes, tablas). En general, el <body> de un
documento contiene cientos de etiquetas HTML, mientras que el <head> no contiene más que
unas pocas.

5
 UT 2: Lenguajes de Marcas: HTML

Figura 2. Esquema de las partes que forman un documento HTML En

definitiva, la estructura básica de toda página web es la siguiente:

<html>
<head>
Elementos de la cabecera
</head>
<body>
Elementos del cuerpo
</body>
</html>

Figura 3. Esquema de las etiquetas principales que contiene un documento HTML

2.4.- Elementos de head

2.4.1.- Título de un página
Toda página debe tener un título, que debe ser corto y descriptivo. La etiqueta utilizada para
ponerle un título a nuestra página web es:

<title> y </title>, y entre ambas insertamos el texto que le asigna el título a nuestra página
web.

6
 UT 2: Lenguajes de Marcas: HTML

Ejemplo 1: Determinar el código html de las siguientes páginas:

Ejemplo 2:

La cabecera de mi página web es lo que está dentro de la etiqueta y en relación a ella es importante
saber lo siguiente:

 Todo lo que va dentro de esa etiqueta no representa contenido alguno, es decir, nada de lo que
yo pongo se va a ver en nuestro navegador.
 Contiene otras etiquetas que nos van a ayudar a dar una descripción de mi página.
 Puede contener enlaces a hojas de estilos y scripts.

De las etiquetas que puede contener la cabecera destacaremos las siguientes:

 title: que nos sirve para indicar el título de la página que es lo que se muestra en la parte de
arriba del navegador.
 style: que es una etiqueta que me permite incluir estilos y que veremos con más detenimiento
al final de este mismo curso.
 meta: que es una etiqueta que puede aparecer varias veces y con distintos atributos y que nos
va a servir para dar una descripción de la página de diversas formas y maneras.
 base: para indicar la ruta base para construir el resto de las rutas a archivos en mi página web.
 script: para incluir normalmente ficheros javascript que doten de vida o animación a mi web.
 link: para enlazar con archivos externos, normalmente hojas de estilos.

7
 UT 2: Lenguajes de Marcas: HTML

<link rel="stylesheet" href="css/estilos.css">

Favicon: https://raiolanetworks.es/blog/favicon/

<link rel="icon" type="img/png" href="img/logoIes.png" />

La etiqueta meta
Es una etiqueta muy importante ya que, aunque no muestre nada, describe mi web y es, entre otras
cosas, lo primero que leen tanto los navegadores como los buscadores.

Puede tener varias posibilidades, dependiendo de los atributos que lleve.

 <meta charset="utf-8"> Es lo que pondremos siempre para no tener problemas con caracteres
“extraños” (acentos, ñ etc…) u otros tipos de alfabetos.

charset_example.html (comentar la etiqueta y verlo en Crome y Firefox)

 <meta name="description" content="......"> Es lo que incluiremos para añadir una descripción

sobre lo que es mi web. Ese texto descriptivo irá en el atributo content.

<meta name="description" content="Web sobre diseño de interfaces web"/>

 <meta name="keywords" content="..."> Es lo que incluiremos para categorizar el contenido de

mi web. Por ejemplo: content="programacion,html,meta"

<meta name="keywords" content="html,css,javascript,bootstrap,jquery"/>

 <meta name="author" content="yo">

<meta name="author" content="Isabel Cayuela Pérez"/>

 <meta name="viewport" content="width=device-width, initial-scale=1.0"> que es nuevo en HTML5

y que me asegura que mi web escalará para adaptarse a la pantalla del dispositivo. Esto, no
obstante, no asegura que se vea bien.
 <meta http-equiv="refresh" content="X"> que refrescará la web cada X segundos. Puede ser
interesante para mostrar actualizaciones automáticamente en páginas que cambian, por ejemplo,
las de resultados deportivos.