MinisteriodeEducacin,CulturayDeporte.

HTML5enla
educacin
Mdulo2:Aspectosbsicos.

InstitutoNacional deTecnologas Educativas y de Formacin

del Profesorado 2012

HTML5 en la educacin

Formacin en Red

Aspectos bsicos del lenguaje HTML

HTML Bsico
La creacin de una pgina web comienza por la comprensin de sus elementos bsicos, las etiquetas, y
de su diseo estructural. En este mdulo analizaremos ambos conceptos y crearemos nuestros primeros
ejemplos.

Programacin

Objetivos especficos
Comprender el modelo de etiquetas de HTML.
Identificar la estructura bsica de una pgina web.
Crear una pgina con un editor de texto sencillo.
Crear una primera pgina web con un editor avanzado.

Contenidos
Etiquetas HTML.
Estructura de una pgina web.

Criterios de evaluacin
Crear una pgina web con un editor de texto simple.
Crear una web con un editor avanzado.
Realizar modificaciones en una pgina web.

Requisitos mnimos
Conocimientos bsicos sobre equipos informticos y sistema operativo.
Conocimientos bsicos sobre navegadores web.
Conocimientos bsicos de procedimientos en el ordenador: seleccionar, cortar y pegar.

Ministerio de Educacin, Cultura y Deporte

INTEF 1

HTML5 en la educacin

Formacin en Red

Recurso TIC: Aspectos bsicos

Para comenzar a crear nuestras pginas web lo nico que tendremos que hacer es ir componiendo las diferentes etiquetas
HTML dentro de un documento.

Etiquetas HTML
Una etiqueta HTML es un trmino rodeado por un signo de menor y otro de mayor; por ejemplo:
<strong>
Esta etiqueta indica que el texto que aparece a continuacin se debe destacar sobre el resto; normalmente se muestra en
negrita.
En muchos casos necesitaremos tambin una segunda etiqueta que delimite el final. As, para que el texto deje de estar
destacado y contine normalmente, empleamos la misma etiqueta con una barra:
</strong>
El conjunto de las dos etiquetas y el texto contenido en su interior conformaran un elemento HTML.
Algunos elementos requieren esa apertura y cierre, mientras que en otros casos slo necesitaremos una etiqueta, ya que
reflejamos un elemento puntual o con un contenido vaco. Por ejemplo:
<hr />
hace que en el documento aparezca una lnea separando el texto anterior del siguiente. Como se puede observar, cuando un
elemento no va a tener una etiqueta de cierre (no existe un </hr>), el indicador de fin se aade en la propia etiqueta inicial.
Nota: Todas las etiquetas HTML se escriben siempre en minsculas. Si bien los navegadores son capaces de interpretar
las etiquetas en maysculas, las normas de la W3C especifican que todas las etiquetas se debe escribir en minsculas.
Otra caracterstica importante de las etiquetas es que son anidables, por lo que podemos definir un prrafo (mediante las
etiquetas <p> y </p>) y en su interior incuir una lista de elementos, imgenes, texto destacado, etc. empleando diferentes
etiquetas. Veremos muchos ejemplos al respecto.

Parmetros de las etiquetas

Muchas etiquetas HTML necesitan contar con parmetros para funcionar correctamente. stos son modificadores que se
introducen entre los signos de apertura y cierre para definir algn matiz concreto del elemento HTML.
Por ejemplo, la etiqueta <img /> se emplea para insertar una imagen en la pgina web, pero por si sola no funciona
correctamente. Necesita que le incorporemos un parmetro en el que indiquemos qu imagen ser la que se muestre.
Quedara as:
<img src=fotodelgrupo.jpg />
En el ejemplo siguiente, adems de indicar qu imagen se mostrar, establecemos el tamao que ocupar en la pantalla:
<img src=fotodelaula5.jpg width=300px height=150px />
Los parmetros se identifican por un trmino, seguido de un signo de igual y a continuacin, entre comillas, el valor que le
queramos asignar.
Nota: Aunque podemos usar comillas simples, normalmente se usan siempre comillas dobles para englobar el valor de
cada parmetro.

Ministerio de Educacin, Cultura y Deporte

INTEF 2

HTML5 en la educacin

Formacin en Red

Pregunta Verdadero-Falso
La siguiente afirmacin, es verdadera o falsa?

Todos los elementos de HTML necesitan de una etiqueta de apertura y otra de cierre.
Verdadero

Falso

Estructura bsica de una pgina

Las pginas web mantienen una estructura muy sencilla que debemos respetar, para que los navegadores sean capaces de
presentarla. No podemos comenzar nuestra pgina con una etiqueta de prrafo, por ejemplo, sino que debemos indicar qu
tipo de pgina estamos generando, qu informacin adicional llevar y dnde comienza el contenido que debe ser mostrado.
De este modo, cualquier pgina web incluir al menos las siguientes etiquetas:
<html> y </html> colocadas al principio y fin del documento indican dnde comienza y finaliza la pgina web.
<head> y </head> definen un espacio en el que incluiremos contenidos que no se van a mostrar directamente en el
navegador, sino que sirven para describir determinados aspectos del documento, como su ttulo, autor, los estilos que
emplearemos, pequeas funciones que se deben realizar, etc.
<body> y </body> en su interior se incluye la informacin que se mostrar en el navegador. Es el contenido real de
la pgina, estructurado mediante las diferentes etiquetas.
Junto a las tres etiquetas anteriores podemos encontrar algunas ms que son importantes para que la web se interprete
correctamente:
<!DOCTYPE> y <?xml> son dos etiquetas que indican qu tipo de documento estamos generando y a qu normas
se ajusta. Normalmente sern siempre iguales y ser nuestro editor el que se encargue de colocarlas al principio de la
pgina, cuando sea necesario.
Con todo lo anterior, una pgina creada desde cero y con un breve contenido quedara de la siguiente manera:
<!DOCTYPE html>
<html>
<head>
<title>Mi primera pgina</title>
</head>
<body>
<p>Mi primera pgina web, creada con tan slo copiar y pegar.</p>
</body>
</html>
Eso es todo. Ya tenemos diseada nuestra primera pgina web.

Probando la pgina web

Vamos a intentar probar nuestra pgina anterior siguiendo estos pasos:
1. Abriremos un editor de texto sencillo, como el "Bloc de notas" en Windows o el "Editor de textos" de Linux. En su interior
copiaremos y pegaremos el texto anterior o bien lo escribiremos desde cero. En este segundo caso debemos prestar mucha
atencin, para no escribir mal ninguna etiqueta.

Ministerio de Educacin, Cultura y Deporte

INTEF 3

HTML5 en la educacin

Formacin en Red

2. A continuacin guardaremos la pgina web en alguna carpeta de nuestro ordenador. El nombre del archivo debe terminar
en .html o en .htm. As, podemos emplear el nombre index.html, que es el que se suele asignar siempre a nuestra pgina
web principal.
Nota: Los nombres de los archivos de las pginas web deberan escribirse siempre en minsculas, sin espacios y sin
caracteres especiales, reducindolos a letras y nmeros y, si acaso, algn guin alto o bajo. De ese modo no tendremos
problemas al subir nuestras pginas a un servidor web.

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

Ministerio de Educacin, Cultura y Deporte

INTEF 4

HTML5 en la educacin

Formacin en Red

Si todo ha ido bien, veremos una pgina web en nuestro navegador. Aqu han sucedido muchas cosas que se pueden ir
destacando:
El navegador no muestra el texto que hemos escrito en el documento html; slo el contenido que aparece dentro del
<body>, del cuerpo de la pgina.
En la pestaa podemos ver el ttulo de la pgina, que coincide exactamente con lo que establecimos mediante el
elemento <title> incluido en la cabecera de la pgina (<head>).
Merece la pena fijarse en la URL de nuestra pgina web, es decir, la direccin nica. Como nuestro archivo no est
colocado en Internet o en un servidor, la direccin no comienza con http://, sino que veremos que empieza con file://
seguido de la ruta necesaria para llegar al archivo.
Aqu podramos dar por concluido nuestro trabajo. Si hemos comprendido cmo funciona el modelo de etiquetas y de prueba
en el navegador, slo nos queda comenzar a conocer diferentes etiquetas para que los documentos se muestren tal y como
nosotros queremos.
Con esta prueba ha quedado demostrado tambin que el uso de un editor ms sofisticado es totalmente opcional, aunque la
realidad es que se simplifica notablemente la incorporacin de etiquetas, sobre todo aquellas que no se usan con frecuencia.

Pregunta de Eleccin Mltiple

Cuando elaboramos un archivo HTML, qu nombre y extensin hay que dar a dicho archivo?
Index.htm
Un nombre cualquiera ms la extensin .htm
Un nombre cualquiera ms la extensin .html
Las opciones b y c son correctas

Crear una pgina con un editor de pginas web

Los editores de pginas web nos evitarn los pasos ms repetitivos y nos protegern ante errores de escritura. En nuestro

Ministerio de Educacin, Cultura y Deporte

INTEF 5

HTML5 en la educacin

Formacin en Red

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

Para comenzar, haremos clic en el botn Nuevo Archivo. Aparecer un espacio en blanco en el que podemos escribir el
texto que queramos. Aqu no debemos escribir etiquetas; la aplicacin se encargar de incorporarlas por nosotros.

Por ltimo, guardaremos la pgina web con los mtodos habituales. Al hacerlo, el programa nos pedir que indiquemos un
ttulo para la pgina y a continuacin que indiquemos el nombre del archivo.

Ministerio de Educacin, Cultura y Deporte

INTEF 6

HTML5 en la educacin

Formacin en Red

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

Previsualizar la pgina web

Para mostrar la pgina web, podemos acceder a la carpeta en la que hayamos guardado la pgina o simplemente podemos
hacer clic en el botn Vista previa en un navegador, en la parte derecha de la barra de iconos.
El resultado ser el mismo, aunque la primera vez que mostremos una pgina web puede aparecer una imagen como la de la
figura, en la que se nos pide que especifiquemos qu navegador queremos emplear.

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

Cdigo y WYSIWYG
La principal ventaja de los editores de este tipo es que no es necesario desplegar el navegador para probar cada pequeo
cambio que realicemos. Estamos trabajando con un editor visual, que va a intentar mostrarnos lo ms fielmente posible la
apariencia final de nuestra pgina web.
No obstante, este tipo de editores cuentan con la posibilidad de mostrarnos la pgina web tal y como se est creando, para
que podamos modificar cualquier etiqueta que queramos, incrementando as su potencia y permitindonos mejorar nuestro
conocimiento del lenguaje.
Si nos fijamos en la parte inferior, observaremos que hay dos botones, uno llamado wysiwyg que nos lleva a la versin
visual, y el botn source, que nos muestra el cdigo fuente de la pgina, es decir, todos los elementos HTML.

Ministerio de Educacin, Cultura y Deporte

INTEF 7

HTML5 en la educacin

Formacin en Red

Esta visin del cdigo nos va a resultar muy til en estos primeros momentos, para ir analizando cmo vara la pgina web al
incorporar nuevas etiquetas. Adems, cuando seamos expertos diseadores de pginas web, nos ser igual de til para
aadir modificaciones difciles de conseguir desde el editor visual.

Nota
El trmino wysiwyg es el acrnimo de What You See Is What You Get, que se traduce como lo que ves es lo que
obtienes, en referencia a que la aplicacin nos est mostrando la pgina como se mostrar despus.

Tipos de archivo en BlueGriffon

Un ltimo matiz por determinar es qu tipo de pgina web est generando BlueGriffon. Como sabemos, hay varios
estndares diferentes y la aplicacin es capaz de trabajar con todos ellos. Intentemos crear una nueva pgina web, pero en
esta ocasin en lugar de hacer clic en el botn Nuevo Archivo seleccionaremos la pequea flecha que aparece a su
derecha. En el men desplegable haremos clic en Ms opciones.

El cuadro de dilogo que aparece nos indica qu tipo de pgina web estamos creando, entre XHTML y HTML. En nuestro
caso generaremos pginas web basadas en el estndar HTML 5, por lo que seleccionaremos esa opcin y haremos clic en el
botn Aceptar.

Ministerio de Educacin, Cultura y Deporte

INTEF 8

HTML5 en la educacin

Formacin en Red

De aqu en adelante, cada vez que hagamos clic en Nuevo Archivo, se crear una pgina de este tipo. Tendramos que
regresar a Ms opciones para cambiar el modelo de pginas.

Modificar una pgina web

Avanzando un poco en la creacin de la pgina, la forma habitual de trabajar ser la de incorporar el texto que deseemos y a
continuacin ir aplicndole el formato necesario. En este sentido el editor BlueGriffon se comporta como cualquier otra
aplicacin del estilo. Podemos abrir y guardar cada pgina tantas veces como deseemos y aplicar las modificaciones que
necesitemos. Observaremos cmo cada cambio se muestra, tanto en el panel de wysiwyg como en el de cdigo fuente.
En el navegador podremos ver los cambios con tan slo recargar la pgina web, para que ste muestre las ltimas
modificaciones.

Nota
Las pginas web no dejan nunca de ser archivos de texto sencillo, por lo que podemos utilizar diferentes editores
sobre un mismo archivo. Podramos comenzar con BlueGriffon, por ejemplo, para terminar luego haciendo algunos
cambios con un editor sencillo.

Pregunta Verdadero-Falso
Las siguientes afirmaciones, son verdaderas o falsas?

El ttulo de una pgina web jams puede tener maysculas o tildes.

Verdadero

Falso

Bluegriffon es un editor de lenguaje wysiwyg, una variante de cdigo HTML5.

Verdadero

Falso

Texto

Ministerio de Educacin, Cultura y Deporte

INTEF 9

HTML5 en la educacin

Formacin en Red

A continuacin comenzaremos a revisar las principales etiquetas que se utilizan para aplicar formato a un texto.

Ttulos y prrafos
El lenguaje HTML es muy cuidadoso con la organizacin de la informacin, por lo que lo primero que debemos conocer es
cmo estructurar los ttulos y cmo definir los prrafos de texto.

Prrafos
Las etiquetas <p> y </p> se emplean para definir un bloque de texto que se comporta como un prrafo. Normalmente no
dejaremos nunca una porcin de texto suelta por la pgina web, sino que la rodearemos con esas etiquetas. El editor de texto
se encargar de hacerlo por nosotros pero, si estamos usando otro tipo de editor, debemos asegurarnos de qu sucede.

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

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

Los prrafos se insertan automticamente en BlueGriffon cada vez que pulsamos la tecla Intro. No obstante podemos forzar
ese comportamiento seleccionando la opcin Prrafo dentro de la lista desplegable que aparece en la parte izquierda de la
aplicacin. Para quitar las marcas de prrafo, deberamos seleccionar la opcin Cuerpo de texto.

Ministerio de Educacin, Cultura y Deporte

INTEF 10

HTML5 en la educacin

Formacin en Red

Ttulos
Las etiquetas <h1> y </h1> se utilizan para definir un texto como ttulo, indicando que es una cabecera (la h viene de header,
cabecera en ingls) que queremos destacar sobre el resto del texto. Junto a <h1> contamos con <h2>, <h3> y as hasta
<h6> para definir diferentes ttulos, de mayor a menor importancia.
Una pgina web bien diseada contar con estos encabezados para definir los distintos apartados del texto, con sus
diferentes niveles. En la figura se puede observar cmo hemos incorporado algunos encabezados, en este caso h1 y h2, a
nuestro texto. Se consigue aadiendo el texto y a continuacin seleccionando el encabezado deseado en cuadro de la parte
izquierda.

Ministerio de Educacin, Cultura y Deporte

INTEF 11

HTML5 en la educacin

Formacin en Red

Como se puede observar, cada uno de los niveles de encabezado tiene una apariencia diferente de tamao y tipo de letra.
Este aspecto se puede modificar como veremos un poco ms tarde.

Saltos de lnea y lneas separadoras

Para complementar las opciones de separacin del texto, contamos con dos etiquetas ms.
<br /> inserta un salto de lnea en el texto. No genera un nuevo prrafo, sino que parte la lnea en dos. Es un
elemento puntual, que no lleva etiqueta de cierre.
<hr /> inserta un salto de lnea en el texto, pero mostrando una lnea horizontal visible.

Pregunta de Eleccin Mltiple

Cul de las siguientes etiquetas HTML se utiliza para marcar los ttulos de caracter jerrquicamente ms importantes
de un texto?
<p> y </p>.
<h1> y </h1>.
<br /> y <hr />.

Ministerio de Educacin, Cultura y Deporte

INTEF 12

HTML5 en la educacin

Formacin en Red

Actividad 2
En la pgina del ejemplo anterior accede a la versin del cdigo fuente e inserta esas etiquetas en dos lugares
diferentes dentro de un prrafo y observa el resultado. Inserta tambin una lnea horizontal entre dos prrafos. Por
ltimo, prueba a insertar uno de esos elementos dentro de una cabecera y observa el resultado. De este modo
podemos tener un ttulo que ocupe varias lneas, dividido exactamente donde ms nos interese.

Como hemos podido comprobar, podemos emplear estas etiquetas tanto para realizar pequeas separaciones en el interior
de un prrafo como fuera de l. El salto de lnea se emplea con cierta frecuencia, aunque no debera usarse para distanciar
prrafos, ya que veremos otras opciones ms apropiadas. Sea como fuere, desde BlueGriffon resulta muy sencillo insertar
estos saltos de lnea colocndonos en el lugar apropiado y pulsando la combinacin Mays-Intro.
Para insertar una lnea horizontal en BlueGriffon, seleccionaremos la opcin Barra horizontal del men Insertar. All
podremos modificar su apariencia antes de crearla.

Etiquetas de estructura
En las pginas web actuales, normalmente no nos limitaremos a definir todo el texto de la pgina exclusivamente con
etiquetas <hx> y <p>, ya que se consigue una estructura demasiado general, para aplicaciones lectoras para personas con
discapacidad o para los propios buscadores de Internet.
Los estndares actuales nos proporcionan un conjunto de elementos HTML para englobar los contenidos que se suelen
encontrar en una pgina web. Cada uno de estos elementos est pensado para contener diferentes elementos HTML, como
prrafos, imgenes, etc. Estas son sus etiquetas:
<header> y </header>: para definir un bloque de contenido que har las veces de ttulo de la pgina web.
<footer> y </footer>: define el pie de pgina de nuestra web.
<nav> y </nav>: donde incluiremos diferentes enlaces para que el usuario pueda desplazarse entre las partes de
nuestro sitio web.
<section> y </section>: para definir grandes secciones de nuestra pgina.
<article> y </article>: marca los lmites de un contenido especfico, como una entrada de un blog o un artculo en
general.
<aside> y </aside>: se emplea para definir un contenido que est relacionado con la pgina, pero que se debe
considerar como separado del contenido principal.
Junto a estos elementos an contamos con algunos ms como <hgroup> para cabeceras de secciones, <figure> para
contenidos multimedia, <time> para definir la fecha del contenido o <mark> para definir textos destacados para referencias;
todas estas etiquetas con sus respectivos cierres.
Veamos un ejemplo de cmo quedara una pgina web con estas etiquetas. Todas ellas aparecern dentro del elemento
<body>.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Mi primera pgina</title>
</head>
<body>

Ministerio de Educacin, Cultura y Deporte

INTEF 13

HTML5 en la educacin

Formacin en Red

<header>
<h1>Cabecera de nuestra pgina</h1>
</header>
<nav>
<p>Navegacin. Aqu podramos insertar diferentes enlaces al resto de nuestras pginas</p>
</nav>
<section>
<h1>Presentacin</h1>
</section>
<article>
<h2>Una breve nota</h2>
<p>Mi primera pgina web, creada con tan slo copiar y pegar.</p>
</article>
<footer>
<p>Autor y fecha de publicacin</p>
</footer>
</body>
</html>
Si mostramos esta pgina en el navegador, se ver exactamente igual que si quitamos las etiquetas de estructura, pero el
matiz es que con ellas conseguiremos numerosas ventajas, aunque no sean visibles.
Por el momento no haremos un uso profuso de estas etiquetas de estructura, pero un sitio web que se vaya a distribuir por
Internet debera emplearlas.

Pregunta de Eleccin Mltiple

La etiqueta <header> y </header> se utiliza para:
Definir grandes secciones de nuestra pgina.
Definir un contenido que est relacionado con la pgina, pero que se debe considerar como separado del
contenido principal.
Definir un bloque de contenido que har las veces de ttulo de la pgina web.

La cabecera de la pgina web

Como recordaremos, cada pgina web cuenta con un elemento <head> colocado antes del <body>, que no debemos
confundir con los elementos de cabecera (<h1>..<h6>) ni con el encabezado <header> que colocamos dentro del <body>.
Esta cabecera general de la pgina se emplea para incorporar contenidos que no se mostrarn directamente, pero que tienen
una elevada influencia en el aspecto que tendr la pgina y en su comportamiento.
En su interior podemos aadir algunos de los siguientes elementos HTML:
<title> y </title>: se emplea para definir el ttulo de la pgina. Es imprescindible en HTML5, por lo que siempre
debemos aadirlo. Este es el ttulo que se mostrar en la barra de ttulo del navegador, al hacer un marcador a la
pgina o en los buscadores de Internet.
<link />: se utiliza para enlazar con recursos externos, generalmente hojas de estilo. Volveremos sobre ello ms
adelante.

Ministerio de Educacin, Cultura y Deporte

INTEF 14

HTML5 en la educacin

Formacin en Red

<style> y </style>: nos permite definir estilos especficos para la pgina actual. Se suele emplear en combinacin
con el anterior, por lo que los trataremos al llegar a las hojas de estilo.
<base />: define la URL base para el resto de los enlaces que incluyamos en la pgina web. Se emplea en casos
muy concretos.
<script> y </script>: es otro importante elemento que se utiliza para englobar acciones en otros lenguajes,
generalmente Javascript, para conseguir que la pgina web realice determinadas tareas. Estas son operaciones que
se ejecutan al acceder a la pgina, aumentando su versatilidad.

Actividad 3
Para entender el funcionamiento del elemento script, probaremos a aadir este pequeo cdigo dentro de la pgina
web, entre el <head> y el </head>
<script type="text/javascript">
var d = new Date();
alert ("Hoy es "+ d.toLocaleString() );
</script>
Al escribir esta funcin, hay que prestar mucha atencin a cada parntesis, punto y coma, etc. Si lo hemos escrito
bien, aparecer un pequeo cuadro indicndonos la fecha actual. Esto slo funcionar al probar la pgina en un
navegador web, no dentro de BlueGriffon.

<meta> y </meta>: las etiquetas <meta> no son imprescindibles para el funcionamiento de la pgina web, pero su
inclusin es siempre una buena prctica porque permiten identificar con facilidad algunos parmetros de la web, como
autores, codificacin de caracteres, etc.
De todas las etiquetas <meta>, debemos incluir al menos una que defina qu tipo de codificacin de caracteres estamos
empleando. Teniendo en cuenta que nuestra web puede ser vista en cualquier lugar del mundo, la codificacin de caracteres
se encargar de que un ciudadano japons, por ejemplo, pueda ver correctamente nuestra pgina y no una serie de
caracteres ininteligibles. Hoy en da emplearemos siempre la codificacin UTF-8.
Normalmente la expresaremos de esta forma:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
Como se puede observar, las etiquetas meta suelen incorporar dos parmetros, el tipo de etiqueta (que suele ser name) y el
contenido (con el parmetro content).
Veamos algunos ejemplos ms:
<meta content="Antonio Paniagua" name="author">
<meta content="Prcticas para el material de HTML" name="description">
<meta content="html, cabeceras, etiquetas, estilos, prrafos" name="keywords">
Los valores se describen por s solos. Keywords significa palabras clave, es decir, trminos que describen el contenido de
nuestra pgina. An hay algunos valores ms para name, pero con los indicados nuestra pgina estar suficientemente
descrita para que sea localizada con facilidad en Internet.

Cabeceras sencillas
Todo lo anterior ir cobrando sentido poco a poco. No es necesario que nos preocupemos en exceso de tener una cabecera
de pgina completamente rellena, aunque s es apropiado en el caso de los elementos <meta>. Para ello, los editores de
pginas web suelen contar con una opcin que se encargar de hacer el trabajo ms tedioso.
En BlueGriffon seleccionaremos la opcin Formato>Propiedades de pgina (debemos estar en el modo wysiwyg para que

Ministerio de Educacin, Cultura y Deporte

INTEF 15

HTML5 en la educacin

Formacin en Red

est activa) y en el cuadro de dilogo que se despliega, podremos editar las principales etiquetas meta, as como el idioma
en el que est creada la pgina web.

Si revisamos el cdigo de la pgina, veremos cmo se han incorporado todas las etiquetas necesarias.

Pregunta Verdadero-Falso
La siguiente afirmacin, es verdadera o falsa?

Las etiquetas <meta> y </meta> son imprescindibles para el funcionamiento de una pgina web.
Verdadero

Falso

Resumen
Hemos comenzado a conocer los elementos HTML, con sus etiquetas y sobre todo la estructura de una
pgina web. La informacin sobre la pgina se integra en el elemento head, mientras que el contenido
se inserta dentro del elemento body.

Etiquetas fundamentales
Estas etiquetas se emplean con mucha frecuencia:
<p>: prrafos.
<h1> .. <h6>: encabezados.
<br>: salto de lnea.
<hr>: lnea horizontal.
Adems para establecer aspectos estructurales:
<header>, <footer>, <nav>, <section>, <article>, <figure>, <aside> y algunos ms.
En la cabecera emplearemos los siguientes:
<title>: ttulo.
<meta>: informacin sobre la pgina.
<style> y <link>: para trabajar con hojas de estilo.
<script>: para aadir acciones extra a la pgina.

Ministerio de Educacin, Cultura y Deporte

INTEF 16

HTML5 en la educacin

Formacin en Red

Actividades y ejemplos
Actividad 1. Texto
Vamos a incorporar algunos bloques de texto a nuestra pgina web. Accede a esta pgina (http://es.lipsum.com
/feed/html), copia los primeros cuatro bloques de texto y pgalos en una nueva pgina web creada con BlueGriffon;
posteriormente guarda la pgina y comprueba que el texto se ha dividido en prrafos. Si no es as, lo haremos
manualmente pulsando la tecla Intro al final de cada prrafo.

Actividad 2. Texto
En la pgina del ejemplo anterior accede a la versin del cdigo fuente e inserta esas etiquetas en dos lugares
diferentes dentro de un prrafo y observa el resultado. Inserta tambin una lnea horizontal entre dos prrafos. Por
ltimo prueba a insertar uno de esos elementos dentro de una cabecera y observa el resultado. De este modo
podemos tener un ttulo que ocupe varias lneas, dividido exactamente donde ms nos interese.

Actividad 3. Cabecera de la pgina

Para entender el funcionamiento del elemento script, probaremos a aadir este pequeo cdigo dentro de la pgina
web, entre el <head> y el </head>
<script type="text/javascript">
var d = new Date();
alert ("Hoy es "+ d.toLocaleString() );
</script>
Al escribir esta funcin, hay que prestar mucha atencin a cada parntesis, punto y coma, etc. Si lo hemos escrito
bien,aparecer un pequeo cuadro indicndonos la fecha actual. Esto slo funcionar al probar la pgina en un
navegador web, no dentro de BlueGriffon.

Ejemplos
Las diferentes prcticas, recursos y ejemplos realizadas en este mdulo estn disponibles para realizar pruebas.
Ejemplos del mdulo

Aplicacin al aula
Aspectos bsicos del lenguaje HTML

Ministerio de Educacin, Cultura y Deporte

INTEF 17

HTML5 en la educacin

Formacin en Red

Utilizando los elementos descritos en esta unidad, el alumnado estar en condiciones de disear su primera pgina web
sencilla.

Programacin

Programacin dirigida al alumnado

Objetivos
Conocer la estructura bsica de una pgina web.
Identificar las etiquetas fundamentales de una pgina web.
Crear un documento web bsico.

Contenidos
Anlisis de una pgina web.
Partes de una pgina web.
Etiquetas de texto.
Cabecera de una pgina web.

Materiales y recursos
Ordenador con acceso a Internet.

Temporalizacin
Dos sesiones.

Planificacin

Planteamiento de la actividad
El alumnado aprende a identificar las partes bsicas de una pgina web y es capaz de leer sus diferentes bloques.
Adems incorporar contenido a la pgina y le aplicar etiquetas de texto bsicas.

Organizacin del aula

Trabajaremos en un aula con ordenadores, con un agrupamiento individual o por parejas.

Desarrollo de la actividad
Se analizan las etiquetas que definen una pgina web.
Se estudian los diferentes elementos para la edicin de texto.

Presentacin y evaluacin de los resultados

Ministerio de Educacin, Cultura y Deporte

INTEF 18

HTML5 en la educacin

Formacin en Red

La evaluacin se realizara mediante la revisin de la pgina creada y la observacin del proceso. Se pueden evaluar
varios aspectos a lo largo de todo el proceso:
Comprensin de elementos bsicos HTML y de la estructura de una pgina.
Destreza en el trabajo con la aplicacin.
Expresin escrita al elaborar los contenidos.

Sugerencias metodolgicas

La metodologa empleada es la de proyecto.

Para su aplicacin proponemos:

Primera sesin
Explicamos el objetivo de la actividad; describimos los conceptos necesarios.
El alumnado estudia varios modelos de pginas sencillas.
Creamos un modelo de pgina web simple prestando atencin a los diferentes bloques.

Segunda sesin
Analizamos diferentes etiquetas de texto y revisamos algunos ejemplos.
Retomando el ejemplo de la sesin anterior, el alumnado incorpora textos sobre una temtica propuesta por ellos.
Aplicamos el formato necesario y guardamos el resultado.

Atencin a la diversidad
Actividad de refuerzo
Para aquellos alumnos que puedan tener ms dificultad, podemos facilitarles un modelo prediseado con los textos,
listo para aplicar el formato.

Actividad de ampliacin
La profundizacin en esta actividad se basara en que el alumno incorporase diferentes elementos estructurales a la
cabecera o al cuerpo de la pgina.

Ministerio de Educacin, Cultura y Deporte

INTEF 19