Layouts HTML - Mr Exemplos

<!–

main_leaderboard, all: [728,90][970,90][320,50][468,60]

–>

Elementos e técnicas de layout HTML

O tópico que estamos discutindo é layouts HTML . O conteúdo dos sites geralmente é exibido em várias colunas (como em um jornal ou publicação).

Example:

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><p><br>Example<br><br><br>Cities<br><br><br><br><br>Washington, D.C<br>London<br>Beijing<br><br><br><br>London<br>The capital of England is London. Over 13 million people live in its metropolitan area, making it the most populous city in the United Kingdom.<br>Since its founding by the Romans, Londinium was the name given to London, which stands along the River Thames.<br><br><br>Footer<br><br><br><br></p><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Índice-

Elementos e técnicas de layout HTML:
Elementos de Layout HTML:
Técnicas de Layout HTML:
Layouts HTML Fluxo normal:
Estruturas CSS:
Layout flutuante CSS:
Layout da Div CSS:
Layout da caixa flexível CSS:
Pequim:
Layout da grade CSS:
Benefícios do Layout HTML:

Elementos de Esquema HTML

Uma página web HTML é construída de vários elementos semânticos que definem as várias seções da página:

<header> – Especificando o cabeçalho de um documento ou seção.
<nav> – Determinando links de navegação.
<section> – Definindo a seção de um documento.
<article> – Descreve um conteúdo independente.
<aside> – Conteúdo separado do conteúdo. (exemplo de barra lateral)
<rodapé> – Uma seção ou rodapé do documento.
<details> – Fornece mais detalhes que o usuário pode visualizar e fechar a qualquer momento.
<summary> – Especifica o cabeçalho do elemento <details>.

Dica: Saiba mais sobre elementos semânticos em HTML Semantics .

Técnicas de Layout HTML

Os layouts de várias colunas podem ser criados usando quatro métodos diferentes. Quando se trata de layouts HTML , toda técnica tem seus prós e contras:

Grade CSS
Propriedade flutuante do CSS
estrutura CSS
CSS flexbox
CSS div

Layouts HTML Fluxo normal

Layout HTML padrão OU layouts HTML é como o navegador organiza as páginas HTML quando você não o controla. Aqui está um exemplo de HTML:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Football clubs</p>
<ul>
<li>Arsenal</li>
<li>Real Madrid</li>
<li>Barcelona</li>
<li>PSG</li>
<li>Liverpool</li>
<li>AC Milan</li>
<li>Manchester City</li>
</ul>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Estruturas CSS

Você pode usar o Bootstrap para criar layouts HTML rapidamente usando uma estrutura CSS.

Esquema Flutuante CSS

CSS float é geralmente usado para fazer o layout de páginas da web inteiras. As propriedades float e clear tornam o float confortável para aprender.

Desvantagens: Os elementos que flutuam estão vinculados ao fluxo do documento, o que diminui sua flexibilidade. Nosso capítulo CSS Float and Clear cobrirá mais sobre float quando se trata de layouts HTML .

CSS float outro exemplo:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 1px solid black;
}
header{
padding: 5px;
color: blue;
background-color: red;
text-align: center;
}
navigation {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
navigation ul {
list-style-type: none;
padding: 0;
}
navigation ul a {
text-decoration: none;
}
article {
margin-left: 158px;
border-left: 1px solid black;
padding: 5px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Games</h1>
</header>
<navigation>
<ul>
<li><a href="#">Baseball</a></li>
<li><a href="#">Football</a></li>
<li><a href="#">Tenis</a></li>
</ul>
</navigation>
<article>
<h2>Baseball</h2>
<p>Baseball is a bat-and-ball sport played between two teams of nine players each, taking turns batting and fielding. </p>
<p>The game occurs over the course of several plays, with each play generally beginning when a player on the fielding team, called the pitcher, throws a ball that a player on the batting team, called the batter, tries to hit with a bat.</p>
</article>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Layout da Div CSS

O layout CSS div é fornecido abaixo:

Example:

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><title>Div layout</title><br><style><br>body{<br>margin:0px;<br>}<br>.header{<br>padding: 10px;<br>background-color:#C0C0C0;<br>text-align: center;<br>color:#FF0000 ;<br>}<br>.header h2{<br>color: rgb(187, 81, 81); }<br>.navigation{<br>background-color:#800000;<br>padding: 4px;<br>color:black;<br>font-weight:bold;<br>}<br>.navigation li{<br>list-style: none;<br>display: inline-block;<br>padding: 3px;<br>}<br>.navigation a{<br>color: rgb(213, 129, 129);<br>}<br>.navigation ul li a:hover{<br>text-decoration: none;<br>color: #4ba141;<br>}<br>.center{<br>float: left;<br>width: 100%;<br>min-height: 300px;<br>background-color: #183751;<br>text-align: center;<br>color:yellow;<br>}<br></style><br><br><br><div><br><div class="header"><br><h2>Div Layout Mr Examples</h2><br></div><br><div class="navigation"><br><ul><br><li><a href="#">HOME</a></li><br><li><a href="#">MENU</a></li><br><li><a href="#">ABOUT</a></li><br><li><a href="#">CONTACT</a></li><br><li style="float: right;"><a href="#">Sign-in</a></li><br><li style="float: right;"><a href="#">Log-out</a></li><br></ul><br></div><br><div style="height:440px"><br><div class="center"><br><p>Your information goes here</p><br></div><br></div><br></div><br><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Esquema CSS Flexbox

O Flexbox é usado em layouts HTML para garantir que os elementos se comportem de maneira previsível em tamanhos de tela e dispositivos de exibição.

Em nosso capítulo CSS Flexbox, você pode aprender mais sobre o flexbox.

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p>Cities
Washington, D.C
London
Beijing
Beijing
With a population of more than 20 million, Beijing is China's capital and its second largest city after Shanghai. After the Chinese revolutions, it became the seat of the People's Republic of China and the country's cultural and educational center.
It is known for its flatness and regular construction. In the famous Forbidden City's Jingshan Park to the north, there are only three hills that can be found within the city limits. A concentric network of ring roads surrounds Beijing, much like the Forbidden City.
Footer
</p></body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Layout da Grade CSS

Ele permite que os designers de páginas da Web criem layouts sem usar flutuações e posicionamento em HTML usando um sistema de layout baseado em grade quando se trata de layouts HTML .

Dica: Confira nosso capítulo CSS Grid View para saber mais sobre CSS grids.

Benefícios do Layout HTML

Benefícios do uso de elementos e técnicas de layout HTML no desenvolvimento da Web:

1.<header> , <nav> , <main> , <aside> e <footer> oferecem uma maneira semântica de organizar o conteúdo da página da web. Eles também ajudam os mecanismos de pesquisa a entender o conteúdo e melhorar o SEO.

2. Os elementos de layout HTML melhoram a acessibilidade. O uso adequado de elementos de layout pode melhorar a acessibilidade para usuários que dependem de tecnologia assistiva, como leitores de tela.
<nav> usado para links de navegação pode ajudar os usuários de leitores de tela a navegar em um site

3. Técnicas de layout HTML promovem a separação de conteúdo e apresentação. Usar CSS para estilizar elementos de página pode separar conteúdo e apresentação em uma página da web. Alterar a aparência de um site sem afetar o conteúdo subjacente torna-se possível.

4. Técnicas de layout HTML permitem design responsivo. Consultas de mídia CSS e flexbox ajudam a criar designs responsivos que se adaptam a diferentes tamanhos de tela e dispositivos.

5. Elementos e técnicas de layout HTML promovem consistência e capacidade de manutenção. O uso consistente de elementos e técnicas de layout HTML em um site facilita a manutenção e as atualizações. Garante uma experiência de usuário consistente em diferentes páginas do site.

Assine nosso boletim informativo abaixo para estar em contato com o conhecimento técnico mais recente neste site.

Nós valorizamos o seu feedback.

Elementos e técnicas de layout HTML

Example:

Elementos de Esquema HTML

Técnicas de Layout HTML

Layouts HTML Fluxo normal

Example:

Estruturas CSS

Esquema Flutuante CSS

Example:

Layout da Div CSS

Example:

Esquema CSS Flexbox

Example:

Layout da Grade CSS

Benefícios do Layout HTML

Sentindo entediado?