Videotutorial: CSS y el flujo HTML de la página

  • Por
  • CSS
Vídeo tutorial de CSS en el que explicamos lo que es el flujo HTML de la página, es decir, el modo en el que los elementos se van disponiendo en la página. Introducción de los atributos CSS que pueden alterar el flujo HTML.
Seguimos publicando vídeos en el Videotutorial de CSS, para explicar las hojas de estilo en cascada de la manera más sencilla y visual. En este vídeo vamos a mostrar un concepto sencillo que debemos conocer antes de ponernos a explicar otros temas más complejos como el posicionamiento CSS. Se trata del flujo HTML de la página y los atributos CSS que pueden afectar al flujo de la página.

El flujo de los elementos es un concepto que posiblemente ya conoceremos, aunque puede que no lo hayamos identificado como tal y como nos vamos a referir a él repetidas veces a lo largo de los siguientes vídeos, merece la pena detenerse para explicarlo, de modo que quede claro lo que es.

El flujo HTML, es el modo en que los elementos de la página, representados por etiquetas HTML, se van situando en el lienzo para componer la página web que nos muestra el navegador. Existe un método estándar de colocación de los elementos de la página, que el propio cliente web implementa cuando no se especifica nada, pero nosotros a través de distintos atributos CSS y sus valores podemos alterarlo para que dichos elementos se posicionen como deseamos.

Como decíamos, este videotutorial servirá de entrada a los siguientes vídeos en los que abordaremos el posicionamiento CSS. Los atributos que veremos en esta ocasión los explicaremos de pasada y sólo nos detendremos para especificar distintos valores de atributos y cómo éstos afectan al flujo de la página.

Comenzaremos viendo el atributo CSS display y cómo pueden afectar al flujo del HTML en un elemento en particular al asignarle los valores block e inline. Luego mostraremos otro atributo CSS bastante utilizado que es float y cómo afectan los valores right y left en dicho atributo al fujo estándar del HTML. Luego veremos una breve introducción al atributo position, que es clave para el posicionamiento CSS y que tendremos que explicar con detalle en sucesivos vídeos, puesto que tiene muchos valores distintos que afectan radicalmente al flujo de la página y que nos servirán para posicionar los elementos que queremos con total precisión.

En esta ocasión hemos publicado un vídeo de una duración un poco más corta que la que estamos acostumbrados a ofreceros en el Vídeo Tutorial de CSS, pues el flujo HTML realmente es un concepto sencillo. Sin más os dejamos con el vídeo. Serán aproximadamente 20 minutos de auténtica práctica en CSS, que esperamos sean de utilidad para los visitantes de DesarrolloWeb.com.


Para las personas que lo prefieran, también hemos colocado este mismo vídeo sobre el flujo HTML en Youtube, sitio desde el cual posiblemente algunas personas puedan ver mejor estos materiales, precursores de las explicaciones de posicionamiento CSS.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

jpetis

18/12/2010
viodeo sobre atributo position
Gracias por la claridad en su exposicion. Te tengo que decir que esres un gran comunicador y que tus video tuturiales los realizas dando una comprension muy buena. Este concepto que en mi caso aunque simple de compresion para la gente me resultava un poco complicado de entender.
Jaime G.P

BgwALueYI

18/6/2012
mNnjydFNXmqbk
Jaja, deviantart ist schon _sehr_ grodf dadruch ist es schwierig wirklich Aufmerksamkeit zu finden; schliedflich ist auf Grund der Menge an Uplaods eine gerade hochgeladene deviation' ja auch mehr oder weniger sofort wieder von der Titelseite verschwunden.Deviantart funktioniert wohl eher nach dem Prinzip Geben-und-Nehmen. Man hinterle4sst beim Artwork seiner Wahl einen Comment oder added es zu seinen Favorites und als Gegenleistung' kann man vielleicht erwarten, dass sich der Kfcnstler auch mal sein Portfolio ansieht, und evtl. das ein oder andere Werk honoriert. Frfcher oder spe4ter findet man dann mit unter den Weg auf die Watchlist des Gegenfcber und knfcpft so Kontakte.Besonders auch durch das Favorites-System von Deviantart, kann sich der Bekanntheitsgrad einer Deviation steigern.Trotzdem muss man sagen, erstreckt sich der Inhalt von Kommentaren auf D. in den meisten Fe4llen auf ein Amazing!' oder Nice'. Wahre Kritik findet man eher selten.Doch wer nach etwas bestimmten sucht, der wird auf DA bestimmt ffcndig.