Introducción
HTML («Hypertext Markup Language«) no es exactamente un lenguaje de programación. Es un lenguaje de marcado que le dice a los navegadores web cómo estructurar las páginas web que estás visitando. Puede ser tan complejo o tan simple como desee el desarrollador web. Este lenguaje está formado por varios elementos que definen diversos tipos de contenido. Un fichero HTML se puede editar con un simple editor de texto, pero hay algunos editores que usan colores y consejos para ayudar al desarrollador. Uno de los mejores editores es el Visual Studio Code. Se puede descargar desde aquí.
Elementos
HTML consiste en una serie de elementos, que puedes utilizar para encerrar, delimitar o marcar diferentes partes del contenido para hacer que aparezcan de una cierta manera, o actúen de determinada forma. Las etiquetas que delimitan un fragmento de contenido pueden hacer que dicho contenido enlace con otra página, ponga una palabra en cursiva, etcétera.
Cada elemento tiene dos partes, una al comienzo y otra al final, y el contenido se coloca en medio:
<etiqueta>Contenido...</etiqueta>
El elemento HTML quedará definido por todo ese bloque, desde la etiqueta de apertura, hasta la etiqueta de cierre. Por ejemplo:
<h1>Mi primer encabezado</h1> <p>Mi primer párrafo</p>
Las etiquetas HTML no distinguen entre mayúsculas y minúsculas. Así que se pueden escribir tanto en mayúsculas como en minúsculas. Por ejemplo, una etiqueta <title> se puede escribir como <title>, <TITLE>, <Title>, <TiTle>, etc., y funcionará correctamente. Sin embargo, se recomienda escribir todas las etiquetas en minúsculas para mantener la coherencia y legibilidad, entre otros motivos.
Elementos vacíos
No todos los elementos siguen el patrón de etiqueta de apertura, contenido y etiqueta de cierre. Algunos elementos consisten solo en una etiqueta única, que se utiliza generalmente para insertar/incrustar algo en el documento en el lugar donde se quiera incluir. Por ejemplo, podemos utilizar el elemento <br> para insertar un salto de línea, y el elemento <img> para insertar una imagen en la página de la siguiente forma:
<p>Mi perro es un gruñón.<br />Tiene muy malas pulgas.</p>
Atributos
Los elementos también pueden tener atributos. Los atributos contienen información extra sobre el elemento. Por ejemplo, con siguiente código podemos utilizar el atributo class para asignar al elemento un identificador que se puede utilizar para dotarlo de información de estilo:
<p class="estilo">Mi perro es un gruñón</p>
Para ver otro ejemplo, podemos utilizar el siguiente código para saltar a la página https://www.wikipedia.org (la etiqueta <a> define un hipervínculo, y el atributo href especifica la url donde queremos saltar):
<a href="https://www.wikipedia.org">Wikipedia</a>
Es muy importante que tengamos en cuenta que un atributo deberá tener:
- Un espacio entre este y el nombre del elemento. Para un elemento con más de un atributo, los atributos también deben estar separados por espacios.
- El nombre del atributo, seguido por un signo igual.
- Un valor del atributo, rodeado de comillas de apertura y cierre.
Omitir comillas en valores de atributos
Cuando observas diferentes páginas web, puedes encontrarte con todo tipo de estilos de etiquetado extraños, que incluyen valores de atributos sin comillas. Esto se permite en ciertas circunstancias, pero provocará un error en otras. Por ejemplo, si volvemos a revisar el ejemplo del enlace, sería posible escribir una versión básica con solo el atributo href, así:
<a href=https://www.wikipedia.org/>Wikipedia</a>
Sin embargo, el código no sería correcto si añadimos el atributo title también sin comillas:
<a href=https://www.wikipedia.org/ title=La página de inicio de Wikipedia>Wikipedia</a>
En este punto el navegador interpretará mal el código y pensará que el elemento <a> tiene atributos incorrectos y esto causará errores o comportamientos inesperados. Por ello es muy importante incluir siempre las comillas en los atributos. Evitarás muchos problemas y además obtendrás un código más legible.
Comillas simples o dobles
En esta unidad todos los valores de los atributos se han incluido en comillas dobles. Sin embargo, se pueden ver comillas simples en algún código HTML. Es una cuestión de estilo. Puedes elegir libremente cuál prefieres. Ambas líneas de código son equivalentes:
<a href="http://www.ejemplo.com">Un enlace a mi ejemplo.</a> <a href='http://www.ejemplo.com'>Un enlace a mi ejemplo.</a>
Asegúrate de no mezclar ambos tipos de comillas. El siguiente ejemplo muestra un código incorrecto:
<a href="http://www.ejemplo.com'>Un enlace a mi ejemplo.</a>
Si utilizas un tipo de comillas en tu documento HTML, puedes incluir el otro tipo de comillas para tus valores de atributo sin que esto te cause problemas:
<a href="http://www.ejemplo.com" title="¿A que es 'divertido'">Un enlace a mi ejemplo.</a>
Sin embargo, si deseas anidar unas comillas dentro de otras del mismo tipo (ya sea simples o dobles), tendrás que utilizar entidades HTML para las comillas. Por ejemplo, el siguiente código no va a funcionar:
<a href='http://www.ejemplo.com' title='¿A que es 'divertido'?'>Un enlace a mi ejemplo.</a>
Así que tendrás que hacer esto:
<a href='http://www.ejemplo.com' title='¿A que es 'divertido'?'>Un enlace a mi ejemplo.</a>
Internet y páginas web
Para que un usuario pueda obtener y leer el contenido de una página web, se deben seguir algunos pasos básicos:
- Para crear páginas web, el desarrollador tiene que crear archivos escritos en HTML (con cualquier editor de texto) y colocarlos en un servidor web (por ejemplo, usando un cliente ftp).
- El código HTML de una página web le dice al navegador lo que necesita saber para mostrar la página. Si el programador completa el desarrollo de la página web correctamente, las páginas incluso se mostrarán bien en dispositivos móviles y de escritorio.
- Una vez que los archivos se colocan en un servidor web, cualquier navegador puede recuperar las páginas web a través de Internet.
- Finalmente, los usuarios utilizarán un ordenador o cualquier otro dispositivo conectado a Internet para visualizar la página web mediante un navegador.
El servidor web
Un servidor web es simplemente un ordenador conectado a Internet esperando peticiones de navegadores:
- Los programadores almacenan HTML, archivos, imágenes, sonidos y otros tipos de archivos.
- Los navegadores solicitan páginas HTML u otros recursos, como imágenes.
- Si el servidor puede localizar los recursos, los envía a los navegadores.
El navegador web
Un navegador simplemente es una aplicación que se encarga de mostrar páginas web. El código HTML realizará el siguiente recorrido:
- El código HTML parte del servidor, quien se encarga de enviar páginas web completas a los navegadores.
- Los navegadores recuperan las páginas.
- Los navegadores muestran las páginas HTML a los usuarios finales.
Elementos <!doctype> y <html>
En sus inicios, cuando el HTML llevaba poco tiempo (alrededor de 1991-1992), los doctypes servían como enlaces al conjunto de reglas que la página HTML debía seguir para que fuera considerado buen HTML. Un elemento doctype de aquella época podía parecerse a esto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
En la actualidad se ignora y se considera un legado histórico que hay que incluir para que todo funcione correctamente. <!DOCTYPE html> es la secuencia de caracteres más corta que se acepta como elemento doctype válido, que indica estamos utilizando la última versión de HTML (HTML5).
En segundo lugar debemos utilizar obligatoriamente el elemento <html> (elemento raíz), que incluirá todo el contenido de la página.
En resumen, todos los documentos HTML deben comenzar con una declaración de tipo de documento seguida del código de la página web en sí entre las etiquetas <html> and </html>:
<!doctype html> <html lang="es"> ... </html>
El elemento <head>
Este elemento actúa como contenedor para todos los parámetros que se quieran incluir en el documento HTML que no serán visibles a los visitantes de la página. Incluye cosas como palabras clave y la descripción de la página que se quieran mostrar en los resultados de búsqueda, así como la hoja de estilo para formatear nuestro contenido, declaraciones de codificación de caracteres y más. Por ejemplo:
<!doctype html>
<html lang="es">
<head>
<!-- Etiquetas obligatorias -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Hoja de estilos (CSS) de Bootstrap -->
<link rel="stylesheet" href="bootstrap.min.css" />
...
</head>
...
</html>
El elemento <meta>
Metadata
Es importante que las páginas web contengan una lista de elementos de metadatos para proporcionar a los motores de búsqueda (por ejemplo, Google, DuckDuckGo, Bing, etc.) información semántica como el autor, palabras clave, descripción, etc. Dado que este tipo de información no se muestra al usuario directamente por el navegador, los elementos de metadatos deben colocarse dentro del elemento <head>:
<head> <meta name="description" content="My página web" /> <meta name="keywords" content="HTML, CSS, JavaScript" /> <meta name="author" content="Fernando" /> </head>
Charset
Uno de los elementos <meta> más importantes es el que define la especificación del charset. Es muy habitual especificar que el documento HTML usará la codificación UTF-8, que incluye la gran mayoría de caracteres de todos los idiomas humanos escritos. De esta forma, el navegador mostrará correctamente cualquier contenido textual que pongamos en el documento, tales como caracteres á, é, ü, ñ, etc.:
<meta charset="utf-8" />
Viewport
HTML5 introdujo un método para permitir a los desarrolladores controlar ciertos parámetros del área visible de la página web (viewport), a través de la etiqueta <meta> . El viewport puede variar dependiendo del dispositivo, y puesto que hay diferencias entre un móvil y una pantalla de ordenador, es conveniente establecer el comportamiento adecuado para que nuestra página web se muestre correctamente en cualquier dispositivo. Podemos utilizar por ejemplo la siguiente línea de código en todas nuestras páginas web:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
El elemento <title>
Este elemento establece el título de la página web, que es el título que aparece en la pestaña del navegador en la que se carga dicha página. El título también se utiliza para describir la página cuando se marca como favorita. Se puede definir de la siguiente forma:
<title>Mi primera página web</title>
El elemento <link>
El elemento <link> especifica que el documento actual se encuentra enlazado con un recurso externo. El uso más habitual de este elemento es el de aplicar hojas de estilos al documento.
Mediante el atributo <rel> especificaremos el tipo de relación del documento enlazado con el actual. El atributo debe ser una lista de tipos de enlaces separados por espacio. El uso más común para este atributo es especificar el enlace a una hoja de estilos externa: el atributo rel se establece con valor stylesheet, y el atributo href se establece con la URL de la hoja de estilos externa para dar formato a la página:
<link rel="stylesheet" href="estilos.css" />
El elemento <script>
El elemento <script> se utiliza para incluir código ejecutable o datos. Se usa principalmente para incluir o enlazar código JavaScript, aunque también se puede usar para incluir otros lenguajes de programación tales como WebGL o incluso también datos en formato JSON. Utilizando el atributo <src> podemos especificar la url de un fichero externo (esto se puede usar como alternativa a incluir el código JavaScript directamente en nuestro documento). Por ejemplo, en el caso de querer utilizar código JavaScript en nuestra página web, procederíamos de la siguiente forma:
<!-- Fichero externo con código JavaScript -->
<script src="javascript.js"></script>
...
<!-- Definimos código JavaScript dentro del fichero HTML -->
<script>
function miFuncion() {
document.getElementById("demo").innerHTML = "¡Hola JavaScript!";
}
</script>
El elemento <body>
El elemento <body> contiene todo el contenido que quieres mostrar a los usuarios cuando visitan tu página, ya sea texto, imágenes, vídeos, juegos, pistas de audio reproducibles o cualquier otra cosa. Se abre justo después de cerrar el elemento <head> y se debe cerrar justo antes de cerrar el elemento <html>. Por ejemplo, con el siguiente código, el navegador sólo mostrará en pantalla el texto «¡Hola mundo!»:
<!doctype html> <html lang="es"> <head> <meta charset="utf-8" /> <meta name="description" content="Mi primera página web" /> <meta name="keywords" content="HTML, CSS, JavaScript" /> <meta name="author" content="Fernando" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <title>Página de ejemplo</title> </head> <body> ¡Hola mundo! </body> </html>
Debemos matizar que dentro de una página web no podemos poner directamente los caracteres “<” y “>” porque el navegador los confundiría con los caracteres que se utilizan para la creación de etiquetas.
Para cierto tipo de caracteres, es necesario utilizar otra sintaxis que suele constar de un ampersand seguido de su nombre identificativo y un punto y coma. Por ejemplo:
| & | & |
| < | < |
| " | “ |
| > | > |
| © | © |
| ÷ | ÷ |
| € | € |
Ejercicio propuesto: Hola mundo
Crea una página web para mostrar el texto «¡Hola mundo, mi nombre es … !» dentro del elemento
<body>. Además, deberás utilizar el elemento<head>para mostrar el texto «Saludos» como título en la pestaña del navegador. Para finalizar, añade y completa la página web con el resto de elementos<meta>(charset, viewport, author, description y keywords), y comprueba el resultado en el navegador.
Párrafos y secciones
Para que el contenido textual de una página web resulte más legible, es muy importante utilizar párrafos y secciones.
El texto de cada párrafo se debe colocar entre las etiquetas <p> y </p>, y para indicar el comienzo de cada sección de nuestro contenido, disponemos de encabezados de varios niveles: <h1>, <h2>, <h3>, <h4>, <h5> y <h6> (del más grande al más pequeño). Podemos utilizar estos elementos de la siguiente forma:
... <h1>Encabezado de primer nivel</h1> <p>Mi primer párrafo</p> <p>Mi segundo párrafo</p> <p>Mi tercer párrafo</p> <h2>Encabezado de segundo nivel</h2> <p>Mi cuarto párrafo</p> <p>Mi quinto párrafo</p> ...
Ejercicio propuesto: Párrafos
Crea una página web para mostrar diferentes párrafos utilizando las etiquetas
<p>y</p>, todos ellos con diferentes líneas de cualquier texto. A continuación, añade el resto de elementos<meta>(charset, viewport, author, description, keywords y title), y comprueba el resultado utilizando tu navegador.
Ejercicio propuesto: Encabezados y párrafos
Crea una página web para mostrar varios encabezados de diferentes niveles, utilizando las etiquetas
<h1>a<h6>. Añade además varios párrafos (encerrados entre las etiquetas<p>y</p>) con cualquier texto, colocando un párrafo diferente después de cada encabezado. Para concluir, añade el resto de elementos<meta>(charset, viewport, author, description, keywords and title), y comprueba el resultado en tu navegador.
Ejercicio propuesto: Párrafos dentro de la misma sección
Utilizando las etiquetas correspondientes (
<h1>y<p>), añade el código HTML necesario para crear una página web que muestre el siguiente texto con el formato correcto:
Alicante Alicante (en valenciano y cooficialmente Alacant) es una ciudad y un municipio de España, capital de la provincia homónima, en la Comunidad Valenciana. Ciudad portuaria, está situada en la costa mediterránea. Con 337.482 habitantes (INE, 2020), es el segundo municipio más poblado de la comunidad autónoma y el undécimo del país. Forma una conurbación de 468.782 habitantes con muchas de las localidades de la comarca del Campo de Alicante: San Vicente del Raspeig, San Juan de Alicante, Muchamiel y Campello. Estadísticamente se asocia también con el área metropolitana de Alicante-Elche, que cuenta con 757 085 habitantes. Ciudad eminentemente turística y de servicios, es uno de los destinos turísticos más importantes de España.
Ejercicio propuesto: Encabezados de diferente nivel
Utilizando las etiquetas HTML adecuadas, crea una página web que tenga seis encabezados con el texto «Hola». Comienza con el encabezado más importante (el más grande) y ves bajando hasta el de menor relevancia (el más pequeño).
Ejercicio propuesto: Encabezados, niveles y párrafos
Utiliza las etiquetas correctas (
<h1>,<h2>,<h3>y<p>) sobre el texto que aparece a continuación:
Valencia Valencia (en valenciano y oficialmente, València) es un municipio y una ciudad de España, capital de la provincia homónima y de la Comunidad Valenciana. Con una población de 800.215 habitantes (2020), que sube a 1.581.057 habitantes (2020) si se incluye su espacio urbano. Es la tercera ciudad y área metropolitana más poblada de España, por detrás de Madrid y Barcelona. Geografía Localización La ciudad de Valencia se encuentra en la costa mediterránea de la península ibérica, sobre la gran llanura aluvial de los ríos Júcar y Turia, justo en el centro del golfo de Valencia. La ciudad primitiva estaba ubicada a unos cuatro kilómetros del mar, en una isla fluvial del Turia. Los montes más cercanos a la ciudad son algunas de las últimas estribaciones del sistema Ibérico en la Comunidad Valenciana, como el Cabeçol de El Puig y la sierra Calderona, a unos 12 km y 25 km al norte de la ciudad respectivamente. Clima Valencia cuenta con un clima mediterráneo suave y ligeramente lluvioso durante los inviernos y caluroso y seco durante los veranos. De acuerdo con los criterios de la clasificación climática de Köppen, Valencia tiene un clima de transición entre los climas mediterráneo y semiárido cálido. La temperatura media anual es de 18.4 °C.
El elemento <br>
El elemento HTML line break <br> produce un salto de línea en el texto (retorno de carro). Es útil para escribir un poema o una dirección, donde la división de las líneas es muy relevante.
Debemos tener en cuenta que no se debe utilizar <br> para incrementar el espacio entre líneas de texto; para ello se debe utilizar la propiedad margin de CSS o el elemento <p>.
Como se puede observar en el siguiente ejemplo, se utiliza un elemento <br /> cada vez que queremos cambiar de línea. El texto que coloquemos después del elemento <br /> aparecerá al comienzo de la siguiente línea:
<p> Mozilla Foundation<br /> 1981 Landings Drive<br /> Building K<br /> Mountain View, CA 94043-0801<br /> USA </p>
Ejercicio propuesto: Poemas
Crea una página web que contenga diversos poemas de diversos autores, como el que tienes a continuación. Debes utilizar
Nota: Deberías utilizar<h1>y<h2>para los títulos, y párrafos y saltos de línea para el resto.<h1>para el encabezado principal y<h2>para el resto de encabezados. Ten en cuenta también que no puedes utilizar<br />para crear márgenes entre cada poema. Deberás usar párrafos que contengan cada poema, y saltos de línea para cada verso.
POEMAS Gustavo Adolfo Bécquer Del salón en el ángulo oscuro, de su dueña tal vez olvidada, silenciosa y cubierta de polvo, veíase el arpa. ¡Cuánta nota dormía en sus cuerdas, como el pájaro duerme en las ramas, esperando la mano de nieve que sabe arrancarlas! ¡Ay!, pensé; ¡cuántas veces el genio así duerme en el fondo del alma, y una voz como Lázaro espera que le diga «Levántate y anda»! ...
Ejercicio propuesto: Direcciones
Crea una página web para mostrar diferentes direcciones, similares a la que tienes a continuación (debes usar encabezados de tipo
Nota: Deberías utilizar un encabezado<h1>y<h2>, párrafos y saltos de línea).<h1>para el título principal y<h2>para el resto de encabezados. Ten en cuenta también que no debes utilizar<br />para crear márgenes entre cada dirección. Al igual que el ejercicio anterior, utiliza párrafos para cada dirección y saltos de línea para el resto.
DIRECCIONES Mozilla 331 E. Evelyn Avenue Mountain View, CA 94041 USA ...
El elemento <pre>
El elemento <pre> (o Texto HTML Preformateado) representa texto que mantiene la estructura que se utilizó en el editor. El texto en este elemento típicamente se muestra con una fuente fija o monoespaciada (no proporcional), exactamente como se mostraba en el archivo mientras se editaba. Los espacios dentro de este elemento también se muestran como se escribieran en el editor. Por ejemplo:
<pre>
-----------------------------
< Soy un experto en mi campo. >
-----------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
</pre>
Ejercicio propuesto: ASCII art
Crea un documento para mostrar diversos dibujos utilizando caracteres, de forma similar al ejemplo.
Nota: Puedes encontrar diversos ejemplos en los siguientes enlaces: https://www.asciiart.eu/ , https://en.wikipedia.org/wiki/ASCII_art , https://asciiart.website/ , https://fsymbols.com/text-art/ , etc.
----------------------------
< Soy un experto en mi campo. >
----------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
.^. .^.
( \ ( \
\ } \ }
( ` { ( ` {
\ } \ }
( ` \ ( ` \
\ } \ }
( ` { ( ` {
.-\ |-^-. /
( .\ / '.
'/ O _______\
| .-'#### ###
,-./ # / \ / \___
{ ,- \@/_\@' '.
{ `. .' }
`._ / )._ _"
\ `--' __"---"
`. / ,' \ \
Ahas / / | )
| / ; /
\/ '-,,-'\/
$$$_____$$$$$$$_$$$$$$$_$$$_______$$$_$$$$$$$$$$
$$$____$$$____$$$____$$$_$$$_____$$$__$$$_______
$$$____$$$_____$_____$$$_$$$_____$$$__$$$_______
$$$_____$$$_________$$$___$$$___$$$___$$$$$$$$__
$$$______$$$_______$$$_____$$$_$$$____$$$_______
$$$_______$$$_____$$$______$$$_$$$____$$$_______
$$$$$$$$$___$$$$$$$_________$$$$$_____$$$$$$$$$$
...
Quiz
Test your skills with this quiz about paragraphs, headings, and some other concepts related to this unit.