Elementos y técnicas de diseño HTML
Los elementos de diseño HTML definen el diseño de la página que se deben organizar los elementos para obtener una página bien estructurada. Mientras que las técnicas de diseño HTML embellecen los elementos para obtener una página en un formato presentable. Teniendo en cuenta la importancia de los elementos HTML y las técnicas HTML, esta guía tiene la intención de proporcionar los siguientes resultados de aprendizaje:
- ¿Cuáles son los elementos de diseño HTML?
- Marcos CSS
- Diseño de cuadrícula
- Diseño de FlexBox
- Propiedad flotante
Elementos de diseño html
El HTML5 ha presentado el soporte de varios elementos semánticos que se pueden usar para diseñar el diseño de la página HTML. Uno puede usar los elementos semánticos de manera organizada para obtener el diseño deseado. Los siguientes elementos HTML están configurados para establecer el diseño de la página en consecuencia.
: La sección del encabezado define la parte del encabezado del documento
: Este elemento se utiliza para crear una nueva sección dentro de una página
El
: Se puede definir un artículo dentro de una página HTML usando esta etiqueta.
El
: Este elemento crea un encabezado para resumir cualquier información o detalle sobre ese encabezado. Al hacer clic en ese encabezado, se mostraría la información que se almacena dentro de él.
: La etiqueta se usa para mencionar información detallada sobre cualquier cosa/objeto específico.
: Representa el pie de página de una sección/documento.
Para obtener más información sobre los elementos semánticos HTML, haga clic aquí.
Técnicas de diseño HTML
Las técnicas de diseño HTML ayudan a crear un diseño multicolumno y las técnicas pueden elegirse de una de las siguientes opciones proporcionadas aquí.
Marcos CSS
CSS Frameworks ayudaría a crear un diseño receptivo y atractivo de una página web. Estos marcos incluyen varias clases incorporadas equipadas con estilos, por lo que no necesita crear sus propios estilos. Entre varios marcos CSS, W3.CSS y Bootstrap son ampliamente utilizados.
Cómo usar el W3.Marco CSS
Es un marco CSS moderno bien definido que se supone que proporciona una alta funcionalidad de los estilos para una página web. Su propósito es proporcionar una alternativa diversa al marco de bootstrap. Para usar el w3.clase CSS, solo debe insertar el siguiente enlace a su página HTML.
Cómo usar el marco Bootstrap
El marco Bootstrap es otro marco CSS que también tiene clases incorporadas para proporcionar varios tipos de estilos a las páginas HTML. Para usar el marco Bootstrap, tiene dos posibilidades:
- Descargar bootstrap
- Use el enlace CDN directamente en su documento HTML (recomendado)
Los siguientes enlaces de CDN lo ayudan a importar instancias de arranque para peinar su página web.
Pegue el siguiente enlace en la etiqueta de su cabeza (recomendado)
Coloque el siguiente script al final (recomendado) de la etiqueta del documento
Al colocar los enlaces anteriores, podrá usar varias clases de arranque para diseñar su página HTML en consecuencia.
CSS FLOAT
Esta técnica es bastante útil para colocar elementos HTML. Por defecto, los elementos se colocan uno tras otro. Sin embargo, puede usar la propiedad flotante/transparente para manipular la colocación predeterminada de elementos. La propiedad clara se utiliza para romper la continuidad de la propiedad flotante, de modo que si desea colocar el elemento en la siguiente línea, debe usar la propiedad clara.
La funcionalidad del flotador CSS y las propiedades claras es fácil de aprender, pero es difícil de implementar. El siguiente ejemplo se refiere al uso de las propiedades flotantes y claras.
Html
Html
CSS
Javascript
El código HTML anterior crea tres divisiones con nombres de clase "prim1","prim2" y "prim3".
CSS
.Prim1flotador izquierdo;
Ancho: 33%;
Color de fondo: naranja;
.Prim2
flotador izquierdo;
Ancho: 33%;
Color de fondo: LightskyBlue;
.Prim3
claro: izquierda;
Ancho: 66%;
Color de fondo: Lightgreen;
El ingrediente principal de este ejemplo es el CSS que muestra cómo se utilizan las propiedades flotantes y claras. El flotador = "izquierda"La propiedad se usa en los dos primeros divs Mientras que el tercero div tiene el claro = "izquierda".
Producción
Diseño de FlexBox
El módulo CSS Flexbox (caja flexible) ayuda a crear una estructura de diseño flexible sin usar el flotador o cualquier elemento de posicionamiento. Además, los elementos se pueden organizar en una fila o una columna (solo una dimensión). Para usar la técnica CSS FlexBox, debe agregar class = "contenedor flexible"Al elemento y al"mostrar"La propiedad de Flex-Container debe establecerse en"doblar". Los elementos infantiles no requieren ninguna clase, simplemente se ajustan con la clase principal.
El ejemplo proporcionado a continuación demuestra mejor el uso de un diseño flexible.
.contenedor flexiblePantalla: Flex;
Html
CSS
En el código anterior, un div se crea con class = "contenedor flexible"Y su propiedad de visualización está configurada en"doblar".
Producción
Diseño de cuadrícula
El diseño de la cuadrícula permite organizar varios elementos infantiles de manera presentable. El diseño de la cuadrícula ofrece la disposición en dos dimensiones (con fila y columna simultáneamente). Para usar esto, la clase = "contenedor"Se usa para el elemento principal, mientras que la clase ="ítem de cuadrícula"Se usa para los elementos infantiles. Además, el mostrar La propiedad del contenedor de la cuadrícula se puede establecer en el red o para en línea.
.contenedor de cuadrículaPantalla: cuadrícula;
Html
CSS
Javascript
En el código anterior, la clase de padres div se establece en "contenedor"Y los artículos para niños tienen clases"ítem de cuadrícula".
Producción
La salida muestra la principal diferencia entre la cuadrícula y el diseño flexible. El diseño de la cuadrícula se ha ampliado en múltiples dimensiones, mientras que el diseño flexible organiza los elementos en una sola dimensión.
Conclusión
Los elementos de diseño HTML y las técnicas de diseño HTML proporcionan la funcionalidad para diseñar una página web de manera presentable. Para esto, se proporcionan varios elementos semánticos HTML y diseños HTML en este artículo. Los elementos semánticos sirven mejor al propósito de su uso y, por lo tanto, se consideran un ingrediente importante de la página web. Las técnicas de diseño HTML pueden incluir marcos CSS (Bootstrap o W3.CSS), CSS Float, CSS Flexible Box y CSS Grid.