Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá a todos!
Estou com dúvidas com relação ao uso de DIVS no HTML5.
Como trabalhar com as DIVS e os novos elementos HEADER, SECTION, ARTICLE, ASIDE E FOOTER?
Definimos ID ou Class para esses elementos para formatarmos via CSS ou criamos as DIVs e colocamos eles dentro de DIVs e formatamos as DIVs?
Abraços a todos!
Olá Henrique.
Obrigado pela resposta a qual me esclareceu as dúvidas.
Com relação a replicação da mensagem é que estou no trabalho (Escola Técnica de Brasília) e nossa rede possui proxy.
Ao clicar para o envio da pergunta deu uma travada aqui e pressionei F5 para atualizar e acho que isso fez com que a mensagem fosse duplicada.
Abraços
Qual seria o conceito de vw e vh? poderia me explicar exatamente como, quando usa-los e para que serve e em quais situações posso usar?
vw = viewport width
vh = viewport height
equivale a altura e largura da sua janela.
100vw = 100% da largura da janela
100vh = 100% da altura da janela
Carlos, tudo certo?
Se possível, gostaria que fizesse um tópico específico pra isso, já que pode ser uma dúvida de muitos outros usuários do fórum. Mesmo assim, deixarei uma resposta aqui e caso pense em criar um tópico, replicarei.
Agora vamos ao que interessa:
As suas medidas são equivalentes as porcentagens, mas eles possuem algumas diferenças. Veja a semelhança primeiro:
Bem, até então você deve se perguntar: "Então se as medidas são as mesmas, por quê devo utiliza-lo?" - Existem algumas regras no CSS que se aplicam a porcentagem, mas não se aplicam ao método de cálculo do viewport.
Porcentagens nesse caso possuem uma limitação um pouco maior, exemplo:
Vale também lembrar que quando você utiliza vw e vh, consegue trabalhar de melhor forma o tamanho dos textos e também a estrutura responsiva.
Considere que as porcentagens são sempre relativas ao elemento pai e nunca a viewport.
Q: "Em quais situações posso usar?"
R: *Não existe uma regra específica de quando você pode e quando não pode******. Isso vai depender do layout que está montando. Se você recebeu de um cliente "Eu quero um slider que pegue a tela inteira" - então você automaticamente adiciona width: 100vw; e height: 100vh; para que em todos os dispositivos aquela seção ocupe sempre 100% da viewport.
* Adendo a resposta: Lembre-se que ele sempre vai ocupar a VIEWPORT (Janela/Tela) e não o conteúdo. Então se você possui alguma parte do site que contém muito texto, fotos e etc... Essa não será a medida ideal, já que ele não é medido pela quantidade de conteúdo. No caso, a melhor maneira seria utilizar a propriedade height: auto;.
Bons estudos e boa sorte!
Francisco,
Você replicou o mesmo tópico três vezes:
-
http://forum.imasters.com.br/topic/549620-html5-e-divs/ (atual)
Percebi que em uma das perguntas, você escreveu errado, desistiu e acabou repostando e em outra a pergunta não fica tão clara, então vou deixar minha resposta nesse.
Vamos explicar passo a passo o que são cada um dos elementos e o que é HTML5.
HTML5:
Entenda que essa nova estrutura que deram pro HTML é bem simples e tornou muitas coisas mais "organizáveis", sem fazer com que dependêssemos de classes ou id's para elementos simples. Quando surgiu essa nova versão, ela adicionou os que você já citou: header, section, article, aside, footer e entre outros mais. Todos esses elementos estão em inglês, então vamos traduzir na mesma ordem: cabeçalho, seção, artigo, de lado (seria "ao lado"), rodapé.
HEADER (cabeçalho):
Normalmente esse elemento é criado para criar cabeçalhos (ah vá, jura?), então seu menu (navbar) e o conteúdo do topo deve estar dentro dele. Vamos supor que o cliente fale: Eu quero uma barra no topo com minhas redes sociais e um menu logo abaixo. Então com essa informação você já entende que essa será sua header, então vamos estruturar:
Você pode substituir nav por div sem problema algum, mas isso é bom pra diferenciar o que será o menu e o que será a div com os links sociais.
Como você vai estilizar isso? É bem simples. Você pode estilizar um elemento sem que ele possua uma classe, mas ele deve ser único, a não ser que você queira estilizar vários com as mesmas propriedades.
Por regra você só terá um cabeçalho e um rodapé, então você não precisará usar classes e id's dentro dessas novas tags do HTML5. A estilização também é bem simples, veja:
header {
Caso queira entender o conceito de 100vw e 100vh, deixe um comentário nesse post e explicarei. Como por enquanto esse não é o foco, deixo passar reto.
Bem, eu expliquei somente a header, correto? Então use a mesma explicação para os elementos: article, aside e footer. Na grande maioria das vezes esses elementos também são únicos.
SECTION (seção):
Ele tem várias funções e até hoje é discutido qual a melhor forma, correta ou como as pessoas o utilizam até hoje. Lembre-se que são seções, então uma prática comum é utiliza-los a fim de organizar o seu código.
Vamos supor que seu site tenha somente uma página chamada index.html. Hoje em dia isso é bem comum e é chamado de OnePage - onde todas as informações se concentram em um único arquivo, sem precisar ficar transitando entre páginas.
Dentro da sua index.html você vai ter as seguintes informações: inicio, quem somos, portfolio, clientes e contato. Então pense, você vai ter que criar 5 blocos de informações dentro de uma única página. Para que isso não fique jogado as traças ou que você fique utilizando classes demais, id's demais... É mais fácil utilizar a section, pois ai você entende onde está começando e terminando cada bloco de informação.
Veja um exemplo dessa suposição:
<!DOCTYPE html>
Viu como fica bem melhor separar em seções? Agora dentro delas você pode utilizar div's para estilização, criação de blocos, grids e por ai vai.
Mas ai vem a sua pergunta:
Q: Por quê minhas section's possuem um id? Não era pra eu não usar?
R: Suas section's possuem id's porque existem múltiplas delas dentro da mesma página e cada uma terá um estilo diferente. A ID nesse caso também é importante, pois o menu tem que apontar para uma delas quando é clicado, é então que entra em função o <a href="#inicio">Inicio</a>. Quando você cria um anchor <a> e coloca uma cerquilha (hashtag) em seu href, ele passa a referenciar um ID.
Resumindo: Quando você clicar em algum item no menu, ele desce pra section com a ID correspondente.
Quanto a estilizar essas sections, o cliente pode pedir: Eu quero todas com a mesma altura e largura, mas a cor de fundo deve ser diferente para cada uma delas. Então ai entra em jogo a vírgula no CSS (vamos supor que a vírgula seja igual a E):
#inicio, #quemsomos, #portfolio, #clientes, #contato {
#inicio { background: red; }
#quemsomos { background: green; }
#portfolio { background: blue; }
#clientes { background: orange; }
#contato { background: black; }
Então aqui o que eu estou dizendo ao CSS é: Aplique as propriedades width, height e position nos id's - inicio E quem somos E portfolio E clientes E contato.
Bem, ai vem o seu seguinte pensamento: Poxa, se todos tem a mesma largura e altura, todos são os mesmos elementos, então eu não preciso chamar id por id com vírgulas? Exatamente meu jovem! Mas quando for colocar cores individuais para cada uma delas, é necessário a referência do id. Veja a forma mais prática:
section {
#inicio { background: red; }
#quemsomos { background: green; }
#portfolio { background: blue; }
#clientes { background: orange; }
#contato { background: black; }
Agora pra finalizar, um método de construção do aside, article e footer:
Bem, a tradução já diz o que são e para o que servem, acho que isso deixa claro, não? Agora aqui vai surgir outra dúvida: Mas e se eu quisesse colocar um aside em cada section... Não teria que usar id ou classes para eles?
R: NÃO! Não precisa, já que ele é um elemento filho da section que já possui um ID. Então você pode estilizar ele da seguinte maneira individualmente:
#inicio aside {
#quemsomos aside {
Acho que é só isso que tenho para contribuir hoje. Continue estudando e não deixe de se manter atualizado. E se ficou alguma dúvida, por favor comente neste tópico que tentarei explicar.
Boa sorte e bons estudos!