Propuesta de trabajo HTML5 y CSS

TRABAJO FINAL

Buenos días

Deberemos realizar una página web con las siguientes condiciones:

• Deberemos aplicar todo lo aprendido.
• Primero realizar un mapa mental (diseño) de la página que vamos a realizar. Podemos utilizar muchas plataformas. Os dejo un listado de ellas que además podemos asociar a nuestro drive:
• Cacoo
• Mindomo
• Mindmeinster
• Mindmap
• Coogle
• Concept board 
• Deberá de constar mínimo de 5 o 6 páginas html5. 
• La página de inicio constará de bloques, algo que hemos visto en el tema 10 de maquetación.
• Deberemos utilizar fotografías y colores de fondo. El color igual en todas para que mantengan un criterio dirigido por la hoja de estilos.
• El formato de la página debe estar dirigido mediante un archivo css de manera que ahí ponemos todas las opciones.
• Es importante la presentación de la página, pero no influye sólo lo bonito que hagan el sitio web, sino la información que contenga, no solo copy/paste. 
• Deberemos meter elementos multimedia, música y vídeos.
• No abusar de fotos ni vídeos.
• Ojo con el peso de los elementos multimedia que nos pueden complicar la subida a los servidores gratuitos.
• Debe tener al menos una tabla y una lista anidada.
• Se agradecerá algún contenido de la última entrada: formulario o técnica avanzada.
• Importante la organización de los archivos, a la hora de hacer funcionar los enlaces. Debemos subirlos con la misma estructura.

HTML5: contenidos extras

Os dejo los últimos temas que son opcionales:

• Tema 12: Formularios y javascript
• Tema 13: tecnicas avanzadas.
• Tema 14 contenidos extras

Html5 IV: estilos

Tema 9: estilos web
Tema 10: maquetación con estilos

En este enlace os dejo un sencillo tutorial de html y css, donde nos explica casi todo lo que estamos viendo separado por temas

manual de www.w3.org

Html5 III: organización de la información

Continuemos.
Tema 6: organización de la información.
Tema 8: Hoja de estilos.
En el tema 8 aplicaremos los estilos a toda la página por lo que tendremos que añadirlos en la cabecera de la siguiente manera

En la imagen viene con fondo amarillo el código que debemos introducir para poner entre sus etiquetas los estilos. Será dentro de la etiqueta

<style type="text/css">

</style>

Enlazar un archivo .css

Para que el archivo con los estilos tenga efecto en la página, debemos indicar en la cabecera del archivo .html que se va a tomar ese estilo, mediante la etiqueta <link>, así:

<link rel="stylesheet" href="misestilos.css" type="text/css" media="all">

otra opción sería:

@import url(misestilos.css)

dentro de la etiqueta style

Información

Por favor, rellenad el siguiente formulario con vuestro correo y la dirección de vuestro blog

Formulario alumnos

Html5 II: Multimedia y maquetación

Continuamos repasando y aprendiendo nuevas etiquetas
Tema 4: multimedia
Tema 5: maquetación

Html 5: aspectos básicos, formato y enlaces

comenzamos
Diferencias entre html y html5
Ventajas de HTML5
En HTML5, se han tomado en cuenta mejoras en la creación de la estructura del código web y en el manejo óptimo de las etiquetas web. De esta manera, se convierte en un estándar mucho más versátil, que permitirá realizar una interacción mucho más poderosa y simple, mejorando la experiencia de uso por parte del usuario y facilitando la depuración del código web.
Ventajas de utilizar HTML5

Entre las principales ventajas que presenta HTML5, tenemos las siguientes:

• Nueva estructura de etiquetas mejorada, esta nueva estructura permite definir por separado el encabezado, la barra de navegación, las secciones de la página web, los textos del sitio, los diálogos y el pié de página de los sitios web. Esta nueva estructura, incluso permite desarrollar blogs con gran facilidad.
• Inclusión de las etiquetas video y audio, dicha etiqueta soporta de manera eficiente y estable cualquier opción de ejecución de video y audio, sin generar errores o incluir código flash en nuestro sitio web.
• Capacidad de realizar ejecuciones offline de las páginas web creadas con código HTML5, lo que permite realizar aplicaciones de escritorio con este código tan versátil.
• HTML5
• Incluye una nueva etiqueta de dibujo sobre la página web, llamada canvas, que vuelve el proceso de crear dibujos en el sitio web tan fácil como dibujar con aplicaciones como Paint.
• Eliminación total de las etiquetas obsoletas, que tienen los estándares anteriores de HTML.
• Ofrece la posibilidad de obtener un código más limpio y fácil de depurar, que los códigos de los estándares anteriores.

Comencemos a trabajar:

• Tema 1: aspectos básicos
• Tema 2: formato básico
• Tema 3: enlaces