e
tual
Plataforma de
Aprendizaje Virtual
Programación Web
Jefatura de
Gabinete de Ministros Secretaría de
Argentina Innovación Pública
Módulo 2
PROGRAMACIÓN WEB | MÓDULO 2 3
HTML y CSS: dos lenguajes
para crear un sitio web
Para crear un sitio web, tenés que darle instrucciones
al ordenador. No basta con teclear el texto que quieras
poner en el sitio web (como lo harías en un procesador
de texto como Word, por ejemplo). También tenés que
mostrarle donde poner el texto, insertar las imágenes,
crear los enlaces entre las páginas, etc.
Contenido desarrollado por Arnoldo Néstor Mauro, Coordinador del Punto Digital Ituzaingó, Corrientes.
PROGRAMACIÓN WEB | MÓDULO 2 4
Para explicarle al ordenador lo que querés hacer, tenés que usar un len-
La función de guaje que él entienda. ¡Y es aquí donde la cosa se pone difícil porque
HTML y de CSS tenés que aprender dos lenguajes!
• HTML (HyperText Markup Language (lenguaje de marcas de hipertex-
to)): apareció por primera vez en 1991 cuando se lanzó la Red. Su fun-
ción es gestionar y organizar el contenido. Por lo tanto, usarás el HTML
para escribir lo que quieras que muestre la página: texto, enlaces, imáge-
nes, etc. Podés decir, por ejemplo:
«Este es el título, este es el menú, aquí está el texto principal de la página,
aquí está una imagen a mostrar, etc.».
• CSS (Cascading Style Sheets (hojas de estilo en cascada)): la función
del CSS es gestionar la apariencia del sitio web (trazado, posicionamien-
to, diseño, color, tamaño del texto, etc.). Este lenguaje se introdujo para
complementar al lenguaje HTML en 1996.
Podés crear bastante bien un sitio web solo con HTML, pero no se va a
ver muy bonito, se mostrará la información «granulada». Esta es la razón
por la que el lenguaje CSS siempre se usa para complementarlo.
Para darnos una idea de esto la figura siguiente muestra como se ve la
misma página sin CSS y luego con CSS.
HTML (no CSS) HTML + CSS
El HTML define el contenido (como podés ver, ¡no está muy pulido!). El
CSS se usa para colocar el contenido y definir la presentación: el color, la
imagen de fondo, los márgenes, el tamaño del texto, etc.
Como podés imaginar el CSS necesita una página en HTML para funcio-
nar. Esta es la razón por la que primero vamos a aprender los fundamen-
tos del HTML antes de pasar a lidiar con el aspecto decorativo en CSS.
Contenido desarrollado por Arnoldo Néstor Mauro, Coordinador del Punto Digital Ituzaingó, Corrientes.
PROGRAMACIÓN WEB | MÓDULO 2 5
Lenguaje HTML
En general, una página web consiste en un encabezamiento (parte supe-
Estructurar tu rior derecha), menús de navegación (en la parte superior o en los lados),
página varias secciones en el centro... y un pie de página (abajo a la derecha).
En este capítulo vamos a ver las nuevas etiquetas HTML para estructurar
nuestra página. Estas etiquetas fueron introducidas por HTML5 (antes
no estaban disponibles) y nos permitirán decir: «Este es mi encabeza-
do», «este es mi menú de navegación», etc.
De momento no vamos a hacer ningún diseño de página. De hecho, va-
mos a preparar nuestro documento HTML para ser capaces de hablar
del diseño de la página web en los siguientes capítulos.
Estructura básica de una página HTML5
Volvamos a nuestro editor de texto (en mi caso Sublime Text) Únicamen-
te teclea o copia y pega el código fuente que está a continuación dentro
de Sublime Text. Este código corresponde a los fundamentos de una
página web en HTML5:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”/>
<title>Título</title>
</head>
<body>
</body>
<html>
Contenido desarrollado por Arnoldo Néstor Mauro, Coordinador del Punto Digital Ituzaingó, Corrientes.
PROGRAMACIÓN WEB | MÓDULO 2 6
doctype
La primera línea se denomina el doctype. Es fundamental porque indica
que esto es efectivamente una página web HTML.
No es realmente una etiqueta como las otras (empieza con un signo de ex-
clamación) y se puede considerar como una excepción que confirma la regla.
La etiqueta <html>
Esta es la etiqueta principal del código. Incluye el contenido completo
de la página.
¡Cómo puedes ver la etiqueta </html> de cierre está situada a la derecha
del final del código!
La cabecera <head> y el cuerpo <body>
Una página web se compone de dos partes:
• La cabecera <head>: esta sección proporciona información general so-
bre la página como su título, la codificación (para la gestión de caracteres
especiales), etc. Esta sección suele ser bastante corta. La información
que contiene la cabecera no se muestra en la página y es simplemente
información general concebida para el ordenador. ¡Sin embargo, es muy
importante!
• El cuerpo <body>: es aquí donde se encuentra la parte principal de la
página. Todo lo que tecleemos aquí se mostrará en la pantalla. La mayor
parte de nuestro código se tecleará en el cuerpo.
Por ahora el cuerpo está vacío (volveremos a esto más adelante). Pero
vamos a echar un vistazo a las dos etiquetas que contiene la cabecera...
Contenido desarrollado por Arnoldo Néstor Mauro, Coordinador del Punto Digital Ituzaingó, Corrientes.
PROGRAMACIÓN WEB | MÓDULO 2 7
La codificación (charset)
Esta etiqueta indica la codificación que se usa en el archivo .html.
Sin entrar en detalles porque se complica muy rápido, la codificación
especifica cómo se guarda el archivo. Es lo que determina la forma en
la que se van a mostrar los caracteres especiales (acentos, caracteres
japoneses y chinos, caracteres arábigos, etc.)
Hay varias técnicas de codificación con nombres raros que se usan en
función del idioma: ISO-8859-1, OEM 775, Windows-1253, etc. No obs-
tante, actualmente solo se debería usar una: UTF-8. ¡Este método de
codificación permite que todos los símbolos de todos los idiomas del
mundo se muestren virtualmente sin ningún problema! Esta es la razón
por la que indiqué utf-8 en esta etiqueta.
El título principal de la página <title>
<title>
Este es el título de nuestra página, ¡lo cual es probablemente el elemento
más importante! Todas las páginas tienen que tener un título que descri-
be lo que contienen. El título no se muestra en la página sino en su parte
superior (habitualmente en la pestaña del navegador) como se ve en la
figura siguiente:
El título de la página figura en la parte superior del navegador
Deberías saber que el título también aparece en los resultados de bús-
queda, como en Google (figura siguiente).
El título de la página figura en las búsquedas en Google
¡Así que elegir el título es importante!
Contenido desarrollado por Arnoldo Néstor Mauro, Coordinador del Punto Digital Ituzaingó, Corrientes.
PROGRAMACIÓN WEB | MÓDULO 2 8
El texto en una página web se teclea habitualmente en párrafos. En el
Párrafos lenguaje HTML la etiqueta <p> se usa para delimitar los párrafos.
• <p> significa “comienzo del párrafo”;
• </p> significa “fin del párrafo”;
Tecleamos el contenido del sitio web entre las etiquetas <body></body>.
Así que tenemos que poner nuestro párrafo dentro de estas dos etique-
tas y ¡finalmente tendremos nuestra primera página web con texto!
Así que voy a tomar exactamente el mismo código del capítulo anterior
y lo voy a añadir al párrafo:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”/>
<title>Párrafos</title>
</head>
<body>
<p>¡Hola y bienvenido a mi sitio!</p>
</body>
<html>
Contenido desarrollado por Arnoldo Néstor Mauro, Coordinador del Punto Digital Ituzaingó, Corrientes.
PROGRAMACIÓN WEB | MÓDULO 2 9
Crear una línea nueva
¡Hay una etiqueta que se llama «salto de línea»!
Es una etiqueta huérfana que solo se usa para indicar el salto de línea: <br />.
La tienes que colocar dentro de un párrafo. Aquí tenemos la forma de
usarla en un código:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”/>
<title>Párrafos</title>
</head>
<body>
<p>¡Hola y bienvenido a mi sitio!<br/>
Esta es mi primera prueba así que por favor, tomalo en cuenta, estoy
aprendiendo poco a poco cómo funciona esto. </p>
<p>De momento está un poco vacío, ¡pero vuelve en 2 o 3 días cuando
haya aprendido algunas cosas más y les puedo asegurar que se sorpren-
derán!</p>
</body>
<html>
Teóricamente podés poner varias etiquetas <br /> una detrás de la otra
para hacer varios saltos de línea, pero esto se considera una mala prác-
tica porque dificulta el mantenimiento del código. Para cambiar un texto
con más precisión se usa CSS, que es un lenguaje que complementa el
HTML y hablaremos de él un poco más adelante.
• <p> </p>: para organizar el texto en párrafos;
• <br />: para hacer un salto de línea.
Ahora ya sabemos cómo teclear párrafos, vamos a ver cómo crear títulos.
Contenido desarrollado por Arnoldo Néstor Mauro, Coordinador del Punto Digital Ituzaingó, Corrientes.
PROGRAMACIÓN WEB | MÓDULO 2 10
Ya que el contenido de nuestra página incluye varios párrafos, va a ser difícil
Títulos que nuestros visitantes se sitúen. Es aquí donde los títulos ganan utilidad.
En HTML podés seleccionar seis niveles de títulos diferentes. Con esto
quiero decir que podremos decir «este es un título muy importante»,
«este es un título un poco menos importante», «este es un título mucho
menos importante», etc. Por consiguiente, tenemos seis etiquetas de tí-
tulo diferentes:
• <h1> </h1>: significa «título muy importante”.
• <h2> </h2>: significa “título importante”.
• <h3> </h3>: asimismo, esto significa un título un poco menos importante
• <h4> </h4>: el título es incluso menos importante.
• <h5> </h5>: el título no es importante.
• <h6> </h6>: el título no es nada importante.
Advertencia:
¡no confundamos esto con la etiqueta <title>!
La etiqueta <title> muestra el título de la página en
la barra de título del navegador como hemos vis-
to. Los títulos <h1> y similares se usan para crear
títulos que se mostrarán en la página web.
El navegador muestra el título realmente impor-
tante en caracteres muy grandes, los títulos que
son un poco menos importante en caracteres me-
nos grandes, etc.
Contenido desarrollado por Arnoldo Néstor Mauro, Coordinador del Punto Digital Ituzaingó, Corrientes.
PROGRAMACIÓN WEB | MÓDULO 2 11
Intenta crear una página web con títulos para ver cómo se ve:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”/>
<title>Niveles de títulos</title>
</head>
<body>
<h1>Título muy importante</h1>
<h2>Título importante</h2>
<h3>Título un poco menos importante(subtítulo)</h3>
<h4>No es un título importante</h4>
<h5>Título sin importancia</h5>
<h6>Título sin ninguna importancia</h6>
</body>
<html>
Algunas palabras en los párrafos son algunas veces más importantes
Resaltar que otras y querremos que resalten. El HTML proporciona varias formas
para resaltar el texto de la página.
Enfatizar
Para enfatizar el texto, tienes que usar la etiqueta <em> </em>.
Voy a volver a usar el ejemplo de hace un momento y a enfatizar algunas
palabras:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”/>
<title>Párrafos</title>
</head>
<body>
<p>¡Hola y bienvenido a mi sitio!<br/>
Esta es mi primera prueba así que por favor,<em> tómalo en cuenta</
em>, estoy aprendiendo poco a poco cómo funciona esto. </p>
</body>
<html>
la etiqueta <em> esta tiene un efecto, coloca el texto en cursiva.
Contenido desarrollado por Arnoldo Néstor Mauro, Coordinador del Punto Digital Ituzaingó, Corrientes.
PROGRAMACIÓN WEB | MÓDULO 2 12
Enfatizar considerablemente
Para enfatizar considerablemente un texto, puedes usar la etiqueta
<strong> que significa «énfasis fuerte» o si preferís «importante». Se usa
exactamente de la misma forma que <em>:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”/>
<title>Párrafos</title>
</head>
<body>
<p>¡Hola y bienvenido a mi sitio!<br/>
Esta es mi primera prueba así que por favor,<strong> tómalo en cuen-
ta</strong>, estoy aprendiendo poco a poco cómo funciona esto. </p>
</body>
<html>
Sin lugar a dudas verás que el texto aparecerá en negrita.
La etiqueta <strong> no significa «negrita» sino «importante». Podés de-
cidir más adelante en CSS si querés mostrar las palabras «importantes»
de una forma diferente a la negrita.
Contenido desarrollado por Arnoldo Néstor Mauro, Coordinador del Punto Digital Ituzaingó, Corrientes.
PROGRAMACIÓN WEB | MÓDULO 2 13
Las listas normalmente nos permiten organizar el texto y ordenar la in-
Listas formación. Vamos a descubrir dos tipos de listas aquí:
• listas no ordenadas o listas con viñetas;
• listas ordenadas o listas enumeradas.
Listas no ordenadas
Una lista no ordenada tiene esta apariencia:
• Fresas
• Frambuesas
• Cerezas
Es un sistema que nos permite crear una lista sin ningún concepto de orden
(no hay «primero» o «último»). Crear una lista no ordenada es muy sencillo.
Simplemente usamos la etiqueta <ul> cerrada posteriormente con </ul>.
Entonces, empieza introduciendo esto:
Y ahora esto es lo que vamos a hacer: vamos a escribir cada elemento
de la lista dentro de las etiquetas <li></li>. Cada una de estas etiquetas
tienen que estar situadas entre <ul> y </ul>
El resultado se muestra en la figura siguiente.
Una lista no ordenada
<ul></ul> delimita la lista completa;
<li></li> define un elemento de la lista (una viñeta).
Contenido desarrollado por Arnoldo Néstor Mauro, Coordinador del Punto Digital Ituzaingó, Corrientes.
PROGRAMACIÓN WEB | MÓDULO 2 14
Lista ordenada
Una lista ordenada funciona de la misma forma únicamente cambia la
etiqueta: tenés que sustituir <ul></ul> por <ol></ol>.
No cambiemos nada dentro de la lista: siempre tenemos que usar las
etiquetas <li></li> para delimitar los elementos de la lista.
• HTML tiene muchas etiquetas que nos permiten organizar el texto de
la página. Estas etiquetas proporcionan indicaciones, como «este es
un párrafo», «esto es un título», etc.
• La etiqueta <p> </p> define los párrafos y la etiqueta <br /> el salto
de línea.
• Hay seis niveles de títulos, desde <h1> </h1> hasta <h6> </h6>, los
cuales se usan en función de la importancia del título.
• Puedes resaltar determinadas palabras con las etiquetas <strong>,
<em> y <mark>.
• Para crear listas, usa la etiqueta <ul> (lista no ordenada con viñetas)
o la etiqueta <ol> (lista ordenada). Los elementos se incluyen dentro
de la lista con la etiqueta <li> por cada elemento.
Contenido desarrollado por Arnoldo Néstor Mauro, Coordinador del Punto Digital Ituzaingó, Corrientes.
PROGRAMACIÓN WEB | MÓDULO 2 15
Voy a mostrarte las nuevas etiquetas introducidas por HTML5 para estruc-
Etiquetas turar nuestras páginas. Verás que no cambiará el aspecto de nuestra pá-
estructurales gina mucho, pero estará bien construida y perfecta para mostrar después.
HTML5 <header>: el encabezado
La mayoría de las páginas web normalmente tienen un encabezado. La
mayoría suelen contener un logo, un banner, el eslogan de tu web, etc.
Tenés que colocar esta información dentro de la etiqueta <header>:
La figura siguiente, por ejemplo, muestra parte de una página web y podés
ver su encabezado.
Etiqueta de encabezado
El encabezado puede contener lo que quieras: imágenes, enlaces, textos, etc.
Tu página puede contener varios encabezados. Si se divide en varias sec-
ciones, cada sección puede tener su propio <header>.
Contenido desarrollado por Arnoldo Néstor Mauro, Coordinador del Punto Digital Ituzaingó, Corrientes.
PROGRAMACIÓN WEB | MÓDULO 2 16
<footer> pie de página
A diferencia del encabezado, el pie de página normalmente está en la par-
te inferior del documento. Contiene información como enlaces de contac-
to, nombre del autor, informes legales, etc.
La figura siguiente muestra cómo es el pie de página de una página web.
Etiqueta de pie de página <footer>
<nav>: enlaces de navegación principales
La etiqueta <nav> tiene que incluir todos los enlaces de navegación principa-
les de la página. Por ejemplo, contendría el menú principal de tu página web.
El menú normalmente toma la forma de una lista con viñetas dentro de la
etiqueta <nav>:
En la figura siguiente, podés ver el menú de navegación principal, que po-
dría usar la etiqueta <nav>.
Etiqueta <nav>
Contenido desarrollado por Arnoldo Néstor Mauro, Coordinador del Punto Digital Ituzaingó, Corrientes.
PROGRAMACIÓN WEB | MÓDULO 2 17
<section>: una sección de la página
La etiqueta <section> incluye una porción del contenido según su tema.
Generalmente cubre una porción del contenido en el centro de la página.
En la página de inicio de Wikipedia, hay varios bloques que podrían consi-
derarse secciones de página (figura siguiente).
Etiqueta de sección <section>
<aside>: información adicional
La etiqueta <aside> está diseñada para contener información adicional al
documento visto. Esta información está normalmente situada en un lado
(aunque no tiene que ser así).
La página podría contener varios bloques <aside>.
Contenido desarrollado por Arnoldo Néstor Mauro, Coordinador del Punto Digital Ituzaingó, Corrientes.
PROGRAMACIÓN WEB | MÓDULO 2 18
Por ejemplo, en Wikipedia, el artículo que se está viendo a menudo tiene
un bloque de información adicional a la derecha. Así, la página que des-
cribe una estrella (siguiente figura) contiene un bloque dando las carac-
terísticas de la estrella (dimensiones, peso, etc.).
Contenido desarrollado por Arnoldo Néstor Mauro, Coordinador del Punto Digital Ituzaingó, Corrientes.
PROGRAMACIÓN WEB | MÓDULO 2 19
<article>: un artículo independiente
El elemento article es un contenedor de bloques de contenido que se
consideran independientes del sitio web y pueden, por lo tanto, ser vis-
tos, reutilizados y distribuidos por separado
La etiqueta <article> se usa para cubrir una porción de la página que
generalmente es independiente.
Puedes encontrar habitualmente a este elemento encerrando artículos,
entradas de blogs o mensajes de un foro.
Por ejemplo, un artículo en una página web puede mostrarse como en la
siguiente figura:
Etiqueta de artículo
Contenido desarrollado por Arnoldo Néstor Mauro, Coordinador del Punto Digital Ituzaingó, Corrientes.
PROGRAMACIÓN WEB | MÓDULO 2 20
Resumen
Uf, son muchas etiquetas nuevas para recordar. Afortunadamente, te he
hecho un pequeño diagrama (figura siguiente) para ayudarte a recordar
lo que hacen.
No cometas errores: este diagrama te ofrece un ejemplo de organización
de página.
Vos decidís si ponés tu menú de navegación en la derecha, o en la parte
de arriba, o tus etiquetas <aside> arriba, etc. Podías imaginar un segun-
do <header>, esta vez ubicado dentro de una <section>. En este caso, se
consideraría la sección encabezado.
Finalmente, una sección no tiene que contener necesariamente una
etiqueta de <article> y unas etiquetas <aside>. Usa solo estas etiquetas
si las necesitas.
Contenido desarrollado por Arnoldo Néstor Mauro, Coordinador del Punto Digital Ituzaingó, Corrientes.
PROGRAMACIÓN WEB | MÓDULO 2 21
Usemos las etiquetas que acabamos de descubrir en la estructura de
Ejemplo práctico nuestra página web.
del uso de El siguiente código muestra todas las etiquetas que acabamos de ver, en
etiquetas una página web completa:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8” />
<title>Zozor: la página web</title>
</head>
<body>
<header>
<h1>Zozor</h1>
<h2>Diarios de viaje</h2>
</header>
<nav>
<ul>
<li><a href=”#”>Inicio</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>Continuar</a></li>
</ul>
</nav>
<section>
<aside>
<h1>Sobre el autor</h1>
<p>¡Soy yo, Zozor! Nací el 23 de noviembre de 2005.</p>
</aside>
<article>
<h1>Soy un gran viajero</h1>
<p>Bla, bla, bla, bla (texto del artículo)</p>
</article>
</section>
<footer>
<p>Copyright Zozor - Todos los derechos reservados
<a href=”#”>¡Escríbeme!</a></p>
</footer>
</body>
</html>
Contenido desarrollado por Arnoldo Néstor Mauro, Coordinador del Punto Digital Ituzaingó, Corrientes.
PROGRAMACIÓN WEB | MÓDULO 2 22
Este código puede ayudarte a comprender cómo las etiquetas deben co-
locarse. Podés ver que contiene un encabezado, un menú de navegación,
un pie de página, etc., y, en el centro, una sección con un artículo y un
bloque <aside> que ofrece información sobre el autor del artículo.
¿A qué se parece la página que acabamos de crear?
¡A nada! Si compruebas el resultado, verás texto negro sobre fondo blan-
co (figura siguiente). ¡Es normal, no hay CSS! La página está, sin embar-
go, bien estructurada, lo que encontramos útil para el siguiente paso.
Los enlaces son intencionadamente ficticios (por eso la presencia de
un simple #) y por lo tanto no llevan a ningún lado (bueno, es sólo una
página demo).
Es verdad. De hecho, estas etiquetas sólo están ahí para explicarle al
ordenador «Este
es el encabezado», «este es mi pie de página», etc. No especifican, al
contrario de lo que podríamos pensar, dónde debería estar colocado el
contenido. Eso es lo que hace CSS, como vamos a ver.
Para ser honesto, estas etiquetas no son muy útiles por ahora. También
podrías usar las etiquetas genéricas <div> para incluir las diferentes por-
ciones de nuestro contenido. De hecho, así es cómo fue hecho antes de
la llegada de estas nuevas etiquetas HTML5.
Sin embargo, es muy posible que, en el futuro cercano, los ordenadores
empiecen a sacar beneficio de estas nuevas etiquetas. ¡Podrías imagi-
nar, por ejemplo, un navegador que elija mostrar los enlaces de navega-
ción <nav> para que siempre estuvieran visibles! Una vez que el ordena-
dor «comprende» la estructura de la página, todo se vuelve posible.
Contenido desarrollado por Arnoldo Néstor Mauro, Coordinador del Punto Digital Ituzaingó, Corrientes.
PROGRAMACIÓN WEB | MÓDULO 2 23
Asegurar la compatibilidad con IE
Las nuevas etiquetas que acabamos de ver sólo han sido reconocidas
por Internet Explorer desde su versión 9 (IE9). Esto va a ser un problema
porque las versiones antiguas de IE no conocen la etiqueta... no gestio-
nan la página correctamente (no puedes editar su CSS, por ejemplo).
Afortunadamente, esto puede ser resuelto fácilmente usando un script
JavaScript Los scripts son pequeños trozos de código que le permiten a
las personas usuarias interactuar con la web y realizar algunas acciones.
Como no nos vamos a preocupar por el JavaScript (no es materia de
este curso), ten en cuenta que este tipo de script se llama en las páginas
HTML de forma parecida a como los archivos CSS son llamados.
Los archivos JavaScript normalmente tienen la extensión .js. En el códi-
go HTML, normalmente estás situados en la etiqueta <head> con esta
etiqueta:
La razón por la que te estoy dando una visión general de JavaScrip es
que un pequeño trozo de script con el bonito nombre HTML5shiv te per-
mite asegurarte de que las etiquetas que acabamos de ver (<header>,
<footer>, <section>…) se muestran correctamente en las versiones más
antiguas de Internet Explorer (IE6, IE7, IE8). En la práctica, simplemente
añades las siguientes líneas a tu código:
Introduce este código en la etiqueta <head> como esta:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8” />
<!--[if lt IE 9]>
<script src “[Link]
script>
<![endif]-->
<title>Inclusión de HTMLshiv</title>
</head>
<body>
<body>
<html>
¡Y aquí tenés, tu página web ahora se mostrará sin problemas en Internet Explorer!
Contenido desarrollado por Arnoldo Néstor Mauro, Coordinador del Punto Digital Ituzaingó, Corrientes.
PROGRAMACIÓN WEB | MÓDULO 2 24
Sin entrar en detalles, deberías saber que <!--[if lt IE 9]> es un comentario
condicional. Este es un comentario especial que es leído por Internet
Explorer. Asegura que el script sólo funciona en las versiones de Internet
Explorer anteriores a IE9 (otros navegadores no lo necesitan e ignoran
este comentario).
En resumen
• Varias etiquetas fueron introducidas con HTML5 para delinear las dife-
rentes áreas al construir la página web:
‑ <header>: encabezado;
‑ <footer>: pie de página;
‑ <nav>: principales enlaces de navegación;
‑ <section>: sección de página;
‑ <aside>: información adicional;
‑ <article>: artículo independiente.
• Estas etiquetas pueden anidarse unas con otras. Una sección puede
tener así su propio encabezado.
• Estas etiquetas no están incluidas en el diseño de la página. Sólo le
dicen al ordenador qué significa el texto que contienen. También podrías
poner el encabezado en la parte baja de la página si quisieras.
• El código JavaScript HTML5shiv se usa para asegurar que estas etique-
tas son reconocidas por versiones de Internet Explorer anteriores a IE9.
Contenido desarrollado por Arnoldo Néstor Mauro, Coordinador del Punto Digital Ituzaingó, Corrientes.
PROGRAMACIÓN WEB | MÓDULO 2 25
Contenido desarrollado por Arnoldo Néstor Mauro, Coordinador del Punto Digital Ituzaingó, Corrientes.