Página personal de Jesús Martín Blanco HTML5

La especificación HTML5 trae muchos nuevos elementos a los desarrolladores web, permitiéndoles describir la estructura de un documento web con semántica estandarizada. Este documento describe estos elementos y cómo usarlos para definir el perfil de cualquier documento.

Diseño web con HTML5

El lenguaje de marcas HTML5 es la versión actual del lenguaje HTML. Es el lenguaje que se utiliza para el diseño de páginas web y hace referencia a un estándar desarrollado por W3C

Estructura del código HTML5

Generalmente, la estructura duna página web en HTML5 acostumbra a tener un patrón parecido.

Estructura de una página web en HTML5

					
<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="UTF-8" />
		<title>Primera Página HTML5</title>
	</head>
	<body>
		<h1>Esto es HTML5 </h1>
		<p>Aquí vemos el contenido de la página web. </p>
	</body>
</html>

Visualización de la estructura de una página web en HTML5

Estructura HTML5

En el ejemplo anterior se puede apreciar que el documento html se diferencian dos partes head y body.

En el head hay información adicional de la página web, como puede ser el título que se visualiza en la pestaña del navegador a través del elemento <title>, así como también elementos <meta>, <script>, y <link>, entre otros.

En el body hay el contenido que se visualiza de la página web, el cual puede estar formado por multitud de elementos html que dan formato al documento.

Nota: DTD, Document Type Declaration, es una descripción de estructura y sintaxis de un documento, en este caso HTML. Se utiliza para validar el documento.

Veamos algunos de los apartados que se pueden definir en una página web:

1. El tipo de documento

La primera línea de un documento HTML corresponde a la declaración del tipo de documento, el doctype, i sirve para indicar que versión de HTML se utiliza en el documento.

Ejemplo:

					
<!--Declaración del doctype en HTML5-->
<!DOCTYPE html>
 
<!-- Declaración del doctype en HTML4.01 transicional -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<!--Declaración del doctype en XHTML 1.0 estricto-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Así pues, en el ejemplo anterior se puede apreciar que uno de los objetivos de HTML5 es simplificar y sobretodo la compatibilidad con versiones anteriores, como también con versiones futuras, por tanto incluir el número de versión no tendrá sentido.

2. El documento HTML

El elemento html indica el principio del contenido de la página HTML.

Ejemplo:

					
<!-- Sintaxis en HTML5. -->
<html lang="es">
 
<!-- Sintaxis en XHTML 1.0 -->
<html xmlms="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >

3. La codificación de caracteres

Se suele indicar que codificación de caracteres se utiliza en una página web.

Ejemplo:

					
<!-- Sintaxis en HTML5 --> 
<meta charset="UTF-8" />

<!-- Sintaxi en HTML 4.01 transicional --> 
<meta http-equiv="Content-Type" content="text/html; charset="UTF-8" >

<!-- Sintaxis en XHTML 1.0 estricto --> 
<meta http-equiv="Content-Type" content="text/html; charset="UTF-8" />

4. Estilos CSS

Para indicar los estilos que se utilizan en la página html.

Ejemplo:

					
<!-- Sintaxis en HTML5 -->
<link href="MisEstilos.css" rel="stylesheet" />
 
<!-- Sintaxis en XHTML 1.0 estricte -->
<link href="MisEstilos.css" rel="stylesheet" type="text/css" />

5. Los scripts

En una página web podemos incluir scripts.

Ejemplo:

					
<!-- Sintaxis en HTML5 -->
<script src="elsMeusScripts.js"> </script>
 
<!-- Sintaxis en XHTML 1.0 estricto -->
<script src="elsMeusScripts.js" type="text/javascript"> </script>

Elementos de HTML5

Todos los elementos del estándar HTML5 y sus atributos, tanto los obligatorios o requeridos como los que son opcionales, se pueden consultar, por ejemplo, en la web developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos.

Nota: Se pueden consultar los elementos obsoletos en la dirección siguiente: www.w3.org/TR/html5/obsolete.html. HTML5 ha de ser compatible con las versiones anteriores, así pues, los elementos obsoletos seguirán siendo interpretados correctamente por los navegadores.

Si se quiere consultar todos los elementos HTML estándar, los no estándar y los que están obsoletos y los que no, se puede acceder a developer.mozilla.org/en-US/docs/Web/HTML/Element.

Encabezamientos

Los encabezamientos, headings, son muy importantes en HTML5. Se definen con las etiquetas <h1> hasta <h6>, siendo <h1> la más importante, y <h6> definiría el encabezamiento menos importante.

Automáticamente, los navegadores añadirán un espacio (margen) antes y después de cada encabezamiento.

Es mejor utilizar los encabezamientos para escribir títulos en lugar de utilizar las etiquetas <bold> o <big>, ya que los motores de búsqueda usan los encabezamientos para indexar la estructura y el contenido del sitio web.

Ejemplo:

					
<!doctype html>
 
<html lang="es">
	<head>
		<meta charset="UTF-8" />
		<title>Encabezamientos</title>
	</head>
	<body>
		<h1>Este es el encabezamiento 1</h1>
		<h2>Este es el encabezamiento 2</h2>
		<h3>Este es el encabezamiento 3</h3>
	</body>
</html>

Visualización de los encabezamientos hasta el nivel 3

Encabezamientos

Párrafos

Los párrafos se definen con el elemento <p>. Realmente no podemos estar seguros de como se visualizará un párrafo, ya que hay diferentes dimensiones de pantalla y los párrafos se verán utilizando más o menos líneas.

Con HTML, no se puede cambiar la salida añadiendo espacios en blanco o saltos de línea, ya que el navegador eliminará estos caracteres extras para mostrar la página. Cualquier número de espacios en blanco o de saltos de línea contará con un solo espacio en blanco.

Si se quiere que se tengan en cuenta los espacios en blanco y/o saltos de línea, podemos utilizar el elemento <pre>.

Ejemplo:

					
<!doctype html>
 
<html lang="es">
	<head>
		<meta charset="UTF-8" />
		<title>Párrafos</title>
	</head>
	<body>
		<h1>Este es un encabezamiento 1</h1>
		<p>
		Este párrafo
		contiene diversas líneas
		en el código fuente,
		pero el navegador
		no las muestra.
		</p>
 
		<pre>
		Esté párrafo,
		contiene diversas líneas,
		en el código fuente,
		el navegador
		las muestra.
		</pre>
	</body>
</html>

Visualización de los párrafos y de texto preformateado

Párrafos y texto preformateado

Colores en HTML5

Hay diferentes maneras de especificar los diferentes colores que se utilizan para mostrar el contenido de un sitio web:

con el nombre del color en inglés
con su código RGB
con su código RGBA
con su código hexadecimal

En HTML5, los colores se suelen representar a través de estilos en CSS; así, una manera de aplicar un color a un elemento es a través de su atributo style.

Veamos con un poco más de detalle cada una de las opciones anteriores:

1. Con el nombre del color en inglés

Es un a manera sencilla de especificar un color, aunque este método limita la cantidad de colores representables.

Ejemplo:

					
<p>Colores por su nombre:</p> 
<p style="color:red">Texto de color rojo.</p> 
<p style="color:orange">Texto de color naranja.</p> 
<p style="color:yellow">Texto de color amarillo.</p> 
<p style="color:cyan">Texto de color cian.</p> 
<p style="color:blue">Texto de color azul.</p>

Nota: Se puede encontrar una lista de colores en la dirección siguiente: es.wikipedia.org/wiki/Colores_web

2. Con su código RGB

La paleta de colores RGB proviene de la combinación de tres colores primarios: rojo (Red), verde (Green) y azul (Blue). Por tanto, para especificar el código de un color en RGB lo haremos a través de tres números referentes a la cantidad de rojo, verde y azul respectivamente. De esta manera podemos especificar cualquier combinación de colores.

Ejemplo de colores definidos con su código RGB

					
<p>Colores con su código RGB:</p> 
<p style="color:rgb(255,0,0)">Texto de color rojo.</p> 
<p style="color:rgb(255,165,0)">Texto de color naranja.</p> 
<p style="color:rgb(255,255,0)">Texto de color amarillo.</p>
<p style="color:rgb(0,255,255)">Texto de color cian.</p> 
<p style="color:rgb(0,0,255)">Texto de color azul.</p>

3. Con su código RGBA

Es una extensión de los valores de color RGB añadiendo un valor alpha que especifica la opacidad del objeto.

Un valor de color RGBA se especifica de la siguiente manera:

					
rgba (rojo, verde, azul, alfa)

Donde el parámetro alfa es un número entre 0.0 (completamente transparente) y 1.0 (totalmente opaco).

Ejemplo de colores RGBA

					
<p>Colores RGB con opacidad RGBA:</p>
<p style="background-color: rgba(255, 0, 0, 0.3);">Rojo</p>
<p style="background-color: rgba(0, 255, 0, 0.3);">Verde</p>
<p style="background-color: rgba(0, 0, 255, 0.3);">Azul</p>

4. Con su código hexadecimal

El código RGB también se puede especificar en hexadecimal, en lugar de especificar tres números decimales. Este código se expresa con una tira de caracteres que comienza con el carácter # seguido de seis caracteres hexadecimales, dos por cada color primario.

Ejemplo de colores definidos en hexadecimal

					
<p>Colores con su código HEX:</p> 
<p style="color:#FF0000">Texto de color rojo.</p> 
<p style="color:#FFA500">Texto de color naranja.</p> 
<p style="color:#FFFF00">Texto de color amarillo.</p>
<p style="color:#00FFFF">Texto de color cian.</p> 
<p style="color:#0000FF">Texto de color azul.</p>

Visualización de los colores

Colores

Estilos

Para dar un formato de estilo a un elemento HTML se usará el atributo style. Para aplicar estilos a través de este atributo se hará de la siguiente manera:

					
style="propiedad1:valor1;... propiedadN:valorN;"

Donde propiedad hace referencia a una propiedad CSS i valor hace referencia a un valor CSS.

Ejemplo de atributo style:

					
<h1 style="font-family:Verdana; color:blue;">Título 1</h1>
 
<p style="font-family:arial; color:red; font-size:200%;">Párrafo con formato</p>

Visualización ejemplo con atributo style

Estilos

Formatos del texto

Además de dar formato al texto a través del atributo style, el lenguaje HTML también proporciona otros elementos para hacerlo, como los que se muestran en la siguiente tabla.

Elemento 	Descripción
<b> 		Define texto en negrita
<em> 		Define texto enfatitzado
<i> 		Define texto en itálica, cursiva
<small> 	Define texto más pequeño
<strong> 	Define texto importante
<sub> 		Define texto que ha de aparecer como subíndice
<sup> 		Define texto que ha de aparecer como superíndice
<ins> 		Define texto insertado, subrayado
<del> 		Define texto tachado
<mark> 		Define texto resaltado

Ejemplo de formato negrita e itálica

					
<p>Este texto es normal.</p> 
<p><b>Este texto está en negrita</b>.</p> 
<p><strong>Este texto es importante</strong>.</p> 
<p><i>Este texto está en itálica</i>.</p> 
<p><em>Este texto está enfatizado</em>.</p>

Fijémonos en el ejemplo anterior que la visualización del texto a través de los elementos <b> y <strong> es prácticamente igual, pero si se utiliza el elemento <strong> se añade significado semántico al texto y se está indicando que este es importante.

Se puede apreciar lo mismo entre los elementos <i> y <em>. De esta manera, si se utiliza el elemento <em> también se está añadiendo significado semántico al texto.

Ejemplo de otros formatos

					
<h2>HTML formato del texto <small>pequeño</small></h2>   
<h2>HTML formato del texto <mark>remarcado</mark></h2>   
<p>Este texto es <del>obsoleto</del>.</p> 
<p>Este texto es <ins>obligatorio</ins>.</p>   
<p> Aquí ponemos un superíndice: E = m·c<sup>2</sup></p> 
<p> Aquí ponemos un subíndice: H<sub>2</sub>O</p>

Visualización de diferentes formatos de texto

Formatos de texto

Imágenes

En HTML, las imágenes se definen a través del elemento <img>.

Ejemplo de imágenes:

					
<img src="images/img.jpg" alt="texto alternativo" style="width:120px;height:120px;" />

Donde en el atributo src especificamos la URL o la ruta de la imagen.
Donde en el atributo alt especificamos un texto alternativo por si la imagen no pude ser mostrada.
Donde en el atributo style especificamos el estilo de la imagen; por ejemplo, las dimensiones de la imagen a mostrar.

Nota: El tamaño de la imagen también se puede especificar a través de los atributos width y height, pero es recomendable hacerlo a través del atributo style, para prevenir posibles hojas de estilo que puedan cambiar el tamaño de la imagen.

Visualización de una imagen.

					
<head>
<meta charset="utf-8"/>
<title>Primera Pàgina Web</title>
<style>
img {width:100%;}
</style>
</head>
<body>
<img src="images/img.jpg" alt="Icona" style="width:106px;height:137px;" />
<br />
<img src="images/img.jpg" alt="Icona" style="width:128px;height:128px;" />
<img src="images/img.jpg" alt="Icona" width="128" height="128" />
</body>

Visualización de las imágenes

Icono HTML5

Vemos pues, que un estilo en CSS podría modificar la visualización de la imagen.

A menudo para que el diseño de un sitio web sea adaptativo, es necesario mostrar una imagen u otra más pequeña en función de la medida de la pantalla o de la resolución del dispositivo, así como en función del tamaño del navegador desde el cual se accede al sitio web.

Por este motivo, HTML5 incluye el nuevo elemento <picture> y nuevos atributos, srcset y sizes, para el elemento <img>.

¿Cómo funciona el elemento <picture>? Los pasos básicos para trabajar son:

Abre y cierra la etiqueta <picture>.
Entre esas etiquetas crea el elemento <source> para cada query que quieras ejecutar
Agrega un atributo <media> que contenga tu query con cosas como alto de ventana, ancho, orientación, etc... este atributo es opcional
Agrega el atributo <srcset> con el nombre de archivo correspondiente de la imagen a cargar. Es un atributo opcional
Agrega nombres de archivo extra a tu atributo <srcset> si quieres proveer para diferentes densidades de pixel, como pantallas retina.
Agrega un atributo sizes opcionalmente, acepta cualquier valor que describa la anchura de la imagen (ejemplo sizes="100vw") o un media query que defina la anchura de la imagen (ejemplo sizes="(max-width: 30em) 100vw"). También se puede indicar una lista de media queries separadas por comas y que describan varias anchuras de la imagen (ejemplo sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"). En este caso se utiliza por defecto el último de los valores definidos.
Agrega un elemento <img> como fallback. Este es obligatorio para que el navegador muestre alguna imagen.

Ejemplo que verifica si la ventana es menor de 768px, y si es así carga una imagen más pequeña.

<picture>
    <source srcset="smaller.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <img srcset="default.jpg" alt="My default image">
</picture>

Se puede apreciar que la sintaxis usada en el atributo media es el mismo que se utiliza en media queries de CSS. Se puede verificar lo mismo, se pueden hacer queries para max-width, min-width, max-height, min-height, orientation y demás.

Se pueden usar estas verificaciones para hacer cosas como cargar versiones de una imagen apaisada o vertical dependiendo de la orientación del dispositivo, y también puedes mezclar queries del tipo size al mismo tiempo.

Ejemplo:

					
<picture>
    <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)">
    <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)">
    <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)">
    <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)">
    <img srcset="default_landscape.jpg" alt="My default image">
</picture>

El código de arriba carga una versión recortada de manera apaisada y más chica para un dispositivo más chico y de orientación apaisada.

Si el dispositivo tiene una orientación vertical entonces carga una versión recortada verticalmente, a un tamaño más chico para un dispositivo más chico o de tamaño grande para un dispositivo más grande.

Si quieres proveer diferentes versiones de resolución de tus imágenes para pantallas de alta densidad, lo puedes hacer agregando nombres de archivos extra al atributo srcset. Por ejemplo, veamos nuestro primer snippet del código de arriba agregando el manejo para resolución 2x para pantallas Retina:

					
<picture>
    <source srcset="smaller.jpg, smaller_retina.jpg 2x" media="(max-width: 768px)">
    <source srcset="default.jpg, default_retina.jpg 2x">
    <img srcset="default.jpg, default_retina.jpg 2x" alt="My default image">
</picture>

El media query sigue siendo evaluado primero para que puedas controlar las dimensiones de la imagen que aparecerá en pantalla. Después la densidad de pixel de la pantalla será verificada y si altas densidades cuentan con soporte y son habilitados por las preferencias del usuario, la versión de alta densidad de la imagen será cargada.

Nota: El navegador Internet Explorer no soporta el elemento <picture> ni los atributos srcset ni sizes.

A la hora de visualizar una imagen es necesario tener claros los conceptos de resolución de pantalla y de la imagen:

La resolución de pantalla se expresa en píxeles por pulgada(PPP) y relaciona el número total de píxeles de un monitor con su medida en pulgadas (inches), en la dirección horizontal y la vertical.

La resolución de una imagen indica la cantidad de detalle que puede observarse en esta. Se expresa con dos números enteros, referentes a la cantidad de columnas de píxeles (número de pixeles de ancho) y la cantidad de filas de píxeles (número de píxeles de alto).

Para una correcta visualización y para reducir la cantidad de información descargada es importante intentar adaptar al máximo los píxeles en que se visualizará la imagen con los píxeles que realmente tiene la imagen.

Nota: Evitaremos mostrar una imagen grande, es decir con mucha resolución, en un espacio pequeño de la pantalla.

Enlaces

Los enlaces son los elementos que permiten al usuario navegar de una página web a otra.

El elemento que permite definir un enlace en HTML es <a>.

Veamos los atributos que se pueden especificar para este elemento en la siguiente tabla.

Atributo    	Descripción
href 		Permite definir el destino del enlace.
target 		Permite definir donde abrir el documento enlazado.
id 		Permite definir una marca dentro de la página.
style 		Permite definir el estilo del link.

Ejemplo de enlaces

					
<a href="http://www.google.es" target="_blank">Enlace a Google</a> <br /> 
<a href="pagina.html" style="color: darkblue; text-decoration:none"> Enlace a una página de nuestro sitio web </a> <br /> 
<a href="imagenes/imatgeGran.jpg"><img src="./imatgePetita.jpg" alt="img1" style:"width:30; height:30"/></a>

Visualización de enlaces

Enlaces

Veamos algunas consideraciones sobre los ejemplos anteriores:

El atributo href es obligatorio.
Si el destino del enlace es una página externa al sitio web, es necesario introducir la URL entera.
Si el destino es una página de nuestro sitio web solo es necesario poner la ruta de esta página, y se pueden obviar el dominio y el protocolo.
Si se desea que el enlace permita la descarga de un fichero o recurso, en el destino del enlace pondremos la ruta de este fichero descargable. También una imagen puede ser un enlace.
El atributo target puede tomar por valor el nombre del elemento donde se desea que se abra el enlace. El valor predefinido _blank significa que se abre en una nueva pestaña.
Los enlaces por defecto son de color azul y aparecen subrayados, pero se puede modificar su estilo mediante el atributo style.

Tablas

Si se quiere crear una tabla en HTML5 se utilizarán los elementos de la siguiente tabla.

Elemento			Descripción
<table>				Permite definir una tabla.
<tr>				Permite definir una fila de la tabla.
<td>				Permite definir una columna de una fila.
<th>				Permite definir las cabeceras de la tabla.
<caption>			Permite definir el título de una tabla.

No siempre es necesario utilizar todos los elementos para definir una tabla, pero veremos cómo los elementos <table>, <tr> y <td> son indispensables para visualizarla correctamente.

Ejemplo de tabla

					
<table id="tabla1" border="1" style="width:100%;">
	<tr>
		<td>Concepto</td>
		<td>Precio</td>
		<td>Descripción</td>
	</tr>
	<tr>
		<td>Objeto 1</td>
		<td>10€</td>
		<td>Descripción del objeto 1</td>
	</tr>
	<tr>
		<td>Objeto 2</td>
		<td>20€</td>
		<td>Descripción del objeto 2</td>
	</tr>
</table>

Visualización de tabla

Tabla

A pesar de que en el ejemplo anterior hemos utilizado el atributo border para especificar que se vea el borde de la tabla, todos los aspectos del formato de visualización de una tabla se suelen especificar en lenguaje CSS a través, por ejemplo, de su atributo style.

Para combinar celdas de una tabla se utilizan los atributos colspan y rowspan de los elementos <td> o <th>.

Ejemplo de tabla con filas combinadas

					
<table id="tabla2" style="border:1px solid black">
	<caption> Notas Finales</caption>
	<tr>
		<th>Alumno</th>
		<th>Módulo</th>
		<th>Nota</th>
	</tr>
	<tr>
		<td rowspan="3" style="vertical-align:text-top;">Nombre Alumno 1</td>
		<td>M1 Sistemas Operativos</td>
		<td>9</td>
	</tr>
	<tr>
		<td>M2 Bases de Datos</td>
		<td>8</td>
	</tr>
	<tr>
		<td>M3 Programación</td>
		<td>7</td>
	</tr>
 
	<tr>
		<td rowspan="3" style="vertical-align:text-top;">Nombre Alumno 2</td>
		<td>M1 Sistemas Operativos</td>
		<td>7</td>
	</tr>
	<tr>
		<td>M2 Bases de Datos</td>
		<td>6</td>
	</tr>
	<tr>
		<td>M3 Programación</td>
		<td>5</td>
	</tr>
</table>

Visualización de tabla con filas combinadas

Tablas con filas combinadas

Como vemos en el ejemplo anterior, en las cabeceras, en la fila 1 y en la fila 4 se definen tres columnas. En cambio, en las filas 2, 3, 5 y 6 solo se definen dos columnas, ya que la primera columna esta ya ocupada.

El atributo colspan funciona de manera similar.

Ejemplo de tabla con celdas combinadas

					
<table id="tabla3" border="1">
	<caption> Notas Finales</caption>
	<tr>
		<td rowspan="2" style="vertical-align:bottom;">Alumno</td>
		<td colspan="3">Módulo 1 Sistemas</td>
	</tr>
	<tr>
		<td>EEC</td>
		<td>PEF</td>
		<td>Final</td>
	</tr>
	<tr>
		<td>Nombre Alumno 1</td>
		<td>8</td>
		<td>8</td>
		<td>8</td>
	</tr>
	<tr>
		<td>Nombre Alumno 2</td>
		<td>7</td>
		<td>7</td>
		<td>7</td>
	</tr>
	<tr>
		<td>Nombre Alumno 3</td>
		<td>6</td>
		<td>6</td>
		<td>6</td>
	</tr>
</table>

Visualización de tablas con celdas combinadas

Tablas con celdas combinadas

En el ejemplo anterior la celda "alumno" ocupa dos filas y la celda "Módulo 1 Sistemas" ocupa tres columnas.

Logotipo o icono

Si queréis ver el logotipo del sitio web o el icono de la barra de direcciones o en la pestaña del navegador, tendréis que crear el icono .ico, renombrarlo con el nombre favicon.ico y ponerlo en la raíz del sitio web.

El motivo por el cual el fichero se ha de llamar favicon.ico y se deba poner en la raíz del sitio web es porque, por defecto, los navegadores Firefox, Safari y Opera buscan en esta ubicación.

Para asegurarnos que el navegador encuentra nuestro favicon es recomendable insertar la siguiente línea de código en la cabecera de nuestro documento HTML (entre las etiquetas <head> y </head>), indicando la ruta del favicon, que en este caso es la raíz del sitio.

					
<link rel="Shorcut Icon" href="favicon.ico" type="image/x-icon" />

Para crear nuestro icono, primero es necesario hacer una imagen cuadrada, por ejemplo 32x32 píxeles, en formato JPG, GIF o PNG.

Si se quiere que el icono tenga un fondo transparente, entonces la imagen inicial ha de ser en formato PNG y con el fondo transparente.

Para convertir esta imagen a .ico se puede hacer a través de la web www.favicon.cc o bien de realfavicongenerator.net.

Página personal de Jesús Martín Blanco

Tipos de documentos

El documento HTML

Carácteres

Hojas de estilo

Script

Encabezamientos

Párrafos

Colores

Formatos de Texto

Imágenes

Enlaces

Tablas

Secciones y líneas generales de un documento HTML5

Problemas resueltos por HTML5

El algoritmo de perfilado de HTML5

Definiendo secciones en HTML5

Diseño web con HTML5

El estándar HTML5

Formato de HTML5

Estructura del código HTML5

1. El tipo de documento

2. El documento HTML

3. La codificación de caracteres

4. Estilos CSS

5. Los scripts

Elementos de HTML5

Encabezamientos

Párrafos

Colores en HTML5

1. Con el nombre del color en inglés

2. Con su código RGB

3. Con su código RGBA

4. Con su código hexadecimal

Estilos

Formatos del texto

Imágenes

Enlaces

Tablas

Logotipo o icono