Sobre o curso - o
complexo mundo do
front-end
"Ao a chave fundamental para todo sucesso"
Vivemos hoje numa era em que a Internet ocupa um espao
cada vez mais importante em nossas vidas pessoais e
profissionais. O surgimento constante de Aplicaes Web, para
as mais diversas finalidades, um sinal claro de que esse
mercado est em franca expanso e traz muitas oportunidades.
Aplicaes corporativas, comrcio eletrnico, redes sociais,
filmes, msicas, notcias e tantas outras reas esto presentes
na Internet, fazendo do navegador (o browser) o software mais
utilizado de nossos computadores.
Esse curso pretende abordar o desenvolvimento de frontend (interfaces) para Aplicaes Web e Sites que acessamos por
meio do navegador de nossos computadores, utilizando padres
atuais de desenvolvimento e conhecendo a fundo suas
caractersticas tcnicas. Discutiremos as implementaes dessas
tecnologias nos diferentes navegadores, a adoo
deframeworks que facilitam e aceleram nosso trabalho, alm de
dicas tcnicas que destacam um profissional no mercado.
HTML, CSS e JavaScript sero vistos em profundidade.
Alm do acesso por meio do navegador de nossos
computadores, hoje o acesso Internet a partir de dispositivos
mveis representa um grande avano da plataforma, mas
tambm implica em um pouco mais de ateno ao trabalho que
um programador front-end tem que realizar. No decorrer do
curso, vamos conhecer algumas dessas necessidades e como
utilizar os recursos disponveis para atender tambm a essa
nova necessidade.
1.1 - O CURSO E OS EXERCCIOS
Esse um curso prtico que comea nos fundamentos de
HTML e CSS, incluindo tpicos relacionados s novidades das
Conhea a Alura.
Caelum
incompany.
http://www.caelum.com.br/cursos-rails/
http://www.caelum.com.br/cursos-java/
http://www.caelum.com.br/cursos-dotnet/
PRXIMO CAPTULO:
CAPTULO 2
<ul>
<li>Confira nossas promoes.</li>
<li>Receba informaes sobre nossos lanamentos por
email.</li>
<li>Navegue por todos nossos produtos em
catlogo.</li>
<li>Compre sem sair de casa.</li>
</ul>
</body>
</html>
Reproduza o cdigo anterior em um novo arquivo de texto puro e salve-o
como index-2.html. No se preocupe com a sintaxe, vamos conhecer detalhadamente
cada caracterstica do HTML nos prximos captulos. Abra o arquivo no navegador.
Agora, o resultado exibido de maneira muito mais agradvel e legvel. Para isso,
tivemos que utilizar algumas marcaes do HTML. Essas marcaes so chamadas
de tags, e elas basicamente do significado ao texto contido entre sua abertura e
fechamento.
Apesar de estarem corretamente marcadas, as informaes no apresentam nenhum
atrativo esttico e, nessa deficincia do HTML, reside o primeiro e maior desafio do
programador front-end.
O HTML foi desenvolvido para exibio de documentos cientficos. Para termos
uma comparao, como se a Web fosse desenvolvida para exibir monografias
redigidas e formatadas pela Metodologia do Trabalho Cientfico da ABNT. Porm, com
A tag <html>
Na estrutura do nosso documento, antes de tudo, inserimos uma tag <html>. Dentro
dessa tag, necessrio declarar outras duas tags: <head> e <body>. Essas duas tags so
"irms", pois esto no mesmo nvel hierrquico em relao sua tag "pai", que
<html>.
<html>
<head></head>
<body></body>
</html>
A tag <head>
A tag <head> contm informaes sobre nosso documento que so de interesse somente
do navegador, e no dos visitantes do nosso site. So informaes que no sero
exibidas na rea do documento no navegador.
A especificao obriga a presena da tag de contedo <title> dentro do
nosso <head>, permitindo especificar o ttulo do nosso documento, que
normalmente ser exibido na barra de ttulo da janela do navegador ou na aba do
documento.
Outra configurao muito utilizada, principalmente em documentos cujo contedo
escrito em um idioma como o portugus, que tem caracteres como acentos e cedilha, a
configurao da codificao de caracteres, chamado de encoding ou charset.
A tag <body>
A tag <body> contm o corpo do nosso documento, que exibido pelo navegador em
sua janela. necessrio que o <body> tenha ao menos um elemento "filho", ou seja,
uma ou mais tags HTML dentro dele.
<html>
<head>
<title>Mirror Fashion</title>
<meta charset="utf-8">
</head>
<body>
<h1>A Mirror Fashion</h1>
</body>
</html>
Nesse exemplo, usamos a tag <h1>, que indica um ttulo.
A instruo DOCTYPE
O DOCTYPE no uma tag HTML, mas uma instruo especial. Ela indica para o
navegador qual verso do HTML deve ser utilizada para renderizar a pgina.
Utilizaremos<!DOCTYPE html>, que indica para o navegador a utilizao da
verso mais recente do HTML - a verso 5, atualmente.
H muitos comandos complicados nessa parte de DOCTYPE que eram usados em
verses anteriores do HTML e do XHTML. Hoje em dia, nada disso mais importante.
O recomendado sempre usar a ltima verso do HTML, usando a declarao
deDOCTYPE simples:
<!DOCTYPE html>
2.4 - TAGS HTML
O HTML composto de diversas tags, cada uma com sua funo e significado. O
HTML 5, ento, adicionou muitas novas tags, que veremos ao longo do curso.
Nesse momento, vamos focar em tags que representam ttulos, pargrafo e nfase.
Ttulos
Quando queremos indicar que um texto um ttulo em nossa pgina, utilizamos as
tags deheading em sua marcao:
<h1>Mirror Fashion.</h1>
<h2>Bem-vindo Mirror Fashion, sua loja de roupas e
acessrios.</h2>
As tags de heading so tags de contedo e vo de <h1> a <h6>, seguindo a
ordem de importncia, sendo <h1> o ttulo principal, o mais importante, e <h6> o
ttulo de menor importncia.
Utilizamos, por exemplo, a tag <h1> para o nome, ttulo principal da pgina, e a
tag <h2>como subttulo ou como ttulo de sees dentro do documento.
A ordem de importncia, alm de influenciar no tamanho padro de exibio do
texto, tem impacto nas ferramentas que processam HTML. As ferramentas de indexao
de contedo para buscas, como o Google, Bing ou Yahoo! levam em considerao essa
ordem e relevncia. Os navegadores especiais para acessibilidade tambm interpretam o
contedo dessas tags de maneira a diferenciar seu contedo e facilitar a navegao do
usurio pelo documento.
Pargrafos
Quando exibimos qualquer texto em nossa pgina, recomendado que ele seja
sempre contedo de alguma tag filha da tag <body>. A marcao mais indicada para
textos comuns a tag de pargrafo:
<p>Nenhum item na sacola de compras.</p>
Se voc tiver vrios pargrafos de texto, use vrias dessas tags <p> para separ-los:
<p>Um pargrafo de texto.</p>
<p>Outro pargrafo de texto.</p>
Marcaes de nfase
Quando queremos dar uma nfase diferente a um trecho de texto, podemos utilizar as
marcaes de nfase. Podemos deixar um texto "mais forte" com a
tag <strong> ou deixar o texto com uma "nfase acentuada" com a tag <em>.
Tambm h a tag <small>, que diminui o tamanho do texto.
Por padro, os navegadores renderizaro o texto dentro da tag <strong> em
negrito e o texto dentro da tag <em> em itlico. Existem ainda as tags <b> e <i>,
que atingem o mesmo resultado visualmente, mas as tags <strong> e <em> so
mais indicadas por definirem nossa inteno de significado ao contedo, mais do que
uma simples indicao visual. Vamos discutir melhor a questo do significado das tags
mais adiante.
<p>Compre suas roupas e acessrios na <strong>Mirror
Fashion</strong>.</p>
2.5 - IMAGENS
A tag <img> define uma imagem em uma pgina HTML e necessita de dois
atributos preenchidos: src e alt. O primeiro aponta para o local da imagem e o
segundo, um texto alternativo para a imagem caso essa no possa ser carregada ou
visualizada.
O HTML 5 introduziu duas novas tags especficas para
imagem: <figure> e<figcaption>. A tag <figure> define uma
imagem com a conhecida tag <img>. Alm disso, permite adicionar uma legenda
para a imagem por meio da tag <figcaption>.
<figure>
<img src="img/produto1.png" alt="Foto do produto">
<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
diferente
Muitas vezes, um site servido por meio de uma aplicao Web e, nesses casos, a
estrutura dos arquivos depende de como a aplicao necessita dos recursos para
funcionar corretamente. Porm, no geral, as aplicaes tambm seguem um padro bem
parecido com o que estamos adotando para o nosso projeto.
Use tambm a nfase com <em> que deixar o texto em itlico. Na parte da Histria,
coloque os nomes das pessoas e da famlia em <em>.
14.
A pgina deve ter duas imagens. A primeira apresenta o centro da Mirror
Fashion e deve ser inserida aps o segundo pargrafo do texto. A outra, uma
imagem da Famlia Pelho e deve ser colocada aps o subttulo da Histria.
As imagens podem ser carregadas com a tag <img>, apontando seu caminho. Alm
disso, no HTML5, podemos usar as tags <figure> e <figcaption> para
destacar a imagem e colocar uma legenda em cada uma.
A imagem do centro de distribuio est em img/centro-distribuicao.png:
<figure>
<img src="img/centro-distribuicao.png">
<figcaption>Centro de distribuio da Mirror
Fashion</figcaption>
</figure>
A imagem da famlia a img/familia-pelho.jpg e deve ser colocada na parte
de Histria:
<figure>
<img src="img/familia-pelho.jpg">
<figcaption>Famlia Pelho</figcaption>
</figure>
Verifique o resultado no navegador. Devemos j ver o contedo e as imagens na
sequncia, mas sem um design muito interessante.
Boa prtica - Indentao
Uma prtica sempre recomendada, ligada limpeza e utilizada para facilitar a leitura do
cdigo, o uso correto de recuos, ou indentao, no HTML. Costumamos alinhar
elementos "irmos" na mesma margem e adicionar alguns espaos ou um tabpara
elementos "filhos".
A maioria dos exerccios dessa apostila utiliza um padro recomendado de recuos.
Boa prtica - Comentrios
Quando iniciamos nosso projeto, utilizamos poucas tags HTML. Mais tarde
adicionaremos uma quantidade razovel de elementos, o que pode gerar uma certa
confuso. Para manter o cdigo mais legvel, recomendada a adio de comentrios
antes da abertura e aps o fechamento de tags estruturais (que contero outras tags).
Dessa maneira, ns podemos identificar claramente quando um elemento
estdentro dessa estrutura ou depois da mesma.
<!-- incio do cabecalho -->
<div id="header">
<p>Esse pargrafo est "dentro" da rea principal.</p>
</div>
<!-- fim do cabecalho -->
<p>Esse pargrafo est "depois" da rea principal.</p>
Quando escrevemos o HTML, marcamos o contedo da pgina com tags que melhor
representam o significado daquele contedo. A quando abrimos a pgina no navegador
possvel perceber que o navegador mostra as informaes com estilos diferentes.
Um h1, por exemplo, fica em negrito numa fonte maior. Pargrafos de texto so
espaados entre si, e assim por diante. Isso quer dizer que o navegador tem um estilo
padro para as tags que usamos. Mas, claro, pra fazer sites bonites vamos
querer customizar o design dos elementos da pgina.
Antigamente, isso era feito no prprio HTML. Se quisesse um ttulo em vermelho,
era s fazer:
<h1><font color="red">Mirror Fashion anos 90</font></h1>
Alm da tag font, vrias outras tags de estilo existiam. Mas isso passado. Tags
HTML para estilo so m prtica hoje em dia e jamais devem ser usadas.
Em seu lugar, surgiu o CSS, que uma outra linguagem, separada do HTML, com
objetivo nico de cuidar da estilizao da pgina. A vantagem que o CSS bem mais
robusto que o HTML para estilizao, como veremos. Mas, principalmente, escrever
formatao visual misturado com contedo de texto no HTML se mostrou algo bem
impraticvel. O CSS resolve isso separando as coisas; regras de estilo no aparecem
mais no HTML, apenas no CSS.
2.11 - SINTAXE E INCLUSO DE CSS
A sintaxe do CSS tem estrutura simples: uma declarao de propriedades e valores
separados por um sinal de dois pontos ":", e cada propriedade separada por um sinal
de ponto e vrgula ";" da seguinte maneira:
background-color: yellow;
color: blue;
O elemento que receber essas propriedades ser exibido com o texto na cor azul e
com o fundo amarelo. Essas propriedades podem ser declaradas de trs maneiras
diferentes.
Atributo style
A primeira delas como um atributo style no prprio elemento:
<p style="color: blue; background-color: yellow;">
O contedo desta tag ser exibido em azul com fundo amarelo
no navegador!
</p>
Mas tnhamos acabado de discutir que uma das grandes vantagens do CSS era
manter as regras de estilo fora do HTML. Usando esse atributo style no parece
que fizemos isso. Justamente por isso no se recomenda esse tipo de uso na prtica, mas
sim os que veremos a seguir.
A tag style
A outra maneira de se utilizar o CSS declarando suas propriedades dentro de uma
tag<style>.
Arquivo externo
A terceira maneira de declararmos os estilos do nosso documento com um arquivo
externo, geralmente com a extenso .css. Para que seja possvel declarar nosso CSS
em um arquivo parte, precisamos indicar em nosso documento HTML uma ligao
entre ele e a folha de estilo.
Alm da melhor organizao do projeto, a folha de estilo externa traz ainda as
vantagens de manter nosso HTML mais limpo e do reaproveitamento de uma mesma
folha de estilos para diversos documentos.
A indicao de uso de uma folha de estilos externa deve ser feita dentro da
tag <head> do nosso documento HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
Com essa declarao, o navegador vai requisitar um arquivo sobrebackground.jpg, que deve estar na mesma pasta do arquivo CSS onde consta
essa declarao.
2.15 - BORDAS
As propriedades do CSS para definirmos as bordas de um elemento nos apresentam
uma srie de opes. Podemos, para cada borda de um elemento, determinar sua cor,
seu estilo de exibio e sua largura. Por exemplo:
body {
border-color: red;
border-style: solid;
border-width: 1px;
}
Para que o efeito da cor sobre a borda surta efeito, necessrio que a
propriedadeborder-style tenha qualquer valor diferente do padro none.
Conseguimos fazer tambm comentrios no CSS usando a seguinte sintaxe:
/* deixando o fundo ridculo */
body {
background: gold;
}
text-align: center;
}
figcaption {
font-style: italic;
}
Teste o resultado no navegador. Nossa pgina comea a pegar o estilo da pgina final!
2.
(opcional) Teste outros estilos de bordas em vez do solid que vimos no
exerccio anterior. Algumas
possibilidades: dashed, dotted, double, groove e outros.
Conhea a Alura.
Utilizamos a
propriedade padding para espaamento e margin para margem. Vejamos cada
uma e como elas diferem entre si.
Padding
A propriedade padding utilizada para definir uma margem interna em alguns
elementos (por margem interna queremos dizer a distncia entre o limite do elemento,
sua borda, e seu respectivo contedo) e tem as subpropriedades listadas a seguir:
padding-top
padding-right
padding-bottom
padding-left
Essas propriedades aplicam uma distncia entre o limite do elemento e seu contedo
acima, direita, abaixo e esquerda respectivamente. Essa ordem importante para
entendermos como funciona a shorthand property do padding.
Podemos definir todos os valores para as subpropriedades do padding em uma nica
propriedade, chamada exatamente de padding, e seu comportamento descrito nos
exemplos a seguir:
Se passado somente um valor para a propriedade padding, esse mesmo valor
aplicado em todas as direes.
p {
padding: 10px;
}
Se passados dois valores, o primeiro ser aplicado acima e abaixo (equivalente a
passar o mesmo valor para padding-top e padding-bottom) e o
segundo ser aplicado direita e esquerda (equivalente ao mesmo valor
para padding-right e padding-left).
p {
padding: 10px 15px;
}
Se passados trs valores, o primeiro ser aplicado acima (equivalente
a padding-top), o segundo ser aplicado direita e esquerda (equivalente a
passar o mesmo valor parapadding-right e padding-left) e o
terceiro valor ser aplicado abaixo do elemento (equivalente a paddingbottom)
p {
padding: 10px 20px 15px;
}
Se passados quatro valores, sero aplicados respectivamente a paddingtop, padding-right, padding-bottom e padding-left.
Para facilitar a memorizao dessa ordem, basta lembrar que os valores so aplicados
em sentido horrio.
p {
padding: 10px 20px 15px 5px;
Margin
A propriedade margin bem parecida com a propriedade padding, exceto
que ela adiciona espao aps o limite do elemento, ou seja, um espaamento alm do
elemento em si. Alm das subpropriedades listadas a seguir, h a shorthand
property margin que se comporta da mesma maneira que a shorthand
property do padding vista no tpico anterior.
margin-top
margin-right
margin-bottom
margin-left
H ainda uma maneira de permitir que o navegador defina qual ser a dimenso da
propriedade padding ou margin conforme o espao disponvel na tela:
definimos o valorauto para a margem ou o espaamento que quisermos.
No exemplo a seguir, definimos que um elemento no tem nenhuma margem acima
ou abaixo de seu contedo e que o navegador define uma margem igual para ambos os
lados de acordo com o espao disponvel:
p {
margin: 0 auto;
}
Dimenses
possvel determinar as dimenses de um elemento, por exemplo:
p {
background-color: red;
height: 300px;
width: 300px;
}
Todos os pargrafos do nosso HTML ocuparo 300 pixels de largura e de altura,
com cor de fundo vermelha.
Caelum
incompany.
Seletor de ID
possvel aplicar propriedades visuais a um elemento selecionado pelo valor de seu
atributo id. Para isso, o seletor deve iniciar com o caractere "#" seguido do valor
correspondente.
#cabecalho {
color: white;
text-align: center;
}
O seletor acima far com que o elemento do nosso HTML que tem o
atributo id com valor "cabecalho" tenha seu texto renderizado na cor branca e
centralizado. Note que no h nenhuma indicao para qual tag a propriedade ser
aplicada. Pode ser tanto uma <div>quanto um <p>, at mesmo tags sem contedo
como uma <img>, desde que essa tenha o atributo id com o valor "cabecalho".
Como o atributo id deve ter valor nico no documento, o seletor deve aplicar suas
propriedades declaradas somente quele nico elemento e, por cascata, a todos os seus
elementos filhos.
Seletor hierrquico
Podemos ainda utilizar um seletor hierrquico que permite aplicar estilos aos
elementos filhos de um elemento pai:
#rodape img {
margin-right: 35px;
vertical-align: middle;
width: 94px;
}
No exemplo anterior, o elemento pai rodape selecionado pelo seu id. O estilo
ser aplicado apenas nos elementos img filhos do elemento com id=rodape.
Isso no acontece por padro. Repare que, observando as tags HTML que usamos at
agora, os elementos da pgina so desenhados um em cima do outro. como se cada
elemento fosse uma caixa (box) e o padro empilhar essas caixas verticalmente. Mais
pra frente vamos entender melhor esse algoritmo, mas agora o importante que ele
atrapalha esse nosso design.
Temos um problema: a tag <figure> ocupa toda a largura da pgina e aparece
empilhada no fluxo do documento, no permitindo que outros elementos sejam
adicionados ao seu lado.
Este problema pode ser solucionado por meio da propriedade float. Esta propriedade
permite que tiremos um certo elemento do fluxo vertical do documento o que faz com
que o contedo abaixo dele flua ao seu redor. Na prtica, vai fazer exatamente o layout
que queremos.
Em nosso exemplo, o contedo do pargrafo tentar fluir ao redor da nossa imagem
comfloat. Perceba que houve uma perturbao do fluxo HTML, pois agora a nossa
imagem parece existir fora do fluxo.
2.26 - EXERCCIOS: SELETORES CSS E FLUTUAO DE
ELEMENTOS
1.
Temos uma <figure> com a imagem do centro de distribuio que
queremos centralizar na pgina (margin auto) e acertar o tamanho (width).
Para aplicar essas regras apenas a esse figure e no a todos da pgina, vamos usar
o ID. Coloque um id na <figure> para podermos estiliz-la especificamente via
CSS:
<figure id="centro-distribuicao">
....
Adicionando o CSS:
#centro-distribuicao {
margin-left: auto;
margin-right: auto;
width: 550px;
}
Teste no navegador. Compare o resultado com a outra figura que no recebeu o mesmo
estilo.
2.
Crie um rodap para a pgina utilizando uma <div>, que deve ser inserida
como ltimo elemento dentro da tag <body>:
3. <div id="rodape">
4.
<img src="img/logo.png">
5.
6.
© Copyright Mirror Fashion
7. </div>
Teste o resultado.
8.
Assim como fizemos para os ttulos e subttulos, estilize o nosso rodap. Repare
no uso doid via CSS para selecionarmos apenas o elemento especfico que ser
estilizado. Repare tambm no uso do seletor de descendentes para indicar um elemento
que est dentro de outro.
9. #rodape {
10.
color: #777;
11.
margin: 30px 0;
12.
padding: 30px 0;
13.
}
14.
15.
#rodape img {
16.
margin-right: 30px;
17.
vertical-align: middle;
18.
width: 94px;
19.
}
Teste o resultado final no navegador.
20.
Queremos que a imagem da Famlia Pelho esteja flutuando a direita no texto na
seo sobre a Histria da empresa. Para isso, use a propriedade float no CSS.
Como a <figure> com a imagem da famlia Pelho ainda no possui id, adicione
um:
<figure id="familia-pelho">
....
Agora podemos referenciar o elemento atravs de seu id em nosso CSS, indicando a
flutuao e uma margem para espaamento:
#familia-pelho {
float: right;
margin: 0 0 10px 10px;
}
Teste o resultado. Repare como o texto renderizado ao redor da imagem, bem
diferente de antes.
21.
left tambm.
22.
(opcional) Teste flutuar a imagem do centro de distribuio. Como o contedo
fluir ao seu redor agora? o que queramos? Como melhorar?
diferente
preos justos.
Casa do Cdigo, ebook com preo de ebook.
CAPTULO 3
HTML semntico e
posicionamento no CSS
"O caos a rima do inaudito."
desenvolvimento deve analisar muito bem essas informaes e utilizar pesquisas para
complementar ou mesmo certificar-se da validade dessas informaes.
Um projeto de site ou aplicao web envolve muitas disciplinas em sua execuo,
pois so diversas caractersticas a serem analisadas e diversas as possibilidades
apresentadas pela plataforma. Por exemplo, devemos conhecer muito bem as
caractersticas do pblico alvo, pois ele define qual a melhor abordagem para definir a
navegao, tom lingustico e visual a ser adotado, entre outras. A afinidade do pblico
com a Internet e o computador pode inclusive definir o tipo e a intensidade das
inovaes que podem ser utilizadas.
Por isso, a primeira etapa do desenvolvimento do projeto fica a cargo da rea de User
Experience Design (UX) ou Interaction Design (IxD), normalmente composta de
pessoas com formao na rea de comunicao. Essa equipe, ou pessoa, analisa e
enderea uma srie de informaes da caracterstica humana do projeto, definindo a
quantidade, contedo e localizao de cada informao.
Algumas das motivaes e prticas de Design de Interao e Experincia do Usurio
so contedo do curso Design de Interao, Experincia do Usurio e Usabilidade.
O resultado do trabalho dessa equipe uma srie de definies sobre a navegao (mapa
do site) e um esboo de cada uma das vises, que so as pginas, e vises parciais
como, por exemplo, os dilogos de alerta e confirmao da aplicao. Essas vises no
adotam nenhum padro de design grfico: so utilizadas fontes, cores e imagens neutras,
embora as informaes escritas devam ser definidas nessa fase do projeto.
Esses esboos das vises so o que chamamos de wireframes e guiam o restante do
processo de design.
Estrutura da pgina
Note que h um cabealho (uma rea que potencialmente se repetir em mais de uma
pgina) que ocupa uma largura fixa; sendo assim, podemos criar uma seo exclusiva
para o cabealho.
Outra rea que tem uma caracterstica semelhante o rodap, pois pode se repetir em
mais de uma pgina. Podemos notar que o fundo do elemento vai de uma ponta outra
da pgina, porm seu contedo segue a mesma largura fixa do restante da pgina.
A rea central, que contm informaes diferentes em cada pgina, no tem nenhum
elemento ao fundo. Porm, notemos que sua largura limitada antes de atingir o incio e
o fim da pgina. Notemos que, apesar do fundo do rodap ir de uma ponta outra, seu
contedo tambm limitado pela mesma largura do contedo.
No caso da home page, o miolo da pgina pode ainda ser visto como dois blocos
diferentes. H o bloco principal inicial com o menu de navegao e o banner de
destaque. E h outro bloco no final com dois painis com listas de produtos.
Poderamos definir essas reas da seguinte maneira:
<body>
<header>
<!-- Contedo do cabealho -->
</header>
<section id="main">
<!-- Contedo principal -->
</section>
<section id="destaques">
<!-- Painis com destaques -->
</section>
<footer>
<!-- Contedo do rodap -->
</footer>
</body>
Note que utilizamos o atributo id do HTML para identificar
a <section> principal. O atributo id deve ser nico em cada pgina, ou seja, s
pode haver um elemento com o atributo id="main". Mesmo se o outro elemento
for de outra tag, o id no pode se repetir. De acordo com a estrutura acima, ns
separamos as quatro reas principais.
3.4 - HTML SEMNTICO
As tags que usamos antes - header, section e footer - so tags novas
do HTML5. Antigamente, numa situao parecida com essa, teramos criado apenas
trs div, uma para cada parte da pgina, e talvez colocado ids diferentes pra cada
uma.
Qual a diferena entre colocar div e essas novas tags do HTML5? Visualmente e
funcionalmente, nenhuma diferena. A nica diferena o nome da tag e o significado
que elas carregam. E isso bastante importante.
Dizemos que a funo do HTML fazer a marcao do contedo da pgina,
representar sua estrutura da informao. No papel do HTML, por exemplo, cuidar da
apresentao final e dos detalhes de design - isso papel do CSS. O HTML precisa
ser claro e limpo, focado em marcar o contedo.
As novas tags do HTML5 trazem novos significados semnticos para usarmos em
elementos HTML. Em vez de simplesmente agrupar os elementos do cabealho em
um divgenrico e sem significado, usamos uma tag header que carrega em si o
significado de representar um cabealho.
Com isso, temos um HTML com estrutura baseada no significado de seu contedo, o
que traz uma srie de benefcios, como a facilidade de manuteno e compreenso do
documento.
Provavelmente, o design da sua pgina deixa bastante claro qual parte da sua pgina
o cabealho e qual parte o menu de navegao. Visualmente, so distinguveis para o
usurio comum. Mas e se desabilitarmos o CSS e as regras visuais? Como distinguir
esses contedos?
Um HTML semntico carrega significado independente da sua apresentao visual.
Isso particularmente importante quando o contedo ser consumido por clientes no
visuais. H vrios desses cenrios. Um usurio cego poderia usar um leitor de tela para
ouvir sua pgina. Neste caso, a estrutura semntica do HTML essencial para ele
entender as partes do contedo.
Mais importante ainda, robs de busca como o Google tambm so leitores no
visuais da sua pgina. Sem um HTML semntico, o Google no consegue, por exemplo,
saber que aquilo um menu e que deve seguir seus links. Ou que determinada parte s
um rodap informativo, mas no faz parte do contedo principal. Semntica uma
Visualmente, observamos no layout que apenas uma imagem. Podemos usar ento
uma tag <img> como fizemos antes. Mas e semanticamente, o que aquele
contedo? E, principalmente, o que significa aquele logo para clientes no visuais?
Como gostaramos que esse contedo fosse indexado no Google?
muito comum, nesse tipo de situao, usar um <h1> com um texto que
represente o ttulo da nossa pgina. Se pensarmos bem, o que queremos passar com o
logo a ideia de que a pgina da Mirror Fashion.
Quando o texto for lido para um cego, queremos essa mensagem lida. Quando o
Google indexar, queremos que ele associe nossa pgina com Mirror
Fashion e no com uma imagem "qualquer".
fcil obter esse resultado colocando a <img> dentro do <h1>. E para
representar o contedo textual da imagem (o que vai ser usado pelo leitor de tela e pelo
Google), usamos o atributo alt da imagem. Esse atributo indica contedo alternativo,
que ser usado quando o cliente no for visual e no conseguir enxergar a imagem
visualmente.
<h1><img src="img/logo.png" alt="Mirror Fashion"></h1>
Repare como a colocao do H1 e do ALT na imagem no alteram em nada a pgina
visualmente. Esto l por pura importncia semntica. E isso muito bom. O H1 dar
o devido destaque semntico para a o logo, colocando-o como elemento principal. E o
ALT vai designar um contedo textual alternativo imagem.
3. <header>
4.
<h1><img src="img/logo.png" alt="Mirror Fashion"></h1>
5.
6.
<p class="sacola">
7.
Nenhum item na sacola de compras
8.
</p>
9.
10.
<nav class="menu-opcoes">
11.
<ul>
12.
<li><a href="#">Sua Conta</a></li>
13.
<li><a href="#">Lista de Desejos</a></li>
14.
<li><a href="#">Carto Fidelidade</a></li>
15.
<li><a href="sobre.html">Sobre</a></li>
16.
<li><a href="#">Ajuda</a></li>
17.
</ul>
18.
</nav>
19.
</header>
20.
J podemos at testar no navegador. Repare como a pgina, embora sem estilo
visual, utilizvel. assim que os clientes no visuais lero nosso contedo. Qual a
importncia de uma marcao semntica?
21.
Vamos criar a estilizao visual bsica do nosso contedo, sem nos
preocuparmos com posicionamento ainda. Ajuste as cores e alinhamento dos textos.
Coloque o cone da sacola com CSS atravs de uma imagem de fundo do pargrafo:
22.
.sacola {
23.
background: url(../img/sacola.png) no-repeat top
right;
24.
25.
font-size: 14px;
26.
padding-right: 35px;
27.
text-align: right;
28.
width: 140px;
29.
}
30.
31.
.menu-opcoes ul {
32.
font-size: 15px;
33.
}
34.
35.
.menu-opcoes a {
36.
color: #003366;
37.
}
Aproveite e configure a cor e a fonte base de todos os textos do site, usando um seletor
direto na tag <body>:
body {
color: #333333;
font-family: "Lucida Sans Unicode", "Lucida Grande", sansserif;
}
1.
Utilizaremos o CSS reset do Eric Meyer. O arquivo reset.css j foi copiado para
a pastacss do nosso projeto quando importamos o projeto no captulo inicial.
Precisamos s referenci-lo no head antes do nosso estilos.css:
<link rel="stylesheet" href="css/reset.css">
Abra novamente a pgina no navegador. Percebe a diferena, principalmente na
padronizao dos espaamentos.
2.
Prximo passo: transformar nosso menu em horizontal e ajustar espaamentos
bsicos.
Vamos usar a propriedade display para mudar os <li> para inline.
Aproveite e j coloque um espaamento entre os links com margin.
Repare tambm como a sacola est desalinhada. O texto est muito pra cima e no
alinhado com a base do cone. Um padding-top deve resolver.
.menu-opcoes ul li {
display: inline;
margin-left: 20px;
}
.sacola {
padding-top: 8px;
}
Teste a pgina. Est melhorando?
3.
Nosso header ainda est todo esquerda da pgina, sendo que, no layout, ele
tem um tamanho fixo e fica centralizado na pgina. Alis, no s o cabealho que fica
assim: o contedo da pgina em si e o contedo do rodap tambm.
Temos trs tipos de elementos que precisam ser centralizados no meio da pgina.
Vamos copiar e colar as instrues CSS nos 3 lugares? No! Criamos uma classe no
HTML a ser aplicada em todos esses pontos e um nico seletor no CSS.
.container {
margin: 0 auto;
width: 940px;
}
Vamos usar essa classe container no HTML tambm. Altere a tag header e
passe oclass="container" para ela.
Teste a pgina e veja o contedo centralizado. Agora, falta "somente" o posicionamento
dos elementos do header.
height: 200px;
width: 200px;
}
.absoluto {
position: absolute;
top: 20px;
right: 30px;
}
Seguindo o exemplo acima, o segundo elemento <div>, que recebe o valor
"absoluto" em seu atributo class, no tem nenhum elemento como seu "pai" na
hierarquia do documento, portanto ele vai alinhar-se ao topo e direita do limite visvel
da pgina no navegador, adicionando respectivamente 20px e 30px nessas direes.
Vamos analisar agora o exemplo a seguir:
Estrutura HTML
<div class="quadrado relativo">
<div class="quadrado absoluto"></div>
</div>
Estilos CSS
.quadrado {
background: green;
height: 200px;
width: 200px;
}
.absoluto {
position: absolute;
top: 20px;
right: 30px;
}
.relativo {
position: relative;
}
Nesse caso, o elemento que recebe o posicionamento absolute "filho" do elemento
que recebe o posicionamento relative na estrutura do documento, portanto, o
elementoabsolute vai usar como ponto de referncia para suas coordenadas o
elemento relative e se posicionar 20px ao topo e 30px direita da posio
original desse elemento.
O outro modo de posicionamento, fixed, sempre vai tomar como referncia a poro
visvel do documento no navegador, e mantm essa posio inclusive quando h
rolagem na tela. uma propriedade til para avisos importantes que devem ser visveis
com certeza.
Um resumo de position
static
o
Sua posio dada automaticamente pelo fluxo da pgina: por padro ele
renderizado logo aps seus irmos
O tamanho do seu elemento pai leva em conta o tamanho do elemento relative, porm
sem levar em conta seu posicionamento. O pai no sofreria alteraes mesmo se o
elemento fosse static.
fixed
o
O elemento ser renderizado na pgina na posio indicada: mesmo que ocorra uma
rolagem o elemento permanecer no mesmo lugar
Seu tamanho no conta para calcular o tamanho do elemento pai, como se no fosse
elemento filho
absolute
o
Conhea a Alura.
17.
Teste a pgina no navegador. Como est nosso cabealho? De acordo com o
design original?