Ebook Guia HTML e CSS Becode e TargetTrust

1
Objetivo
Dica de leitura
O que voc ir construir
Arquitetura Bsica da Web Cliente/servidor
Sua primeira pgina Web
O que HTML, CSS e JavaScript?
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
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
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.
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).
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.
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.
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!
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.
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!
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.
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).
13
A construo de uma pgina HTML segue uma estrutura

bsica, conforme ilustrado no cdigo ao lado.
<!DOCTYPE HTML>
<html>
<head>
.....
</head>
<body>
.....
</body>
</html>
Informaes do
documento, ttulo da
pgina; meta tags; links
para documentos .css e
.js e entre outros...
Contedo da pgina
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 respeito de nosso documento html. Aqui no exibimos
contedo para o usurio final, mas temos informaes que
sero utilizadas pelo nosso documento. Repare que a tag
<title> no exibe nenhum contedo no corpo da sua pgina,
mas sim o ttulo que mostrado na aba de seu navegador,
ou seja, uma informao sobre o seu documento html.
<a href=> </a>: utilizada para criao de hyperlinks em

pginas web. Note que temos um parmetro nesta tag
chamado de href. atravs dele que informamos o endereo
da url de destino a que se refere a tag <a>. Entre a abertura da
tag e o seu fechamento, colocamos o texto ou o elemento que
queremos que receba o hyperlink. Este elemento tambm pode
ser uma imagem ou outros elementos html.
<body> </body>: a partir dessa tag que de fato iremos exibir

contedo aos visitantes de nosso site, ela utilizada para
indicar o corpo do seu documento, ou seja, o seu contedo.
<section> </section>: define sees em seu documento, estas

sees podem ser consideradas sees ou campos
independentes.
<header> </header>: cuidado para no confundir com a tag

<head>, o header tem a funo de indicar que determinado
contedo um cabealho. Isso facilita o trabalho dos
buscadores.
<article> </article>: utilizada para indicar que temos um bloco

de contedo que trata-se de um post, comentrio ou artigo.
Essa tag tambm ajuda buscadores a identificar qual o tipo de
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
links para as principais pginas do seu site.
<footer> </footer>: assim como a tag <header> que indica

cabealho, existe a tag <footer> que indica a existncia de um
rodap.
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:
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.
A diferena entre eles que IDs so nicos
em um documento HTML, ou seja, no
teremos duas tags distintas com o mesmo
ID, j as classes no so nicas, podendo
haver mais de uma tag com a mesma class
atribuda no documento HTML.
Definido o header de nosso documento,
precisamos pensar em como ser o
contedo abaixo desse cabealho. Desta
forma, iremos estruturar a prxima seo da
seguinte forma:
<header>
<nav>
</nav>
<div class=inner
GUIA HTML e CSS

</div>
</header>
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
(id wrapper), utilizaremos essa seo para
controlar melhor os espaamentos em nossa
pgina. Dentro dessa seo, h uma seo
com uma breve introduo e mensagem de
boas-vindas, que definimos com o id intro. E,
por fim, uma seo com os itens de nosso
contedo, utilizando a tag <article>.
De preferncia, opte por termos em ingls
para dar nome a classes e ids. Isto
considerado uma boa prtica, pois assim,
pessoas de diferentes nacionalidades
conseguem compreender o seu cdigo. Se
voc no domina o ingls, procure memorizar
os termos mais populares, mas para futuro,
procure um treinamento na lngua inglesa,
pois isso ser fundamental para sua carreira.
<section id=wrapper>
<section id=intro>
Ol Mundo!
<a>Download</a>
</section>
<section class=items>
<article>
<article>
<header>
</header>
<header>
</header>
Contedo 2
</article>
Contedo 2
</article>
</section>
</section>
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.
21
Em nosso exemplo, trata-se de uma seo bem simples, veja abaixo:
<footer id=footer>
</footer>
Em termos de cdigo:
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.
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!
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>:
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.

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.
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>.
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.
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.
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.
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:
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.
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:
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:
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>.
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.
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.
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.
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:
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.
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!
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:
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.
46
47

Ebook Guia HTML e CSS Becode e TargetTrust

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Ebook Guia HTML e CSS Becode e TargetTrust

Încărcat de

Drepturi de autor:

Formate disponibile

1

O que voc ir construir

Arquitetura Bsica da Web Cliente/servidor

Sua primeira pgina Web

O que HTML, CSS e JavaScript?

Primeiros Passos com HTML

Estrutura bsica do HTML

Guia do HTML e CSS da Becode Cursos Online

Primeiros passos com o CSS

Como aplicar o CSS no HTML

Insero do CSS em nosso projeto

Pausa para falar de cores

Guia do HTML e CSS da Becode Cursos Online

A proposta deste ebook clara, fazer voc dar os seus

Guia do HTML e CSS da Becode Cursos Online

Este ebook pode ser acessado de qualquer dispositivo.

Guia do HTML e CSS da Becode Cursos Online

Ao final desse ebook, voc ter construdo uma

Pgina Demo Guia HTML e CSS

IMPORTANTE: nessa pgina voc encontrar um

Guia do HTML e CSS da Becode Cursos Online

Antes de comearmos a criar a nossa pgina, importante

Guia do HTML e CSS da Becode Cursos Online

De uma forma breve e resumida:

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

Guia do HTML e CSS da Becode Cursos Online

Guia do HTML e CSS da Becode Cursos Online

Guia do HTML e CSS da Becode Cursos Online

Dito isso, bvio que queremos ter pginas bem

IMPORTANTE: antes de copiar os cdigos, saiba que

Guia do HTML e CSS da Becode Cursos Online

A construo de uma pgina HTML segue uma estrutura

IMPORTANTE: lembre-se de utilizar o

Primeiramente, temos o comando DOCTYPE, ele no

<head> </head>: essa tag utilizada para colocar informaes

<a href=> </a>: utilizada para criao de hyperlinks em

<body> </body>: a partir dessa tag que de fato iremos exibir

<section> </section>: define sees em seu documento, estas

<header> </header>: cuidado para no confundir com a tag

<article> </article>: utilizada para indicar que temos um bloco

<nav> </nav>: essa tag indica que temos um bloco de

Guia do HTML e CSS da Becode Cursos Online

<footer> </footer>: assim como a tag <header> que indica

Guia do HTML e CSS da Becode Cursos Online

Repare que estruturamos o nosso cabealho

GUIA HTML e CSS

Perceba que nessa segunda seo,

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

Guia do HTML e CSS da Becode Cursos Online

Guia do HTML e CSS da Becode Cursos Online

Guia do HTML e CSS da Becode Cursos Online

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

Guia do HTML e CSS da Becode Cursos Online

2. Diretamente no documento .html, utilizando a tag <style></style>,

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

Neste e-book, iremos utilizar a 1 forma.

O CSS possui a seguinte sintaxe:

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

Guia do HTML e CSS da Becode Cursos Online

Selecionamos todas as tags <p> e

Nesse caso, aplicamos as mesmas

Guia do HTML e CSS da Becode Cursos Online

De novo, as mesmas regras dos