sábado, 14 de julio de 2018

Técnicas de Diseño Visual en paginas Web

Tutorial de HTML y principalmente su version 5

Diseños Visuales en HTML

Ejemplo de un diseño visual en html:

Animales extintos

El tigre de Tasmania

Fue un marsupial carnívoro originado en el Holoceno. Era nativo de Australia y Nueva Guinea y se cree que se extinguió en el siglo XX. Se trataba del último miembro viviente de su género (Thylacinus), cuyos otros miembros vivieron en tiempos prehistóricos a partir de principios del Mioceno.

Derecho de autor © Tiempos.com

Elementos HTML para diseño visual

Los sitios web frecuentemente muestran el contenido en múltiples columnas (como en una revista o un periódico).

HTML5 ofrece nuevos elementos de semántica para definir las diferentes partes de una página web:

  • <header> - Define una cabecera en un documento o una sección.
  • <nav> - Define un contenedor para los enlaces de navegación interna, es decir de una página a otra del mismo sitio web. En ingles, navegación se escribe “navigation”, asi que “nav” es solo su forma corta.
  • <section> - Define una sección en un documento.
  • <article> - Define un ítem de contenido. Tiene sentido por sí solo, es independiente. Para reusarse o distribuirse.
  • <aside> - Define contenido que tiene una relación indirecta al contenido principal.
  • <footer> - Define un pie de página en un documento o una sección.
  • <details> - Define detalles adicionales que el usuario puede ver u ocultar a su gusto.
  • <summary> - Define un encabezado (resumen-titulo) en el elemento <details>.


Técnicas HTML de diseño visual

Abajo hay cuatro diferentes maneras de crear diseños visuales multicolumnas. Cada una de estas maneras tiene sus ventajas y sus contras:

  • Las tablas HTML
  • La propiedad CSS float
  • Una de las plataformas CSS que hay en existencia
  • La modalidad flexbox de CSS para el diseño visual. En español se le conoce como “de Caja Flexible”.

Pero, ¿Cual elegir?

No hay comentarios.:

Publicar un comentario