AW UD2 Lenguaje HTML5 2324

UD02.
Lenguaje HTML 5 2º SMR-AW
9Lenguaje HTML5
Parte 1: Conceptos básicos de HTML 5

¿Cómo crear páginas web?
El funcionamiento de sitios web
Con el navegador, se puede visitar cualquier sitio web. HTML y CSS son lenguajes
de programación que permiten crear sitios web. Todos los sitios web se basan en
estos lenguajes, que son la base de los sitios de internet.
HTML fue inventado por Tim Berners-Lee en 1991. Creó el World Wide Web
Consortium (W3C), que define las nuevas versiones de internet relacionadas con los lenguajes de programación. También ha creado más
recientemente, la Fundación World Wide Web, que hace el seguimiento y análisis de la evolución de la Web.
Mucha gente confunde (erróneamente) internet y la Web. Debes saber que la Web es parte de internet. Internet es un gran paquete que
incluye, entre otros: la Web, correos electrónicos, mensajería instantánea, etc. Tim Berners-Lee no es el inventor de internet, es "sólo"
inventor de la Web.
Las funciones de HTML y CSS
Vamos a tratar con dos lenguajes que son complementarios, que tienen funciones diferentes:
HTML (HyperText Markup Language, lenguaje de marcado de hipertexto): apareció por primera vez en 1991 en el lanzamiento de la
Web. Su función es la gestión y organización del contenido. Así que en HTML puedes escribir lo que deseas mostrar en la página: texto,
enlaces, imágenes …
CSS (Cascading Style Sheets, también conocidas como hojas de estilo): el papel de CSS es gestionar la apariencia de la página web
(diseño, posicionamiento, colores, tamaño de texto ...). Este lenguaje ha complementado el código HTML desde 1996.
XHTML es una variante de HTML que es más rigurosa y que es un poco más complicada de manejar.
En pocas palabras, el HTML apareció por primera vez en 1991. A principios de 2000, la organización W3C lanzó el XHTML indicando que
sería el futuro, pero no se difundió como se esperaba. En 2009 XHTML salió de la W3C y decidió regresar a HTML para hacerlo evolucionar.
Hay mucha confusión en torno a estos lenguajes, ya que son muy similares. No es uno mejor que el otro, hay dos maneras de hacer las
cosas. Nosotros vamos a trabajar con la última versión de HTML (HTML5), que ahora es el lenguaje que se está implementando.
Se puede crear un sitio web únicamente en HTML, pero no va a quedar muy estético por la forma como aparecerá la información. Esta es
la razón por la que CSS siempre lo completa.
HTML define el contenido, CSS permite organizar el contenido y definir la presentación: el color, la imagen de fondo, los márgenes, el
tamaño del texto … CSS necesita una página HTML para funcionar, es por eso que, lo primero que se aprende son los conceptos básicos
de HTML antes que CSS.
Página 1 de 33
UD02.Lenguaje HTML 5 2º SMR-AW
Diferentes versiones de HTML y CSS
Con el tiempo, HTML y CSS han evolucionado. La primera versión de HTML (HTML 1.0) ni siquiera ofrecía la posibilidad de mostrar las
imágenes.
Una muy breve historia de estos lenguajes para conocimiento general:
HTML 1: es la primera versión creada por Tim Berners-Lee en 1991.

HTML 2: la segunda versión de HTML apareció en 1994 y se terminó en 1996 con la aparición de HTML 3.0, esta es la versión
que en realidad plantea las bases de las siguientes versiones de HTML. Las reglas y el funcionamiento de esta versión están
dadas por el W3C (mientras que la primera versión fue creada por una persona).
HTML 3: apareció en 1996, esta nueva versión de HTML, añade muchas posibilidades al lenguaje como tablas, applets, scripts,
posicionamiento de texto alrededor de imágenes, etc.
HTML 4: Esta es la versión más común de HTML (en concreto, es HTML 4.01). Apareció por primera vez en 1998 y propone el
uso de marcos (que dividen una página web en varias partes), tablas más complejas, mejoras en las formas, etc. Más importante
aún, esta versión permite por primera vez utilizar hojas de estilo del famoso CSS.
HTML 5: es la última versión, trae muchas mejoras, como la posibilidad de incluir fácilmente vídeos, mejorar el contenido, nuevas
características para los formularios, etc.
CSS 1: en 1996, apareció la primera versión de CSS. En ella se establecen las bases de este lenguaje que permiten mejoras de
presentación en páginas web, tales como colores, márgenes, fuentes, etc.
CSS 2: apareció en 1999 y fue completado por CSS 2.1, esta nueva versión de CSS, añade numerosas opciones. Ahora se
pueden utilizar técnicas de posicionamiento muy precisas que permiten ver los elementos en el lugar deseado en la página.
CSS 3: esta es la última versión, que agrega características muy esperadas, tales como bordes redondeados, degradados,
sombras, etc.
De HTML5 y CSS3 aún no se han finalizado totalmente las versiones estandarizadas de W3C.
Editor de textos (programas)
En realidad, hay muchos programas dedicados a la creación de sitios web.
Para iniciarse basta solo con el bloc de notas o equivalente en otros sistemas operativos distintos de Windows. Sin embargo, actualmente
hay software más potente y ya nadie usa el bloc de notas para escribir programas.
Podemos clasificar estos programas de creación de sitios web en dos categorías:
WYSIWYG (What You See Is What You Get, lo que ves es lo que obtienes). Se trata de programas muy fáciles de usar, se pueden crear
sitios web sin tener que aprender el lenguaje en particular. Entre los más conocidos destaca Dreamweaver, su principal inconveniente es la
mala calidad del código HTML y CSS que se genera de forma automática mediante estas herramientas. Un diseñador de sitios web de
buena calidad, tarde o temprano, precisará de conocimientos de HTML y CSS. En general, no es recomendable el uso de estas
herramientas.
Editores de texto: se trata de programas dedicados a la escritura de código. Por lo general, se pueden utilizar para varios lenguajes, no
sólo para HTML y CSS. Han demostrado ser poderosos aliados para los diseñadores de sitios web.
Hay muchos editores de textos, nosotros usaremos el editor Notepad+ +, uno de los más usados entre los disponibles para Windows.
Este software es sencillo y gratuito.
Para descargarlo (recuerda sólo hay versión para Windows), accede a Notepad ++ en el sitio http://notepad-plus-plus.org/. Aparecerá la
opción download y accediendo a ella, aparecerá la pantalla mostrada a continuación, desde la que se iniciará el proceso de instalación
como cualquier programa de Windows.
Página 2 de 33
Una vez instalado, aparecerá una ventana similar a la siguiente:
Para escribir código HTML: ir a menú Lenguaje -->HTML. Esto permitirá que
el software sepa que vas a escribir código HTML, pues este lenguaje es uno
de entre los muchos de los que permite Notepad++.
Este software utiliza distintos colores dentro del código, lo que permitirá
identificar más fácilmente dicho código.
Hay otros editores de programas disponibles para Windows además de Notepad ++, entre ellos:
Página 3 de 33
Aptana Alleycode
jEdit;
PSPad;
ConTEXT;
... y muchos otros si buscas "Editor de texto" en la Web.
Navegadores. ¿Por qué es importante el navegador?
El navegador es el programa que nos permite visualizar los sitios web. Como ya se ha explicado anteriormente, el trabajo del navegador es
leer el código HTML y CSS (principalmente) para mostrar una salida en pantalla.
Cuando se crea un sitio web, hay que tener en cuenta que los diferentes navegadores nos muestran exactamente el mismo sitio de la
misma manera. Hay que tener el hábito de comprobar con regularidad que el sitio creado trabaja correctamente en la mayoría de los
navegadores.
Es aconsejable instalar varios navegadores en el ordenador, Google Chrome, Mozilla Firefox, Opera o Microsoft Edge.
Sitios como http://www.html5test.com incluyen una lista de funciones soportadas por el navegador.
Los navegadores en el teléfono móvil
Más y más gente consulta los sitios web en el móvil o tableta, por lo que es necesario conocer el mínimo funcionamiento de los navegadores
móviles. De hecho, no te sientas desorientado: la mayoría de los navegadores en los teléfonos inteligentes están en el mismo equipo, son
una versión más ligera adecuada para móvil. Depende del tipo de teléfono, principalmente del sistema operativo.
iPhone. En el iPhone de Apple, se utiliza el navegador Safari Mobile. Esta es una versión ligera y sin embargo muy completa.
Android. Los Android se benefician de Mobile Chrome. De nuevo, esta es una versión adaptada al móvil.
Los navegadores móviles admiten la mayoría de las últimas características de HTML y CSS. La actualización automática ofrece garantías
de que los usuarios de teléfonos móviles están actualizados a las últimas versiones.
FUNDAMENTOS BÁSICOS DE HTML
Es un lenguaje bastante sencillo, se basa en la utilización de etiquetas para definir a cada elemento del documento. Las etiquetas deben
definirse al principio y al final de cada elemento. Estas etiquetas se encierran en las claves < y >; y para marcar la finalización de uso de
una etiqueta utilizamos otra vez la misma etiqueta, pero añadiendo / detrás de la clave de apertura tal que así:
< nombre de etiqueta > El contenido va aquí... < /nombre de etiqueta > Etiqueta con apertura y cierre, delimitan contenido
Ejemplo:
<title> Este es un título </title>
<h1> Mi primer título </h1>
<p> Mi primer párrafo. </p>
En cambio, hay otras que no tienen cierre, son etiquetas huérfanas como, por ejemplo:
<image>
<br>
Página 4 de 33
Este lenguaje se diseñó en un principio para divulgar texto y alguna imagen acompañándolo, nunca se pensó que llegaría a ser tan utilizado
y tener las necesidades que tiene hoy en día, por eso las primeras implementaciones eran tan pobres. Después, las nuevas versiones que
han aparecido, contenían mejoras no solo para los usuarios, sino también para los navegadores y desarrolladores de páginas web, pues
estos también habían aumentado en número.
1. Estructura de una página web HTML5
Donde tenemos las siguientes etiquetas:
<!DOCTYPE html> La primera línea es el tipo de documento. Es esencial porque es lo que indica que se trata de una
página web HTML. En realidad, no es una etiqueta como cualquier otra (pues comienza con un signo
de exclamación), se puede considerar que es sólo la excepción que confirma la regla.
Esta línea, en versiones anteriores de html fue más compleja, era imposible retenerla en la cabeza.
Sólo debe aparecer una vez, en la parte superior de la página (antes de cualquier etiqueta HTML).
La <!DOCTYPE>declaración no distingue entre mayúsculas y minúsculas
<html> Define el inicio y el fin del documento HTML.

…
…
</html>
<head>…</head> La cabecera <head>: esta sección proporciona información general sobre la página, como su título, la
codificación (por gestión de caracteres especiales) de caracteres, el título de la página y enlaces a
hojas de estilo o scripts., etc. Esta sección suele ser bastante corta. La información en la cabecera no
se muestra en la página, se trata de información general para el equipo. Es, sin embargo, una
información muy importante.
El elemento head delimita la cabecera del documento, entre sus etiquetas contiene información como
scripts, metadatos, estilos, ubicación de documentos de estilos, título de la página, etc.
<title>…</title> Título principal de la página

<meta charset="UTF-8"> Esta etiqueta determina la forma en que los caracteres especiales se mostrarán
<meta name="description" content="Descripción de la WEB">

Es el texto que se muestra bajo el título en los motores de búsqueda
<meta name="title" content="Título de la WEB">
Contiene el título que se mostrará en los buscadores.
<link href="carpeta/hoja-de-estilos.css" rel="stylesheet" type="text/css">
Esta etiqueta contiene un link a una hoja de estilos externa, la cual se utilizará en este documento.
<body>…</body> El cuerpo, <body>, aquí es donde se encuentra la parte principal de la página. Todo lo que se escriba
aquí se mostrará en la pantalla. Este es el interior del cuerpo donde se escribirá la mayor parte de
nuestro código.
Página 5 de 33
META
Las etiquetas meta se utilizan para identificar propiedades del documento como por ejemplo el autor, el título y la descripción que mostrarán
los buscadores, etc.
Codificación (charset)
<meta charset="UTF-8">
Esta etiqueta especifica la codificación utilizada en el archivo html. Sin entrar en detalles, ya que esto puede convertirse
rápidamente en complicado. Esta etiqueta determina la forma en que los caracteres especiales se mostrarán (acentos, ideogramas
chinos y caracteres japoneses, árabes, etc.).
Existen varias técnicas de codificación con nombres extraños, el lenguaje utilizado es según la norma ISO-8859-1, 775 OEM,
Windows 1253 ... Sin embargo, el que debe ser utilizado en la actualidad tanto como sea posible es: UTF-8. Este método de
codificación muestra sin ningún tipo de problemas prácticamente todos los símbolos de todas las lenguas de nuestro planeta.
También se requiere que el archivo se guarde correctamente en UTF-8. Por defecto ocurre con frecuencia en Linux, pero en
Windows, debes decírselo al software en general.
Para no hacerlo con cada nuevo ejercicio y ponerlo configurado para todos los ficheros, sugiero que vayas en Notepad++ al menú
Codificación-->Codificar en UTF sin BOM. Si tienes un problema de visualización en la página web, hay un problema con la
codificación, asegúrate de que la etiqueta indica UTF-8 y que el archivo se guarda en UTF-8.
Título principal de la página
<title>…</title>
Cada página debe tener un título que describe lo que contiene. Es aconsejable mantener el título lo suficientemente corto (menos
de 100 caracteres en general).
El título no aparece en la página visualizada, pero sí en la parte superior del mismo (a menudo en la pestaña del navegador). Para
comprobarlo, guarda la página web y ábrela en tu navegador. Verás que el título aparece en la parte superior del navegador.
Debes saber que el título también aparece en los resultados de búsqueda, por lo tanto, la elección del título adecuado es
importante.
Comentarios
Página 6 de 33
Es un texto que simplemente sirve como nota. No se muestra, no es leído por el ordenador, no alterara la visualización de la
página, esto es para que el programador y la gente que lee el código fuente de la página, pueda usar los comentarios para dejar
información sobre el funcionamiento de la página.
Un comentario es una etiqueta HTML con una forma muy especial:

Se puede poner dentro del código fuente en cualquier lugar, no tiene ningún impacto en la página, pero se puede utilizar para
ayudar a identificar en el código fuente (sobre todo si es extenso).
Ejemplo1.html
<!DOCTYPE html >

<html>
<head>
<title> Página de prueba HTML5.IES Laguna… </title >
</head >
<body>
</body>
</html>
Se debe tabular el código, aunque no es obligatorio y no tiene impacto en la visualización en pantalla, pero hace que el código fuente sea
más legible. En el editor, basta con pulsar la tecla de tabulación (Tab) para obtener el resultado.
Las etiquetas se abren y cierran en un orden específico. Por ejemplo, el <html> es el primero que se abre y es también el último que se
cierra (al final del código con </html>). Las etiquetas deben ser cerradas en el orden inverso de su apertura.
Ejemplo:
<html>
<body> Correcto. Una etiqueta que está abierta en el interior de otra también debe estar
cerrada la interior.
</body>
</html>
<html> etiquetas incorrectas, se entremezclan.

<body>
</html>
</body>
Página 7 de 33
HTML5, lo nuevo
HTML5 ha venido a solucionar, entre otras cosas, la falta de un criterio para definir el contenido semántico de una página web
agregando una serie de etiquetas destinadas a facilitar la estructura del documento desde el punto de vista de su significado.
● section: Esta etiqueta sirve para agrupar elementos relacionados entre sí de forma temática. Los section creados a nivel
del body serán aquellos cuyo contenido de significado a la página, o sea, formen el contenido principal de la misma.
● article: Esta etiqueta es «la última etiqueta con significado semántico». Habitualmente se utiliza dentro de un section para
separar las unidades de contenido con significado semántico.
● header: Creada para incluir información destinada a ayudar en la navegación. Suele incluir un H1 y, de declararse a nivel
de body, la etiqueta nav.
● nav: Esta etiqueta la utilizaremos para incluir el menú de navegación.
● footer: Destinada a incluir la información sobre el elemento que lo contiene (autoría, propiedad, enlaces…)
● aside: Su uso indicado es para agrupar el contenido a visualizar en la página, pero que no forma parte del contenido
principal de la página.
Estas nuevas etiquetas permiten varios niveles de anidamiento entre sí. Por ejemplo, un section (por definición del estándar) debe
tener un header y un footer, además de los article necesarios, pudiendo incluso tener otros section en su interior.
A nivel de body también podemos tener un header y footer, estando dentro del header la etiqueta nav con el menú del sitio web.
Los aside también pueden estar a nivel de body, section e incluso article.
Todo esto aporta un alto grado de complejidad a la estructura del documento, aunque aporta una enorme flexibilidad para estructurar
correctamente el contenido de la página desde el punto de vista semántico.
2. Espacios en blanco
El texto dentro de las páginas web no mantiene los
espacios en blanco, solo se considera el primero, no
se tienen en cuenta los siguientes. Solo la etiqueta
<pre> permite preservarlos (pero no es muy
aconsejable su uso, ya que esa etiqueta no nos dice
qué tipo de texto tenemos).
El resultado mostraría en la página este texto:
Este texto tiene muchos espacios
Para mantener esas distancias, el texto tendría que estar dentro de un elemento <pre> …</pre>, pero no se aconseja el uso de pre porque
ayuda a adquirir malos hábitos y dificulta el aprendizaje de las formas avanzadas de maquetar páginas web.
Página 8 de 33
3. Etiquetas básicas de párrafo.

3.1. Párrafo simple.
El texto incluido entre etiquetas <p> … </p> aparecerá siempre junto sin espacios entre líneas. Por defecto cada párrafo de tipo <p> se
separa con una línea respecto a los otros párrafos. Normalmente los navegadores utilizan el tipo de letra Times de tamaño 11pt para la
letra de párrafo normal.
Código En el navegador saldría:
<article>
<p>Producir un jardín interior existoso requiere una técnica pulida y una
profunda comprensión de estas criaturas vivientes verdes...</p>
<footer>© 2009 Clorofila.com</footer>
<address>[email protected]</address>
</article>
3.2. Títulos.
En HTML, se pueden utilizar seis niveles diferentes de encabezados, el elemento h1 representa un encabezado de nivel 1. Los
encabezados (desde h1 a h6) son títulos que definen secciones implícitas en el documento y organizan el contenido en una estructura
jerárquica.
<h1> Significa "como muy importante". En general, se utiliza para visualizar el título de la página al principio.
<h2> Significa "tan importante".
<h3> Algo menos importante (se podría decir, "subtítulo").
<h4> Mucho menos importante.
<h5> No es importante.
<h6> No es importante en absoluto.
Precaución: No se debe confundir con la etiqueta del título. La etiqueta del título muestra la barra de título de la página, como hemos visto.
En la práctica, casi sólo se usa <h1>, <h2> y <h3>, muy rara vez los otros (no se suelen necesitar seis niveles diferentes de titulares).
Ejemplo2.html
Página 9 de 33
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Niveles de títulos </title>
</head>
<body>
<h1>Título súper importante </h1>
<h2> Título importante </h2>
<h3> Título un poco menos importante</h3>
<h4> Título no demasiado importante </h4>
<h5> Título no importante </h5>
<h6> Título que no es realmente importante </h6>
</body>
</html>
Ejemplo3.html
4. Línea y saltos.
Página 10 de 33
Salto de línea
A veces es necesario que, dentro de un determinado texto hacer un salto de línea:
<br> Esta etiqueta no tiene cierre
Línea horizontal
<hr> Esta etiqueta no tiene cierre
Ejemplo4
<!DOCTYPE html>
<html>
<head>
<title> Saltos de línea </title>
</head>
<body>
<p>
¡Hola y bienvenidos a mi sitio! <br >
Esta es mi primera prueba así que perdona.
Por favor, estoy aprendiendo poco a poco cómo funciona.
</p>
<hr>
<p>
Actualmente está un poco vacío, pero volveré en tres días en los que habré aprendido unas cuantas
cosas más.
</p>
</body>
</html>
5. Listas
Las listas a menudo permiten estructurar mejor nuestro texto y ordenar nuestra información. Vamos a descubrir aquí dos tipos de listas:
- listas no ordenadas o listas de viñetas y

- listas ordenadas o listas numeradas o enumeraciones.
5.1. Lista no ordenada o con viñetas

Crear una lista sin orden es muy simple. Sólo tienes que utilizar la etiqueta <ul> que se cierra con </ul>. (ul de "unordered list" -lista no
ordenada, crea una lista no ordenada).
Y escribimos cada elemento de la lista entre dos etiquetas <li> … < /li>.
Ejemplo5.html
Página 11 de 33
5.2. Lista ordenada

El elemento ol permite definir listas ordenadas ("Ordered List"), bien con numeración o alfabéticamente.
Dentro de la lista se utilizan etiquetas <li> …</li> para delimitar los ítems o elementos.
Número del primer ítem

Por defecto, las listas comiezan empezando a contar desde el 1. Mediante el atributo start se puede indicar el número con el que vas a
empezar la lista. En este ejemplo que verás a continuación, indicamos que se empiece desde el 5, en lugar del 1:
<ol start="5">
<li>Primer ítem.</li>
<li>Segundo ítem.</li>
<li>Tercer ítem.</li>
</ol>
Por lo tanto, nuestra lista tendría los elementos 5, 6 y 7. Esto puede resultar interesante si queremos hacer un alto en una lista, añadir
algún fragmento de código HTML, y luego continuar la lista por donde nos encontrábamos.
Tipo de numeración
Mediante el atributo type podemos cambiar el sistema de numeración e indicar otro diferente. Por defecto, las listas numeradas se
muestran con números decimales. Sin embargo, de forma alternativa podemos establecer otros valores con el atributo type, como por
ejemplo i, que lo establece con números romanos (minúsculas):
<ol type="i" start="5">

</ol>
Los valores que podemos indicar en el atributo type son los siguientes:
1: Usa números decimales (valor por defecto): 1, 2, 3, 4, 5...

a / A: Letras minúsculas o mayúsculas: a, b, c, d... ó A, B, C, D...
i / I: Números romanos en minúsculas o mayúsculas: i, ii, iii, iv, v... ó I, II, III, IV, V...
Invertir orden
Por último, tenemos otro atributo interesante que es el reversed. Como te habrás podido imaginar, es un atributo booleano (no requiere
valor), que permite «darle la vuelta a la lista», es decir, que empiece a contar desde el último número y vaya descendiendo.
El siguiente ejemplo muestra una lista numerada con números romanos en mayúsculas, que empiezan en V, pero irán descendiendo, por
lo que terminarán en III:
<ol type="I" start="5" reversed>

Página 12 de 33
</ol>
Si no indicáramos el atributo start="5", los elementos empezarían en III e irían descendiendo hasta I.
Ejemplo6.html
5.3. Listas anidadas

Es posible meter unas etiquetas dentro de otras
Ejemplo7.html
Resultado:
Ejemplo8.html.
Página 13 de 33
5.4. Listas de términos
Hay un tercer tipo de lista, lista de definiciones. Se trata de las etiquetas <dl> (para delimitar la lista), <dt> (para definir un término) y <dd>
(para delimitar la definición de este término). Todas estas etiquetas tienen etiqueta de cierre.
6. Crear enlaces
Se puede hacer un enlace desde una página a.html a otra página b.html, pero también se puede enlazar a otro sitio “externo” (por ejemplo,
http://www.ieslagunadetollon.org). En ambos casos, la operación es la misma.
Es fácil de reconocer los enlaces de la página, aparecen en pantalla escritos de una manera diferente (por defecto, en azul y subrayado) y
un cursor aparece al hacer clic en él.
Para el enlace, la etiqueta que se utiliza es <a …>., se debe agregar un atributo, href, para indicar la página del enlace a la que debe
enlazar.
<a href=” “> Texto o imagen que enlaza </a>
6.1. Enlace a otro sitio web (enlace absoluto)
Ejemplo
la palabra Tiberio estará remarcada de modo que al hacer clic saltaremos a la URL http://es.wikipedia.org/wiki/Tiberio. Ese ejemplo muestra
un salto absoluto, es decir el enlace nos lleva a una dirección URL global.
Página 14 de 33
6.2. Un enlace a otra página del mismo sitio. Dos páginas (archivos HTML) ubicadas en la misma carpeta o directorio.
Para empezar, vamos a crear los archivos correspondientes a dos páginas HTML diferentes, pagina1.html y pagina2.html. Así que vamos
a tener estos dos archivos en el disco y en la misma carpeta.
¿Cómo establecer un vínculo desde la página 1 a la 2 sin http:// en la dirección? Si ambos archivos se encuentran en la misma carpeta,
basta con escribir el enlace como el nombre del archivo de destino al que quieres llevar. Por ejemplo: <a href="pagina2.html">. Se dice que
es un vínculo relativo.
El código que vamos a utilizar para enlazar los archivos en HTML, pagina1.html y pagina2.html, es para la página1, por ejemplo:
<p>Buenos días. ¿Deseas consultar la <a href="page2.html">página 2 </a>?</p>
y el código en la 2, por ejemplo:
<h1>¡Bienvenido a la página 2!</h1>
Dos páginas (archivos HTML) en carpetas diferentes
Idealmente, no deben estar demasiado lejos una de la otra (en una subcarpeta, por ejemplo). Supongamos que la pagina2.html se encuentra
en una subcarpeta llamada contenido.
En este caso, el vínculo debe ser escrito así:
<a href="contenido/pagina2.html">
Si hubiera varias subcarpetas anidadas, se debería escribir, por ejemplo, lo siguiente:
<a href="contenido/privado/pagina2.html">
Si el archivo con el que se enlaza está ubicado en una carpeta que es "superior" en el árbol, se debe escribir dos puntos (..), como se indica:
<a href="../pagina2.html">
Los enlaces relativos no son muy complicados de utilizar una vez que se capta la idea. Basta con mirar en qué "nivel de la carpeta" está el
archivo que se enlaza para aprender a escribir tu enlace.
Enlace a un ancla
Un ancla es una especie de lugar marcado, que se puede poner en las páginas HTML cuando son muy largas. De hecho, vale la pena
poner enlaces a sitios posteriores en la misma página para que el visitante pueda ir directamente a la parte de interés.
Para crear un ancla, sólo hay que añadir el atributo de identidad para una etiqueta que a su vez servirá como punto de referencia.
Esto puede ser cualquier etiqueta, por ejemplo, un título.
Utiliza el atributo id para nombrar el ancla. Esto será útil entonces para hacer un enlace al ancla. Por ejemplo:
<h2 id="mi_ancla"> Título </h2>
Página 15 de 33
Luego, basta con crear un enlace, como siempre se hace, pero esta vez el atributo href contendrá una almohadilla (#) seguida del nombre
del ancla. Ejemplo:
<a href="#mi_ancla"> Ir al ancla </a>
Normalmente, si se hace clic en el enlace, te llevará más abajo en la misma página (siempre que la página tenga el texto lo suficiente largo
como para mover las barras de desplazamiento de forma automática).
Enlace a un ancla situado en otra página
La idea es hacer un enlace que abre otra página y que lleve directamente a un ancla situado más abajo en esa página. En la práctica esto
es bastante simple de hacer: basta con escribir el nombre de la página, seguido de un signo almohadilla (#), seguido por el nombre del
ancla.
Por ejemplo: <a href="anclas.html#parte2"> ... te llevará a la página anclas.html, directamente en el ancla, denominado parte2.
Es posible "forzar" abrir un enlace en una nueva ventana. Para ello, vamos a añadir target = "_blank" en <a>
Dependiendo de la configuración del navegador, la página se abrirá en una nueva ventana o pestaña. No se puede elegir entre abrir una
nueva ventana o pestaña nueva.
Sin embargo, no es recomendable abusar de esta técnica, ya que interfiere con la navegación.
El propio visitante puede decidir si desea abrir el enlace en una nueva ventana. Si se pulsa Shift + clic el enlace se abra en una nueva
ventana o Ctrl + clic para abrir en una pestaña nueva.
Un enlace para enviar un e-mail
Para que enlace a un correo electrónico, se puede utilizar los enlaces mailto. Nada de cambios en la etiqueta, sólo tienes que cambiar el
valor del atributo href de esta manera:
<p><a href="mailto:[email protected]">Enviar un correo electrónico</a></p>
Si haces clic en el enlace, aparece un mensaje en blanco que se abre una nueva ventana para ser enviado a su correo electrónico.
Enlace para descargar un archivo
Hay que proceder exactamente como si fuera un enlace a una página web, pero esta vez indicando el nombre del archivo para descargar.
Por ejemplo, supongamos que deseas descargar apuntes.rar. Sólo tienes que colocar este archivo en la misma carpeta de tu página de
internet (o una subcarpeta) y poner un enlace a este archivo:
<p><a href="apuntes.rar"> Descarga los apuntes</ a> </ p>
El navegador, al ver que no es una página web para mostrar, iniciará el proceso de descarga, cuando se hace clic en el enlace.
7. Imágenes
Insertar una imagen en una página web es fácil. Hay diferentes formatos de imágenes que se pueden utilizar en los sitios web, y no debemos
elegir al azar. De hecho, las imágenes son a veces muy grandes para descargar, lo que ralentiza el tiempo de carga de la página (mucho
más que el texto).
Página 16 de 33
Los diversos formatos de imagen
El peso (en KB o incluso MB) de la imagen será mayor o menor dependiendo del formato elegido y la calidad de la imagen. Por ejemplo, el
programa de dibujo Paint (aunque esto está lejos de ser el mejor) puede elegir entre varios formatos al guardar una imagen. Hay algunos
programas que nos permiten la elección entre una amplia variedad de formatos estándares. Algunos formatos son más adecuados que
otros, dependiendo del tipo de imagen (fotografía, dibujo, cine ...). Todas las imágenes publicadas en internet tienen en común que se
comprimen. Esto significa que el ordenador hace cálculos para reducirlas y por lo tanto sean más rápidas de cargar.
El formato JPEG
Las imágenes en formato JPEG (Joint Photographic Expert Group) están muy extendidas en la Web. Este formato está diseñado para
reducir el peso de imágenes (es decir el tamaño del archivo asociado), que puede comprender más de 16 millones de colores diferentes.
La figura siguiente es una imagen guardada como un archivo JPEG.
Las imágenes JPEG se guardan con la extensión. jpg o jpeg.
Nótese que la calidad JPEG deteriora un poco la imagen, de una manera generalmente imperceptibles. Eso es lo que lo hace tan efectivo
para reducir el tamaño de las fotografías. Cuando se trata de una imagen, por lo general no puedes detectar la pérdida de calidad. Por
contra, si no es una imagen, puede ver la imagen un poco borrosa. En este caso, debes utilizar el formato PNG.
PNG
El formato PNG (Portable Network Graphics) es el más nuevo de todos. Este formato es adecuado para la mayoría de los gráficos). PNG
tiene dos grandes ventajas: se puede hacer transparente y no afecta a la calidad de la imagen.
El PNG se inventó para competir con otro formato, el GIF, del que había que pagar derechos de propiedad por usarlo. En efecto, PNG ha
evolucionado y se ha convertido en el formato más potente para grabar la mayoría de las imágenes.
Página 17 de 33
PNG se presenta en dos versiones, dependiendo del número de colores que la imagen debe incluir:
PNG de 8 bits: 256 colores;

PNG de 24 bits: 16 millones de colores (como una imagen JPEG).
Una versión antigua de Internet Explorer (IE6) no puede mostrar correctamente imágenes de 24-bit PNG transparentes.
De hecho, si el formato PNG de 24-bit puede mostrar tantos colores como una imagen JPEG, y además se puede hacer transparente, sin
afectar la calidad de la imagen ... ¿cuál es la ventaja de JPEG?
La compresión JPEG es la más poderosa para las fotos. Una foto guardada como JPEG se cargará mucho más rápida que si se ha guardado
como PNG. Se sugiere reservar el formato JPEG para las fotos.
GIF
Este formato es bastante viejo, estaba siendo ampliamente utilizado (y sigue siendo ampliamente utilizado por costumbre). Hoy en día, PNG
es en general, mucho mejor que las imágenes GIF, son generalmente más ligeros y la transparencia es mejor. Recomienda utilizar PNG si
es posible.
El formato GIF está limitado a 256 colores (mientras que el PNG hasta millones de colores).
Sin embargo, el GIF mantiene una cierta ventaja sobre el PNG: que no pueden ser animados.
Hay un formato adecuado para cada imagen
En resumen, se ha de considerar el formato de acuerdo con la imagen que se disponga:

Una foto: usar JPEG
Gráficos con pocos colores (menos de 256): Usar PNG de 8-bits o, posiblemente, GIF.
Gráficos con muchos colores: Utilizar un archivo PNG de 24 bits.
Imagen en movimiento: utilizar un GIF animado.
Errores que deben evitarse
-Desterrar otros formatos. Otros formatos no mencionados aquí, como formato de mapa de bits (BMP) están prohibidos porque a menudo
no están comprimidos, por lo tanto, son demasiado grandes. No están del todo adaptados a la Web. Podemos ponerlos en un sitio pero la
carga es muy tediosa.
-Seleccionar cuidadosamente el nombre de la imagen. Si quieres evitar problemas, toma el hábito de guardar los archivos con los nombres
en minúsculas, sin espacios o guiones, por ejemplo: mifoto.png.
Se pueden sustituir los espacios con el carácter de subrayado ("_")
Página 18 de 33
Insertar una imagen

La etiqueta para insertar una imagen es <img>. Se trata de un tipo de etiqueta huérfana (como <br>). Eso significa que no es necesario
escribirla en pares como la mayor parte de etiquetas que se han visto hasta aquí. En efecto, no es necesario definir una parte del texto,
sólo queremos insertar una imagen en un lugar específico.
La etiqueta debe ir acompañada de dos atributos necesarios:
- src: le permite especificar el lugar donde se ubica la imagen que desees insertar. Se puede configurar una ruta absoluta (por
ejemplo, http://www.um.es/logo.jpg) o relativa a la ruta (esto se suele hacer). Así que, si la imagen se encuentra en una
subcarpeta de imágenes, por ejemplo habría que escribir: src = "imagenes/um.png"
- alt: significa "texto alternativo". Siempre se debe especificar un texto alternativo a las imágenes, es decir, un texto breve que
describe lo que contiene la imagen. Este texto se muestra en lugar de la imagen si no puede ser descargada (esto puede
suceder), o en los navegadores de las personas con discapacidad visual, que por desgracia no se puede "ver" la imagen.
También ayuda a los motores de búsqueda para las búsquedas de imágenes. Para um.png, lo haría por ejemplo: alt =
"Universidad de Murcia".
Código: HTML
<p>
Aquí está una foto que tomé durante mis últimas vacaciones en la playa: <br >
<img src="imagenes/playa.jpg" alt="Foto de la playa de Luarca" >
</p>
Pasa el ratón sobre la imagen para ver la descripción, aparece "Foto de la playa de Luarca”.
Imagen con enlace

Si la imagen es muy grande, es aconsejable mostrar en tu sitio una miniatura de la imagen. A continuación, se agrega un enlace en esta
miniatura por lo que los visitantes puedan ver la imagen en tamaño original.
Hay muchos programas para la creación de miniaturas de las imágenes. Por ejemplo Easy Thumbnails. Se usará para obtener dos versiones
de una imagen, como la figura siguiente: la miniatura y la imagen original.
El origen y la imagen en miniatura se ponen en una carpeta llamada img, por ejemplo. Que muestra la versión de montagne_mini y
montagne, puedes hacer un enlace a montagne.jpg que es la imagen ampliada que se muestra al hacer pulsar en la miniatura.
El código HTML que uso para esto:
<p>
¿Quieres ver la imagen en su tamaño original? Clic por encima <br>
Página 19 de 33
<a href="img/montagne.jpg"> <img src = "img/montagne_mini.jpg" alt = "Foto de montañas

nevadas" title = "Pulsa para agrandar" > </a>
</p>
A veces, algunos navegadores optan por mostrar un color azul (o color púrpura) alrededor de la imagen en la que se puede hacer clic.
Afortunadamente, podemos eliminar este marco, gracias a CSS.
Las figuras. Creación de una figura
Son elementos que vienen a enriquecer el texto para complementar la información de la página. Las figuras pueden ser de diferentes
tipos: imágenes, código fuente, citaciones, etc. En resumen, todo lo que sirve para ilustrar el texto es una figura.
En HTML5, se dispone de la etiqueta <figure>.
<figure>
<img src="imagenes/um.png" alt="Universidad de Murcia“>
<figure>
Una figura suele ir acompañada de una leyenda. Para añadir un título, utiliza la etiqueta <figcaption> dentro de la etiqueta <figure>, de
esta manera:
Código: HTML
<figure>
<img src="images/um.png" alt="Universidad de Murcia">
<figcaption> Escudo de la universidad de Murcia</figcaption>
</figure>
Importante, entender el papel de las figuras:

- Si no proporciona ninguna información (es sólo una ilustración para decorar): colocar la imagen en un párrafo.
- Si una imagen ilustra el texto (y no sólo es decorativa), es aconsejable colocarla dentro de una etiqueta <figure>.
- La etiqueta <figcaption> permite escribir el título de la imagen.
La etiqueta <figure> tiene un papel principalmente semántico. Esto significa que se le dice al ordenador que la imagen tiene sentido.
EJEMPLO
<figure>
<img src = "img/opera.png" alt = "Logo de Opera">
<img src="img/firefox.png" alt="Logo Mozilla Firefox">
<img src="img/chrome.png" alt="Logo Google Chrome">
<figcaption> Logos de diferentes navegadores </ figcaption>
</figure>
8. Tablas
Las tablas son uno de los elementos fundamentales de HTML para mejorar la puesta visual de las páginas web. Una tabla normal es un
conjunto de filas y columnas en las que se dispone el texto o las imágenes que deseemos. Las tablas HTML permiten todo tipo de formato
y en especial permiten unir varias celdas para formar tablas con una disposición irregular, lo que permiten diseñar disposiciones muy
Página 20 de 33
complejas en las páginas. Aún más: se permite incluso colocar una tabla dentro de una celda lo que aún permite más libertad en la
maquetación de páginas
En HTML 5 y XHTML a la etiqueta table sólo se le permite el atributo border para indicar la anchura del borde de la tabla (además de, por
supuesto, los atributos comunes a todos los elementos de HTML como id, lang,…). El atributo width no se recomienda utilizar, ya que sus
posibilidades se hacen en todos los navegadores, pero es muy utilizado (junto a otros atributos que ya no se recomiendan) para determinar
la anchura de una tabla.
EJEMPLO
Atributos de la etiqueta table:

En realidad, actualmente en los estándares tanto XHTML como HTML5 sólo se permite el atributo border, pero aun funcionan en los
navegadores todos los que se indican a continuación. La razón de que no se usen se debe a que mediante CSS podemos conseguir un
mejor resultado. Los atributos son:
Página 21 de 33
No se recomienda oficialmente usar las cuatro últimas, pero lo cierto es que están muy aceptadas y casi todos los diseñadores las siguen
usando preferentemente sobre la opción de usar CSS en su lugar.
Celdas de cabecera
Es muy habitual que las tablas muestren datos y que estos posean celdas que sirvan para describirles. Esas celdas se consideran de
cabecera y se marcan con th.
Ejemplo:
Página 22 de 33
En el resultado sólo se aprecia que el navegador colorea en

negrita las celdas de cabecera y con alineación centrada. Pero
con ayuda de CSS podríamos diferenciarlas más (como veremos
en la siguiente unidad).
Títulos en las tablas

A las tablas se les puede poner un título con ayuda de la etiqueta <caption>…</caption>
Ejemplo:
Página 23 de 33
Combinar celdas.
Es posible unir celdas y de esta forma conseguir tablas de formas caprichosas que permiten una maquetación más poderosa. Las etiquetas
de columna (td y th) son las que poseen los atributos que permiten esta operación. En concreto son los atributos:
9. Elementos span y div
Elemento div
Se trata de un elemento clásico (presente en las primeras versiones de HTML) que permite agrupar el contenido. Inicialmente se usaba
para usar su atributo align para que todo un bloque de párrafos tuviera la misma alineación. Posteriormente se ha utilizado con CSS a fin
de definir secciones y así dar un formato concreto a toda la sección. En especial se ha utilizado para definir capas en las páginas web y ese
sigue siendo su principal uso. Dentro de div se pueden colocar todo tipo de etiquetas (tablas, párrafos, imágenes…) La mayoría de
navegadores no da un formato concreto a div, pero si deja un espacio y otro por detrás de la etiqueta.
Elemento span
Es muy similar al anterior, pero como los navegadores no agregan nada (ni siquiera espacios) a esta etiqueta cuando se muestra por
pantalla, en lugar de para definir capas (aunque se podría) se usa para marcar contenido dentro de un párrafo, a fin de que a ese contenido
se le pueda dar un formato especial mediante CSS.
Ejemplo: Dentro de este texto esta frase sale de color azul.
10. Formularios
Los formularios son un elemento en las páginas web que permiten recabar información para enviarla a un servidor de aplicaciones y que la
procese. Por ejemplo, podemos colocar cuadros de texto en los que el usuario pone sus datos y estos pasan a una página PHP que tendrá
la capacidad de recoger dichos datos y actuar en consecuencia.
Página 24 de 33
Los formularios en HTML no han cambiado mucho. La estructura sigue siendo la misma, pero HTML5 ha agregado nuevos elementos, tipos
de campo y atributos para expandirlos tanto como sea necesario y proveer así las funciones actualmente implementadas en aplicaciones
web.
10.1. Etiqueta <form>
Los formularios en HTML no han cambiado mucho. La estructura sigue siendo la misma, pero HTML5 ha agregado nuevos elementos, tipos
de campo y atributos para expandirlos tanto como sea necesario y proveer así las funciones actualmente implementadas en aplicaciones
web.
Todo formulario HTML comienza con una etiqueta form, dentro de ella se colocan todos los controles del formulario.
Fundamentalmente la etiqueta form posee dos atributos:
action. Es el atributo que contiene la URL de la página web o servicios que procesará los datos del formulario.
method. Permite indicar qué instrucción http utilizaremos para pasar la información al destino de nuestro formulario. Las opciones
habituales son GET y POST. No se distingue entre mayúsculas y minúsculas. La diferencia es que GET genera una cadena de
búsqueda en la URL que contiene los datos del formulario; POST, por su parte, pasa los datos pero de forma más oculta.
10.2. Cuadros de texto, <input type=”text”…>
El elemento más importante en un formulario es <input>. Este elemento puede cambiar sus características gracias al atributo
type (tipo). Este atributo determina qué clase de entrada es esperada desde el usuario.
Los tipos disponibles hasta el momento eran la etiqueta multipropósitos text (para textos en general) y solo unos pocos más
específicos como password o submit. HTML5 ha expandido las opciones incrementando de este modo las posibilidades para
este elemento.
El navegador procesará los datos ingresados de acuerdo al valor del atributo type y validará la entrada o no.
El atributo type trabaja junto con otros atributos adicionales para ayudar al navegador a limitar y controlar en tiempo real lo
escrito por el usuario.
Página 25 de 33
10.3. Cuadro de contraseñas, <input type="password"…>
Funcionan como los cuadros de texto, sólo que el texto que se introduce se oculta, mostrando sólo puntos o asteriscos. La sintaxis es:
<input type="password" name="nombre">
Usa los mismos atributos que los cuadros de texto. Si usamos método GET, la contraseña es visible en la parte superior del navegador.
Con POST esto no ocurre, pero aun así podríamos averiguarla. Por ello lo ideal es pasar cifrada la contraseña.
10.4. Botones
Los botones son controles del formulario en los que no se puede escribir, lo que sí permiten es cargar una imagen mediante
su atributo src (que funciona como el atributo src de las imágenes)
botón de envío, input type="submit"
Sirve para llevar a cabo la comunicación entre el formulario y la página que recoge sus datos. La sintaxis es:
<input type="submit" value="texto del botón">
En cuanto se pulsa este botón, los datos del resto de controles se envían a la página receptora del formulario (que se
corresponde a la URL indicada en el apartado action de la etiqueta form).
botón de restablecer, input type="reset"
La sintaxis de este botón es:

<input type="reset" value="texto del botón" >
Este tipo de botones lo que hacen es anular los datos que se han introducidos en los controles del formulario. Deja
todos los controles en su estado inicial.
botón genérico, input type="button"
Un botón genérico se marca indicando type="button" en la etiqueta type. En los formularios no se usa para enviar o
configurar la información, sino que se utiliza normalmente para capturar su pulsación (mediante JavaScript es lo más
habitual) y responder en consecuencia.
10.5. Botones de radio
Página 26 de 33
Se trata de un control fácil de usar que permite elegir una de entre varias opciones. Todas las opciones deben de tener el mismo nombre y
sólo cambia el valor de las mismas. Ejemplo:
<form action="control_form.php" method="get">

<p>Sexo:</p>
<input type="radio" name="sexo" value="hombre">Hombre<br>
<input type="radio" name="sexo" value="mujer" checked="checked">Mujer<br>
</form>
El resultado es:
El atributo checked (que sólo admite el valor checked) hace que el botón en el que se usa, aparezca chequeado por defecto
10.6. Casillas de verificación.
Se usan igual que los botones de radio, aunque no se recomienda agrupar varios con el mismo nombre; no porque no se
pueda, sino porque las casillas se asocian a valores que se activan o desactivan.
La diferencia es que el tipo (type) es checkbox en lugar de radio. También posee el atributo checked para que inicialmente
la casilla aparezca pulsada.
Ejemplo:

<p>Sexo:</p>
<input type="radio" name="sexo" value="hombre">Hombre<br>
<input type="radio" name="sexo" value="mujer" checked="checked">Mujer<br>
Estado civil: Casado <input type="checkbox" name="estadocivil" value="casado" checked="checked">
<br>
<input type="submit" value="Enviar">
</form>
10.7. Cuadros combinados
Un cuadro combinado permite el uso de una lista de opciones en la que se puede elegir la deseada. Todo cuadro comienza
con una etiqueta select que es la encargada de dar nombre (name) al control. Dentro cada opción del cuadro se indica con una
etiqueta option a la que se da valor mediante el atributo value. Dentro de la etiqueta option se coloca el texto que verá el
usuario.
Página 27 de 33
Se pueden agrupar opciones dentro del cuadro usando el elemento optgroup. Ejemplo
10.8. Cuadro de texto multilínea
La etiqueta textarea permite coloca un cuadro de texto de varias líneas para que el usuario puede introducir un texto largo. El atributo rows
permite indicar la altura en líneas de texto del cuadro y el atributo cols, la anchura en caracteres (los demás atributos son como los de la
etiqueta input type="text". Ejemplo:

Escribe un texto descriptivo: <br>
<textarea rows="10" cols="40" name="texto"></textarea><br>
<input type="submit" value="enviar"><br>
</form>
Página 28 de 33
10.9. Controles de HTML 5
El nuevo estándar HTML ha mejorado notablemente los formularios gracias a nuevos controles. La pega es que no todos los controles son
soportados por los navegadores; hay controles que algunos navegadores no permiten utilizar, cuando un navegador no comprende un
control HTML 5, suele traducirle como un cuadro de texto normal.
La diferencia entre ellos es el uso del atributo type. Los buenos navegadores que reconocen estos cuadros, varían su uso para adaptarles
a su función y así facilitar al usuario la entrada de datos. De hecho los navegadores validan los datos y no les dejan enviar hasta que sean
correctos
Tipo email
Casi todo formulario en la web ofrece un campo para ingresar una dirección de email, pero hasta ahora el único tipo de campo disponible
para esta clase de datos era text. El tipo text representa un texto general, no un dato específico, por lo que teníamos que controlar la
entrada con código Javascript para estar seguros de que el texto ingresado correspondía a un email válido. Ahora el navegador se hace
cargo de esto con el nuevo tipo email:
El texto insertado en el campo generado por el código del Listado 6-2 será controlado por el navegador y validado como un email. Si la
validación falla, el formulario no será enviado.
Cómo cada navegador responderá a una entrada inválida no está determinado en la especificación de HTML5. Por ejemplo, algunos
navegadores mostrarán un borde rojo alrededor del elemento <input> que produjo el error y otros lo mostrarán en azul. Existen formas de
personalizar esta respuesta, pero las veremos más adelante.
Tipo url
Este tipo de campo trabaja exactamente igual que el tipo email pero es específico para direcciones web. Está destinado a recibir solo URLs
absolutas y retornará un error si el valor es inválido.
Tipo tel
Este tipo de campo es para números telefónicos. A diferencia de los tipos email y url, el tipo tel no requiere ninguna sintaxis en particular.
Es solo una indicación para el navegador en caso de que necesite hacer ajustes de acuerdo al dispositivo en el que la aplicación es
ejecutada.
Página 29 de 33
Tipo number
Como su nombre lo indica, el tipo number es sólo válido cuando recibe una entrada numérica. Existen algunos atributos nuevos que pueden
ser útiles para este campo:
min El valor de este atributo determina el mínimo valor aceptado para el campo.
max El valor de este atributo determina el máximo valor aceptado para el campo.
step El valor de este atributo determina el tamaño en el que el valor será incrementado o disminuido en cada paso. Por ejemplo,
si declara un valor de 5 para step en un campo que tiene un valor mínimo de 0 y máximo de 10, el navegador no le permitirá
especificar valores entre 0 y 5 o entre 5 y 10.
No es necesario especificar ambos atributos (min y max), y el valor por defecto para step es 1.
Tipo range
Este tipo de campo hace que el navegador construya una nueva clase de control que no existía previamente. Este nuevo control le permite
al usuario seleccionar un valor a partir de una serie de valores o rango. Normalmente es mostrado en pantalla como un puntero deslizable
o un campo con flechas para seleccionar un valor entre los predeterminados, pero no existe un diseño estándar hasta el momento.
El tipo range usa los atributos min y max estudiados previamente para configurar los límites del rango. También puede utilizar el atributo
step para establecer el tamaño en el cual el valor del campo será incrementado o disminuido en cada paso.
Podemos declarar el valor inicial utilizando el viejo atributo value y usar Javascript para mostrar el número seleccionado en pantalla como
referencia.
Tipo date
Este es otro tipo de campo que genera una nueva clase de control. En este caso fue incluido para ofrecer una mejor forma de ingresar una
fecha. Algunos navegadores muestran en pantalla un calendario que aparece cada vez que el usuario hace clic sobre el campo. El
calendario le permite al usuario seleccionar un día que será ingresado en el campo junto con el resto de la fecha. Un ejemplo de uso es
cuando necesitamos proporcionar un método para seleccionar una fecha para un vuelo o la entrada a un espectáculo. Gracias al tipo date
ahora es el navegador el que se encarga de construir un almanaque o las herramientas necesarias para facilitar el ingreso de este tipo de
datos.
Tipo week
Este tipo de campo ofrece una interface similar a date, pero solo para seleccionar una semana completa. Normalmente el valor esperado
tiene la sintaxis 2011-W50 donde 2011 es al año y 50 es el número de la semana.
Página 30 de 33
Tipo month
Similar al tipo de campo previo, éste es específico para seleccionar meses. Normalmente el valor esperado tiene la sintaxis año-mes.
Tipo time
El tipo de campo time es similar a date, pero solo para la hora. Toma el formato de horas y minutos, pero su comportamiento depende de
cada navegador en este momento. Normalmente el valor esperado tiene la sintaxis hora:minutos:segundos, pero también puede ser solo
hora:minutos.
Tipo datetime
El tipo de campo datetime es para ingresar fecha y hora completa, incluyendo la zona horaria.
Tipo datetime-local
El tipo de campo datetime-local es como el tipo datetime sin la zona horaria.
Tipo color
Además de los tipos de campo para fecha y hora existe otro tipo que provee una interface predefinida similar para seleccionar colores.
Normalmente el valor esperado para este campo es un número hexadecimal, como #00FF00.
.
Ninguna interface fue especificada como estándar en HTML5 para el tipo de campo color, pero es posible que una grilla con un conjunto
básico de colores sea adoptada e incorporada en los navegadores.
Atributo placeholder
Página 31 de 33
Especialmente en tipos de campo search, pero también en entradas de texto normales, el atributo placeholder representa una sugerencia
corta, una palabra o frase provista para ayudar al usuario a ingresar la información correcta. El valor de este atributo es presentado en
pantalla por los navegadores dentro del campo, como una marca de agua que desaparece cuando el elemento es enfocado.
Atributo required
Este atributo booleano no dejará que el formulario sea enviado si el campo se encuentra vacío. Por ejemplo, cuando usamos el tipo email
para recibir una dirección de email, el navegador comprueba si la entrada es un email válido o no, pero validará la entrada si el campo está
vacío. Cuando el atributo required es incluido, la entrada será válida sólo si se cumplen las dos condiciones: que el campo no esté vacío y
que el valor ingresado esté de acuerdo con los requisitos del tipo de campo.
11. Elemento video

Es un elemento que sólo funciona en HTML 5 y es el método propuesto para incorporar vídeos a una página web.
Se denomina códec (de codificar, descodificar), al software que se usa para crear los vídeos. Un vídeo actual usa un formato comprimido
de datos, por lo que para crearlos se codifican los datos y para mostrarle, se descodifica.
Eso significa que para ver un vídeo en un formato concreto, se necesita el códec apropiado. Para más inri, cada navegador incorpora unos
codecs. HTML 5 ha conseguido subsanar la situación, mediante la etiqueta source.
La idea es que el vídeo se codifica en varios formatos distintos y luego les hacemos referencia dentro de la etiqueta video y el navegador
usará el formato que sea capaz de traducir (del que disponga de codecs).
El elemento source fundamentalmente dispone de dos atributos: src para indicar la URL que nos lleva al vídeo y type que indica el tipo
MIME del vídeo. Además dentro del tipo MIME se pueden indicar los codecs concretos que necesitamos para decodificar el vídeo.
La idea es la siguiente:
Página 32 de 33
Dentro de type, el uso de codecs es opcional, ya que si el navegador no reconoce el formato no suele hacer caso a los codecs que se
indiquen (aunque a veces les descarga). La idea es que si el primer formato no se reconoce (primer elemento source), se intenta el segundo
y así sucesivamente. Si ninguno es reproducible por el navegador actual, éste mostrará la frase final tras el último source
12. Elemento audio

Se trata de un elemento comparable al video, pero en este caso para incorporar audio a la página.
Página 33 de 33

AW UD2 Lenguaje HTML5 2324

Cargado por

Copyright:

Formatos disponibles

AW UD2 Lenguaje HTML5 2324

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

AW UD2 Lenguaje HTML5 2324

Cargado por

Copyright:

Formatos disponibles

UD02.

Lenguaje HTML 5 2º SMR-AW

Parte 1: Conceptos básicos de HTML 5

El funcionamiento de sitios web

Las funciones de HTML y CSS

Diferentes versiones de HTML y CSS

Una muy breve historia de estos lenguajes para conocimiento general:

HTML 1: es la primera versión creada por Tim Berners-Lee en 1991.

Editor de textos (programas)

En realidad, hay muchos programas dedicados a la creación de sitios web.

Podemos clasificar estos programas de creación de sitios web en dos categorías:

Una vez instalado, aparecerá una ventana similar a la siguiente:

Navegadores. ¿Por qué es importante el navegador?

Los navegadores en el teléfono móvil

FUNDAMENTOS BÁSICOS DE HTML

1. Estructura de una página web HTML5

Donde tenemos las siguientes etiquetas:

<html> Define el inicio y el fin del documento HTML.

<title>…</title> Título principal de la página

<meta name="description" content="Descripción de la WEB">

Título principal de la página

Un comentario es una etiqueta HTML con una forma muy especial:

<!DOCTYPE html >

<html> etiquetas incorrectas, se entremezclan.

El resultado mostraría en la página este texto:

Este texto tiene muchos espacios

3. Etiquetas básicas de párrafo.

Código En el navegador saldría:

<br> Esta etiqueta no tiene cierre

<hr> Esta etiqueta no tiene cierre

- listas no ordenadas o listas de viñetas y

5.1. Lista no ordenada o con viñetas

5.2. Lista ordenada

Número del primer ítem

<ol type="i" start="5">

1: Usa números decimales (valor por defecto): 1, 2, 3, 4, 5...

<ol type="I" start="5" reversed>

5.3. Listas anidadas

5.4. Listas de términos

6.1. Enlace a otro sitio web (enlace absoluto)

<p>Buenos días. ¿Deseas consultar la <a href="page2.html">página 2 </a>?</p>

y el código en la 2, por ejemplo:

<h1>¡Bienvenido a la página 2!</h1>

Dos páginas (archivos HTML) en carpetas diferentes

En este caso, el vínculo debe ser escrito así:

Si hubiera varias subcarpetas anidadas, se debería escribir, por ejemplo, lo siguiente:

<h2 id="mi_ancla"> Título </h2>

<a href="#mi_ancla"> Ir al ancla </a>

Enlace a un ancla situado en otra página

Un enlace para enviar un e-mail

<p><a href="mailto:[email protected]">Enviar un correo electrónico</a></p>

Enlace para descargar un archivo

<p><a href="apuntes.rar"> Descarga los apuntes</ a> </ p>

Los diversos formatos de imagen

Las imágenes JPEG se guardan con la extensión. jpg o jpeg.

PNG de 8 bits: 256 colores;

Hay un formato adecuado para cada imagen