Você está na página 1de 51

31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

APOSTILA DESENVOLVIMENTO WEB COM HTML, CSS E JAVASCRIPT

CAPTULO 2

Introduo a HTML e CSS


"Quanto mais nos elevamos, menores parecemos aos olhos daqueles que no
sabem voar."
Friedrich Wilhelm Nietzsche

2.1 - EXIBINDO INFORMAES NA WEB

A nica linguagem que o navegador consegue interpretar para a exibio de


contedo o HTML. Para iniciar a explorao do HTML, vamos imaginar o
seguinte caso: o navegador realizou uma requisio e recebeu como corpo da
resposta o seguinte contedo:

MirrorFashion.

BemvindoMirrorFashion,sualojaderoupaseacessrios.

Confiranossaspromoes.
Recebainformaessobrenossoslanamentosporemail.
Navegueportodosnossosprodutosemcatlogo.
Compresemsairdecasa.

Para conhecer o comportamento dos navegadores quanto ao contedo descrito


antes, vamos reproduzir esse contedo em um arquivo de texto comum, que pode
ser criado com qualquer editor de texto puro. Salve o arquivo como index.html e
abra-o a partir do navegador sua escolha.

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 1/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

Parece que obtemos um resultado um pouco diferente do esperado, no? Apesar


de ser capaz de exibir texto puro em sua rea principal, algumas regras devem ser
seguidas caso desejemos que esse texto seja exibido com alguma formatao, para
facilitar a leitura pelo usurio final.

Usando o resultado acima podemos concluir que o navegador por padro:

Pode no exibir caracteres acentuados corretamente;

No exibe quebras de linha.

Para que possamos exibir as informaes desejadas com a formatao,


necessrio que cada trecho de texto tenha uma marcao indicando qual o
significado dele. Essa marcao tambm influencia a maneira com que cada
trecho do texto ser exibido. A seguir listado o texto com uma marcao correta:

<!DOCTYPEhtml>
<html>
<head>
<title>MirrorFashion</title>
<metacharset="utf8">
</head>
<body>
<h1>MirrorFashion.</h1>
<h2>BemvindoMirrorFashion,sualojaderoupaseacessrios.</h2>
<ul>
<li>Confiranossaspromoes.</li>
<li>Recebainformaessobrenossoslanamentosporemail.</li>

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 2/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

<li>Navegueportodosnossosprodutosemcatlogo.</li>
<li>Compresemsairdecasa.</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 o tempo e a evoluo da Web e de seu potencial comercial, tornou-se
necessria a exibio de informaes com grande riqueza de elementos grficos e
de interao.

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 3/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

2.2 - SINTAXE DO HTML

O HTML um conjunto de tags responsveis pela marcao do contedo de uma


pgina no navegador. No cdigo que vimos antes, as tags so os elementos a mais
que escrevemos usando a sintaxe <nomedatag>. Diversas tags so disponibilizadas
pela linguagem HTML e cada uma possui uma funcionalidade especfica.

No cdigo de antes, vimos por exemplo o uso da tag <h1>. Ela representa o ttulo
principal da pgina.

<h1>MirrorFashion</h1>

Note a sintaxe. Uma tag definida com caracteres < e >, e seu nome (H1 no
caso). Muitas tags possuem contedo, como o texto do ttulo ("Mirror Fashion").
Nesse caso, para determinar onde o contedo acaba, usamos uma tag de
fechamento com a barra antes do nome: </h1>.

Algumas tags podem receber atributos dentro de sua definio. So parmetros


usando a sintaxe de nome=valor. Para definir uma imagem, por exemplo, usamos a
tag <img> e, para indicar qual imagem carregar, usamos o atributo src:

<imgsrc="../imagens/casa_de_praia.jpg">

Repare que a tag img no possui contedo por si s. Nesses casos, no


necessrio usar uma tag de fechamento como antes no h1.

Tire suas dvidas no GUJ Respostas

O GUJ um dos principais fruns brasileiros de computao


e o maior em portugus sobre Java. A nova verso do GUJ
baseada em uma ferramenta de perguntas e respostas (QA) e
tem uma comunidade muito forte. So mais de 150 mil
usurios pra ajudar voc a esclarecer suas dvidas.

Faa sua pergunta.

2.3 - ESTRUTURA DE UM DOCUMENTO HTML

Um documento HTML vlido precisa seguir obrigatoriamente a estrutura


composta pelas tags <html>, <head> e <body> e a instruo <!DOCTYPE>. Vejamos
cada uma delas:

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 4/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

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.

Podemos configurar qual codificao queremos utilizar em nosso documento


por meio da configurao de charset na tag <meta>. Um dos valores mais comuns
usados hoje em dia o UTF-8, tambm chamado de Unicode. H outras
possibilidades, como o latin1, muito usado antigamente.

O UTF-8 a recomendao atual para encoding na Web por ser amplamente


suportada em navegadores e editores de cdigo, alm de ser compatvel com
praticamente todos os idiomas do mundo. o que usaremos no curso.

<html>
<head>
<title>MirrorFashion</title>
<metacharset="utf8">
</head>
<body>

</body>
</html>

A tag <body>

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 5/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

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>MirrorFashion</title>
<metacharset="utf8">
</head>
<body>
<h1>AMirrorFashion</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 <!DOCTYPEhtml>, 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 de DOCTYPE simples:

<!DOCTYPEhtml>

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 de heading em sua marcao:

<h1>MirrorFashion.</h1>
<h2>BemvindoMirrorFashion,sualojaderoupaseacessrios.</h2>

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 6/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

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>Nenhumitemnasacoladecompras.</p>

Se voc tiver vrios pargrafos de texto, use vrias dessas tags <p> para separ-
los:

<p>Umpargrafodetexto.</p>
<p>Outropargrafodetexto.</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>Compresuasroupaseacessriosna<strong>MirrorFashion</strong>.</p>

2.5 - IMAGENS
https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 7/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

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>
<imgsrc="img/produto1.png"alt="Fotodoproduto">
<figcaption>FuzzCardiganporR$129,90</figcaption>
</figure>

Nova editora Casa do Cdigo com livros de uma forma diferente

Editoras tradicionais pouco ligam para ebooks e novas


tecnologias. No conhecem programao para revisar os
livros tecnicamente a fundo. No tm anos de experincia em
didticas com cursos.

Conhea a Casa do Cdigo, uma editora diferente, com


curadoria da Caelum e obsesso por livros de qualidade a preos justos.

Casa do Cdigo, ebook com preo de ebook.

2.6 - A ESTRUTURA DOS ARQUIVOS DE UM PROJETO

Como todo tipo de projeto de software, existem algumas recomendaes quanto


organizao dos arquivos de um site. No h nenhum rigor tcnico quanto a essa
organizao e, na maioria das vezes, voc vai adaptar as recomendaes da
maneira que for melhor para o seu projeto.

Como um site um conjunto de pginas Web sobre um assunto, empresa,


produto ou qualquer outra coisa, comum todos os arquivos de um site estarem
dentro de uma s pasta e, assim como um livro, recomendado que exista uma
"capa", uma pgina inicial que possa indicar para o visitante quais so as outras
pginas que fazem parte desse projeto e como ele pode acess-las, como se fosse
o ndice do site.

Esse ndice, no por coincidncia, conveno adotada pelos servidores de


pginas Web. Se desejamos que uma determinada pasta seja servida como um site

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 8/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

e dentro dessa pasta existe um arquivo chamado index.html, esse arquivo ser a
pgina inicial a menos que alguma configurao determine outra pgina para esse
fim.

Dentro da pasta do site, no mesmo nvel que o index.html, recomendado que


sejam criadas mais algumas pastas para manter separados os arquivos de
imagens, as folhas de estilo CSS e os scripts. Para iniciar um projeto, teramos
uma estrutura de pastas como a demonstrada na imagem a seguir:

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.

2.7 - EDITORES E IDES

Existem editores de texto como Gedit (www.gnome.org), Sublime


(http://www.sublimetext.com/) e Notepad++ (http://notepad-plus-plus.org), que
possuem realce de sintaxe e outras ferramentas para facilitar o desenvolvimento
de pginas. H tambm IDEs (Integrated Development Environment), que
oferecem recursos como autocompletar e pr-visualizao, como Eclipse e Visual
Studio.

2.8 - PRIMEIRA PGINA

A primeira pgina que desenvolveremos para a Mirror Fashion ser a Sobre, que
explica detalhes sobre a empresa, apresenta fotos e a histria.

Recebemos o design j pronto, assim como os textos. Nosso trabalho, como


desenvolvedores de front-end, codificar o HTML e CSS necessrios para esse
resultado.

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 9/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

J conhece os cursos online Alura?

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 10/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

A Alura oferece centenas de cursos online em sua


plataforma exclusiva de ensino que favorece o
aprendizado com a qualidade reconhecida da Caelum.
Voc pode escolher um curso nas reas de Java, Front-
end, Ruby, Web, Mobile, .NET, PHP e outros, com um plano que d acesso a
todos os cursos.

Conhea os cursos online Alura.

2.9 - EXERCCIO: PRIMEIROS PASSOS COM HTML

1. Ao longo do curso, usaremos diversas imagens que o nosso designer preparou.


Nesse ponto, vamos importar todas as imagens dentro do projeto que criamos
antes para que possamos us-las nas pginas.

Copie a pasta mirror-fashion de dentro da pasta Caelum/43 para a rea de


trabalho de sua mquina.

Verifique a pasta img, agora cheia de arquivos do design do site. Alm desta
pasta, teremos as pastas js e css, que ainda no usaremos.

Em casa

Voc pode baixar um ZIP com todos os arquivos necessrios para o curso
aqui: https://s3.amazonaws.com/caelum.com.br/caelum-arquivos-curso-
web.zip

2. Dentro da pasta mirror-fashion, vamos criar o arquivo sobre.html com a


estrutura bsica contendo o DOCTYPE e as tags html, head e body:

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf8">
<title>SobreaMirrorFashion</title>
</head>
<body>
</body>
</html>

3. A pgina deve ter uma imagem com o logo da empresa, um ttulo e um texto
falando sobre ela.

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 11/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

O texto para ser colocado na pgina est no arquivo sobre.txt disponvel na pasta
Caelum/43/textos. So vrios pargrafos que devem ser adaptados com o HTML
apropriado.

Aps copiar o texto do arquivo sobre.txt coloque cada um dos pargrafos dentro
de uma tag <p>. Coloque tambm o ttulo Histria dentro de uma tag <h2>.

Use a tag <img> para o logo e a tag <h1> para o ttulo. Seu HTML deve ficar assim,
no final:

<imgsrc="img/logo.png">

<h1>AMirrorFashion</h1>

<p>
AMirrorFashionamaiorempresadecomrcioeletrniconosegmento
demodaemtodoomundo.Fundadaem1932,possuifiliais
em124pases........
</p>

4. Um texto corrido sem nfases difcil de ler. Use negritos e itlicos para
destacar partes importantes.

Use a tag <strong> para a nfase mais forte em negrito, por exemplo para destacar
o nome da empresa no texto do primeiro pargrafo:

<p>A<strong>MirrorFashion</strong>amaiorempresacomrcio
eletrnico.......</p>

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>.

5. 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>
<imgsrc="img/centrodistribuicao.png">
<figcaption>CentrodedistribuiodaMirrorFashion</figcaption>
</figure>

A imagem da famlia a img/familia-pelho.jpg e deve ser colocada na parte de


Histria:

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 12/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

<figure>
<imgsrc="img/familiapelho.jpg">
<figcaption>FamliaPelho</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 tab para 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 est dentro dessa estrutura ou
depois da mesma.

<!inciodocabecalho>
cabecalho
<divid="header">
<p>Essepargrafoest"dentro"dareaprincipal.</p>
</div>
<!fimdocabecalho>
cabecalho

<p>Essepargrafoest"depois"dareaprincipal.</p>

2.10 - ESTILIZANDO COM CSS

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.

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 13/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

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><fontcolor="red">MirrorFashionanos90</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:

backgroundcolor: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:

<pstyle="color:blue;backgroundcolor:yellow;">
Ocontedodestatagserexibidoemazulcomfundoamarelononavegador!
</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.

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 14/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

A tag style

A outra maneira de se utilizar o CSS declarando suas propriedades dentro de uma


tag <style>.

Como estamos declarando as propriedades visuais de um elemento em outro


lugar do nosso documento, precisamos indicar de alguma maneira a qual
elemento nos referimos. Fazemos isso utilizando um seletor CSS. basicamente
uma forma de buscar certos elementos dentro da pgina que recebero as regras
visuais que queremos.

No exemplo a seguir, usaremos o seletor que pega todas as tags p e altera sua
cor e background:

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf8">
<title>SobreaMirrorFashion</title>
<style>
p{
backgroundcolor:yellow;
color:blue;
}
</style>
</head>
<body>
<p>
Ocontedodestatagserexibidoemazulcomfundoamarelo!
</p>
<p>
<strong>Tambm</strong>serexibidoemazulcomfundoamarelo!
</p>
</body>
</html>

O cdigo anterior da tag <style> indica que estamos alterando a cor e o fundo
de todos os elementos com tag p. Dizemos que selecionamos esses elementos pelo
nome de sua tag, e aplicamos certas propriedades CSS apenas neles.

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.
https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 15/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

A indicao de uso de uma folha de estilos externa deve ser feita dentro da tag
<head> do nosso documento HTML:

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf8">
<title>SobreaMirrorFashion</title>
<linkrel="stylesheet"href="estilos.css">
</head>
<body>
<p>
Ocontedodestatagserexibidoemazulcomfundoamarelo!
</p>
<p>
<strong>Tambm</strong>serexibidoemazulcomfundoamarelo!
</p>
</body>
</html>

E dentro do arquivo estilos.css colocamos apenas o contedo do CSS:

p{
color:blue;
backgroundcolor:yellow;
}

Saber ingls muito importante em TI

O Galandra auxilia a prtica de ingls atravs de flash


cards e spaced repetition learning. Conhea e aproveite
os preos especiais.

Pratique seu ingls no Galandra.

2.12 - PROPRIEDADES TIPOGRFICAS E FONTES

Da mesma maneira que alteramos cores, podemos alterar o texto. Podemos


definir fontes com o uso da propriedade fontfamily.

A propriedade fontfamily pode receber seu valor com ou sem aspas. No


primeiro caso, passaremos o nome do arquivo de fonte a ser utilizado, no ltimo,
passaremos a famlia da fonte.

Por padro, os navegadores mais conhecidos exibem texto em um tipo que


conhecemos como "serif". As fontes mais conhecidas (e comumente utilizadas
como padro) so "Times" e "Times New Roman", dependendo do sistema

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 16/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

operacional. Elas so chamadas de fontes serifadas pelos pequenos ornamentos


em suas terminaes.

Podemos alterar a famlia de fontes que queremos utilizar em nosso documento


para a famlia "sans-serif" (sem serifas), que contm, por exemplo, as fontes
"Arial" e "Helvetica". Podemos tambm declarar que queremos utilizar uma
famlia de fontes "monospace" como, por exemplo, a fonte "Courier".

h1{
fontfamily:serif;
}

h2{
fontfamily:sansserif;
}

p{
fontfamily:monospace;
}

possvel, e muito comum, declararmos o nome de algumas fontes que


gostaramos de verificar se existem no computador, permitindo que tenhamos um
controle melhor da forma como nosso texto ser exibido. Normalmente,
declaramos as fontes mais comuns, e existe um grupo de fontes que so
consideradas "seguras" por serem bem populares.

Em nosso projeto, vemos que as fontes no tm ornamentos. Ento vamos


declarar essa propriedade para todo o documento por meio do seu elemento body:

body{
fontfamily:"Arial","Helvetica",sansserif;
}

Nesse caso, o navegador verificar se a fonte "Arial" est disponvel e a


utilizar para renderizar os textos de todos os elementos do nosso documento
que, por cascata, herdaro essa propriedade do elemento body.

Caso a fonte "Arial" no esteja disponvel, o navegador verificar a


disponibilidade da prxima fonte declarada, no nosso exemplo a "Helvetica".
Caso o navegador no encontre tambm essa fonte, ele solicita qualquer fonte que
pertena famlia "sans-serif", declarada logo a seguir, e a utiliza para exibir o
texto, no importa qual seja ela.

Temos outras propriedades para manipular a fonte, como a propriedade font


style, que define o estilo da fonte que pode ser: normal (normal na vertical),
italic (inclinada) e oblique (oblqua).

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 17/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

2.13 - ALINHAMENTO E DECORAO DE TEXTO

J vimos uma srie de propriedades e subpropriedades que determinam o estilo


do tipo (fonte). Vamos conhecer algumas maneiras de alterarmos as disposies
dos textos.

Uma das propriedades mais simples, porm muito utilizada, a que diz respeito
ao alinhamento de texto: a propriedade textalign.

p{
textalign:right;
}

O exemplo anterior determina que todos os pargrafos da nossa pgina tenham


o texto alinhado para a direita. Tambm possvel determinar que um elemento
tenha seu contedo alinhado ao centro ao definirmos o valor center para a
propriedade textalign, ou ento definir que o texto deve ocupar toda a largura do
elemento aumentando o espaamento entre as palavras com o valor justify. O
padro que o texto seja alinhado esquerda, com o valor left, porm
importante lembrar que essa propriedade propaga-se em cascata.

possvel configurar tambm uma srie de espaamentos de texto com o CSS:

p{
lineheight:3px;/*tamanhodaalturadecadalinha*/
letterspacing:3px;/*tamanhodoespaoentrecadaletra*/
wordspacing:5px;/*tamanhodoespaoentrecadapalavra*/
textindent:30px;/*tamanhodamargemdaprimeiralinhadotexto*/
}

2.14 - IMAGEM DE FUNDO

A propriedade backgroundimage permite indicar um arquivo de imagem para


ser exibido ao fundo do elemento. Por exemplo:

h1{
backgroundimage:url(sobrebackground.jpg);
}

Com essa declarao, o navegador vai requisitar um arquivo sobre


background.jpg, que deve estar na mesma pasta do arquivo CSS onde consta essa
declarao.

Voc no est nessa pgina a toa

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 18/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

Voc chegou aqui porque a Caelum referncia nacional em


cursos de Java, Ruby, Agile, Mobile, Web e .NET.

Faa curso com quem escreveu essa apostila.

Consulte as vantagens do curso Desenvolvimento Web com


HTML, CSS e JavaScript.

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{
bordercolor:red;
borderstyle:solid;
borderwidth:1px;
}

Para que o efeito da cor sobre a borda surta efeito, necessrio que a
propriedade borderstyle tenha qualquer valor diferente do padro none.

Conseguimos fazer tambm comentrios no CSS usando a seguinte sintaxe:

/*deixandoofundoridculo*/
body{
background:gold;
}

2.16 - EXERCCIO: PRIMEIROS PASSOS COM CSS

1. Aplicaremos um pouco de estilo em nossa pgina usando CSS. Dentro da pasta


css, crie um arquivo sobre.css, que conter nosso cdigo de estilo para essa
pgina.

Em primeiro lugar, precisamos carregar o arquivo sobre.css dentro da pgina


sobre.html com a tag <link> dentro da tag <head>:

<linkrel="stylesheet"href="css/sobre.css">

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 19/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

Para o elemento <body>, altere a sua cor e sua fonte base por meio das
propriedades color e fontfamily:

body{
color:#333333;
fontfamily:"LucidaSansUnicode","LucidaGrande",sansserif;
}

O ttulo principal deve ter um fundo estampado com a imagem img/sobre-


background.jpg. Use a propriedade backgroundimage pra isso. Aproveite e
coloque uma borda sutil nos subttulos, para ajudar a separar o contedo.

h1{
backgroundimage:url(../img/sobrebackground.jpg);
}

h2{
borderbottom:2pxsolid#333333;
}

Acerte tambm a renderizao das figuras. Coloque um fundo cinza, uma borda
sutil, deixe a legenda em itlico com fontstyle e alinhe a imagem e a legenda no
centro com textalign.

figure{
backgroundcolor:#F2EDED;
border:1pxsolid#ccc;
textalign:center;
}

figcaption{
fontstyle:italic;
}

Teste o resultado no navegador. Nossa pgina comea a pegar o estilo da pgina


final!

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 20/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

2. (opcional) Teste outros estilos de bordas em vez do solid que vimos no


exerccio anterior. Algumas possibilidades: dashed, dotted, double, groove e
outros.

Teste tambm outras possibilidades para o textalign, como left, right e


justify.

2.17 - CORES NA WEB

Propriedades como background-color, color, border-color, entre outras


aceitam uma cor como valor. Existem vrias maneiras de definir cores quando
utilizamos o CSS.

A primeira, mais simples e ingnua, usando o nome da cor:

h1{
color:red;
}

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 21/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

h2{
background:yellow;
}

O difcil acertar a exata variao de cor que queremos no design. Por isso,
bem incomum usarmos cores com seus nomes. O mais comum definir a cor com
base em sua composio RGB.

RGB um sistema de cor bastante comum aos designers. Ele permite


especificar at 16 milhes de cores como uma combinao de trs cores base:
Vermelho (Red), Verde (Green), Azul (Blue). Podemos escolher a intensidade de
cada um desses trs canais bsicos, numa escala de 0 a 255.

Um amarelo forte, por exemplo, tem 255 de Red, 255 de Green e 0 de Blue (255,
255, 0). Se quiser um laranja, basta diminuir um pouco o verde (255, 200, 0). E
assim por diante.

No CSS, podemos escrever as cores tendo como base sua composio RGB.
Alis, no CSS3 - que veremos melhor depois - h at uma sintaxe bem simples pra
isso:

h3{
color:rgb(255,200,0);
}

Essa sintaxe funciona nos browsers mais modernos mas no a mais comum
na prtica, por questes de compatibilidade. O mais comum a notao
hexadecimal, que acabamos usando no exerccio anterior ao escrever #F2EDED.
Essa sintaxe tem suporte universal nos navegadores e mais curta de escrever,
apesar de ser mais enigmtica.

h3{
background:#F2EDED;
}

No fundo, porm, a mesma coisa. Na notao hexadecimal (que comea com


#), temos 6 caracteres. Os primeiros 2 indicam o canal Red, os dois seguintes, o
Green, e os dois ltimos, Blue. Ou seja, RGB. E usamos a matemtica pra escrever
menos, trocando a base numrica de decimal para hexadecimal.

Na base hexadecimal, os algarismos vo de zero a quinze (ao invs do zero a


nove da base decimal comum). Para representar os algarismos de dez a quinze,
usamos letras de A a F. Nessa sintaxe, portanto, podemos utilizar nmeros de 0-9
e letras de A-F.

H uma conta por trs dessas converses, mas seu editor de imagens deve ser
capaz de fornecer ambos os valores para voc sem problemas. Um valor 255 vira
https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 22/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

FF na notao hexadecimal. A cor #F2EDED, por exemplo, equivalente a


rgb(242, 237, 237), um cinza claro.

Vale aqui uma dica quanto ao uso de cores hexadecimais, toda vez que os
caracteres presentes na composio da base se repetirem, estes podem ser
simplificados. Ento um nmero em hexadecimal 3366FF, pode ser simplificado
para 36F.

Seus livros de tecnologia parecem do sculo passado?

Conhea a Casa do Cdigo, uma nova editora, com autores de


destaque no mercado, foco em ebooks (PDF, epub, mobi),
preos imbatveis e assuntos atuais.

Com a curadoria da Caelum e excelentes autores, uma


abordagem diferente para livros de tecnologia no Brasil.
Conhea os ttulos e a nova proposta, voc vai gostar.

Casa do Cdigo, livros para o programador.

2.18 - LISTAS HTML

No so raros os casos em que queremos exibir uma listagem em nossas


pginas. O HTML tem algumas tags definidas para que possamos fazer isso de
maneira correta. A lista mais comum a lista no-ordenada.

<ul>
<li>Primeiroitemdalista</li>
<li>
Segundoitemdalista:
<ul>
<li>Primeiroitemdalistaaninhada</li>
<li>Segundoitemdalistaaninhada</li>
</ul>
</li>
<li>Terceiroitemdalista</li>
</ul>

Note que, para cada item da lista no-ordenada, utilizamos uma marcao de
item de lista <li>. No exemplo acima, utilizamos uma estrutura composta na qual
o segundo item da lista contm uma nova lista. A mesma tag de item de lista <li>
utilizada quando demarcamos uma lista ordenada.

<ol>
<li>Primeiroitemdalista</li>
<li>Segundoitemdalista</li>

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 23/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

<li>Terceiroitemdalista</li>
<li>Quartoitemdalista</li>
<li>Quintoitemdalista</li>
</ol>

As listas ordenadas tambm podem ter sua estrutura composta por outras listas
ordenadas como no exemplo que temos para as listas no-ordenadas. Tambm
possvel ter listas ordenadas aninhadas em um item de uma lista no-ordenada e
vice-versa.

Existe um terceiro tipo de lista que devemos utilizar para demarcar um


glossrio, quando listamos termos e seus significados. Essa lista a lista de
definio.

<dl>
<dt>HTML</dt>
<dd>
HTMLalinguagemdemarcaodetextosutilizada
paraexibirtextoscomopginasnaInternet.
</dd>
<dt>Navegador</dt>
<dd>
NavegadorosoftwarequerequisitaumdocumentoHTML
atravsdoprotocoloHTTPeexibeseucontedoemuma
janela.
</dd>
</dl>

2.19 - ESPAAMENTO E MARGEM

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

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 24/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

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 paddingtop e paddingbottom) e o segundo ser
aplicado direita e esquerda (equivalente ao mesmo valor para paddingright e
paddingleft).

p{
padding:10px15px;
}

Se passados trs valores, o primeiro ser aplicado acima (equivalente a


paddingtop), o segundo ser aplicado direita e esquerda (equivalente a passar
o mesmo valor para paddingright e paddingleft) e o terceiro valor ser aplicado
abaixo do elemento (equivalente a paddingbottom)

p{
padding:10px20px15px;
}

Se passados quatro valores, sero aplicados respectivamente a paddingtop,


paddingright, paddingbottom e paddingleft. Para facilitar a memorizao
dessa ordem, basta lembrar que os valores so aplicados em sentido horrio.

p{
padding:10px20px15px5px;
}

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.
https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 25/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

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 valor auto 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:0auto;
}

Dimenses

possvel determinar as dimenses de um elemento, por exemplo:

p{
backgroundcolor:red;
height:300px;
width:300px;
}

Todos os pargrafos do nosso HTML ocuparo 300 pixels de largura e de altura,


com cor de fundo vermelha.

2.20 - EXERCCIOS: LISTAS E MARGENS

1. Ainda na pgina sobre.html, crie um subttulo chamado Diferenciais e, logo em


seguida, uma lista de diferenciais. Use <h2> para o subttulo, <ul> para a lista e
<li> para os itens da lista.

Dica: voc pode copiar o texto dos diferenciais do arquivo diferenciais.txt.

<h2>Diferenciais</h2>

<ul>
<li>Menorpreodovarejo,garantido</li>
<li>Sevocacharumalojamaisbarata,levaoprodutodegraa</li>
....
</ul>

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 26/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

Teste o resultado no navegador.

2. Podemos melhorar a apresentao da pgina acertando alguns espaamentos


usando vrias propriedades do CSS, como margin, padding e textindent.

h1{
padding:10px;
}

h2{
margintop:30px;
}

p{
padding:045px;
textindent:15px;
}

figure{
padding:15px;
margin:30px;
}

figcaption{
margintop:10px;
}

Veja o resultado no navegador.

3. Para centralizar o body como no design, podemos usar o truque de colocar um


tamanho fixo e margens auto na esquerda e na direita:

body{
marginleft:auto;
marginright:auto;
width:940px;
}

Verifique mais uma vez o resultado.

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 27/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

Agora a melhor hora de aprender algo novo

Se voc gosta de estudar essa apostila aberta da Caelum,


certamente vai gostar dos cursos online que lanamos na
plataforma Alura. Voc estuda a qualquer momento com
a qualidade Caelum.

Conhea a Alura.

2.21 - LINKS HTML

Quando precisamos indicar que um trecho de texto se refere a um outro


contedo, seja ele no mesmo documento ou em outro endereo, utilizamos a tag
de ncora <a>.

Existem dois diferentes usos para as ncoras. Um deles a definio de links:

<p>
Visiteositeda<ahref="http://www.caelum.com.br">Caelum</a>.
</p>

Note que a ncora est demarcando apenas a palavra "Caelum" de todo o


contedo do pargrafo exemplificado. Isso significa que, ao clicarmos com o
cursor do mouse na palavra "Caelum", o navegador redirecionar o usurio para o
site da Caelum, indicado no atributo href.

Outro uso para a tag de ncora a demarcao de destinos para links dentro do
prprio documento, o que chamamos de bookmark.
https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 28/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

<p>Maisinformaes<ahref="#info">aqui</a>.</p>
<p>Contedodapgina...</p>

<h2id="info">Maisinformaessobreoassunto:</h2>
<p>Informaes...</p>

De acordo com o exemplo acima, ao clicarmos sobre a palavra "aqui",


demarcada com um link, o usurio ser levado poro da pgina onde o
bookmark "info" visvel. Bookmark o elemento que tem o atributo id.

possvel, com o uso de um link, levar o usurio a um bookmark presente em


outra pgina.

<ahref="http://www.caelum.com.br/curso/wd43/#contato">
Entreemcontatosobreocurso
</a>

O exemplo acima far com que o usurio que clicar no link seja levado poro
da pgina indicada no endereo, especificamente no ponto onde o bookmark
"contato" seja visvel.

2.22 - EXERCCIOS: LINKS

1. No terceiro pargrafo do texto, citamos o centro de distribuio na cidade de


Jacarezinho, no Paran. Transforme esse texto em um link externo apontando
para o mapa no Google Maps.

Use a tag <a> para criar link para o Google Maps:

<ahref="https://maps.google.com.br/?q=Jacarezinho">
Jacarezinho,noParan
</a>

Teste a pgina no navegador e acesse o link.

2. Durante o curso, vamos criar vrias pginas para o site da Mirror Fashion, como
uma pgina inicial (chamada index.html).

Queremos, nessa pgina de Sobre que estamos fazendo, linkar para essa pgina.
Por isso, vamos cri-la agora na pasta mirrorfashion com a estrutura bsica e
um pargrafo indicando em qual pgina o usurio est. No se preocupe, ela ser
incrementada em breve.

Crie a pgina index.html:

<!DOCTYPEhtml>
<html>
<head>

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 29/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

<title>MirrorFashion</title>
<metacharset="utf8">
</head>
<body>
<h1>Ol,souoindex.html!</h1>
</body>
</html>

Adicione um link interno na nossa sobre.html apontando para esta pgina que
acabamos de criar. O terceiro pargrafo do texto possui referncia a esta pgina
mas ainda sem link. Crie link l:

...Acesse<ahref="index.html">nossaloja</a>...

Repare como apenas envolvemos o texto a ser linkado usando a tag <a>.

Veja o resultado.

3. Se reparar bem, ainda nesse terceiro pargrafo de texto, h referncias textuais


para as outras sees da nossa pgina, em particular para a Histria e os
Diferenciais. Para facilitar a navegao do usurio, podemos transformar essas
referncias em ncoras para as respectivas sees no HTML.

Para isso, adicione um id em cada um dos subttulos para identific-los:

<h2id="historia">Histria</h2>

...

<h2id="diferenciais">Diferenciais</h2>

Agora que temos os ids dos subttulos preenchidos, podemos criar uma ncora
para eles:

...Conheatambmnossa<ahref="#historia">histria</a>e
nossos<ahref="#diferenciais">diferenciais</a>....

Veja o resultado em seu navegador.

2.23 - ELEMENTOS ESTRUTURAIS

J vimos muitas tags para casos especficos: ttulos com h1, pargrafos com p,
imagens com img, listas com ul etc. E ainda vamos ver vrias outras.

Mas claro que no existe uma tag diferente para cada coisa do universo. O
conjunto de tags do HTML bem vasto mas tambm limitado.

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 30/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

Invariavelmente voc vai cair algum dia num cenrio onde no consegue achar
a tag certa para aquele contedo. Nesse caso, pode usar as tags <div> e <span> que
funcionam como coringas. So tags sem nenhum significado especial mas que
podem servir para agrupar um certo contedo, tanto um bloco da pgina quanto
um pedao de texto.

E, como vamos ver a seguir, vamos poder estilizar esses divs e spans com CSS
customizado. Por padro, eles no tm estilo algum.

Voc pode tambm fazer o curso WD-43 dessa apostila na Caelum

Querendo aprender ainda mais sobre HTML, CSS e


JavaScript? Esclarecer dvidas dos exerccios? Ouvir
explicaes detalhadas com um instrutor?

A Caelum oferece o curso WD-43 presencial nas cidades de


So Paulo, Rio de Janeiro e Braslia, alm de turmas
incompany.

Consulte as vantagens do curso Desenvolvimento Web com HTML, CSS e


JavaScript.

2.24 - CSS: SELETORES DE ID E FILHO

J vimos como selecionar elementos no CSS usando simplesmente o nome da


tag:

p{
color:red;
}

Apesar de simples, uma maneira muito limitada de selecionar. s vezes no


queremos pegar todos os pargrafos da pgina, mas apenas algum determinado.

Existem, portanto, maneiras mais avanadas de selecionarmos um ou mais


elementos do HTML usando os seletores CSS. Vamos ver seletores CSS quase que
ao longo do curso todo, inclusive alguns bem avanados e modernos do CSS3. Por
enquanto, vamos ver mais 2 bsicos alm do seletor por nome de tag.

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

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 31/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

valor correspondente.

#cabecalho{
color:white;
textalign:center;
}

O seletor acima far com que o elemento do nosso HTML que tem o atributo id
com valor "cabecalho"
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".
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:

#rodapeimg{
marginright:35px;
verticalalign: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.

2.25 - FLUXO DO DOCUMENTO E FLOAT

Suponhamos que, por uma questo de design, a imagem da famlia Pelho deva
vir ao lado do pargrafo e conforme a imagem abaixo:

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 32/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

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 com float. 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 (marginauto) 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:

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 33/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

<figureid="centrodistribuicao">
....

Adicionando o CSS:

#centrodistribuicao{
marginleft:auto;
marginright: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>:

<divid="rodape">
<imgsrc="img/logo.png">

&copy;CopyrightMirrorFashion
</div>

Teste o resultado.

3. Assim como fizemos para os ttulos e subttulos, estilize o nosso rodap. Repare
no uso do id 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.

#rodape{
color:#777;
margin:30px0;
padding:30px0;
}

#rodapeimg{
marginright:30px;
verticalalign:middle;
width:94px;
}

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 34/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

Teste o resultado final no navegador.

4. 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:

<figureid="familiapelho">
....

Agora podemos referenciar o elemento atravs de seu id em nosso CSS, indicando


a flutuao e uma margem para espaamento:

#familiapelho{
float:right;
margin:0010px10px;
}

Teste o resultado. Repare como o texto renderizado ao redor da imagem, bem


diferente de antes.

5. (opcional) Faa testes com o float:left tambm.

6. (opcional) Teste flutuar a imagem do centro de distribuio. Como o contedo


fluir ao seu redor agora? o que queramos? Como melhorar?

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 35/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

Tire suas dvidas no GUJ Respostas

O GUJ um dos principais fruns brasileiros de computao


e o maior em portugus sobre Java. A nova verso do GUJ
baseada em uma ferramenta de perguntas e respostas (QA) e
tem uma comunidade muito forte. So mais de 150 mil
usurios pra ajudar voc a esclarecer suas dvidas.

Faa sua pergunta.

2.27 - O FUTURO E PRESENTE DA WEB COM O HTML5

Nos ltimos anos, muito tem se falado sobre a verso mais recente do HTML, o
HTML5. Esse projeto um grande esforo do W3C e dos principais browsers para
atender a uma srie de necessidades do desenvolvimento da Web como
plataforma de sistemas distribudos e informao descentralizada. Algumas
novidades so importantes para a marcao de contedo, outras para a estilizao
com o CSS nvel 3 (CSS3) e outras novidades so importantes para interao
avanada com o usurio com novas funcionalidades do navegador com JavaScript.

Apesar da especificao j estar completa, existem diferenas entre as


implementaes adotadas pelos diferentes navegadores ainda hoje. Mesmo assim,
o mercado est tomando uma posio bem agressiva quanto adoo dos novos
padres e hoje muitos projetos j so iniciados com eles.

Em alguns casos, os esforos de manuteno de um projeto que adota os novos


padres similar ou comparvel com a manuteno de um projeto que prev
compatibilidade total com navegadores j obsoletos como o Internet Explorer 7 e o
Firefox 3.

Em nosso projeto, vamos adotar os padres do HTML5 e vamos conhecer e


utilizar algumas de suas novidades quanto melhoria da semntica de contedo e
novas propriedades de CSS que nos permite adicionar efeitos visuais antes
impossveis. Ainda assim, nosso projeto ser parcialmente compatvel com
navegadores obsoletos por conta da tcnica Progressive Enhancement.

CAPTULO ANTERIOR:

Sobre o curso - o complexo mundo do front-end

PRXIMO CAPTULO:

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 36/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

HTML semntico e posicionamento no CSS

VocencontraaCaelumtambmem:

BlogCaelum

CursosOnline

Facebook

Newsletter

CasadoCdigo

Twitter

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 37/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 38/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 39/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 40/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 41/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 42/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 43/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 44/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 45/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 46/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 47/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 48/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 49/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 50/51
31/03/2017 IntroduoaHTMLeCSSDesenvolvimentoWebcomHTML,CSSeJavaScript

https://www.caelum.com.br/apostilahtmlcssjavascript/introducaoahtmlecss/#225fluxododocumentoefloat 51/51