UT2. Utilización de Lenguajes de Marcas en Entornos Web. HTML
¿Qué es HTML?
De forma sencilla, HTML (HyperText Markup Language) es el lenguaje que se utiliza para crear páginas web. Estas páginas son ejecutadas por los navegadores (Chrome, Firefox…)
El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un organismo sin ánimo de lucro llamado World Wide Web Consortium, más conocido como W3C. 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.
El propio W3C define el lenguaje HTML como "un lenguaje reconocido universalmente y que permite publicar información de forma global".
Breve historia de HTML
La historia completa de HTML es tan interesante como larga, por lo que a continuación se muestra su historia resumida a partir de la información que se puede encontrar en la Wikipedia.
El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de "hipertexto" para compartir documentos.
El primer documento formal con la descripción de HTML se publicó en 1991 bajo el nombre HTML Tags (Etiquetas HTML) y todavía hoy puede ser consultado online a modo de reliquia informática.
A partir de ese momento van apareciendo diferentes versiones de HTML, siendo el W3C (World Wide Web Consortium) el encargado de publicar estos estándares.
HTML 4.0 se publicó el 24 de abril de 1998 y supone un gran salto desde las versiones anteriores. Entre sus novedades más destacadas se encuentran las hojas de estilos CSS, la posibilidad de incluir pequeños programas o scripts en las páginas web, tablas complejas y mejoras en los formularios.
Poco después, apareció HTML 4.01 con pocas novedades significativas.
Desde la publicación de HTML 4.01, no apareció nada nuevo hasta 2009 que aparece HTML 5.
HTML y XHTML
El lenguaje XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es más que una adaptación de HTML al lenguaje XML. Técnicamente, HTML es descendiente directo del lenguaje SGML, mientras que XHTML lo es del XML (que, a su vez, también es descendiente de SGML).
Relación entre HTML y XHTML.
Editores de HTML
Nuestra herramienta principal para crear una página web es el editor de HTML. Tenemos varias opciones:
Sublime Text: este editor no es gratuito, pero tiene una licencia de prueba indefinida.
NotePad ++: es un editor gratuito que soporta muchos lenguajes y tiene soporte para plugins.
Brackets: es un editor de Adobe, también es gratuito.
Atom: es gratuito y es de los creadores de GitHub.
Visual Studio Code: es un editor de código fuente desarrollado por Microsoft para Windows, Linux, macOS y Web. Incluye soporte para la depuración, control integrado de Git, resaltado de sintaxis y finalización inteligente de código.
Edición básica en HTML
Un documento HTML contiene texto y etiquetas.
Etiquetas
Las etiquetas sirven para delimitar elementos de la página. Por ejemplo, un párrafo es un elemento de la página, una tabla también. Incluso hay elementos que contienen otros elementos (las tablas constan de filas y las filas de celdas…).
Las etiquetas aparecen entre los signos de menor y mayor (< >). Cuando un navegador se encuentra un texto dentro de estos dos signos, interpreta que lo que hay dentro es un elemento.
Ejemplo
<p>Este es un párrafo</p>
La mayoría de las etiquetas afectan a un determinado texto, que estará delimitado por una etiqueta de apertura y otra de cierre. Se interpretará como el inicio y fin de un determinado elemento de la página.
El cierre de una etiqueta se marca poniendo el símbolo /. En el ejemplo anterior, la etiqueta <p> indica el inicio de un párrafo y la etiqueta </p> indica el final del párrafo.
Ya se ha comentado que un elemento puede contener dentro más elementos, por lo que entre la apertura y el cierre de una etiqueta puede haber más etiquetas.
Importante
Una norma importante es que siempre debemos cerrar primero las etiquetas abiertas más tarde.
El siguiente ejemplo es incorrecto:
Ejemplo incorrecto
<p>Este es un párrafo <b>con una palabra en negrita</p></b>
Se está cerrando primero la etiqueta <b> y luego la etiqueta <p>, cuando debería ser al revés. Lo correcto sería:
Ejemplo correcto
<p>Este es un párrafo <b>con una palabra en negrita</b></p>
Nota
Algunas etiquetas no tienen contenido, por lo que no necesitan una etiqueta de cierre. Por ejemplo <meta>, <br> o <hr>.
Atributos
Algunas etiquetas tienen atributos. Los atributos son propiedades de cada elemento a las que podemos asignar un valor, de modo que dicho valor varía el comportamiento del elemento. Por ejemplo, puede cambiar el color o el tamaño.
<pid="parrafo1"class="texto-grande">Este es un párrafo azul y grande</p>
Estructura de un documento HTML
HTML, como ya hemos comentado, es un lenguaje de etiquetas (también llamado lenguaje de marcado) y las páginas web habituales están formadas por cientos o miles de etiquetas.
La principal ventaja de los lenguajes de etiquetas es que son muy sencillos de leer y escribir por parte de las personas. La principal desventaja es que pueden aumentar mucho el tamaño del documento, por lo que en general se utilizan etiquetas con nombres muy cortos.
Un documento HTML se divide en dos partes principales: la cabecera y el cuerpo.
La cabecera incluye información sobre la propia página, como por ejemplo su título y su idioma.
El cuerpo de la página incluye todos sus contenidos, como párrafos de texto, imágenes, tablas y demás elementos.
Estructura de un documento HTML.
El cuerpo (llamado body) contiene todo lo que el usuario ve en su pantalla y la cabecera (llamada head) contiene todo lo que no se ve (con la única excepción del título de la página, que los navegadores muestran como título de sus ventanas).
Estructura básica de una página en HTML5
El siguiente código muestra la estructura básica de una página web en HTML5:
<!DOCTYPE html><htmllang="es"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Título de la página</title></head><body><h1>Encabezado principal</h1><p>Este es un párrafo de texto en la página.</p></body></html>
La primera etiqueta es <!DOCTYPE> Esta etiqueta indica que versión de HTML se utiliza en el documento para que los navegadores puedan aplicar la gramática y sintaxis correspondiente al documento. En nuestro ejemplo le estamos indicando que vamos a usar HTML 5.
Seguidamente se encuentra la etiqueta <html lang="es">: html indica el comienzo y el final de un documento (</html>). En el interior de la etiqueta <html> se definen la cabecera y el cuerpo del documento.
!!! warning "Importante"
Ninguna etiqueta o contenido puede colocarse antes de la etiqueta <html> ni después de la etiqueta </html> (con la excepción del tipo).
El atributo lang puede ser utilizado por los navegadores y otras aplicaciones para aportar a los usuarios la información más adecuada o para presentar información a los usuarios de la manera más correcta. También es útil para los lectores de pantalla.
<head>: delimita la parte de la cabecera del documento. Los elementos contenidos en ella sirven para indicar información al navegador web y a los buscadores. En ella se pone información del 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 pestaña de la ventana del navegador.
También tenemos la etiqueta <meta charset="utf-8"> que se utiliza para especificar la codificación de caracteres que se va a utilizar para visualizar la página. Esto permite al navegador reconocer caracteres propios de nuestro idioma, como las tildes o el carácter ñ.
<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.
Estructura de un documento HTML y etiquetas.
Etiquetas obsoletas de HTML
De todas las etiquetas disponibles en HTML, las siguientes se consideran obsoletas y no se deben utilizar: <applet>, <basefont>, <center>, <dir>, <menú>, <marquee>, <strike>, <acronym>.
Comentarios en HTML
Los comentarios sólo se aparecen en el código fuente, no se muestran cuando el navegador procesa la página. No son etiquetas.
Un comentario comienza con <!-- y se cierra con -->.
<!-- Este es mi primer comentario -->
Etiquetas básicas
Párrafo simple <p>
En una página web todo el texto está dentro de alguna etiqueta. Aunque en HTML 5 se permite escribir texto que no esté dentro de una etiqueta, no es una buena práctica, ya que no podríamos indicar más adelante el formato del texto (alineaciones, márgenes…).
Por ello, no se debe poner texto directamente dentro de la etiqueta <body>, tiene que haber algún contenedor (etiqueta) para ese texto.
El elemento más sencillo es la etiqueta <p> que indica un elemento de párrafo normal.
<p>Primer párrafo.</p><p>Segundo párrafo.</p>
Resultado
Primer párrafo.
Segundo párrafo.
Por defecto los párrafos <p> hacen un salto de línea y dejan espacio arriba y abajo. Dentro de un párrafo, no podemos indicar otro párrafo. Pero si podemos tener otras etiquetas de texto simple: <em> o <span>.
Si ponemos más de un espacio en un texto es ignorado por el navegador, para ello tenemos caracteres especiales
Salto de línea <br>
A veces es necesario dentro del texto contenido en un párrafo hacer un salto de línea. La etiqueta que se usa para esto es <br>.
<p>Primera línea <br> Segunda línea.</p>
Resultado
Primera línea Segunda línea.
Línea horizontal <hr>
La etiqueta <hr> se utiliza para poner una línea horizontal que ocupa toda la pantalla. Automáticamente se inserta un espacio antes y después de la línea.
<p>Primer párrafo.</p><hr><p>Segundo párrafo.</p>
Resultado
Primer párrafo.
Segundo párrafo.
Títulos o encabezados <hx>
Los títulos son encabezados similares a los de los artículos de periódicos, nos permiten dar diferente importancia a los contenidos de la página.
Para ello tenemos seis etiquetas que comienzan con la letra h a la que le sigue un número del 1 al 6. El elemento h1 marcará títulos de primer nivel, h2 de segundo nivel, … y así hasta h6 (sexto nivel).
La etiqueta <h1> sirve para indicar a los buscadores las palabras clave para posicionar nuestros contenidos. En una página web es aconsejable que haya un solo titular (h1), en caso de haber más de uno, los buscadores penalizan y ponen la página en posiciones inferiores.
Elementos de texto
En este caso, detallaremos los elementos que se emplean para señalar texto interior a un párrafo.
Texto en negrita <strong>
En HTML 5 el texto importante (negrita) se indica con la etiqueta <strong>. En general todos los navegadores marcan el texto <strong> en negrita (letra más gruesa).
Nota
En versiones anteriores se utilizaba la etiqueta <b>, actualmente no está recomendada, aunque es empleada para llamar la atención y no para dar importancia a un texto o palabra como si lo hace <strong>.
<p>Hola <strong>mundo!</strong></p>
Resultado
Hola mundo!
Texto enfatizado o cursiva <em>
La etiqueta <em> marca texto enfatizado. El resultado visual en los navegadores es el texto en cursiva.
Antes se utilizaba <i>, actualmente no está recomendada.
<p>Hola <em>mundo!</em></p>
Resultado
Hola mundo!
Texto resaltado <mark>
Para resaltar texto tenemos la etiqueta <mark>. En este caso, el efecto visual es un color de fondo amarillo que simula un marcador.
<p>Yo soy texto normal. <mark>Y yo estoy marcado.</mark></p>
Resultado
Yo soy texto normal. Y yo estoy marcado.
Este elemento no es tan antiguo como los anteriores porque apareció con HTML5 (los navegadores antiguos no lo reconocen). La idea semántica es marcar texto que queremos resaltar de forma muy llamativa indicando texto a recordar o sobre el que profundizar.
Texto tachado <del>
En la versión de HTML 4 la etiqueta <s> quedó obsoleta, no se recomendaba su uso. Con HTML 5 se ha redefinido su uso para tachar texto con la etiqueta <del>. En el navegador se muestra con efecto de tachado.
<p>La capital de Alemania en <del>Bee</del> Berlín.</p>
Resultado
La capital de Alemania en Bee Berlín.
Texto subrayado <u><ins>
Para el texto subrayado se utiliza la etiqueta <u>. En HTML5 también existe la etiqueta <ins> para obtener el mismo efecto visual, pero con un significado semántico diferente (texto insertado).
<p><u>Este texto está subrayado.</u></p><p><ins>Este texto está subrayado.</ins></p>
Resultado
Este texto está subrayado.
Este texto está subrayado.
<u> vs <ins>
La etiqueta <u> se utiliza para subrayar texto que no tiene un significado especial, mientras que la etiqueta <ins> se utiliza para indicar que el texto ha sido insertado en un documento. El uso de <ins> puede ser útil en contextos donde se desea resaltar cambios o adiciones en un texto, como en revisiones de documentos o ediciones colaborativas. Es el opuesto a la etiqueta <del>, que indica texto eliminado.
Texto subíndice <sub>
Permite que el texto aparezca por debajo de la línea base y en un tamaño más pequeño. Se utiliza la etiqueta <sub>.
<p>Texto<sub>subíndice</sub></p>
Resultado
Textosubíndice
Texto superíndice <sup>
Parecida al anterior, pero ahora el texto por encima de la línea base y también en pequeño. La etiqueta es <sup>.
<p>Texto<sup>superíndice</sup></p>
Resultado
Textosuperíndice
Texto pequeño <small>
La etiqueta <small> se utiliza para escribir texto con letra pequeña. Se usa, por ejemplo, en textos que marquen copyright, derechos de uso, comentarios, notas anexas y letra pequeña en general.
El efecto visual es que el texto sale con un tamaño más pequeño. Es posible incluso anidar un elemento <small> dentro de otro, de modo que cada vez sale más pequeño el texto.
<p>Texto normal. <small>Texto pequeño. <small>Texto aún más pequeño.</small></small></p>
Resultado
Texto normal. Texto pequeño. Texto aún más pequeño.
Abreviatura <abbr>
La etiqueta <abbr> se utiliza para texto que indica una abreviatura o un acrónimo. Su uso requiere utilizar el atributo title para indicar el significado de la abreviatura. En general, los navegadores no muestran ningún resultado, pero sí un cartel con el contenido de title cuando se acerca el ratón.
<p>Se ha coronado a <abbrtitle="Su Alteza Real">SAR</abbr> El Rey Juan Pepe.</p>
Resultado
Se ha coronado a SAR El Rey Juan Pepe.
Definiciones <dfn>
La etiqueta <dfn> sirve para indicar definiciones para un término o palabra. También necesita el atributo title para indicar el significado del término.
<p>Un dispositivo <dfntitle="Componentes físicos de un sistema informático">Hardware.</dfn></p>
Resultado
Un dispositivo Hardware.
Los navegadores suelen mostrar el contenido del elemento en cursiva y al posicionar el ratón sobre la palabra muestran el contenido del atributo title en un “tooltips”.
Escritura de código y texto informático
Escritura de código <code>
HTML proporciona una etiqueta llamada <code> que se utiliza cuando en un documento deseamos escribir ejemplos de código escritos en un lenguaje de programación.
<p>Este es un ejemplo de código JavaScript:</p><code>
window.onload=function(){
alert("Hola");
}
</code>
Resultado
Este es un ejemplo de código JavaScript:
window.onload=function(){
alert("Hola");
}
Se puede observar cómo los navegadores modifican el tipo de letra (utilizan un tipo de letra monoespaciada) pero no respetan los espacios y tabuladores utilizados para indicar el código.
Texto preformateado <pre>
Como es muy normal querer respetar los espacios y tabuladores cuando se escriben ejemplos de código, lo habitual es combinar con la etiqueta <pre>.
La etiqueta <pre> representa un bloque de texto preformateado donde, los espacios continuos y los saltos de línea son respetados.
<p>Este es un ejemplo de código JavaScript:</p><pre><code>
window.onload=function(){
alert("Hola");
}
</code></pre>
Resultado
Este es un ejemplo de código JavaScript:
window.onload=function(){
alert("Hola");
}
Resultados de operaciones en un ordenador <samp>
El elemento HTML Sample <samp> se utiliza para incluir texto en línea que representa una muestra (o cita) de la salida de un programa de ordenador. El contenido de esta etiqueta es renderizado generalmente usando la tipografía monoespaciada por defecto del navegador.
<p>Estaba tratando de arrancar mi computadora, pero recibí este divertido mensaje:</p><p><samp>Teclado no encontrado <br>Presione F1 para continuar</samp></p>
Resultado
Estaba tratando de arrancar mi computadora, pero recibí este divertido mensaje:
Teclado no encontrado Presione F1 para continuar
Citas
Una cita es cuando se extraen fragmentos o ideas textuales de un texto. Existen varias formas de marcar citas en HTML.
Cita en bloque <blockquote>
<blockquote> crea citas en bloque, marca las citas a otros autores o documentos. Es decir, indica párrafos completos que son citas procedentes de fuentes externas al documento. Se le puede incluir el atributo cite para indicar una URL a la fuente de la cita.
NO genera automáticamente comillas alrededor del contenido.
Incluye un margen izquierdo cuando se visualiza.
<p>Esto es un ejemplo de cita en bloque.</p><blockquotecite='https://www.w3.org/TR/2011/WD-html5-author-20110809/the-blockquote-element.html'><p>The blockquote element represents a section that is quoted from another source.</p></blockquote>
Resultado
Esto es un ejemplo de cita en bloque.
The blockquote element represents a section that is quoted from another source.
Puede utilizar el atributo cite (como se observa en el ejemplo), para indicar la URL que se ha utilizado como fuente de la cita pero no se muestra al usuario. Los navegadores no hacen nada con el contenido de este enlace.
Cita corta en línea <q>
<q> indica que el texto adjunto es una cita corta en línea. La mayoría de los navegadores modernos implementan esto rodeando el texto entre comillas. Este elemento está destinado a citas breves en la misma línea; para citas de bloque independiente, utiliza el elemento <blockquote>.
<p>Conforme al sitio web de Mozilla,
<qcite="https://www.mozilla.org/en-US/about/history/details/">Firefox 1.0 fue lanzado en 2004 y se convirtió en un gran éxito. </q></p>
Resultado
Conforme al sitio web de Mozilla,
Firefox 1.0 fue lanzado en 2004 y se convirtió en un gran éxito.
No es obligatorio utilizar el atributo cite pero se puede usar para indicar la fuente de la cita.
Cita de trabajo creativo <cite>
<cite> es uno de los pocos identificadores de HTML que se emplea tanto como etiqueta como atributo. Como etiqueta, <cite> se emplea para referenciar un trabajo creativo como un libro, una película, un programa de televisión o una canción. Por defecto, los navegadores suelen mostrar el contenido de esta etiqueta en cursiva.
<p>Yo llegué en el momento justo, interesado, cuando el hipertexto e Internet habían visto ya la luz. La tarea que me correspondía era hacer que casaran.<br>Tim Berners-Lee, <cite>Tejiendo la Web</cite>.</p>
Resultado
Yo llegué en el momento justo, interesado, cuando el hipertexto e Internet habían visto ya la luz. La tarea que me correspondía era hacer que casaran. Tim Berners-Lee, Tejiendo la Web.
Otras etiquetas
Existen otras muchas etiquetas de las cuales podemos destacar:
Etiqueta de direcciones <address>
La etiqueta <address> se utiliza para indicar información de contacto, como una dirección postal, una dirección de correo electrónico, un número telefónico, una ciudad, un país, un código postal, etc.
Los navegadores suelen mostrar este tipo de párrafos en cursiva, y aunque el elemento representa el texto con el mismo estilo que el elemento <em>, es más apropiado utilizarlo cuando se trata información de contacto, ya que transmite información semántica adicional a los buscadores.
<address>
IES Castelar <br>
Av. Santiago Ramón y Cajal, 2 <br>
06001 <br>
Badajoz <br>
España <br></address>
Resultado
IES Castelar
Av. Santiago Ramón y Cajal, 2
06001
Badajoz
España
Listas
Las listas permiten crear datos agrupados y alineados mediante símbolos como viñetas o números para facilitar la lectura y organización de la información.
Listas NO ordenadas (viñetas) <ul><li>
Las listas con viñetas se deben englobar dentro de una etiqueta <ul> (acrónimo de unordered list, lista no ordenada), después cada ítem de la lista estará dentro de elementos de tipo <li> (de list item, elemento de lista).
<h3>Lista de la compra</h3><ul><li>Agua</li><li>Pan</li><li>Huevos</li><li>Leche</li></ul>
Resultado
Lista de la compra
Agua
Pan
Huevos
Leche
Atributo
Valor
Descripción
type
Uno de los siguientes: 'disc', 'square', o 'circle'. Por defecto: depende del anidamiento, lo fija el navegador.
Indica el estilo de los ítems de la lista.
compact
Solo puede ser: 'compact'. Por defecto: lo fija el navegador.
Indica que la lista debe mostrarse compactada.
Nota
Se recomienda no usar el atributo type, se debe emplear CSS. Si se usa, no se valida el documento. Lo usaremos temporalmente para visualizar su efecto en las listas.
Listas ordenadas (numéricas) <ol><li>
Las listas numéricas aparecen dentro del elemento <ol> (de ordered list, lista ordenada), después cada ítem de la lista estará dentro de elementos de tipo <li>, al igual que las anteriores. La diferencia ahora es que cada párrafo con <li>, aparece con un número y no con una viñeta.
<h3>Lista de la compra</h3><ol><li>Agua</li><li>Pan</li><li>Huevos</li><li>Leche</li></ol>
Resultado
Lista de la compra
Agua
Pan
Huevos
Leche
Atributo
Valor
Descripción
type
(1|a|A|i|I)
Indica el estilo de los ítems de la lista.
start
'un número'
Número inicial de la secuencia.
compact
Solo puede ser: 'compact'. Por defecto: lo fija el navegador.
Indica que la lista debe mostrarse compactada.
reversed
reversed
Invierte el orden de la lista.
Listas anidadas
Es posible meter una lista dentro de otra, por ejemplo:
<h3>Lista de la compra</h3><ul><li>Bebidas
<ul><li>Agua</li></ul></li><li>Otros
<ul><li>Pan</li><li>Huevos</li><li>Leche</li></ul></li></ul>
Resultado
Lista de la compra
Bebidas
Agua
Otros
Pan
Huevos
Leche
También es posible anidar mezclando tipos de listas:
<h3>Lista de la compra</h3><ol><li>Bebidas
<ul><li>Agua</li></ul></li><li>Otros
<ul><li>Pan</li><li>Huevos</li><li>Leche</li></ul></li></ol>
Resultado
Lista de la compra
Bebidas
Agua
Otros
Pan
Huevos
Leche
Listas de términos <dl> <dt> <dd>
Permite crear una lista de definiciones de términos. En ellas se indica el término a definir y su significado. Para ello usamos las etiquetas <dl> <dt> y <dd>
<h3>Lista de vehículos</h3><dl><dt>Coche:</dt><dd>Vehículo de cuatro ruedas.</dd><dt>Moto:</dt><dd>Vehículo de dos ruedas.</dd></dl>
Resultado
Lista de vehículos
Coche:
Vehículo de cuatro ruedas.
Moto:
Vehículo de dos ruedas.
Enlaces <a>
Una URL (Uniform Resource Location) es la dirección única y específica a un recurso en Internet (una página web, una imagen, un vídeo, un directorio…).
Un enlace o hipervínculo, es un texto o imagen en el que el usuario puede pulsar para ir a otro contenido. Su función es permitirnos navegar por las diferentes páginas que tengamos.
La etiqueta que permite realizar enlaces es la etiqueta <a>.
Atributo
Valor
Descripción
href
URL o enlace a recurso.
URL o dirección hacia un recurso.
target
_self: Carga el recurso en la misma pestaña de navegación que el actual. Este es el comportamiento por defecto. _blank: Carga el recurso en una nueva pestaña del navegador.
Especifica en dónde abrir el recurso enlazado.
title
Texto.
Proporciona información adicional sobre el enlace.
Enlaces globales
Son los enlaces que saltan a otros sitios web. En este caso se debe indicar la URL completa del recurso al que se desea saltar. La URL completa incluye el protocolo (http, https, ftp…), el servidor (www.tuelectronica.es) y la ruta del recurso (/pagina1.html).
<p>Visita mi web <ahref="https://tuelectronica.es"target="_blank">TuElectronica.es</a>.</p>
Muchos enlaces de un sitio web en Internet no saltan a otros sitios, sino que son saltos a recursos del mismo servidor web.
En ese caso no se indica una URL global tal cual se explicó anteriormente, sino que se indica un salto local relativo. Es decir, un salto a un recurso en nuestro propio servidor web que toma como punto de partida el directorio en el que se encuentra la página web que realiza el salto. Para ello se usarán rutas locales.
<ul><!-- Abrimos el recurso pagina1.html que está en el directorio --><li><ahref="pagina1.html"target="_blank">Pagina 1</a></li><!-- Abrimos el recurso pagina2.html que está en la carpeta "carpeta" del directorio de este HTML --><li><ahref="carpeta/pagina2.html"target="_blank">Pagina 2</a></li></ul>
Enlaces internos
Hay un tipo de enlace que permite posicionarnos en un lugar concreto del documento. Este tipo de enlace se denomina interno, ya que salta dentro del propio documento.
Este salto requiere primero marcar la posición a la que deseamos saltar. Para realizar esto se utiliza el atributo id. Después se crea un enlace a esa posición.
El id es un atributo presente en cualquier elemento de la página web. Sirve para identificar a dicho elemento dentro de la página, por ello no podemos repetir valor.
Por ejemplo, al hacer clic en el enlace que se indica, el navegador hará un scroll hasta llegar al id (en este caso el título H1) que se ha referenciado en el enlace mediante el uso de #.
Enlace interno.
URLs absolutas
Además de los links internos y externos, la otra característica que diferencia a los enlaces (y, por tanto, también a las URL) es si el enlace es absoluto o relativo.
Las URL absolutas incluyen todas las partes de la URL (protocolo, servidor y ruta) por lo que no se necesita más información para obtener el recurso enlazado.
URLs relativas
Las URL relativas prescinden de algunas partes de las URL para hacerlas más breves. Como se trata de URL incompletas, es necesario disponer de información adicional para obtener el recurso enlazado.
En concreto, para que una URL relativa sea útil es imprescindible conocer la URL del origen del enlace (la página web en la que se encuentra el enlace). De este modo, el navegador puede completar la URL relativa con la información que falta.
Si queremos indicarle al navegador que el recurso está en un nivel superior, se incluyen dos puntos y una barra ../ en la ruta del recurso enlazado.
Nota
En general, es recomendable utilizar URL relativas para los enlaces a recursos dentro de nuestro propio sitio web. Esto facilita la gestión del sitio y permite moverlo a un dominio diferente sin necesidad de actualizar todos los enlaces internos.
En ocasiones, es necesario utilizar rutas relativas a un origen específico en lugar de rutas relativas al documento actual. Esto es especialmente útil cuando se trabaja con estructuras de directorios complejas o cuando se desea mantener la coherencia en los enlaces dentro de un sitio web.
Página web llamada recursos.html y que se encuentra en el directorio raíz del servidor
URL absoluta
https://www.dominio.com/recursos.html
URL relativa
../../../recursos.html
URL relativa al origen
/recursos.html
Cuando utilizamos en primera instancia un / para acceder a un recurso, se está indicando que el origen es la raíz del sistema de datos, por ejemplo C: o D: si abrimos de forma local el documento. Si el recurso se solicita desde un servidor web, el origen no es la raíz del sistema, sino la raíz de los recursos públicos del servidor.
Imagenes <img>
Las imágenes son fundamentales para que una página web sea más atractiva. Son el primer contenido no textual que se planteó poder incorporar al estándar HTML. Prácticamente no hay páginas sin imágenes.
Los navegadores tienen capacidad de mostrar imágenes, pero sólo las que pertenecen a tipos concretos. Los tipos de imágenes más usados y reconocidos por la mayoría de los navegadores son:
Formato jpg. Son imágenes que ocupan muy poco espacio gracias a su alta compresión. No admiten animaciones ni zonas marcadas con transparencia. Son el formato habitual de la imagen digital en una página web.
Formato gif. Imágenes con hasta 256 colores, por lo que son buenas para dibujos y logotipos, pero no para fotografías. Pueden incluso contener animaciones (uno de sus usos habituales).
Formato png. Imágenes fotográficas comprimidas al estilo de jpg pero con más calidad (ocupan más espacio, normalmente) y transparencia alfa.
Formato webp. Formato de imagen desarrollado por Google para conseguir mejorar a PNG y JPG haciendo que ocupen menos sin pérdida de calidad respecto a estos formatos. Sin embargo, no todos los navegadores son capaces de interpretarlas.
Las imágenes se colocan mediante la etiqueta <img>. El atributo src indica la ruta de la imagen y es obligatorio. De igual forma, el atributo alt es necesario para validar el documento. Este atributo permite mostrar un texto alternativo si la imagen no puede cargarse.
<imgsrc="pajaro.png"alt="Descripción de la imagen">
Resultado
Atributo
Valor
Descripción
alt
Obligatorio. Texto
Indica un texto alternativo. Ese texto aparece cuando la imagen no se ha podido cargar.
Las tablas son uno de los elementos fundamentales de HTML para mejorar la puesta visual de las páginas web. Una tabla es un conjunto de datos presentados en forma de filas y columnas. Una tabla típica podría ser esta:
Company
Contact
Country
Alfreds Futterkiste
Maria Anders
Germany
Centro comercial Moctezuma
Francisco Chang
Mexico
Ernst Handel
Roland Mendel
Austria
Island Trading
Helen Bennett
UK
Laughing Bacchus Winecellars
Yoshi Tannamuri
Canada
Magazzini Alimentari Riuniti
Giovanni Rovelli
Italy
En HTML las tablas tienen muchas posibilidades, lo que ha permitido, tradicionalmente, ser utilizadas como elemento de maquetación de páginas complejas, hoy en día, ya no se usan para maquetación. Para este fin se utilizan las etiquetas <div> junto con CSS que veremos más adelante.
Creación de tablas simples
En HTML una tabla se crea con la etiqueta <table>, dentro de este elemento se indican las filas mediante el elemento <tr> y dentro de cada fila se indican las celdas mediante elementos <td>.
<tableborder="1"><tr><td></td><td>Lunes</td><td>Martes</td><td>Miércoles</td></tr><tr><td>10:30</td><td>Seguridad informática</td><td>Hacking ético</td><td>Gestión de incidentes</td></tr><tr><td>11:30</td><td>Lenguaje de marcas</td><td>Hacking ético</td><td>Base de datos</td></tr></table>
Resultado
Lunes
Martes
Miércoles
10:30
Seguridad informática
Hacking ético
Gestión de incidentes
11:30
Lenguaje de marcas
Hacking ético
Base de datos
Nota
En el ejemplo se ha añadido el atributo border a la tabla para que se vea el borde de las celdas. Este atributo está obsoleto y no se debe usar en HTML5, pero se ha incluido para facilitar la visualización del ejemplo. De igual forma, los atributos width y height que se explican a continuación también están obsoletos.
Atributo
Valor
Descripción
border
Longitud de píxeles.
Permite poner un borde a la tabla.
width
Longitud de píxeles o un porcentaje.
Permite poner un ancho a la tabla.
height
Longitud de píxeles o un porcentaje.
Permite poner un alto a la tabla.
Encabezados de tabla <th>
Es muy habitual que las tablas muestren datos y que estos tengan celdas que sirvan de título. Esas celdas se consideran encabezados y se crean con <th>. El navegador muestra su contenido en negrita y centrado en la celda.
<tableborder="1px"><tr><th></th><th>Lunes</th><th>Martes</th><th>Miércoles</th></tr><tr><td>10:30</td><td>Seguridad informática</td><td>Hacking ético</td><td>Gestión de incidentes</td></tr><tr><td>11:30</td><td>Lenguaje de marcas</td><td>Hacking ético</td><td>Base de datos</td></tr></table>
Resultado
Lunes
Martes
Miércoles
10:30
Seguridad informática
Hacking ético
Gestión de incidentes
11:30
Lenguaje de marcas
Hacking ético
Base de datos
Títulos de las tablas <caption>
A las tablas se les puede poner un título con la etiqueta <caption>.
<tableborder="1px"><caption>Horario</caption><tr><th></th><th>Lunes</th><th>Martes</th><th>Miércoles</th></tr><tr><td>10:30</td><td>Seguridad informática</td><td>Hacking ético</td><td>Gestión de incidentes</td></tr><tr><td>11:30</td><td>Lenguaje de marcas</td><td>Hacking ético</td><td>Base de datos</td></tr></table>
Resultado
Horario
Lunes
Martes
Miércoles
10:30
Seguridad informática
Hacking ético
Gestión de incidentes
11:30
Lenguaje de marcas
Hacking ético
Base de datos
Agrupación de filas <thead> <tfoot> <tbody>
Hay tres elementos HTML que sirven para diferenciar las tres partes principales de una tabla. Son los siguientes:
<thead>. Sirve para indicar las filas que forman la cabecera de la tabla.
<tfoot>. Indica el pie de la tabla.
<tbody>. Indica el cuerpo de la tabla.
El uso de estos elementos permite dar diferente formato a cada parte mediante CSS.
<tableborder="1px"><thead><tr><th></th><th>Lunes</th><th>Martes</th><th>Miércoles</th></tr></thead><tbody><tr><td>10:30</td><td>Seguridad informática</td><td>Hacking ético</td><td>Gestión de incidentes</td></tr><tr><td>11:30</td><td>Lenguaje de marcas</td><td>Hacking ético</td><td>Base de datos</td></tr></tbody><tfoot><tr><td>Total</td><td>2</td><td>1</td><td>2</td></tr></tfoot></table>
Resultado
Lunes
Martes
Miércoles
10:30
Seguridad informática
Hacking ético
Gestión de incidentes
11:30
Lenguaje de marcas
Hacking ético
Base de datos
Total
2
1
2
Combinar celdas
Es posible unir celdas. Las etiquetas de columna (td y th) son las que poseen los atributos que permiten esta operación. En concreto son los atributos:
Atributo
Valor
Descripción
colspan
Por ejemplo, colspan="3". Une esta celda con las dos que tiene a su derecha, formando una combinación de tres celdas en horizontal
Combina la celda actual con el número de celdas a la derecha que se indique.
rowspan
Por ejemplo, rowspan="2". Une esta celda con la de abajo, formando una combinación de dos celdas en vertical.
Combina la celda actual con el número de celdas hacia abajo que se indique.
<h1>Celdas combinadas horizontal y verticalmente</h1><tableborder="1px"width="250px"><tr><tdrowspan="2"colspan="2">A</td><td>B</td><td>C</td></tr><tr><tdcolspan="2">D</td></tr><tr><td>E</td><td>F</td><td>G</td><td>H</td></tr></table>
Resultado
Celdas combinadas horizontal y verticalmente
A
B
C
D
E
F
G
H
Tablas dentro de tablas
Para generar tablas aún más complejas, se pueden meter elementos <table>, dentro de otras tablas. Lo que se hace es meter una etiqueta <table> con todos sus elementos de fila y columna dentro de un elemento <td> o <th>, NUNCA dentro de un <tr>.
<h1>Tabla dentro de tabla</h1><tableborder="1px"width="500px"><tr><td>A</td><td>B</td><tdrowspan="3">C</td><td>D</td></tr><tr><tdrowspan="2">E</td><td>F</td><tdrowspan="3"><tableborder="1px"width="100%"><tr><tdcolspan="3">A</td><td>B</td></tr><tr><td>C</td><tdcolspan="2">D</td><td>E</td></tr><tr><tdcolspan="4">F</td></tr><tr><td>G</td><td>H</td><td>I</td><td>J</td></tr></table></td></tr><tr><td>H</td></tr><tr><td>l</td><td>J</td><td>K</td></tr></table>
Resultado
Tabla dentro de tabla
A
B
C
D
E
F
A
B
C
D
E
F
G
H
I
J
H
l
J
K
Formularios
Los formularios son elementos fundamentales en las páginas web modernas. Permiten a los usuarios interactuar con la página, enviar datos y realizar diversas acciones. Un formulario se define mediante la etiqueta <form> y puede contener varios tipos de campos de entrada, como cuadros de texto, botones, casillas de verificación, menús desplegables, entre otros.
HTML5 ha introducido nuevos tipos de campos y atributos para mejorar la funcionalidad y la usabilidad de los formularios. La página Wufoo muestra una lista completa de los nuevos tipos de campos y atributos disponibles en HTML5.
Métodos de paso de datos
Los formularios pueden enviar datos al servidor utilizando dos métodos principales: GET y POST. La elección del método depende del tipo de datos que se envían y de la seguridad requerida.
GET: Este método envía los datos del formulario como parte de la URL. Es adecuado para formularios que no contienen información sensible y cuando se desea que los datos sean visibles en la URL. Sin embargo, tiene limitaciones en la cantidad de datos que se pueden enviar. Por ejemplo: /procesa_formulario?nombre=Juan&edad=30
POST: Este método envía los datos del formulario en el cuerpo de la solicitud HTTP. Es más seguro que GET y es adecuado para formularios que contienen información sensible o cuando se envían grandes cantidades de datos.
