1

Objetivo 4

Dica de leitura 5

O que voc ir construir 6

Arquitetura Bsica da Web Cliente/servidor 7

Sua primeira pgina Web 8

O que HTML, CSS e JavaScript? 9

Primeiros Passos com HTML 11

Estrutura bsica do HTML 14

Elementos HTML 15
Desenvolvimento HTML 17

Guia do HTML e CSS da Becode Cursos Online 2

Primeiros passos com o CSS 24
Como aplicar o CSS no HTML 26
Sintaxe do CSS 28
Insero do CSS em nosso projeto 30
Desenvolvendo o CSS 33
Pausa para falar de cores 39
Finalizando o CSS 44
E o JavaScript? 46
Autores 47
Sobre a TargetTrust 48
Sobre a Becode 49

Guia do HTML e CSS da Becode Cursos Online 3

A proposta deste ebook clara, fazer voc dar os seus
primeiros passos com HTML e CSS. Duas tecnologias que
so essenciais no mercado de TI e que formam aquele
pacote de conhecimentos que voc precisa ter,
independente do rumo que sua carreira ir tomar dentro
do mercado de trabalho.

Em outras palavras, saber o mnimo de HTML e CSS no

faz mal a ningum e, para muitos profissionais, so
habilidades imprescindveis para uma carreira de sucesso.

Guia do HTML e CSS da Becode Cursos Online 4

Este ebook pode ser acessado de qualquer dispositivo.
Contudo, o seu aprendizado ser muito mais completo se
voc seguir os passos desse tutorial em um desktop ou
notebook, pois voc precisar interagir com os cdigos
HTML e CSS. Sim, para aprender, voc ir precisar praticar!

Sempre que voc realizar uma alterao no cdigo, salve o

documento .html ou .css e atualize o seu navegador. Assim,
voc conseguir identificar em tempo real, todas as
modificaes que voc estar fazendo em sua pgina.

Para lembr-lo, sempre que o cone ao lado aparecer nesse

Ebook, repita esse processo (salvar doc + atualizar browser).

Guia do HTML e CSS da Becode Cursos Online 5

 Ao final desse ebook, voc ter construdo uma
pgina web do zero, idntica a essa aqui:

Pgina Demo Guia HTML e CSS

Sem utilizar templates ou qualquer outro

conhecimento que no esteja presente nesse
ebook. Resumindo, voc ir aprender a teoria e
aplicar na prtica!

IMPORTANTE: nessa pgina voc encontrar um

boto para download. Faa-o para ter acesso aos
cdigos que utilizaremos ao longo desse ebook.

Guia do HTML e CSS da Becode Cursos Online 6

Antes de comearmos a criar a nossa pgina, importante
que voc entenda um pouco sobre a arquitetura bsica da
Web. Ento, vamos l.

Quando voc digita https://becode.com.br em seu

navegador web (Chrome, Firefox, Safari, etc), voc est
solicitando ao servidor da becode, a pgina inicial, tambm
conhecida como a pgina index de um website. O servidor ir
processar a sua requisio e disponibilizar uma espcie de
pacote de arquivos para o seu navegador processar e exibir
o contedo. Os arquivos neste pacote so, grosseiramente
falando, os arquivos HTML, CSS e JavaScript da pgina em
questo.

Guia do HTML e CSS da Becode Cursos Online 7

Agora, imagine que voc foi contratado para desenvolver o HTML e o CSS de uma pgina web.
Suponha que j levantamos todos os requisitos e, portanto, definimos o layout desta pgina e o
resultado final desta pgina ser exatamente como esse:

Obs: caso esse fosse um projeto real, provavelmente, voc

receberia um wireframe profissional, criado por um web
designer, contendo todo a representao visual do website,
layout de pginas e interaes entre elas. Contudo, para o
nosso propsito didtico, isso no ser necessrio.

Esta pgina contm muitos elementos que, de certa forma,

no so triviais quando se est aprendendo sobre HTML e
CSS. Ento, caso voc esteja com a sensao de que no
sabe por onde comear, no desanime, vamos por partes!

Guia do HTML e CSS da Becode Cursos Online 8

De uma forma breve e resumida:

HTML: linguagem de marcao que define a estrutura de sua pgina, atravs dele que voc
definir os elementos que estaro presentes em sua pgina, utilizando tags html;
CSS: tecnologia responsvel por estilizar uma pgina, ou seja, define cores, tamanho de
elementos, alinhamento, espaamentos, margens, efeitos e tudo aquilo que ir proporcionar
uma identidade visual para a sua pgina;
JavaScript: Por fim, o JavaScript (JS), linguagem de programao que define o comportamento de
sua pgina, ou seja, uma tecnologia interpretada que pode controlar o seu navegador e os
elementos HTML de sua pgina. Elementos que se movem, alertas e outros tipos de
comportamento existentes em pginas web.

Entendido a diferena entre essas tecnologias, podemos comear o desenvolvimento do nosso

pequeno projeto. Lembrando, nesse ebook, iremos dar os primeiros passos com HTML e CSS. O
JavaScript, por ser uma linguagem de programao, exige a compreenso de padres lgicos de
programao. Em outras palavras, para aprender JavaScript, fundamental que o indivduo j
domine alguns conceitos de Lgica de Programao.

Guia do HTML e CSS da Becode Cursos Online 9

Caso voc nunca tenha tido contato com o HTML, saiba que ele um arquivo como qualquer outro.
Imagine um arquivo .pdf que exibido pelo adobe reader, analogamente, o documento html um
arquivo .html com a diferena de que, ao invs de exibirmos o seu contedo com o adobe reader,
teremos que utilizar um navegador, seja ele o Chrome, Firefox, IE, Safari ou qualquer outro.

Vamos comear pelo bsico! Para voc criar ou editar um documento html, voc precisa de um
editor de texto que interprete seu cdigo HTML. Recomendamos a utilizao do sublime text, mas
voc pode escolher outros. At o bloco de notas padro do Windows ir servir, voc quem decide!

Guia do HTML e CSS da Becode Cursos Online 10

11
Realizado o download e instalado o seu editor de texto de sua preferncia. Crie um novo
documento e salve-o com o nome index.html, coloque este arquivo dentro de uma pasta chamada
Projeto HTML e CSS, aproveite tambm para j criar uma pasta chamada images, para colocarmos
as futuras imagens desta pgina.

A sua organizao deve ser similar a isso:

O HTML5 adicionou novas tags para a criao de pginas web. Essas tags auxiliam principalmente os
servidores de busca a encontrar contedos com maior preciso, dentro dos diversos sites na web.
Alm, claro, de deixar o seu cdigo HTML mais organizado e compreensvel para outros
programadores que possivelmente podero dar manuteno ao seu cdigo em algum momento
futuro.

Guia do HTML e CSS da Becode Cursos Online 12

Dito isso, bvio que queremos ter pginas bem
estruturadas para que google, bing ou yahoo
encontrem nosso site quando um usurio estiver
buscando por algum assunto relacionado, bem como,
ter um site organizado facilitando a manuteno
realizada por outros profissionais, que no somente
voc.

Vamos aos nossos primeiros exemplos. Na prxima

pgina, temos a estrutura bsica de um documento
HTML:

IMPORTANTE: antes de copiar os cdigos, saiba que

voc tem acesso ao HTML, CSS e Imagens da pgina
atravs deste link (download).

Guia do HTML e CSS da Becode Cursos Online 13

A construo de uma pgina HTML segue uma estrutura
bsica, conforme ilustrado no cdigo ao lado.

<!DOCTYPE HTML>
Informaes do
<html> documento, ttulo da
<head> pgina; meta tags; links
..... para documentos .css e
</head> .js e entre outros...
<body>
.....
</body>
Contedo da pgina
</html>

IMPORTANTE: lembre-se de utilizar o

<meta charset=utf=8/>, pois assim o seu documento
poder receber acentuao, entre outros caracteres
especiais da regio. No nosso caso, Brasil.

14
Primeiramente, temos o comando DOCTYPE, ele no
uma tag html e utilizado para o seu navegador
identificar a verso do seu documento html. Em nosso
caso, estamos utilizando a verso 5. Caso voc deseje
pesquisar mais sobre o doctype, vers que, para outras
verses, a forma como este comando deve ser escrito
muda um pouco.

Logo aps, temos as tags de nosso documento,

atravs delas que estruturamos um arquivo html. Note
que para cada tag, temos sua abertura <> e seu
fechamento </>:

<html> </html>: tag que engloba todo o

documento html, repare que ela comea bem no
incio e a ltima tag a ser fechada.

15
 <head> </head>: essa tag utilizada para colocar informaes <a href=> </a>: utilizada para criao de hyperlinks em
a respeito de nosso documento html. Aqui no exibimos pginas web. Note que temos um parmetro nesta tag
contedo para o usurio final, mas temos informaes que chamado de href. atravs dele que informamos o endereo
sero utilizadas pelo nosso documento. Repare que a tag da url de destino a que se refere a tag <a>. Entre a abertura da
<title> no exibe nenhum contedo no corpo da sua pgina, tag e o seu fechamento, colocamos o texto ou o elemento que
mas sim o ttulo que mostrado na aba de seu navegador, queremos que receba o hyperlink. Este elemento tambm pode
ou seja, uma informao sobre o seu documento html. ser uma imagem ou outros elementos html.

<body> </body>: a partir dessa tag que de fato iremos exibir <section> </section>: define sees em seu documento, estas
contedo aos visitantes de nosso site, ela utilizada para sees podem ser consideradas sees ou campos
indicar o corpo do seu documento, ou seja, o seu contedo. independentes.

<header> </header>: cuidado para no confundir com a tag <article> </article>: utilizada para indicar que temos um bloco
<head>, o header tem a funo de indicar que determinado de contedo que trata-se de um post, comentrio ou artigo.
contedo um cabealho. Isso facilita o trabalho dos Essa tag tambm ajuda buscadores a identificar qual o tipo de
buscadores. contedo daquele elemento. uma tag muito comum em
blogs, por exemplo.
<nav> </nav>: essa tag indica que temos um bloco de
navegao. Como por exemplo, um menu que contm os <footer> </footer>: assim como a tag <header> que indica
links para as principais pginas do seu site. cabealho, existe a tag <footer> que indica a existncia de um
rodap.

Guia do HTML e CSS da Becode Cursos Online 16

Agora que voc j conhece sobre cada uma das principais tags html e a estrutura bsica do HTML,
podemos seguir estruturando o nosso documento. Comeamos pelo cabealho de nossa pgina, de
acordo com o que queremos desenvolver, teremos algo similar a isso:

Guia do HTML e CSS da Becode Cursos Online 17

Repare que estruturamos o nosso cabealho
de acordo com o modelo que vimos no
comeo deste ebook, onde tnhamos uma
navegao dentro do cabealho e seu
respectivo contedo. Aqui adicionamos os
parmetros id e class em nossas tags, eles
so utilizados para selecionarmos elementos
posteriormente com o CSS ou JavaScript.
<header>
A diferena entre eles que IDs so nicos
em um documento HTML, ou seja, no <nav>
teremos duas tags distintas com o mesmo
</nav>
ID, j as classes no so nicas, podendo
haver mais de uma tag com a mesma class
atribuda no documento HTML. <div class=inner

GUIA HTML e CSS

Definido o header de nosso documento,
precisamos pensar em como ser o </div>

contedo abaixo desse cabealho. Desta

forma, iremos estruturar a prxima seo da </header>
seguinte forma:

Guia do HTML e CSS da Becode Cursos Online 18

19
Perceba que nessa segunda seo,
adicionamos mais elementos e, portanto,
temos uma estrutura mais robusta, com uma
seo que empacotar todo o nosso contedo
<section id=wrapper>
(id wrapper), utilizaremos essa seo para
controlar melhor os espaamentos em nossa
<section id=intro>
pgina. Dentro dessa seo, h uma seo
com uma breve introduo e mensagem de Ol Mundo!
boas-vindas, que definimos com o id intro. E, <a>Download</a>
por fim, uma seo com os itens de nosso </section>
contedo, utilizando a tag <article>.
<section class=items>
De preferncia, opte por termos em ingls
para dar nome a classes e ids. Isto <article> <article>
considerado uma boa prtica, pois assim,
<header> <header>
pessoas de diferentes nacionalidades </header> </header>
conseguem compreender o seu cdigo. Se
Contedo 2 Contedo 2
voc no domina o ingls, procure memorizar </article>
</article>
os termos mais populares, mas para futuro,
procure um treinamento na lngua inglesa, </section>
pois isso ser fundamental para sua carreira. </section>

Guia do HTML e CSS da Becode Cursos Online 20

Antes de encerrarmos essa seo, note que algumas tags novas foram apresentadas, entre elas:

<ul></ul>: utilizado para quando queremos dar incio a uma lista, neste caso, uma lista no
ordenada. Caso desejssemos que fosse ordenada (1. 2. 3. ... N.), precisaramos utilizar a tag
<ol> </ol>. Dentro das tags <ul> ou <ol>, utilizamos a tags <li></li> para cada novo elemento de
nossas listas.

<h1></h1>: o h1 uma tag de heading (cabealho), assim como o h2, h3, h4, h5 e h6. As tags
possuem tamanhos diferentes e relevncias diferentes. Em outras palavras, o h1 maior e mais
importante que o h6. Organizar a sua pgina de acordo com estas regras de importncia
fundamental para otimizar a sua pgina para mecanismos de buscas (SEO), como o Google.

<p></p>: a tag <p> uma das tags mais utilizadas, pois significa pargrafo, ou seja, a cada novo
pargrafo voc precisar utilizar a tag <p>.

<img src=>: tag utilizada para quando voc precisa inserir uma imagem em sua pgina. Repare
que esta tag acompanhada do parmetro src que ir indicar o caminho dessa imagem no
seu servidor web ou local.

Bom, finalizando a seo wrapper que agrupa a maior parte de nosso contedo, vamos enfim,
definir o nosso rodap, em que atribumos um id com o nome de footer.

Guia do HTML e CSS da Becode Cursos Online 21

Em nosso exemplo, trata-se de uma seo bem simples, veja abaixo:

<footer id=footer>
</footer>

Em termos de cdigo:

Guia do HTML e CSS da Becode Cursos Online 22

Concluindo este ltimo pedao de cdigo, finalizamos a estrutura de nossa pgina web, salve este
documento e abra-o com o seu navegador.

Voc ver que o resultado no ficou muito bonito, mas no se desespere! Pois ainda no
estilizamos a nossa pgina! Ou seja, est faltando o CSS, o qual veremos em seguida.

IMPORTANTE: finalizando o HTML, sem a presena de regras CSS, voc consegue visualizar com
exatido o papel do HTML para aplicaes web. Aps finalizarmos a etapa de CSS, voc tambm
ser capaz de ver o mesmo para o CSS. Resumindo, ters total compreenso das diferenas
existentes entre o HTML e CSS.

Guia do HTML e CSS da Becode Cursos Online 23

24
O CSS o que d vida e beleza a pginas e aplicaes web, ou seja, uma identidade a nossa
aplicao (cores, tamanhos, estilos, efeitos e muito mais). Alm disso, ele responsvel por
organizar a forma como elementos HTML so ilustrados em nossos monitores, celulares, tablets,
TVs, projetores, enfim... at ao imprimirmos uma pgina HTML, h CSS envolvido. Chamamos isso
de responsividade de uma pgina, ou seja, a capacidade de esta pgina se adaptar a diferentes
dispositivos, com diferentes resolues e formatos. Tudo isso feito com o CSS! Sendo assim,
devido a crescente importncia do mundo mobile nos dias de hoje, voc pode imaginar o peso que
saber CSS adquiriu, nos ltimos anos, na hora de agarrar aquela oportunidade de trabalho.

IMPORTANTE: nesse ebook, no iremos aplicar regras de CSS que iro tratar da responsividade da
pgina, ou seja, a capacidade de adaptao de uma pgina a diferentes dispositivos, como tablets,
celulares, etc. Isto porque no o foco dessa aula introdutria, sendo um contedo mais avanado,
com suas particularidades que devem ser tratadas em outro momento, assim que voc j possuir
uma certa vivncia com estilizao de pginas HTML.

Bom, hora de comearmos a construir o CSS de nossa pgina. Entretanto, antes disso necessrio
entender como aplicamos o CSS em pginas HTML e a sua sintaxe!

Guia do HTML e CSS da Becode Cursos Online 25

O CSS pode ser conectado a pginas HTML de 3 formas:

1. Em um arquivo .css separado do arquivo .html. Nesta forma, inserimos o caminho do arquivo
CSS no documento HTML, atravs de uma tag <link>, normalmente localizada entre a tag
<head>:

Guia do HTML e CSS da Becode Cursos Online 26

2. Diretamente no documento .html, utilizando a tag <style></style>,
entre a tag <head></head>. Ex:

3. Em uma tag especfica, utilizando o parmetro style. Ex:

Neste e-book, iremos utilizar a 1 forma.

Guia do HTML e CSS da Becode Cursos Online 27

O CSS possui a seguinte sintaxe:

SELETOR {PROPRIEDADE1:valor; PROPRIEDADE2:valor;...;}

SELETOR {
PROPRIEDADE1:valor;
PROPRIEDADE2:valor;
....
}

Obs: ambas as formas apresentam o mesmo resultado, o que muda

a apenas uma questo de boas prticas de identao presentes no 2 cdigo.

Guia do HTML e CSS da Becode Cursos Online 28

Onde o SELETOR, pode ser uma tag, um ID precedido de um sustenido ou uma classe precedida de
um ponto. A PROPRIEDADE o que queremos modificar naquele elemento (margem, cor,
espaamento e entre muitas outras possibilidades). Veja dois exemplos abaixo:

Selecionamos todas as tags <p> e

adicionamos uma cor preta ao
texto e uma margem de 30%.

Nesse caso, aplicamos as mesmas

regras do exemplo acima, mas
selecionamentos o ID=footer e
no a tag <p>.

Guia do HTML e CSS da Becode Cursos Online 29

 De novo, as mesmas regras dos
exemplos anteriores, mas agora
aplicado a classe .item

Para comear a desenvolver o CSS de nossa pgina, voc tambm poder utilizar o Sublime text,
editor de texto recomendado antes. Pensando em organizar o nosso projeto, crie uma pasta com o
nome de css, no mesmo lugar onde voc criou o arquivo index.html.

Guia do HTML e CSS da Becode Cursos Online 30

Nesta pasta, crie um arquivo com um nome de sua escolha, mas com com a extenso .css. Por
ltimo, adicione a tag <link> no arquivo HTML que estvamos trabalhando anteriormente
(index.html). Esta tag <link> deve ser inserida entre a tag <head>, como vimos anteriormente, no
tpico de aplicao do CSS no HTML.

Voc deve ter algo similar a isso em sua tela:

Feito isso, abra o arquivo .css que voc acabou de criar e vamos comear a estilizar nossa pgina!

IMPORTANTE: sempre que voc quiser ver o resultado de uma estilizao ou insero de um novo
elemento HTML em sua pgina. Apenas salve o documento que voc est trabalhando e atualize a
pgina do seu navegador.

Guia do HTML e CSS da Becode Cursos Online 31

Neste ebook, no teremos espao para explicar TODAS as propriedades CSS profundamente, mas
conforme iremos construindo o nosso cdigo, sero deixados comentrios prximos s
propriedades, com uma breve explicao de cada propriedade apresentada. Para melhorar a sua
compreenso, abuse do F5 e atualize a sua pgina a cada nova insero de elemento ou regra CSS.

IMPORTANTE: tudo que estiver entre os dgitos /* */ um comentrio no cdigo. Ou seja, no

apresentado para o usurio final daquele website. Serve apenas para explicar para outras pessoas
de sua equipe, ou at mesmo voc que pode um dia esquecer qual era o seu objetivo ao escrever
aquele cdigo: sobre o que se trata aquele trecho, script, elemento, tag, propriedade, enfim.
Comentrios so mais comuns ainda quando trabalhamos com linguagens de programao, onde
possumos scripts complexos que necessitam de uma explicao mais humana para que as pessoas
de uma mesma equipe possam trabalhar em conjunto.

Guia do HTML e CSS da Becode Cursos Online 32

Vamos comear com a tag <body>, pois aqui onde devemos ter uma viso geral de nossa pgina.
Cor de fundo, margens, espaamento, fonte do texto, tamanho e padres da pgina. Visando
aquele layout inicial. Nosso CSS deve ficar da seguinte forma:

Guia do HTML e CSS da Becode Cursos Online 33

Perceba que nossa pgina mudou. A cor de fundo diferente e j no temos a margem que
tnhamos no canto esquerdo da tela. A fonte do texto j no mais a mesma e o seu tamanho e
espessura mudaram.

Note que utilizamos duas unidades de medidas, o % para alterarmos o tamanho da fonte e o em
para alterarmos o espaamento entre texto. Neste e-book no entraremos em detalhes sobre
unidades de medidas, para saber mais sobre isso, sugiro uma rpida visita a esse link Unidades de
medida do CSS,

Aps definir um estilo geral para a nossa pgina, estilizando a tag body, podemos partir para a
estilizao do cabealho de nossa pgina, o header. Lembre-se que no incio, quando estvamos
falando de HTML, definimos o id header para essa estrutura. Sendo assim, agora iremos selecion-lo
e estiliz-lo com as propriedades do CSS.

Perceba que conforme o projeto definido no incio deste e-book, desejamos que o cabealho da
pgina cubra a tela inteira e possua uma navegao no topo, com um contedo centralizado
horizontalmente e verticalmente e, ainda, contendo uma imagem de fundo.

Guia do HTML e CSS da Becode Cursos Online 34

Para isso, o seu cdigo deve ficar similar ao seguinte cdigo:

Continuando a estilizao do nosso header. Abaixo, voc encontra uma sintaxe um pouco diferente do que
voc viu at agora. Isso porque queremos modificar apenas os elementos que esto contidos no #header e na
classe .inner ou tag h1. Para que isso ocorra, precisamos escrever os seletores na seguinte ordem:

Guia do HTML e CSS da Becode Cursos Online 35

Enfim, #header (o elemento que est agrupando os outros elementos, seguido do elemento que
est contido dentro do elemento agrupador, neste caso, .inner, h1 e h3).

Veja abaixo como ficar o seu cdigo:

Guia do HTML e CSS da Becode Cursos Online 36

IMPORTANTE: foi selecionado o elemento header atravs de seu id porque a tag <header> est declarada em
mais campos alm do cabealho principal. Sendo assim, caso optssemos pela tag <header>, iriamos alterar todas
as tags e no apenas o cabealho principal do topo. Por isso, utilizamos o id #header e no a tag <header>.

Guia do HTML e CSS da Becode Cursos Online 37



Se voc salvar o seu documento .css e atualizar o seu navegador, voc ir notar que agora
temos nosso cabealho completo, conforme vimos no comeo deste ebook.

Guia do HTML e CSS da Becode Cursos Online 38

Provavelmente voc tenha reparado que, no lugar do nome de cores (blue, black, red, etc),
utilizamos cdigos como #000000, #ffffff, #ffc711, etc. Basicamente, estes cdigos do mais
flexibilidade ao desenvolvedor na hora de escolher determinado tom de uma cor. Estes cdigos so
chamados de cdigos hexadecimal. Existem outros tipos de cdigos que tambm substituem cores.
Outro tipo muito conhecido o RGB que tambm muito popular, exemplo: rgb(255, 255, 255) =
branco.

No se preocupe! Voc no precisa decorar todos os cdigos, basta pesquisar no google, termos
como tabela hexadecimal, tabela RGB, tabela pantone ou ainda, se voc preferir uma
ferramenta mais completa, acesse o Adobe Color CC. Com estes recursos, voc tem acesso a todos
os tipos de cdigos de cores.

Guia do HTML e CSS da Becode Cursos Online 39

J definidos o CSS de nosso header e do body de nossa pgina, atualize a pgina e aprecie o
resultado at agora.

Entretanto, ainda no trabalhamos com o contedo de nossa pgina, isto , o que vir aps o nosso
header. Para isso, vamos comear aplicando regras ao nosso empacotador, ou seja, nosso elemento
com o id=wrapper. Como ele apenas um empacotador, iremos definir a sua largura, sua
margem e o espaamento de seu contedo.

Guia do HTML e CSS da Becode Cursos Online 40

Interno a este empacotador, temos uma seo para a introduo que deve situar-se no topo de
nosso empacotador, estilizada da seguinte maneira:

Alm do campo de introduo, temos uma seo que contm os itens de nosso contedo, onde
declaramos uma classe chamada items.

Interno a esta seo, temos cada item especfico declarado com uma tag <article class=item>,
estilizada da seguinte forma:

Guia do HTML e CSS da Becode Cursos Online 41

42
Aps o contedo de nosso site estar estilizado, temos enfim o footer, que ir receber uma
estilizao bsica, pois, nesse caso no o foco de nosso trabalho, servindo apenas como campo
para atribuir os direitos autorais a TargetTrust e a Becode.

Tendo isso em mente, aplicamos as seguintes regras para atribuir uma estilizao bsica.

Guia do HTML e CSS da Becode Cursos Online 43

Ao abrirmos a pgina index no navegador veremos que a nossa pgina j est praticamente
concluda. Faltando apenas os botes de nosso contedo, remover a marcao padro das tags <li>
e remover a estilizao padro das tags <a>.

Repare que em nossa estrutura html, utilizamos uma classe chamada button e no uma tag
<button>. Atravs dessa classe (.button), iremos tratar as tags <a> para criar um estilo padro para
os nossos botes <a>. Poderamos ter utilizado a tag <button> tambm e tratar a tag da mesma
forma. O resultado seria muito similar. Voc pode fazer o teste por conta se quiser!

Guia do HTML e CSS da Becode Cursos Online 44

E, para finalizarmos, temos a remoo da marcao das tags <li> e a remoo da estilizao de texto
padro das tags <a>, utilizando os seguintes comandos:

Guia do HTML e CSS da Becode Cursos Online 45

Voc deve estar se perguntando onde est o JavaScript de nossa pgina. Conforme comentei no
incio deste e-book, o JavaScript muito importante para pginas web, ele o responsvel pelo
comportamento de nossa pgina e seus elementos.

Imagine que essa pgina possusse um slider no banner ou algum formulrio em que quisssemos
tratar os seus campos antes de submet-lo. Nesse caso, provavelmente seria o JavaScript que
estaria atuando em cima dessas funcionalidades, para assim, dar comportamento pgina.

Contudo, para fins didticos, iremos deixar a parte de JavaScript para um segundo momento em um
prximo contedo. Contudo, se voc est com pressa para aprender cada vez mais sobre o mundo
web, acesse o nosso curso completo de HTML, CSS e Javascript.

Guia do HTML e CSS da Becode Cursos Online 46

Guia do HTML e CSS da Becode Cursos Online 47