28/5/24, 23:36 HTML5

HTML5

Sitio: Aula virtual CIFP Ferrolterra Imprimido por: SAR1_Juan Carlos Sandomingo Castillo
Curso: Informática industrial Día: martes, 28 de mayo de 2024, 23:35
Libro: HTML5

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 1/47
28/5/24, 23:36 HTML5

Descripción

Desarrollo y publicación de páginas web.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 2/47
28/5/24, 23:36 HTML5

Tabla de contenidos

1. INTRODUCCIÓN

2. Aspectos básicos del lenguaje HTML

3. Formato de texto

4. Enlaces

5. Multimedia

6. Maquetación

7. Organización de la información.

8. Publicación

9. JAVA

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 3/47
28/5/24, 23:36 HTML5

1. INTRODUCCIÓN

HTML
HTML es el lenguaje en el que se construyen las páginas web. Estas páginas constituyen un gran aliado como medio de comunicación, capaz de llegar a
millones de personas.

Antes de comenzar a crear nuestras páginas web, conviene revisar algunos conceptos básicos que casi forman parte de nuestra vida cotidiana, pero en los
que no siempre nos hemos parado a pensar de forma más reposada.

Hablar hoy en día de la importancia de Internet probablemente no sea necesario. Los cambios que se vienen produciendo desde hace años son muy
numerosos y de gran profundidad. Nos detendremos sólo en uno de sus aspectos, el que ha hecho que las personas se hayan transformado
progresivamente de simples consumidores de información en generadores de contenidos.

Si nos fijamos con detenimiento observaremos cómo nuestra relación con Internet comenzó con una fase en la que, gracias a las páginas web, la conocida
red World Wide Web, podíamos consultar todo tipo de información, tener acceso a noticias casi en tiempo real, a documentación ilimitada, etc.

En algún momento de ese camino de acceso a la información, una gran cantidad de usuarios, por no decir la mayoría, se va convirtiendo progresivamente
en generadores de contenido, especialmente con el aterrizaje del concepto de la web 2.0. Hoy en día muchos de nosotros publicamos contenidos en
Internet con las herramientas que tenemos a nuestra disposición, ya sea a través de un blog, a través de redes sociales, sistemas de microblogging,
participación en grupos de trabajo, etc. Hemos pasado de meros consumidores de información a generadores de contenidos.

Publicar en Internet
Bien, si ya estamos publicando nuestros contenidos, ¿para qué necesitamos utilizar el lenguaje HTML? El lenguaje de etiquetas HTML es la base y la esencia
sobre la que está construida la World Wide Web en la actualidad. Todas las páginas web emplean este conjunto de normas, para que los navegadores web
sean capaces de interpretarlas. Por tanto, comprender el funcionamiento de este lenguaje nos permitirá publicar contenidos en Internet con autonomía, sin
depender de una plataforma concreta o de un sistema de generación de contenidos.

Además, comprender el funcionamiento de las etiquetas HTML nos ayudará también al publicar contenidos dentro de otras páginas web que contemplen la
publicación de objetos, es decir, la mayoría de los sistemas modernos de redes sociales, plataformas de elearning, etc.

Un poco de terminología
Pero estamos mezclando términos y conceptos; aclaremos algunos de ellos, como si nunca los hubiésemos oído.

Internet es una red que conecta ordenadores a través de todo el planeta, para compartir contenidos alojados, a través de algunos de esos ordenadores,
normalmente denominados servidores. Así, cada servidor puede contener algún tipo de recurso o de servicio. El servicio más extendido de Internet es sin
duda el conocido como World Wide Web, es decir, la red de servidores de páginas web.

Los servidores de la World Wide Web contienen páginas web que pueden ser consultadas por cualquier usuario para acceder a información e incluso
interactuar con ellas, comportándose como verdaderas aplicaciones.

Las páginas web internamente se estructuran como archivos de texto que, al ser transferidos al ordenador o al dispositivo del usuario, pueden ser
interpretados con sentido por un navegador web, como Firefox, Chrome, Opera, Safari, etc.

Para que los navegadores puedan entender correctamente las páginas web, éstas utilizan un conjunto de normas denominadas HTML (que viene
de HyperText Markup Language), es decir, un lenguaje basado en etiquetas que se escriben mediante signos de mayor y menor. Por ejemplo, para indicar
que el navegador debe mostrar un párrafo de texto al usuario, utilizamos la etiqueta <p> para indicar el comienzo y </p> para indicar su final. Así el
lenguaje HTML se emplea para definir la estructura de la información contenida en una página web.

HTML y otras normas

Por tanto llegamos a la conclusión de que básicamente una página web es un archivo con texto en el que iremos insertando diferentes etiquetas HTML,
para que ese contenido pueda ser interpretado por nuestro navegador web. Poco a poco iremos conociendo las principales etiquetas, para poderlas
emplear con soltura. Existen diferentes versiones del lenguaje HTML.

Junto a HTML podremos encontrar referencias a la norma XHTML, que es una versión semánticamente más estricta de HTML, basada en XML, en el que hay
que tener más cuidado al aplicar las etiquetas, consiguiéndose así páginas web más respetuosas con los estándares. No obstante, en la actualidad esta
versión ha sido abandonada en favor de HTML 5.

Por último, HTML se complementa con otro conjunto de normas denominadas CSS (Cascade Style Sheet) u hojas de estilo. Mientras que HTML se encarga
de definir la estructura y la organización que tendrá la información de la página web, CSS nos proporciona un conjunto de reglas orientadas a definir su
formato y apariencia. Con las hojas de estilo podremos definir aspectos como el espacio entre líneas, el borde que rodea a un párrafo, los colores del texto
o el tipo de letra.

Todo este baile de siglas puede parecer confuso al principio, pero se va asimilando de forma natural en cuanto se empieza a trabajar.

A todo este conjunto hay que añadir también algunos otros lenguajes que, unidos a los anteriores, nos permitirán hacer cosas aún más complejas, como
añadir interactividad a las páginas y convertir nuestras páginas web en verdaderas aplicaciones. Estamos hablando de lenguajes como Javascript o PHP, por
citar un par de ejemplos.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 4/47
28/5/24, 23:36 HTML5
Y ¿Quién define la mayor parte de este conjunto de normas? Tanto HTML como CSS, además de otros estándares de lo más variados, son definidos por un
organismo denominado World Wide Web Consortium, más conocido como W3C (http://www.w3.org). Este consorcio se encarga de marcar los caminos que
seguirá la web y que posteriormente son adoptados por las empresas que se mueven en el diseño de navegadores, herramientas web, etc.

El modelo cliente/servidor
Aunque todos tenemos cierta referencia sobre cómo funciona Internet, lo pondremos un poco en común. Básicamente Internet se compone de ordenadores
y conjuntos de ordenadores a los que llamamos servidores. Estas máquinas, conectadas a Internet, nos ofrecen algún tipo de servicio al resto de usuarios,
que con nuestros ordenadores somos sus clientes.

De este modo se establece una relación en la que un servidor ofrece algo a un cliente que lo consulta. En el caso del servicio World Wide Web, los servidores
nos ofrecen páginas web que serán interpretadas en nuestros clientes mediante un navegador de páginas web.

Si bien nos referimos a ordenadores cuando hablamos de los clientes, en realidad puede ser cualquier tipo de dispositivo que incluya una aplicación capaz
de interpretar el contenido que le llega.

El software que se encuentre en el servidor también es muy importante, ya que determinará el tipo de páginas web con la que se puede trabajar. Así, hoy en
día, la mayoría de los servidores pueden trabajar con páginas web normales, en formato

HTML, o emplear otros sistemas dinámicos, como PHP, que les permiten generar páginas web en tiempo real, empleando bases de datos y todo tipo de
tecnologías.

Direcciones únicas. URL

Sólo nos queda un problema por resolver en el modelo cliente/servidor: ¿Cómo podemos acceder a un servidor determinado si hay millones de ellos? Cada
servidor en Internet tiene un identificador único, denominado dirección IP. Las direcciones IP clásicas son secuencias de 4 números entre 0 y 255 (unos
valores mucho mayores en el caso del formato IPv6, el sustituto del formato IP).

De este modo, por ejemplo, la página del conocido buscador Google se encuentra en esta dirección: 216.58.209.68 , por lo que poniendo ese valor en un
navegador web podré acceder a esa página.

Resulta obvio que recordar esas direcciones no es sencillo. Por eso contamos con direcciones web que tienen más sentido para una persona, del
tipo www.google.es. En Internet encontramos unos servidores de resolución de nombres de dominio, denominados DNS, que toman una dirección como la
anterior y la convierten en el formato numérico de su IP. Es decir, asocian la dirección IP de un servidor al nombre que le corresponda para que nos resulte
más sencillo poder acceder a esas páginas.

Por último, para terminar de componer la dirección, se la suele preceder de un identificador del protocolo, que para las páginas web es http o https (en el
caso de páginas seguras). En el ejemplo anterior, la dirección completa quedaría así:

http://www.google.es

Y a esto es a lo que llamamos un identificador uniforme de recurso o URL (Uniform Resource Locator), ya que es una dirección que nos permite acceder de
forma inequívoca a un determinado servidor.

Si observas las direcciones de Internet que introducimos en nuestro navegador, observarás que no siempre son tan sencillas. Normalmente aparecen varias
barras y otros caracteres añadiendo parámetros a la dirección. Debemos pensar que en los modelos más sencillos de servidores, los contenidos se dividen
en subcarpetas, que se identifican con el símbolo /, por lo que, cuando encontramos una dirección como la siguiente:

http://www.google.com/imghp

Estamos indicando que queremos acceder a la página de Google, pero a un contenido concreto. Esa dirección sigue siendo la URL de una página concreta.

En general, la URL es la dirección que nos permite especificar la dirección de Internet de un recurso específico, ya sea una página web, una imagen, un vídeo
o incluso un sencillo comentario en un foro.

¿Qué necesitamos para trabajar con HTML?

Ahora que sabemos cómo funciona la infraestructura de la World Wide Web, volvamos sobre cómo se diseñaría su interior.

Los archivos, que diseñaremos al crear un espacio web, no son más que archivos de texto sencillos, por lo que sólo nos hará falta un programa de edición
de textos planos y un navegador web para ver la apariencia que va tomando nuestra página web.

Hay multitud de editores libres y gratuitos que podemos emplear, incluso los editores predeterminados de cada sistema operativo son una buena opción,
como el "Editor de Texto" en sistemas operativos Linux o el propio "Bloc de notas" Windows.

Tomando esto como punto de partida, no nos resultará difícil encontrar editores de texto algo más completos que nos simplificarán nuestro trabajo. Así, por
ejemplo, al crear una página con el editor estándar de un sistema Linux, observaremos que de forma automática destaca las etiquetas, simplificándose
notablemente la creación de páginas web. La figura muestra un ejemplo.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 5/47
28/5/24, 23:36 HTML5

Ésta es tan sólo la ayuda más simple que nos puede proporcionar un editor, ya que normalmente emplearemos alguno que hasta nos permitirá editar la
página sin necesidad de escribir las etiquetas manualmente, proporcionándonos una representación visual del aspecto que tomará la página web.

Herramientas
Para generar un sitio web, recurriremos normalmente a un conjunto variado de aplicaciones. Para nuestros propósitos nos centraremos en algunas
alternativas que debemos instalar en nuestro ordenador, antes de continuar.

1-Editor de texto
Para cualquier edición básica de una página web necesitaremos una aplicación como ésta. En este caso no necesitaremos instalar nada, ya que todos los
sistemas operativos actuales incorporan algún editor básico.

Nota: Para modificar una página web necesitamos un editor de texto plano. No nos estamos refiriendo a avanzados procesadores de texto, sino a sencillos
editores como "gedit", "Bloc de notas", etc.

2-Navegador
Evidentemente, también necesitamos un navegador web para ver las páginas que estamos creando. Todos los ordenadores cuentan con este tipo de
aplicaciones. En nuestro caso recomendamos contar con Firefox o con Chrome (o Iceweasel o Chromiun si estamos trabajando en determinadas
distribuciones de Linux). De hecho, resulta muy útil probar nuestro sitio web en varios navegadores para ver su apariencia final.

3-Editor de páginas web

Un editor visual de archivos HTML nos vendrá muy bien para poder ver la apariencia que está tomando cada página y poder realizar las diferentes
modificaciones, sin tener que recurrir al navegador permanentemente, aunque no es del todo imprescindible. En nuestro caso nos inclinaremos por emplear
la aplicación BlueGriffon, que es gratuita, multiplataforma y de código abierto. Existen otras alternativas, pero ésta es la que más se ajusta a nuestras
necesidades.

Una vez descargada la versión apropiada para nuestro sistema operativo, procederemos a instalarla siguiendo los métodos habituales.

4-Editor de imágenes
La web es siempre muy visual; nos encontraremos con frecuencia ante la necesidad de editar alguna imagen o generar algún pequeño título para nuestros
contenidos. Para ello necesitaremos un programa que nos permita realizar este tipo de edición. Podremos contar, por ejemplo, con The Gimp, una aplicación
gratuita, de código abierto y multiplataforma para edición de imágenes.

Para Windows debemos descargar la última versión y proceder a instalarla. Si estamos trabajando con algún sistema Linux, instalaremos Gimp desde las
herramientas de instalación de aplicaciones, ya que está disponible en todas las distribuciones.

5-Aplicación de FTP
Cuando nuestra web esté terminada, necesitaremos transmitirla a un servidor de FTP para que esté visible en todo Internet. Para ello emplearemos una
aplicación de FTP. Filezilla cumple los mismos criterios que los programas anteriores, por lo que será nuestra recomendación.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 6/47
28/5/24, 23:36 HTML5

2. Aspectos básicos del lenguaje HTML

Etiquetas HTML
Una etiqueta HTML es un término rodeado por un signo de menor y otro de mayor; por ejemplo: <strong>

Esta etiqueta indica que el texto que aparece a continuación se debe destacar sobre el resto; normalmente se muestra en negrita.

En muchos casos necesitaremos también una segunda etiqueta que delimite el final. Así, para que el texto deje de estar destacado y continúe normalmente,
empleamos la misma etiqueta con una barra: </strong>

El conjunto de las dos etiquetas y el texto contenido en su interior conformarían un elemento HTML.

Algunos elementos requieren esa apertura y cierre, mientras que en otros casos sólo necesitaremos una etiqueta, ya que reflejamos un elemento puntual o
con un contenido vacío. Por ejemplo:

<hr /> hace que en el documento aparezca una línea separando el texto anterior del siguiente. Como se puede observar, cuando un elemento no va a
tener una etiqueta de cierre (no existe un </hr>), el indicador de fin se añade en la propia etiqueta inicial.

Nota: Todas las etiquetas HTML se escriben siempre en minúsculas. Si bien los navegadores son capaces de interpretar las etiquetas en mayúsculas, las
normas de la W3C especifican que todas las etiquetas se debe escribir en minúsculas.

Otra característica importante de las etiquetas es que son anidables, por lo que podemos definir un párrafo (mediante las etiquetas <p> y </p>) y en su
interior incluir una lista de elementos, imágenes, texto destacado, etc. empleando diferentes etiquetas. Veremos muchos ejemplos al respecto.

Parámetros de las etiquetas

Muchas etiquetas HTML necesitan contar con parámetros para funcionar correctamente. Éstos son modificadores que se introducen entre los signos de
apertura y cierre para definir algún matiz concreto del elemento HTML.

Por ejemplo, la etiqueta <img /> se emplea para insertar una imagen en la página web, pero por si sola no funciona correctamente. Necesita que le
incorporemos un parámetro en el que indiquemos qué imagen será la que se muestre. Quedaría así:

<img src=”fotodelgrupo.jpg” />

En el ejemplo siguiente, además de indicar qué imagen se mostrará, establecemos el tamaño que ocupará en la pantalla:

<img src=”fotodelaula5.jpg” width=”300px” height=”150px” />

Los parámetros se identifican por un término, seguido de un signo de igual y a continuación, entre comillas, el valor que le queramos asignar.

Nota: Aunque podemos usar comillas simples, normalmente se usan siempre comillas dobles para englobar el valor de cada parámetro.

Estructura básica de una página

Las páginas web mantienen una estructura muy sencilla que debemos respetar, para que los navegadores sean capaces de presentarla. No podemos
comenzar nuestra página con una etiqueta de párrafo, por ejemplo, sino que debemos indicar qué tipo de página estamos generando, qué información
adicional llevará y dónde comienza el contenido que debe ser mostrado.

De este modo, cualquier página web incluirá al menos las siguientes etiquetas:

<html> y </html> colocadas al principio y fin del documento indican dónde comienza y finaliza la página web.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 7/47
28/5/24, 23:36 HTML5
<head> y </head> definen un espacio en el que incluiremos contenidos que no se van a mostrar directamente en el navegador, sino que sirven para
describir determinados aspectos del documento, como su título, autor, los estilos que emplearemos, pequeñas funciones que se deben realizar, etc.

<body> y </body> en su interior se incluye la información que se mostrará en el navegador. Es el contenido real de la página, estructurado mediante las
diferentes etiquetas.

Junto a las tres etiquetas anteriores podemos encontrar algunas más que son importantes para que la web se interprete correctamente:

<!DOCTYPE> y <?xml> son dos etiquetas que indican qué tipo de documento estamos generando y a qué normas se ajusta. Normalmente serán siempre
iguales y será nuestro editor el que se encargue de colocarlas al principio de la página, cuando sea necesario.

Con todo lo anterior, una página creada desde cero y con un breve contenido quedaría de la siguiente manera:

<!DOCTYPE html> <html>

<head> <title>Mi primera página</title> </head>
<body> <p>Mi primera página web, creada con tan sólo copiar y pegar.</p> </body>
</html>
Eso es todo. Ya tenemos diseñada nuestra primera página web.

Probando la página web

Vamos a intentar probar nuestra página anterior siguiendo estos pasos:

1. Abriremos un editor de texto sencillo, como el "Bloc de notas" en Windows o el "Editor de textos" de Linux. En su interior copiaremos y pegaremos el
texto anterior o bien lo escribiremos desde cero. En este segundo caso debemos prestar mucha atención, para no escribir mal ninguna etiqueta.
3 de 20

2. A continuación guardaremos la página web en alguna carpeta de nuestro ordenador. El nombre del archivo debe terminar en .html o en .htm. Así,
podemos emplear el nombre index.html, que es el que se suele asignar siempre a nuestra página web principal.

Nota: Los nombres de los archivos de las páginas web deberían escribirse siempre en minúsculas, sin espacios y sin caracteres especiales, reduciéndolos a
letras y números y, si acaso, algún guión alto o bajo. De ese modo no tendremos problemas al subir nuestras páginas a un servidor web.

3. Usando nuestro explorador de archivos, accederemos a la carpeta en cuestión; debemos tener a la vista el archivo y podremos hacer doble clic sobre él
para que se abra dentro de nuestro navegador.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 8/47
28/5/24, 23:36 HTML5

Si todo ha ido bien, veremos una página web en nuestro navegador. Aquí han sucedido muchas cosas que se pueden ir destacando:

-El navegador no muestra el texto que hemos escrito en el documento html; sólo el contenido que aparece dentro del <body>, del cuerpo de la página. En
la pestaña podemos ver el título de la página, que coincide exactamente con lo que establecimos mediante el elemento <title> incluido en la cabecera de
la página (<head>). Merece la pena fijarse en la URL de nuestra página web, es decir, la dirección única. Como nuestro archivo no está colocado en Internet
o en un servidor, la dirección no comienza con http://, sino que veremos que empieza con file:// seguido de la ruta necesaria para llegar al archivo.

Aquí podríamos dar por concluido nuestro trabajo. Si hemos comprendido cómo funciona el modelo de etiquetas y de prueba en el navegador, sólo nos
queda comenzar a conocer diferentes etiquetas para que los documentos se muestren tal y como nosotros queremos.

Con esta prueba ha quedado demostrado también que el uso de un editor más sofisticado es totalmente opcional, aunque la realidad es que se simplifica
notablemente la incorporación de etiquetas, sobre todo aquellas que no se usan con frecuencia.

Crear una página con un editor de páginas web

Los editores de páginas web nos evitarán los pasos más repetitivos y nos protegerán ante errores de escritura. En nuestro

caso emplearemos el editor BlueGriffon. Al ejecutarlo, aparece como se muestra en la figura:

Para comenzar, haremos clic en el botón Nuevo Archivo. Aparecerá un espacio en blanco en el que podemos escribir el texto que queramos. Aquí no
debemos escribir etiquetas; la aplicación se encargará de incorporarlas por nosotros.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 9/47
28/5/24, 23:36 HTML5

Por último, guardaremos la página web con los métodos habituales. Al hacerlo, el programa nos pedirá que indiquemos un título para la página y a
continuación que indiquemos el nombre del archivo.

El título, como vimos en el ejemplo anterior, es el nombre que se muestra en el navegador al visualizar la web. Al contrario de los nombres de archivo,
puede contener espacios, tildes y todo tipo de caracteres.

Previsualizar la página web

Para mostrar la página web, podemos acceder a la carpeta en la que hayamos guardado la página o simplemente podemos hacer clic en el botón Vista
previa en un navegador, en la parte derecha de la barra de iconos.

El resultado será el mismo, aunque la primera vez que mostremos una página web puede aparecer una imagen como la de la figura, en la que se nos pide
que especifiquemos qué navegador queremos emplear.

Haciendo clic en el botón Elegir podremos seleccionar el navegador, buscando su archivo ejecutable entre las diferentes carpetas de nuestro ordenador.
Este proceso no siempre es necesario y en todo caso sólo hay que hacerlo una vez.

Código y WYSIWYG
La principal ventaja de los editores de este tipo es que no es necesario desplegar el navegador para probar cada pequeño cambio que realicemos. Estamos
trabajando con un editor visual, que va a intentar mostrarnos lo más fielmente posible la apariencia final de nuestra página web.

No obstante, este tipo de editores cuentan con la posibilidad de mostrarnos la página web tal y como se está creando, para que podamos modificar
cualquier etiqueta que queramos, incrementando así su potencia y permitiéndonos mejorar nuestro conocimiento del lenguaje.

Si nos fijamos en la parte inferior, observaremos que hay dos botones, uno llamado wysiwyg que nos lleva a la versión visual, y el botón source, que nos
muestra el código fuente de la página, es decir, todos los elementos HTML.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 10/47
28/5/24, 23:36 HTML5

Esta visión del código nos va a resultar muy útil en estos primeros momentos, para ir analizando cómo varía la página web al incorporar nuevas etiquetas.
Además, cuando seamos expertos diseñadores de páginas web, nos será igual de útil para añadir modificaciones difíciles de conseguir desde el editor visual.

El término wysiwyg es el acrónimo de What You See Is What You Get, que se traduce como “lo que ves es lo que obtienes”, en referencia a que la aplicación
nos está mostrando la página como se mostrará después.

Tipos de archivo en BlueGriffon

Un último matiz por determinar es qué tipo de página web está generando BlueGriffon. Como sabemos, hay varios estándares diferentes y la aplicación es
capaz de trabajar con todos ellos. Intentemos crear una nueva página web, pero en esta ocasión en lugar de hacer clic en el botón Nuevo Archivo
seleccionaremos la pequeña flecha que aparece a su derecha. En el menú desplegable haremos clic en Más opciones.

El cuadro de diálogo que aparece nos indica qué tipo de página web estamos creando, entre XHTML y HTML. En nuestro caso generaremos páginas web
basadas en el estándar HTML 5, por lo que seleccionaremos esa opción y haremos clic en el botón Aceptar.

De aquí en adelante, cada vez que hagamos clic en Nuevo Archivo, se creará una página de este tipo. Tendríamos que regresar a Más opciones para
cambiar el modelo de páginas.

Modificar una página web

Avanzando un poco en la creación de la página, la forma habitual de trabajar será la de incorporar el texto que deseemos y a continuación ir aplicándole el
formato necesario. En este sentido el editor BlueGriffon se comporta como cualquier otra aplicación del estilo. Podemos abrir y guardar cada página tantas
veces como deseemos y aplicar las modificaciones que necesitemos. Observaremos cómo cada cambio se muestra, tanto en el panel de wysiwyg como en el
de código fuente.

En el navegador podremos ver los cambios con tan sólo recargar la página web, para que éste muestre las últimas modificaciones.

Las páginas web no dejan nunca de ser archivos de texto sencillo, por lo que podemos utilizar diferentes editores sobre un mismo archivo. Podríamos
comenzar con BlueGriffon, por ejemplo, para terminar luego haciendo algunos cambios con un editor sencillo.

Texto
A continuación comenzaremos a revisar las principales etiquetas que se utilizan para aplicar formato a un texto.

Títulos y párrafos
El lenguaje HTML es muy cuidadoso con la organización de la información, por lo que lo primero que debemos conocer es cómo estructurar los títulos y
cómo definir los párrafos de texto.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 11/47
28/5/24, 23:36 HTML5

Párrafos
Las etiquetas <p> y </p> se emplean para definir un bloque de texto que se comporta como un párrafo. Normalmente no dejaremos nunca una porción
de texto suelta por la página web, sino que la rodearemos con esas etiquetas. El editor de texto se encargará de hacerlo por nosotros pero, si estamos
usando otro tipo de editor, debemos asegurarnos de qué sucede.

Actividad 1

Vamos a incorporar algunos bloques de texto a nuestra página web. Accede a esta página (http://es.lipsum.com/feed/html), copia los primeros cuatro
bloques de texto y pégalos en una nueva página web creada con BlueGriffon; posteriormente guarda la página y comprueba que el texto se ha dividido en
párrafos. Si no es así, lo haremos manualmente pulsando la tecla Intro al final de cada párrafo.

Si observamos la página web en su código, veremos algo parecido a la figura, donde cada bloque de texto aparece rodeado por las etiquetas <p> y </p>.

Los párrafos se insertan automáticamente en BlueGriffon cada vez que pulsamos la tecla Intro. No obstante podemos forzar ese comportamiento
seleccionando la opción Párrafo dentro de la lista desplegable que aparece en la parte izquierda de la aplicación. Para quitar las marcas de párrafo,
deberíamos seleccionar la opción Cuerpo de texto.

Títulos
Las etiquetas <h1> y </h1> se utilizan para definir un texto como título, indicando que es una cabecera (la h viene de header, cabecera en inglés) que
queremos destacar sobre el resto del texto. Junto a <h1> contamos con <h2>, <h3> y así hasta

<h6> para definir diferentes títulos, de mayor a menor importancia.

Una página web bien diseñada contará con estos encabezados para definir los distintos apartados del texto, con sus diferentes niveles. En la figura se puede
observar cómo hemos incorporado algunos encabezados, en este caso h1 y h2, a nuestro texto. Se consigue añadiendo el texto y a continuación
seleccionando el encabezado deseado en cuadro de la parte izquierda.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 12/47
28/5/24, 23:36 HTML5
Como se puede observar, cada uno de los niveles de encabezado tiene una apariencia diferente de tamaño y tipo de letra. Este aspecto se puede modificar
como veremos un poco más tarde.

Saltos de línea y líneas separadoras

Para complementar las opciones de separación del texto, contamos con dos etiquetas más.

<br /> inserta un salto de línea en el texto. No genera un nuevo párrafo, sino que parte la línea en dos. Es un elemento puntual, que no lleva etiqueta de
cierre.

<hr /> inserta un salto de línea en el texto, pero mostrando una línea horizontal visible.

Actividad 2
En la página del ejemplo anterior accede a la versión del código fuente e inserta esas etiquetas en dos lugares diferentes dentro de un párrafo y observa el
resultado. Inserta también una línea horizontal entre dos párrafos. Por último, prueba a insertar uno de esos elementos dentro de una cabecera y observa el resultado. De
este modo podemos tener un título que ocupe varias líneas, dividido exactamente donde más nos interese

Como hemos podido comprobar, podemos emplear estas etiquetas tanto para realizar pequeñas separaciones en el interior de un párrafo como fuera de él. El salto de línea se emplea con
cierta frecuencia, aunque no debería usarse para distanciar párrafos, ya que veremos otras opciones más apropiadas. Sea como fuere, desde BlueGriffon resulta muy sencillo insertar estos
saltos de línea colocándonos en el lugar apropiado y pulsando la combinación Mayús-Intro.

Para insertar una línea horizontal en BlueGriffon, seleccionaremos la opción Barra horizontal del menú Insertar. Allí podremos modificar su apariencia antes de crearla.

Etiquetas de estructura
En las páginas web actuales, normalmente no nos limitaremos a definir todo el texto de la página exclusivamente con etiquetas <hx> y <p>, ya que se consigue una estructura
demasiado general, para aplicaciones lectoras para personas con discapacidad o para los propios buscadores de Internet.

Los estándares actuales nos proporcionan un conjunto de elementos HTML para englobar los contenidos que se suelen encontrar en una página web. Cada uno de estos
elementos está pensado para contener diferentes elementos HTML, como párrafos, imágenes, etc. Estas son sus etiquetas:

<header> y </header>: para definir un bloque de contenido que hará las veces de título de la página web.

<footer> y </footer>: define el pie de página de nuestra web.

<nav> y </nav>: donde incluiremos diferentes enlaces para que el usuario pueda desplazarse entre las partes de nuestro sitio web.

<section> y </section>: para definir grandes secciones de nuestra página.

<article> y </article>: marca los límites de un contenido específico, como una entrada de un blog o un artículo en general.

<aside> y </aside>: se emplea para definir un contenido que está relacionado con la página, pero que se debe
considerar como separado del contenido principal.

Junto a estos elementos aún contamos con algunos más como <hgroup> para cabeceras de secciones, <figure> para contenidos multimedia, <time> para definir la fecha del
contenido o <mark> para definir textos destacados para referencias; todas estas etiquetas con sus respectivos cierres.

Veamos un ejemplo de cómo quedaría una página web con estas etiquetas. Todas ellas aparecerán dentro del elemento

<body>.

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>Mi primera página</title>

</head>

<body>

<header>

<h1>Cabecera de nuestra página</h1>

</header>

<nav>

<p>Navegación. Aquí podríamos insertar diferentes enlaces al resto de nuestras páginas</p>

</nav>

<section>

<h1>Presentación</h1>

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 13/47
28/5/24, 23:36 HTML5
</section>

<article>

<h2>Una breve nota</h2>

<p>Mi primera página web, creada con tan sólo copiar y pegar.</p>

</article>

<footer>

<p>Autor y fecha de publicación</p>

</footer>

</body>

</html>

Si mostramos esta página en el navegador, se verá exactamente igual que si quitamos las etiquetas de estructura, pero el matiz es que con ellas conseguiremos numerosas
ventajas, aunque no sean visibles.

Por el momento no haremos un uso profuso de estas etiquetas de estructura, pero un sitio web que se vaya a distribuir por

Internet debería emplearlas.

La cabecera de la página
Como recordaremos, cada página web cuenta con un elemento <head> colocado antes del <body>, que no debemos confundir con los elementos de cabecera (<h1>..<h6>) ni
con el encabezado <header> que colocamos dentro del <body>.

Esta cabecera general de la página se emplea para incorporar contenidos que no se mostrarán directamente, pero que tienen una elevada influencia en el aspecto que tendrá la
página y en su comportamiento.

En su interior podemos añadir algunos de los siguientes elementos HTML:

<title> y </title>: se emplea para definir el título de la página. Es imprescindible en HTML5, por lo que siempre debemos añadirlo. Este es el título que se mostrará en la
barra de título del navegador, al hacer un marcador a la página o en los buscadores de Internet.
<link />: se utiliza para enlazar con recursos externos, generalmente hojas de estilo. Volveremos sobre ello más adelante.
<style> y </style>: nos permite definir estilos específicos para la página actual. Se suele emplear en combinación con el anterior, por lo que los trataremos al llegar a las
hojas de estilo.
<base />: define la URL base para el resto de los enlaces que incluyamos en la página web. Se emplea en casos muy concretos.

<script> y </script>: es otro importante elemento que se utiliza para englobar acciones en otros lenguajes, generalmente Javascript, para conseguir que la página web
realice determinadas tareas. Estas son operaciones que se ejecutan al acceder a la página, aumentando su versatilidad.

Actividad 3

Para entender el funcionamiento del elemento script, probaremos a añadir este pequeño código dentro de la página web, entre el <head> y el </head>

<script type="text/javascript">

var d = new Date();

alert ("Hoy es "+ d.toLocaleString() );

</script>

Al escribir esta función, hay que prestar mucha atención a cada paréntesis, punto y coma, etc. Si lo hemos escrito bien, aparecerá un pequeño cuadro
indicándonos la fecha actual. Esto sólo funcionará al probar la página en un navegador web, no dentro de BlueGriffon.

<meta> y </meta>: las etiquetas <meta> no son imprescindibles para el funcionamiento de la página web, pero su inclusión es siempre una buena
práctica porque permiten identificar con facilidad algunos parámetros de la web, como autores, codificación de caracteres, etc.

De todas las etiquetas <meta>, debemos incluir al menos una que defina qué tipo de codificación de caracteres estamos empleando. Teniendo en cuenta
que nuestra web puede ser vista en cualquier lugar del mundo, la codificación de caracteres se encargará de que un ciudadano japonés, por ejemplo, pueda
ver correctamente nuestra página y no una serie de caracteres ininteligibles. Hoy en día emplearemos siempre la codificación UTF-8.

Normalmente la expresaremos de esta forma:

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 14/47
28/5/24, 23:36 HTML5
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Como se puede observar, las etiquetas meta suelen incorporar dos parámetros, el tipo de etiqueta (que suele ser name) y el contenido (con el parámetro
content).

Veamos algunos ejemplos más:

<meta content="Antonio Paniagua" name="author">

<meta content="Prácticas para el material de HTML" name="description">

<meta content="html, cabeceras, etiquetas, estilos, párrafos" name="keywords">

Los valores se describen por sí solos. Keywords significa palabras clave, es decir, términos que describen el contenido de nuestra página. Aún hay algunos
valores más para name, pero con los indicados nuestra página estará suficientemente descrita para que sea localizada con facilidad en Internet.

Cabeceras sencillas
Todo lo anterior irá cobrando sentido poco a poco. No es necesario que nos preocupemos en exceso de tener una cabecera de página completamente
rellena, aunque sí es apropiado en el caso de los elementos <meta>. Para ello, los editores de páginas web suelen contar con una opción que se encargará
de hacer el trabajo más tedioso.

En BlueGriffon seleccionaremos la opción Formato>Propiedades de página (debemos estar en el modo wysiwyg para que

esté activa) y en el cuadro de diálogo que se despliega, podremos editar las principales etiquetas meta, así como el idioma en el que está creada la página
web.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 15/47
28/5/24, 23:36 HTML5

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 16/47
28/5/24, 23:36 HTML5

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 17/47
28/5/24, 23:36 HTML5

3. Formato de texto

Etiquetas de formato de texto

Hay algunas etiquetas que se emplean para destacar pequeñas porciones de un párrafo o de una frase (aunque también se pueden aplicar a un gran
bloque, como un párrafo entero):

<strong> y </strong>: para destacar una parte del texto. Normalmente el texto incluido entre esas etiquetas se representa en negrita.

<em> y </em>: se emplea para enfatizar un texto; habitualmente se representa en cursiva.

<i> e </i>: hacen que un texto se muestre en cursiva. La estética es similar al caso anterior, aunque su significado desde la óptica del lenguaje HTML es
diferente.

Como la mayoría de las etiquetas HTML podemos anidarlas para obtener así un texto doblemente destacado, en este caso con negrita y cursiva. Quedaría
de la siguiente manera:

<p>El bloque siguiente es muy <strong><em>importante</em></strong></p>

Nota: Al anidar diferentes etiquetas es importante mantener el orden al cerrarlas. La última que hayamos abierto será la primera en cerrarse, como en el
ejemplo anterior.

Junto a <strong> y <em> tenemos otras etiquetas destinadas a dar sentido a una parte concreta de la página web: <dfn> para definiciones, <code> para
bloques de código informático, <samp> para ejemplos, <kbd> para texto de teclado, <var> para definir una variable y <cite> para una cita. Cada uno
tiene una apariencia concreta, aunque como veremos a continuación pueden ser modificadas con facilidad. Lo importante aquí es que el texto adquiere un
significado específico, dependiendo de las etiquetas que lo rodeen.

Eso es todo lo que tenemos a nuestro alcance para destacar un parte de un texto mediante etiquetas. En versiones antiguas de HTML existían otras
etiquetas muy utilizadas como <b>, <i>, <font>, etc., pero todas ellas han sido abandonadas en las últimas revisiones del lenguaje HTML. Para aplicar
formato a una web emplearemos estilos.

Estilos
En las ediciones actuales de HTML se hace hincapié en la separación entre el contenido y su apariencia. Por ello, todo lo que tiene que ver con la parte
estética de la web se deja a CSS.

CSS es el acrónimo de Cascade Style Sheet (hojas de estilo en cascada), un estándar que apareció al mismo tiempo que HTML4 y que nos proporciona todos
los elementos que necesitemos para modificar la apariencia de nuestra página web.

En un primer acercamiento podemos decir que con CSS definiremos cómo debe mostrarse un elemento HTML concreto, estableciendo los aspectos
habituales como tamaño, color, tipografía o bordes. Es una definición muy versátil, que nos permitirá modificar la apariencia de todas las páginas del sitio
web, de sólo una de ellas o incluso de un simple elemento dentro de la página.

Así, con los estilos separamos las cuestiones de diseño de las del contenido, obteniendo algunas ventajas imprescindibles. Las dos principales son éstas:

Automáticamente se vuelve muy sencillo modificar cuestiones de diseño a través de un sitio web complejo. Podemos cambiar el tipo de letra de todo un
portal web con tan sólo modificar una línea de un archivo.

Las páginas son más limpias, cargándose más rápido, contando con menos errores y sobre todo más accesibles en todos los sentidos.

Aplicar estilos
Los estilos se pueden aplicar de tres formas diferentes:

Estilos en un archivo externo: definimos una serie de reglas CSS en un archivo, que enlazaremos desde nuestra página web, en la cabecera de la misma.
Este es el método más aconsejado de trabajo y el que emplearemos en el futuro.

Estilos en la cabecera de la página web: de nuevo en la cabecera podemos indicar las reglas CSS que necesitemos, afectando de este modo sólo a la
página web en cuestión.

Estilos en la página web: podemos aplicar estilos dentro de un elemento concreto de la página web, mediante el parámetro style que se puede
establecer para cualquier etiqueta.

Por ahora nos centraremos en la tercera vía. Observemos este ejemplo:

<h1>Qué entendemos por un párrafo</h1>

<p>Un párrafo de texto se compone de un bloque de texto independiente con una apariencia concreta, delimitado por un espacio superior y otro inferior.
</p>

Vamos a modificar el aspecto de esos dos elementos HTML, con tan sólo incorporar el parámetro style en cada uno de ellos seguido de algunos valores.

<h1 style="color: rgb(200, 20, 20); font-family: Helvetica,Arial,sans-serif;">Qué entendemos por un párrafo</h1>

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 18/47
28/5/24, 23:36 HTML5
<p style="font-style: italic; color: rgb(20, 20, 200);">Un párrafo de texto se compone de un bloque de texto independiente con una apariencia concreta,
delimitado por un espacio superior y otro inferior.</p>

Detengámonos un momento en cada caso:

En el primero hemos establecido dos elementos CSS, color para definir un tono rojo (volveremos más adelante sobre el color) y el tipo de letra mediante
font-family.

En el segundo, hemos indicado que todo el párrafo se mostrará en cursiva (font-style: italic) y en un tono azul,mediante el valor color.

Como se puede observar, cada par de elementos CSS especifican su valor correspondiente tras un signo de dos puntos y se separan del siguiente mediante
un punto y coma; así podemos añadir tantas variaciones como necesitemos.

La etiqueta span
En el ejemplo anterior éramos capaces de modificar un bloque de texto completo o un título completo, pero, ¿cómo podríamos modificar sólo una frase
dentro de un párrafo o una simple palabra? La respuesta la encontramos en el elemento HTML denominado <span>.

Con <span> y su correspondiente cierre seremos capaces de realizar una agrupación dentro de un bloque de texto. Visualmente no hay ningún cambio,
pero el hecho de poder crear esa agrupación nos permitirá aplicarle estilos CSS a ese bloque. Continuando con el ejemplo anterior, se puede observar cómo
mediante el uso de span hemos modificado una sola palabra del título y una parte del párrafo.

<h1>Qué entendemos por un <span style="color: rgb(0, 153, 0);">párrafo</span></h1>

<p color:="rgb(20, 20, 200);">Un párrafo de texto se compone de un<span style="font-weight: bold; color: rgb(255, 0, 0);">bloque de texto
independiente</span> con una apariencia concreta, delimitado por un espacio superior y otro inferior.</p>

Se empieza a complicar un poco el ejemplo. En el caso del título hemos hecho que un término aparezca en verde, mientras que el resto mantiene su
apariencia predeterminada. En el párrafo, por el contrario, hemos mantenido el color azul para todo el texto, pero una parte de él se mostrará de color rojo
y en negrita (font-weight:bold). La figura muestra la apariencia del conjunto.

La utilidad de <span> va más allá de la aplicación de estilos, aunque es una de sus facetas más destacadas.

Actividad 1
Realiza un ejemplo donde apliques en un par de frases algunos de los estilos vistos hasta ahora. Puedes repetir

exactamente los mismos con tan sólo copiarlos y pegarlos.

Aplicar estilos con un editor web

La lista de elementos CSS que podemos modificar es muy larga; la iremos analizando con calma. Por suerte también podemos emplear algún editor para
realizar estas modificaciones. Veamos cómo se realiza con BlueGriffon.

Barras de herramientas

En el borde izquierdo del documento están las barras dedicadas a la aplicación de estilos al contenido de la página web. Revisemos las opciones principales.

Los botones representados por un signo de admiración simple, doble y una C, corresponden respectivamente a Énfasis, Énfasis mayor y Code y aplicarán
al texto las etiquetas <em>, <strong> y <code>, que destacan el texto visualmente, pero también semánticamente.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 19/47
28/5/24, 23:36 HTML5
Los botones B, I y U se corresponden respectivamente con negrita, cursiva y subrayado. En estos casos el programa se encargará de aplicar el estilo
necesario al elemento html o mediante una etiqueta span, en el caso de que no esté seleccionado un bloque completo. En la figura se muestra la aplicación
de alguna de estas opciones.

Modificar la tipografía del texto

Menú de formato

En el menú formato encontramos algunas opciones más relacionadas con la aplicación de estilos específicos al texto, tanto los más visuales, situados en la
parte superior, como los que le aportan un sentido al contenido, en la mitad del menú.

Propiedades de estilo

La aplicación de estilos con BlueGriffon se convierte en un proceso muy simple gracias al editor de estilos. Este panel se despliega haciendo clic en el botón
Establecer estilos CSS o en el menú Paneles>Propiedades de estilo.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 20/47
28/5/24, 23:36 HTML5
Desde este espacio podemos aplicar todos los estilos del estándar CSS sobre el contenido que tengamos seleccionado.

Antes de continuar debemos decidir a qué elemento HTML queremos aplicar el estilo. Para ello en la parte superior tenemos una lista denominada Aplicar
estilos a. Nos proporciona dos vías diferentes

Aplicar el estilo mediante una clase, un identificador (ID) o a todos los elementos de un mismo tipo, que se emplea para aplicar un mismo estilo a
una agrupación de elementos. Por el momento no utilizaremos este sistema.

Aplicar el estilo a un elemento, mediante los estilos internos. Esta es la opción con la que estamos trabajando y es la que debemos aplicar.

Actividad 2
Realiza una modificación de toda la página web utilizando esta técnica de selección de la página. Prueba a cambiar el

tipo de letra y el color de fondo de la página.

- Veamos a continuación algunos de los valores que podemos modificar con este panel. Es imprescindible que tras modificar algunos valores accedamos al
código fuente para ver qué etiquetas se han incorporado e ir conociendo así los diferentes operadores de estilos.

Cómo forzar una selección parcial

Al aplicar un estilo a una parte de un título o de un párrafo sólo debe cambiar la parte que tenemos seleccionada. Si esto no funciona o aún no queremos
aplicar el estilo y sólo queremos definir una parte diferenciada mediante una etiqueta span, podemos hacerlo seleccionando la opción Formato>Span.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 21/47
28/5/24, 23:36 HTML5
Si observamos la figura veremos cómo se ha incorporado la etiqueta, a pesar de que aún no tiene ningún formato específico.

Selector de elementos HTML

En la parte inferior del editor se encuentra una zona que nos muestra la etiqueta en la que se encuentra el cursor en cada momento. Como las etiquetas se
anidan unas dentro de otras, normalmente veremos siempre una referencia al cuerpo de la página (<body>), luego al párrafo actual (<p>), etc.

La figura muestra el ejemplo anterior; como se puede ver, estamos dentro de la página, en un párrafo concreto y a su vez dentro de un span determinado.

Además de ubicarnos perfectamente en todo momento, esta línea nos sirve para seleccionar un elemento html concreto. Así, si quisiéramos, por ejemplo,
modificar el estilo de toda la página sólo tendríamos que hacer clic en la etiqueta <body> y a continuación aplicar los estilos adecuados

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 22/47
28/5/24, 23:36 HTML5

4. Enlaces

Enlaces externos
Los enlaces externos son aquellos que creamos en nuestra web, para que nuestros usuarios puedan acceder a otro sitio web concreto o a un punto
determinado del mismo. En estos casos, necesitaremos conocer previamente la dirección única de Internet (la conocida como URL) del sitio en concreto.

Para crear un enlace, necesitaremos también decidir qué parte de nuestra página será el enlace. Normalmente utilizaremos una palabra, una frase o una
imagen, de forma que cuando el usuario haga clic en ese punto, el navegador le llevará a su nuevo destino.

Para crear un enlace utilizamos la etiqueta <a> y el parámetro href para indicar la dirección a la que queremos acceder. Este elemento también cuenta
con una etiqueta de cierre </a>, de modo que todo lo que queda dentro será el contenido sobre el que el usuario podrá hacer clic.

Ejemplo:

El texto comprendido entre <a> y </a> se convierte en un enlace que nos traslada a la página indicada.

Como comentamos, no tiene por qué ser una frase o una palabra. Podemos convertir en un enlace párrafos enteros, imágenes y otros muchos elementos
HTML. Basta con incluirlos dentro de las etiquetas <a>.

La dirección indicada debe estar siempre completa y no contener errores. Por ello lo más recomendable es localizar previamente la dirección mediante
un buscador, para después copiarla desde la barra de direcciones y pegarla en nuestro editor. Debemos pensar que las direcciones no son siempre tan
sencillas como en el ejemplo anterior; más bien sucede lo contrario, cuando enlazamos con páginas interiores de un sitio web.

Enlaces con un editor HTML

La creación de un enlace en el código HTML es bastante sencilla, aunque los editores actuales siempre proporcionan un método para hacerlo. En este
caso contamos con un icono en forma de cadena, que es el que habitualmente se emplea para representar la creación de enlaces en los editores HTML.

Muy importante. Antes de crear un enlace, debemos guardar la página web. Esto resulta imprescindible, si vamos a crear enlaces entre diferentes
páginas web de un mismo sitio. De otro modo las páginas se crearían como enlaces absolutos, como explicaremos más tarde.

Sigamos estos pasos para crear un enlace:

1. Introduciremos el texto que queremos que se convierta en enlace.

2. Seleccionaremos ese texto con el ratón.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 23/47
28/5/24, 23:36 HTML5
3. Haremos clic en el icono Enlace (en forma de cadena).

4. En el cuadro de diálogo que aparece, escribiremos la dirección de la página web o la pegaremos, si la habíamos copiado previamente desde el
navegador.

5. Al hacer clic en Aceptar, nuestro enlace estará ya listo.

Para probar los enlaces, debemos acceder a la previsualización en un navegador, haciendo clic en el icono Vista previa en el navegador.

Archivos para descargar

No siempre enlazaremos con archivos que se van a mostrar en el ordenador. Podemos utilizar estas técnicas para facilitar recursos a nuestros usuarios,
para que se descarguen en su ordenador. Así, si enlazamos con un documento de texto propio de un editor, un archivo zip, una presentación, etc. el
navegador intentará interpretarlo; pero si no lo consigue, hará que el archivo se descargue para que el usuario pueda trabajar con él.

Enlaces entre páginas del mismo sitio

Un sitio web suele componerse de varias páginas web. Normalmente todas esas páginas mantienen una relación entre si, por lo que necesitaremos
conectarlas utilizando enlaces.

Lo veremos a través de un ejemplo. La figura muestra una estructura clásica de un sitio web. Para que el mantenimiento de la web sea sencillo, hemos
optado por mantener varias páginas en el punto inicial del sitio (lo denominaremos carpeta raíz) mientras que otros contenidos se han distribuido en
carpetas. Así hemos creado dos carpetas que contendrán páginas web, y posiblemente algunos recursos más, y una tercera en la que almacenaremos
las diferentes imágenes del portal.

Llegados a este punto, necesitaremos realizar varios enlaces desde la página principal (la llamada index.html) hacia las otras páginas del sitio. Y aquí es
donde viene la principal diferencia entre crear enlaces a otros sitios web o dentro de un mismo sitio web.

Para poder enlazar dos páginas, es necesario que éstas existan, por lo que, si estamos empleando un editor web, debemos guardarlas previamente.

Referencias relativas y absolutas

Al enlazar a otros sitios web, hemos insistido mucho en que es necesario indicar la URL completa, es decir, la dirección entera comenzando por su
http://, con el nombre del sitio web a continuación, y con todas las carpetas y subcarpetas que nos permitiesen identificar la página de forma
inequívoca. Con ello conseguimos lo que se conoce como una referencia absoluta, porque al ser las URL únicas en todo Internet, no hay posibilidad de
ambigüedades. Si a URL está completa, sabemos que apunta a una página específica entre los miles de millones de páginas de Internet.

Por el contrario, este celo en las direcciones no debemos aplicarlo al hacer un enlace entre las páginas web de un sitio web; más bien al contrario. En
este caso nos interesa generar referencias relativas, es decir, que los enlaces tomarán sentido dependiendo de su posición en las carpetas. Por ejemplo,
si desde la página index.html del ejemplo anterior quiero enlazar con la página presentación.html que se encuentra en la misma carpeta, podría
hacerlo con el método absoluto:

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 24/47
28/5/24, 23:36 HTML5
<a href=”http://www.misitioweb.com/presentacion.html”>Accede a la presentación</a>

o mediante un sencillo enlace relativo:

<a href=”presentacion.html”>Accede a la presentación</a>

El segundo método es el correcto. Dado que las dos páginas están en la misma carpeta, sólo necesito indicar su nombre. Hay dos motivos clave por
los que debemos actuar así en los enlaces entre páginas de un mismo portal:

a) Si utilizamos la URL absoluta, nos obligamos a indicar de antemano la dirección completa del sitio web; algo que quizás no tengamos mientras
estamos preparando las páginas y que además nos obligaría a colocar las páginas en Internet para poder probarlas.

b) Si en un momento determinado el sitio web cambia de dominio o lo trasladamos a otra parte, todos los enlaces dejarían de funcionar, al hacer
referencia al sitio antiguo. Por el contrario, si mantenemos los enlaces como relativos, todo el sitio funcionará sin problema se coloque donde se
coloque.

Veamos un par de ejemplos más para entender mejor la situación:

Si, por ejemplo, quisiéramos acceder desde la página index.html a otra página denominada index.html también, pero que se encuentra dentro de la
carpeta oferta, lo hariamos de esta manera:

<a href=”oferta/index.html”>Nuestra oferta formativa</a>

La "/" nos sirve para referirnos a las subcarpetas que nacen desde la carpeta raíz del sitio web.

¿Y para acceder desde la página index.html de la carpeta oferta a una página de la carpeta raiz del sitio? Para acceder a una carpeta anterior, se
emplea una referencia heredada de los sistemas operativos que nos dice que la secuencia ".." nos llevará a la carpeta previa. Por ejemplo, en la página
index.html de la carpeta oferta podría indicar lo siguiente:

<a href=”../presentacion.html”>Consultar la presentación del sitio web</a>

En resumen, las tres técnicas para direccionar un enlace son:

Si las páginas están en la misma carpeta: indicamos el nombre de los archivos nada más.
Si está en una o varias subcarpetas: indicamos las subcarpetas con una / como separador (por ejemplo,
documentos/2014/proyecto.html).
Si está en una o varias carpetas anteriores a la actual: utilizamos .. para retroceder en la estructura (por ejempl ../../propuestas.html nos llevaría a
un archivo situado en dos carpetas antes).

También podemos mezclar .. y / para obtener toda la versatilidad necesaria. Por ejemplo (../2013/proyectos).

Por ese motivo, activaremos siempre en estos casos la casilla La URL es relativa a la ubicación de la página. Como se puede apreciar en las figuras, la
dirección cambia totalmente, dejando sólo la información necesaria para que el enlace funcione en cualquier lugar.

Correo electrónico

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 25/47
28/5/24, 23:36 HTML5
Además de http:// para indicar una dirección de Internet o file:// para indicar un archivo local, hay otros indicadores que se emplean para identificar un
tipo concreto de URL. El que todos necesitamos conocer es mailto:// con el que conseguiremos crear un enlace con un correo electrónico. De este
modo, al hacer clic sobre él, se abrirá la aplicación de correo electrónico de nuestro visitante para que pueda escribir a esa dirección.

Añadir contenido al mensaje

Un enlace como el anterior se puede mejorar un poco para completar el mensaje. Estos cambios no son del todo estándar, si bien funcionan en los
navegadores web actuales.

Podemos añadir algunos valores a la URL, separando el primero con el signo ?. Cada valor posterior irá separado por el signo &. Así contamos con
todos los elementos habituales de un correo electrónico (subject para el asunto, body para el cuerpo, cc para copia, bcc para copia oculta, ...). Así, el
ejemplo podría quedar de esta manera:

<p>Puede <a href="mailto:[email protected]?subject=Tu%20opinión%20nos

interesa&body=Escribe%20tus%20aportaciones">enviarnos un correo</a> con sus impresiones.</p>

Protección del correo electrónico

El incorporar una cuenta de correo a una página web es una opción muy útil, pero que por desgracia hace que se exponga a los robots que
permanentemente peinan la web buscando nuevas direcciones de correo electrónico para enviar correos no deseados, más conocidos como spam.

Por este motivo, el incorporar nuestra dirección de correo a la web debería ser algo muy excepcional. Aquí van algunos consejos:

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 26/47
28/5/24, 23:36 HTML5
Utilizar una dirección de correo específica para el proyecto, no la personal habitual. Hoy en día hay servidores de correo que hacen una gestión
fantástica del spam. Deberíamos optar por uno de ellos.
Podemos optar por no indicar la dirección como un enlace, sino como texto o como una imagen. Una frase del tipo
"Escríbeme a la dirección pedro en gmail" protegerá nuestra dirección al tiempo que permite localizarnos con facilidad. También contamos con
algunas soluciones tecnológicas que emplean Javascript u otras codificaciones para proteger la dirección de correo, aunque no son del todo efectivas.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 27/47
28/5/24, 23:36 HTML5

5. Multimedia

Insertar una imagen

Para insertar una imagen, contamos con un elemento html denominado <img>, que se acompaña del parámetro src para indicar la ubicación de la imagen
(source en inglés). El formato general es el siguiente:

<img src="nombredelaimagen.png" />

Es un elemento que no tiene etiqueta de cierre, por lo que el cierre va incluido en la propia etiqueta.

La dirección de la imagen que indicaremos en src será normalmente una dirección relativa a la página principal, por lo que, antes de insertar una imagen, es
muy importante guardar primero la página web, si estamos utilizando un editor, para evitar las temibles direcciones que comienzan por file:// y que fallarán
al publicar la página en Internet.

Observemos estos otros ejemplos:

<img src="descarga.jpg">: muestra una imagen que está contenida en una carpeta llamada imagenes. Es una dirección relativa.

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTBRlyzoXufqXPmtwS_AyB_bhQPas3oWBLRsAZmx8P3nuPEhVf5&amp;usqp=CAU"

alt="im" title="im">

: Se muestra una imagen ubicada en una dirección de Internet, en este caso del portal Flickr. Es una dirección absoluta, que muestra una imagen que no está
en nuestro ordenador ni en nuestro espacio web, sino directamente en Internet.

Esta última técnica (denominada hotlinking) entraña el riesgo de que, si el portal de donde tomamos el recurso opta por realizar algún cambio, puede que la
imagen deje de mostrarse, pero puede ser un recurso interesante, si disponemos de poco espacio o limitaciones de ancho de banda.

Descripción de la imagen

Por cuestiones de accesibilidad, cada imagen debe acompañarse siempre de un texto que será mostrado en el caso de que, por cualquier motivo, la imagen
no esté disponible y que sirve también como descripción en aplicaciones lectoras para personas con discapacidad.

El texto alternativo se inserta con el atributo alt. Así, una imágenen correcta quedarían de la siguiente manera:

Modificar las dimensiones de la imagen

HTML incorpora dos atributos más a la etiqueta img: width (ancho) y height (alto); con ellos podemos indicar explícitamente la anchura y altura que tendrá
una imagen.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 28/47
28/5/24, 23:36 HTML5
Normalmente estos valores se emplean para establecer los valores reales de la imagen, lo que facilita el proceso de carga de la página, pero también se
pueden emplear para que una imagen se muestre más pequeña, más grande o símplemente distorsionada en alguno de sus ejes.
Ambos atributos se acompañan de un valor entre comillas. Puede venir expresado en dos medidas diferentes:

Píxeles: si el valor indicado no lleva ningún tipo o las letras px, estamos indicando que la medida es en píxeles. Por ejemplo<img src="descarga.jpg"
alt="árbol" width="40px"></p>

Porcentaje: el tamaño puede estar expresado en relación con su valor original, como un porcentaje. Lo indicamos

con el signo %. Por ejemplo en <img src="descarga.jpg" alt="árbol" width="50%" /> la imagen tendría la mitad de su tamaño original.

Editar una imagen

Contamos con una infinidad de métodos para modificar una imagen. Redimensionar una imagen es una técnica imprescindible que todos deberíamos
utilizar con soltura. Podemos realizarla con un gran número de aplicaciones. Veamos cómo se haría con Gimp, una aplicación libre y multiplataforma de
edición de imágenes.

Sigamos estos pasos para conseguirlo:

1. Abrimos Gimp y cargamos la imagen que vamos a redimensionar con Archivo>Abrir.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 29/47
28/5/24, 23:36 HTML5

Algunas técnicas útiles: Escalar, rotar, recortar...

Insertar una imagen con un editor web

Añadir un enlace a la imagen

Puede parecer una cuestión trivial pero, si quisiéramos que la imagen sirviera como enlace a otra página web, nos bastaría con hacer clic sobre ella para
seleccionarla y, a continuación, pulsar en el botón Enlace (o seleccionar Insertar>Enlace). Así aparecería el cuadro de diálogo necesario para que
indiquemos la URL que nos interese.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 30/47
28/5/24, 23:36 HTML5

Vídeo. Conceptos básicos

La inserción de vídeos en una página web adolece de un problema distinto al de las imágenes. Los diferentes contenedores de vídeo y formatos hacen que,
a veces, sea complejo asegurarnos de que toda nuestra audiencia sea capaz de visualizar el contenido que vamos a mostrar.

El contenedor de vídeo es el tipo de archivo que va contener el vídeo, las pistas de audio y otra información necesaria poder mostrar el vídeo
correctamente. Hay muchos contenedores diferentes, como MPEG-4 (archivos .mp4), Flash (.flv o .f4v), Ogg Vorbis (archivos .ogg), WebM (archivos .webm) o
AVI (extensión .avi).

Cada uno de esos contenedores tiene sus ventajas y sus inconvenientes, es más abierto o presenta las limitaciones propias del software propietario.

Dentro de cada contenedor de vídeo se insertará el vídeo en cuestión. Dado el tamaño que suele ocupar una pequeña porción de vídeo, todos los
contenedores almacenan el contenido con algún tipo de compresión. Es decir, el vídeo está codificado con algún método. Esta compresión se realiza
mediante un codec. Lo mismo sucede con el flujo de audio; también estará comprimida con algún codec de audio. Así, en cada contenedor podemos
encontrar uno o varios flujos de video y audio, cada uno codificado con un método diferente. Si nuestro ordenador no dispone de los codec adecuados, nos
encontraremos con que no somos capaces de visualizar o escuchar el material en cuestión.

En resumen, el vídeo y el audio están codificados con un formato concreto y, a su vez, todo ello está insertado en un formato de archivo contenedor. Dentro
de un formato contenedor no siempre nos encontraremos la misma codificación.

Todo esto genera una combinatoria enorme de formatos a los que hay que incorporar la variable del navegador. Cada navegador en la actualidad es capaz
de reproducir un número concreto de formatos. A día de hoy, casi todas las nuevas versiones de los navegadores son capaces de reproducir vídeo en
formato WebM. El formato Ogg Vorbis, por ejemplo, una muy buena alternativa por ser libre, en la actualidad no funcionaría en Internet Explorer ni en Safari.

Codificación de vídeo
El material que vamos a presentar se encontrará en un formato y una codificación concreta. Por suerte, podemos hacer una transcodificación del vídeo, esto
es, convertirlo al formato que mejor se ajuste a nuestras necesidades. Lo más probable es que el programa, que hayamos empleado para generar el vídeo,
sea capaz de realizar esa conversión. Si no es así, podremos encontrar con facilidad aplicaciones capaces de realizar este proceso.

De entre todas las posibilidades que encontramos, podemos emplear una aplicación como Handbrake para hacer la conversión de un vídeo y ajustar
algunos de sus parámetros, especialmente los de dimensiones, si el vídeo original es muy grande; esta aplicación se muestra en la figura:

Descarga Handbrake

El tamaño de los vídeos

Debemos tener muy presente que Internet es un medio en el que el tamaño de los archivos es fundamental. Hay que conseguir que los vídeos no ocupen
demasiado, para que se transfieran correctamente.

Insertar un vídeo
Una vez que tenemos el vídeo en un formato adecuado, podemos insertarlo en la página web mediante el elemento HTML

<video>. Su estructura es muy similar a la que empleábamos con las imágenes, aunque en este caso sí lleva etiqueta de cierre.

<video src="video/fireworks_reducido.webm"></video>

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 31/47
28/5/24, 23:36 HTML5

Dimensiones del vídeo

Como sucedía con las imágenes, en un vídeo podemos indicar su anchura y altura mediante los valores width y height. De hecho es recomendable hacerlo,
para que el navegador sepa de antemano el espacio que debe destinar al vídeo. Por tanto, este ejemplo es más adecuado que el anterior:

<video src="video/fireworks_reducido.webm" width="300" height="208"></video> Los valores que emplearemos serán los que utilizamos al crear el vídeo.

Más parámetros

Hay otros parámetros que resultan útiles para la reproducción del vídeo:

controls: si queremos que se muestren los controles que permiten pararlo, reproducirlo, etc. Basta con insertar ese término, sin más valores.
autoplay: al indicar este valor, el vídeo se reproducirá en cuanto esté listo.
preload: hace que el vídeo se empiece a cargar en cuanto se accede a la página. Por el contrario, indicando preload="none", no se cargará hasta que el
usuario haga clic en el vídeo para su reproducción. Esta segunda opción es muy útil, si el vídeo no es el recurso fundamental de la página y vamos a tener
personas que no estén interesadas en verlo, ya que nos ahorrará mucho ancho de banda.
loop: indicándolo conseguiremos que el vídeo se reproduzca cíclicamente. Si no indicamos nada, al terminar su reproducción se detendrá.
muted: el vídeo no tendrá sonido al comenzar.

Con todo esto podríamos definir lo que harían estos ejemplos:

<video src="video/fireworks_reducido.webm" width="300" height="208" autoplay controls></video> Se carga el vídeo y se reproduce inmediatamente,
mostrando los controles.

<video src="video/fireworks_reducido.webm" width="300" height="208" preload controls></video>

Se muestran los controles, el vídeo se precarga, pero no se reproduce hasta que el usuario pulsa el botón de reproducción.

<video src="video/fireworks_reducido.webm" width="300" height="208" preload="none" controls></video> Igual que el anterior, pero no se precarga
hasta que el usuario hace clic.

Insertar vídeo con un editor web

Para insertar un vídeo con BlueGriffon, seleccionaremos la opción Insertar>Elemento HTML 5>Video. Aparecerá el cuadro de diálogo de la figura, donde
podremos especificar el archivo que vamos a insertar y algunos valores adicionales:

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 32/47
28/5/24, 23:36 HTML5

Se pueden cambiar los valores habituales e incluso establecer el fotograma, que se utilizará como imagen fija, cuando el vídeo no se haya reproducido aún.

Según la versión, es probable que el vídeo no se muestre, aunque esté ahí. Para visualizarlo debemos reproducir la página en nuestro navegador.

Insertar un archivo de audio

El mismo procedimiento que empleamos para el vídeo se repetiría aquí. Por ejemplo, para insertar un archivo con un podcast en una página web,
escribiríamos lo siguiente:

<audio src="podcast.mp3" controls autoplay>

Si optamos por el modelo externo, buscaremos un servidor que contenga esos archivos de audio y permita su inserción. A

veces encontraremos el término incrustar o embeber y embed, en inglés. Ambos modelos se muestran en la figura:

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 33/47
28/5/24, 23:36 HTML5

6. Maquetación

Maquetación
El contenido de una página web puede ser diferenciado en zonas o bloques, que pueden estar ubicados en la página de muchas formas diferentes.

La etiqueta div
La etiqueta <div> se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos e incluso para realizar
operaciones sobre ese bloque específico.

El uso de la etiqueta div es sencillo. Observemos este ejemplo:

<div>

<h1>Índice</h1> Página principal<br /> Material multimedia<br /> Autores<br />

</div>

Hemos empleado la etiqueta para crear un bloque, que hará las veces de índice de contenidos. Visualmente la etiqueta no provoca ningún cambio, pero en
la estructura interna del documento hemos aplicado una división muy importante. La figura muestra el texto del ejemplo; no hay ninguna diferencia visible.

Probemos ahora a aplicar una modificación a la apariencia de ese bloque, añadiendo un estilo de borde a la etiqueta <div>;

quedaría así:

<div style="border: 2px solid rgb(204, 102, 204);">

<h1>Índice</h1> Página principal<br /> Material multimedia<br /> Autores<br />

</div>

Observemos de nuevo la figura; ahora sí que aparece un borde sólido de 2 píxeles alrededor de todo el espacio definido por

la etiqueta div.

Eso es todo lo que necesitamos saber: la etiqueta <div> configura espacios dentro de la página.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 34/47
28/5/24, 23:36 HTML5

La etiqueta span
Después de un </div> se comienza con una nueva línea. Esa es una de las diferencias principales con la otra etiqueta que empleamos para diferenciar
contenidos, la etiqueta <span>. Con ella conseguimos un efecto similar, pero en el interior de un párrafo. Recordemos que span se emplea con frecuencia
para aplicar estilos en el interior de un bloque de texto.

Diferenciando las etiquetas div y span

Adicionalmente, las etiquetas div y span se suelen acompañar de uno o dos parámetros destinados a identificar ese bloque

id: permite establecer un identificador único para el bloque. Así podremos referirnos al bloque de forma inequívoca.

class: es similar a id, pero con la ventaja de que se puede repetir; así que podemos tener varios <div> diferentes con la misma clase.

Usando id y class podemos diferenciar unos div de otros y así aplicarles estilos CSS diferentes o hacer que actúen de forma distinta.

Las etiquetas id y class se utilizan como se muestra en el ejemplo:

Como se puede apreciar, las etiquetas id y class se pueden mezclar. Se mantiene siempre esa norma: los id son únicos dentro de una página, mientras que
los class se suelen repetir para que varios elementos tomen un mismo estilo.

Maquetación de una página web

Con los elementos que ya conocemos podemos realizar operaciones de maquetación dentro de una página web.

La ventaja del uso de bloques definidos con <div>, además de aplicar formato es que podemos posicionarlos en el lugar que más nos convenga, gracias a
algunas de las propiedades de las hojas de estilo.

Este proceso se vuelve muy sencillo si nos apoyamos en las opciones del panel Propiedades de estilo del editor BlueGriffon. En concreto nos interesan las
opciones de Posición y distribución, recogidas en la figura. El panel en cuestión se despliega mediante la opción Paneles>Propiedades de estilo o
mediante el icono correspondiente en la barra de iconos.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 35/47
28/5/24, 23:36 HTML5

Ubicación de un bloque
Utilizando los valores de Flotación podemos ubicar el bloque a la izquierda, a la derecha e incluso centrarlo en determinados momentos.

Traducido a estilos, este cambio es tan sencillo como indicar lo siguiente:

<div syle="float: right;">

Posicionamiento absoluto
Probemos ahora a modificar la posición de varios bloques. En la figura se muestra una página con tres contenidos diferentes:

un título, un índice y un bloque de texto largo. Mientras no se apliquen estilos, los contenidos se mostrarán uno sobre otro.

La parte que nos interesa del código fuente ha quedado así:

<body>

<div checked="true" style="position: absolute; top: 21px; left: 8px; width: 719px; height: 54px;">

<h1>Centro integrado</h1>

</div>

<div style="position: absolute; top: 110px; left: 20px; height: 349px; width: 145px;">

<h1>Índice</h1> Página principal<br /> Material multimedia<br /> Autores<br />

</div>

<div checked="true" style="position: absolute; top: 106px; left: 213px; width: 445px; height: 645px;">

<h1>Introducción<br /> .....

A continuación, mediante BlueGriffon, iremos seleccionando cada uno de los bloques y seleccionando la opción Absoluta, en la opción de Posición.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 36/47
28/5/24, 23:36 HTML5

Antes de poder aplicar los cambios, debemos asegurarnos de que estamos afectando al elemento adecuado; por ello en el cuadro Aplicar estilos a del
panel, seleccionaremos este elemento, mediante los estilos internos.

Hay que recordar que para seleccionar un <div> concreto podemos utilizar el selector de etiquetas situado en la zona inferior del editor.

Al hacer esto, aparecerán unos controles alrededor del <div> que podremos modificar para ajustar su ancho y alto, además de su posición, como se
muestra en el video

Si observamos el código fuente veremos que se han incorporado algunos estilos con sus respectivos valores:

Líneas 12 y 18 del código fuente:

No es necesario establecer siempre valores fijos. En lugar de píxeles podemos emplear porcentajes. Así podríamos crear un cuadro de texto que se sitúa
siempre en el centro de la pantalla, independientemente de las dimensiones de la ventana del navegador.

Con esta configuración de div se consigue el efecto deseado.

<div style="text-align: center; position: absolute; top: 30%; left: 30%; right: 30%; bottom: 30%;">

Para realizarlo mediante BlueGriffon hemos seleccionado primero el valor Absoluta en la opción Posición y a continuación hemos indicado 30% en cada
cuadro de Desplazamientos.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 37/47
28/5/24, 23:36 HTML5

División en columnas
En el panel de estilos encontramos una opción denominada Columnas que está muy vinculada con el concepto de maquetación de un bloque de texto. Si
lo desplegamos, veremos las opciones de la figura.

Con ellas podremos tomar un texto sencillo y dividirlo en diferentes columnas de forma automática. Sólo hay que indicar un número en la primera casilla e
ir modificando el resto de selectores, para ajustar las distancias y bordes como mejor nos convenga. La figura muestra el resultado de aplicar esta
modificación.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 38/47
28/5/24, 23:36 HTML5

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 39/47
28/5/24, 23:36 HTML5

7. Organización de la información.

El lenguaje HTML se emplea para estructurar correctamente la información y darle un sentido lógico a nuestro contenido. Es evidente que nuestras
necesidades comunicativas no se limitan exclusivamente a líneas de texto y párrafos. En ocasiones necesitaremos generar secuencias de contenidos, ya sean
en una dimensión (listas) o en dos dimensiones (tablas).

Listas
HTML nos facilita tres etiquetas diferentes para diseñar listas: dos muy empleadas y una tercera menos habitual.

Listas no ordenadas
Este tipo de listas se abren con la etiqueta <ul> y se cierran con su correspondiente </ul>. El ul proviene de unsortered list

(lista desordenada, en español).

Para distinguir cada elemento de la lista, emplearemos la etiqueta <li>, con su correspondiente cierre. Así una lista típica quedaría así:

<h1>Material requerido</h1>

<ul>

<li>Lápiz</li>

<li>Papel</li>

<li>Pegamento</li>

<li>Tijeras</li>

</ul>

Al insertarlo en una página web, obtendremos el resultado de la figura:

Cada <li> puede contener todo lo que se nos antoje, desde párrafos completos hasta imágenes, vídeos o cualquier otro elemento.

Listas ordenadas
El segundo tipo es similar al anterior, pero cambiando el <ul> por un <ol>, es decir ordered list (lista ordenada). Así conseguiremos que los puntos se
numeren.

<h1>Forma de empleo</h1>

<ol>

<li>Dibujamos las figuras con el lápiz.</li>

<li>Usando las tijeras iremos recortando las figuras cuidadosamente.</li>

<li>Por último, pegaremos cada parte por las partes indicadas.</li>

</ol>

El resultado se muestra en la figura:

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 40/47
28/5/24, 23:36 HTML5

Listas de definiciones
El tercer tipo, menos habitual, se utiliza para diseñar listas de términos y descripciones asociadas a ellos. La etiqueta <dl> (definition list) abre y cierra la lista,
la etiqueta <dt> (definition term) se usa para especificar el término y <dd> (definition description) para describirlo. Todas ellas acompañadas de sus cierres.

<h1>Utilidad de cada elemento</h1>

<dl>

<dt>Lápiz</dt>

<dd>Se emplea para plasmar los diseños sobre el papel</dd>

<dt>Papel</dt>

<dd>Una vez dibujado será recortado y posteriormente pegado</dd>

<dt>Pegamento</dt>

<dd>Utilizaremos sus peculiares características para dar forma al objeto uniendo las partes de papel</dd>

</dl>

Al mostrarse en un navegador, las definiciones aparecen desplazadas respecto a los términos, como se recoge en la figura:

Creación de listas con un editor web

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 41/47
28/5/24, 23:36 HTML5

Modificar la apariencia con el panel Propiedades de estilo.

Tipo: es la opción de estilos denominada list-style-type y, dependiendo del valor asignado, se modificará la apariencia de la viñeta de la lista o el tipo de
numeración, si es una lista ordenada. Podemos aplicarlo a la lista completa o a algunos elementos concretos.

Posición: la opción list-style-position tiene dos valores, inside y outside, que harán que los elementos de la lista salgan hacia dentro o hacia fuera.

Imagen: el valor list-style-image se emplea para definir una imagen como viñeta.

Tablas
Cualquiera que haya empleado en alguna ocasión un procesador de textos entiende su sentido y la versatilidad que nos aporta al distribuir una serie de
datos.

Una tabla es una serie de celdas distribuidas en filas y columnas. Cada una de esas celdas se comporta casi como una página web en pequeño. En su interior
podemos insertar desde un simple número hasta las series más largas de información o elementos multimedia que se nos ocurran.

Como sucedía con las listas, HTML sólo cuenta con etiquetas capaces de definir la estructura completa de la tabla, pero no su apariencia; los colores,
anchuras de línea, fondos y otros aspectos se dejan para los estilos CSS.

Veamos ahora cómo se crea una tabla.

Etiquetas básicas de una tabla

Una tabla mínima se diseña con tres etiquetas y sus respectivos cierres:

<table> para definir el comienzo de la tabla. A la tabla le podemos añadir el parámetro border="1" para indicar si la tabla tendrá un borde.

<tr> para indicar el comienzo de una fila.

<td> para el comienzo de una celda.

Veamos un ejemplo de tabla

<table>

<tr>

<td>Lunes</td>

<td>Martes</td>

<td>Miércoles</td>

<td>Jueves</td>

<td>Viernes</td>

</tr>

<tr>

<td>Lengua</td>

<td> </td>

<td>Matemáticas</td>

<td>Música</td>

<td>m</td>

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 42/47
28/5/24, 23:36 HTML5
</tr>

</table>

Crear tablas a mano es laborioso, aunque es un buen ejercicio para entender cómo funcionan. En este ejemplo el resultado se muestra en la figura.

Creación de tablas con un editor web

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 43/47
28/5/24, 23:36 HTML5

8. Publicación

Publicación de una página web

El paso siguiente, una vez que nuestra web está terminada, es el de transferir los archivos a un servidor web para que pasen a estar disponibles para
cualquier persona que quiera utilizarlos.

El modelo que se sigue es sencillo; para que una página pueda ser visualizada por cualquier persona solemos recurrir a los servidores web. Un servidor
web es un ordenador (simplificando un poco) que tiene instalado una aplicación denominada también servidor de páginas web, un programa que está
permanentemente escuchando para ver si le llegan peticiones. Cuando un usuario desde su ordenador abre el navegador e intenta acceder a una página
alojada en ese servidor, la aplicación recibirá la petición, localizará la página y los recursos asociados y se los transferirá al usuario (esto se hace mediante
una serie de normas denominadas protocolo http, por eso se suele anteceder las direcciones web de http:// ), que a su vez verá la página en su
navegador.

Transferencia FTP
Hasta aquí está claro, pero, ¿cómo envío mis archivos html, mis imágenes y mis cosas al servidor de páginas web? Aunque algunos servidores ofrecen
métodos sencillos basados en el navegador, el método más extendido es transferir los archivos mediante un conjunto de normas identificadas como
protocolo de transferencia de archivos (que son las siglas de FTP).

Este matiz nos indica que para enviar las páginas web al servidor, normalmente emplearemos una aplicación de transferencia FTP. En nuestro caso
emplearemos para nuestras pruebas Filezilla, que es software libre y multiplataforma, por lo que la podremos utilizar sin coste alguno desde cualquier
sistema operativo.

Filezilla ( Descarga y uso) Es muy importante que mires el manual.

El procedimiento de transferencia de archivos se resume en tres pasos:

1. Conectar con el servidor web, llamado normalmente el servidor remoto.

2. Seleccionar los archivos que nos interesan en el panel local, el panel de la izquierda.

3. Transferirlos al servidor, arrastrándolos hasta el panel derecho.

Tras realizar esos pasos, nuestra web estará ya visible desde la dirección http:// correspondiente

Conectar con un servidor remoto

Para conectar con un servidor remoto, previamente tenemos que tener una cuenta en ese servidor. Una cuenta es un nombre de usuario y contraseña, que
nos darán acceso a una carpeta concreta del servidor.

En muchos casos nuestro proveedor de Internet nos facilita espacio web en sus servidores; en otros, lo hacen nuestras propias empresas de trabajo. Si no
sucede así, siempre podremos recurrir a los servidores web gratuitos. Hay multitud de servidores web que facilitan espacios gratuitos con ciertas
limitaciones o publicidad para las personas o empresas que quieren crear sus primeras páginas web. No pondremos ningún ejemplo, porque resulta tan
sencillo como buscar servidor web gratuito en Internet.

Si buscamos servidores gratuitos en Internet, también encontraremos muchos resultados empleando el término inglés, hosting o host, que son los términos
que se emplean para describir el alojamiento o el servidor web. Independientemente del tipo de servidor por el que optemos, al final debemos contar con
tres datos imprescindibles:

Dirección del servidor FTP: la URL con la que accederemos al servidor de FTP.
Nombre de usuario: el nombre de nuestra cuenta.
Contraseña: la clave para acceder a la cuenta.

Con esos tres datos seremos capaces de conectarnos a nuestro servidor de ftp en el 99% de los casos. En ocasiones puede que nos indiquen un par de
datos más:

Carpeta del servidor: ruta en la que debemos subir los archivos. Casi nunca se indica porque el propio servidor ya nos lleva a la carpeta apropiada.
Puerto FTP: en algunos servidores hay que indicar este número, que es punto en el que el servidor escucha las peticiones que le llegan para realizar
transferencias FTP. Normalmente no se indica porque es casi siempre el número 21.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 44/47
28/5/24, 23:36 HTML5

Al hacer clic en el botón Conexión rápida, Filezilla comenzará la conexión. Si los datos introducidos son correctos, en el panel de la derecha veremos ya las
carpetas del servidor, con los archivos que pueda haber. Si hay algún problema, veremos mensajes de color rojo en el panel superior indicando la respuesta
errónea por parte del servidor.

La figura muestra una conexión correcta:

Nota:

En algunos servidores, como el del ejemplo, al acceder podemos encontrar una carpeta denominada public_html o http. En esos casos debemos tener en
cuenta que las páginas web se deben guardar en su interior para que sean visibles, no directamente en la carpeta principal del FTP..

Transferencia de archivos
No debemos olvidar que nuestra página principal debe llamarse index.htm o index.html, ya que ésa será la que se cargue automáticamente por parte del
servidor, cuando alguien acceda a nuestro espacio.

Ver nuestro espacio web

La dirección correspondiente para ver nuestro espacio web nos la facilita también el servicio de almacenamiento que estemos empleando.

Enlaces relativos y absolutos

Si al comenzar a probar el sitio web, observamos que algún enlace no funciona o alguna imagen no se muestra, probablemente nos encontremos ante el
conocido problema de las referencias relativas o absolutas, que ya tratamos en el apartado de los enlaces. Este problema lo notaremos especialmente al ver
nuestra web en otro ordenador o al indicarle a otra persona que acceda a nuestra web. Esto es así porque, si hemos empleado referencias absolutas a
archivos de nuestro propio ordenador, nosotros sí veremos correctamente los enlaces, pero el resto de las personas no, ya que no tienen una copia local de
los archivos colocados exactamente igual que nosotros.

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 45/47
28/5/24, 23:36 HTML5
Si no se nos ha producido este problema, podemos felicitarnos porque prestamos la suficiente atención al crear cada enlace a otra página y al insertar
imágenes. Si por el contrario nos encontramos con esta incidencia, debemos editar los enlaces erróneos y asegurarnos de que los convertimos en relativos a
la página web en cuestión.

Una vez solventados los problemas, debemos llevar de nuevo los archivos al servidor remoto, sobrescribiendo los que allí se encuentren.

Caracteres especiales

Por cuestiones relacionadas con el tipo de codificación de los documentos y las diferencias que puedan existir con el servidor, se nos puede dar el caso de
que, al transferir un sitio web, observemos que las tildes no se muestran correctamente, las eñes y otros caracteres especiales.

Los motivos por los que esto sucede son complejos, pero no así la solución, que pasa por indicar en BlueGriffon que reemplace los caracteres especiales por
códigos estandarizados en HTML. Esto se consigue seleccionando la opcción Herramientas>Preferencias y posteriormente la pestaña Fuentes.

En la parte denominada Mostrar los siguientes caracteres como entidades seleccionaremos la opción Todos los caracteres especiales de HTML 4, como se
muestra en la figura.

Así se reemplazarán los caracteres especiales por códigos, que serán interpretados correctamente por el navegador.

Nota

La dirección HTTP y la FPT:

Puedes haber observado que la dirección a la que subimos los archivos por FTP no es exactamente la misma que la que ponemos en la barra de direcciones
del navegador, para ver nuestra página. En concreto, para realizar la transferencia de archivos por FTP usamos:

servidor: nombre_de_servidor_FTP

usuario: nombre_de_usuario
contraseña: clave

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 46/47
28/5/24, 23:36 HTML5

9. JAVA

Ejemplos

h2894684.stratoserver.net/mod/book/tool/print/index.php?id=3103 47/47