Este conteúdo faz parte do livro “Introdução à programação Web para a Bioinformática: HTML, CSS, PHP & JavaScript“. Você pode adquirir a versão impressa desse livro aqui ou a versão para Kindle aqui. Para nos citar, consulte este link.
Páginas apresentam um certo padrão. Em geral, há um cabeçalho (diferente da tag de <head>), onde se encontra o logo do site, um menu, uma área destinada a textos, uma barra lateral e um rodapé. A estrutura de uma página define onde cada elemento deve estar alocado.
Antigamente, Web designers mantinham o péssimo hábito de utilizar tabelas para estruturar páginas. Tabelas podem ser lidas de diferentes maneiras, dependendo do navegador usado. Utilizar divisórias <div> é a maneira correta para estruturar elementos em uma página. Recentemente, HTML5 adotou novas tags que permitem uma melhor organização do código. Veja abaixo o exemplo da estrutura de uma página e onde pode ser utilizado cada elemento. A seguir explicaremos cada um.
Divisórias <div>
Divisórias (ou simplesmente divs) permitem, além da organização do código, a aplicação de estilos a trechos específicos da página. Observe como declarar uma div:
<div>
<p>Conteúdo de uma div</p>
</div>
c3_s1.html | https://goo.gl/jOI1ed
Divs não tem forma, cor ou tamanho pré-estabelecido. Isso dependerá do conteúdo alocado nela. Entretanto, para podermos visualizar modificações na estrutura da div, vamos aplicar a cor vermelho ao fundo div por meio da propriedade background-color.
<div style="background-color:red">
<p>Conteúdo de uma div</p>
</div>
c3_s2.html | https://goo.gl/QbM08N
Observe como a div se ajusta ao tamanho do texto. Podemos utilizar algumas propriedades de estilo para definir a forma de uma div.
Definindo o tamanho de divs
Podemos definir o tamanho de uma div utilizando as propriedades width (largura) e height (altura). Tamanhos de divs são preferencialmente definidos em pixels. Observe:
<div style="background-color:red; width:100px; height:100px"> <p>Conteúdo de uma div</p> </div>c3_s3.html | https://goo.gl/byqXJU
Observe que a div agora tem o tamanho fixo de 100 pixels de altura por 100 pixels de largura. Quando as propriedades de altura e largura estão definidas, o texto se ajusta à div.
Posicionando divs
Divs por padrão são posicionadas abaixo de outras. Para compreender como alterar o posicionamento de divs precisamos inicialmente compreender a propriedade position.
Há três tipos de posicionamento de divs: fixed, relative e absolute. Divs do tipo fixed são posicionadas em um ponto fixo na tela. Divs do tipo relative são posicionadas com base no seu canto superior esquerdo. Já as divs do tipo absolute são posicionadas com base em sua div pai. Por padrão, todas as divs são declaradas como relative. Observe a diferença entre uma div do tipo relative para uma div do tipo absolute:
Uma div do tipo relative se posiciona por padrão abaixo de outra div. A div do tipo absolute se posiciona com base na div pai, ou seja, se há duas divs absolute filhas da mesma div pai e com posicionamento não declarado, as duas irão se sobrepor. No exemplo anteriormente descrito, a última div declarada (Div 2) sobrepõe a primeira (Div 1).
Bom, aprendemos os tipos de posicionamento das divs, mas como posicioná-las na prática? Usando as propriedades: left, right, top e bottom.
A propriedade left regula a distância para a margem esquerda, right para a direita, top para o topo da página e bottom a distância até o rodapé. Vamos utilizar o exemplo anterior e inserir as propriedades left e top para que a Div 2 seja posicionada a uma distância de 40 pixels do topo e de 50 pixels da margem esquerda.
<div style="background-color:red; width:100px; height:100px; position:absolute">
<p>
Div 1
</p>
</div>
<div style="background-color:blue; width:100px; height:100px; position:absolute; top: 40px; left:50px">
<p>
Div 2
</p>
</div>
c3_s4.html | https://goo.gl/Mh1r8A
Propriedade float
Como dito anteriormente, divs do tipo relative são posicionadas uma abaixo da outra. É possível alterar sua posição nativa usando a propriedade float. Observe o exemplo a seguir.
<div style="background-color:red; width:100px; height:100px; float:left">
Div 1
</div>
<div style="background-color:blue; width:100px; height:100px; float:left;">
Div 2
</div>
<div style="clear:both"></div>
c3_s5.html | https://goo.gl/8zKd6H
Utilizando a propriedade “float:left”, a Div 2 passa a ser alinhada ao lado esquerdo da Div 1. Se usássemos a propriedade “float:right” nas duas divs elas se alinhariam ao lado direito da tela.
Podemos ainda utilizar a propriedade “float:left” na primeira div e “float:right” na segunda div. Isso faria com que a primeira div se alinhasse a esquerda e a segunda a direita.
Observe no código que após aplicar a propriedade float a divs, é necessário criar uma div e aplicar a propriedade “clear:both”.
A propriedade float altera o fluxo natural de organização de uma página. Isso pode ser utilizado, por exemplo, para inserir uma imagem na página e forçar elementos textuais próximos a contornarem a imagem. Entretanto, isso pode causar efeitos indesejados nas divs declaradas posteriormente, desajustando seus posicionamentos na tela. A propriedade “clear:both” insere um ponto em que o fluxo retorna ao natural, impedindo que próximos elementos sejam alinhados baseado nas propriedades das div anteriores.
Margens
Há dois tipos de margem: externas (margin) e internas (padding). As margens externas definem a distância de um elemento para outros elementos. Enquanto isso, margens internas definem a margem entre o conteúdo do elemento e a borda (border).
No exemplo a seguir alteraremos as propriedades da Div 2 (posicionada a esquerda da Div 1).
<div style="background-color:red; width:100px; height:100px; float:left">
<span style="border:1px solid black">Div 1</span>
</div>
<div style="background-color:blue; width:100px; height:100px; float:left; margin: 10px 20px 10px 20px; padding:20px">
<span style="border:1px solid black">Div 2</span>
</div> <div style="clear:both"></div>
c3_s6.html | https://goo.gl/Ul4jFZ
Observe que a Div 2 recebe as margens “10px 20px 10px 20px”. Esses números indicam, respectivamente, as margens para: topo, direita, rodapé e esquerda (sentido horário). A Div 2 ainda recebe a propriedade “padding:20px”, que insere uma margem interna de 20 pixels. Observe como o texto da Div 2 se distancia da borda.
Nesse exemplo apresentamos ainda uma tag ainda não descrita: a tag <span>. A tag <span> é um container para conteúdo linear. Essa tag é bastante similar a tag <div>, entretanto <span> é mais utilizado para armazenar elementos textuais. Inserimos ainda a propriedade border às tags <span>. Essa propriedade recebe o tamanho da borda (um pixel), o tipo da borda (sólida) e a cor da borda (preta).
Div container
A div container permite que divs internas sejam contidas em uma área delimitada. No exemplo a seguir, vamos inserir três divs delimitadas por uma div pai. A div pai terá largura de 960 pixels com uma margem interna de 10 pixels em cada lado. A primeira div filha terá 100 pixels de altura e ocupará toda a largura da div pai. As outras duas divs filhas deverão estar lado a lado. Observe como a div pai centraliza o conteúdo das outras divs. Vamos colorir o fundo de cada div de uma cor distinta. Observe como ficará a página.
Agora observe o código-fonte:
<div style="background-color:gray; width:960px; height:auto; margin:0 auto; padding:10px">
<div style="background-color:green; width:960px; float:left; margin-bottom:10px">
<h1 style="height:100px">Div 1</h1>
</div>
<div style="background-color:red; width:600px; float:left">
<h1 style="height:200px">Div 2</h1>
</div>
<div style="background-color:blue; width:350px; float:right;">
<h1 style="height:200px">Div 3</h1>
</div>
<div style="clear:both"></div>
</div>
c3_s7.html | https://goo.gl/EchSU9
Perceba como a div pai recebe a cor cinza (gray), a largura de 960 pixels, a altura automática (auto), margem superior nula e lateral automática (auto) e margem interna de 10 pixels. Quando a altura é declarada como automática, o conteúdo interno se regulará à altura final da div (no exemplo, a altura total será de 300 pixels: 100 pixels da div 1 mais 200 pixels da div 2). A margem foi declarada com altura zero e largura automática. Isso fará com que a div, de largura 960 pixels, tenha margens idênticas tanto no lado direito quanto no lado esquerdo, o que centralizará a div. Essa div será denominada div container.
A div container (div pai) delimita os espaços das divs 1, 2 e 3. Observe que a div 2 está alinhada a esquerda, enquanto a div 3 está alinhada a direita. Poderíamos utilizar o alinhamento à esquerda para a div 3, bastaria adicionar uma margem à esquerda para garantir a margem de 10 pixels entre as duas divs.
Cabeçalho <header> e rodapé <footer>
A tag <header> delimita a área de página destinada ao cabeçalho. Não confunda com a tag <head>, que armazena informações de uma página que não serão exibidas pelo navegador. A tag <header> delimita o espaço onde serão exibidas informações introdutórias, logo do site ou mesmo menus.
A tag <footer> delimita os elementos que irão compor o rodapé de uma página. Pode ser utilizado para armazenar menus secundários, informações sobre o autor, mensagens de direitos autorais, além de outras informações.
Em geral, as tags <header> e <footer> são utilizadas para armazenar conteúdos constantes em páginas dinâmicas. Você já notou que ao navegar em um site o conteúdo do cabeçalho e do rodapé não se alteram? Sites dinâmicos utilizam trechos de código que serão repetidos em todas as páginas e os separam de trechos que serão alterados dependendo da página. Observe a seguir como declarar cabeçalhos e rodapés. Note que as duas tags devem ser declaradas dentro da tag <body>. Observe também que entre elas foi declarada uma div que armazenará um possível conteúdo dinâmico.
<body>
<header>Este é o cabeçalho</header>
<div>Conteúdo dinâmico</div>
<footer>Este é o rodapé</footer>
</body>
c3_s8.html | https://goo.gl/rF2CyZ
As tags <header> e <footer> são containers que não atribuem qualquer posicionamento na página aos seus elementos filhos, entretanto convém utilizá-la corretamente para organizar melhor a página.
Barra de navegação <nav> e menu <menu>
A tag <nav> indica uma região da página que contém uma barra de navegação, ou seja, armazena uma lista de links. A tag <menu> também armazena uma lista de links. A tag <nav> indica a seção do site responsável por armazenar os links de navegação. Enquanto isso, a tag <menu> é mais genérica e pode ser utilizada em diversos trechos da página. A seguir vemos um exemplo de como declarar uma barra de navegação. Neste exemplo, os links são organizados a partir de itens de uma lista não ordenada. Também seria possível utilizar a tag <span> para organizá-los.
<nav>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
</ul>
</nav>
c3_s9.html | https://goo.gl/7WYKf2
Artigos <article> e seções <section>
A tag <article> indica uma parte do site destinada a receber conteúdos relevantes para a página. Sites de busca, como o Google, utilizam essa tag para buscar conteúdos exibidos. A tag <section> indica uma seção, ou seja, essa tag divide o conteúdo aplicado a tag <article>.
Observe o exemplo abaixo. Vamos criar uma página genérica denominada “Minha página”. Observe que inserimos o conteúdo principal da página dentro da tag <article>. Cada seção é delimitada pela tag <section>.
<article>
<h1>Minha página</h1>
<section>
<h2>1. Introdução</h2>
<p>Esta é minha página.</p>
</section>
<section>
<h2>2. Por que a criei?</h2>
<p>Eu a criei para falar sobre minha vida.</p>
</section>
</article>
c3_s9.html | https://goo.gl/7WYKf2
Barra lateral <aside>
A tag <aside> armazena conteúdo complementar para uma página, como por exemplo, menus secundários e publicidade. Essa tag é mais utilizada para produção de barras laterais, entretanto seu uso vai além disso, e pode ser utilizada para inserção de qualquer tipo de adendo ao conteúdo principal da página.
<article>[...]</article>
<aside>[...]</aside>
c3_s11.html | https://goo.gl/jkg9if
No exemplo anterior, vemos que a tag <aside> é utilizada em paralelo a tag <article>. Essa tag insere um conteúdo complementar ao artigo.
Quer aprender mais? Conheça nossos cursos profissionalizantes à partir de R$19,99:
Capítulo 1
Introdução ao HTML
Capítulo 2
Fundamentos do HTML
Capítulo 3
Estrutura de páginas
Capítulo 4
Folhas de Estilo em Cascata (CSS)
Capítulo 5
Bootstrap
Capítulo 6
Iniciando a construção de um Website
Capítulo 7
Introdução ao PHP
Capítulo 8
Fundamentos do PHP
Capítulo 9
Transformando um Website em dinâmico
Capítulo 10
Introdução ao JavaScript
Capítulo 11
Fundamentos do JavaScript
Capítulo 12
jQuery
Capítulo 13
Bootstrap JavaScript
Capítulo 14
D3.js
Capítulo 15
3Dmol
Capítulo 16
Projeto Final
Epílogo
Referências Bibliográficas
Cite:
MARIANO, DIEGO; de MELO-MINARDI, R. C. . Introdução à Programação Web para Bioinformática: HTML, CSS, PHP & JavaScript. 1. ed. North Charleston, SC (EUA): CreateSpace Independent Publishing Platform, 2017. v. 3. ISBN: 978-1520895154; 403p .
