Lenguaje de Marcas (Tema 4: HTML 5)

TEMA 4 “HTML 5”

1.Introducción

HTML 5 es la quinta revisión del estándar cuya versión definitiva se publicó en

2014. Dicha versión tiene como novedades principales:

• Nuevas etiquetas para reproducción multimedia (canvas 2D y 3d, audio, vídeo).

• Incorporación de etiquetas para manejar volúmenes grandes de datos (datagrid,
details, menu y command).
• Mejoras en formularios con nuevos tipos de entrada (email, number, url,
datatime…) para poder validar contenido sin Javascript.
• Visores de fórmulas MathML y de gráficos vectoriales SVG.
• Funcionalidad para arrastrar objetos como imágenes (Drag & Drop).
• Añade etiquetas para la Web Semántica (Web 3.0) como
<header>,<footer>,<article>,etc que permiten describir cual es el significado de
su contenido.

2. Cambios en etiquetas con HTML 5

*Etiquetas eliminadas: Las siguientes etiquetas dejan de formar parte del estándar:

ETIQUETA SIGNIFICADO
<acronym> Servía para crear acrónimos de un texto.
<applet> Insertaba applet de algún lenguaje como Java en una
web
<basefont> Se usaba para especificar un tamaño,color y fuente para
todo el texto de una web
<big> Se empleaba para aumentar el tamaño de un texto
<center> Etiqueta usada para centrar
<dir> Esta marca contenía un listado de directorios o carpetas
<font> Etiqueta usada para cambiar la fuente, color y tamaño
de un texto.
<frame> Hacía referencia a un marco
<frameset> Hacía referencia a un conjunto de marcos.
<isindex> Se usaba para crear una entrada de texto para buscar en
la web.
<noframes> Marca empleada para mostrar contenido alternativo
cuando el navegador no soporta marcos.
<s> Servía para tachar texto
<strike> También se usaba para tachar texto
<tt> Marcaba un texto como teletipo
<xmp> Muestra texto preformateado. Se emplea en su lugar
<pre> o <code>

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

*Etiquetas nuevas: Se incorporan al lenguaje las siguientes etiquetas:

ETIQUETA SIGNIFICADO
<article> Define un artículo en el documento web.
<aside> Define contenido que está incluido en la web pero no
forma parte de su contenido principal.
<audio> Permite insertar audio dentro de la web.
<canvas> Elemento que permite generar gráficos dinámicamente
mediante código.
<datalist> Lista de opciones predefinidas que podemos pasar a un
elemento INPUT
<details> Muestra información complementaria de algún
contenido.
<dialog> Sirve para mostrar una ventana de diálogo emergente.
<embed> Incrusta archivos de audio y vídeo a la web
<figure> Especifica contenido explicativo para imágenes o
gráficos
<footer> Contiene el pie de la página web
<header> Contiene la cabecera de la web
<main> Representa el contenido principal de la página
<mark> Resalta textos de relevancia en el documento web.
<meter> Se utiliza para realizar representaciones gráficas de
valores (diagramas de barras)
<nav> Define donde empieza y donde acaba un menú de
navegación
<output> Contiene la salida o resultado de un cálculo.
Normalmente basado en las entradas de un formulario
<progress> Sirve para crear barras de progreso de una tarea
<ruby> Se usa para anotaciones en la pronunciación de
caracteres en Asia oriental. Contiene la información
junto con su pronunciación.
<rp> Define lo que muestran los navegadores que no
soportan <ruby>
<rt> Se usa junto con <ruby> e indica la pronunciación de
los caracteres de Asia oriental.
<section> Define una sección o apartado genérico del contenido
de una página web.
<source> Especifica el archivo fuente de un elemento audio o
vídeo
<time> Marca una fecha u hora con formato ISO
<video> Permite insertar vídeo en una página web

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

*Etiquetas modificadas: Se añaden o modifican atributos y/o comportamientos de

algunas marcas HTML:

ETIQUETA CAMBIOS
<a> Atributo media añadido y atributo target cambiado.
<b> Etiqueta cambiada
<cite> Etiqueta cambiada
<hr> Etiqueta cambiada
<i> Etiqueta cambiada
<input> Etiqueta cambiada y añadidos 13 valores a type
<small> Etiqueta cambiada

3. El nuevo DOCTYPE en HTML 5

El DOCTYPE es la definición del tipo de documento que vamos a utilizar definiendo en

un archivo DTD (Document Type Definition) que establece la sintaxis y normas del
lenguaje empleado.

En HTML 4.01 la definición del tipo de documento era nada fácil de recordar, como
podemos ver en este ejemplo:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//ES” “http://www.w3.org/TR/html14/strict.dtd”>

<html>
<head>
</head>
<body>
</body>
</html>

Con HTML 5 se simplifica mucho la definición del tipo de documento:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

**La declaración del DOCTYPE va siempre antes de la etiqueta <html> para que el
navegador sepa el tipo de documento que le espera.

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

4. Nuevas etiquetas semánticas de estructura

En la versión anterior de HTML 4 se abusaba demasiado de etiquetas <div>.En

numerosos proyectos web se repiten capas con un sentido semántico concreto (por
ejemplo capa para la cabecera y pie de la web, capas para artículos, menús…):

HTML <div id="header''>

<div id="nav">

<div class="section">

<div class="article"> <div id="sidebar''>

<div class="article">

<div id= "footer''>

Con HTML 5 se ha querido dar importancia a estas estructuras típicas creando

etiquetas propias para ello, permitiendo códigos más sencillos de entender y facilitando
las búsquedas de contenido:

<header>

<nav>

<main>
<section>
<a rrti ele?.11111111
llllll!Ear¡ticle?.11111111 <aside>
<section>
<ar.:ti:Cle~
<ar.:ti.cl ~

<footer>

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

Las etiquetas semánticas incorporadas son:

• <header>: Es la cabecera de una sección y suele incorporar información

importante de navegación, logos, nombres de secciones…

<header>
<h1>SonyThunder: Tu tienda de sonido en Internet</h1>
</header>
• <hgroup>: Se usa dentro de <head> para permitir a una web tener múltiples
títulos y subtítulos con etiquetas de cabecera h1,h2,h3… sin que esto afecte al
SEO (Search Experience Optimization) de la web (posicionamiento en los
motores de búsqueda):

<header>
<hgroup>
<h1>Contacto</h1>
<h2>Teléfonos</h2>
<h2>Correos electrónicos</h2>
</hgroup>
</header>

• <nav>: Es la capa que suele contener los enlaces o menús de navegación (por
ejemplo Inicio, Productos, ¿Dónde estamos?, Contacto…).Los menús de
navegación se suelen implementar con listas:

<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>

• <aside>: Esta etiqueta está pensada para contener información no relevante que
normalmente va a uno de los lados del contenido principal. Por ejemplo banners
publicitarios, información sobre categorías…

<aside>
<h3>Ofertas del día:</h3>
<ul>
<li><a href=”#”>Oferta 1</a></li>
<li><a href=”#”>Oferta 2</a></li>
<li><a href=”#”>Oferta 3</a></li>
</ul>
</aside>

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

• <main>: Representa el contenido principal de la página, puede incluir las

diferentes secciones y/o artículos de la web.
• <section>: Representan una sección o apartado general de la página, pueden
contener subsecciones y/o artículos. Por ejemplo imaginemos una web dedicada
a la venta de productos informáticos que podría tener una sección llamada
“Productos” y a su vez dentro subsecciones de “Memorias RAM”,”Discos
Duros”,etc.

• <article>: Representan a un contenido independiente y autónomo. Por ejemplo

en la sección de “Discos Duros” nombrada anteriormente podríamos insertar una
etiqueta <article> por cada producto de esa sección.

<section>
<h2>PRODUCTOS</h2>
<section>
<h3>DISCOS DUROS</h3>
<article>
<h4>Disco Duro Sólido 500GB</h4>
<p>Precio: 159 euros</p>
</article>
<article>
<h4>Disco Duro Sólido 250GB</h4>
<p>Precio: 79 euros</p>
</article>
</section>
<section>
<h3>MEMORIAS RAM</h3>
<article>
<h4>Módulo DDR4 de 4 GB</h4>
<p>Precio: 39 euros</p>
</article>
<article>
<h4>Módulo DDR4 de 8 GB</h4>
<p>Precio: 61 euros</p>
</article>
</section>

</section>

• <footer>: Es el pie de página y suele contener información poco relevante como

el autor de la web o copyright.

<footer>
<h5>Web creada por IESsoft &copy;</h5>
</footer>

**Con la inclusión en HTML 5 de estas etiquetas semánticas no significa que no se

puedan usar etiquetas <div> solo dan mayor importancia semántica a capas que tenían
un significado especial en las web.

**Las etiquetas semánticas no tienen definido ninguna propiedad de aspecto, si

queremos darle tamaño, color, márgenes,etc lo realizaremos con CSS al igual que
hacíamos con las etiquetas <div>

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

Ejercicio 1: Crea usando las etiquetas semánticas de HTML 5 una web para un
concesionario de motor en el que existirán: una cabecera con el nombre y logo del
concesionario, dos secciones: “Coches Nuevos” y “Coches de ocasión”. Para cada
sección crea al menos 3 artículos que muestren fotos y características de cada vehículo.
En el menú de navegación podremos mostrar los enlaces a cada una de las secciones.
En la etiqueta <aside> se mostrará información de contacto (Teléfono y correo
electrónico del concesionario).En el pie de página se mostrará la empresa
desarrolladora de la web junto con el símbolo de copyright. Puedes usar el siguiente
maquetado:
-

<header> <lheader>

<nav></nav>

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

5. Figuras

Las figuras permiten darle valor semántico a imágenes, gráficos o vídeos de nuestra
web. Para crear una figura usaremos la etiqueta <figure> y en su interior incluiremos un
elemento gráfico junto con su título o leyenda encerrado en la etiqueta <figcaption>. En
el siguiente ejemplo podemos ver la creación de una figura con una imagen:

<body>
<figure>
<img src="clase.jpg"/>
<figcaption>Imagen de un aula de instituto</figcaption>
</figure>
Resto de la web
</body>

Imagen de un aul a de instituto

Resto de la vveb

La marca <figure> puede contener varias imágenes:

<figure>
<img src="clase.jpg"/>
<img src=”clase_dos.jpg”/>
<figcaption>Imágenes de aulas de instituto</figcaption>
</figure>

También podemos incluir <iframes> con vídeos dentro de una figura:

<figure>
<iframe width="560" height="315" src="https://www.youtube.com/embed/NUnfc_59pGM" ></iframe>
<figcaption>Vídeo sobre HTML5</figcaption>
</figure>

Yourtrub
activar
Plr1DdUCt
dobe Flas

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

Ejercicio 2: Crea usando figuras una web con 3 figuras con sus correspondientes
leyendas que muestren vídeos de youtube vídeos sobre:
-Montaje de la CPU en una placa base
-Montaje de la memoria RAM en una placa base
-Montaje de una tarjeta gráfica en una placa base

6. Audio en HTML 5

La aparición de la etiqueta <audio> en la nueva versión del lenguaje nos da la

posibilidad de insertar sonido en nuestra web. Algunos de los formatos soportados son
MP3, MP4,OGG y WAV, aunque no por todos los navegadores. Dentro de la etiqueta
podemos poner el contenido a mostrar cuando el navegador no soporte audio. En la
siguiente imagen podemos ver una tabla de formatos con los navegadores que soportan:
Feature Chro e F1refox Intern e Ex lorer Opera C,aíar
(Gecko)
Basicsuppo rt 3.0 3.5 (1.9.1) 9.0 10.50 3.1

<aud i o>: WAVE. PCM (Yes) 3.5 (1.9.1) Not supp rted Not suppcrted 3.1

, aud i o>: WebM, Vorbis (Yes) 4.0 (2.0) Not supported 10.60 3.1(must be installed separately)

<aud i o>: Ogg, Vorbis (Yes) 3.5 (1.9.1) Not supported 10.50 3.1(must be installed separatety, e.jl.
:? XiphQTI

<aud i o>: MP4, MP3 (YesJ (Not in Chromium) Pa ·al (see 9.0 Not suppcrted 3.1
b ow)

<aud i o>: MP4, AAC (Yes) (Main onty)(Nm in Pa ·al (see 9.0 Not supported 3.1
Chromium) below)

<aud i o>: Ogg, Opus 27 0 15.0(15.0)

La etiqueta <audio> tiene los siguientes atributos:

• src: Es el atributo principal de la etiqueta que tendrá como valor la ruta de la

fuente de audio.
• controls: Si está presente muestra los controles de reproducción y volumen.
• autoplay: Hace que el sonido se reproduzca automáticamente.
• loop: Establece el audio como cíclico haciendo que vuelva a reproducirse al
terminar.
• preload: Es usado para indicar si se almacenará temporalmente en buffer el
audio o no, siendo éstos sus posibles valores:
o “none”: No se almacenará en buffer el archivo
o “auto”: Se almacenará temporalmente en buffer el archivo
o “metadata”: Sólo se almacenarán los metadatos del archivo

<audio src="sonidos/cancion.mp3" controls autoplay loop preload=”none”>

<p>Lo sentimos pero tu navegador no soporta audio.</p>
</audio>

► 2: 06 / 4:53
• -----

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

Ejercicio 3: Crea una web con un listado de tus 5 canciones favoritas en una tabla en
con 3 columnas (una para el autor, otra para el título de la canción y otra para el
control de audio de dicha canción). El audio mostrará los controles de reproducción y
se almacenará en buffer de forma automática.

7. Vídeo en HTML 5

La etiqueta <video> nos permitirá insertar un archivo de vídeo dentro de nuestra

web. Algunos de los formatos soportados son MP4,OGG,H.264 y VP8 aunque no para
todos los navegadores. La siguiente figura muestra una tabla de compatibilidad:

Feature Chrome Firefox Internet Expl rer Opera Safar

(GeckoJ
<Vi deo,: WebM, VPB, (Yes) 4.0 (2.0) 9.0 (:? must be insta led separate'y, e.g.:? 10.60 3.1 (must be insta l ed separately, e.g.
Vorbis WebM MF) :? Penan)

<vi deo,: Ogg, Theora, (Yes) 3.5 11.9.1) f\ot suppcrted 10.50 3.1 (must be insta l ed separately, e.g.
Vorbis :? XiphQT)

<Vi deo,: MP4, H.264, (Yes) (Not in Chromium) Partial (see 9.0 1\01 supported 3.1
MP3 below)

<Vi deo,: MP4, H.264, (Yes) (Not in Chromiu ) Partial (see 9.0 1\01 supported 3.1
AAC below)

La etiqueta <video> admite los siguientes atributos:

• width: Ancho que ocupará el vídeo.

• height: Alto del vídeo
• controls: Si está presente muestra los controles de reproducción y volumen.
• autoplay: Hace que el sonido se reproduzca automáticamente.
• loop: Establece el vídeo como cíclico haciendo que vuelva a reproducirse al
terminar.
• muted: Si está presente se reproducirá silenciado.
• poster: Contiene como valor la imagen a mostrar mientras el vídeo es cargado.
• preload: Es usado para indicar si se almacenará temporalmente en buffer el
audio o no, siendo éstos sus posibles valores:
o “none”: No se almacenará en buffer el archivo
o “auto”: Se almacenará temporalmente en buffer el archivo
o “metadata”: Sólo se almacenarán los metadatos del archivo

Dentro de <video> podemos definir varias etiquetas <source> con las posibles fuentes
del vídeo siendo sus atributos los siguientes:
• src: Es el atributo principal de la etiqueta que tendrá como valor la ruta de la
fuente de vídeo.
• type: Indica el tipo de vídeo a reproducir siendo sus posibles valores:
o “video/ogg”
o “video/mp4”
o “video/webm”

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

<video autoplay controls loop poster="imagen_precarga.jpg">

<source src="robot.ogg" type="video/ogg"/>
<source src="robot.mp4" type="video/mp4"/>
<p>Su navegador no soporta este vídeo</p>
</video>

Ejercicio 4: Descarga para el navegador el complemento “Video DownloadHelper”

para descargar en formato MP4 vídeos de youtube. Baja 4 tráilers de películas y
muéstralas en una tabla de 2 columnas, usando la primera columna para el título de la
película y la segunda para incluir un control de vídeo de su tráiler a tamaño 300px por
300px.

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

8. Formularios en HTML 5

Con la nueva versión de HTML se incorporan algunos nuevos tipos de campos que
permiten validar entradas de datos sin necesidad de Javascript. Algunos de ellos son:

*Campos de búsqueda: Son similares a los campos de texto con la salvedad de que
añaden el botón de borrado. Se crean dándole a type el valor search:

>
Buscar:< name ="busqueda" type ="search" />
</ >

B uSicar~ordenado~ xi
*Campos de teléfono: Permiten indicar al navegador que en ese campo se escribirá un
teléfono, para ello usaremos el valor tel en el atributo type. Con el atributo pattern
podemos especificar un patrón para el número de teléfono, algunas de las reglas que
podemos seguir para el patrón son las siguientes:

[n-m] : Para indicar un rango de caracteres permitidos, siendo “n” el primero y “m” el
último.
*: Indica que el carácter o rango de caracteres que le precede puede repetirse cero o más
veces.
{n}: Indica que el carácter o rango de caracteres que le precede tiene que repetirse “n”
veces.

Sabiendo esto podríamos indicarle para un campo de teléfono de 9 dígitos de la

siguiente forma:
>
Teléfono:< type = tel" pattern= [0-9]{9}" />
11 11

< type = submit" value= Enviar />

11 11 11

</

Con este código le estamos indicando que los dígitos del 0 al 9 tendrán que repetirse 9
veces.

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

Estos campos no presentan gran cambios en navedores de escritorio pero sí en

navegadores de dispositivos móviles:

2 A9C J DEF

4 GHI 5 JKL 6 ~IWO

7 PO~ a ruv g. wn, a

U+

Teclado virtual adaptado al número de teléfono

*Campos de URL: Estos campos se usan para introducir y validar una URL o dirección
de Internet.Se quitan los saltos de línea y espacios en blanco introducidos antes y
después. Se crean usando el valor url en el atributo type:

>
Dirección de Internet:< type ="url" />
< type ="submit" value ="Enviar" />
>

Dirección de lruternet estonoesll 111ad ireceio ni 1 Enviar 1

B Introduce una URL

*Campos de email: Se utilizan para entradas que contienen una dirección de correo
electrónico. Para ello usaremos el valor email en type:
>
Email:< name ="correo" type ="email" />< />
< type ="submit" value ="Enviar" />
</ >
midirecc ion@I

B n t rndu ce exto de rás del s.igrm " ", la dirección "midi reccion@ " es á incompl eta .

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

*Campos de selección de color: Permiten escoger un color usando la paleta selectora del
Sistema Operativo. Para ello usamos el valor color del atributo type:
>
Escoge color:< type="color"/ >
< type ="submit" value="Enviar"/ >
</ >

Escog e c o]o .-, I - 11E n v i ar 1

--------
Co lo res bás ico s :

11 C -

--
-
.
-------
,IQH-

--------
- --- -
1 -
- •

Co lo res pers on a li z a do s :
-
•
-
-

-
-
-

-
M a t i z : 20
S at .: 2 40
R o j o : 255
V erde : 1 28
◄

Definir colores personalizados > > C o lo rlS ó li do LI.Jm _: 1 20 Azu l: O

1 Aceptar 1 1 C ance lar I Agregar a l os col ores personalizados

*Campos de Fecha y Hora: Permiten introducir una fecha utilizando el

menú/ventana/calendario nativos del sistema. Usaremos el valor date en type. También
podemos especificar una fecha mínima y máxima en formato año-mes-día utilizando
min y max:

< >
Fecha de nacimiento:< name="fecnac" type ="date" max="2018-01-01" min ="1900-01-0~"/>
< type="submit" value ="Enviar"/>
</ >

F e.c ha de nacimiento :l 2 5/ 07 / 2000 1 X : T 11 Env iar

Si a type le damos el valor month podremos escoger un mes concreto de un

determinado año:
>
Mes de nacimiento:< name ="mesnac" type ="month" />
< type ="submit" value ="Enviar" />
</ >

Nles de nacimiento~novie mb r e d e 20 03 X : T 11 E11viar

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

O una determinada semana usando como valor week:

>
· · · · · · · · · · ·s·· · emana escogida:< name = semanal
11 11 type = week 11 /
11 >
< type = submit
11 11
value = Enviar />
11 11

</ >
Semrn ,e~oogida:l Se man a 23, 2014 X :: Enviar 1

Si queremos además de la fecha escoger una hora usaremos datetime-local como valor
en type:

< >
Fecha y hora de la cita:< name="cita" type ="datetime-local" />
< type ="submit" value ="Enviar" />
</ >

Fec:ha y h ora d e facita ~06 / 11/ 2017 U ::15 X :: T 11 Enviar 1

Para seleccionar sólo una hora el valor elegido será time:

*Campos numéricos: Estos campos permiten validar entradas solo de tipo numérico con
el valor number en el atributo type , admitiendo también los atributos min y max para
establecer un mínimo y un máximo:

< >
Número de hijos:< name ="numhijos" min ="0" max ="S" ~ype ="number" />
< type ="submit" value="Enviar" />
</ >

Número d e h ij os ~....5---=!:=I I Enviar 1

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

*Campos de rango numérico: Son como los anteriores permiten introducir números pero
usando una barra deslizadora que se mueve dentro de un rango. El valor a aplicar a type
será range:

< >
Número de hijos:0 < name ="numhijos" min ="0" max="S" type ="range" />5 < / >
< type ="submit" value="Enviar" />
</ >

Número de, hijos:O D 5

1 Enviar 1

Podemos indicar cuanto se desplazará la barra en cada paso con el atributo step:
< >
Númer o de puertos USB:0< name ="numussl" min ="0" max="6" type = "range" step="2"/>6< />
< type ="submit" value ="Enviar"/>
</ >

*Sugerencias en campos de entrada: El atributo placeholder permite introducir dentro

de campos de entrada <input> y <textarea> un texto a modo de sugerencia o ayuda para
rellenarlo:
Apellidos:
< type ="text" size ="40" placeholder="Introduzca aquí sus apellidos" />

Apdlidos: llntmduzca aquí sus apellidos

Los elementos <datalist> constituyen una lista de opciones <option> como sugerencias
de entrada a un campo input. Para ello usaremos el atributo list en el campo de entrada
del formulario tomando como valor el identificador del datalist que contiene las
sugerencias:
Almacenamiento escogido:
< list ="almacenamiento" name ="almacenamientoescogido" />
< id ="almacenamiento" >
< label ="DiscoDuro" value ="DiscoDuro" />
< label ="SSD" value ="SSD" />
< label ="BlueRay" value ="BlueRay" />
</ >

Almaceu.a:miento e cogido: 1-----~--~-•-I

Disco Duro
SSlli)

Bll!lleRay

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

*Campos requeridos: En muchos formularios necesitamos que algunos campos estén

rellenos para poder validar el formulario. Para ello emplearemos el atributo required en
aquellas entradas que queramos estén rellenas. En el siguiente ejemplo obligamos a
rellenar el campo “apellidos” del formulario:
< >
Nombre:
< name ="nombre" type="text" size ="40" />
Apellidos:
< name ="apellidos" type="text" size ="40" required />
< type ="submit" value ="Enviar" />
</ >

*Autofoco: Si queremos que al cargar un formulario el foco esté sobre un determinado

campo debemos añadirle a dicha entrada el atributo autofocus:
< >
Nombre:
< name ="nombre" type ="text" size="40" />
Apellidos:
< name ="apellidos" type ="text" size ="40" lautofocus />
< type ="submit" value="Enviar" />
</ >

*Etiquetado de campos: Una buena práctica es asociar a cada campo del formulario un
texto llamado etiqueta. Dicho texto junto con el campo de entrada del formulario irá
anidado en la etiqueta <label> que con su atributo for que recibe como valor el
identificador dado a la entrada quedarán de esa forma asociados formalmente y
permitirá controlar en un futuro acciones que se realicen tanto con la entrada como con
su etiqueta.

Ejercicio 5: Crea un formulario para el registro de propietarios y mascotas de una

clínica veterinaria utilizando las novedades vistas de los formularios en HTML 5

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

9. Enlaces en HTML 5

Las principales novedades para la etiqueta <a> de los enlaces en HTML 5 son:

*Títulos de los enlaces: Al igual que usábamos el atributo alt en las imágenes para dar
una descripción de las mismas, podemos utilizar el atributo global title en los enlaces
para mostrar una descripción y mejorar su búsqueda en Google.
< h~ef="http: //www.yahoo.es " title ="Este enlace lle va r á a Yahoo">Yahoo </ >

Y;mQQ
Es.te enlace llevará a Vahoo

*Relación del enlace: Con la nueva versión de HTML podemos ayudar a los
navegadores a saber qué tipo de enlaces estamos incluyendo y la relación con nuestra
web mediante el atributo rel siendo algunos de sus posibles valores los siguientes:

-“archives”: le indicamos al navegador que el contenido que muestra el enlace está

obsoleto o desactualizado y que no se ha eliminado de la página por contener todavía
información interesante.
< fref ="http : / h'lllfl~ . mode ms 56k . co m" ~el =" ar chi ves "> I nfo rmación de modem de 56 k</ >

-“author”: Se utiliza sobre todo en enlaces a blogs o contenidos de autor o aquellas

webs que hablan sobre ellos.
< h~ef="http: // blogdelp ro gr amado r andaluz.co m" rel ="autho r "> Bl og de pr ogr amación </>

-“first”: Cuando se le da este valor indicamos que el enlace nos lleva a la web inicial de
una secuencia de webs paginadas.
< href ="http : //mi web. es / pagl. ht ml" rel ="first ">Pr i mer a</ >

-“prev”: Indica que el enlace nos lleva a la web anterior dentro de una sección o
secuencia de webs paginadas.
< href="http ://mh ~eb . es / pag4.ht ml" rel ="p r ev">Ante r io r</ >

-“next”: Indica que el enlace nos lleva a la web anterior dentro de una sección o
secuencia de webs paginadas.
< href ="http: //mi web.es / pag2.ht ml" rel ="ne xt "> Siguiente </ >

-“last”: Cuando se le da este valor indicamos que el enlace nos lleva a la web final de
una secuencia de webs paginadas.
< href ="http://miweb.es/pag9.html" rel ="last" >Última</ >

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

-“prefetch”: Si se le da este valor se le está indicando al Navegador que cargue en caché

la web a la que lleva el enlace porque se espera que sea la siguiente página visitada. De
este modo mientras la persona está leyendo la web actual se carga la del enlace,
acelerando así el tiempo de carga de la web indicada en el enlace.
< h-ef ="http : //tutoriales . es/cap2.html" rel ="pre f etch">Ve r e l siguiente capítulo de l t uto r ial</ >

Ejercicio 6: Diseña una web que muestre 5 productos diferentes de forma paginada
utilizando los nuevos atributos title y rel

Ejercicio 7: Crea un estilo CSS para los enlaces que tengan de valor “prev” en el
atributo “rel” de forma que añada la cadena de texto “<<” antes del propio enlace y
otro para aquellos atributos que tengan de valor “next” en el atributo “rel” para que
añadan la cadena de texto “>>” después del propio enlace. Deberás usar las
selectores CSS de atributos y las pseudoelementos after y before para ello.

*Forzado de descarga en los enlaces: Con el nuevo atributo download podemos indicar
al navegador que descargue la fuente del enlace en lugar de abrirla, podemos usarlo sin
valor o especificar el nombre que queremos que le asigne al archivo descargado:

< href="http://miservidor .com/imagen.jpg" download="fotografia .jpg" >Descargar imagen</>

**Por motivos de seguridad la descarga de archivos de distinto servidor al que se

encuentra el archivo no es permitido por los navegadores. Si queremos garantizar al
100% el fuerce de la descarga tendremos que recurrir a Javascript o a otro lenguaje del
lado del servidor.

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

10. Tablas en HTML 5

*Filas de encabezado: Se indican usando la etiqueta <th> en lugar de <td> para las
celdas de la fila de encabezado de la tabla. Es la primera fila de la tabla. Al usar una
etiqueta diferente a las demás permite asignarle un estilo aparte como se muestra en el
siguiente ejemplo:
< >
< >
< charset ="utf-8"/ >
< type ="text/css" >
, {
bor·der·-stj:'l.e : so l id ;
}
{
text-align : center ;
font-:·.'e ight : bo l d;
background-color : gray ;
}
{
bot-·de(-·-col.l.apse : co ll apse ;
}
<! >
</ >

< >

< >
< >
< >N ombr e : </ >
< >Apellidos : </ >
</ >
< >
< >A.na </ >
< >Gómez Sie rr a</ >
</ >
< >
< >Pablo </ >
< >López Albacete </ >
</ >
</ >

</ >

</ >

--- - - ---
-
Ana Gómez Siena
Pablo Lóp ez Albacete

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

*Columnas de encabezado: Podemos también usar las etiquetas <th> para crear
columnas de encabezado sustituyéndolas por la etiqueta <td> donde corresponda:
<! html >
< >
< >
< charset ="ut f-8 "/>
< type ="text/css">
, {
borde,- -style : so li d;
}
{
text-align : cen t er ;
font- :·,e i ght : bo l d;
background-color : gray ;
}
{
borde,- - col lapse : co ll apse ;
}
</ >
</ >

< >

< >
< >
< >Nombr e :</ >
< >Ana </ >
< >Pablo </ >
</ >
< >
< >Apellidos: </ >
< >Gómez Sie rr a</ >
< >López A.lbacete </ >
</ >
</ >

</ >

</ >

-- - Ana Pablo
- --- Gómez Sierra Lop ez Albacet,e

Ejercicio 8: Crea la siguiente tabla con información de teléfonos móviles usando filas
de cabecera:
::\Jarca: 1\I odelo: CPL": ::\Iemoria:

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

*División de tablas grandes: Cuando una tabla contiene una gran cantidad de filas, ésta
puede dividirse en tres partes, haciendo más fácil el seguimiento de la información y del
propio código:

-Encabezado: Se define con la etiqueta <thead> (Table HEAD) , contiene las celdas
que actúan como cabecera en la primera fila
-Cuerpo: Se define con la etiqueta <tbody> (Table BODY), contiene las filas
intermedias de la tabla, es decir aquellas celdas que contienen la información
propiamente dicha.
-Pie: Se define con <tfoot> (Table FOOT) , contiene las celdas que actúan como
cabecera al final del cuerpo.

< >

< >
< >
< >Mar ca </ >
< >Modelo</ >
< >Moto r</ >
</ >
</ >

< >
< >
< >Seat </ > ~larca l\Iodelo l\Iotor
< >Ibiza </ >
2_ 1)
< >2 . 0 TDI </ > Seat. Ibiza
TDI
</ > L
< > Toyota Yaris
< >Toyota </ >
TDI
< >Ya ri s </ >
F ord F,ocus:
L9
< >l. 2 TDI </ > TDI
</ >
< > ~larca l\Iodelo l\Iotor
< >for d</ >
< >focus </ >
< >l. 9 TDI </ >
</ >
</ >

< >
> <
< >Mar ca </ >
< >Modelo</ >
< >Moto r </ >
</ >
</ >
</ >

Ejercicio 9: Diseña una web que muestre la clasificación actual de primera división de
fútbol usando las etiquetas <thead>, <tfoot> y <tbody>.

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

*Título de las tablas: Con HTML 5 se añade la etiqueta <caption> para encerrar el título
de la tabla. Se escribe a continuación de la etiqueta <table>. Podemos indicar la
posición del título con la propiedad CSS caption-side, estableciendo su valor a top para
ponerlo arriba (valor por defecto):
style =" caption - s ide : top ; ">
< >L istado de Automóviles </

< >
< >Mar ca </ >
< >Modelo </ >
< >Mo to r</ >

</ >
< >
< >Seat </ >
< >Ibiza </ >
< >2.0 TDI </ >

</ >

</ >

L istado de Auto:mó -iles.

lfarca :Modelo :\Iotor
Seat Ibiza 2.0 TDI

Estableceremos el valor bottom para situarlo en la parte inferior:

style ="caption - side : bottorr ; ">

< >Li stado de Auto móviles </

< >
< >Mar ca </ >
< >Modelo </ >
< >Moto r </ >

</ >
< >
< >Seat </ >
< >Ibiza </ >
< >2 .0 TDI </ >

</ >

</ >

lfarca l\Iodelo :\Iotor

Seat Ibiza 2.0 TDI
L istado de Automóviles.

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

11. Detalles en HTML 5

Una de las novedades incorporadas a HTML 5 son los detalles desplegables. Para ello
emplearemos la etiqueta <details> que encerrará el concepto a detallar, encerrado a su
vez por la etiqueta <summary> seguido de los detalles a desplegar:

< >Mecenas</ >

Persona que financiaba el arte en el Renacimiento
</ >

► Mecenas
Al pinchar sobre el concepto encerrado en <summary> se desplegarán los detalles. Si
queremos que los detalles aparezcan desplegados desde inicio añadiremos el atributo
open con el valor “open” a <details>:

open ="open" >

< >Mecenas</ >
Persona que financiaba el arte en el Renacimiento
</ >

T Mecenas
P ersona que financiaba el arte en el Renacimiento

Podemos modificar el estilo del marcador que expande y contrae las detalles con el
pseudoelemento ::-webkit-details-marker de la etiqueta <summary>, en el siguiente
ejemplo modificamos su color y su tamaño al doble:

>
< >
:: -webkit- details-marker {
color : # 69c773 ;
font-size : 200 ;

</
</ >

Mecenas
P ersona que financiaba el arte en el Renacimiento

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

Ejercicio 10: Crea una web con un listado de 3 ordenadores portátiles, al pinchar
sobre cada modelo desplegará una tabla en la que se mostrará una foto de dicho
ordenador y sus características

Si queremos modificar el icono de los detalles por otro, deberemos realizar un arreglo al
marcador , cambiar su color a transparente y establecer una imagen de fondo que ocupe
el 100% del espacio con la propiedad background-size:

:: -webkit- details-marker {
background-image : url ( "flecha.png" );
background-size :100 100 ;
color : transparent ;
}
O M ecenas
Persona que fírumciaJba el arte en el Renacimiento

Ejercicio 11: Escribe una web que muestre el nombre de 11 futbolistas desplegando su
posición de juego al pinchar sobre ellos. Cada detalle tendrá una imagen de un balón
de fútbol en lugar de la flecha.

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

12. Cuadros de diálogo

El elemento <dialog> (diálogo) permite crear una caja de diálogo o simplemente una
nueva ventana; su aspecto y funcionamiento es similar al de un div con un color de
fondo. Aparece con un borde alrededor por defecto. Si queremos que aparezca abierto
deberemos usar el atributo open:

open >
Esto es un cuadro de diá l ogo.
</ >

Esto es un cuadro de diá ogo.

Normalmente se usan en combinación con el atributo onclick que recibe como valor la
llamada a una función Javascript que abre o cierra el diálogo y que comprenderemos
mejor cuando tratemos a fondo dicho lenguaje:

< ~ m1rl .. J,!r )" , . ~" , ,.,.,,,, _.,•:- ,., • - . · • ( ' !"!'1 1J.1rJrr ). r ()">
lsto es un cuadro de dialogo.Pincha en el oara cerrar
( / )

( 1,-; - 11" " .. , - · .· •e ' . f'••fil,·1-,•[ .. · ( lllll•ad:r.,'), ' ()">Pincha aau1 para abrlr Dialogo</>

Ejercicio 12: Usando como base el código anterior. Crea una imagen mapeada de un
barco que muestre mediante diálogos, el nombre de cada parte del barco. Para ello usa
un id distinto para cada diálogo y ábrelo al pinchar sobre.

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

13. Remarcado de texto

La incorporación de la etiqueta <mark> permite remarcar un texto de modo similar que

si lo subrayásemos con un rotulador. Suele utilizarse para resaltar resultados de una
búsqueda:

< >
Esta< >pa l abra</ > aparecerá resa l tada
</ >

Esta P.alabra aparece.ra resahada

Ejercicio 13: Crea una línea de texto y remarca dos de sus palabra usando la etiqueta
<mark> y cambia mediante CSS de forma general su color por el naranja.

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

14. Citas en HTML 5

Las citas largas en una web de un determinado autor pueden destacarse haciendo uso de
la etiqueta <blockquote> , dicha etiqueta no incluye las comillas pero sí un margen
izquierdo. La etiqueta <cite> , que suele incluirse dentro de la anterior, se usa para
referenciar al autor, libro, canción o película en la que aparece mostrándolo en cursiva:

>
Me l o contaron y l o ol vi dé; l o v1 y l o entend í ; l o
hi ce y l o aprend í < />
< >Conf uc i o</ >
</ >

M e lo oontarron J lo olv:i.dé~lo vi y lo entendí~ lo hice y lo aprendí

Conjucio

Para citas cortas puede usarse la etiqueta <q> que incluye las comillas de apertura y de
cierre:
< >
So l o se que no se nada
</ >
< />
< >P l atón</

" Solo s:é q¡ue no sé nada "

Platón

Ejercicio 14: Diseña una web que muestre cuatro frases de canciones citando el
nombre de los autores usando las etiquetas vistas en este apartado. Modifica el aspecto
mediante CSS ampliando el tamaño del texto de la frase a 18pt y poniendo en negrita a
los autores.

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

15. El elemento canvas

Con HTML 5 aparece la etiqueta <canvas> que nos permite definir un “lienzo” de
dibujo en nuestra web por medio de Javascript usando un objeto llamado contexto que
permite dibujar gráficos sobre la marcha. El tamaño del lienzo se define con los
atributos width (ancho) y heigth (alto):

No es la finalidad de este tema explicar el código Javascript que se encargará de dibujar

los gráficos, pero utilizaremos herramientas online como la que ponemos a continuación
para obtener el código Javascript necesario:

http://www.htmlcanvasstudio.com/

Ejercicio 15: Usando la herramienta anterior, crea una web con un canvas de tamaño
550px por 550px y dibuja en su interior el símbolo de los juegos olímpicos.

Ejercicio 16: Crea una web que muestre tu nombre en un canvas, usando un color
diferente para cada letra.

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

16. Barras gráficas

La etiqueta <meter> permite crear barras gráficas que representan rangos de valores,
los atributos que admite son:

-value: Especifica el valor actual del elemento. Debe ser mayor que “min” y menor que
“max”.
-min: Indica el valor mínimo de la barra. Su valor por defecto es 0.
-max: Especifica el valor máximo de la barra. El valor por defecto es 1.
-low: Indica el límite superior del valor mínimo.
-high: Indica el límite inferior del valor máximo.
-optimun: Especifica el valor óptimo del rango. Debe estar entre el
valor “min” y “max”, en caso de tener definidos los atributos “high” y “low” también
deberá estar entre ambos.

Las barras que representan el valor son de color verde por defecto, pero si el dato se
encuentra entre los valores min y low o high y max serán de color amarillo.

En el siguiente ejemplo, creamos una barra entre 0 y 30. Establecemos el valor a 12 y

como está por debajo del límite inferior (que es 15) lo muestra de amarillo:

En este ejemplo establecemos el valor a 27, como está también por encima del límite
superior lo muestra amarillo:

Para el valor 21 como se encuentra entre los límites inferior y superior lo muestra de
color verde:

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

Para modificar su aspecto, usaremos las pseudoclases CSS propias de las barras
gráficas:

-webkit-meter-bar (para Chrome) y –moz-meter-bar (para Mozilla): Define el color

principal de la barra.

-webkit-meter-optimum-value (para Chrome) y -moz-meter-optimum-value (para

Mozilla): Define el color de la barra cuando se encuentra en el rango óptimo:

IES Alonso Cano (Dúrcal)

Manuel González Domenech
Lenguaje de Marcas (Tema 4: HTML 5)

-webkit-meter-suboptimum-value (para Chrome) y -moz-meter-optimum-value

(para Mozilla): Define el color de la barra cuando se encuentra fuera del rango
óptimo:

Ejercicio 18: Diseña una web que muestre una barra gráfica que represente una nota
de clase. El límite inferior de la nota será 5 y el superior coincidirá con la nota
máxima. Modifica su aspecto para que las notas incluidas en el rango óptimo se
muestren de color azul degradado y las suspensas de color rojo degradado.

Ejercicio 19: Crea una web con una barra que represente la temperatura de un lugar
que comprende desde los -10 grados hasta los 48 grados. Dicha gráfica mostrará la
barra de color verde oliva aquellos valores que estén por encima de los 15 grados y por
debajo de los 30 y de color naranja aquellos que estén fuera de ese rango. La
temperatura ideal u óptima será la de 20 grados.

IES Alonso Cano (Dúrcal)

Manuel González Domenech