Elementos e técnicas de layout html
Os elementos de layout html definem o layout da página que como os elementos devem ser organizados para obter uma página bem estruturada. Enquanto as técnicas de layout html embelezam os elementos para obter uma página em um formato apresentável. Tendo em vista a importância dos elementos HTML e das técnicas HTML, este guia pretende fornecer os seguintes resultados de aprendizado:
- O que são elementos de layout html
- Estruturas CSS
- Layout da grade
- Layout do Flexbox
- Propriedade flutuante
Elementos de layout HTML
O HTML5 criou o apoio de vários elementos semânticos que podem ser usados para projetar o layout da página HTML. Pode -se usar os elementos semânticos de maneira organizada para obter o layout desejado. Os seguintes elementos HTML são definidos para definir o layout da página de acordo.
: A seção do cabeçalho define a parte do cabeçalho do documento
: Este elemento é usado para criar uma nova seção dentro de uma página
O
: Um artigo dentro de uma página HTML pode ser definido usando esta tag.
O
: Este elemento cria um caminho para resumir qualquer informação ou detalhe sobre o cabeçalho. Ao clicar nesse título, as informações seriam exibidas que são armazenadas dentro dela.
: A tag é usada para mencionar informações detalhadas sobre qualquer coisa/objeto específico.
: Representa o rodapé de uma seção/documento.
Para saber mais sobre elementos semânticos HTML, clique aqui.
Técnicas de layout HTML
As técnicas de layout HTML ajudam na criação de um layout multicolumn e as técnicas podem ser escolhidas em um dos seguintes seguintes fornecidos aqui.
Estruturas CSS
As estruturas CSS ajudariam a criar um layout responsivo e atraente de uma página da web. Essas estruturas incluem várias classes embutidas equipadas com estilos, portanto você não precisa criar seus próprios estilos. Entre várias estruturas CSS, W3.CSS e Bootstrap são amplamente utilizados.
Como usar o W3.Estrutura CSS
É uma estrutura CSS moderna bem definida que deve fornecer alta funcionalidade de estilos para uma página da web. Seu objetivo é fornecer uma alternativa diversificada à estrutura de bootstrap. Para usar o W3.Classe CSS, você precisa apenas inserir o seguinte link para sua página HTML.
Como usar a estrutura de bootstrap
A estrutura de bootstrap é outra estrutura CSS que também possui classes embutidas para fornecer vários tipos de estilos às páginas HTML. Para usar a estrutura de bootstrap, você tem duas possibilidades:
- Baixar Bootstrap
- Use o link CDN diretamente no seu documento HTML (recomendado)
Os links CDN a seguir ajudam você a importar instâncias de bootstrap para estilizar sua página da web.
Cole o seguinte link em sua etiqueta de cabeça (recomendado)
Coloque o seguinte script no final (recomendado) da etiqueta do documento
Ao colocar os links acima, você poderá usar várias classes de bootstrap para estilizar sua página HTML de acordo.
CSS flutuar
Esta técnica é bastante útil na colocação de elementos HTML. Por padrão, os elementos são colocados um após o outro. No entanto, você pode usar a propriedade Float/Clear para manipular o posicionamento padrão dos elementos. A propriedade Clear é usada para quebrar a continuidade da propriedade Float, de modo que, se você quiser colocar o elemento na próxima linha, precisará usar a propriedade Clear.
A funcionalidade do CSS flutuando e propriedades claras é fácil de aprender, mas complicado de implementar. O exemplo a seguir refere -se ao uso de propriedades flutuantes e claras.
Html
Html
CSS
JavaScript
O código HTML acima cria três divisões com nomes de classe “Prim1“,“Prim2" e "Prim3““.
CSS
.prim1flutuar: esquerda;
largura: 33%;
cor de fundo: laranja;
.prim2
flutuar: esquerda;
largura: 33%;
Background-Color: LightskyBlue;
.prim3
claro: esquerda;
largura: 66%;
Background-Color: Lightgreen;
O principal ingrediente deste exemplo é o CSS que mostra como as propriedades flutuantes e claras são usadas. O float = ”esquerda”A propriedade é usada nos dois primeiros divs enquanto o terceiro div tem o claro = ”esquerda““.
Saída
Layout do Flexbox
O módulo CSS Flexbox (caixa flexível) auxilia na criação de uma estrutura de layout flexível sem usar o float ou qualquer elemento de posicionamento. Além disso, os elementos podem ser organizados seguidos ou colunas (apenas uma dimensão). Para usar a técnica CSS Flexbox, você deve adicionar classificação = ”Flex-container”Para o elemento e o“mostrar”Propriedade do Flex-container deve ser definido como“flex““. Os elementos filhos não exigem nenhuma aula, eles são ajustados com a classe pai.
O exemplo fornecido abaixo demonstra melhor o uso de um layout flexível.
.Flex-containerexibição: flex;
Html
CSS
No código acima, um div é criado com class = ”Flex-container”E sua propriedade de exibição está definida como“flexão ”.
Saída
Layout da grade
O layout da grade permite organizar vários elementos filhos de maneira apresentável. O layout da grade oferece o arranjo em duas dimensões (com linha e coluna simultaneamente). Para usar isso, a classe = ”contador de grade”É usado para o elemento pai, enquanto a classe =”Item da grade”É usado para os elementos infantis. Além disso, o mostrar A propriedade do recipiente de grade pode ser definida para o grade ou para grade embutida.
.contador de gradeExibição: grade;
Html
CSS
JavaScript
No código acima, a classe de pai div está configurado para "contador de grade”E os itens infantis têm aulas“Item da grade““.
Saída
A saída mostra a diferença primária entre a grade e o layout flexível. O layout da grade foi expandido em multidimensões, enquanto o layout flexível organiza os elementos em uma única dimensão.
Conclusão
Os elementos de layout HTML e as técnicas de layout HTML fornecem a funcionalidade para projetar uma página da web de maneira apresentável. Para isso, vários elementos semânticos HTML e layouts HTML são fornecidos neste artigo. Os elementos semânticos melhor servem ao propósito de seu uso e, portanto, são considerados um ingrediente importante da página da web. As técnicas de layout HTML podem incluir estruturas CSS (Bootstrap ou W3.CSS), CSS Float, CSS Flexible Box e CSS Grid.