1. Uso de colores para texto y fondo, incluyendo al menos colores degradados en alguna de sus cajas.
fondos de página, incluso colores degradados!!!
2. Inclusión de tipografías externas de Google Fonts, Adobe Edge Web Fonts o un servicio similar on-line.
En los siguientes párrafos cuyo fondo es degradado se muestra texto con distintas tipografías. Para poder utilizar tipografías externas de Goole Fonts añadimos lo siguiente a nuestro código:
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
Ahora tan sólo nos queda... utilizar las tipografías importadas :)
Grumpy wizards make toxic brew for the evil Queen and Jack.
Grumpy wizards make toxic brew for the evil Queen and Jack.
3. Distintos encabezados.
Nota: Tenemos que tener cuidado con el uso de encabezados, no debemos utilizar etiquetas como <div> o <span> para definir encabezados de sección o estructurar el contenido, ya que éstas etiquetas no proporcionan contenido semántico. Lo correcto es utilizar las etiquetas de encabezado (<h1> ... <h6>) y definir su presentación visual con CSS. Accesibilidad web: Encabezados
Para mostrar un ejemplo de uso de encabezados utilizaré parte del temario del módulo 2 del curso:
MODULO 2: ESTRUCTURA HTML5/CSS3 PARA MULTIPANTALLA Y OBJETOS MULTIMEDIA
Estructuración de interfaces en HTML5 y CSS3 adaptados a un entorno multi-pantalla adaptativo a móviles y tabletas.
Tema 0. Transparencias y ejemplos del módulo
Las transparencias y los ejemplos están en el fichero ZIP adjunto y se deben descargar en esta actividad.
Tema 1. Mi primera página con DreamWeaver
Mi primera página con DreamWeaver.
Tema 2. HTML/CSS: Estructura CSS
HTML/CSS: Estructura CSS.
Tema 2. Cuestionario obligatorio
Va a comenzar el test
Has realizado 0 de 10 intentos
Para superar este test, has de responder correctamente al menos el 75% de las preguntas.
Ejercicio P2P opcional
Enunciado ejercicio P2P opcional
Realizar en el siguiente HTML 5 declaraciones de estilo CSS que afecten al mismo elemento, el titilar h1, con diferentes puntuaciones de prioridad, e indicar su puntuación como un comentario en el propio HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Herencia</title>
</head>
<body>
<div id="caja">
<header class="cabecera">
<h1>Cabecera: header</h1>
</header>
</div>
</body>
</html>
Instrucciones para la Entrega.
Subir el fichero HTML como un fichero adjunto en la entrega.
OJO! Una vez enviada la entrega, esta no se puede cambiar. Comprueben que entregan todo correctamente antes de enviarlo.
Instrucciones para la evaluación por pares.
Para evaluar la entrega, el evaluador debe comprobar que la entrega es correcta descargando el fichero entregado.
Dado que es un curso para principiantes, ante la duda les pedimos que sean benevolentes con sus compañeros, porque muchos participantes están empezando con HTML5 y los primeros pasos siempre son difíciles.
El objetivo de este curso es sacar el máximo provecho al trabajo que están dedicando, por lo que les recomendamos que utilicen la evaluación para ayudar a sus compañeros enviando comentarios sobre la corrección del código, su claridad, legibilidad, estructuración y documentación.
OJO! Una vez enviada la evaluación, está no se puede cambiar. Piensen bien su evaluación antes de enviarla.
4. Uso de caracteres especiales
¿Que mejor uso de algo que haciendo un resumen del tema en cuestión?
Tenemos que tener cuidado con la codificación de los caracteres y la inserción de caracteres especiales en nuestros textos de las páginas HTML.
Los caracteres que utiliza HTM para definir sus etiquetas (<, > y ") no se pueden utilizar libremente y los caracteres propios de los idiomas que no son el inglés (ñ, á, ç, ¿, ¡, etc.) nos pueden dar algún dolorcillo de cabeza dependiendo de la codificación de caracteres utilizada.
La solución al primer problema lo podemos solventar con la utilización de la etiqueta <pre> (representa texto preformateado) o mediante la utilización de unas expresiones llamadas entidades HTML y que representan a cada carácter:
| Entidad Carácter | Descripción Traducción |
| < | < signo de menor que |
| > | > signo de mayor que |
| & | & ampersand |
| " | " comillas |
| | espacio en blanco |
| ' | ' apóstrofe |
La solución al segundo problema:
| Entidad Carácter | Descripción oficial |
| ñ | ñ |
| Ñ | Ñ |
| á | á |
| é | é |
| í | í |
| ó | ó |
| ú | ú |
| Á | Á |
| É | É |
| Í | Í |
| Ó | Ó |
| Ú | Ú |
| € | € euro |
5. Incluir, imágenes de tipo bitmap y vectorial.
Ya que me han surgido algunos problemas (no podía subir a neocities una imagen con formato .bmp, y que no disponía de una herramienta para crear una imagen con formato .svg) he decidido.... incluir una imagen en formato .png :(.
6. Incluir algún vídeo.
En este caso, aprovecho el vídeo correspondiente a Modulo 2: Tema 5. Publicación y entrega en Neocities, en el cual explica como publicar una página en Internet, usando como ejemplo la plataforma gratuita proporcionada por Neocities.org.
7. Incluir bordes redondeados en alguna de sus cajas.
Podemos conseguir redondear los bordes de una caja utilizando border-radius.