Diseño Web III Parcial - HTML

DISEÑO
WEB
3 PARCIAL
II QUIMESTRE.
Estructura básica de una página Web - html, head y body
Para crear una página web se necesita un documento HTML utilizando tres elementos o tags
principales que cualquier sitio Web usa: html, head y body.
Un documento web (o página web) es, como hemos apuntado en la introducción, un conjunto de tags
HTML que se escriben en un editor de texto plano (sin formato) y se ejecutan en un navegador web.
Estructura básica de la primera página Web en HTML
Cómo crear una página Web

Para crear una página web se necesita un documento HTML utilizando tres elementos o tags
principales que cualquier sitio Web usa: html, head y body.
Para crear un verdadero documento HTML comenzará con tres elementos contenedores:
 <html>
 <head>
 <body>
Estos tres se combinan para describir la estructura básica de la página:
 <html>: Este elemento envuelve todo el contenido de la página (excepto la DTD)

 <head>: Este elemento designa la parte de encabezado del documento. Puede incluir
información opcional sobre la página Web, como puede ser el título (el navegador lo muestra
en la barra de título), palabras clave de búsqueda opcionales y una hoja de estilo opcional.
 <body>: Este elemento alberga el contenido de su página Web, es decir, aquello que
queremos que aparezca en el área de navegación del navegador..
Sólo hay una manera correcta de combinar estos tres elementos. He aquí su colocación exacta, con el
doctype al comienzo de la página:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
2
Toda página Web utiliza esta estructura básica. Los puntos suspensivos (...) muestran dónde insertaría
la información adicional.
Una vez colocado el esqueleto XHTML, debe añadir dos conectores más a la mezcla.
Toda página Web requiere un elemento <title> en la sección del encabezado. A continuación, deberá
crear un contenedor para el texto en la sección del cuerpo de texto (<body>).
Un elemento contenedor de texto multiuso es <p>, que representa un párrafo. Veamos con más detalle
los elementos que hay que agregar:
 <title>: Establece el título de la página Web, el cual tiene varias funciones. Primero, los
navegadores lo muestran en la parte superior de la ventana. Segundo, cuando un visitante crea
un marcador para la página, el navegador emplea el título para etiquetarlo en el menú
Marcadores (o favoritos). tercero, cuando la página aparece en una búsqueda Web, el motor
de búsqueda suele enseñar este título como primera línea en los resultados, seguido de un
fragmento del contenido de la página.
 <p>: Indica un párrafo. Los navegadores no los sangran pero añaden un pequeño espacio
entre varios consecutivos para mantenerlos separados.
He aquí la página con estos dos nuevos ingredientes:
<!DOCTYPE html>
<html>
<head>
<title>
Bienvenido a mi sitio Web
</title>
</head>
<body>
<p></p>
</body>
</html>
Si abre este documento en un navegador Web, verá que la página está vacía, pero ahora aparece el
título.
Cuando un navegador muestra una página Web, el título se presenta en la parte superior de la ventana,
con el texto al final. Si el suyo utiliza la navegación por pestañas, el título también aparece en ellas.
Tal y como está ahora, este documento HTML es una buena plantilla para futuras páginas. La
estructura básica está en su lugar; simplemente necesita cambiar el título y añadir algo de texto.
Lo primero que tenemos que saber es que en toda página web existen dos partes claramente
diferenciadas: la cabecera, o head, y el cuerpo, o body.
3
Vamos hacer es crear una carpeta, dentro de "Mis documentos", para almacenar los ficheros de prueba
que vayamos a usar.
A esta carpeta la llamaremos pruebas-html en el resto de los ejercicios. Con la carpeta abierta, haga
doble clic sobre el ícono que representa al bloc de notas.
Se le abrirá un documento en blanco.
Escriba el siguiente texto:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
</body>
</html>
Cuando lo tenga escrito, guárdelo en la carpeta con el nombre plantilla.html.
Es vital que la extensión sea .html, ya que sólo por la extensión el sistema operativo reconoce este
archivo como un documento web, y no como un simple y archivo de texto.
El nombre del archivo deberá escribirse como está, en minúsculas y sin espacios ni caracteres
especiales.
Los únicos signos de puntuación admitidos son el punto (sólo uno), que lo usaremos para separar el
nombre de la extensión y el guión bajo.
El nombre podrá contener letras y números, pero deberá empezar por una letra. Así mismo, nos
abstendremos de meter en el nombre de un archivo letras acentuadas, eñes, cedillas, o cualquier otro
carácter de algún alfabeto local.
Únicamente se admiten los caracteres del alfabeto internacional (ingles).
Observe los siguientes ejemplos:
 página1.htm es incorrecto, pues tiene una letra acentuada.

 Pagina 1.htm es incorrecto, pues tiene un espacio en blanco y una mayúscula
 cañas.htm es incorrecto, pues tiene una eñe.
 pagina/1.htm es incorrecto, pues tiene un carácter no permitido (la barra)
 pagina1-htm es incorrecto, porque la extensión no está separada del nombre por un punto y
porque emplea un carácter no permitido. (el guión normal).
 pagina.1.htm es incorrecto, porque hay más de un punto. Sólo debe usarse uno, para separar
el nombre de la extensión.
 pagina1.htm es correcto
 pagina_1.html es correcto
 pagina-1.html es correcto
Puede que todas estas precauciones le parezcan excesivas ahora. La mayoría de ellas son realmente
innecesarias en Windows, pero no olvide que está trabajando en la Red.
4
Los servidores web son mucho más sensibles a determinados aspectos del nombre de los ficheros que
su máquina local.
Otra norma importante es que los archivos llevan una extensión, pero las carpetas en las que las
guardamos no. Así pues, en el nombre de una carpeta nunca incluiremos puntos.
Una vez que haya guardado su código en su carpeta con el nombre adecuado, cierre el bloc de notas.
En su carpeta, además del bloc de notas, verá el ícono que representa al archivo que acaba de grabar.
Observe que el ícono recuerda al de Explorer o Google Chrome (suponiendo que alguno de ellos sea
su navegador por defecto).
Esto es así porque al haber guardado el fichero con la extensión .htm el sistema operativo reconoce
este fichero como documento web (también llamado documento html).
Si graba incorrectamente la extensión, el ícono será diferente y no podrá usar su archivo como
documento web.
Para ejecutar la página que acaba de crear, haga doble clic sobre el ícono. Automáticamente, se abrirá
el navegador y se cargará la página. La ruta completa de acceso y el nombre del fichero aparecerán en
la barra de dirección.
Ahora veamos en detalle cuál es el código de esta página que hemos creado y qué es lo que hace.
En primer lugar, encontramos el tag <html>. Este tag se emplea siempre para iniciar el código html.
Es la forma de decirle al navegador que en este punto empieza el código. Por esta razón se pone esta
línea siempre como la primera del código.
No incluiremos ningún tag antes de este, con excepción del DOCTYPE. Por el contrario, al final del
código tenemos el tag </html> , que le indica al navegador que el código finaliza en ese punto.
No deberemos incluir ningún tag ni nada más después de esta línea. Observe que el tag de finalización
es igual al de inicio, pero incluyendo la barra inclinada al principio.
Dentro del código html encontraremos claramente diferenciados los dos bloques que mencionamos
antes: el head (cabecera) y el body (cuerpo de la página).
Veamos el código de la cabecera:
<!DOCTYPE html>
<head>
</head>
Al igual que el código general, la cabecera tiene un principio indicado por <head> y un final indicado
por </head>.
Todo lo que queramos incluir en la cabecera irá colocado entre estas dos líneas.
5
Como decíamos antes, en la cabecera incluiremos algunos datos generales de configuración de la
página. En esta plantilla sólo hemos incluido el título de la página.
El título de la página se incluye entre los tags <title> y </title>, que indican, respectivamente, el
comienzo y final de dicho título.
El título es un literal (una cadena de texto) que aparecerá en la barra de título del navegador en tiempo
de ejecución (cuando se ejecute la página), tal como muestra el detalle de la figura siguiente:
Quiero recalcar que este título es solamente eso: un texto libre para que aparezca en la página y no
tiene nada que ver con el nombre que le dimos al fichero.
Una vez completado el head, pasamos a la segunda sección de toda la página web: el body o cuerpo.
El body incluye, tal como lo mencionaba anteriormente, todo lo que queramos visualizar en el área de
navegación.
Se inicia con el tag <body> y se finaliza con el tag </body>. Como vemos en el archivo que hemos
creado, de momento no hemos incluido nada.
Por esta razón, al ejecutar la página, se ve el área de navegación vacía. Dentro del body iremos
metiendo código e iremos visualizando los resultados.
Lo primero que vamos hacer es incluir texto en la página para que se muestre en el área de
navegación.
Para ello, cierre el navegador y, dentro de la carpeta en la que está trabajando, arrastre el ícono de
plantilla.html sobre el bloc de notas. De esta forma, se abrirá el bloc de notas y cargará el código
fuente que había tecleado anteriormente.
En la zona del código reservada para body de la página entre las líneas <body> y </body> teclee lo
siguiente:
Esto es una línea de texto.
Por lo tanto, su código quedará como sigue:
<!DOCTYPE html>
<html>
<head>
<title>
Título de la página
</title>
6
</head>
<body>
Esto es una línea de texto
</body>
</html>
A continuación haga clic en el menú ARCHIVO y, dentro de éste, elija la opción GUARDAR COMO
… asegúrese de guardarlo en su carpeta.
Como nombre de fichero ponga texto-simple.html. Una vez guardado, cierre el bloc de notas y
ejecute el fichero haciendo doble clic sobre su ícono.
El resultado en la pantalla será como el que se muestra:
Como ve para mostrar un texto en el área de navegación, basta con incluir dicho texto dentro del
cuerpo de la página.
En el próximo artículo vamos a aprender muchas cosas acerca del texto: su presentación, su color, etc.
Código HTML de color para fondo y texto en página Web
Cómo poner un color de fondo en nuestra página y cómo modificar el texto, formatearlo, cambiar el
tamaño, la tipografía, entre otras cosas.
Vamos a aprender cómo poner un color de fondo en nuestra página y cómo modificar el texto,
formatearlo, cambiar el tamaño, la tipografía, etc.
Además, aprenderemos algunos recursos para colocarlos en la parte de la página que nos interese.
7
Con lo que aprendamos en este artículo ya seremos capaces de hacer una página sencillita. Más
adelante, ya veremos cómo darle más alegría.
Configurando el fondo
Son varias las cosas que podemos configurar de fondo. En este artículo aprenderemos algunas de
ellas.
Por ejemplo, ¿Se ha fijado en la barra de desplazamiento que aparece a la derecha del área de
navegación? Bueno, pues resulta muy útil… si su página es lo suficientemente grande como para no
caber completa en la pantalla. De esta forma, puede desplazarse arriba y abajo.
Pero si su página cabe en el área de navegación sin necesidad de desplazarse, la barra no es necesaria.
Y, sin embargo, aparece allí. Está inhabilitada, pero está. Y podría ser su deseo que no apareciera.
Incluso puede mejorar el diseño final de la página. Para ello, necesitamos usar un atributo. Los
atributos son parámetros que se añaden a los tags para configurar su funcionamiento.
La técnica más moderna y adecuada sería combinar nuestro documento web (HTML) junto con una
hoja de estilo (CSS) para lograr quitar la barra de scroll. La ventaja de esta térnica es que se aplica a
todos los navegadores, garantizando la compatibilidad. Nuestro documento Web por nombre sin-
barra.html quedará de la siguiente manera:
<!DOCTYPE html>
<html>
<head>
<link href="css/estilo.css" type="text/css" media="all">
<head>
<body>
Esto es una página sin barra de scroll
</body>
</html>
Como ve, la barra ha desaparecido. De todas formas, debe asegurarse de no usar este efecto si su
página necesita desplazamiento, ya que, si quita la barra, el usuario no tendrá modo de ver toda la
página. La alternativa es grabar el atributo scroll con el valor “auto”. Así aparecerá la barra sólo si es
necesario.
Quizá una de las posibilidades más llamativas a la hora de montar una página sea el uso de colores
para el fondo de la misma. En los ejemplos del artículo anterior hemos creado una página cuyo color
de fondo es el blanco. Este es el color por defecto del área de navegación. Veamos cómo cambiar eso.
Para ello necesitamos añadirle al tag <body> otro atributo. En concreto, el que usamos para cambiar
el color de fondo de la página es bgcolor, y le asignamos un valor que indique el color que deseamos.
La palabra bgcolor es acrónimo de background color (color de fondo). Por ejemplo: si queremos que
nuestra página tenga como color de fondo el amarillo, el tag <body> quedará de la siguiente forma:
<body bgcolor="yellow">
En este artículo vamos a aprender muchas cosas sobre colores, y el color del fondo de una página es,
sin duda, lo primero que capta el usuario. Veamos cómo modificarlo. Abra con el bloc de notas el
código texto_simple.htm del artículo anterior y modifique el tag <body> para que el código le quede
de la siguiente forma:
8
<DOCTYPE! html>
<html>
<head>
<title>Título de la página </title>
</head>
Esto es una línea de texto.
</body>
</html>
Este código lo guarda con el nombre fondo_amarillo.htm. Cierre el bloc de notas y ejecute el código
que acaba de crear. El resultado lo ve en la siguiente figura:
Como ve, toda la página tiene el fondo amarillo. Esto es así porque el atributo bgcolor, que es el que
se ha encargado de establecer este color, está asociado al tag body que es, como ya sabe, el encargado
de definir el área de navegación de la página.
Quiero que se fije también en que el tag que abre el body incorpora ahora un atributo, pero el tag que
cierra el body no ha sido modificado. Esto es así siempre en HTML. Aunque la apertura de un tag
utilice atributos, el cierre no los lleva incorporados. Nunca incluya atributos en el cierre de un tag.
Colores HTML para páginas Web - Código hexadecimal en RGB
Todos los colores que pueda ver en su monitor están formados a partir de unir determinadas
9
Éste es un buen momento para ver cómo se definen los colores en HTML.
En nuestro ejemplo anterior hemos establecido un color de fondo amarillo (yellow).
Podemos establecer los colores de fondo con su nombre en inglés, por ejemplo: red, pink, skyblue o
lightgreen. Esto es válido en la mayoría de los casos.
De hecho, existe una variedad suficiente de nombre de colores como para satisfacer todas nuestras
necesidades.
Pero existe una manera alternativa de establecer el color. Para ello necesitamos saber cómo se crean
los colores en el monitor.
Para definir un color cualquiera en el monitor se hace a partir de una combinación de tres colores:
rojo, verde y azul.
Todos los colores que pueda ver en su monitor están formados a partir de juntar determinadas
proporciones de estos tres colores.
Por esta razón los llamamos colores primarios (o también colores básicos).
Y si está pensando que en el colegio nos decía el “profe” que los colores primarios eran el magenta, el
cyan y el amarillo, le diré que sí, pero no. Aclarémoslo.
El magenta, el cyan y el amarillo son colores primarios de la tinta. A partir de esos tres se forman los
demás colores en tinta (para imprimir).
Por ejemplo, el verde está formado por azul y amarillo. Si mezcla los tres colores primarios tinta,
obtendrá el negro. Por esta razón, a la mezcla de estos tres colores-tinta se la conoce como síntesis
substractiva.
Sin embargo, el monitor de su ordenador emite luz. Y los colores de la luz, o colores luz, se basan en
otros tres colores primarios que son, como hemos dicho, el rojo, el verde y el azul. La mezcla de estos
tres colores en la mayor cantidad posible da como resultado el blanco.
Por esta razón se dice que los colores-luz se mezclan por síntesis aditiva. El esquema de esto se ve en
la siguiente figura:
10
Como hemos dicho, nosotros vamos a usar los colores luz, ya que, en definitiva, luz es lo que emite el
monitor.Cualquier color que necesitemos crear se forma mezclando distintas proporciones de rojo,
verde y azul.
Le podemos indicar a nuestro código HTML un color cualquiera en el que cada uno de los colores
primarios reciba un valor entre 0 y 255. Esto hace un total de 256 posibles proporciones para cada uno
de tres colores primarios.
Dicho así, a lo mejor no impresiona demasiado, hasta que se pone uno a pensar que el número
resultante de posibles combinaciones es de 256*256*256=16,777,216 colores posibles.
Así pues, el amarillo estaría formado por el máximo posible de rojo, el máximo posible de verde y
nada de azul, es decir, sería la combinación 255.255.0.
Los valores de los colores primarios los expresaremos siempre en ese orden: en primer lugar la
proporción de rojo, después la de verde y por último la de azul. Por eso, a este formato de colores
se le conoce como RGB (Red, Green, Blue).
En muchos libros y programas verá que se refiere a este formato con el nombre traducido RVA (de
Rojo, Verde, Azul).
Sin embargo, no es tan fácil. Los creadores de HTML decidieron que había llegado el momento de
complicarnos un poco la vida y han hecho el lenguaje de tal modo que los valores de los tres colores
primarios hay que expresarlos en hexadecimal y con dos dígitos.
Como sabe, la numeración hexadecimal permite emplear las letras de la A a la F, asignándole los
valores numéricos de 10 a 15 correspondientemente.
Así pues, el 0 decimal sería 00 hexadecimal, el 15 decimal sería 0F en hexadecimal, el 16 decimal

sería 10 en hexadecimal, el 255 decimal sería FF en hexadecimal, y así sucesivamente.
Esto, en realidad, viene dado por una serie de normas y fundamentos de numeración que se
establecieron en los primeros tiempos de la informática (si, cuando los ordenadores iban a válvulas) y
que siguen vigentes en nuestros días por haber demostrado su eficiencia en muchos terrenos.
Por lo tanto , el color amarillo, que lo definíamos como 255 de rojo, 255 de verde y 0 de azul,
expresado en hexadecimal sería FFFF00.
Los primeros dos dígitos expresan la proporción del rojo (FF=255), los dos siguientes la del verde y
los dos últimos la de azul. Además HTML nos pide que añadamos, delante de la combinación de
colores, el signo # (conocido popularmente como almohadilla o cucarachita).
Por lo tanto la siguiente sentencia:
Sería equivalente a:
<body bgcolor="#FFFF00">
Este mismo sistema que hemos aprendido para fijar el color de fondo nos servirá para establecer los
colores de texto y de otros elementos de la página web.
Existen lo que se llaman colores seguros para la web. Son una paleta de 216 posibles combinaciones.
11
Son colores seguros para web aquellos que se visualizan exactamente igual en una plataforma PC
que en una Macintosh, ya sea con un navegador Internet Explorer o con Firefox.
Una vez más, debemos tener en cuenta que estamos trabajando para la red. Nuestra página puede ser
vista por usuarios con distintas plataformas y deben poder verla igual.
Los colores seguros para la web son aquellos que están formados por cualquier combinación de los
valores 00, 33, 66, 99, CC o FF. Así pues, los siguientes colores son ejemplo de colores seguros para
la web:
 #FF66CC
 #FFFFFF
 #00CC99
 #FF3366
Y, en general cualquiera que cumpla con la condición de que los tres valores (el de rojo, el de verde y
el de azul) respondan a uno de los valores especificados.
También debemos de tener en cuenta que el color de texto debe contrastar con el de fondo, de tal
forma que la lectura de la página sea cómoda para el usuario. No olvide que, ya de por sí, leer sobre el
monitor es mucho más incómodo que leer sobre papel.
Si además el texto apenas destaca sobre el fondo, estaremos invitando al usuario a que se vaya a otra
página. En general, optaremos por tonos pastel o tonos apagados para el fondo.
Los colores chillones se emplean casi exclusivamente en páginas de juegos, de música moderna o
erótica. La combinación de texto negro sobre fondo blanco suele dar buen resultado en muchas
ocasiones.
El valor que se le pasa a un atributo puede ir indistintamente entre comillas o sin ellas. Por ejemplo,
las dos sentencias que aparecen a continuación son equivalentes:
 <body bgcolor="#FFFF00">
 <body bgcolor=#FFFF00>
Sin embargo, si ponemos comillas al principio del valor, deberemos ponerlas al final, y viceversa. Por
ejemplo, las siguientes sentencias no funcionarían adecuadamente.
 <body bgcolor="#FFFF00>
 <body bgcolor=#FFFF00">
Los valores hexadecimales de los colores los representaremos en letras mayúsculas.
En realidad, funcionaría igual si los pusiéramos en minúsculas. Implementamos mayúsculas para

estos valores por una cuestión de legibilidad del código.
Colores para la Web - Emociones y efectos en las personas
Los colores en un sitio web influyen en la capacidad de atracción, conversión o rechazo, denotan un
efecto subliminal provocando impulsos al usuario.
12
La teoría de los colores se ha ido desarrollando con numerosos estudios cuyos inicios datan del siglo
XV y se asocian a nombres como Batista Alberti, Da Vinci, Newton, y muchos más. Estos estudios
son hoy la base de la “Ciencia de la Visión” y se utilizan en Marketing como forma de comprender el
mensaje que un color – o combinación de varios – puede transmitir de manera aislada. Pero,
lamentablemente, son pocos los que hacen uso del poder de los colores en la creación de piezas de
comunicación, incluyendo los sitios web.
Recientemente leía un post de Seth Godin en el cual comenta el problema de diseño de la señalética
del aeropuerto de Minneapolis que, si bien es bastante nueva y cool, encontrar la dirección para dar
con la parada de taxis resulta muy complicado. Para descubrir el porqué, se me ocurrió entonces
proponer este breve ejercicio.
Consigna:
Piensa que estás en ese aeropuerto por primera vez, llegado de un largo viaje, buscando las señales
que te indiquen hacia dónde ir….
¿Estás allí? Bien, ahora ¿de qué color esperarías encontrarte las siguientes señales?
A. Salida ………….. B. Taxis ……………. C. Solo personal autorizado
Muy probablemente, a menos que se seas daltónico de toda la vida, provengas de una tribu amazónica
muy poco civilizada o hayas aterrizado recientemente desde un planeta remoto, habrás asignado el
color verde a “Salida”, el amarillo a “Taxis” y el rojo a “Solo personal autorizado”. ¿Cierto?
Seth escribía enojado por qué demoró el doble en encontrar la señal de taxis que resultaba estar en
blanco y negro, muy coherente con el diseño del resto de la señalética y colores del aeropuerto, pero
muy poco práctico al saltarse unos estándares muy poderosos como se habrá podido comprobar en el
ejercicio anterior. De eso trata, entre otras cosas, el poder de los colores…
¿Acaso los colores en un sitio web pueden impactar en la capacidad de atracción y conversión del
mismo?
Por supuesto que sí; absolutamente.
En la siguiente tabla podrás ver las emociones o impulsos que denota el efecto subliminal de los
colores y algunos casos en los que puede convenir utilizarlos con ejemplos de sitios web conocidos
que hacen buen uso de ellos.
Color Asociado a: ¡Cuándo utilizarlos?
Azul Seguridad Cuando necesitas que confíen en ti y/o tu oferta es intangible.
Verde Calma y Confianza Cuando buscas que la gente se decida. Ideal para botones.
Cuando tu audiencia es de hombres adultos y el tópico es deporte o
Rojo Energía y Vigor
juego.
13
Amarillo Optimismo y Alegría Cuando buscas que tus visitas se diviertan o resaltas una super oferta.
Romanticismo y
Rosa Cuando tu audiencia es de mujeres, especialmente si son jóvenes.
Fantasía
Naranja Acción Cuando reclamas participación o acción. Ideal también para botones.
Cuando comercializas productos o servicios de lujo y buscas
Negro Poder y Riqueza
transmitir la idea de valor o seriedad.
Colores para fondo y texto en página HTML
Para establecer el color del texto en toda la página recurrimos al atributo text del tag body, que recibe
un valor para determinar el color del texto.
A la hora de configurar el texto, existen muchas

posibilidades. Podemos cambiar la tipografía, el color, el
tamaño, etc.
Aquí vamos a ver todas las posibilidades que afectan al

texto de nuestra página. Lo primero que vamos a ver, a
modo de introducción, es cómo establecer el color del texto
en toda la página. Para ello, recurrimos a otro atributo del tag <body>. Se trata del atributo text, que
recibe un valor para determinar el color del texto en toda la página. El color se indica como en el caso
de bgcolor, bien mediante su nombre en inglés o bien mediante su especificación hexadecimal.
Veamos un ejemplo, llamado colores_1.htm.
<!DOCTYPE html>
<html>
<head>
<title> Colores </title>
</head>
<body bgcolor="#66CC99" text="#0000FF">
Texto azul sobre fondo verde
</body>
</html>
Esto daría como resultado lo que ve en la figura

anterior. Todo el texto que ponga en la página
aparecerá, por defecto, en color azul en tiempo de
ejecución. Observe en el listado que hemos usado
colores seguros para la web, para asegurarnos de que
se vea correctamente la página en cualquier plataforma
y navegador.
Además del color general del texto, son muchas las

posibilidades que éste nos ofrece. Veámoslas.
14
Texto en un sitio Web - Diferencias tags strong, em, b, i, u
Los elementos lógicos han dominado el marcado HTML desde XHTML 1.0, eliminando muchos
elementos en formato físicos como font, u, s, entre otros más.
Antes o después, todo creador Web descubre que diseñar para la red es muy distinto a desarrollar algo
que va a ser impreso.
Antes de liberar a su creador gráfico de páginas Web interior, deberá superar unos cuantos obstáculos
conceptuales.
Consideremos la diferencia entre una página hecha con HTML y una generada en un procesador de
texto.
Estos programas muestran el aspecto exacto del documento antes de imprimirlo, sabe qué tamaño
tendrán los encabezados, qué fuente usan , si el texto envuelve de una línea a otra, etc. Si ve algo que
no le gusta, lo cambia mediante los menús y comandos de formato.
El procesador de texto, en otras palabras, le ofrece un control absoluto sobre cada detalle de su
página.
La Web es un lugar más libre. Al crear un documento HTML no tiene ni idea de cómo se verá esa
página en el ordenador de otro.
Esa persona puede tener su navegador configurado para no mostrar imágenes, o enseñar caracteres de
tamaño grande en lugar de hacerlo con dimensiones estándar, o puede haber reducido la ventana y
haberla colocado en una esquina de su escritorio.
Además, los visitantes que acceden a su sitio mediante teléfonos obtendrán otra visualización (y
completamente distinta). En resumen, no puede controlar los detalles de presentación en la Web de la
manera en que puede hacerlo en un formato impreso.
Sin embargo, es posible ofrecer toda la información que un navegador Web necesita para presentar
sus páginas adecuadamente.
Esto se hace estructurando las páginas de modo que los navegadores traten los elementos de la página
de forma coherente, independientemente de la configuración del navegador de sus visitantes.
Estructura lógica frente a formato físico
Antes de comenzar a crear páginas Web con marcado HTML, deberá comprender otro concepto: la
diferencia entre estructurar un documento (dividir su contenido en componentes distintos como
encabezados, párrafos, listas, etc.) y darle formato (hacer que esos elementos sean atractivos
aplicando cursivas, cambiando el tamaño de texto, añadiendo color, etc.)
Los administradores Web novatos que no entienden esta diferencia a menudo terminan dando formato
cuando deberían estar estructurando, lo que resulta en páginas desordenadas y un HTML complicado
de mantener.
15
En los inicios de la Web, este lenguaje usaba dos tipos de elementos para enfatizar la diferencia entre
la estructura del documento y su formato:
 Elementos lógicos: En ocasiones llamados semánticos, definen los componentes individuales

que forman la página Web. Identifican lo que es un encabezado, un párrafo, una lista, etc. En
otras palabras nos habla sobre la estructura de la página. Los elementos lógicos, sin embargo,
no definen el formato de estos componentes (qué apariencia tendrán en la pantalla).
 Elementos físicos: En ocasiones llamados tipográficos, tratan sobre el formato. Algunos
ejemplos incluyen elementos que aplican al texto cursiva, negrita, subrayado y distintas
fuentes. No nos dicen nada sobre la manera en la que la página está estructurada; en su lugar,
indican a los navegadores cómo dar formato al contenido.
Los elementos lógicos han dominado el marcado HTML desde que se inventó XHTML 1.0 reforzó su
dominio y eliminó muchos de sus elementos físicos (como <font> para cambiar el tipo de letra y <u>
para subrayar texto.)
HTML5 va un paso más allá; cambia la definición de dos elementos físicos que los programadores
Web más tozudos no querían abandonar: <b> y <i>. Ahora, <b> ya no significa texto en negrita, sino
texto desplazado estáticamente, e <i> ya no hace mención al texto en cursiva, sino texto en voz
alternativa, como palabras extranjeras o términos técnicos.
Evidentemente, los navegadores Web no se ven afectados
Siempre muestran texto <b> en negrita y texto <i> en cursiva, a menos que use una hoja de estilo que
indique lo contrario.
Pero el cambio de definición refuerza una modificación fundamental en la forma de pensar: los
elementos HTML deben escribir la función lógica de las partes textuales, no su presentación
tipográfica.
Seguramente se pregunte por qué los gurús de HTML tenían tanto interés en eliminar el formato de
los documentos HTML. Veamos algunos motivos:
 El formato incrustado es problemático: Tras ver el marcado de una página HTML, no

querrá dar marcha atrás. Para facilitar los cambios tendrá que abrirse paso entre las etiquetas
de formato que controlan márgenes, colores, fuentes y alineación.
 Los documentos lógicos son adaptables: Al eliminar el formato de una página, aumenta su
flexibilidad. Puede usar hojas de estilo para alterar el aspecto de su página Web y
modificarlas cuando desee. Si tiene que mostrar la página Web de otra forma en otro
dispositivo diferentes (o navegador), también es posible hacerlo.
 Los documentos lógicos transmiten significado: Los elementos lógicos permiten que los
programas externos analicen el HTML de una página. Por ejemplo, alguien podría crear un
programa de búsqueda automática que analizara páginas Web y extrajera solo los
encabezados de nivel superior para elaborar un minimalista resumen de página. Un programa
podría buscar en Amazon.com para encontrar sólo reseñas de libros. alguien podría realizar
una lista de correo basura leyendo elementos <address>. Un programa comparable que se
encontrara solo con elementos físicos no produciría resultados tan interesantes.
 Los documentos lógicos son accesibles: El software de lectura de pantalla y otras
herramientas automáticas funcionan mucho mejor con las páginas estructuradas de manera
lógica. Por ejemplo, un lector de pantalla puede guiar a una persona ciega por la página
anunciando títulos o enlaces, sin necesidad de leerlo todo en voz alta.
NOTA:
La visión de una Web en la que los elementos indican qué contiene una página (precios, tallas,
direcciones de correo, etc.) en lugar de qué aspecto tiene, se llama Web semántica. Según los
16
visionarios que construyeron Internet, ésta podría conducir a una edad de oro del acceso a la
información y a las búsquedas super inteligentes.
Párrafos HTML - Ejemplos de formato para saltos de línea
Dividir el texto en párrafos nos da la posibilidad de organizarlo en la página. Considere escribir una
idea por párrafo con sólo utilizar 3 o 4 líneas.
Empiece por teclear el siguiente código llamado organizar_texto_1.htm:
<html>
<head>
<title> Organización
</title>
</head>
<body>
Esto debería de ser una línea de texto.
Y esto debería de ser otra.
</body>
</html>
Cuando lo ejecute verá en pantalla todo el texto en una sola línea, en lugar de las dos líneas que ha
tecleado, tal como se muestra en la siguiente figura:
Como ve, el resultado desconcierta bastante,

sobre todo si uno está acostumbrado a trabajar
con, por ejemplo, procesadores de texto, donde
las líneas de texto se quedan (casi siempre) allí
donde uno las coloca.
Esto es así porque los navegadores no reconocen

un salto de línea, a no ser que se lo indiquemos
específicamente. Para ello, empleamos otro tag
nuevo. Se trata de <br>. Este tag no recibe
ningún tipo de atributo y no tiene cierre, es decir,
no existe </br>. Esto último es así porque, a
diferencia de otros tags, este no establece un
efecto sobre la página (como hace, por ejemplo,
body, que tiene que marcar el principio y el final de los contenidos), sino que este tag ejecuta una
acción puntual (un salto de línea). Veamos un ejemplo, modificación del código anterior. Tecléelo y
guárdelo como salto_de_linea.htm.
<html>
<head>
<title>
17
Organización
</title>
</head>
<body>
Esto debería de ser una línea de texto <br>
</body>
</html>
El resultado se ve en la figura:
Si necesita las líneas más separadas, puede introducir más saltos de línea (más tags <br>) en el
código, como en el siguiente ejemplo:
<html>
<head>
<title>
Organización
</title>
</head>
<body>
Esto debería de ser una línea de texto, <br><br><br><br>
</body>
</html>
Grábelo con el nombre varios_saltos.htm y ejecútelo. El resultado será el que ve en la siguiente

figura:
Como puede apreciar, el navegador respeta

los saltos de línea sin introducir ninguna otra
variación en el texto, como si el tag <br>
fuese equivalente al famoso “retorno de
carro” de las antiguas máquinas de escribir
mecánicas.
Llegados a este punto, vamos a aclarar algo.

Como hemos visto, da lo mismo que
pongamos el texto en una línea o en varias. Si
no insertamos los saltos de línea todo el texto
saldrá en la misma línea (salvo que no quepa
de ancha en la pantalla, por supuesto). Esto
nos da la pauta de que, en realidad da lo
mismo que el código esté escrito en una línea
18
o en muchas. Por ejemplo, el último código que hemos probado funcionaría exactamente igual si lo
hubiéramos escrito así:
<html><head><title>Organización</title></head><body>Esto debería de ser una línea de texto.

<br><br><br><br> Y esto debería de ser otra.</body></html>
Pruebe a teclear el código anterior en una sola línea del bloc de notas y guárdelo en el disco con el
nombre todo_junto.htm. Cuando lo ejecute, verá el mismo resultado que en el caso del código
varios_saltos.htm. Sin embargo, este sistema presenta una grave deficiencia: cuando queremos
arreglar en el código algo que no funciona o queremos mejorarlo o ampliarlo no hay quien pueda
seguir o modificar el código desorganizado. Piense que, de momento, estamos trabajando con códigos
muy simples y con pocas líneas, pero es normal que una página web profesional tenga más de
trescientas líneas de código HTML. El poner las líneas una debajo de la otra y seguir unos criterios de
indentación obedece, principalmente, a razones de legibilidad.
Además cuando usemos tablas (tranquilo, ya llegaremos) verá que se producen ligeros cambios de
apariencia en la página si colocamos el código en una sola línea o en varias. En relación con este
aspecto, hay algo que debe saber y mejor que se lo diga ahora, que acabamos de empezar. HTML es
un lenguaje muy flexible en cuanto a su sintaxis. Como ve, es lo mismo la disposición del código.
Además, hay ciertos tags que pueden omitirse sin problemas. Por ejemplo, un código funcionará
exactamente igual aunque suprima los tags <html> y </html>, y algunos otros. Sin embargo, no debe
acostumbrarse a eso. El consorcio W3C del Instituto CERN de Suiza, creadores del HTML, nos da
unas especificaciones para que las sigamos. Si no lo hacemos, nuestro código fuente puede funcionar
bien en apariencia… hasta que u día empiece a fallar sin que sepamos por qué.
En otro orden de cosas, después de HTML quizá quiera ir más allá y conocer Javascript, Java, Visual
Basic u otros lenguajes de programación (espero que quiera hacerlo). Estos son mucho más rígidos en
su sintaxis que HTML y cualquier error hace que no funcionen o lo hagan incorrectamente. Es mejor
no adoptar malas costumbres desde el principio. Si ya ha programado en algún otro lenguaje
anteriormente le será más fácil comprender la importancia de esto. En este temario le voy a exponer el
lenguaje siguiendo, en todo momento, las especificaciones del consorcio. Hágame caso. – No es
consejo gratuito, es fruto de la experiencia.
Bien. Tras este pequeño sermoncito. Hemos visto cómo introducir saltos de línea en el texto. Pero,
¿Cómo introducir un cambio de párrafo? Es más ¿Por qué querría dividir alguien el texto en párrafos?
Responderemos primero a la segunda pregunta. Por una parte, dividir el texto en párrafos no da otra
posibilidad de organizarlo en la página. Por otra parte, existe en HTML (Y sobre todo en DHTML)
diversos tags que se aplican sobre un párrafo completo. Así podremos determinar qué texto se ve
afectado por esos tags. Ya iremos viendo cuáles son; de momento, haga un acto de fe y créase lo que
le digo. Veamos cómo crear párrafos de texto. Teclee el siguiente código y guárdelo en su disco con
el nombre usar_parrafos_1.htm:
<html>
<head>
<title>
Uso de párrafos en HTML
</title>
</head>
<body>
<p>
Con cien cañones por banda, <br>
Viento en popa a toda vela, <br>
No corta el mar, si no vuela <br>
Un velero bergantín.
</p>
<p>
Bajel pirata al que llaman, <br>
19
Por su bravura, el temido; <br>
En todo el mar conocido, <br>
Del uno al otro confín.
</p>
<p>
La luna en el mar riela, <br>
En la lona gime el vieto <br>
Y alza, en blanco movimiento, <br>
Olas de plata y azul.
</p>
<p>
Y va el capitán pirata, <br>
Cantando alegre en la popa. <br>
Asia a un lado, al otro, Europa <br>
Y allá, a su frente Estambul.
</p>
</body>
</html>
El resultado de la ejecución de este código lo tiene a la

vista en la figura anterior. Como puede apreciar, los
párrafos se han separado como si hubiera empleado dos
saltos de líneas convencionales entre ellos. Al menos, ésa
es la apariencia externa del resultado. Sin embargo, han
ocurrido más cosas: el texto está, por así decirlo,
“fragmentado” para aplicarle determinados efectos.
Realmente aprenderemos todo el partido que le podemos
sacar a los párrafos cuando estudiemos Hojas de Estilo en
Cascada (CSS) en el temario de DHTML. Por ahora,
basta saber qué son los párrafos y cómo usarlos. Para
iniciar un párrafo de texto, como ha visto, empleamos el
tag <p> y terminamos el párrafo con el tag </p>. En
HTML, este tag no recibe atributos, aunque si los recibe cuando usamos las CSS en DHTML (¿Estoy
depertando su curiosidad? Bien. Es lo que pretendo).
Ahora que ya sabemos algo más acerca del texto, vamos a tratar de alinearlo en la página. En primer
lugar, fíjese en que el texto se coloca, automáticamente, en el lado izquierdo de la página, salvo un
pequeño margen. Lo primero que vamos a ver es cómo modificar o eliminar ese margen. Para ello,
necesitamos añadirle más atributos al tag <body>.
Podemos controlar el margen que queda por la izquierda de la página y el margen que queda en la
parte superior de la misma. Los márgenes se especifican en número de pixeles. Por ejemplo, vamos a
teclear el código necesario para eliminar completamente los márgenes izquierdo y superior de la
página. Teclee el siguiente código y guárdelo como sin_margen_1.htm.
<html>
<head>
<title>
Eliminar márgenes
</title>
</head>
<body leftmargin=0 topmargin=0>
Esto está sin márgenes
</body>
</html>
20
Esto dará como resultado lo que ve en la figura anterior, en la que se aprecia que el texto se ha
colocado sin márgenes en la página. La pequeñísima separación que existe entre la parte superior del
texto y el borde superior del área de navegación no es un margen, sino el espacio vertical de los
caracteres. Los márgenes quedan introducidos a 0.
Sin embargo, estos atributos sólo funcionan cuando la página se ejecuta con Microsoft Internet
Explorer. Si la página se ejecuta con Netscape Navigator, el margen izquierdo se llama anchura de
margen y se controla con el atributo marginwidth. El margen superior se llama altura de margen y se
controla con el atributo marginheight. La línea que abre el body en el código anterior, por lo tanto,
debería de quedar así:
<body marginwidth=0 marginheigth=0>
Como estamos trabajando para la Red (es decir, para millones de usuarios), deberíamos preparar la
página para que se viera igual en todos los navegadores principales.
Para ello, sólo debemos añadir los cuatro atributos, tal como vemos en el siguiente código, al que
llamaremos sin_margenes2.htm.
<html>
<head>
<title>
Eliminar márgenes
</title>
</head>
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
Esto esá sin márgenes
</body>
</html>
De esta forma, podemos asegurarnos cuales serán los márgenes en ambos navegadores. La cuestión es
ésa: que los dos navegadores presenta algunas diferencias de comportamiento y que deberemos
asegurarnos, en la medida de lo posible, de que la página funcione en ambos.
Además, quiero que reflexione sobre una cosa. Un tag, ya sea body o cualquier otro, puede recibir
todos los atributos que considere necesarios para el buen funcionamiento de la página. La única
limitación a este respecto es que respete la sintaxis del lenguaje (por otra parte no demasiado exigente,
como vimos antes) para que todo vaya como la seda. Tampoco existe un orden determinado para la
colocación de los atributos. Por ejemplo, las dos líneas siguientes tendrían el mismo efecto:
<body text=blue leftmargin=0 topmargin=0 marginheight=0 marginwidgth=0>
<body marginwidth=0 leftmargin=0 leftmargin=0 text=blue topmargin=0 marginheight=0>
Además, podemos darle a nuestros contenidos (texto u otros contenidos que ya iremos viendo) una
rudimentaria alineación usando el tag <div>. Este tag cumple distintos objetivos, totalmente
independientes uno del otro, según los atributos que le pasemos. El atributo aling se encarga de crear
alineaciones del texto en la página. Para recibir el valor “center”, si deseamos alinear el texto en el
centro de la página, o el valor “right”, si deseamos alinearlo a la derecha.
Teclee el siguiente código de ejemplo y grábelo como alinear_1.htm.
<html>
<head>
<title>
21
Ejemplo de alineaciones
</title>
</head>
<body>
Este texto aparece a la izquierda.
<div aling=center>
Este texto aparece centrado.
<div aling=right>
Este texto aparece a la derecha.
</div>
</body>
</html>
Como puede apreciar en la siguiente figura, el texto comprendido entre los tags <div> y </div> es el
que se ve afectado por la alineación.
Observe algunas cosas. En primer lugar,

cuando se produce un cambio de
alineación se genera, automáticamente
un salto de línea. Fíjese que en nuestro
ejemplo los tres textos están en
diferentes líneas, sin que hayamos usado
ningún tag <br> ¿Significa esto que no
podemos situar tres textos así dispuestos
sin saltar de línea? No. En realidad, se
soluciona todo mediante el uso de tablas.
Pero de eso ya hablaremos. De
momento, aceptemos el salto de línea
como inevitable. Por otra parte fíjese que
el texto de la derecha también conserva un cierto margen. Existe otro atributo para Microsoft Internet
Explorer que controla ese margen: se llama rightmargin y se usa igual que lo hemos visto
anteriormente, asociado al tag body. No existe un equivalente específico para Netscape Navigator.
Para alinear los contenidos al centro de la página puede usar también el tag <center>, como ve en el
siguiente ejemplo. Teclee el código y guárdelo como alinear_2.htm.
<html>
<head>
<title>
Ejemplo de alineaciones
</title>
</head>
<body>
Este texto aparece a la izquierda
<center>
Este texto aparece centrado
</center>
<div align=right>
Este texto aparece a la derecha
</div>
</body>
</html>
22
Fíjese que el resultado es el mismo que en el ejemplo anterior. Esta vez el texto que queremos
centrado aparece entre los tags <center> y </center>. Y como esto funciona igual que el uso de <div
align=center> elegiremos la última solución, en virtud de la ley del mínimo esfuerzo.
Comentarios HTML - Código de ejemplo ¿Para qué sirven?
Los comentarios HTML son visibles en el código fuente de la página para explicar código, pero no se
representan en la parte visual del navegador Web.
Este elemento se usa para agregar un comentario a un documento HTML. Un comentario HTML
comienza con <!–– y el comentario se cierra con ––>.
Los comentarios HTML son visibles para cualquiera que vea el código fuente de la página, pero no se
representan cuando el navegador procesa el documento HTML.
Propósitos y utilidad de los comentarios en HTML
Como en cualquier otro lenguaje de programación, los comentarios tienen dos objetivos principales:
 Documentar el código fuente

 Desactivar una o más líneas de código
Ejemplo de comentarios en código HTML
Podrás ver este texto.


Incluso puedes comentar cosas 


<div class="ejemplo-class">
Otra cosa que puedes hacer es poner comentarios después de cerrar las etiquetas,
para ayudarte a encontrar dónde termina un elemento en particular.
(Esto puede ser útil si tiene muchos elementos anidados).

</div>

Resultado en el navegador
Podrás ver este texto.

Incluso puedes comentar cosas
Otra cosa que puedes hacer es poner comentarios después de cerrar las etiquetas, para ayudarte a
encontrar dónde termina un elemento en particular.
(Esto puede ser útil si tiene muchos elementos anidados).
23
Efectos simples HTML - Tags b, i, u, s, h1 - h6 y blockquote
Para modificar la apariencia del texto en HTML se utilizan etiquetas para crear negritas, cursivas,
subrayados encabezados, tachados y citas textuales.
Ya sabemos más cosas acerca del texto en HTML. Ahora vamos a ver cómo podemos darle a ese
texto algunos efectos simples para modificar su apariencia.
Observe el siguiente código, que grabaremos con el nombre de efectos_simples_1.htm.
<html>
<head>
<title>
Ejemplo de efectos simples
</title>
</head>
<body>
<b>
Esto es letra negrita.
</b>
<br>
<i>
Esto es letra cursiva
</i>
<br>
<u>
Esto aparece subrayado
</u>
<br>
<s>
Esto aparece tachado
</s>
<br>
Este texto no tiene efectos.
> </body>
</html>
El resultado puede verlo a continuación:
Ahora el texto que aparece entre los tags <b> y </b>

queda en negrita. L b indica bold (negrita). El texto que
aparece entre los tags <i> y </i> aparece en cursiva. La
i se refiere a italic (cursiva). El texto que aparece entre
24
los tags <u> y </u> aparece subrayado. La u significa underlined (subrayado). El texto que aparece
entre los tags <s> y </s> aparece tachado. La s significa strike (tachar).
Con esto ya tenemos unos efectos aplicados, que nos permiten hacer bastantes cosas. Dese cuenta de
lo extremadamente fácil que resulta, en HTML, darle a un texto la apariencia adecuada en cada caso.
Aunque poco a poco, iremos viendo otros efectos más complejos, la filosofía de este lenguaje es la
facilidad de uso.
Eso no quiere decir que sea “coser y cantar”, por supuesto. Cuando lleguemos a conocer el DHTML,
veremos que todo lo que ahora modificamos de forma sencilla, se puede modificar también de otro
modo más sofisticado, aunque desde luego, más eficiente.
Elegir una técnica u otra dependerá, en todo caso, de cada diseño puntual. Sólo con la práctica,
podremos saber qué tipo de trabajos debe hacer en cada caso.
También podemos cambiar varios efectos en un sólo texto. Veamos un ejemplo. Teclee el siguiente
código y almacénelo como efectos_simples_2.htm.
<html>
<head>
<title>
Ejemplo de efectos simples
</title>
</head>
<body>
<b><i><u>
Esto es letra negrita, cursiva y subrayada.
</u></i></b>
<br>
</body>
</html>
El resultado de este código es el que se muestra en la siguiente figura:
Existe otra manera de obtener la letra negrita.

En lugar de encerrar el texto entre los tags <b>
y </b>, puede encerrarlos entre los tags
<strong> y </strong>. El resultado es el
mismo, así que emplearemos el primero, por
aquello de la ley del mínimo esfuerzo.
También hay una manera alternativa de
obtener letra cursiva. En lugar de encerrar el
texto entre los tags <i> y </i>, podemos
encerrarlos entre los tags <cite> y </cite>. El
resultado es idéntico. Como en el caso
anterior, elegiremos el primer tag, por la
misma razón.
Como se aprecia en el último ejemplo he

usado los tres tags anidados (uno dentro de
otro) para “acumular” sus efectos sobre el texto. Fíjese en una cosa importantísima: Cuando anido
distintos tag, debo cerrar primero el último en abrir, y viceversa. Es decir, los tags se cierran siempre
en orden inverso al que se abre.
25
Lo contrario es un error que puede, en determinados casos, dar lugar a fallos en la página. Por
ejemplo, observe la siguiente variante del código anterior.
<html>
<head>
<title>
Ejemplo de efecto simple
</title>
</head>
<body>
<b><i><u>
Esto es letra negrita, cursiva y subrayada.
</b></i></u>
<br>
<body>
</html>
Este código sería incorrecto, ya que los tres tags que se encuentran anidados se cierran en el mismo
orden en que se han abierto. Es decir, no están realmente anidados, sino más bien, solapados. En este
caso concreto, el código funciona igual, debido a que los tags que hemos empleado son muy
sencillitos.
Sin embargo, esto es una excepción. Lo normal si se emplean tags solapados, en lugar de anidados, es
que se produzcan fallos imprevisibles.
Podemos necesitar usar un texto como un encabezamiento o titular de otro texto, como si fuera un
artículo de un periódico. Veamos cómo hacerlo. Teclee el siguiente código y guárdelo como
encabezamiento_1.htm.
<html>
<head>
<title>
Encabezamientos
</title>
</head>
<body>
<h1>
Esto es el titular
</h1>
Esto es el texto normal. <br>
Como ve, continua debajo del titular
</body>
</html>
El resultado es el que ve en la figura anterior,

como puede observar, el texto del titular lo
hemos incluido entre los tags <h1> y </h1>. Este
tag ha tenido dos efectos sobre el texto. Por una
parte, ha creado una letra de gran tamaño. Por
otra, ha incluido en la página un salto de párrafo,
sin necesidad de usar, en este caso, los tags <p>
y </p>. Existen otros tags similares que cambian
el tamaño de la letra incluyendo, además, salto
26
de párrafo, aunque en la mayoría de los casos, es preferible controlar nosotros mismos los saltos de
párrafo, cambios de tamaño y otros efectos. No se preocupe. Con el tiempo y la experiencia,
aprenderá a crear los textos como usted desee, con toda flexibilidad.
Se emplean distintos tags para titulares, sub-titulares, notas de pie, etc., simplemente cambiando el
número 1 que aparece en este tag por otro número (hasta 6), tal como muestra el siguiente ejemplo.
Teclee el código y guárdelo como encabezamiento_2.htm.
<html>
<head>
<title>
Encabezamientos
</title>
</head>
<body>
<h1>Esto es texto con h1. </h1>
<h2>Esto es texto con h2.</h2>
Esto es el texto normal.<br>
Como ve, continúa debajo del titular.
</body>
</html>
El resultado de este código lo puede ver a continuación:
Los tags de encabezamiento (de <h1> a <h6>) se

emplean para determinadas secciones concretas de
un documento web. Por ejemplo, si estamos
preparando un documento cuyo contenido es un
texto didáctico, es bastante habitual que usemos el
tag <h1> para la cabecera general <h5> o, incluso, el
<h6> para, por ejemplo, las notas de pie de página.
Los tag <h2>, <h3> y <h4> podemos usarlos para
separar distintas secciones o sub-secciones de
nuestro documento.
Una práctica bastante adecuada, en esta fase de su

aprendizaje, puede ser cambiar estos
encabezamientos con efectos tipo negrita, cursiva y
subrayado, para lograr unas cabeceras o notas al pie
más elaboradas.
Observe que, cuanto más alto es el número

empleado, más pequeño resulta el titular. En el caso del texto comprendido entre <h6 >y </h6>, este
es prácticamente ilegible. Y, por si se lo está preguntando, existe una forma de cambiar el tamaño de
la letra sin que se produzca los saltos de párrafo: se trata del tag <font>, que veremos en el siguiente
apartado.
Ahora supongamos que estamos creando una página web de temas matemáticos. Es posible que
tengamos que emplear superíndices para representar determinadas fórmulas o expresiones aritméticas.
Veamos cómo hacerlo. Teclee el siguiente código y grábelo como índices_1.htm.
27
<html>
<head>
<title>
Superíndices y Subíndices
</title>
</head>
<body>
Esto es un texto normal
<sup>
Esto es un superíndice
</sup>

<br>
Esto es texto normal
<sub>
Esto es un subíndice
</sub>
</body>
</html>
El resultado del código anterior puede verlo en la siguiente figura:
Como ve, el texto comprendido entre los tags <sup> y </sup> aparece como superíndice. El texto
comprendido entre los tags <sub> y </sub> aparecen como subíndices. Estos tags no general saltos de
línea ni de párrafo, y no reciben ningún atributo.
Veamos otro efecto que le podemos dar al texto. Como ya sabe, cuando introducimos texto en el
código no se mantienen los saltos de línea a menos que lo indiquemos específicamente mediante <br>
u otro sistema. Además el navegador tampoco respeta las tabulaciones, ni varios espacios, ni líneas
vacías… en fin, prácticamente nada. Sin embargo, existe un pequeño truco para engañar al navegador
y hacerle que respete el formato original del texto. Teclee el siguiente código de ejemplo y grábelo
como formateo_1.htm.
<html>
<head>
<title>
Uso de preformato
</title>
28
</head>
<body>
Esto es una línea de texto con varios
espacios en blanco.
Esto es otra línea
con tabulaciones.
Esto está tres líneas más abajo
<body>
</html>
El resultado de este código lo ve en la siguiente

figura:
Como ve, el navegador no le hace caso. Pone el

texto, aproximadamente, donde le da la gana.
Esto es el comportamiento normal de cualquier
navegador, en cualquier versión que empleemos
y sobre cualquier plataforma. Ahora vamos a
engañarle. Vamos a encerrar el texto entre los tags <pre> y </pre>
El código queda como ve en el siguiente listado, llamado formateo_2.htm.
<html>
<head>
<title>
Uso de preformateo
</title>
</head>
<body>
<pre>
Esto es una línea de texto con varios espacios en blanco.
Esto es otra línea con tabulaciones
Esto está tres líneas más abajo.
</pre>
</body>
</html>
Observe el resultado que aparece en la siguiente figura:
Fíjese que ahora se presenta, exactamente el formato que le dimos al texto en el código. Sin embargo,
aparece un efecto inesperado: ha cambiado el tipo de letra. Por defecto, el navegador usa la tipografía
conocida como Times Roman.
29
Cuando empleamos el tag <pre> la tipografía por defecto es la que se conoce como Courier New.
Todo eso podemos cambiarlo mediante el uso del tag <font> que veremos en el siguiente apartado.
Si lo que queremos es, simplemente sangrar el texto sin más, podemos encerrar el texto que deseamos
que aparezca sangrado entre los tags <blockquote> y </blockquote>. Teclee el siguiente listado y
guárdelo como sangrado_1.htm.
<html>
<head>
<title>
Uso de sangrados
</title>
</head>
<body>
Texto normal. No aparece sangrado.
<blockquote>
Texto sangrado.<br>
Más texto sangrado.
</blockquote>
Este texto es normal
</body>
</html>
El resultado es que aparece a continuación:
Como ve, el uso del tag <blockquote> introduce un sangrado en el texto. Además también introduce
un salto de párrafo cuando se abre <blockquote> y otro cuando se cierra </blockquote>
Efectos avanzados en el texto HTML - Combinación de formatos
Cómo configurar partes independientes del hipertexto HTML para una página Web en colores,
tipografía y tamaño del texto.
30
Ya sabemos cómo aplicar algunos efectos sencillitos al texto, la verdad es que, con la combinación
adecuada de esos efectos “sencillitos” ya se pueden obtener bastantes cosas. Sin embargo, vamos
aprender a sacarle más jugo al texto.
Aquí vamos aprender a configurar partes independientes del texto, en color tipografía y tamaño.
En la introducción de esta sección vimos cómo darle un color al texto de toda la página mediante el
atributo text del tag <body>. Prescindamos ahora de ese atributo y vamos a reconfigurar el texto de
toda la página mediante el tag <basefont>. Teclee el siguiente código y grábelo como fuentes_1.htm.
<html>
<head>
<title>
Uso de fuentes
</title>
</head>
<body>
<basefont color=”#0000FF”>
El texto de esta página está en color azul. <br>
Así lo hemos determinado mediante <br>
El uso de basefont.
</basefont>
</body>
</html>
El resultado de la ejecución del código se ve en la siguiente figura:
Observe que el tag empleado se coloca directamente

anidado dentro del cuerpo de la página. Es decir,
inmediatamente después de abrir el <body> se abre
<basefont> e inmediatamente antes de cerrar con
</body> se cierra </basefont>. De este modo, las
características de texto que son determinadas por este
tag afectan a toda la página. En este ejemplo le hemos
asociado el atributo color para establecer el color de
todo el texto de la página. El color por defecto del
texto es negro, pero con este tag le hemos cambiado a
azul. Una advertencia sobre este tag: Sólo funciona
correctamente con explorer. En seguida veremos una
alternativa válida para todos los navegadores.
Existen otras propiedades del texto que también

podemos alterar. Por ejemplo, como ya sabemos, la
tipografía usada por defecto es Times New Roman. Si
al tag <basefont> le pasamos el atributo face, podremos cambiar ésta tipografía. Además podemos
cambiar el tamaño por defecto de la letra.
Estos cambios de tamaño no tiene nada que ver con los encabezamientos de h1 a h6 que vimos en el
apartado anterior. El tamaño de la letra con <basefont> puede ir de 1 a 7, siendo que el 1 es la letra
más pequeña y el 7 la más grande. El tamaño por defecto de la letra es el equivalente al valor 3. Esto
lo hacemos con el atributo size. Teclee el siguiente código y guárdelo como fuentes_2.htm.
<html>
<head>
31
<title>
Uso de fuentes
</title>
</head>
<body>
<basefont color=”0000FF” face=”arial” size=2>
Así lo hemos determinado mediante <br>
El uso de basefont.
</basefont>
</body>
</html>
El resultado es el que se ve en la figura:
Fíjese que el cambio que se ha producido en el texto. El color

sigue siendo azul. Sin embargo, la tipografía es diferente: es
la clásica letra “de palo” que corresponde con la letra
conocida como Arial. Además, el tamaño ha variado: ahora es
más pequeño de lo normal, ya que hemos usado el atributo
size con el valor 2. Puede probar a poner el valor 7 en lugar
del 2 y verá una letra enorme. Como hemos dicho antes, los
valores permitidos están entre 1 y 7. Si pone un valor mayor
que 7, la página mostrará le letra del tamaño equivalente a 7.
Si pone un valor menor que 1, la página mostrará el texto del
tamaño equivalente a 1.
Ahora bien, ¿Qué ocurre si lo que quiere es modificar las

propiedades de una parte del texto, en lugar de todo el texto de la página? Para ello, empleamos en tag
<font>, que recibe los mismos atributos que <basefont>, pero es mucho más selectivo que su ámbito
de acción. Y este tag es la alternativa a <basefont>, y funciona con cualquier navegador. Teclee el
siguiente listado y guárdelo como fuentes_3.htm.
<html>
<head>
<title>
Uso de fuentes
</title>
</head>
<body>
<basefont color=”0000FF” face=”arial” size=2>
En esta página vamos a ver <br>
Un uso cambiado de Font y basefont. <br>
Así que hemos determinado mediante <br>
El uso de basefont. <br>
<Font color=”FF0000 face=”comic sans ms” size=4>
Este texto aparece <br>
Afectado por el tag font. <br>
</font>
Aquí volvemos al texto <br>
Normal de la página. <br>
</basefont>
</body>
</html>
32
El resultado de la ejecución de este código se ve en la siguiente figura:
En ella puede apreciar cómo poco a poco, vamos adquiriendo mayor libertad para darle a cada parte
de nuestro documento el aspecto que nos apetezca. De esta forma, podemos lograr unos acabados
bastante atractivos para nuestro texto.
Observe que las propiedades del tamaño equivalen a 4, color rojo y tipografía Comic Sans MS sólo
afecta al texto comprendido entre <font> y </font>.
En el tag <font>, el atributo size se puede fijar de forma absoluta o relativa. Se establece el valor de
size de forma absoluta cuando se le pasa, como en el ejemplo anterior, directamente entre 1 y 7. Se
establece el valor de forma relativa cuando le pasamos un número precedido del signo + o del signo -.
En ese caso, el valor es relativo al tamaño por defecto del texto de la página. Vamos a aclarar esto.
Supongamos el ejemplo que acabamos de ver, fuentes_3.htm. En el tag <basefont> le pasamos el
atributo size con el valor 2. Por lo tanto, el tamaño por defecto del texto de la página es 2. Ahora, en
el tag font vamos a sustituir el atributo size=4 por size=+2. El resultado es el mismo, ya que toma el
tamaño por defecto 2 y le suma 2, obteniendo el tamaño de 4. Si le pasamos el tag font el atributo
size=+7, el resultado sería 9, pero como el valor máximo permitido es 7, en 7 se queda.
Y algo más sobre las tipografías. Hemos visto que podemos establecer la tipografía del texto citando
el nombre de la fuente. Sin embargo, es preciso que el archivo que contiene esa tipografía esté,
físicamente, presente en el disco duro del ordenador. Las tipografías se almacenan en archivos con la
extensión .ttf o bien con la extensión .fon. No olvide que está trabajando para la red. Si su página la
visita un usuario que no tiene en su ordenador las tipografías que usted ha empleado, el navegador
buscará, por su cuenta, la tipografía por defecto (Times New Roman) y la usará. Por esta razón, si
emplea fuentes muy exóticas, es posible que su página quede de lujo… en su ordenador, pero que
nadie más pueda verla tal como usted la diseñó. Vamos, que a la hora de diseñar, citase a fuentes lo
más estándar posible, para estar razonablemente seguro de que todos los usuarios podrán ver bien su
página. Y, aunque use tipografía estándar, es posible que alguna de ellas no exista en el ordenador del
usuario. Para prever esto, lo que hacemos es que, al usar el atributo face del tag <font> o <basefont>
ponemos una lista de varias tipografías, separadas por comas, como en la siguiente línea de código.
<font face=”arial, verdana, trebuchet”>
33
De esta forma lo que hacemos es proporcionarle alternativas al navegador, de tal forma que, una vez
descargada la página en el ordenador del usuario, se buscará la primera de las fuentes citadas. Si no la
encuentra, se buscará la segunda, y si no existe, se buscará la tercera. Sólo en el caso de que no exista
ninguna de las tres, se recurrirá a la fuente por defecto. Lo que haremos será, por tanto, incluir una
lista de varias fuentes (normalmente tres o cuatro) que sean lo más estándar posible (y además
parecidas entre sí) para que el ordenador que no tenga una tenga otra y el resultado final sea aceptable
en todos los ordenadores.
Tipografía - Fuentes de letras para página Web
La tipografía puede alterar el significado que asociamos a un diseño. Debemos saber que el texto
puede decir una cosa; las letras, otra muy diferente.
En una composición gráfica o página web cualquiera, los contenidos textuales son los principales
responsables de la transmisión del mensaje al espectador final.
Cuando diseñamos debemos tener claro que la tipografía es parte del diseño, que transmite cualidades
propias dependiendo de sus características. Los caracteres matizan las palabras y le aportan o
refuerzan el sentido.
La mala selección de esas formas puede interferir negativamente en la comunicación.
Junto con el color, la tipografía puede alterar por completo el significado que asociamos a un diseño.
Es importante saber que el texto puede decir una cosa; las letras, otra muy diferente.
Aquí se encuentran 10 tipografías para un diseño limpio, en los cuales los elementos gráficos están en
un segundo plano y lo importante es el contenido. La tipografía juega un papel importante en este tipo
de diseño.
Museo Sans
Oregon LDO
Sansation
34
Engel Light
Comfortaa
Walkway
Mank Sans
Opticon One
Acentos HTML acute - Cómo poner tilde a las vocales y la eñe
Para incluir letras propias del alfabeto en castellano es necesario usar códigos HTML que nos
permitan visualizar correctamente el texto en la página.
Existen determinados caracteres que no se pueden incluir directamente en el texto de un código

HTML para su visualización en la página, y otros que, aún pudiendo incluirse en el código, no
siempre se visualizan correctamente.
Por ejemplo, supongamos el siguiente listado, llamado secuencias_1.htm.
<html>
<head>
<title>
Secuencias especiales
</title>
35
</head>
<body>
Teléfono
</body>
</html>
Si ejecuta está página en su navegador, verá, en el área de navegación, la palabra Teléfono, tal como
cabría esperar. Sin embargo, es posible que su página la visite, por ejemplo, un usuario de la
República Popular China. Éste tendría su navegador configurado para el alfabeto chino. Nosotros
vamos hacer que nuestro navegador se comporte como si fuera chino, a fin de ver cómo vería este
usuario su página.
Para ello ejecutamos la página y, en la ventana del navegador nos vamos a la barra de menús.
Pulsamos sobre el botón “ver” En este menú elegimos la opción “Codificación”. A su vez se abre otro
submenú. Elegimos la opción “Más” que abre otro submenú. Dentro de este último elegiremos la
opción “Chino simplificado (HZ)” En este momento nuestro navegador está preparado para el juego
de caracteres chino. El resultado de la ejecución de la página lo vemos en la siguiente figura.
Como ve, se ha cargado la é acentuada (y, de paso la f) y la ha sustituido por un guarismo chino.
Puede hacer pruebas con distintas codificaciones y ver que la é acentuada se sustituye por diferentes
caracteres. Esto es así porque la é acentuada es un carácter de un alfabeto local: el español (y creo que
también el francés) – En efecto señor autor.
Todos los navegadores, en cualquier codificación, pueden mostrar sin problemas los caracteres
universales (los del alfabeto inglés), pero no los caracteres locales de otros idiomas. Así que, ¿Cómo
hacemos para que nuestro amigo chino, al que llamaremos Chin-Fu, pueda ver correctamente nuestra
página y disfrutar de tan magna obra de arte? Pues muy sencillo. En la palabra Teléfono sustituiremos
la é acentuada por la secuencia é para que el listado quede como vemos a continuación:
<html>
<head>
<title>
</title>
</head>
<body>
Tel éfono
</body>
</html>
Grábelo como secuencias_2.htm y ejecútelo. Ahora verá la palabra correcta escrita en cualquier
codificación que le ponga al navegador. Ya podemos extasiar a nuestro buen amigo Chino-Fu con
nuestra sabiduría (y también a Piotr Kolinsky, a Stavros Padapoulos y cualquier otro amiguete de
cualquier parte del mundo). Bueno. Después de hacer esta prueba, no olvide volver a poner la
codificación “Europeo occidental Windows” en su navegador. La lista completa de secuencias para
representar caracteres especiales la tienen en el apéndice “D” en él aparecen las secuencias y los
caracteres que generan. Estas secuencias se conocen como entidades con nombre.
36
Acentos HTML - Secuencias especiales y Entidades por nombre
Demostración cómo poner acentos, eñe y caracteres especiales

Para incluir letras propias del alfabeto en castellano es necesario usar códigos HTML que nos
permitan visualizar correctamente el texto en la página.
Si su página tiene ciertas aspiraciones de profesionalidad y de internacionalidad deberá de usar estas

entidades con nombre en lugar de caracteres locales. Sé que es un engorro teclear estas secuencias en
el código. En el amplio, variopinto y, a veces desconcertante mercado informático existen
aplicaciones que generan estas secuencias y directamente a partir de un texto, aunque la idea es usar
aplicaciones profesionales para crear sus páginas, como Dreamweaver de Macromedia. A esta
aplicación le daremos en su momento un libro completo ya que su alta calidad y magníficas
prestaciones aconsejan su uso.
Veamos otro caso en el que vamos a necesitar entidades con nombre, independientemente de la
codificación de nuestro navegador. Supongamos que estamos escribiendo una página web que es un
tutorial de HTML. En este tutorial queremos hablar del tag <body> y queremos que aparezca en la
pantalla exactamente así: La palabra <body> con los dos ángulos al principio y al final. Podríamos
pensar que el listado sería algo así:
<html>
<head>
<title>
</title>
</head>
<body>
En este tutorial se habla del tag <body>.
Espero que le guste.
</body>
</html>
Tecléelo y grábelo con el nombre secuencias_3.htm. Lo prueba y… ¡Oh!, que desilusión. Lo que ve

en la página no es lo que esperaba, tal como muestra la siguiente figura:
Esto es así porque la parte que pone <body> al final de la primera línea del texto no es interpretada
por el navegador como un texto más, sino como un tag. En este caso el navegador interpreta que
estamos intentando abrir de nuevo el <body>, ya que está abierto. Por lo tanto, no se comporta como
esperábamos. No se produce un error que pare la página, ni nada parecido, debido a la proverbial y, en
ocasiones, molesta flexibilidad del lenguaje, pero no funciona correctamente. Lo que vamos hacer
para arreglar este desaguisado es sustituir, en el texto, los angulitos por las
secuencias < y > como vemos en el siguiente listado, que grabaremos como secuencia_4.htm.
<html>
<head>
37
<title>
</title>
</head>
<body>
Espero que le guste.
</body>
</html>
Ahora lo probamos y es todo correcto. También estas secuencias y cualquier otra que pueda necesitar
las tiene listadas en el apéndice “D”. Existe una forma alternativa mucho más potente de incluir
secuencias que producen a estos caracteres que no deben ser tecleados sin más como texto: Se trata de
emplear lo que se conoce como entidades numéricas. Casi la totalidad de los caracteres del código
ASCII pueden generarse de esta manera, empleando para ello la sintaxis &#nnn; donde nnn es un
número basado en el código ASCII del carácter que queremos representar, expresado con tres cifras
(en realidad, no siempre coinciden con el ASCII sino que sólo se basa en él).
Lo vamos a ver más claro con un ejemplo. Supongamos en código anterior. Nuestro problema serán
los angulitos < y >, que habíamos representado mediante las entidades con nombre < y > en el
anterior código. En este ejemplo, al que llamaremos secuencias_5.htm. Vamos a emplear las
entidades numéricas, los códigos ASCII los angulitos < y > son, respectivamente 60 y 62. El código,
pues, quedaría como sigue:
<html>
<head>
<title>
</title>
</head>
<body>
Espero les guste.
</body>
</html>
Al ejecutar la página hemos obtenido el resultado correcto. Una vez más le recuerdo que el apéndice
“D” recoge todas las entidades que puede incluir en sus páginas en ambos formatos.
Tag hr HTML Línea Horizontal - Atributos y estilos
La etiqueta hr nos permite generar una separación entre secciones de contenido. Se puede combinar
con otros tags como encabezados h1- h6 y párrafos p.
Cuando en una página tenemos mucho texto es conveniente, de cara a la presentación, separar de
forma clara y visible. Para ello, la solución más simple, aunque sumamente eficaz, es el uso de las
líneas horizontales entre los distintos bloques de contenidos.
38
Para generar una línea empleamos el tag <hr>. Las letras hr son el acrónimo de horizontal rule (línea
horizontal). Vamos a ver un código de ejemplo, que grabemos con el nombre líneas_1.htm.
<html>
<head>
<title>
Líneas horizontales
</title>
</head>
<body>
<p>
Esto es un p árrafo de texto
<p>
<hr>
<p>
Esto es otro p &aacuterrafo.
</p>
</body>
</html>
El código mostrará la página en la siguiente figura:
Como ve, hemos trazado una línea divisora entre

ambos párrafos. Esta línea cubre todo el ancho del
área de navegación, de lado a lado. (excepto los
márgenes por defecto de los que hablamos antes en
este mismo capítulo). Éste es el comportamiento
por defecto de este tag, pero eso podemos
modificarlo, si nos conviene. Este tag puede recibir
el atributo width, que permite especificar la anchura
que va a cubrir la línea. Esta anchura se puede
especificar en un valor absoluto, dándole un
número de pixeles, o en un valor relativo, indicando
qué porcentaje del área de navegación cubrirá la línea.
Vamos a ver un ejemplo de ambos, para aclara este concepto. En primer lugar, teclee el código que
aparece a continuación y grábelo como líneas_2.htm.
<html>
<head>
<title>
</title>
</head>
<body>
<p>
<p>
<hr width=400>
<p>
Esto es otro p árrafo.
</p>
</body>
</html>
39
Fíjese en el resultado de este código como se ve en la figura:
La línea tiene ahora 400 pixeles de largo (cubre una anchura de 400 pixeles). Observe que, si cambia
el tiempo de ejecución el tamaño de la ventana del navegador, la línea no varía del tamaño: sigue
teniendo 400 pixeles. Ahora mire esta variante del código, que grabaremos como líneas_3.htm.
<html>
<head>
<title>
Líneas horizontale
</title>
</head>
<body>
<p>
<p>
<hr width=50%>
<p>
Esto es otro p árrafo.
</p>
</body>
</html>
Observe que el resultado es parecido al caso anterior, pero en esta ocasión el tamaño es un porcentaje
del ancho de la ventana, de forma que, si varía la anchura de la ventana durante la ejecución, también
cambia el tamaño de la línea, para tener siempre el porcentaje indicado. A este respecto (y ya para que
lo sepa en el futuro) le comento que si tiene en su monitor una resolución de 800 x 600 píxeles
(resolución muy habitual hoy en día), el tamaño del área de navegación, con la ventana del navegador
maximizada es de 760 x 420 píxeles. Si la resolución de su monitor es de 1024 x 768 el tamaño del
área de navegación es de 955 x 600 píxeles. Ahora, puede no parecer importante esto, pero cuando
usemos otros elementos en nuestra página será vital tener en cuenta estos tamaños para lograr un buen
diseño.
Fíjese en una cosa: así como el texto se alinea, por defecto, a la izquierda de la página, las líneas
horizontales toman, por defecto la alineación centrada. Esto también podemos modificarlo, usando,
para ello, el atributo align, que podrá recibir los valores “left", “center" (defectivo) o “right". Observe
el siguiente código, que grabaremos como lineas_4.htm.
<html>
<head>
<title>
40
</title>
</head>
<body>
<p>
<p>
<hr width=50% align="right">
<p>
Esto es otro p árrafo
</p>
</body>
</html>
El resultado de éste código es similar a los anteriores, pero con la línea colocada a la derecha de la
página, tal como muestra la figura:
Además de todo esto, también

podemos controlar el espesor de la
línea. Para ello, emplearemos el
atributo size. Al contrario de lo que
ocurriría con width, al atributo size,
sólo puede recibir el valor absoluto,
en píxeles, y no como un porcentaje
de nada. Observe el siguiente
código, que grabaremos como
líneas_5.htm.
<html>
<head>
<title>
L&iacute:neas horizontales
</title>
</head>
<body>
<p>
<p>
<hr width=50% align="right" size=20>
<p>
Esto es otro p
&aacuterrafo.
</p>
</body>
</html>
41
Este código genera una página como se muestra a continuación:
En ella, puede apreciar el efecto de transparencia de la barra horizontal. No se trata de un efecto muy
ortodoxo (no era la idea cuando se creó este tag), pero puede resultar interesante en un momento dado.
En seguida aprenderemos a dar color a la barra.
Cómo ve la línea tiene ahora un espesor de 20 píxeles. Además la línea es transparente, es decir,
adopta el color de fondo; esto lo puede verificar cambiando el color de fondo. El valor máximo que le
podemos pasar al atributo size es 100, es decir, para lograr una línea con un espesor de 100 píxeles
(que ya está bien). Si no quiere que la línea sea transparente, sino opaca, añade el atributo noshade,
con el valor “noshade". El código aparece a continuación, lo grabaremos como líneas_6.htm.
<html>
<head>
<title>
</title>
</head>
<body>
<p>
Esto es un párrafo de texto
<p>
<hr width=50% align="right" size=10 noshade="noshade">
<p>
Esto es otro párrafo.
</p>
</body>
</html>
El resultado lo ve en la siguiente figura:
Como puede apreciar, lo que hemos

hecho es que la línea aparezca sombreada
en gris obscuro. El gris es un color al que
se acostumbrará pronto, ya que es muy
socorrido en muchos casos (textos de
menor importancia, algunas líneas etc.).
Además podemos cambiar el color de la

línea, mediante el atributo color. Este
atributo puede recibir el valor que indique
el color cualquiera de las dos formas que
conocemos: mediante el nombre, en ingles,
del color o mediante su código
hexadecimal. Lo vemos en el siguiente
código, que llamaremos lineas_7.hmt.
<html>
<head>
<title>
42
L&iacuteneas horizontales
</title>
</head>
<body>
<p>
Esto es un p&aacuterrafo de texto
<p>
<hr width=50% align="right" size=20 color="#FF0000">
<p>
Esto es otro p&aacuterrafo.
</p>
</body>
</html>
El resultado de este código es la página que puede ver en la figura siguiente:
Observe como la línea sale en color rojo. Cuando le damos

a la línea un color, es indiferente que usemos el sombreado
(noshade) o que no lo usemos. La línea es de ese color sin
más.
Tag hr HTML Línea Horizontal - Atr
div y span HTML - ¿Qué son, para qué sirven? Ejemplo de uso
Los tags div y span no tienen ningún significado especial, sólo que la primera se define como un
elemento bloque y la segunda es un elemento de línea.
El lenguaje HTML5, define mediante etiquetas

elementos dentro de un documento web. Estos
elementos pueden ser de dos tipos denominados,
elementos de bloque y elementos en línea.
Su nombre es debido a la forma en que ocupan

espacio dentro del documento que se está creando.
Un elemento en bloque significa que el elemento
ocupa todo el ancho del documento disponible produciendo un retorno de línea al final del mismo. Si
se visualizarán los bordes alrededor del elemento, un elemento en bloque quedaría de la siguiente
forma en un documento:
43
Espacio que ocupan las etiquetas div y span
Como se puede observar el elemento en bloque

ocuparía todo el ancho de página del
documento.
Los elementos en línea por el contrario solo

utilizan el espacio que ocupan, observando la
imagen anterior el elemento en línea está
insertando dentro de un elemento de bloque y
tiene el tamaño correspondiente al espacio que
ocupa.
A continuación se muestra un ejemplo real de página en la cual se visualizan los bordes para varios
elementos en el cual se puede comprobar el espacio que ocupan cada tipo de elemento.
Tags div y span con bordes

Las etiquetas <div> y <span>, no
tienen ningún tipo de significado
especial, solo que la primera se
define como un elemento de
bloque y por tanto el navegador
mostrara un salto de línea antes y
después de la misma. Mientras
que la segunda es un elemento de
línea.
Cuando se utilizan actualmente

en un documento web, se pueden
utilizar para establecer opciones
de formato mediante hojas de
estilo a bloques completos o
elementos individuales del
documento.
Un uso muy común de las mismas era también para establecer el diseño del documento mediante
hojas de estilo. Aunque actualmente con la nueva versión de HTML5 que proporciona etiquetas para
establecer dicho diseño, se recomienda la utilización de las nuevas etiquetas en sustitución de div y
span.
La sustitución de las etiquetas div y span, por la nuevas etiquetas semánticas de HTML5, se ofrece
como alternativa recomendándose la utilización de las ultimas, pero muchos desarrolladores web,
siguen utilizando para establecer divisiones de sección, artículos, etc., en sus documentos las etiquetas
div y span. Aunque también todavía hay programadores que para maquetar el diseño del documento
siguen utilizando tablas, esta última opción ya no es recomendada por el consorcio W3C.
Las dos etiquetas en esta última versión del lenguaje no disponen de atributos que aplicar a las
mismas.
La sintaxis de las etiquetas es la siguiente:
<div>Contenido del bloque, Otras etiquetas, etc. </div>

<div>Contenido <span>del bloque</span> con elementos en línea</div>
44
El siguiente ejemplo muestra el uso de ambas etiquetas en un documento web.
<!DOCTYPE HTML>
<html>
<head>
<title>Ejercicios prácticos HTML5</title>
<meta charset="utf-8">
</head>
<body>
<p>Elementos de bloque y línea</p>
<div style="color:#0000FF">
<h3>Encabezado de tipo 3</h3>
<p>Párrafo con formato aplicado.</p>
</div>
<div>
<p>Párrafo con formato <span style="color: blue">aplicado</span> a
un elemento en línea</p>
</div>
</body>
</html>
El resultado del ejercicio anterior ha de ser similar al mostrado en la imagen siguiente:
Mezcla de tag div bloque y span lineal
Maquetación Web - Recomendaciones para diseñar un sitio Web

La maquetación web es el proceso de planificación, conceptualización y organización de contenido de
una página web. Asegura que los textos, las imágenes, los vídeos, entre otros, estén estructurados para
crear una buena experiencia de usuario.
45
Al considerar el estilo de diseño de un sitio web, es importante tener en cuenta:
 El propósito previsto
 La audiencia objetivo del diseño
 Los recursos disponibles para el sitio web (texto, imágenes, videos y enlaces)
 Sus propias preferencias de diseño y cualquier marca existente, cómo:
o logotipo o material de marketing impreso
 Las necesidades del cliente
Cada uno de ellos definirá gran parte las opciones de diseño que se realicen.
Reconocemos que no siempre es fácil saber el estilo que busca y hemos descubierto que la mejor
manera de tener una buena idea utilizar la técnica de benchmarking y navegar por los mejores sitios
web de su industria.
Comenzar a reconocer lo que le gusta y lo que no le gusta de cada uno.
Y aunque la mayoría de los diseños tendrán componentes de creación similares, cada sitio web
incorporará sus características, elementos y estilo específicos para crear algo que se adapte a las
necesidades de la empresa u organización específica para la que se desarrolló.
El proceso de personalización del diseño es simplemente una cuestión de reconocer cuál es la mejor
manera de presentar el contenido del sitio web.
Evaluación de diseño general
Al evaluar un sitio web, revise cada uno de los siguientes puntos y tome nota sobre lo que funciona y
lo que no para cada sitio web al que proporcione un enlace.
 Uso de color para el diseño de la página

 Estilo de texto, tanto en el contenido del cuerpo como en los títulos de las páginas
 El tipo de navegación, su estilo e interactividad
 El estilo y el tipo de diseño del encabezado
 La ubicación y el tamaño del logo
 El uso de imágenes en las páginas, especialmente en la página de inicio
 Cómo se presenta el contenido de las páginas
Tenga en cuenta que la mayoría de los sitios web por convención, utilizan los mismos elementos
comunes; es decir:
46
 El header/cabecera en la parte superior
 Seguida de la nav/navegación
 El article/contenido del cuerpo
 El aside/barras laterales
 Y el footer/pie de página
Maquetación Diseño de página Web
Estructurar y acomodar contenedores

Construcción de la estructura de un sitio Web con base en el dibujo de una libreta.
Aspectos específicos y consideraciones del diseño
Si bien la mayoría de los diseños son estructuralmente similares, las opciones de estilo y el uso y la
ubicación del contenido en el diseño es lo que proporciona la diversidad necesaria. En la práctica de
diseño actual, todos los diseños incluirán:
Dimensiones de la página
Pocas páginas web tienen un tamaño inferior a 940 píxeles de ancho. Esto asegura que las páginas se
vean bien en la resolución del navegador de 1024×768. Las páginas receptivas suelen ser más anchas
que esto para adaptarse mejor a las resoluciones más grandes, y las páginas solo para dispositivos
móviles se diseñarán para verse bien con un ancho de 320 píxeles.
Dimensiones y relleno de columnas
Todos los diseños modernos utilizarán un sistema de cuadrícula de columnas en el que cada columna
tiene un ancho definido y márgenes entre columnas definidos (generalmente 20px). Un sistema de
cuadrícula permite la creación de columnas en un diseño asignando una clase de columna CSS a la
capa div.
Estilo de fondo
Un fondo puede ser un color sólido, una imagen de tamaño completo (desplazable o fija) o un fondo
de pantalla en mosaico.
Colores de página
Los diseños efectivos utilizarán una paleta de colores consistente con una opción de color primario y
algunas armonías de color o complementos.
Los colores correctos se definen mejor probando primero el logotipo para garantizar una integración
efectiva, teniendo en cuenta la industria y el público objetivo. Si no tiene un logotipo con color o
colores existentes definidos, puede ser útil identificar si su página web se vería mejor con una paleta
de primavera, verano, invierno u otoño.
Tipografía
El tipo de letra utilizado para la web será con mayor frecuencia una fuente sans-serif para el área de
contenido del cuerpo en aras de la legibilidad, aunque los títulos de los encabezados suelen ser fuentes
serif para proporcionar una diferenciación visual.
Las mejores familias de fuentes sans-serif para uso web son:
 Arial
47
 Tahoma
 Verdana
 Trebuchet MS
Para las fuentes Serif, las mejores familias de fuentes para la web son:
 Georgia
 Palatino Linotype
 Times New Roman
En el diseño contemporáneo, la práctica común es usar un color gris oscuro para el texto (no negro
puro) y evitar el uso de texto en color en la mayoría de los casos.
También es una buena práctica no usar negrita, cursiva, mayúsculas o mezclar familias de fuentes más
allá de un tipo para los encabezados y un tipo para el resto del texto.
Las fuentes de Google Fonts se han vuelto populares, pero considere no agregar más de tres fuentes
distintas por página.
Encabezado (barra superior)
Esta es la sección más alta de una página web y es donde muchas empresas agregan su número de
teléfono, dirección de correo electrónico y pequeños íconos de redes sociales. En algunos diseños
modernos, el logotipo también se incluirá aquí.
Encabezado (área del logotipo)
La sección directamente debajo de la barra de título es donde se coloca el logotipo. Por lo general,
esta área proporciona un logotipo "rectangular" alineado a la izquierda, con un lema/eslogan
adyacente a él a la derecha.
Los logotipos más grandes (redondos y verticales) normalmente deberán centrarse o agregarse en la
parte superior de una barra lateral izquierda.
Encabezado (masthead)
Debajo del logotipo se encuentra el área del encabezado. En el pasado, esto habría sido típicamente
una imagen singular; en la práctica de diseño actual, esto normalmente será una presentación de una
imagen Hero o slider con carrusel de imágenes.
Navegación
El menú principal normalmente se coloca directamente encima o debajo de la cabecera (alineado

horizontalmente), verticalmente en una barra lateral izquierda, o en diseños modernos, en la parte
superior izquierda como un menú de "hamburguesa" móvil.
El "nivel superior" del menú horizontal típico constará de 8 o menos palabras de enlace de menú
"breves" para garantizar que encajen bien en una línea.
También es importante garantizar un buen contraste visual entre las palabras y el fondo en aras de la
legibilidad. Si se necesitan enlaces de menú adicionales, se utiliza un submenú (desplegable).
Contenido del cuerpo
La sección de contenido es donde se muestra el texto de la página.
48
El tercio superior de la página es el área "en la mitad superior de la página" que los motores de
búsqueda indexan con mayor frecuencia, por lo que es importante asegurarse de que tenga un amplio
texto enriquecido con palabras clave y brinde un resumen general de tu artículo.
Una descripción detallada en la parte superior que indica claramente de qué se trata el sitio web y los
servicios disponibles.
Barras laterales
Las barras laterales se utilizan con mayor frecuencia en las páginas interiores y es un excelente lugar
para proporcionar contenido adicional, como:
 Información de contacto
 Formularios de contacto breves
 Testimonios
 Navegación adicional (conocida como menús de barra lateral)
 Llamadas a la acción
 Información de recursos y relacionados
 Redes Sociales
 Videos corporativos o elementos multimedia
Elementos de contenido
El desafío para muchas personas es definir cómo presentar mejor su contenido.
Para las empresas de servicios, una práctica común es utilizar un diseño de tres o cuatro columnas en
el que se agrega a una columna una imagen representativa que refleja cada servicio, seguida del título
del servicio, una breve descripción y un enlace a esa página.
En el diseño actual, hay muchas opciones posibles para la inclusión, como:
 Sistemas tabulares
 Conmutadores/acordeones
 Testimonios de desplazamiento
 Videos incrustados
 Carruseles de imágenes
 Presentaciones de diapositivas
Lo importante es asegurarse de que las páginas se vean completas al incluir suficiente contenido, sin
sobrecargarlo.
Sección de pie de página
El pie de página (como la barra de título) es coherente en todas las páginas y se coloca debajo del área
de contenido del cuerpo.
El pie de página se presenta con mayor frecuencia en un formato de tres o cuatro columnas.
Esta área se usa generalmente para proporcionar información general de la empresa, como:
 Áreas de servicio
 Íconos de redes sociales
 Sitemap o recursos clave
 Testimonios
 Imágenes en miniatura de contenido visual importante
 Etc.
49
Sub-pie de página
El sub-pie de página es la barra inferior de la página, también es consistente en todas las páginas. Esto
se usa generalmente para:
 Aviso de derechos de autor

 Información del creador del sitio
 Licencia comercial
 Enlace de política de privacidad/términos de uso.
Mejores prácticas de contenido
Una consideración importante al agregar contenido a sus páginas es cómo y dónde colocarlo. Para que
el contenido se vea bien en un diseño, generalmente recomendamos:
 Cuando haya dos o más columnas, asegúrese de que la longitud vertical sea muy cercana
entre ellas; esto es especialmente importante con columnas de pocas líneas. Si está utilizando
una estructura de dos columnas, es mejor si la primera columna (izquierda) tiene la misma
cantidad o un poco más de texto que la segunda columna (derecha). En la mayoría de las
situaciones, la alineación a la izquierda es mejor para los títulos de página y la copia de texto.
 La mayoría de las páginas web incluirán páginas de ancho completo y páginas de barra
lateral. En la mayoría de los casos, es mejor usar una barra lateral derecha que una barra
lateral izquierda. La principal excepción es cuando se utiliza la barra lateral izquierda para
navegación complementaria; y es mejor mantener la coherencia con la ubicación de la barra
lateral (todas alineadas a la izquierda o todas alineadas a la derecha).
 Por lo general, es mejor alinear el contenido de texto a la izquierda. Hay algunas excepciones
aquí, como un título debajo de una imagen, o si elige tener todos los encabezados de página
centrados, pero lo importante es la coherencia en el uso en todas las páginas.
 La posición de la imagen dentro de la copia de la página generalmente se ve mejor alineada a
la derecha y no mayor a 300px de ancho a menos que la imagen sea necesaria para abarcar
todo el ancho de la página.
 Al agregar imágenes a las páginas, asegúrese siempre de que haya suficiente espacio (margen
o relleno) entre la imagen y la copia de texto adyacente o la columna en sí. Por lo general,
20px es la cantidad correcta. Para diseñar esto apropiadamente para la alineación correcta,
simplemente agregue la imagen en una capa div como: <div style="float: right; padding-left:
20px"> fuente de la imagen </div> Esto asegurará que haya espacio a la izquierda. También
puede agregar espacio en la parte superior e inferior de la imagen si es necesario.
 Evite las propiedades de alineación de imagen predeterminadas en la mayoría de los casos.
Los diseños receptivos no funcionan bien con esto, por lo que usamos capas div, como se
indicó anteriormente, o colocamos la imagen dentro de una columna de tamaño apropiado.
 Utilice listas con viñetas cuando proporcione una lista breve de contenido. Esto solo hace que
el texto sea más fácil de leer y los estudios han demostrado que las personas a menudo leen
listas con más facilidad que solo texto en una página.
 Evite la justificación del texto a menos que sea absolutamente necesario. El texto justificado
cambiará según las resoluciones de visualización y, en dispositivos más pequeños, se verá
horrible.
 Evite muchas oraciones declarativas cortas en el cuerpo del texto. Claro, está bien para las
listas, pero cuando se usa como un artificio para llamar la atención de la gente, transmite la
impresión de exigir la atención de uno, similar al uso excesivo de encabezados, texto en
negrita, texto en cursiva, texto en rojo y texto en mayúsculas.
 Evite el uso excesivo de imágenes, pero asegúrese de tener suficientes. Las personas son
visuales, por lo que las imágenes son absolutamente necesarias, pero cuando se agregan
demasiadas imágenes a una página, puede perder su atractivo profesional. Si se necesitan
muchas imágenes, es mejor ajustarlas a un tamaño pequeño y luego vincularlas a la
representación más grande.
 Utilice los colores de página y la tipografía adecuados para su público objetivo, al tiempo que
se asegura de que todos puedan leer fácilmente la copia al proporcionar un buen contraste
50
entre el color de la imagen y su fondo. Más sobre esto en nuestra página de tipografía y
colores.
 La ortografía y la gramática revisan toda la copia de su página. Esto es importante no solo
para que sus páginas web se perciban como profesionales, sino que se sabe que los motores de
búsqueda reducirán la clasificación de un sitio que contiene muchos errores.
Respete las convenciones de diseño y a su vez sea creativo creando un estilo único que cautive al
visitante de Internet y lo motive a regresar a su sitio Web.
Diferencias entre Class y ID - Ejemplo de uso en HTML y CSS
Un elemento HTML sólo puede tener un ID que pertenezca a ese único elemento, mientras que varios
elementos pueden usar un nombre de clase.
Puedes definir sus propios selectores en forma de selectores de clase e ID.
El beneficio de esto es que puede tener el mismo elemento HTML, pero presentarlo de manera
diferente según su clase o ID.
En el CSS, un selector de clase es un nombre precedido por un punto (".") Y un selector de ID es un

nombre precedido por un carácter hash ("#").
Entonces, el CSS podría verse algo así como:
#top {
background-color: #ccc;
padding: 20px
}
.intro {
color: red;
font-weight: bold;
}
El HTML se refiere al CSS utilizando los atributos idy class. Podría verse más o menos así:
<div id="top">
<h1>Cerry de chocolate</h1>
<p class="intro">Esta es mi receta para hacer curry con chocolate</p>
<p class="intro">Mmm mm mmmmm</p>
</div>
51
La diferencia entre una ID y una clase es que una ID se puede usar para identificar un solo elemento,
mientras que una clase se puede usar para agrupar más de uno.
También puede aplicar un selector a un elemento HTML específico simplemente indicando primero el
selector HTML, por p.mermelada { /* lo que sea */ } lo que solo se aplicará a los elementos de
párrafo que tengan la clase "memelada".
Imágenes HTML - Tag img para insertar imagen en páginas Web
Para insertar una imagen se utiliza la etiqueta img y los formatos más populares aceptados, son JPEG,
GIF y PNG. Aunque se pueden utilizar muchos más.
La etiqueta <img>, permite definir una imagen

en el documento web. Técnicamente la
imagen no es insertada dentro del documento,
ya que lo que se hace es realizar un enlace a la
misma, encargándose el navegador de situarla
en el documento.
Entre los formatos más populares de imagen

aceptados, sin duda se encuentran el formato JPEG, y el formato PNG. Aunque se pueden utilizar
muchos más formatos.
Se ha de tener en cuenta que el tamaño de las imágenes influye en el proceso de carga de la página. Y
por tanto se suelen preparar las imágenes para que su “peso" (“tamaño en bytes"), sea menor,
observando que la imagen obtenga la menor pérdida de calidad de visualización en el proceso.
Se ha de observar que la etiqueta no tiene etiqueta de cierre.
La sintaxis de la etiqueta es la siguiente:
<img alt="valor" height="valor" width="valor" src="valor" ismap usemap="valor">
Los atributos que pueda utilizar la etiqueta, aparte de los globales, son los siguientes.
src
El atributo src, permite especificar el origen de la imagen, es decir su ubicación, bien mediante una
ruta absoluta o relativa.
Las posibles formas de sintaxis para definir esta etiqueta con el atributo src son las siguientes:
<img src="URL Absoluta" />

<img src="URL Relativa" />
height
El atributo height, permite especificar el alto de la imagen en pixeles.
52
Siempre que se especifique el ancho y alto de la imagen, el navegador reservara el espacio
correspondiente para la imagen cuando se produzca la carga del documento.
Si no se especifican los tamaños de la imagen, el navegador no podrá realizar la reserva de espacio en

el documento, hasta que se haya completado la carga de la imagen.
El especificar ancho y alto de la imagen, no significa que se realice una reducción o ampliación del
tamaño en bytes de la imagen, es decir la imagen se ha de leer completa, independientemente del
tamaño especificado.
Si se especifica un tamaño que no siendo el tamaño real de la imagen, se puede producir un efecto de
pixelado o dientes de sierra, con la respectiva pérdida de calidad en la visualización de la imagen.
Si se quiere realizar cambios de tamaño, escalado, calidad, etc. Sobre la imagen se han de hacer sobre
la misma con algún tipo de programa especial, ya que ni el navegador ni el lenguaje realizan esta
función.
La sintaxis de la etiqueta con el atributo height, es la siguiente:
<img src="valor" height="Valor En Pixeles" />
width
El atributo width, permite especificar el ancho de visualización de la imagen, con un valor numérico
en pixeles.
La sintaxis de la etiqueta con el atributo width aplicado es la siguiente:
<img src="valor" height="Valor En Pixeles" width="Valor En Pixeles" />
alt
El atributo alt, permite especificar un texto alternativo para la imagen. Este texto alternativo es
visualizado cuando se produce un error en el atributo src, la conexión fuese muy lenta o si el usuario
utiliza un lector de pantalla.
Algunos navegadores visualizan el texto de este atributo como una pequeña ventana emergente,
aunque no es el comportamiento correcto, para realizar la acción de visualizar la ventana emergente es
preferible utilizar el atributo title.
La sintaxis de la etiqueta con el atributo alt aplicado es la siguiente:
<img src="Valor" alt="Texto Alternativo de la imagen" />
ismap
El atributo ismap, permite indicar que la imagen que se está cargando es una imagen considerada
como imagen de mapa de servidor, es decir una imagen que puede tener zonas seleccionables que
sirven como enlaces.
53
Es un atributo booleano, es decir no tiene valor asociado si aparece en una etiqueta de imagen, indica
que la misma es un mapa de imagen.
El atributo solo está permitido en caso de que la etiqueta de imagen sea descendiente de una etiqueta
de enlace con una referencia valida de enlace.
La sintaxis de la etiqueta con el atributo ismap es la siguiente:
<a href="valor"><img src="Valor" alt="Texto Alternativo de la imagen" ismap></a/>
usemap
El atributo usemap, permite especificar que la imagen utilice un mapa de imagen con zonas
seleccionables, asociando la etiqueta con un mapa de imagen definido con la etiqueta <map>,
estableciendo de esta forma las zonas seleccionables de la imagen.
El atributo no está permitido utilizarlo si la etiqueta de imagen es descendiente de una etiqueta de

enlace o botón.
Como el atributo hace referencia a una etiqueta que define el mapa de imagen, comentamos la sintaxis
con la etiqueta asociada /lt;map>, la cual permite crear y definir las zonas, aunque es muy
recomendable utilizar programas que generen el código de las zonas, ya que las mismas se han de
establecer mediante coordenadas de pixeles y por tanto es bastante tedioso establecerlas.
La sintaxis de la etiqueta con el atributo y etiquetas asociadas es la siguiente:
<img src="valor" usemap="#NombreMapa">
<map name="NombreMapa">
<area shape="rect" coords="0,0,82,126" href="valorenlace" alt="valor">
<area shape="circle" coords="90,58,3" href="valorenlace" alt="valor">
<area shape="polygon" coords="124,58,8" href="valorenlace" alt="valor">
</map>
Como se puede observar la etiqueta <map> permite establecer zonas rectangulares, circulares o
poligonales. Por eso se recomienda utilizar un programa a libre elección del usuario, de los muchos
existentes para crear las imágenes y generar el código html del mapa de imagen.
Se ha de tener en cuenta que si se alterase una vez creado el mapa de imagen, las características de la
imagen se ha de volver a crear el mapa de imagen ya que las coordenadas podrían haber variado con
respecto a la imagen original.
El siguiente ejemplo muestra el uso de la etiqueta con el atributo y etiquetas asociadas.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<img src="mapamundi.jpg" usemap="#Mapa1" alt="MapaMundi" />
54
<map name="Mapa1">
<area shape="rect" coords="310,61,410,133"
href="http://www.eu.com/" alt="Europa>
<itle="Europa" />
<area shape="rect" coords="141,64,284,291"
href="http://www.america.com/>
<lt="America" title="America" />
</map>
</body>
</html>
El resultado en el navegador ha de ser similar al que se muestra en la siguiente imagen.
UseMap Imágenes HTML
Listas HTML - Sin orden ul, ordenadas ol y de definición dl
Existen tres tipos de listas en HTML que nos permiten organizar la información: listas numeradas,
listas desordenadas y las listas de definición.
Imagine que tiene un documento donde maneja una considerable cantidad de información.
Usualmente cuando existe esta situación, usted desea abreviar el tiempo para que cualquier persona
encuentre más rápida y eficientemente cierto punto de interés entre toda la cantidad de información
disponible, para lograr esto se recurre a elaborar algún tipo de lista (como un índice, por ejemplo).
En este punto se explorarán las posibilidades de HTML con respecto al uso de listas, como son: listas
numeradas, conocidas también como listas ordenadas, listas no numeradas llamadas también listas no
ordenadas y las listas de definición. También se aprenderá cómo anidar listas dentro de otras.
55
Listas numeradas y listas no numeradas
La etiqueta con cierre para listas no numeradas es <ul>, cada elemento de la lista utilizará un símbolo
llamado bullet. Para listas numeradas se usa la etiqueta <ol>, aquí, a cada elemento de la lista le
precederá un número. Al iniciar la lista se utiliza la etiqueta <ul> o bien la etiqueta <ol>, se coloca
cada elemento de la lista delimitado por la etiqueta <li> y su cierre </li>, y de inmediato se cierran
estas listas con </ul> o </ol> según sea el caso.
Tag UL
La etiqueta <ul>, permite definir una lista desordenada (“Unordered List”). Esta etiqueta es a su vez
contenedora de otras etiquetas, siendo estas últimas las que componen cada uno de los elementos de
los que está compuesta la lista.
Para especificar un elemento en la lista se ha de utilizar la etiqueta <li> </li>, en la que se ha de

especificar el texto que compone el elemento de la lista.
Una lista puede contener como elemento de lista, otra lista, es decir se pueden crear listas anidadas.
<ul>
<li>Elemento de lista</li>
<li> … </li>
</ul>
El siguiente ejemplo muestra el uso de la etiqueta en un documento web.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>Lista con elementos desordenados</p>
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
<p>Lista con sublistas anidadas</p>
<ul>
<li>Primero</li>
<li>Segundo
<ul>
<li>Segundo Uno</li>
<li>Segundo Dos</li>
</ul>
</li>
56
<li>Tercero</li>
</ul>
</body>
</html>
El ejercicio anterior ha de mostrar un resultado similar al que se visualiza en la imagen siguiente.
Resultado de listas sin orden
Tag OL
La etiqueta <ol>, permite definir listas o viñetas ordenadas (“Ordered List”), bien con numeración o
alfabéticamente. Esta etiqueta es a su vez contenedora de otras etiquetas, siendo estas últimas las que
componen cada uno de los elementos de los que está compuesta la lista.
Para especificar un elemento en la lista se ha de utilizar la etiqueta <li> </li>, en la que se ha de

especificar el texto que compone el elemento de la lista.
Una lista puede contener como elemento de lista, otra lista, es decir se pueden crear listas anidadas.
<ol reversed start="valor" type="valor">

<li> … </li>
</ol>
Los atributos que pueda utilizar la etiqueta, aparte de los globales, son los siguientes.
type
El atributo type, permite especificar el tipo de orden que se de aplicar a la lista, estableciendo de esta
forma que la lista se represente mediante diferentes tipos de numeración.
Los diferentes valores que puede recibir este atributo son los siguientes:
Valor Descripción
1 Es el valor por defecto en caso de no especificarse el atributo.

Realiza la numeración de las lista utilizando valores numéricos.
57
Valor Descripción
(1,2,3…)
Establece que la numeración de la lista se realice utilizando

a
caracteres alfabéticamente en letra minúscula. (a, b, c …)
Establece que la numeración de la lista se realice utilizando

A
caracteres alfabéticamente en letra mayúscula. (A, B, C …)
i Establece que la numeración de la lista se realice utilizando numeración en formato de números

romanos en letra minúscula. (i, ii, iii, iv …)
Establece que la numeración de la lista se realice utilizando numeración en formato de números

I
romanos en letra mayúscula. (I, II, III, IV …)
start
El atributo start, permite indicar el valor de inicio, por el cual ha de comenzar la lista ordenada, siendo
este un valor numérico, en caso de ser la lista ordenada de forma alfabética, el valor de inicio que se
exprese, se corresponderá con el orden el abecedario ASCII correspondiente.
La sintaxis de la etiqueta con el atributo es la siguiente:
<ol start="valor">
<li> … </li>
</ol>
reversed
El atributo reversed, permite indicar que la numeración u orden que se haya establecido se represente
de forma inversa, si tuviéramos una lista con valor de inicio 1, 2, 3, sucesivamente, su representación
al encontrarse este atributo seria 3,2,1.
Es un atributo con valor booleano, en caso de aparecer el atributo en la etiqueta se aplica el valor.
La sintaxis del atributo aplicado a la etiqueta es la siguiente:
<ol reversed>
<li> … </li>
</ol>
El siguiente ejemplo muestra el uso de las listas ordenadas utilizando variaciones sobre la misma.
<!DOCTYPE HTML>
<html>
<head>
58
<title<Ejercicios prácticos HTML5>/title>
</head>
<body>
<p>Lista ordenada numéricamente por defecto>/p>
<ol>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
<p>Lista ordenada alfabéticamente</p>
<ol type="a">
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ol>
<p>Lista con todos los atributos</p>
<ol type="I" start="10" reversed>

<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
</body>
</html>
El ejemplo anterior ha de mostrar un resultado similar al que se muestra en la siguiente imagen.
Ejemplos de listas ordenadas
Tag DL
La etiqueta <dl>, permite definir lo que se denominan, listas de definición, las cuales a su vez están
compuestas por un término, y una definición
Para realizar la lista se utilizan dos etiquetas más, la primera es <dt> </dt>, que permite especificar el
termino en la lista. Y otra etiqueta <dd> </dd>, que permite especificar la definición.
59
La sintaxis de la lista con las etiquetas correspondientes, es la siguiente:
<dl>
<dt>Termino a definir</dt>
<dd>Definición del termino</dd>
<dt>Termino a definir</dt>
<dd>Definición del termino</dd>
…
</dl>
El siguiente ejemplo muestra el uso de la etiqueta, creando una lista de definición de términos.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>Listas de definición</p>
<dl>
<dt>BIOS</dt>
<dd>Basic Input Output System</dd>
<dt>RAM</dt>
<dd>Ramdon Access Memory</dd>
<dt>HTML5</dt>
<dd>Lenguaje de Marcado de Hipertexto 5</dd>
</dl>
</body>
</html>
El resultado del ejercicio anterior ha de ser similar al que muestra a continuación.
Enlaces HTML - Hipervínculos, links Etiqueta TAG a href
HTML utiliza el elemento ancla (Etiqueta a) para crear un enlace. Cuando un visitante hace clic en él,
el navegador abre otra página interna o externa.
60
La Web se trata de hiperenlaces
Es fácil generar links, oficialmente llamados hipervínculos, entre páginas. De hecho sólo se necesita
un elemento HTML: el ancla (anchor). Una vez dominado se podrá comenzar a organizar las páginas
en carpetas separadas y transformar una colección de documentos independientes en un sitio con
todas las de la ley.
El artículo habla sobre:
 1 Creando enlaces, el concepto ancla

 2 Enlaces internos y externos
 3 Abrir hipervínculo con una nueva ventana
 4 Enlaces relativos y organización por carpetas
 5 Descripción en los enlaces
o 5.1 Títulos de los enlaces
 6 Colores en los links
 7 Expectativas de los enlaces
 8 Enlaces externos
 9 Enlaces como anuncios
Creando enlaces, concepto de ancla
En HTML se utiliza el elemento ancla <a> para crear un enlace. Cuando un visitante hace clic en él,
el navegador abre otra página. El elemento ancla es un elemento contenedor y su aspecto es el
siguiente:
<a>...</a>
El contenido sobre el que pulsa el visitante se coloca dentro del elemento ancla:
<a>Enlace a otra página</a>
El problema del enlace de anterior es que no apunta a ningún sitio. Para convertirlo en un enlace que
funcione debe aportar la URL de la página de destino mediante el tributo href (que significa referencia
de hipervínculo).
Por ejemplo, si quiere un enlace para llevar al lector a una página llamada enlacepagina.html, debe
utilizar el siguiente código de HTML:
<a href="enlacepagina.html">Enlace a otra página</a>
Para que este vínculo funcione, el archivo enlacepagina.html debe estar en la misma carpeta de la
página Web que lo contiene. Veremos cómo organizar mejor el sitio clasificando páginas en distintas
subcarpetas.
El tag ancla es un elemento de línea (inline): se introduce dentro de cualquier otro elemento bloque.
Eso quiere decir que es completamente aceptable crear un enlace de varias palabras en un párrafo
normal.
61
<p>
Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber
hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. <a
href="enlacepagina.html">Enlace a otra página</a>
</p>
La siguiente figura muestra el ejemplo anterior.
Si no se personaliza un elemento ancla, el texto aparecerá en el navegador con el conocido subrayado

y letras azules.
Cuando se pasa el ratón por encima de un enlace, el puntero se convierte en una mano. No puede
saberse si funciona o no, ya que si apunta a una página que no existe sólo obtendrá un error después
de haber hecho clic.
Sin embargo, conviene recordar que el texto de un enlace, el incluido en el elemento <a>, es
importante, sobre todo para los motores de búsqueda. Si es los enlaces se encuentran bien definidos y
funcionando aumenta la posibilidad de que su sitio aparezca en el resultado de una búsqueda y atraiga
a nuevos visitantes.
Enlaces internos y externos
Los enlaces pueden llevarle rápidamente a una página a otra dentro del mismo sitio Web o
transportarle a una ubicación diferente en un servidor lejano. En cada caso se utilizan distintos tipos:
 Los enlaces internos apuntan a otras páginas del sitio Web. También pueden señalar a otros
tipos de recursos multimedia de su sitio.
 Los enlaces externos apuntan a páginas (o recursos) de otros sitios Web.
Por ejemplo, digamos que tiene dos archivos en su sitio, una página bibliográfica y una de dirección.
Si quiere que sus visitantes vayan de la primera (mibibliografia.html) a la segunda (contactame.html),
creará un enlace interno. Tanto si almacena ambos archivos en la misma carpeta o en diferentes, son
parte del mismo sitio Web en el mismo servidor, por lo que la forma de hacerlo es con un enlace
interno.
Por otro lado, si quiere que sus visitantes vayan desde su página de libros favoritos
(librosfavoritos.html) a la de Amazon (www.amazon.com) Necesita un enlace externo. Al hacer clic
sobre él, el lector es transportado fuera del sitio Web a un nuevo emplazamiento, ubicado en otro
lugar de la red.
Cuando se crea un enlace interno siempre debe utilizar una URL relativa, la cual le dice a los
navegadores la ubicación de la página objetivo relativa a la carpeta actual. En otras palabras: se le dan
instrucciones sobre cómo encontrar una nueva carpeta, diciéndole que suba o baje dentro de la carpeta
actual (moverse "hacia abajo" significa desplazarse de la carpeta actual a una subcarpeta; moverse
"hacia arriba" referencia lo contrario, se va de una subcarpeta a una carpeta padre, la que contiene la
subcarpeta actual).
62
Un ejemplo de ruta relativa:
Digamos que el texto de la página librosfavoritos.html incluye una frase con este enlace relativo a
contactame.html:
Si quieres más información sobre la reseña de alguno de los libros de este sitio puedes <a
href="contactame.html">contactarme </a> vía email.
Si hace clic en este enlace, el navegador asume automáticamente que ha almacenado contactame.html
en la misma ubicación que librosfavoritos.html y, entre bastidores, rellena el resto de la URL. Eso
significa que, en realidad, pide esta página:
http://nombrededominio.com/contactame.html
HTML le ofrece otra opción de enlace, llamada URL absoluta, que define una URL completa,
incluyendo el nombre de dominio, carpeta y página. Si convertimos el ejemplo anterior quedaría así:
Si quieres más información sobre la reseña de alguno de los libros de este sitio puedes <a href="
http://nombrededominio.com/contactame.html <a>contactarme </a> vía email.
Así pues, ¿Qué técnica emplear? La decisión es fácil. hay dos reglas a tener en cuenta:
 Si está creando un enlace externo tiene que utilizar rutas absolutas: En este caso, una
URL relativa no funcionará. Por ejemplo, imagine que tiene que enlazar la página home.html
del sitio Web Amazon. Si crea un enlace relativo, el navegador asume que home.html se
refiere al archivo de ese nombre en su sitio Web. Al hacer clic, los visitantes no irán donde
pretendía.
 Si está creando un enlace interno debería utilizar una URL relativa: Técnicamente,
cualquiera de los dos tipos de enlace funciona para páginas internas, pero las URL relativas
tienen varias ventajas. Primero, son más cortas y hacen más legible y fácil de mantener el
HTML. Puede reorganizar su sitio Web, colocar todos los archivos en una carpeta distinta o
incluso cambiar el nombre de dominio del sitio sin romper enlaces relativos.
Una de las mejores partes de utilizar enlaces relativos es que puede probarlos en su propia
computadora y funcionarán de la misma manera que lo harían estando en línea.
Abrir hipervínculo con una nueva ventana
¿Cómo puedo crear un enlace que abra una página en una nueva ventana del navegador? Cuando los
visitantes hacen clic en enlaces externos, tal vez no desee que abandonen su sitio tan fácilmente.
Los desarrolladores Web utilizan un truco común que abre páginas externas en ventanas de navegador
separadas (o en una nueva pestaña, dependiendo de la configuración). De esta forma, su sitio
permanecerá abierto en la ventana original, asegurando que el visitante no se olvidará de Usted. Para
que esto funcione debe establecer otro atributo en el elemento ancla: target (destino).
Veamos cómo:
<a href="paginadestino.html" target="_blank">Clic aquí</a>
El atributo target nombra el marco en el que un navegador debería mostrar la página de destino. El
valor de _blank indica que el enlace debe abrirse en una ventana nueva del navegador.
63
A algunos les encanta esta función de nueva pestaña, mientras que otros piensan que es un acto de
intervención tremendamente molesta y que interrumpe. Si lo utiliza, aplíquelo con moderación en
algún enlace ocasional.
Enlaces relativos y organización por carpetas
Un sitio Web estará mejor organizado si almacena grupos de páginas relacionadas en carpetas
separadas. Un ejemplo de ello se muestra en la siguiente figura:
Estructura de carpetas en un sitio Web
NOTA:
La carpeta raíz es el punto de partida del sitio Web: contiene el resto de archivos y carpetas. La
mayoría de sitios incluyen una página con el nombre index.html o index.php en la carpeta raíz. Esto
se conoce como página predeterminada. Si un navegador manda una petición a su dominio de sitio
Web sin especificar un nombre de archivo, el servidor envía la página predeterminada, al pedir
http://nombrededominio.com automáticamente devuelve

http://www.nombrededominio.com/index.html
Este sitio emplea varios enlaces relativos. Por ejemplo, imagine que necesita crear uno desde la
página index.html a contacto.html. Ambas está n en la misma carpeta, por lo que único que necesita es
un enlace relativo:
<a href="contacto.html">Contáctame</a>
También puede crear vínculos más interesantes de una carpeta a otra.
Es lo más importante del hipertexto. Hay tres grandes tipos de links:
 Enlaces de navegación estructural

 Enlaces asociativos, información adicional a términos
 Enlaces referenciales, sugerencias listadas
Es necesario informar claramente del enlace y el contenido del link.
La descripción de los enlaces
Frente a la vieja regla de incluir "haga clic aquí" es mejor declarar como enlace la frase o el término
de manera que el usuario sepa a dónde le lleva ese link.
64
Títulos de los enlaces
El tag <a> (ancla o anchor) permite incluir un atributo title. El título incluido se presentará como una
herramienta de ayuda sobre el texto cuando el ratón se detenga sobre él. Hay unas pequeñas
orientaciones para su redacción:
 Incluir el nombre del sitio si es diferente del actual

 Incluir el nombre de la sección del sitio en que estamos si es diferente de la actual
 Detallar la clase de información que el usuario encontrará, así como la manera en que se
relaciona con el texto del enlace y con el contenido de la página.
 Debe de ser de tamaño inferior a 80 caracteres, pero no deberían de exceder los 60. Un enlace
corto es mucho mejor.
 Si el texto marcado como enlace es obvio no es necesario incluir el atributo title para no decir
lo mismo.
Colores en los links
Es posible definir y personalizar los colores en los que aparecen tanto los enlaces, como los enlaces ya
visitados. Es recomendable mantener siempre el color estándar para los enlaces (azul para enlace y
morado para los enlaces ya visitados).
El significado de estas claves hoy en día está extendido y es comúnmente aceptado, lo que ayuda al
usuario a formarse una rápida idea de lo que puede ver y de lo que ya ha visto.
Expectativas de los enlaces
Siempre que nos refiramos a una misma página debemos utilizar exactamente la misma URL, sólo así
el navegador las marcará como vistas en todos los puntos de la página. De este modo evitaremos
frustraciones al usuario cuando visite como nueva una página que ya ha visto.
Los enlaces deben cumplir dos principios para aumentar la usabilidad:
 Explicar claramente porque debe abandonar su actual contexto y qué es lo que encontrará al
otro lado.
 Situar al usuario en su nuevo contexto y proporcionarle el valor relativo a su lugar de origen.
Enlaces externos
Es una de las mejores maneras de generar tráfico hacia nuestro sitio Web. Desde este punto de vista es
importante:
 Tener URLs permanentes para nuestras páginas

 Tener páginas con contenidos concretos y no mezclar muchos temas en una misma página.
Enlaces como anuncios
No es conveniente enlazar con la página de inicio sino con algo más concreto o específico. Entre un
20 y 30% de usuarios que encuentran una página de inicio al pulsar un banner, pulsan acto seguido la
función de volver.
Tablas HTML ejemplos básicos y avanzados - thead tbody tfoot

65
El tag table permite crear una tabla en HTML. Para definir las filas se utiliza la etiqueta tr, mientras
que para las columnas se usa el tag td.
La etiqueta <table>, permite definir

tablas. Una tabla es una cuadricula de
casillas o celdas, divididas en filas y
columnas
Las tablas para componerlas se hace

uso de otras etiquetas, las cuales no
tienen sentido sino están situadas
dentro de una etiqueta de tabla. Estas
etiquetas son las siguientes.
Etiquetas Descripción
<table> Definición de una tabla.
<th> Definición de cabecera de tabla.
<tr> Define una fila en la tabla.
<td> Define una celda en la tabla.
<caption> Define el nombre o título de la tabla.
<colgroup> Especifica un grupo de una o más columnas para aplicar formato.
Especifica las propiedades de una columna de las columnas definidas en

<col>
un elemento colgroup
<thead> Define la cabecera de la tabla.
<tbody> Define el cuerpo de la tabla
<tfoot> Define el pie de la tabla
Definición de una tabla sencilla
Para crear una tabla sencilla se ha de utilizar en primer lugar la etiqueta <table>, la cual define la
tabla. Y dentro de ella se han de situar por cada fila una etiqueta <tr>, mientras que por cada casilla o
celda dentro de la fila, se puede utilizar una etiqueta <th> o <td>, dependiendo de que sea una casilla
de cabecera o normal.
El siguiente ejemplo muestra la definición de una tabla de dos filas por dos columnas. Aunque en
versiones anteriores de HTML, se pueden aplicar varios atributos a la etiqueta <table>, actualmente
solo está permitido uno, el atributo border, al cual se le puede dar un valor de 0 o 1
De esta forma se visualiza un borde en la tabla, este atributo solo se ha de utilizar cuando se está
realizando el documento web por motivos de visualización del diseño, siendo conveniente quitar el
mismo cuando se publique el documento y establecer los formatos de la tabla mediante hojas de
estilo.
66
Para los ejemplos utilizados y con el fin de poder apreciar el resultado en el navegador se ha
establecido el atributo border con un valor de 1
<!DOCTYPE HTML5>
<html>
<head>
<meta name="author" content="">
<meta name="description" content="Ejercicios prácticos HTML5">
<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5">
</head>
<body>
<table border="1">
<caption>Titulo de la tabla</caption>
<tr>
<th>Col.Cab.1</th>
<th>Col.Cab.2</th>
</tr>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
</tr>
</table>
</body>
</html>
El ejemplo anterior ha de mostrar un resultado al que se muestra a continuación en la imagen.
Tabla HTML con dos filas y columnas
Se ha de observar que para cada una de las filas de la tabla, se utiliza la etiqueta <tr>, y como
contenido de las mismas, se utilizan etiquetas <th> o <td>, dependiendo de que se quiera establecer
celdas de encabezado o normales. Las celdas o casillas de encabezado se visualizan con una fuente
fuerte a diferencia de las normales. Para definir el título de tabla se ha utilizado la etiqueta <caption>
Definición de una tabla con combinación de columnas

67
Uno de los atributos que se pueden aplicar a las etiquetas de celda, independientemente que sean de
encabezado o normales. Es el atributo colspan, el cual permite realizar la combinación de varias
columnas en una sola.
Para especificar el valor del atributo, se ha de indicar el número de columnas sobre las que se quiere
realizar la combinación, utilizando un valor numérico encerrado entre comillas dobles.
El siguiente ejemplo muestra el uso del atributo en una tabla que tiene celdas combinadas aplicada la
combinación sobre las columnas.
<!DOCTYPE HTML>
<html>
<head>
<meta name="generator" content=", Curso práctic HTML5">
</head>
<body>
<table border="1">
<caption>Tabla con combinación de columnas</caption>
<tr>
<th colspan="2">Celda Combinada</th>
<th>Celda Normal</th>
<th colspan="2">Celda Combinada>/th>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td>C5</td>
</tr>
<tr>
<td>C6</td>
<td>C7</td>
<td>C8</td>
<td colspan="2">C9 Comb.</td>
</tr>
</table>
</body>
</html>
El ejemplo anterior ha de mostrar un resultado similar al que se muestra en la imagen siguiente
68
Combinación de columnas en una tabla
Como se puede observar en el ejemplo, se ha realizado la combinación de las columnas 1 y 2, de la

primera fila, y también las columnas 4 y 5 de la misma fila.
También se ha realizado la combinación de las columnas 4 y 5 de la última fila de la tabla.
Definición de una tabla con combinación de filas
Al igual que se puede realizar la combinación de columnas, también se puede realizar la combinación
de filas, mediante el atributo rowspan.
Para especificar el valor del atributo, se ha de indicar el número de filas sobre las que se quiere
realizar la combinación, utilizando un valor numérico encerrado entre comillas dobles.
El siguiente ejemplo muestra el uso del atributo en una tabla que tiene celdas combinadas aplicada la
combinación sobre las filas.
<!DOCTYPE HTML5>
<html>
<head>
<meta name="generator" content=", Curso práctico HTML5">
</head>
<body>
<table border="1">
<caption>Tabla con combinación de filas</caption>
<tr>
<th>Celda 1</th>
<th>Celda 2</th>
<th>Celda 3</th>
</tr>
<tr>
<td rowspan="2">Celda Combinada</td>
<td>Celda 5</td>
<td rowspan="2">Celda Combinada</td>
</tr>
<tr>
69
<td>Celda 7</td>
</tr>
</table>
</body>
</html>
El resultado del ejercicio anterior ha de ser similar al que se muestra en la imagen siguiente.
Combinación de filas en una tabla
Definición de tabla con columnas y filas combinadas
Se puede realizar la aplicación de los dos atributos de combinación de filas y columnas a las celdas de
la tabla, formando así tablas que contienen celdas combinadas.
El siguiente ejemplo muestra el uso de los atributos de combinación aplicados sobre una tabla.
<!DOCTYPE HTML5>
<html>
<head>
<title>Ejercicios prácticos HTML5>/title>
</head>
<body>
<table border="1">
<caption>Tabla con combinación de filas y columnas>/caption>
<tr>
<th>celda 1</th>
<th>celda 2</th>
<th>celda 3</th>
<th>celda 4</th>
</tr>
<tr>
<td rowspan="3">celda 5</td>
70
<td>celda 6</td>
<td colspan="2">celda 7</td>
</tr>
<tr>
<td>celda 8</td>
<td>celda 9</td>
<td rowspan="2">celda 10</td>
</tr>
<tr>
<td colspan="2">celda 11</td>
</tr>
</table>
</body>
</html>
El ejemplo anterior ha de mostrar un resultado similar al que se muestra en la imagen siguiente.
Combinación de columnas y filas en una tabla
Tablas avanzadas
En muchas ocasiones se puede necesitar tablas que tengan una mayor complejidad en su
estructuración, debido a que puedan tener secciones de datos distintas, o se quiera realizar
diferenciación entre los datos de la tabla y las secciones correspondientes a sus encabezados y pies.
Para realizar este tipo de tablas, se pueden utilizar una serie de etiquetas que permiten crear tablas
denominadas avanzadas.
Una de las características de estas tablas es que están compuestas por una sección de cabecera, que se
define mediante la etiqueta <thead>, una sección de pie de tabla, definida mediante la etiqueta
<tfoot>, y por ultimo una o varias secciones de cuerpo de tabla, donde se suele ubicar los datos de la
misma, representada por la etiqueta <tbody>
Las etiquetas de cabecera y pie de tabla siempre se han de definir antes que cualquier etiqueta de
cuerpo de tabla.
Se pueden realizar agrupaciones de columnas para aplicar un formato por separado o en común a las
mismas, para realizar estas agrupaciones se ha de utilizar la etiqueta <colgroup>, especificando a
continuación como su contenido y mediante la etiqueta <col>, las columnas y el ámbito de las mismas
sobre el cual se quiere aplicar el formato.
El siguiente ejemplo muestra el uso de las etiquetas avanzadas.
<!DOCTYPE HTML5>
71
<html>
<head>
</head>
<body>
<table border="1" style=”width: 100%”>
<caption>Titulo de tabla</caption>
<colgroup>
<col style="width: 20%"/>
</colgroup>
<thead>
<tr>
<th rowspan="2">Tabla Avanzada</th>
<th colspan="2">Cabecera Múltiples
Columnas</th>
</tr>
<tr>
<th>Primera Col. Cab.</th>
<th>Segunda Col. Cab.</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Pie de tabla.</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Fila 1</th>
<td>Fila 1 Columna 1</td>
</tr>
<tr>
<th>Fila 2</th>
</tr>
</tbody>
</table>
</body>
</html>
72
thead, tbody y tfoot componentes de una tabla
En primer lugar se han especificado estilos css para varios elementos de la tabla. El primero de ellos
en la propia etiqueta de la tabla, especificando que su ancho ha de ser el 100% del ancho de
visualización del navegador.
Como se puede observar en el ejercicio, se ha definido un grupo de columnas mediante la etiqueta

<colgroup>, y en el interior de la misma se han especificado los anchos de tres columnas mediante la
etiqueta <col>, representando cada etiqueta el orden de la columnas, de esta forma la primera
columna tiene un ancho del 20% y las dos siguientes columnas tienen un ancho del 40% cada una.
A continuación se especifica el encabezado de la tabla mediante la etiqueta <thead>, y seguidamente

el pie de la tabla, mediante la etiqueta <tfoot>, una vez especificados encabezado y pie, se especifica
el cuerpo de la tabla mediante la etiqueta <tbody>, la cual contiene las filas y columnas de datos
Formularios HTML - Ejemplos y estilos con CSS para controles
Un formulario es una zona interactiva de nuestra página web, donde le proporcionamos al usuario
controles y campos para que ingrese o elija datos.
Hace varios años que el W3C y el WHATWG vienen trabajando para mejorar los viejos formularios
web, con la meta de aumentar su usabilidad a partir de un fuerte énfasis en las pantallas táctiles,
simplificar las validaciones de datos y facilitar la creación de nuevos controles interactivos que hasta
ahora requerían de programación, reduciendo de esta manera el uso de scripts. La tendencia a futuro
es que si un control o validación de datos de formulario puede dejar de ser realizado por un script.
Estamos hablando de la validación “previa” a enviar los datos, es decir, aquella realizada en el
navegador, del lado del cliente, que jamás reemplazará a una completa validación del lado del
servidor (con PHP o lenguajes similares), sino que solo tiene como meta mejorar la usabilidad de un
formulario, evitando que se recargue la página entera solamente para avisar que faltó un dato o que no
se respetó el formato esperado.
Es importante que un formulario funcione siempre, en todos los dispositivos, y con cualquier
navegador y versión, sin depender de la activación de JavaScript o de ningún plugin. Por lo tanto, las
73
validaciones, campos obligatorios, mensajes de error funcionalidades de interactividad, han sido
derivadas al navegador.Para lograr esos objetivos, HTML5 agrega una serie de nuevos tipos de input
y un conjunto de nuevos atributos aplicables a elementos de formulario, que iremos conociendo a
continuación.
Para lograr esos objetivos, HTML5 agrega una serie de nuevos tipos de input y un conjunto de nuevos
atributos aplicables a elementos de formulario, que iremos conociendo a continuación.
Estructura básica de un formulario
Repasemos ante todo cuál es la estructura básica de un formulario, en base a un ejemplo simple:
<form action="respuesta.php" method="post">

<fieldset>
<legend>Suscribirse al Boletín</legend>
<p><label for="casilla">Correo electrónico:</label>
<input type="text" name="casilla" id="casilla"></p>
<p><input type="submit" value="Suscribirse"></p>
</fieldset>
</form>
Conceptualmente, un formulario consiste en una zona interactiva de nuestra página web, donde en vez
de mostrarle datos a nuestro usuario, le proporcionamos controles y campos para que sea el mismo
usuario quien ingrese o elija datos, que serán enviados desde su navegador hacia el servidor. Luego,
algún lenguaje de programación del lado del servidor como PHP, se ocupa de hacer algo con esos
datos enviados por el usuario, típicamente los almacena en una base de datos o los envía por correo
electrónico.
Ejemplo básico de un formulario
Si nos adentramos en el código, veremos que una etiqueta <form> debe envolver cada zona de
formulario de una página (de esto se deduce que puede haber más de un formulario por página), y
dentro de esta etiqueta <form>, agruparemos con una etiqueta <fieldset> cada conjunto de campos
relacionados entre sí, siendo habitual agregar un <legend> descriptivo a cada grupo de campos.
<form>
<fieldset>
<legend>Suscribirse al Boletín</legend>
74
</fieldset>
</form>
Luego, cada control estará asociado a una etiqueta <label> que indique qué dato debe ingresarse en el
campo, y en la forma de realizar esta asociación (anteriormente realizada con divs, o elementos de
lista) tenemos la primera novedad de HTML5 relativa a formularios con respecto a versiones
anteriores: el W3C nos pide explícitamente que agrupemos un campo con su respectivo <label>
mediante etiquetas de párrafo, ya que conceptualmente un formulario es un texto, del cual algunas
partes son proporcionadas por el autor del formulario, y otra parte de los contenidos es proporcionada
por el usuario.
Volvamos al ejemplo:
<p>
<label for="casilla">Correo electrónico:</label>
<input type="text" name="casilla" id="casilla">
</p>
Con un párrafo que envuelva tanto al label como al input, solucionamos la estructura del formulario (a
diferencia de lo que hemos venido haciendo, con tablas, o divs, o breaks, o listas de definición, solo
para ordenar cada par label/campo).
Dentro de la apertura de la etiqueta <form>, los principales atributos que podemos aplicar son los
siguientes.
Action
Sin dudas, este es el principal atributo para el funcionamiento de un formulario. Su valor debe ser la
URL de un archivo programado en algún lenguaje de servidor, como PHP, ASP, JSP, etc. para que
ese archivo reciba las variables enviadas desde el formulario (una por cada control de formulario), y
pueda hacer algo con esos datos (típicamente, insertarlos en una base de datos en el servidor, o
enviarlos por email al administrador del sitio).
El valor del atributo action también determina a qué página seremos llevados una vez pulsado el
botón de “enviar”. Éste, entonces, es similar a un enlace.
Ejemplo:
<form action="respuesta.php">
Esa página “respuesta.php” es la que deberá contener la programación de servidor necesaria, y a la

vez es la página que se cargará luego de pulsar el botón de “Enviar” el formulario.
Method
Por otro lado, el atributo method especifica cuál de las cabeceras o headers del protocolo HTTP se
utilizarán para enviar los datos ingresados por el usuario hacia el servidor. Los posibles valores del
atributo method son 4: post, get, put y delete. Típicamente se utiliza post, lo cual hace que en la URL
no se observen las variables enviadas, como sí sucede con get.
Ejemplo:
75
<form action="respuesta.php" method="post">
Autocomplete
Este atributo tiene un valor por defecto de true (verdadero), lo que significa que el navegador
memorizará los datos que vayamos ingresando en un campo, y cuando regresemos a esa misma
página a completar el mismo campo del mismo formulario, el navegador nos mostrará los valores ya
ingresados previamente, permitiéndonos elegirlo de una lista desplegada por debajo del campo,
ahorrándonos el tipeo.
Pero si por cuestiones de privacidad o seguridad (como en el caso de usuarios de computadoras

compartidas que verán los datos ingresados por otro usuario en el mismo sitio al que entraron ellos)
quisiéramos desactivar esa funcionalidad en todos los campos de un formulario a la vez, basta con
colocar dentro de la etiqueta <form> el atributo: autocomplete=”off”. Eso impide que el navegador
memorice lo ingresado en todos sus inputs:
<form action="respuesta.php" method="post" autocomplete="off">
Novalidate
En HTML5 existe un solo atributo verdaderamente nuevo a nivel de la etiqueta <form>, que se llama
novalidate. Al colocarlo (es booleano, es decir, simplemente puede estar o no estar, no tiene valores
que debamos declararle), se desactiva la validación automática de todos los campos de ese formulario.
Más adelante veremos en cuáles casos nos puede llegar a ser útil desactivar esta validación que realiza
el navegador por su cuenta, para, por ejemplo, programar nuestra propia validación con JavaScript
Ejemplo:
<form action="respuesta.php" method="post" novalidate>
Hecho este repaso básico a nivel de las variantes posibles dentro de la etiqueta <form>, veremos a
continuación cuáles son los atributos nuevos de cada control de formulario, que nos permitirán reducir
la cantidad de código (JavaScript) necesario para contar con funcionalidades típicas de un formulario,
así como para validar los datos ingresados.
Funcionalidad sin JavaScript
Uno de los principales objetivos de las novedades relacionadas con los formularios en HTML5 es
reducir el uso de JavaScript para muchas de las tareas típicas de cualquier formulario: mostrar un
texto dentro de un campo (y que desaparezca al hacer foco en él), hacer foco automáticamente en el
primer campo de un formulario, validar que el contenido de un campo se ajuste a las reglas definidas
al crear el campo (que sea del tipo de dato esperado, si es obligatorio el completarlo, que esté dentro
del rango de valores permitidos, etc.)
Veamos con qué facilidad se realiza esto, gracias a los nuevos atributos con que contamos en
HTML5.
Texto por defecto (placeholder)
La funcionalidad de mostrar un texto por defecto dentro de un campo se llama placeholder. A

diferencia del atributo value, no es enviada hacia el servidor como valor del campo, lo cual facilita la
validación con un lenguaje de servidor como PHP, ya que evita agregar un condicional que incluya el
76
texto del value. El placeholder soluciona este problema, ya que su texto no reemplaza al value, y si el
usuario no ingresa un valor en el campo, el value permanece vacío, simplificando la programación.
La forma de implementar un texto de placeholder es muy sencilla:
<input type="text" placeholder="Escriba su nombre">
Dentro del campo aparecerá el texto definido:
Mensaje placeholder dentro del input
Al hacer foco en el campo (haciendo click con el mouse o llegando con el tabulador), desaparecerá
ese texto, y si escribimos algo ya no volverá a aparecer; pero si borramos lo escrito, dejando vacío el
campo, nuevamente se visualizará el texto del placeholder, para volver a advertirle al usuario acerca
de la tarea que quedó pendiente.
También puede aplicarse a un textarea, no solo a un input, como vemos en la siguiente imagen:
Mensaje placeholder dentro de un textarea
Autofocus (foco automático)
Otra funcionalidad típica en los formularios es la del atributo autofocus, que posiciona el cursor
automáticamente en el primer campo a completar, ayudando al usuario a ubicarse en su primera tarea
dentro del formulario. Por supuesto, podemos aplicar este atributo a un solo campo por formulario (ya
que no puede haber dos cursores haciendo foco simultáneamente). Y si por descuido lo aplicáramos a
dos o más controles dentro de un mismo formulario, solo quedará activo el último de los campos, ya
que el navegador lee secuencialmente nuesro código fuente.
<input type="text" autofocus />
Cursor dentro de input con autofocus
Veremos que el cursor queda parpadeando, a la espera de que utilicemos ese campo.
Autocomplete (autocompletado)
Como ya mencionamos al hablar de la etiqueta <form>, podemos desactivar el autocompletado, y

podemos hacerlo en un solo campo y no en todos los campos del formulario a la vez, simplemente
incluyendo este atributo en el input que deseemos que no memorice sus valores a lo largo del tiempo:
77
<input type="text" autocomplete="off" />
De esta manera, no aparecerá nunca la lista desplegable de valores cargados previamente en ese
campo así definido.
Required (requerido)
Si queremos que en un campo sea obligatorio ingresar algún valor (y en caso contrario, no permitir el
envío del formulario), debemos usar el atributo required:
<input type="text" required />
Aquí veremos por primera vez los efectos de la validación automática realizada por el navegador: si
pulsamos el botón de “Enviar” del formulario dejando vacío un campo marcado como requerido, se
impedirá el envío del formulario y aparecerán carteles avisando que el campo es obligatorio.
Cada navegador mostrará el texto de esos carteles en el idioma de ese navegador, y con ciertos efectos
decorativos propios.
Veamos algunas diferencias entre navegadores:
Required campo obligatorio
Como vemos, cada navegador muestra textos diferentes y diseñados de distinta manera: la idea de
fondo es que las personas se acostumbren a los textos y diseño que “su” navegador habitual les
muestra, derivando a éste la funcionalidad de validación, uniformizando así en todos los sitios que un
usuario visita los mensajes de validación.
Como podemos deducir, los carteles y textos que cada navegador agrega, no pueden modificarse,
salvo que desactivemos la validación en el formulario completo. Esto es así ya que el objetivo es que
la experiencia de uso de un formulario sea universal, única para una persona acostumbrada a un
navegador que le mostrará siempre los mismos mensajes y en el mismo formato.
Validaciones con expresiones regulares y patrones
En algunos campos de formulario nos resultará necesario especificar un patrón (o "pattern") que el
dato ingresado por el usuario deberá respetar para ser considerado un dato válido. Por ejemplo, que el
nombre de usuario tenga al menos 5 caracteres, y que sean letras de la “a” hasta la "z". Típicamente se
utilizan expresiones regulares para esto, y el atributo pattern precisamente nos permite asignar una
expresión regular como condición para la validez del dato ingresado en un campo.
Veamos un ejemplo sencillo:
<label> Nro. de Tarjeta de Crédito:</label>

<input type="text" pattern="[0-9]{13,16}" />
78
Desde ya que la sintaxis de las expresiones regulares es un tema técnico de los especialistas en
sistemas, y excede lo que podamos explicar aquí, por lo que simplemente diremos que este ejemplo
permite que se ingresen en el campo solamente dígitos del 0 al 9 y en una cantidad de entre 13 y 16
dígitos inclusive. De lo contrario, obtendremos un mensaje de error como el siguiente:
Formato de campo para expresiones regulares
Nuevos elementos de interfaz
Hasta aquí, todos los atributos que hemos aprendido nos ayudan en la validación, pero no generan
nuevos elementos de formulario. Sin embargo, otro de los objetivos mayores detrás de los formularios
HTML5 es el de poder generar interfaces de interacción complejas (por ejemplo: selectores de
calendario para fechas, horas, rangos de valores, colores, etc.) sin la necesidad de utilizar librerías
JavaScript para ello. Y todo esto se enfoca en facilitar la carga de datos en el caso de usuarios de
pantallas táctiles (móviles, tabletas, etc.), donde es más fácil “arrastrar” o "elegir" en lugar de escribir.
Complementariamente, además de generar nuevos elementos de interfaz, el uso de los nuevos tipos de
campos está asociado al tipo de dato que recopilará, ocupándose el propio navegador a partir de ese
instante de realizar la validación necesaria (tal como vimos anteriormente con los atributos required o
pattern).
HTML5 agrega numerosos tipos nuevos de input específicos para tipos de datos particulares: es decir,
no son etiquetas nuevas, sino que reutilizamos la misma vieja etiqueta input, pero agregándole
nuevos“tipos” (nuevos valores del atributo type).
Estos nuevos tipos de input son los siguientes:
 Search (búsquedas)
 Tel (teléfonos)
 url (direcciones web)
 Email (correos electrónicos)
 Number (numéricos)
 Range (indica rangos)
 Date (fechas)
 Month (mes)
 Week (semana del año)
 Time (horario)
 Datetime (fecha y hora)
 Color (colores)
Veamos seguidamente cuáles son la sintaxis, los usos y las compatibilidades de cada uno de ellos.
Search (búsquedas)
Este tipo de input es el indicado para un formulario donde el usuario escribirá un texto que se enviará
hacia un buscador (interno o externo a nuestro sitio).
79
La sintaxis es:
<input type="search" />
Su visualización es la siguiente:
Input tipo búsqueda
Entre las funcionalidades que incorpora este tipo de campo podemos mencionar que agrega dentro del
campo un botón en forma de “x” para “limpiar” el contenido del campo; y que no permite saltos de
línea. Si pegamos en el campo un texto de varios párrafos, solo tomará la palabra o frase previa al
primer salto de línea, ya que supone que un buscador se utiliza para buscar una palabra o frase, no
más.
En Safari, el campo de tipo search cuenta con la posibilidad de definirle un atributo exclusivo de ese
navegador llamado “results”, que permite indicar cuántos resultados de las últimas búsquedas
realizadas se almacenarán y mostrarán al pulsar la flecha:
Búsquedas recientes input search Safari
Para lograr esto, el código necesario sería:
<input type="search" results="5" />
En el caso de que un navegador antiguo no conozca este tipo de input, degradará en un input de tipo
“text”, por lo que no afectará en nada la posibilidad de ingresar un texto dentro del campo de
búsqueda. Por lo tanto, podemos utilizarlo sin riesgos ya mismo en nuestros sitios.
Tel (teléfonos)
Se debe utilizar este tipo de input para campos donde solicitamos que el usuario escriba su teléfono
(fijo o móvil).
La sintaxis es:
<input type="tel" />
Se visualiza igual que un input de texto, pero su uso permite que en un móvil aparezca el teclado
numérico, facilitando el ingreso del número, tal como se aprecia en el siguiente teclado de iPhone:
80
input type tel
Con respecto a la validación, es imposible unificar un criterio internacional que permita realizar una
validación de un número telefónico (la cantidad de caracteres, los separadores –guiones, espacios,
corchetes, paréntesis– varían de país en país, por lo que creemos que nunca será posible validar la
sintaxis de un teléfono de manera automática).
En el caso de que el navegador no lo soporte, degrada en un input de texto, por lo que no existen
problemas para usarlo, se podrá insertar el teléfono en cualquier circunstancia.
Además de la semántica que agrega y de la ventaja de vincularse al teclado numérico en celulares,

tiene la ventaja de permitir desde la hoja de estilos seleccionar todos los inputs que sean de este tipo,
mediante selectores de valor de atributo, con los que podríamos decorar (típicamente, con un icono en
forma de teléfono) este tipo de campo, sin necesidad de agregarle ni identificadores ni clases, solo por
haber sido correctamente marcado con su tipo.
Por ejemplo:
input[type=tel]{
background:url(telefono.jpg) no-repeat center right;
}
URL (direcciones Web)
Cuando necesitemos solicitar a nuestros usuarios el ingreso de una URL, podemos colocarle este valor
de type al input:
<input type="url" />
De esta manera, el navegador validará que se ingrese una URL absoluta, es decir, que comience con
un protocolo (típicamente, http://) aunque se acepta cualquier carácter delante de los dos puntos y la
doble barra, lo que la vuelve compatible hacia el futuro con nuevos protocolos que puedan surgir.
En caso de error, nos mostrará un mensaje:
Input type url
Una ventaja de utilizar este tipo de input es que los usuarios de muchos dispositivos móviles cuentan
con un tipo de teclado especial para URLs, que incluye punto, barra y un botón que escribe “.com” al
ser pulsado, agilizando la carga de la dirección:
81
Teclado para url visible en dispositivos
En caso de no ser soportado por el navegador, degrada en un input de texto, por lo que también se
podrá ingresar la URL sin problemas.
Email (casilla de correo)
Este tipo de input verifica que la casilla ingresada sea válida (utiliza un estándar internacional para
verificar la validez: RFC 5322) pero a pesar de eso, no garantiza la calidad de la validación (puede ser
mejor utilizar un pattern, algo que veremos más adelante).
Su uso es simple:
<input type="email" />
Su resultado:
Input type email
Esta vez, el teclado de un iPhone y similares mostrará el carácter arroba para facilitar el ingreso de
una casilla de email:
Teclado para correos visible en dispositivos
Una variante de este tipo de input es que podemos especificarle el atributo multiple, de esta manera:
82
<input type="email" multiple />
En este caso, aceptará el ingreso de varias casillas separadas por comas y validará que cada una de
ellas siga una sintaxis correcta. Con esta variante, el mensaje mostrado será similar al siguiente:
Input type email
Al igual que todos los tipos anteriores de input que ya hemos visto, degrada en un input de texto en el
caso de no ser soportado, por lo que su uso no nos generará ningún problema.
Number (números)
Este tipo de input es muy útil para permitir el rápido ingreso o la selección de números, gracias al
agregado junto al campo de un par de flechas (ascendente y descendente) que facilitan el rápido
ingreso de datos numéricos, sobre todo en el caso de la pantalla táctil de un móvil o tableta. Además,
se le puede definir un rango de valores, con su mínimo y su máximo permitido.
Su visualización es:
Input type number
Y su sintaxis:
<input type="number" min="0" max="100" step="10" value="50" />
Min es el valor mínimo que será permitido ingresar, max es el valor más alto permitido y step es no
solamente el salto que dará al pulsar las flechas, sino que también es el límite a los valores permitidos
(si step es 10, solo permitirá ingresar múltiplos de 10, por eso el valor por omisión de step es 1).
Desde ya que value es el valor que se mostrará seleccionado de entrada, tal como en cualquier otro
input.
No solo permite ingresar dígitos del 0 al 9, sino también punto de separación decimal, signo negativo
al inicio y un exponente, como por ejemplo: -12345.678e+90
Degrada en un input de texto en el caso de no ser soportado, por lo que no hay inconvenientes en
utilizarlo.
Tiene gran utilidad al facilitar el ingreso de números en móviles táctiles, permitiendo elegir el número
con un par de toques en vez de tener que escribirlo con el teclado, o en caso de que el celular lo
incluya, mostrando solamente el teclado numérico en pantalla.
83
Teclado de dispositivo para input type number
Range (slider para deslizar y elegir rangos)
Es similar a number, pero debemos usarlo cuando no es tan importante la precisión del número
ingresado, sino que nos interesa aumentar la usabilidad (la facilidad de arrastrar con el dedo en una
pantalla táctil).
Se visualiza del siguiente modo:
Input type range
Y su sintaxis es:
<input type="range" min="0" max="100" step="10" value="50" />
Lo que envía hacia el servidor como valor es un número, proporcional al rango avanzado con la
perilla del selector dentro del recorrido total definido entre el min y el max. Por ejemplo, en el caso de
la imagen anterior, estará enviando un 80 como valor elegido.
Degrada en un input de texto, pero lo ideal es garantizar su compatibilizador con algún script de los
que mencionaremos más adelante. Resulta ideal para el caso de aplicaciones web donde podemos
hacerlo funcionar a la manera de un control deslizable que genere valores mediante programación.
Date (calendario para elegir una fecha)
Este tipo de input se encarga de mostrar un calendario completo, con solo especificar:
<input type="date" />
El resultado visual será:
84
Resultado del input type date
Puede llevar los atributos min y max para definir un rango permitido de fechas a elegir y no permitirá
ingresar fechas fuera de ese rango.
 Un problema para usuarios de países que no siguen el formato norteamericano de fechas, es

que el formato del texto que queda escrito en el input en algunas versiones del navegador
Opera es 2018-09-21 (año, mes y día, en ese orden), lo cual puede dar lugar a errores y
confusiones por parte de los usuarios con menor experiencia. Mientras que en Chrome y
Firefox, el formato es el que estamos acostumbrados a utilizar (día, mes, año).
El formato que envía al servidor como valor de este campo es ese mismo que acabamos de mostrar
(2018-09-21, año, guión, mes, guión, y día). Luego deberemos utilizar PHP o algún otro lenguaje de
servidor para descomponer en partes esa cadena de caracteres y poder utilizarla en formatos más
legibles para nosotros. Será necesario que el programador considere que el formato recibido puede
variar entre un navegador y otro.
En el caso de que el navegador no lo soporte, degrada en un campo de texto generando un problema

para el usuario, ya que no sabrá en qué formato debería ingresar la fecha, por lo cual es ineludible
utilizar algún script compatibilizador como los que ya veremos más adelante en este capítulo.
 Al momento de escribir este libro, Opera, Firefox y Chrome son los únicos navegadores que
soportan este tipo de control (el resto de controles de fecha y hora, y de selección de colores,
solo funcionan en Opera), por lo que no recomendamos su utilización sin agregar un script
compatibilizador. Una gran ventaja de la implementación de Firefox y Chrome, es que el
orden de los datos al detectar la localización del navegador es cambiado a Día/Mes/Año, para
mejor comprensión en el mundo hispanoamericano.
Month (mes)
Es similar al anterior, pero al pulsar sobre alguno de los días del mes elegido, selecciona el mes
completo (veremos todos los días del mes grisados, como en la siguiente captura de pantalla).
Resultado del input type month
85
Esto se genera con el código:
<input type="month" />
El formato del texto que envía al servidor (y que muestra una vez seleccionada la fecha) es 2018-09
(año, guión, mes). Otra vez, el orden no es familiar para nuestra cultura.
Soporta los mismos atributos min y max que el resto de elementos de fecha y hora.
Podría ser útil para ingresar por ejemplo, el mes de vencimiento de una tarjeta de crédito.
Week (semana del año)
Seguramente el menos usado de todos los campos relativos a fechas, permite elegir una semana del
año por su número de orden:
<input type="week" />
Su resultado es:
Resultado del input type week
Selecciona un renglón entero (una semana) y posee una

columna extra al principio, que indica el número de semana
dentro de las semanas del año. Envía al servidor (y muestra
una vez elegida la semana), un texto con el formato:
2011-W33 (año, guión, una “W” y el número de semana)
Time (hora)
Se utiliza para indicar una hora. Su sintaxis es:
<input type="time" min="11:30" max="23:30" step="600" />
Y su apariencia es:
Resultado del input type time
Lleva los mismos atributos que date. El valor del step está indicado en segundos (y define de a cuánto
saltará al pulsar las flechitas, además de limitar los minutos permitidos a los que sean múltiplo del
step especificado).
El formato que muestra y envía al servidor esta vez sí sirve en nuestra cultura.
Datetime (fecha y hora)
86
Permite seleccionar a la vez una fecha y un horario.
Resultado del input type datetime
El formato con que enviará los datos está especificado en formato UTC:
 2012-09-21T10:55:59.001-03:00
Degrada en un campo de texto al igual que date, siendo igualmente poco recomendable su uso
actualmente, salvo que dependamos de un compatibilizador.
Selector de colores
Si en una aplicación web deseamos dar a elegir un color, podemos utilizar este tipo de control.
>input type="color" /<
Por ahora, solamente es soportado por algunos navegadores, pero su versión 11 en adelante, y por
Chrome en su versión 21 y superiores, pero pueden utilizarse scripts compatibilizadores.
Resultado del input type color
En principio, Opera muestra una lista con unos pocos colores básicos, pero si pulsamos en “Other”
abre un selector de colores desde donde podemos agregar nuevos colores a la paleta. En el caso de
Chrome, directamente abre el selector de colores al pulsar el control. Lo que enviará como valor del
input es el código hexadecimal del color elegido.
Datalist
87
Este nuevo elemento HTML se utiliza en combinación con un input de texto (o similar, de tipo URL,
email, etc.), donde se espera que el usuario escriba. Funciona a la manera de un auto-suggest, es decir:
a medida que el usuario escribe una letra y se encuentran coincidencias entre lo ingresado por el
usuario y algunos de los valores previstos, los muestra desplegados debajo del campo, para que
podamos seleccionarlos con el mouse, o con el dedo en una pantalla táctil.
Resultado del input type datalist
Su uso principal es facilitar la carga de valores “mayoritarios”, es decir, que un 80 o 90 por ciento de
los usuarios seguramente elegirá, pero permitiendo escribir valores no previstos. Por ejemplo, si
consideramos las opciones incluidas en “bebida para el desayuno”, seguramente muchos optarán por
café, otros elegirán té, y así con unas 6 o 7 opciones comunes, mientras que algunos pocos ingresarán
alguna otra bebida no incluida en la lista.
Para esos casos, esta etiqueta reemplazaría a un select con options, que a su vez tuviera al lado un
campo de texto extra con la opción de ingresar “Otros” datos no contemplados en la lista del Select.
Es decir, el usuario no está obligado a elegir una de las opciones previstas, solo sirven de ayuda para
facilitar la carga en la mayoría de los casos, pero se le permite escribir algo diferente a lo previsto, y
el campo lo aceptará.
Primero creamos el campo de texto:
<input type="url" name="diario" list="sugerencias" />
Y luego armamos la lista de options dentro de una etiqueta datalist (si son pocas opciones podemos
escribirlas a mano, aunque típicamente estos valores pueden provenir de una consulta a una base de
datos realizada con un lenguaje como PHP):
<datalist id="sugerencias">
<option label="La Nación" value="http://www.lanacion.com.ar"></option>
<option label="Clarín" value="http://www.clarin.com"></option>
<option label="Página 12" value="http://www.pagina12.com.ar"></option>
<option label="Infobae" value="http://www.infobae.com"></option>
</datalist>
A esa etiqueta datalist es fundamental que le coloquemos un id (identificador) ya que es el que

debemos especificar en el campo de texto anterior dentro de su atributo “list”, para vincular a ese
campo con esta lista.
Como vemos, la estructura de cada option no es igual a la de los option de un select: en un select, cada
option envuelve el valor visible y puede llevar un value que es el dato que se enviará al servidor como
valor de esa opción elegida. En cambio, en los option de un datalist no se envuelve ningún valor, sino
que se especifican dos atributos: label y value. Dentro de los label es donde se buscará la coincidencia
a medida que el usuario escriba, pero lo que diga en el value es lo que se enviará.
88
También podemos hacer que ambos atributos (label y value) sean iguales, con lo que podríamos
vincularlo a un simple input de tipo text para facilitar la carga de las opciones elegidas:
<datalist id="sugerencias">
<option label="La Nación" value="La Nación"></option>
<option label="Clarín" value="Clarín"></option>
<option label="Página 12" value="Página 12"></option>
<option label="Infobae" value="Infobae"></option>
</datalist>
Por el momento, solo Firefox implementa de manera correcta los datalist nativamente; en el resto de
casos, utilizaremos algún compatibilizador.
CSS para formularios
Si bien estamos aún en la etapa del libro relativa al marcado HTML, existen algunas novedades en
CSS3 relacionadas con los formularios, por lo que creemos pertinente incluirlas en este momento. Se
trata de algunas de las nuevas pseudo-clases de CSS3 que facilitan la decoración de estados de
campos de formulario, o estados de validez de sus datos.
Podemos detectar si el dato ingresado es válido (o no) y decorar el campo en consecuencia (con un
color, borde, imagen de fondo, etc.) con las siguientes pseudo-clases:
-Focus: se aplica durante el tiempo en que a ese input le están haciendo foco:
input:focus {
background-color:gray;
}
-Invalid: se aplica mientras el contenido del campo no cumple con las reglas de validación definidas
en un pattern, o si no es un email válido:
input:invalid {
color:red;
}
-Valid: se aplica lo definido mientras el contenido sea válido según las reglas aplicadas, de forma
inversa al caso anterior.
input:valid {
color:green;
}
-Required: se aplica si el campo en cuestión posee el atributo “required”:
input:required {
border: 3px solid #F00;
}
-Optional: por el contrario, podemos seleccionar todos los campos que no tengan aplicado el atributo
“required” mediante la pseudo-clase “optional”:
89
input:optional {
border: 3px solid #999;
}
Tengamos en cuenta que en los campos de tipo “search”, ni Chrome ni Safari permiten que
modifiquemos los bordes al aplicar “optional” (aunque sí permiten modificar el color de los textos).
-In-range: cuando necesitemos apuntar hacia un campo numérico o de fechas, mientras su valor esté
dentro del rango definido por los atributos “min” y “max”, podemos utilizar in-range:
input:in-range {
color: gray;
}
-Out-of-range: por el contrario, para apuntar cuando el valor está fuera del rango definido,
utilizaremos out-of-range:
input:out-of-range {
color: red;
}
-Read-only: para apuntar a controles que tengan definido el atributo “readonly” (solo lectura, similar
al antiguo “disabled”, pero con la diferencia de que sí enviarán su contenido hacia el servidor al
despachar el formulario):
input:read-only {
border: 3px solid #F00;
}
-Read-write: complementario al anterior, para apuntar a los campos que no posean el atributo
“readonly” definido:
input:read-write {
border: 1px solid #000;
}
También podemos combinar dos o más de estas pseudo-clases, para crear condiciones o “estados”
más complejos. Por ejemplo:
input:focus:required:invalid {
background-color: #f00;
}
Eso solo se aplicará a un input que esté recibiendo el foco (por haber sido clickeado o haber llegado a
él con el tabulador), que sea un campo requerido y que a su vez, el contenido ingresado hasta el
momento no sea válido.
iframe HTML - Cómo mostrar una página externa dentro de HTML
frame, iframe o también conocido como marco, sirve para insertar un video de Youtube y elementos
multimedia dentro de la página Web actual.
90
Potente, pero fácil de usar mal
En los viejos tiempos del diseño de sitios web, había muchos elementos <frame> dando vueltas,
arruinando el día de todos.
Casi siempre fueron un mal enfoque del diseño. Afortunadamente, el elemento <frame> ha quedado
en desuso en HTML5, pero el <iframe> o "marco en línea" todavía está disponible. ¿Debería haber
quedado en desuso también? ¿Es mejor simplemente evitarlo?
Hay algunos usos válidos para este elemento, pero realmente necesitas entender qué es y cómo
funciona para evitar algunos de los escollos que eran tan comunes en los tiempos oscuros de la Web.
iframe HTML - Cómo mostrar una página externa dentro de HTML
Agregar Mapas de Google, video de YouTube, audios, recorridos virtuales, etc.

frame, iframe o también conocido como marco, sirve para insertar un video de Youtube y elementos
multimedia dentro de la página Web actual.
Similitudes y diferencias entre <iframe> y <frame>
Ambos elementos representan un documento HTML independiente. El contenido del documento se

referencia en el atributo src de cada elemento, por lo que en realidad es un recurso totalmente
independiente al que se hace referencia desde el documento actual.
<iframe src="https://ejemplo.com"></iframe>
<iframe>
<!DOCTYPE html>
<html>
<head> . . . </head>
<body> . . . </body>
</html>
</iframe>
La principal diferencia entre <iframe> y <frame> es que <iframe> implementa esto de una manera
que tiene sentido, que respeta lo que es un documento HTML en primer lugar. El contenido del
<iframe> se muestra dentro de un elemento que es claramente una parte del documento actual.
Por ejemplo, considere este video incrustado de YouTube:
<iframe width="560" height="315" src="https://www.youtube.com/embed/M2kSJbLbIgQ"

frameborder="0" allowfullscreen></iframe>
El video está claramente en la página, no en un panel separado en otro lugar.

91
El elemento <frame> rompió este paradigma y permitió que el documento ejerciera el control sobre la
ventana del navegador, dividiéndolo en varios paneles más pequeños (marcos), cada uno de los cuales
mostraba un documento diferente. (Fue terrible.) Todas las otras diferencias entre <frame> y
<iframes> provienen de esta diferencia básica.
No vuelva a crear diseños basados en marcos con iframe
Es posible que tenga la tarea de actualizar o rediseñar un sitio web antiguo que se construyó con
marcos. Y luego puede sentirse tentado a utilizar <iframes> y un diseño de ancho fijo para recrear la
misma pesadilla de los paneles y subventanas independientes.
Luego descubrirá que no puede usar el atributo de destino para abrir un enlace en un marco en
particular. Eso debería detenerlo, pero luego puede comenzar a buscar soluciones de JavaScript y
despues reconstruir algo terrible. Por favor no hagas esto.
Usos buenos (y terribles) para <iframe>
Hay algunos usos legítimos para <iframe>, y la imitación de patrones de diseño terribles de la década
de 1990 no es uno de ellos. Aquí hay algunos:</iframe>
 Incrustación de medios de terceros

 Incrustar sus propios medios de una manera independiente del documento
 Incrustar ejemplos de código (lo hacemos en este sitio)
 Incrustando "applets" de terceros como formas de pago
Y aquí hay algunos usos terribles para <iframe>
 Galería de fotos
 Foro o chat
Básicamente, si necesita incrustar un documento HTML ya existente e independiente en el documento

actual, use un <iframe>. Si está construyendo todo desde cero, casi no hay una buena razón para
dividir el diseño de una página en varios documentos independientes, especialmente si en realidad no
son piezas independientes de contenido.
Versiones de navegadores complatibles con iframe
Atributos para el iframe
Nombre del
Notas
atributo
sanbox Coloca un conjunto de restricciones de seguridad y usabilidad en el iframe.
scrolling Se usaba para alternar el desplazamiento en iframes. En desuso en HTML5. Utilice

CSS en su lugar.
92
Nombre del
Notas
atributo
name Especifica el nombre de un iframe.
Se utilizó para establecer la alineación de un marco con respecto a los elementos

align
circundantes. Actualmente obsoleto. Utilice CSS en su lugar.
Se utilizó para alternar la visualización de un borde alrededor de un iframe. En

frameborder
desuso en HTML5. Utilice CSS en su lugar.
Se utilizó para especificar la URL que contiene una descripción larga de un iframe.
longdesc
En desuso en HTML5. Utilice CSS en su lugar.
Se utilizó para controlar el ancho de los márgenes alrededor de un iframe. En desuso

marginwidth
en HTML5. Utilice CSS en su lugar.
src Especifica la URL de un documento para mostrar en un iframe.
Se utilizó para controlar el espaciado vertical alrededor de un iframe. En desuso en

vspace
HTML5. Utilice CSS en su lugar.
width Especifica el ancho de un iframe.
Audio y video para una página Web de Internet
Para insertar sonido y video en un sitio Web se usan los tags audio, video y embed. HTML5 brinda la
opción reproducir contenidos sin complementos.
El sonido y el video tienen un papel cada vez más importante en el

diseño de sitios, ya que pueden ofrecer servicios deseados por los
usuarios como poder descargar una muestra de un número musical o
del último video de moda.
Antes de instalar este tipo de archivos recuerde que los formatos sin
comprimir pueden ser muy grandes y nada recomendados para
descargarse desde la Web.
Existen formatos de archivos para la Web con algoritmo de compresión complejos que mejoran en
gran medida esta cuestión.
Incluso estos formatos permiten iniciar la reproducción descargando sólo parte del archivo mientras se
muestra el contenido al usuario, y continuar con la reproducción en un segundo plano.
Se recomienda no reproducir los archivos de audio y video automáticamente cuando un usuario visita
un sitio Web.
Opte por hacer esta reproducción manual y pase el control al usuario.
NOTA:
Los contenidos de audio y video se deben comprimir siempre para incorporarlos al sitio.
93
El formato de audio más utilizado es el MP3 (MPEG Layer 3), aunque también son comunes MIDI
(Musical Instrument Digital Interface) y WAV (Windows Waveform).
Entre los programas de edición de audio encontrará Sony Sound Forge a nivel profesional y Sony
Sound Forge Audio Studio para usuario del nivel básico. Audacity es un programa de edición de
audio de código abierto, potente y multiplataforma, además de gratuito.
Los formatos de video más utilizado son AVI (Audio Video Interleaved), MPEG (Motion Picture
Experts Group), MOV (Películas QuickTime) y RealOne Player.
Apple QuickTime permite editar y exportar audio, aunque para proyectos más complejos los usuarios
de Macintosh utilizan Apple Final Cut Pro.
Es cada vez más popular Adobe After Effects para crear gráficos de películas y efectos especiales.
Cómo insertar audio y video en una página Web
Tag audio
La etiqueta <audio>, es una de las nuevas etiquetas del lenguaje HTML5, que permite reproducir un
archivo de audio
Actualmente se pueden reproducir tres tipos de formato de audio, mp3, wav y ogg. Aunque también
depende del navegador que se permita su reproducción.
La siguiente lista muestra los formatos y su reproducción en los diferentes navegadores
Navegador MP3 Wav Ogg
Internet Explorer SI NO NO
Chrome SI SI SI
Firefox SI SI SI
Safari SI SI NO
Opera NO SI SI
La sintaxis de la etiqueta es la siguiente.
<audio autoplay controls loop muted preload="valor" src="valor">

Texto para navegadores que no soportan audio…
</audio>
Entre los atributos de la etiqueta encontramos los siguientes.
src
El atributo permite especificar la dirección URL del recurso al cual se quiere acceder, siendo en este
caso el archivo que contiene el audio a cargar en el documento web.
94
Se ha de especificar el archivo de audio con el formato adecuado para el navegador donde se vaya a
reproducir el audio.
Como esta opción no es predecible por el desarrollador y depende del usuario final. Se recomienda
utilizar la etiqueta <source>, dentro de la etiqueta de audio, para especificar diferentes formatos, de
forma que el navegador utilizado cargue la primera que sea capaz de reconocer.
autoplay
El atributo permite especificar que el archivo de audio sea reproducido automáticamente, al ser el
archivo cargado por el navegador.
Es un atributo booleano, por tanto para que se ejecute el audio simplemente se ha de especificar el
atributo en la etiqueta.
controls
El atributo es booleano, por lo que al ser especificado en la etiqueta, permite que se visualicen los
controles de control de audio, entre los que se encuentran, el botón de reproducción, pausa, búsqueda
y volumen.
loop
Si se especifica el atributo, el archivo de audio es reproducido automáticamente en modo bucle,

cuando finalice el audio volverá a empezar de nuevo.
muted
Al especificar el atributo, el archivo de audio será cargado, pero se activara la opción de silenciar el
audio.
preload
El atributo tiene tres valores posibles valores: none, auto y metadata. El atributo permite definir si se
realiza una precarga inicial del archivo de audio.
Si se especifica el valor none, no se realiza ningún tipo de precarga y se espera que el usuario sea el
que active el audio pulsando sobre el control correspondiente.
Si se indica el valor auto, se realiza la precarga completa del archivo de audio, para que la
reproducción sea más homogénea y no se produzcan paros o saltos en la misma. Se ha de utilizar si no
se compromete la velocidad de descarga entre el cliente y servidor.
Por ultimo si se especifica el valor metadata, se realiza como precarga solo la información
concerniente al archivo de audio, como duración, dimensión, etc.
Se ha de tener en cuenta que para realizar una carga correcta del formato de audio, se habría de
utilizar la etiqueta <source>, la cual permite realizar la carga del archivo de audio en varios formatos.
Esta última etiqueta dispone a su vez de dos atributos los cuales se habrían de especificar, cuando se
utilice la misma.
Estos atributos son src, el cual permite especificar la ruta, bien absoluta o relativa al archivo de audio.
Y otro atributo denominado type, el cual se utiliza para indicar el tipo MIME (Multipurpose Internet
95
Mail Extensions) del archivo que se quiere reproducir. Entre los posibles tipos a utilizar por este
último atributo se encuentran los siguientes:
Valor MIME Audio/Video
video/ogg Video
video/mp4 Video
video/webm Video
audio/ogg Audio (*.ogg)
audio/mpeg Audio (*.mp3)
El siguiente ejercicio muestra el uso de la etiqueta en un documento web.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<audio controls>
<source src="Hoy.mp3" type="audio/mpeg">
<source src="Hoy.ogg" type="audio/ogg">
El Navegador NO SOPORTA AUDIO.
</audio>
</body>
</html>
El resultado del ejercicio anterior ha de ser similar al que se muestra a continuación en la imagen.
Audio insertado en página Web
Tag video
La etiqueta <video>, es una de las nuevas etiquetas del lenguaje HTML5, que permite reproducir un
archivo de video.
Actualmente se pueden reproducir tres tipos de formato de video, mp4, WebM y ogg. Aunque
también depende del navegador que se permita su reproducción.
La siguiente lista muestra los formatos y su reproducción en los diferentes navegadores.
96
Navegador MP4 WebM Ogg
Internet Explorer SI NO NO
Chrome SI SI SI
Firefox SI SI SI
Safari SI NO NO
Opera NO SI SI
<video autoplay controls loop muted preload="valor" src="valor" poster="valor" width="valor

height="valor">
Texto para navegadores que no soportan video …
</video>
Entre los atributos de la etiqueta encontramos los siguientes.
height
El atributo permite especificar el alto del video que se quiere reproducir, expresando el valor en
pixeles.
width
El atributo permite especificar el ancho del video que se quiere reproducir, expresando el valor en
pixeles.
Se ha de tener en cuenta que para realizar una carga correcta del formato de video, se habría de
utilizar la etiqueta <source>, la cual permite realizar la carga del archivo de video en varios formatos,
visualizando así el navegador el primer archivo compatible.
Esta última etiqueta dispone a su vez de dos atributos los cuales se habrían de especificar, cuando se
utilice la misma.
Estos atributos son src, el cual permite especificar la ruta, bien absoluta o relativa al archivo de video.
Y otro atributo denominado type, el cual se utiliza para indicar el tipo MIME del archivo que se
quiere reproducir. Entre los posibles tipos a utilizar por este último atributo se encuentran los
siguientes:
Valor MIME Audio/Video
video/ogg Video
video/mp4 Video
video/webm Video
El siguiente ejercicio muestra el uso de la etiqueta en un documento web.
97
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<video width="320" height="240" controls>
<source src="hoy.mp4" type="video/mp4">
<source src="hoy.ogg" type="video/ogg">
Su Navegador NO SOPORTA la etiqueta VIDEO.
</video>
</body>
</html>
El ejemplo anterior ha de mostrar un resultado similar al que se muestra en la imagen siguiente.
Incrustación de video
en página Web
Tag track
La etiqueta <track>, permite especificar subtítulos "pistas de texto", a los elementos de video y audio.
Para realizar la visualización de los mismos esta etiqueta permite la inclusión de archivos especiales
que contienen el texto que se ha de visualizar mientras se reproducen los archivos multimedia.
La etiqueta se ha de incluir en el contenido de una de las etiquetas multimedia para audio o video.
<Etiqueta Multimedia>
<track default kind="valor" label="valor" src="valor" srclang="valor">
</Etiqueta Multimedia>
Como se puede observar la etiqueta no tiene etiqueta de cierre. Los atributos de la etiqueta <track>
son los siguientes:
98
src
caso el archivo que contiene el texto que se quiere utilizar como subtítulos.
El formato de archivo que se suele cargar es .vtt (“video track text"), es un formato especial de
archivo el cual comentaremos más adelante.
default
El atributo default permite especificar cuál es el archivo de subtítulos por defecto que se ha de
visualizar, en caso de existir varios archivos de subtítulos.
Es un atributo booleano, por tanto con solo especificar el atributo en la etiqueta el mismo es aplicado.
label
El atributo permite especificar entre comillas, el titulo para la pista de texto que se está cargando.
kind
El atributo permite especificar según el valor que se indique varias opciones posibles para las pistas
de texto que se desean cargar. Entre los posibles valores se encuentran los siguientes.
Valor Descripción
Define la traducción de diálogos y efectos de

captions sonido. (Aptos para personas con discapacidad
auditiva.)
Define títulos de capítulos. Recomendable para

chapters
navegación por recursos multimedia.
Define una descripción textual del video que se está

descriptions
reproduciendo.
metadata Define contenido usado por scripts.
Define subtítulos. Utilizado para visualizar los

subtitles
subtítulos en un video
srclang
El atributo define en su valor, utilizando los códigos de lenguaje, el lenguaje utilizado en la pista de
texto. El atributo es obligatorio si se utiliza en el atributo kind, el valor subtitles.
El archivo de pista de texto o subtítulos que se puede utilizar, es muy fácil de crear, ya que es un
archivo de texto plano, en el cual la primera línea ha de ser
WEBVTT
Y a continuación se añade en el archivo un salto de línea y lo que se denominan “cues", que podemos
definir como los intervalos de tiempo, en los cuales se ha de visualizar el texto de los subtítulos
durante la reproducción del archivo multimedia.
99
Para crear un “cue" se ha de especificar un id, saltar a la línea siguiente y especificar a continuación
un rango de tiempo con el formato siguiente:
HH:MM:SS.MMM --> HH:MM:SS.MMM
Correspondiéndose el primer valor a inicio y el segundo a final, separados por espacios en blanco y
dos guiones con un símbolo de mayor.
Saltar de línea nuevamente y especificar la línea de texto que se quiere visualizar. Una vez escrita la
misma, se ha de dejar una línea en blanco, para poder escribir el siguiente “cue".
Este sería un ejemplo de archivo de subtítulos con espacios de tiempo definidos en dos “cues".
WEBVTT
1
00:00:01.000 --> 00:00:10.000
Primera línea de texto de los subtítulos.
2
00:00:15.000 --> 00:00:20.000
Segunda línea de texto
En dos líneas.
… Así sucesivamente se irían añadiendo periodos de tiempo y subtítulos …
El siguiente ejemplo muestra el uso de la etiqueta <track> en un documento web, visualizando

subtítulos en la reproducción de un video.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<video width="640" height="480" controls>
<source src="hoy.mp4" type="video/mp4">
<track src="subtitulos.vtt" kind="subtitles" srclang="es"
label="Spanish" />
Su Navegador NO SOPORTA la etiqueta VIDEO.
</video>
</body>
</html>
100
Subtítulos en video HTML5
Tag embed
La etiqueta <embed>, permite definir un contenedor para insertar una aplicación externa o un
contenido interactivo.
Es una etiqueta que no dispone de etiqueta de cierre por lo tanto solo se ha de utilizar la de apertura,
especificando los atributos dentro de la misma.
<embed src="valor" type="valor" width="valor" height="valor" />
La etiqueta hace uso de los siguientes atributos.
src
caso el archivo que contiene el objeto, animación, etc. Que se quiere utilizar.
type
Sirve para especificar el tipo MIME del documento con el que se está realizando el enlace.
La sintaxis para definir esta etiqueta con el atributo types es la siguiente:
<embed src="valor" type="ValorMime" />
Entre los tipos se puede encontrar el de objetos como flash “application/xshockwave-flash”, entre
otros.
width
El atributo permite especificar el ancho que ha de tener el contenedor del objeto que se quiere insertar,
expresando el valor en pixeles.
101
height
El atributo permite especificar el alto que ha de tener el contenedor del objeto que se quiere insertar,
expresando el valor en pixeles.
El siguiente ejemplo muestra el uso de la etiqueta en un documento web, visualizando una animación
realizada en flash.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<header>
<p>Inserción de objeto embebido FLASH</p>
</header>
<embed src="header.swf" type="application/x-shockwave-flash">
</body>
</html>
Tag embed, incrustación animación Flash
Metaetiquetas Google SEO - Title, description, keywords
Las metaetiquetas sirve para definir metadatos en el documento HTML, estos datos no son
visualizados por el navegador, sino que tiene otro propósito.
Las metaetiquetas son un modo perfecto para que los webmasters faciliten a los motores de búsqueda
información sobre sus sitios. Estas pueden
utilizarse para ofrecer información a todo
tipo de clientes. Cada sistema procesa
únicamente aquellas que entiende e ignora
el resto. Las metaetiquetas se añaden a la
sección <head> de su página HTML y
normalmente tienen el aspecto siguiente:
102
La etiqueta <meta> sirve para definir datos ("metadatos") sobre el documento web o html, estos datos
no son visualizados por el navegador, ya que se encuentran incluidos en la sección de encabezado y se
suelen utilizar para establecer valores como palabras claves ("keywords"), descripción de la página,
autor de la misma, última fecha de modificación, etc.
Estos datos son utilizados por los navegadores por ejemplo, para recargar la página o establecer
valores de visualización de la misma.
Los buscadores suelen utilizar las keywords para establecer valores de búsqueda para la página,
mientras que otros tipos de datos podrían ser utilizados por otros tipos de servicio web.
El formato de la etiqueta es el siguiente:
<meta atributo="valor" />
Entre los atributos a destacar podemos encontrar los siguientes:
Charset
Este atributo permite establecer el conjunto de caracteres que ha de utilizar el navegador para
visualizar la información del documento HTML que se está representando.
La sintaxis para definir esta etiqueta con el atributo charset es la siguiente:
<meta charset="conjunto de caracteres" />
Los conjuntos de caracteres que más se suelen utilizar son UTF-8 y ISO- 8859-1, que se corresponden
con la codificación Unicode y el juego de caracteres para el alfabeto Latín.
El siguiente ejemplo establece un juego de caracteres Unicode para el documento.
<!DOCTYPE HTML5>
<html>
<head>
</head>
<body>
</body>
</html>
name, content
Estos atributos permiten definir pares de datos, es decir un nombre de valor con su respectivo valor o
contenido.
El atributo name sirve para establecer el nombre del dato que se quiere definir, mientras que content
sirve para establecer el valor o contenido que se le quiere dar al dato.
103
Entre los datos que se suelen utilizar están application-name, author, description, generator y
keywords.
name (“Nombre”) Descripción
Se utiliza para definir el nombre de la aplicación de la

application-name
cual forma parte el documento web.
Se utilizar para definir el nombre del autor del

author
documento web.
Se utiliza para definir una descripción del documento

description web, es utilizada por los motores de búsqueda, para
establecer resultados.
Se utiliza para especificar el nombre del programa con

generator
el que se ha creado el documento web.
Se utiliza para indicar una serie de términos o palabras

que sirven para establecer categorías en la cual el
keywords documento web puede ser incluido. Suele ser utilizada
por los motores de búsqueda para establecer
búsquedas y categorías de los documentos.
El siguiente ejemplo muestra el uso de la etiqueta <meta> en conjunto con los atributos comentados
anteriormente:
<!DOCTYPE HTML5>
<html>
<head>
<meta name="application-name" content="Ejercicios y prácticas 1.0">
<meta name="author" content="Hugo Delgado">
<meta name="description" content="Prácticas y ejercicios de HTML">
<meta name="generator" content="disenowebakus.net">
<meta name="keywords" content="ejercicios, practicas, programación, html,
etc.">
</head>
<body>
</body>
</html>
http-equiv
Este atributo se suele utilizar para especificar y simular atributos de cabecera del protocolo HTTP. Se
utiliza estableciendo un valor para el atributo, al igual que el atributo anterior, entre los atributos se
pueden destacar los siguientes: contenttype, default-style y refresh.
http-equiv Descripción
Se utiliza para especificar el juego de caracteres de

content-type
codificación del documento.
default-style Se utiliza para especificar la hoja de estilos
104
http-equiv Descripción
preferida.
Se utiliza para establecer un intervalo de refresco

refresh del documento web, el cual será actualizado por el
navegador transcurrido el tiempo especificado.
El siguiente ejemplo muestra el uso de la etiqueta <meta> en conjunto con los atributos comentados
anteriormente:
<!DOCTYPE HTML5>
<html>
<head>
<meta name="application-name" content="Ejercicios y prácticas 1.0">
<meta name="author" content="Hugo Delgado">
<meta name="description" content="Prácticas y ejercicios de HTML">
<meta name="generator" content="disenowebakus.net">
<meta name="keywords" content="ejercicios, practicas, programación, html,
etc.">
<meta http-equiv="refresh" content="400">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
</body>
</html>
Etiqueta <BASE>
La etiqueta <base>, permite especificar una URL2 por defecto y un destino por defecto para todos los
enlaces relativos del documento web. Es una etiqueta englobada dentro de la categoría de Contenido
de Metadatos.
La etiqueta solo puede aparecer una única vez dentro del documento web y ha de situarse a
continuación de la etiqueta de encabezado de documento <head>, siendo así la primera etiqueta del
encabezado.
Se ha de tener en cuenta también, que es una etiqueta sin cierre, es decir no existe etiqueta de cierre de
la misma y por tanto se utiliza el formato abreviado para cerrar la misma.
El formato de la etiqueta es el siguiente:
<base href="valor" target="valor" />
Entre los atributos a destacar que tiene la etiqueta se encuentran los siguientes:
href
Este atributo permite establecer la URL base para todas las URL’s relativas que existen en el
documento web
105
La sintaxis para definir esta etiqueta con el atributo href es la siguiente:
<base href="valor URL" />
target
El atributo permite especificar el destino por defecto para todos los enlaces y formularios del
documento web.
La sintaxis para definir la etiqueta con el atributo target es la siguiente:
<base href="valor" target="valor" />
Entre los posibles valores que se le pueden aplicar al atributo target, encontramos los siguientes:
Target Descripción
Especifica que el destino sea una nueva ventana

_blank
del navegador, o una nueva pestaña.
Por defecto. Abre el destino en el mismo lugar

_self
donde se haya realizado el clic.
_parent Abre el destino en un marco asociado.
Abre el destino ocupando todo el cuerpo de la

_top
ventana.
Abre el destino en el marco del cual se

Framename
especifica el nombre
El siguiente ejemplo muestra el uso de la etiqueta <base> en conjunto con los atributos especificados
anteriormente:
<!DOCTYPE HTML5>
<html>
<head>
<base href="http://www.dominio.com/images/" target="_blank" />
</head>
<body>
<img src="imagen.gif" width="24" height="39" alt="Stickman" />
<a href="http://www.dominio.com">Enlace</a>
</body>
</html>
Etiqueta <LINK>
106
La etiqueta <link>, permite realizar la carga y establecer la relación existente entre el documento web
actual y un recurso externo. Esta etiqueta es normalmente muy utilizada para realizar la carga de hojas
de estilo para el documento web.
Esta etiqueta comprendida en la categoría de Contenido de Metadatos, es una etiqueta de las

denominadas “vacías”, es decir normalmente solo se especifica su etiqueta de inicio y no tiene ningún
tipo de contenido, limitándose la información y configuración de la misma a los atributos de los
cuales dispone.
La etiqueta se suele insertar en la sección de encabezado del documento web, aunque es posible
encontrarla en otros sitios, al final del documento por ejemplo, lo más adecuado es situarla donde se
ha indicado.
El formato de la etiqueta con todos sus atributos es el siguiente:
<link href="valor" hreflang="valor" media="valor" rel="valor" sizes="valor" types="valor" />
Entre los atributos a destacar que tiene la etiqueta se encuentran los siguientes:
href
Este atributo permite establecer la URL en la que se encuentra el documento el cual se quiere enlazar,
con el documento web.
La sintaxis para definir esta etiqueta con el atributo href es la siguiente:
<link href="valor URL" />
hreflang
Este atributo permite establecer el lenguaje del documento que se está enlazando, aunque no realiza
ninguna función especial en los navegadores, puede ser utilizado por los motores de búsqueda para
establecer el idioma.
La sintaxis para definir esta etiqueta con el atributo hreflang es la siguiente:
<link href="URL" hreflang="Codigodelenguaje" />
El código de lenguaje se puede consultar utilizando la siguiente dirección de internet:
rel
El atributo sirve para especificar la relación existente entre el documento web y el documento con el
que se está realizando el enlace. El atributo es obligatorio y se ha de incluir.
La sintaxis para definir esta etiqueta con el atributo rel es la siguiente:
<link href="URL" hreflang="CodigoLenguaje" rel="valor" />
107
Entre los posibles valores que se pueden aplicar al atributo rel se encuentran los siguientes:
Rel Descripción
Especifica la relación del documento con una

alternate versión alternativa del mismo. (Impresora,
Espejo, Traducida, Etc.)
Especifica la relación del enlace con el autor del

author
documento con el que se enlaza.
help Especifica relación con el documento de ayuda.
Se utiliza normalmente para asociar un pequeño

icono con el documento web. Este icono suele
icon
ser visible en la barra de dirección del
navegador.
Especifica la información de copyright sobre el

license
documento web.
Especifica que el documento web, es parte de

una serie de documentos, e indica que el
next
documento que enlaza es el siguiente en la
serie.
Sirve para especificar desde el documento web

que se está cargando, cual es el próximo
prefetch documento web que se ha de cargar, de esta
(prerender) forma el navegador solicita una petición de
cache, cargándose posteriormente la página
más rápidamente.
Especifica que el documento web, es parte de

prev una serie de documentos, e indica que el
documento que enlaza es el anterior en la serie
Especifica que el enlace es a la utilidad de búsqueda en el

search
documento
El más utilizado, especifica que el documento con el cual se

stylesheet enlaza es una hoja de estilos a importar, que aplicara formato al
documento web
Sizes
El atributo se utiliza solo en caso de haber especificado anteriormente en el atributo rel el valor icon, y
permite especificar el tamaño del atributo con el cual se está enlazando, aunque es soportada por el
lenguaje html5, los navegadores a fecha actual no la implementan.
La sintaxis para definir esta etiqueta con el atributo sizes es la siguiente:
<link rel="icon" href="demo_icono.gif" type="image/gif" sizes="16x16" />

108
Entre sus posibles atributos se pueden encontrar los siguientes:
Sizes Descripción
Se ha de especificar los valores de ancho y alto

insertando entre ellos el símbolo “x”, por
AnchoxAlto ejemplo 16x16, 32x32, se pueden insertar varios
tamaños separados por espacios en blanco.
“16x16 32x32”.
Indica que el icono con el cual se enlaza es

any
escalable, como si de una imagen svg se tratara.
type
La sintaxis para definir esta etiqueta con el atributo types es la siguiente:
<link type="ValorMime" />
Entre los tipos se puede encontrar el de hoja de estilos como es “text/css”, o el de texto plano
“text/plain”, etc.
media
Este atributo se ha modificado bastante en esta última versión del lenguaje, y aunque nos centraremos
posteriormente más en el mismo, inicialmente servirá para indicar el tipo de dispositivo para el cual se
está realizando el enlace.
La sintaxis para definir esta etiqueta con el atributo media es la siguiente:
<link rel="Valor" type="Valor" href="URL" media="valor" />
Entre los posibles valores de dispositivos que encontramos para el atributo media, se encuentran los
siguientes:
Media Descripción
all Valor por defecto, especifica todo tipo de dispositivos.
Sirve para especificar que el dispositivo para el que se enlaza

aural
es un sintetizador de voz.
braille Especifica un dispositivo de tipo braille.
Especifica un dispositivo de mano, de pantalla pequeña o

handhelp
ancho de banda limitado.
projection Especifica un dispositivo de tipo proyector.
print Especifica un dispositivo de impresión.

109
Media Descripción
screen Especifica un dispositivo de pantalla de pc.
Especifica un dispositivo de tipo teletipo, que utiliza

tty
caracteres de tamaño fijo.
tv Especifica un dispositivo de tipo televisión.
Como se ha indicado anteriormente el atributo tiene muchas más opciones que se profundizaran en las
mismas a lo largo del desarrollo del temario.
El siguiente ejemplo muestra el uso de la etiqueta <link> en conjunto con los atributos comentados
anteriormente:
<!DOCTYPE HTML5>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css" hreflang="es" />
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
</body>
</html>
Google entiende las siguientes metaetiquetas (y elementos relacionados):
Metaetiqueta Descripción
<meta name="description" Esta etiqueta proporciona una descripción breve de la página. En algunos
content="Descripción de la casos esta descripción se utiliza como parte del fragmento que se muestra
página" /> en los resultados de búsqueda.
Aunque técnicamente no se trata de una metaetiqueta, se suele utilizar

<title>Título de la junto con la "descripción". El contenido de esta etiqueta suele mostrarse
página</title> como el título de los resultados de búsqueda (y, por supuesto, en el
navegador del usuario).
<meta name="robots" Estas metaetiquetas pueden controlar el comportamiento del rastreo y la

content="..., ..." /> indexación del motor de búsqueda. La metaetiqueta robots se aplica a
<meta name="googlebot" todos los motores de búsqueda, mientras que "googlebot" es específica de
content="..., ..." /> Google. Los valores predeterminados son "index, follow" (igual que "all")
y no es necesario especificarlos. Google entiende los siguientes valores (si
especificas varios valores, sepáralos con una coma):
 noindex: impide que la página se indexe.

 nofollow: impide que Googlebot siga enlaces de esta página.
 nosnippet: impide que un fragmento se muestre en los resultados
de búsqueda.
 noodp: impide que se utilice la descripción alternativa de
ODP/DMOZ.
110
Metaetiqueta Descripción
 noarchive: impide que Google muestre el enlace En caché de una

página.
 unavailable_after:[date]: te permite especificar la hora y la fecha
exactas en que quieres detener el rastreo y la indexación de la
página.
 noimageindex: te permite especificar que no quieres que la página
aparezca como la página de referencia de una imagen que se
muestra en los resultados de la búsqueda de Google.
Ahora también se puede especificar esta información en la cabecera de las

páginas mediante la directiva de cabecera HTTP "X-Robots-Tag". Esto
resulta especialmente útil para limitar la indexación de archivos que no
sean HTML, como archivos gráficos y otro tipo de documentos.
Cuando reconocemos que el contenido de una página no está en el idioma
que el usuario podría querer encontrar, solemos proporcionar un enlace a
una traducción en los resultados de búsqueda. En general, esto permite
<meta name="google"
ofrecer un contenido único y convincente a un grupo de usuarios mucho
content="notranslate" />
mayor. Sin embargo, es posible que haya casos en los que no quieras
utilizar esta opción. Esta metaetiqueta indica a Google que no proporcione
traducción de esta página.
Puedes utilizar esta etiqueta en la página de nivel superior de tu sitio para

demostrar la propiedad del mismo en las Herramientas para webmasters de
<meta name="google-site- Google. Recuerda que, aunque los valores de los atributos "name" y
verification" "content" deben coincidir exactamente con los datos que se te
content="..." /> proporcionen (incluidas mayúsculas y minúsculas), no importa que
cambies la etiqueta de XHTML a HTML ni que el formato de la etiqueta
coincida con el de tu página.
Esta metaetiqueta define el tipo de contenido de la página y el conjunto de

<meta http-
caracteres. Asegúrate de delimitar el valor del atributo de contenido con
equiv="Content-Type"
comillas; de lo contrario, el atributo del conjunto de caracteres podría
content="...; charset=..." />
interpretarse de manera incorrecta.
Esta metaetiqueta dirige al usuario a una nueva URL después de un cierto

período de tiempo y, a veces, se utiliza como una forma sencilla de
<meta http-equiv="refresh" redireccionamiento. Sin embargo, no es compatible con todos los
content="...;url=..." /> navegadores y puede resultar confuso para el usuario. El W3C no
recomienda el uso de esta etiqueta. En su lugar, Google sugiere el
redireccionamiento 301 por parte del servidor.
Otras cuestiones destacadas:
 Google puede leer metaetiquetas similares a HTML y XHTM, independientemente del código
utilizado en la página.
 Salvo en el caso de "verify", el uso de mayúsculas o minúsculas no suele importar en las
metaetiquetas.
111
Diseño Web Responsive - Tutorial con ejemplos adaptables
Para hacer una página adaptable se usa la técnica media queries, que nos permite condicionar varios
estilos dependiendo la resolución de la pantalla.
 Profesor Hugo Delgado

 06/09/2021
 Aprender HTML
 10 Comentarios
 80 Votos
 22,693 Visitado
COMPÁRTELO:
Quienes hemos estado creando sitios desde los comienzos de la web, estamos acostumbrados a que
nuestras páginas sean “rígidas", es decir, de ancho fijo en pixeles. En los años 90, los monitores de 14
pulgadas con un ancho de pantalla de 640px eran los únicos que existían, y ese era el tamaño que
dábamos a nuestros diseños. No pensábamos en otra opción. Simplemente definíamos tamaños en
pixeles a todas nuestras columnas.
Cerca del año 2000, surgió un segundo valor a considerar: 800px de ancho (ya existían monitores de
15 y de 17 pulgadas). El problema era que, si definíamos el ancho total de nuestro sitio en 800px, a
los usuarios de monitores de 640px de ancho que todavía quedaban, les aparecía una poco elegante y
nada usable barra de desplazamiento horizontal. El sitio no entraba en la pantalla.
Las soluciones para ese escenario dividido en dos tamaños eran muy sencillas: hacíamos un
contenedor general de 640px de ancho y lo centrábamos dejando una pequeña franja sin ocupar a
ambos costados o bien hacíamos un sitio con ancho definido en porcentajes, que se estiraba
ligeramente entre ambas medidas.
Más cerca en el tiempo, alrededor del año 2005, la decisión a tomar era similar: seguían existiendo
monitores de 800px (ya no quedaba ningún monitor de 640px de ancho), pero la resolución
mayoritaria pasó a ser de 1024px. Entonces, o le dábamos ancho líquido (en porcentajes) para que se
estirara entre 800 y 1024px, o creábamos un contenedor de 800px centrado, sobrando unas pequeñas
franjas a los costados, y asunto resuelto.
Pero al llegar la década del 2010, un cambio verdaderamente revolucionario alteró nuestro escenario.
Los teléfonos móviles empezaron a navegar la web, usando navegadores similares a los de una PC
(Opera, Safari, Explorer, Chrome y Firefox) y apareció la primera tableta (el iPad). Desde ese
momento, nuestras decisiones de diseño se volvieron más complejas, a causa de la diversidad de
112
tamaños de pantalla con los que los usuarios navegan nuestros sitios. ¿Para cuál de todos esos
tamaños vamos a diseñar? ¿Para todos? ¿Eso es posible?
Página adaptable a distintos dispositivos
Algún cambio es necesario en nuestra metodología de diseño, ya que un diseño líquido sencillamente
no soporta ser “estirado" desde un mínimo de 320px hasta varios miles de pixeles de ancho.
Y por otro lado, si en lugar de darle ancho líquido, le definiéramos los anchos en pixeles, el efecto
sería igual de negativo: el sitio se “miniaturizará", siendo muy incómodo navegarlo, dependiendo del
uso constante de zoom en ambos sentidos y debiendo realizar desplazamientos horizontales. Algo así
como sobrevolar la página web en helicóptero, a la manera de cómo visualizamos un mapa.
Si el sitio tiene ancho fijo, se

miniaturiza y dependemos de hacer zoom constantemente, algo muy poco usable.
En el escenario actual, ya no podemos confiar en una resolución mayoritaria, ni en dos o tres, sino que
es preciso comprender que las resoluciones utilizadas por los usuarios cada vez estarán más
fragmentadas y serán más variadas, cubriendo rangos intermedios entre dos puntas cada vez más
distantes: dispositivos más pequeños que un monitor de PC, por un lado, y pantallas cada vez con
mayor resolución en el otro extremo.
113
La era en la que usamos y abusamos de sitios de ancho fijo en pixeles, grillas y columnas definidas en
pixeles y hasta metodologías de diseño visuales como las de maquetar usando celdas de tablas, ya
llegó a su fin. Es el fin del diseño rígido. Necesitamos algo nuevo.
Diseño Web Responsivo
Fundamentos para crear sitios adaptables

Para hacer una página adaptable se usa la técnica media queries, que nos permite condicionar varios
estilos dependiendo la resolución de la pantalla.
El diseño como problema y como solución
Las páginas web por naturaleza son “adaptables" desde el nacimiento mismo de la Web. Para
comprobar que esta hipótesis es correcta, pensemos en un archivo HTML correctamente estructurado,
con encabezados, párrafos y listas. Pero sin diseño. Es decir, un archivo HTML al que no le
vinculamos ninguna hoja de estilos, al que no lo maquetamos. Por ejemplo, el siguiente:
<!DOCTYPE html>
<html>
<head>
<title>Aprendiendo HTML5</title>
</head>
<body>
<h1>Actualizate a HTML5 y CSS3</h1>
<p>Estamos marcando semánticamente los contenidos de nuestros sitios web, y
agregamos microdata. Aplicamos efectos decorativos con CSS3 como sombras, gradientes y
relieves.</p>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</body>
</html>
Si tratamos de navegar este archivo desde dispositivos de distintos tamaños, no tendremos ningún
problema para acceder a sus contenidos: el texto será legible en un celular, en una tableta y en una PC
también.
114
Un HTML sin estilos (sin diseño) es adaptable por naturaleza.
Desde ya que no está “optimizado” para esos tamaños, nunca dijimos que fuera estéticamente logrado,
solo que es adaptable, que se puede usar en todos los tamaños.
En conclusión, el problema que dificulta acceder a nuestros sitios web desde móviles es generado por
nuestro proceso de diseño: surge cuando agregamos hojas de estilo y diseñamos, dando medidas a
cada bloque de contenidos y a los elementos que lo componen (imágenes, tipografías, etc.).
Aunque más que el diseño en sí, diríamos que es el “sobre-diseño” el culpable de la rigidez. El error
consiste en definir toda medida en pixeles, pretendiendo controlar al detalle la ubicación de la
información. Ese es el principal causante de esta inflexibilidad.
Es decir, somos los diseñadores mismos los que causamos el problema, con nuestro antiguo proceso
de diseño (heredado de medios gráficos como el papel) y la falla está en algunas decisiones que
tomamos en su transcurso (como las unidades de medida que elegimos aplicar).
 El hecho de que seamos los responsables del problema es una muy buena noticia, ya que si
estamos provocando el problema, también está en nuestras manos la solución. No depende de
115
“otros”, no es causada por los fabricantes de dispositivos ni de navegadores ni de editores
HTML: está plenamente en nuestras manos la decisión de hacer que nuestros sitios empleen
técnicas adaptables.
¿Qué son las Media Queries?
Ante todo, la técnica: se denomina Media Queries a la posibilidad de definir condiciones que deben
cumplirse para que el navegador procese algunas reglas de estilo específicas dentro de nuestra hoja
CSS.
Por ejemplo, podríamos definir una condición que determine que si el tamaño de pantalla es menor a
480px de ancho, el navegador procese ciertos estilos CSS que dejaremos preparados. En esos estilos,
definiremos diseños ideales para un dispositivo que cumpla con esa condición, es decir, que no supere
ese ancho de pantalla de 480px.
@media screen and (max-width:480px){

body {
font-size:80%; // achicamos la fuente en pantallas pequeñas
}
}
Mediante el uso de esta técnica, se intenta optimizar la experiencia de uso de un sitio web para adaptar
el diseño al contexto. En este caso, sería un tamaño variable de pantallas el que le brinda un contexto
muy particular a los contenidos, limitando los diseños posibles.
Combinación de condiciones para crear rangos
También podemos combinar varias condiciones en una sola utilizando el operador lógico “and” tantas
veces como sub-condiciones necesitemos combinar. En el siguiente ejemplo, combinaremos dos
condiciones: que sea una pantalla y que mida como mínimo 1024 pixeles de ancho.
@media screen and (min-width: 1024px) { }
En este otro ejemplo, combinaremos tres condiciones: que sea pantalla, que mida más de 320px y
menos de 768 pixeles de ancho.
@media screen and (min-width: 321px) and (max-width: 768px) { }
 Deberemos tener especial cuidado en que los valores de los rangos que definamos no se
superpongan. Es decir, si el valor máximo de uno es 320, definiremos el inicio del siguiente
rango en 321 y no en 320 exactos, ya que de lo contrario se leerán las dos hojas cuando un
dispositivo tenga exactamente esa medida.
Esta posibilidad de combinar varias condiciones será indispensable para poder detectar los rangos de
tamaños a los que se aplicará una u otra hoja de estilos.
Diseño web adaptable/sensible/responsive
Esta técnica llamada media queries, que nos permite condicionar la lectura de distintos estilos, es la
que nos abre la posibilidad a un nuevo enfoque de diseño web, que resulta ideal para dar soporte a la
116
enorme diversidad de dispositivos existentes actualmente. Este enfoque es conocido como “diseño
web adaptable” o “diseño web sensible” (responsive web design, originalmente).
En pantallas grandes (una media querie de “Mayor a 1024px”, por ejemplo) podríamos hacer flotar 3
columnas, mientras que en una tableta (una media querie de “Mayor a 800px”, por ejemplo) solo
dejaremos flotar 2 columnas, y en el caso de pantallas más angostas (celulares, sin media queries)
anularemos todos los flotados, reduciendo la cantidad de columnas a una sola (“apilando” los
contenidos uno debajo del otro).
Veamos cómo sería el código:
/* Diseño para celulares */

#columna1, #columna2, #columna3 {
float:none;
width:100%;
}
/* Diseño para tabletas */

@media screen and (min-width: 800px) {
#columna1, #columna2 {
float:left;
width:50%;
}
}
/* Diseño para PC */
@media screen and (min-width: 1025px) {
#columna1, #columna2, #columna3 {
float:left;
width:33%;
}
Un código similar al anterior es el utilizado para lograr estos cambios en el sitio del Japan Times:
La zona sin media

queries de la hoja CSS aplica en celulares, la primera media query aplica en tabletas (dos columnas) y
la segunda media query aplica en PCs y flota las 3 columnas.
Pero no solo el layout puede cambiar entre una pantalla y otra; analizaremos a continuación cuáles
son los elementos de diseño que es importante adaptar para que el contenido web quede optimizado
para diferentes dispositivos.
117
Elementos del diseño web adaptable
Los elementos centrales de un diseño adaptable o “sensible” son al menos cuatro:
1. Esquema tipográfico flexible

2. Maquetación adaptable usando Media Queries, modificando la cantidad de columnas del
diseño, con grillas flexibles, adaptando los anchos dentro de cada rango.
3. Imágenes y multimedia adaptables, cambiando el tamaño de las imágenes y otros elementos
vinculados. No debemos olvidar, si el sitio los incluye, la adaptación de videos y
animaciones, y demás contenidos complejos como mapas, tablas, slides, etc.
4. Navegación adaptable, optimizada para touch en pantallas pequeñas.
Complementariamente, aplicaremos sistemáticamente en todas nuestras páginas adaptables, dos

elementos extra:
a. Una etiqueta meta viewport que impida la “miniaturización” de nuestras páginas.

b. Y un script compatibilizador para que funcione en navegadores antiguos la técnica de media
queries.
Comencemos a analizar uno por uno estos elementos, así aprenderemos a incluirlos en nuestros
proyectos, para que podamos volverlos adaptables y dejemos atrás la era de la rigidez.
1. Esquema tipográfico flexible
El primer elemento del diseño que volveremos flexible desde nuestra hoja de estilos será el texto. La
novedad será que cambiaremos la unidad de medida más utilizada hasta el momento para definir el
tamaño de las fuentes mediante la propiedad font-size (es decir, los pixeles), por otras dos unidades de
medida más versátiles.
Si continuamos utilizando pixeles como unidad de medida para nuestras fuentes, tendremos dos tipos
de problemas:
1. El primero se lo causaremos a algunos de nuestros usuarios, aquellos que utilicen Internet

Explorer, ya que no podrán escalar el tamaño de la fuente si ésta fue definida en pixeles (un
problema de accesibilidad que afectará a nuestros usuarios miopes).
2. Y el segundo, será un problema de mantenimiento para nosotros mismos, ya que deberíamos
duplicar, triplicar o más, las declaraciones de tamaños de fuentes dentro de cada zona de la
hoja de estilos, para poder definir cuál debe ser su tamaño en cada rango o condición, es
decir, en cada media query. Entenderemos este problema a continuación.
Texto primero
¿Por dónde empezamos entonces el proceso de codificación (HTML) si queremos aplicar Media
Queries? Por el principio: el texto.
Pregunta al paso que siempre me gusta plantear a mis alumnos: ¿Cuál es el denominador común de
una pizza? ¿Aceitunas? ¿Cebollas? ¿Tomates? ¿O la masa?
¿Y el denominador común de una Web? ¿Flash? ¿Imágenes? ¿Videos? ¿O el texto?
Una vez marcados los textos semánticamente (con h1, h2, p, ul con li), aplicamos los identificadores y
clases que creamos necesarios, y ya tendremos el código HTML básico terminado. Ese texto bien
estructurado con HTML elemental, será suficiente para cualquier celular de bajas prestaciones que
aún pudiera estar utilizando algún usuario.
118
Tipografía, siempre en EM
Ahora sí, llegó el momento de definir en nuestra hoja de estilos las unidades de medida que volverán
flexible nuestro esquema tipográfico, para garantizar la legibilidad de nuestros contenidos. Pensemos
que la distancia de lectura en una PC es cercana al metro, mucho mayor a la que existe entre nuestros
ojos y un teléfono o tableta que sostenemos en nuestras manos:
Distancia de lectura y tamaño de fuente comparado.
Por ese motivo, los tamaños de fuentes deberán ser mayores para una PC que para una tableta, y los
de una tableta, mayores que los de un celular.
Para lograrlo, no usaremos más pixeles para definir el tamaño de fuentes, sino que usaremos la unidad
de medida em y los porcentajes, combinados de una manera particular: al body (y solamente al body)
le definiremos un font-size base en porcentaje, y al resto de textos, se lo definiremos en em:
body {
font-size:80%;
}
/* porcentaje base, solo en el body */

p{
font-size:0.9em;
}
h1 {
font-size:2em;
}
h2 {
font-size:1.4em;
}
#pie {
font-size:1.2em;
}
.epigrafes {
font-size:1.1em;
}
/* fin de zona común a todas las resoluciones */

119
@media screen and (min-width:800px) {
body {
font-size:100%;
/* ampliamos los textos si mide más de 800px */
}
}
/* fin de la zona para más de 800px de ancho de pantalla */

body {
font-size:120%;
/* ampliamos más aún los textos si mide más de 1200px */
}
}
/* fin de la zona para más de 1200px de ancho de pantalla */
Observemos que hemos definido en em los tamaños de fuentes de nuestros contenidos usando
indistintamente etiquetas, id o clases, en un solo lugar: la zona inicial de nuestra hoja de estilos,
aquella que leerán todos los dispositivos sin condiciones, ya que no se encuentra envuelta en ninguna
media query.
Por otro lado, cuando aplicamos una condición para cierto tamaño, lo único que cambiamos es el
valor base en porcentaje aplicado al body, lo que hará que todo el esquema tipográfico definido en
ems se escale proporcionalmente a un nuevo tamaño. Es decir, lo que estamos haciendo es cambiar el
tamaño del em, al cambiar su punto de referencia (que es ese porcentaje que definimos en el body).
Como orientación, podemos calcular que en la mayoría de las pantallas de PC, a tamaño de fuente
normal, la equivalencia entre ems y pixeles es que 1em = 16px, por lo que, si queremos definir en la
hoja de estilos un texto que en Photoshop ocupaba 24px, lo dividiremos por 16 para saber su valor en
em, que en este caso sería 1.5em. Atención: utilicemos puntos como separador decimal, no comas.
Por supuesto, nada impide que realicemos ajustes en alguna de las media queries si queremos que
determinado texto tenga una medida especial en una de ellas. Pero el punto de partida ya quedará
establecido automáticamente.
Con estas nuevas unidades de medida ya podremos crear esquemas tipográficos adaptables, que se
visualicen de manera óptima según la distancia de lectura de cada dispositivo.
Notemos que no estamos definiendo un tamaño rígido, sino una relación proporcional entre los
distintos tamaños de texto de nuestra página, proporción que se mantendrá a lo largo de todos los
dispositivos gracias a que vamos a escalar el esquema completo en cada media query.
2. Maquetación adaptable y grilla flexible
Aprovechando que cada zona de la hoja de estilos que envolvamos entre media queries permite que
ciertos estilos se apliquen solo en un rango de tamaños de pantalla, en cada zona acomodaremos los
contenidos en columnas de una manera optimizada para el tamaño del dispositivo.
 “Flotar o no flotar, that is the question”
En principio, convengamos que en un celular básico no es suficiente el espacio para flotar dos o más
columnas una al lado de la otra, por lo que el layout será extremadamente simple: solo dejaremos que
los bloques se apilen uno debajo del otro por orden de aparición en el código HTML.
120
A partir de allí, haremos flotar tantos bloques como creamos necesario en cada media query.
Grillas flexibles
La grilla flexible consiste en definir anchos de contenedor y de columnas en porcentajes, para que los
bloques de un diseño mantengan una proporción entre sí dentro del rango de ancho mínimo y máximo
definido en cada media query del punto anterior.
La fórmula para calcular los porcentajes a partir de un boceto en pixeles es la de dividir el ancho del
elemento por el del que lo envuelve:
Tamaño Elemento / Tamaño Contexto
Ejemplo: 600px / 960px = 0,625
Es decir, ese bloque que medía 600px dentro de un contenedor de 960px ahora deberá medir 62.5%
(ese valor surge del 0.625 de la cuenta que acabamos de realizar)
Repitamos la fórmula en otro caso:
Tamaño Elemento / Tamaño Contexto
Ejemplo de 3 columnas para fotos ubicadas dentro de una zona de 480px:
150px / 480px = 0,3125
Es decir, deberemos definir un 31.25% de ancho a cada una de las 3 columnas.
Márgenes y paddings flexibles
En este contexto, también debemos volver flexibles los márgenes y paddings, para que no arruinen
con pixeles la proporcionalidad de los espacios conseguida.
1. Margen: el contexto es el ancho del elemento padre (contenedor):

o Ej. 24px / 900px = 0,02666 = 2,66%
2. Padding: el contexto es el ancho del elemento mismo al que lo aplico:
o Ej. 24px / 200px = 0,12 = 12%
3. Medios adaptables (imágenes, videos)
Si en cada zona de los estilos CSS delimitada por una media querie apuntamos a distintas imágenes
(de distintos tamaños), no tendremos problemas con background-image:
121
/* La imagen más pequeña va primero, sin condiciones, porque es para el celular más chico */
.logo {
background-image: url(logo-chico.jpg);
}
/* Logo mediano, para anchos de pantalla de entre 480 y 800px */

.logo {
background-image: url(logo-mediano.jpg);
}
}
/* Logo grande, para anchos de pantalla de entre 800 y 1280px */

.logo {
background-image: url(logo-grande.jpg);
}
}
/* Logo gigante, para anchos de pantalla de más de 1280px */

.logo {
background-image: url(logo-gigante.jpg);
}
}
en el caso de etiquetas IMG, haremos flexible la imagen dentro del rango mínimo y máximo de un
layout:
img, video, object { max-width:100%; }
Eso hará que dentro del rango de ancho del elemento que envuelva a la foto (columna) la imagen se
estire desde un mínimo y hasta un máximo. Como el máximo es su tamaño real, 100%, consideremos
ese ancho al definir el ancho de su elemento contenedor, o viceversa: creemos la imagen al tamaño
máximo al que llegará su elemento contenedor.
Existen varias propuestas del W3C para especificar que el navegador descargue distintas imágenes
según el tamaño de pantalla (tal como en las imágenes de fondo) como por ejemplo, la posible
122
etiqueta “picture” con varias etiquetas “source”, cada una condicionada por una media query, o que se
modifique la etiqueta “img” permitiendo especificar más de un source mediante el atributo srcset. Al
momento de escribir este libro ninguna de ellas está estandarizada ni implementada por los
navegadores.
Otros casos son los de utilizar dibujos vectoriales escalables SVG en vez de una etiqueta IMG cuando
lo que muestre la imagen sea un dibujo con pocos colores (logotipos, iconos, etc.).
4. Navegación adaptable
La navegación es otro de los puntos críticos que debe adaptarse en un sitio para permitir su uso en
teléfonos y tabletas.
Tomemos como ejemplo la navegación de este sitio:
En el caso de la PC, vemos una serie de submenús desplegables, a partir de una lista (ul) de primer
nivel que contiene el nombre de cada sección en letras grandes, y con una segunda línea descriptiva.
Vemos cómo, en un tamaño mediano de pantalla (tableta), esa segunda línea desaparece, y el tamaño
de fuente es menor. Ese cambio puede lograrse con algo tan sencillo como cambiar el font-size (ya lo
vimos en el primer punto de este capítulo) y ocultar con display:none los subtítulos por defecto,
haciéndolos visibles con display:block a partir de cierto tamaño de pantalla.
Por ejemplo:
.subtitulos {
display:none;
}
/* Hacemos visibles los subtítulos para anchos de pantalla mayores a 1024px */

subtitulos {
display:block;
}
}
123
Y en el caso de la navegación en la pantalla más pequeña (teléfono), vemos que se aplicó el mismo
criterio pero para ocultar el enorme listado de submenús, dejando solamente los botones de primer
nivel, haciendo que no floten uno al lado del otro y dándoles un tamaño grande, para que puedan ser
fácilmente pulsados con los dedos en una pantalla táctil.
Otro caso bastante común es el de reemplazar un menú visualmente muy amplio que es el que se
usará en la PC, por un select con options en el teléfono.
En el código HTML, que es el mismo para todos los dispositivos, estará el código HTML de ambos
menús (el formulario con el select y la “ul” con botones).
Por ejemplo:
<ul id="menupc">
<li>HOME</li>
<li>CONTACTO</li>
</ul>
<form id="menumovil">
<select>...etc... </select>
</form>
Desde la hoja de estilos, en la zona inicial de la hoja sin condiciones, ocultamos el menú de PC y
mostramos el de celular:
#menupc {
display:none;
}
#menumovil {
display:block;
}
Y en una media query, invertiremos esto para cuando estemos en pantallas grandes:

#menupc {
display:block;
/* Mostramos el menú de PC */
}
#menumovil {
display:none;
/* Ocultamos el select para teléfono */
}
}
De esta manera, ya podemos manipular la visualización de diferentes herramientas de navegación,

gracias a las media queries.
Configurando el Viewport
124
El tamaño de la “ventana” del navegador en una PC, siempre coincide o es menor que el tamaño de la
pantalla. Es decir, o usamos el navegador maximizado, a pantalla completa, o lo achicamos un poco.
Pero nunca es más grande que la pantalla.
En móviles, en cambio, o la ventana del navegador coincide con el tamaño de pantalla (siempre
maximizada), o es mayor que el tamaño de pantalla, viendo solo una parte de ella por vez. Nunca es
menor ya que no podemos “achicar” la ventana para que ocupe menos de una pantalla. Pero sí puede
suceder lo contrario, que el contenido supere el tamaño de la pantalla porque estemos viendo solo una
parte, debido a la utilización del zoom.
Por ejemplo: Safari y Opera Mini asignan 980px de ancho al viewport y hacen zoom para mostrar lo
que suponen una web hecha para PC (y en el 99% de los casos, ¡aciertan!).
Veamos un ejemplo comparando la misma página sin que el navegador le haga zoom,
“miniaturizándola”, y con la etiqueta viewport que lo impide, que veremos a continuación:
¿Cómo podemos impedir que los navegadores móviles escalen nuestros sitios y los miniaturicen? La
solución es una nueva etiqueta meta cuyo name es “viewport”, que solo es aplicada por dispositivos
móviles y es ignorada en computadoras de escritorio.
Su sintaxis es la siguiente:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Dentro del atributo content, lo que estamos haciendo es definir que el width de la ventana del
navegador tenga un valor “real”; es decir, que el navegador no nos “mienta”, sino que utilice como
valor de su propiedad “width” el valor de otra propiedad, que es “device-width”, es decir, el ancho
físico de su pantalla.
De esa manera, un navegador dentro de un dispositivo de por ejemplo, 320px de ancho, ya no

declarará un width ficticio de 980px, sino que lo dejará en 320px, que es el ancho del dispositivo, con
lo cual no miniaturizará nuestro diseño.
Por otro lado, notemos que hemos definido un valor inicial para el zoom, mediante la propiedad
initial-scale a un valor de “1” que equivale a 100%, es decir, el tamaño natural. De esta manera,
cuando el navegador ingrese a nuestra página, no aplicará ningún nivel de zoom que previamente el
usuario hubiera configurado.
 Atención con el zoom: no debemos desactivar por completo la posibilidad de realizar zoom
por parte del usuario, ya que ésta es una atribución suya. Pensemos, por ejemplo, en un
125
usuario miope, que necesita ampliar parte de nuestro sitio. Para eso, evitemos definir en la
etiqueta viewport los valores de mínimum-scale y de maximum-scale, lamentablemente muy
difundidos.
Soluciones para navegadores que no entienden Media Queries
Los celulares más antiguos, cuyos navegadores no entienden media queries, no tendrán problemas en
mostrar un diseño acorde a su tamaño si ese diseño es el primero en la hoja de estilos y no está
envuelto dentro de ninguna condición. Los navegadores móviles más modernos procesan media
queries, así que tampoco son un problema.
Las tabletas son dispositivos nuevos, creados a partir del año 2009, con lo cual todos sus navegadores
soportan media queries.
El único problema de compatibilidad lo tendremos en PCs de escritorio. Los navegadores de PC más

modernos tienen soporte para media queries, pero algunos navegadores antiguos como Explorer 8
todavía subsisten, y no interpretan las media queries.
Para solucionarlo, usaremos un script compatibilizador llamado CSS3-mediaqueries-js que puede

descargarse en:
https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js
Simplemente vinculamos nuestra página HTML a ese script con una etiqueta <script> y a partir de ese
momento el Explorer 8 interpretará las media queries.
A manera de conclusión, vimos que es perfectamente posible crear experiencias de navegación por
sitios web multidispositivo, es decir, que se puedan usar con un diseño y unas herramientas
optimizadas para diferentes tamaños de pantalla, si aprovechamos la técnica de media queries para
crear esquemas tipográficos adaptables, layouts y grillas flexibles, elementos visuales como imágenes
y videos líquidos, y herramientas de navegación optimizadas para el uso en pantallas táctiles.
Cómo subir una página Web a Internet con Filezilla vía FTP
Tutorial para transferir su sitio Web con un cliente FTP, desde su computadora local a un servidor
Web con su cuenta de hosting gratuita o de pago.
Filezilla se puede descargar de forma gratuita desde http://www.filezilla-project.org
Pasos para subir una página Web a Internet con Filezilla
126
Paso 1:
Descargue el software Filezilla e instálelo en su computadora
Descargar Filezilla en versión cliente
Paso 2:
Inicia Filezilla
Paso 3:
Haga clic en Archivo en la barra de menú superior y seleccione Administrador del sitio
Administrador de Sitios
Paso 4:
Haz clic en Nuevo sitio
127
Nuevo Sitio en Administrador de Sitios
Paso 5:
En el campo Host, ingrese ftp.yourdomain.com (reemplace yourdomain.com con su nombre de

dominio real)
Campo
Host para ingresar dominio del sitio
Tu proveedor de Hosting gratuito o de pago es quien te proporciona o permite crear tus datos de
acceso al servidor remoto, en este caso son necesarios los datos:
 Host
 Usuario
 Contraseña
Paso 6:
En el menú desplegable Cifrado , seleccione Requerir FTP sobre TLS
128
Cifrado TLS para FTP
Paso 7:
En el menú desplegable Tipo de inicio de sesión , seleccione Normal
Tipo de inicio de sesión Normal con Filezilla
Paso 8:
Ingrese su nombre de usuario y contraseña FTP en los campos Usuario y Contraseña
Paso 9:
Haga clic en la pestaña Configuración de transferencia y seleccione Pasivo
129
Modo de transferencia pasivo en Filezilla
Paso 10:
Cuando esté listo, haga clic en Conectar
Una vez que esté conectado a su servidor, el área del sitio local mostrará los archivos y carpetas en su
computadora y el área del sitio remoto mostrará los archivos y carpetas en su servidor Doteasy.
Sus archivos web deben cargarse en la carpeta /public_html/ . Simplemente expanda el directorio /
(raíz) y haga doble clic en la carpeta /public_html/
Directorio raíz public_html
La forma más fácil de copiar archivos desde y hacia el servidor es simplemente arrastrarlos y soltarlos
de un lado a otro.
130

Diseño Web III Parcial - HTML

Cargado por

Copyright:

Formatos disponibles

Diseño Web III Parcial - HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Diseño Web III Parcial - HTML

Cargado por

Copyright:

Formatos disponibles

DISEÑO

Estructura básica de la primera página Web en HTML

Cómo crear una página Web

Estos tres se combinan para describir la estructura básica de la página:

 <html>: Este elemento envuelve todo el contenido de la página (excepto la DTD)

He aquí la página con estos dos nuevos ingredientes:

Se le abrirá un documento en blanco.

Escriba el siguiente texto:

Cuando lo tenga escrito, guárdelo en la carpeta con el nombre plantilla.html.

Únicamente se admiten los caracteres del alfabeto internacional (ingles).

Observe los siguientes ejemplos:

 página1.htm es incorrecto, pues tiene una letra acentuada.

Veamos el código de la cabecera:

Esto es una línea de texto.

Por lo tanto, su código quedará como sigue:

El resultado en la pantalla será como el que se muestra:

Código HTML de color para fondo y texto en página Web

Colores HTML para páginas Web - Código hexadecimal en RGB

En nuestro ejemplo anterior hemos establecido un color de fondo amarillo (yellow).

Así pues, el 0 decimal sería 00 hexadecimal, el 15 decimal sería 0F en hexadecimal, el 16 decimal

Por lo tanto la siguiente sentencia:

Los valores hexadecimales de los colores los representaremos en letras mayúsculas.

En realidad, funcionaría igual si los pusiéramos en minúsculas. Implementamos mayúsculas para

Colores para la Web - Emociones y efectos en las personas

A. Salida ………….. B. Taxis ……………. C. Solo personal autorizado

Por supuesto que sí; absolutamente.

Color Asociado a: ¡Cuándo utilizarlos?

Colores para fondo y texto en página HTML

A la hora de configurar el texto, existen muchas

Aquí vamos a ver todas las posibilidades que afectan al

Esto daría como resultado lo que ve en la figura

Además del color general del texto, son muchas las

Estructura lógica frente a formato físico

 Elementos lógicos: En ocasiones llamados semánticos, definen los componentes individuales

Evidentemente, los navegadores Web no se ven afectados

 El formato incrustado es problemático: Tras ver el marcado de una página HTML, no

Párrafos HTML - Ejemplos de formato para saltos de línea

Empiece por teclear el siguiente código llamado organizar_texto_1.htm:

Como ve, el resultado desconcierta bastante,

Esto es así porque los navegadores no reconocen

Grábelo con el nombre varios_saltos.htm y ejecútelo. El resultado será el que ve en la siguiente

Como puede apreciar, el navegador respeta

Llegados a este punto, vamos a aclarar algo.

<html><head><title>Organización</title></head><body>Esto debería de ser una línea de texto.

El resultado de la ejecución de este código lo tiene a la

<body marginwidth=0 marginheigth=0>

<body text=blue leftmargin=0 topmargin=0 marginheight=0 marginwidgth=0>

<body marginwidth=0 leftmargin=0 leftmargin=0 text=blue topmargin=0 marginheight=0>

Teclee el siguiente código de ejemplo y grábelo como alinear_1.htm.

Observe algunas cosas. En primer lugar,

Comentarios HTML - Código de ejemplo ¿Para qué sirven?

Propósitos y utilidad de los comentarios en HTML

 Documentar el código fuente

Ejemplo de comentarios en código HTML

Podrás ver este texto.

(Esto puede ser útil si tiene muchos elementos anidados).

Podrás ver este texto.

Observe el siguiente código, que grabaremos con el nombre de efectos_simples_1.htm.

El resultado puede verlo a continuación: