CSS 5ª Entrega (Etiquetas semánticas del HTML5 )
HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. HTML5 especifica dos variantes de sintaxis para HTML: un «clásico» HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deberá ser servida como XML. Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.
La versión definitiva de la quinta revisión del estándar se publicó en octubre de 2014.
HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. Algunos de ellos son técnicamente similares a las etiquetas <div> y <span>, pero tienen un significado semántico, como por ejemplo <nav> (bloque de navegación del sitio web) y <footer>. Otros elementos proporcionan nuevas funcionalidades a través de una interfaz estandarizada, como los elementos <audio> y <video>. Mejora el elemento <canvas>, capaz de renderizar elementos 3D en los navegadores más importantes (Firefox, Chrome, Opera, Safari e Internet Explorer).
Algunos elementos de HTML 4.01 han quedado obsoletos, incluyendo elementos puramente de presentación, como <font> y <center>, cuyos efectos son manejados por Hojas de estilo en cascada.
(http://es.wikipedia.org/wiki/HTML5)
Aquí están algunos de los nuevos elementos semánticos en HTML5:
- article
- aside
- figcaption
- figure
- footer
- header
- hgroup
- mark
- nav
- section
( Datos extraidos de la web http://elcentrohtml5.sourceforge.net/Aprenda-HTML5-en-5-minutos)
Hola a todos entramos en otra fase un poco mas avanzada pero muy divertida, haber quiero que en esta entrega de CSS bajo la protección de html disfrutemos sin pegas y con muchas ganas.
Vamos a observar esta imagen. Tenemos a la izquierda un documento visualizado y a la derecha el código de la web.
Tenemos la estructura , pero vemos que hay cosas nuevas <header>/<croup><nav>Si vamos observando el documento tiene h1 + h2 igual que anteriormente con sus enlaces pero dentro de header como si fuera head.
Aquí se ve un poco mejor. La idea de esta entrega es darle forma a un documento que de antemano se presenta muy simple.
Tenemos dentro de<header> un h1 y h2 que son los títulos. en hgroup los link . Y ahora nos a salido varios códigos nuevos. De <header> a </header> lo tenemos de momento. Ahora nos vamos a <section> y allí mismo tenemos <article> y vuelta con <header>
El elemento< sectión> representa un agrupamiento de contenido con la misma temática dentro de un documento o aplicación. Una sección, en este contexto, es un grupo temático de contenido, con su cabecera y, en ocasiones, con un footer.
<article > Tienen por finalidad definir secciones, donde también se encuentran elementos como header, hgroup, section, footer, etc
Vamos a darle contenido.
Mirar como queda hemos puesto titulo, párrafo,link
Ahora vamos con <aside> Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si es removido, el contenido restante seguirá teniendo sentido. Aparte de esto hemos puesto un id=baba que después los llamaremos
Nos vamos a nuestra hoja de estilo y vamos a guarrear código que es lo que nos gusta. Estamos en <body> y quiero un color de fondo feo pero feo como nunca, bien ahí está.
Color a los enlaces no hay duda rojo.
Cuando pasemos el ratón por encima del enlace se subrayará.
Seleccionamos fondo, margen, relleno y ancho a general.
Si nos fijamos nav ul li { display line , es un recorrido de nav/ul/li y seleccionamos que estén en linea los enlaces.
Le aplicamos relleno, fondo y color.
Ahora lo tenemos como elemento de bloque.
Queremos el fondo de los enlaces de color rojo.
Elimino el color rojo.
Cuando pase el ratón por encima de los enlaces se verás del color seleccionado.
Le doy margen al menú de navegación.
Aquí tengo mis enlaces de varias web conocidas.
Le doy un ancho flotante a la derecha a los enlaces queda bien.
Les doy relleno y márgenes a los artículos.
Le poneos a los artículos borde punteado y de color.
Vamos a por el pie de página haber que podemos hacerle.
<footer> Define el pie de una página o sección. Usualmente contiene un mensaje de derechos de autoría, algunos enlaces a información legal o direcciones para dar información de retroalimentación.
Llamamos a id=baba y le damos fondo negro relleno y letras de color #999
Ya tenemos el documento mejor presentado. Quiero dejar claro unas cuestiones. De todo lo que llevamos aprendido o leído o incluso visto , llamarlo como queráis. No tengo ni idea si realmente a alguien le resolverá alguna duda mis publicaciones , repito de todo lo visto en cuanto a código css....Siempre tenemos una hoja de estilo y un de html esta última tiene un vínculo con css y desde esta se trabaja el código. Es cuestión de guarrear los códigos y probar.
Comentarios
Publicar un comentario
bueno opina y compara estás en tu blog .