SUMRIO

Introduo ..................................................................................................................................... 3
Requisitos necessrios .................................................................................................................. 3
Conhecendo o HTML ..................................................................................................................... 8
Entendendo as Tags HTML ............................................................................................................ 9
Links ............................................................................................................................................. 24
Imagens ....................................................................................................................................... 29
Tabelas ........................................................................................................................................ 31
Dica para textos ........................................................................................................................... 33
O que CSS? ................................................................................................................................ 34
Entendendo a diferena entre HTML e CSS ................................................................................ 34
Como funciona o CSS? ................................................................................................................. 34
Cores e fundos ............................................................................................................................. 38
Fontes .......................................................................................................................................... 42
Textos .......................................................................................................................................... 43
Formatao de Links ................................................................................................................... 45
Class e ID ..................................................................................................................................... 49
Agrupando elementos com Span e Div ....................................................................................... 53
Largura e Altura ........................................................................................................................... 59
Margin e Padding ........................................................................................................................ 60
Borda ........................................................................................................................................... 64
Floats ........................................................................................................................................... 67
Posicionamento e Z-index ........................................................................................................... 69
A Criao de um Site ................................................................................................................... 72
Hospedando o Site................................................................................................................... 110
3

Introduo

Para muitas pessoas criar um site um grande mistrio, entender as linguagens de
programao, ter de comprar softwares caros, etc. A verdade que para criarmos um site
profissional no dependemos nem de softwares caros, podendo at mesmo utilizarmos o
Bloco de Notas (no caso do Windows), e as linguagens, que no so to complicadas quanto se
imagina.
O objetivo deste curso ensinar do zero a voc que no entende nada do assunto, ento no
se preocupe, pois mostrarei aqui em detalhes o passo-a-passo para criarmos um site
profissional.
Requisitos necessrios

No necessrio nenhum conhecimento tcnico de programao, apenas o conhecimento
bsico do sistema operacional Windows.
Como eu disse na Introduo, poderamos utilizar o Bloco de notas para comearmos a
programar, no entanto, existe um software gratuito que ajudar voc na digitao e
organizao do seu cdigo, que se chama Notepad++. Para baix-lo acesse o endereo
http://www.ninjastec.com.br/cursoweb/downloads/notepadplus.zip, ao terminar o download
abra a pasta e execute o arquivo npp.6.6.8.Installer.exe.
Em seguida selecione o idioma do programa e pressione OK.











4


Na tela de Boas Vindas pressione Prximo para dar continuidade.

Na janela que segue, verifique os termos e pressione Eu Concordo.

5

Mantenha a pasta padro de destino e continue.


Verifique se as opes esto marcadas como na imagem abaixo e continue.

6

Deixe marcado apenas a terceira opo (caso queira) para criar atalho na rea de trabalho e
continue.

Aguarde a instalao.

7

Pronto, a instalao foi concluda, este ser o nico programa que utilizaremos para digitar o
nosso cdigo. Pressione Terminar.

Ao abrir o seu Notepad++, crie um novo arquivo, selecione a aba Arquivo e clique em
Novo.

Feito isso, v na aba Linguagem, em seguida na letra H e ento HTML.
8


Conhecendo o HTML

O HTML (HyperText Mark-up Language) a linguagem base de todo site, ela utilizada para a
estruturao e insero de contedo na pgina, podendo ser textos, imagens, vdeos, arquivos
para download, etc.
Esta linguagem foi inventada em 1990 por um cientista chamado Tim Berners-Lee, a proposta
inicial era tornar possvel a troca de informaes e documentaes referente as pesquisas de
diferentes universidades.
Para visualizar o cdigo HTML de um site, abra o seu navegador, visite o site desejado e v na
opo Exibir e selecione Cdigo-Fonte.

9

Abrir uma janela com a codificao HTML da pgina.

No se assuste por no entender nada do que est escrito, em breve voc entender!
Entendendo as Tags HTML

As tags so formas para que o navegador interprete como cada elemento dever aparecer na
pgina. Todas as tags da linguagem HTML se iniciam com o sinal de menor < e se encerram
com o sinal de maior >.
Para entendermos melhor isso, segue um exemplo abaixo do funcionamento da tag <html>.

10

No exemplo que acabamos de ver, ns definimos o inicio da nossa pgina e o final da mesma.
Toda pgina de um site dever iniciar com a tag <html> e se encerrar com </html>.
Percebemos aqui que a tag de encerramento contm um caractere a mais, que seria a /
antes do comando.
Em seguida, ns utilizaremos a tag <head> para definirmos as informaes de cabealho.
Dentro dessa tag ns definiremos o ttulo da pgina utilizando a tag <title>, veja abaixo.

Veja que o contedo que ficar dentro de determinada tag, se encaixa entre a abertura e
fechamento da mesma. Como no exemplo da tag <title>.
<title>Aula de Webdesign</title>
A frase que definimos para ser o titulo da nossa pgina foi Aula de Webdesign, sendo assim,
ns colocamos essa frase dentro da tag <title>.
Voc pode estar se perguntando por que a tag <title> deve estar dentro da <head> , o fato
que existem duas tags principais que devem ficar dentro da <html>, que so a <head> e a
<body>. A <head> utilizada para configurao da pgina, que entenderemos melhor
futuramente. J a tag <body> o corpo da pgina, nela que ficar todo o contedo, como
imagens, textos, etc.
Vamos ver um exemplo de como utilizamos a tag <body> a seguir.


11


Na aplicao mostrada, ns adicionamos uma frase dentro do corpo da pgina, essa frase
aparecer para o usurio que estiver navegando no seu site.
Para vermos como est ficando nossa pgina, salvaremos este arquivo, ento v na opo
Arquivo, Salvar como....


12

Digite o nome do arquivo desejado e complemente com final .html, eu colocarei da seguinte
forma aula.html.

Aps salvar, abra o arquivo utilizando um navegador de sua preferncia.


13

O navegador se abrir e veremos o seguinte resultado.

Percebemos duas coisas nessa visualizao, a primeira que o ttulo que definimos entre a tag
<title> se encontra na aba do navegador, e o texto que digitamos no corpo da pgina. Porm
identificamos tambm um erro nos caracteres que contm acentuao, para resolvermos isso
devemos formatar o nosso arquivo para UTF-8.
V na opo Formatar e em seguida Codificao em UTF-8.

14

Aps efetuar essa alterao salve novamente o arquivo, bastando clicar no cone de disquete.

Sempre que houver sido feita uma alterao, temos que salvar o arquivo e atualizar a pgina
do navegador para conseguir visualiz-la.

E ento teremos nossa frase corrigida, com os caracteres acentuados.

Agora daremos continuidade no estudo, a seguir veremos tags que utilizamos para fazer
algumas mudanas simples no formato do texto.

15

Veja um exemplo abaixo:

Neste exemplo utilizamos a tag <b> que serve para colocar em negrito um determinado texto,
voc define o que ficar em negrito colocando entre a abertura e fechamento da tag como j
aprendeu.
Veja abaixo como ficou o resultado.

16

Da mesma forma que fizemos com a tag <b> podemos fazer para a tag <i> que seria para
colocar o texto em itlico, veja o exemplo.

E como ficou.


17

Adicionaremos agora uma nova frase no corpo da nossa pgina.

Quando visualizarmos o resultado desta alterao, teremos o seguinte problema.

Note que a frase no ficou onde queramos, que seria abaixo da primeira, por mais que
coloquemos o texto abaixo no cdigo, o navegador no interpretar que a queremos abaixo,
18

para definirmos isso precisaremos utilizar a tag <br />, esta tag no existe abertura e nem
fechamento, ela nica, pois serve apenas para efetuar a quebra de linha, veja no exemplo.




19

Agora sim conseguimos o resultado desejado, caso quisssemos efetuar mais uma quebra de
linha, bastaria adicionar seguidamente mais um <br />.

E teremos o seguinte resultado.


20

Bom, vamos aprender agora as tags <h1>, <h2> e <h3> que servem para definir ttulos e
subttulos, vejamos.

Vejamos o resultado.

Bom, reparemos que por padro cada tag vem com seu tamanho definido, sendo a <h1> maior
que a <h2>, seguida pela <h3>. Repare tambm no cdigo que eu no precisei adicionar o
21

<br /> para efetuar a quebra de linha de um ttulo para o outro, pois por padro as tags de
ttulo j vem com essa propriedade definida, ento tudo que colocarmos aps ela ficar
automaticamente abaixo.
Vamos estudar agora as tags <ul> e <li> que servem para criarmos listas, veja o resultado para
entender como funciona.

Veja que nessa lista, temos definido uma bolinha preta que antecede cada item da lista,
vejamos agora como fazer isso no cdigo.

22

Repare que precisamos definir onde iniciar a lista colocando a tag <ul></ul> e entre as
mesmas ento adicionar os itens, cada item entre uma tag <li></li>.
Para definirmos uma lista numrica, basta trocarmos a tag <ul> pela <ol>, lembre-se de trocar
tanto na abertura quanto no fechamento, veja.

E ento teremos nossa lista numrica.

23

A numerao contada automaticamente de acordo com a quantidade de itens na lista.
Links

Nesta lio voc aprender a fazer links de uma pgina para outra, para isso vamos limpar um
pouco o nosso cdigo para facilitar o trabalho.
Deixaremos apenas a estrutura da pgina.

Precisaremos tambm criar uma nova pgina, apenas para utilizarmos como teste do nosso
link, ento vamos criar um novo documento com a seguinte estrutura.

24

Que salvaremos com o nome de aula2.html, importante salvarmos este arquivo na mesma
pasta onde se encontra o primeiro, no meu caso, salvei na pasta arquivos, veja.

Repare que com a criao deste novo arquivo, ficamos com duas abas no nosso notepad++.

Ento, deixaremos selecionada a aba referente ao primeiro documento criado, que seria
aula.html, que onde trabalharemos a criao do link.
Bom, para criarmos nosso link utilizaremos a tag <a>, o conceito dela o mesmo das
anteriores, veja o exemplo.
25


Veja que o link onde o usurio clicar est entre a abertura e o fechamento da tag <a>, o que
h de diferente neste cdigo seria o atributo href, ele utilizado para apontarmos para onde
o usurio ser direcionado quando clicar no link, ento definimos para o documento
aula2.html.
Vejamos o resultado.

Quando clicamos no link, somos direcionados automaticamente para a pgina aula2.html.
26


Se quisermos que a pgina do link abra em uma nova aba, basta adicionarmos o atributo
target=_blank no cdigo, veja como ficaria.

Dessa forma, ao clicarmos, a pgina abrir em uma nova aba, no sendo necessrio o
fechamento da anterior.
27


Outro tipo de link que podemos criar tambm para uma pgina externa, uma pgina externa
no faz parte do nosso site e sim de um outro site na internet, para isso basta colocar dentro
do atributo href utilizando antes do endereo http://, veja o exemplo.


28

Imagens

Vamos ver agora como adicionar imagens em nossa pgina, esta uma parte muito
importante para a criao do design do site, porm, bem fcil e simples de se trabalhar.
Segue abaixo a tag que utilizaremos para isso.
<img src= border=0 />
Entre as primeiras aspas devemos adicionar o caminho da imagem, no meu caso a imagem que
utilizarei como exemplo se encontra dentro da pasta imagens que est junto com os
arquivos aula.html e aula2.html. Minha imagem tem o nome de foto e o formato dela
.jpg, ento minha tag ficar da seguinte forma:
<img src=imagens/foto.jpg border=0 />
Vejamos isso incorporado em nosso cdigo.

Repare que utilizamos o <br /> duas vezes para a quebra de linha. O atributo border=0 na
tag da imagem responsvel por tirar a borda que ficaria por padro na imagem que
adicionamos.
Vejamos a seguir como ficou nossa pgina no navegador.
29


Como definido, a imagem ficou abaixo do link. Um detalhe importante que tambm
podemos inserir link na imagem da mesma forma que inserimos no texto, bastando
acrescentar a tag da imagem dentro da tag <a>. Vejamos um exemplo.

No navegador, veremos que a imagem no sofreu nenhuma alterao, porm, ao passar o
mouse em cima percebemos que h um link, e quando clicamos somos direcionados para a
pgina aula2.html.

30

Tabelas

Veremos agora como trabalhar com tabelas, as tabelas muitas vezes so usadas para
apresentar dados em linhas e colunas, de forma lgica.
Utilizaremos para isso as tags <table>, <tr> e <td>, todas devem abrir e fechar como segue a
regra do html. A tag <table> serve para definir onde a tabela inicia e termina, a <tr> especifica
o inicio de uma linha e a tag <td> o inicio de uma coluna. Vejamos um exemplo, para isto
limparei o nosso cdigo novamente, para facilitar a nossa anlise.

Neste exemplo criamos uma tabela com 2 linhas e 2 colunas, vejamos como ficou no
navegador.


31

Para visualizarmos as bordas das clulas podemos utilizar o atributo border=1 na tag
<table>. Por exemplo.

Com isso, ativaremos a borda em toda a tabela.

Entendendo a lgica da tabela, sabemos que para adicionar mais linhas e colunas basta
utilizarmos das tags <tr> e <td>. Vejamos.
32


Dica para textos

Ao invs de utilizarmos a tag <br /> para definirmos quebras de linhas, podemos utilizar a tag
<p> que para formar pargrafos no texto. Veja um exemplo abaixo.

Repare que dessa forma no precisaremos utilizar duas tags <br /> para efetuarmos duas
quebras de linha. Vamos ver como ficou o resultado.
33


Bom, at aqui voc aprendeu as noes bsicas para a criao de um site, este material
apenas uma demonstrao do Curso Aprenda a Criar Sites Profissionais em apenas 1 dia!, o
curso completo possui um pouco mais de 100 pginas e far com que voc consiga em alguns
passos criar sites como este:

34

Para voc adquirir o curso completo e aprender a criar sites profissionais ainda hoje acesse o
endereo abaixo.
http://www.ninjastec.com.br/cursoweb/comprar.php
Caso tenha alguma dvida, sugesto ou critica entre em contato atravs do e-mail
suporte@ninjastec.com.br, ser um prazer ajudar!
Grande abrao,
Carlos Quintes