Você está na página 1de 13

Super apostila com tudo que você precisa saber para fazer um site!

Agora iniciaremos o estudo ao HTML, para você fazer o site utilize o bloco de notas do
windows(notepad) ou um outro editor de texto ASCII. Para fazer você deve escrever os comandos e
depois de finalizalos salve esse documento assim nome_do_documento.htm. No HTML usamos
comandos chamados TAGS, essas tags tem basicamente esse formato:

<abri tag> </fechei tag>

Assim é escrito um comando em HTML, primeiro se abre a tag dizendo de que tipo ela é, depois de
utilizado sua função se fecha a tag. Por exemplo:

<font face="comic sans ms" color="red"> TEXTO1 </font> TEXTO2

No resultado deste comando teriamos TEXTO1 escrito com a fonte comic sans ms e com a cor
vermelha, como foi escrito no exemplo acima. Ali escrevi a tag <font> coloquei o texto no meio e
fechei a tag </font>, ou seja, tudo que está entre o início e o fim da tag, receberá o comando
empenhado pela tag.
Quando utilizei a barra "/" antes de escrever a tag FONT no fim significa que eu fechei essa tag assim
tudo que viria depois do fechamento dessa tag não teria a cor vermelha e não seria escrito com a fonte
comic sans ms, esse foi o caso de TEXTO2. E no exemplo também aparecem atributos de FONT, os
atributos são face="" e color="", os atributos são os comandos que configuram qual será a ação
empenhada pela tag, nesse caso o atributo face="" configurou a tag FONT a formatar o texto com a
fonte comic sans ms, o mesmo caso aconteceu com o atributo color="", ele disse a tag que a cor seria
vermelha. Porque a tag FONT empenha a tarefa de formatação de texto, os atributos são apenas os
parâmetros de FONT. Agora que entendemos como se funciona as tags, vamos começar a apresentar as
tags que existem no HTML.

TAGS

<html></html> essa tag deve ser colocada no início do documento e no final. É ela que diz que o
documento é em HTML.

<head></head> essa tag é o cabeçalho do documento, dentro dela é colocada SCRIPTS, FOLHA DE
ESTILOS, a tag TITLE entre outros comandos.

<title></title> essa tag vai definir o título do documento, é aquele texto que aparece naquela barra
onde estão os botões minimizar, maximinizar e fechar.

<body></body> essa tag é aonde você vai escrever todas as tags do documento exceto as listadas
acima, nela colocamos as tags de texto, imagem, links entre outros, ela é o corpo do documento.

Atributos de <body>

bgcolor="cor" esse atributo desempenha a função de definir a cor de fundo da página, entre as aspas
você pode colocar o nome da cor em inglês ou seu código hexadecimal.

background="endereço da imagem" esse atributo desempenha a função de definir uma imagem para
ser o fundo da página, entre as aspas você deve colocar o endereço da imagem, seja ela on-line ou no
seu hd.

bgsound="endereço do som" esse atributo serve para que assim que o site se carregue, carregue
juntamente uma música, executando-a automaticamente.

link="cor" esse atributo define qual será a cor do link.

vlink="cor" esse atributo define qual será a cor do link visitado.


alink="cor" esse atributo define qual será a cor do link ativo.

text="nome da fonte" esse atributo define qual será a cor da fonte padrão utilizada pelo documento
html.

Modo de escrita de um documento HTML:

<html>
<head>
<title> Título da página </title>
</head>
<body>

</body>
</html>

Essa é a maneira de se iniciar um documento HTML, tente escrever da maneira que esta escrito acima,
dando enter depois de comandos e espaços, para ter uma melhor organização do documento e para
você entender conseguentemente o que está escrito. Dica: você pode pegar esse código e colar no bloco
de notas e salvar, você pode colocar qualquer título no lugar de "Título da página", para entender o
funcionamento da tag TITLE.

TAGS DE FORMATAÇÃO DE TEXTO

<h1></h1> essa tag tem a função de formatar o texto para um tamanho específico.
Nesse exemplo usamos a tag h1 no texto "exemplo":

exemplo
Nesse exemplo foi escrito com h1, mas essa tag vai de h1 até h6, conseguentemente diminuindo o
tamanho da fonte pelo número maior:

exemplo

nesse exemplo foi escrito com a tag <h2>exemplo</h2>.

exemplo

nesse exemplo foi escrito com a tag <h3>exemplo</h3>.

exemplo

nesse exemplo foi escrito com a tag <h4>exemplo</h4>.

exemplo

nesse exemplo foi escrito com a tag <h5>exemplo</h5>.

exemplo
nesse exemplo foi escrito com a tag <h6>exemplo</h6>.

<b></b> essa tag tem a função de deixar o texto em negrito, tudo que for escrito entre essas tags
ficará em negrito.

<i></i> essa tag tem a função de deixar o texto em italico, tudo que for escrito entre essas tags ficará
em italico.

<u></u> essa tag tem a função de sublinhar o texto, tudo que for escrito entre essas tags será
sublinhado.

<sup></sup> essa tag configura o texto a aparecer de modo sobrescrito.

<sub></sub> essa tag configura o texto a aparecer de modo subscrito.

<blink></blink> essa tag faz com que o texto configurado fique piscando. Entretanto é muito difícil
achar um navegador que dê total suporte a esse comando. Geralmente não funciona.

<strike></strike> faz com que o texto fique com um risco no meio. EXEMPLO

<br> essa tag faz pular de linha. Observe que essa tag não precisa de fechamento ela é sozinha.

<p> essa tag faz pular de linha e na próxima linha deixa em branco. Note que esta também é sozinha.

<nobr></nobr> tudo que tiver entre essas tags será continuo, quando você não especifica ao
browser, e você escreveu muito texto, o browser automaticamente adiciona uma quebra de linha, com
essa tag impede que o browser dê uma quebra de linha, assim o texto é continuo.

<font></font> com essa tag você formata o texto em tamanho, fonte e cor. Que são configurados
nos seus atributos.

<font face="nome da fonte"></font> essa tag configura o tipo da fonte que será o seu texto, por
exemplo

comic sans ms,courier,arial black

entre outras.
<font color="cor"></font> essa tag especifica qual será a cor do texto. Exemplos:
<font color="red">EXEMPLO</font> ou <font color="#ff0000">EXEMPLO</font>, você pode
tanto colocar o código hexadecimal da cor, quanto o nome da cor em inglês, brevemente você verá uma
tabela com algumas cores e seus códigos hexadecimais.

<font size="número de 1 até 7"></font> essa tag especifica o tamanho da fonte, parecida com
h1,h2,...,h6.

<basefont></basefont> parecida com a tag font, mas essa especifica a fonte para todo o
documento, mesmo assim você pode usar fonte para formatar a fonte.

<pre></pre> a tag pre formata o texto da maneira que você escreveu no editor de texto. Por exemplo
aqueles desenhos feitos com caracteres eles ficarão da maneira que você escreveu no código, sem
precisar colocar tags para pular linha ou de espaço. Exemplo:

-------------------------------
| /|__|\ | VON..........|
| (o o ) |..................|
| / C \ | ROBERT.....|
| | |||| | |..................|
| \_____/ | KMEFISTO..|
------------------------------
INSERINDO IMAGENS

<img src="endereço da imagem"> essa tag serve para inserção de imagens no seu documento html.

<img src="endereço da imagem" title="título da imagem"> esse atributo especifica um título para
imagem, que é visto quando você passa o cursor do mouse sobre a imagem.

<img src="endereço da imagem" width="largura da imagem" height="altura da imagem"> os


atributos width="" e height="", servem para ajustar o tamanho da figura, width ajusta a largura e
height a altura, o tamanho é medido em pixels, então você deve especificar um número nas aspas de
width e height. Exemplo:

Nesse exemplo utilizei uma imagem com 100 pixels de largura e 50 de aldura. Note que não apareceu
imagem alguma, isso ocorreu porque eu não coloquei nenhum endereço para a imagem, no meu caso foi
de propósito, mas se você errar o endereço a imagem não aparecerá.

<img src="endereço da imagem" alt="texto"> esse atributo serve para colocar um texto caso a
imagem não apareça. Exemplo:

A tag com os atributos utilizada para o exemplo acima: <img src="#" width="300" height="50"
alt="Texto que aparece quando a imagem não é carregada ou quando se está carregando.">

<img src="endereço da imagem" vspace="numero" hspace="numero"> os atributos vspace="" e


hspace="", determinam o espaçamento da imagem em relação a imagens e texto. O vspace="número
de pixels" define o espaçamento vertical e é definido em pixels, e o hspace="número de pixels" define o
espaçamento horizontal.

Código do exemplo acima: <img src="#" width="400" height="50" alt="FIGURA A:"


hspace="35"><img src="#" width="100" height="50" alt="FIGURA B:">, o mesmo acontece para
vspace="".

<img src="endereço da imagem" align="opção"> o atributo align="" especifica qual será o


alinhamento da imagem na página, se é na direita esquerda ou centro. Opções: left(alinha a esquerda),
right(alinha a direita) e center(alinha ao centro). Exemplo:

Neste exemplo foi utilizada a opção right, por isso a imagem está no canto direito.

INSERINDO LINKS E ÂNCORAS

Para inserirmos links e âncoras utilizamos a tag: <a href="endereço">texto do link ou imagem</a>
<a href="endereço para qual o link irá te enviar">texto do link ou imagem</a> essa tag cria um
texto ou uma imagem clicável, e assim que você clica te leva para um determinado ponto ou lugar.

<a href="endereço" title="texto">texto ou imagem</a> o atributo title="" configura um texto a


ser amostrado assim que você coloca o cursor do mouse, em cima do link, parecido com o ícone da área
de trabalho.

<a href="endereço" target="opção">texto ou imagem</a> o atributo target="", faz com que o


link abra em outra janela, na janela pai ou em um frame.

OPÇÕES DO ATRIBUTO TARGET

_blank faz com que o link abra em uma nova janela em branco.

_parent faz com que o link abra na janela pai.

_self faz com que abra na mesma janela. dica: self é default(padrão), geralmente não precisa colocar
essa opção.

_top faz com que o link abra em uma nova janela que preencha a tela, sem botões, painéis ou menus
do browser.

para abrir em frames para abrir o link em um frame você deve colocar o nome do frame no atributo
target="nome do frame".

<a name="aqui">esse é o local que o link virá</a> para cria uma âncora primeiro criamos esse
comando de link mas com um nome, e depois usamos outro link que quando clicado vai exatamente no
local onde está a âncora, <a href="#aqui">clique aqui que irá até a âncora aqui</a>. Não repita o
nome da âncora duas vezes, cada âncora deve ter seu próprio nome.

LISTAS

Listas são texto amostrados em tópicos, podemos criar listas ordenadas e não ordenadas, uma lista
ordenada aparece o item e ao lado o número da ordem, se for o primeiro item da lista será o número 1,
se for o segundo o número 2 e assim sucessivamente. As listas ordenadas iniciam com tag <ol> e
depois a fechamos. Exemplo:

<ol>
<li> em Itaguaí tem lama
<li> em Santa Cruz tem aipim
<li> professor da aula particular
</ol>

Assim será apresentado no browser:

1. em Itaguaí tem lama


2. em Santa Cruz tem aipim
3. professor da aula particular

LISTA NÃO ORDENADA

Para criar uma lista não ordenada utilizamos a tag <ul> e depois fechamos. Utiliza da mesma maneira
que a tag <ol>. Mas essa apresenta como um bolinha.

<ul>
<li> item
</ul>
Assim será apresentado no browser:

• item

Também podemos ao invés de colocar essa bolinha, colocar outro tipos de marcadores, com essa tag
<ul type="opção">.

OPÇÕES:

circle ao invés da bolinha aparece uma circunferência.

o exemplo

square aparece um pequeno quadrado.

 exemplo

disc aparece a bolinha.

• exemplo

MARQUEE

<marquee>texto</marquee> a tag <marquee> configura o texto para ficar se movimentando na


tela. Exemplo:

<marquee loop="número">Texto ou imagem</marquee> o atributo loop diz ao navegador quantas


vezes o texto irá passar pela tela, se você não colocar esse atributo o padrão será infinito.

<marquee scrollamount="número">texto ou imagem</marquee> esse atributo configura a


velocidade que o texto rolará. Quanto maior o número maior a velocidade. Exemplo:

<marquee direction="opção"></marquee> diz qual a direção que deve rolar o texto ou imagem.
As opções são: up(cima), down(baixo), left(esquerda) e right(direita). Exemplo:
<marquee behavior="opção">texto ou imagem</marquee> esse atributo diz ao browser, como
deve rolar.

OPÇÕES:

alternate essa opção faz com que o texto ou imagem bata no fim e volte. Exemplo:

slide essa opção faz com que bata no final e fique, sem voltar mais. Essa é a opção mais sem graça.
Exemplo:

scroll essa opção não precisa ser colocada, se você quiser que o texto role dessa maneira, essa já é
padrão, rola até o fim e aparece outra do outro lado, sempre continua. Exemplo:

P.S.: na tag marquee você pode colocar atributos como bgcolor entre outros.

TABELAS

Para inserirmos tabelas em um documento HTML usamos a tag <table>. Exemplo:

<table>
<td></td>
<tr>
</table>

A tag <table> é a tag que inicia e termina a tabela e tudo que estiver entre ela faz parte da tabela. A
tabela é dividida por células, como linhas e colunas. Veja no exemplo abaixo:

célula 1 célula 2 célula 3


célula 4 célula 5 célula 6

Nesse exemplo a tabela possui 2 linhas e três colunas:

Atributos de <table>:
border="número" especifica se a tabela terá borda ou não. Se você não colocar nenhum número não
haverá borda, se você colocar ele ajustará a espessura da borda. Exemplo:

Nesse caso a borda foi ajustada para o número 5.

Código do exemplo acima:<table border="5"><td>Nesse caso a borda foi ajustada para o número
5.</td></table>

bordercolor="cor" especifica a cor da borda. Exemplo:

borda com cor vermelha

cellpadding="número" esse atributo especifica o espaçamento dentro das células. Exemplo:

O cellpadding da tabela foi definido como 20.

cellspacing="número" o atributo cellspacing especifica o espaçamento entre as células. Exemplo:

O cellspacing dessa tabela foi definido com o número Assim as células estão afastadas 10 pixels cada uma da
20. outra.

Note que a borda da célula é apenas o que está ao torno do texto, a maior que envolve as duas células é
a borda da tabela. Assim as células estão afastadas por 20 pixels.

p.s.: a tag table também aceita atributos como bgcolor, background, align entre outros.

<td>texto ou imagem ou nada</td> agora falarei sobre a tag <td>, é essa tag que inseri células
dentro de uma tabela. Podemos colocar várias tags dessas ao lado assim teremos várias células na
tabela. Exemplo:

célula 1 célula 2 célula 3 célula 4

Código do exemplo acima:<table border><td>célula 1</td><td>célula 2</td><td>célula


3</td><td>célula 4</td></table>, nesse exemplo agrupamos quatro tags <td> simultâneamente,
assim quatro células uma ao lado da outra.

<tr> essa tag faz com que se insira linhas na tabela. Exemplo:

célula 1
célula 2
célula 3

código do exemplo acima:<table border align="center"><td>célula 1</td><tr><td>célula


2</td><tr><td>célula 3</td><tr></table>, podemos colocar várias tags <td> antes de invocar a tag
<tr> assim faremos várias linhas e colunas.

Atributos de td:
colspan="número" esse atributo faz com que uma célula tome o tamanho de duas células na
horizontal, uma célula ganha o espaço de duas células. Exemplo:

essa célula ganhou o lugar de duas. colspan="2" célula 2


célula 3 célula 4 célula 5

rowspan="número" esse atributo é parecido com o colspan, mais esse ajusta na vertical. Exemplo:

célula 2 célula 3
rowspan="2"
célula 4 célula 5

P.S.: essa tag também pode possuir atributos como bgcolor, background, align entre outros.

INSERINDO MÚSICAS E VÍDEOS

<embed src="endereço do vídeo ou som"> para inserirmos músicas ou vídeos em uma página,
usamos a tag <embed>, basta colocar o endereço do vídeo e da música. Automaticamente serão
inseridos botões como play, stop, pause entre outros. Para essa tag funcionar corretamente o
computador deve possuir plugins para o formato do vídeo ou da música. Exemplo:

fort mirror - whered you go

Eu escolhi colocar essa música no formato MID, por ser pequeno o tamanho do arquivo. Dica: coloque
arquivos pequenos para serem executados, afinal nem todos possuem banda larga. Você também pode
colocar músicas no formato .MP3, .WAV, .MID entre outros formatos. E vídeos como .MPG, .AVI,
.SWF(desenho em flash) entre outros formatos.

<embed src="endereço do som ou do vídeo" autostart="opção"> esse atributo especifica se a


música ou vídeo, irá começar a tocar sozinho ou se precisa apertar o play.

OPÇÕES:

 true se você escrever essa opção a música ou vídeo começara a rodar sozinho.
 false se você escrever essa opção precisará dar play.

FORMULÁRIOS

Formulários são objetos que permitem a entrada de dados pelo usuário e são enviados para o e-mail do
dono do site. Como exemplo podemos citar uma votação no site, você vota e esse voto será enviado
para o e-mail dos desenvolvedores do site e processarão seu voto; Outro exemplo, e quando você se
cadastra em um site, depois de todas as etapas eles te enviam um e-mail para confirmação, o que
aconteceu foi que os seus dados foram enviados para um programa, esse programa os processou e
reenviou um e-mail para você. Mas simplesmente o HTML somente não dá para processar essas
informações e enviar, é necessário um script(programa), você precisará aprender uma linguagem de
programação, eu te recomendo PERL, vá em sites de apostilas e baixe uma apostila falando de CGI
com PERL. Para construirmos um formulário usamos a tag <form> </form> e todas as outras tags
devem estar dentro dela.

Atributos de form:

action="endereço do script" aqui você define o endereço que será enviada as informações.
method="post" esta tag define a forma na qual será enviada as informações coletadas ao servidor
para processamento. E ela deve conter para que funcione corretamente.

A TAG INPUT:

Basicamente todos os componentes do formulário, utilizam essa tag mesmo sendo diferentes. A palavra
INPUT significa entrada, e quase todos os componentes a utilizam.

<input type="tipo de componente" name="nome da variável" size="tamanho da caixa"


maxlenght="quantidade de caracteres que poderão ser escritos" value="texto que aparece na
caixa">

A tag INPUT deve ser escrita dessa maneira, nem o atributo type e o name devem ficar de fora. A
variação ocorre quando trocamos o tipo.

EDIT BOX

<input type="text" name="nome"> para inserirmos uma EDIT BOX utilizamos a opção TEXT no
atributo type. A EDIT BOX é uma pequena caixa para inserirmos texto. Veja o exemplo abaixo:

<- digite algo aqui

PASSWORD

<input type="password" name="nome"> é igual a EDIT BOX a única diferença é que na tela
aparecem o que você digita como asteriscos, usado para o campo senha. Veja o exemplo abaixo:

<- digite algo aqui para ver a diferença

RADIO

<input type="radio" name="nome"> este é um componente que você escolhe apenas uma opção de
todas determinadas. Veja o exemplo abaixo:

opção 1 opção 2 opção 3 <- escolha uma opção

CHECKBOX

<input type="checkbox" name="nome"> é parecido com o componente RADIO, mas este você pode
escolher várias opções. Veja no exemplo abaixo:

opção 1 opção 2 opção 3 opção 4 <- clique em quantas opções quiser

SUBMIT

<input type="submit" name="nome"> o componente SUBMIT, é o botão que você irá clicar depois
de inseridas todas as informações, é uma espécie de OK! Veja no exemplo abaixo:

CLIQUE AQUI PARA ENVIAR A S INFORMAÇÕES

RESET

<input type="reset" value="nome"> é parecido com o componente submit, mas esse apaga todas as
informações digitadas para você escrever denovo. Veja no exemplo abaixo:
<- escreva algo aqui depois aperte no botão limpar
LIMPAR

TEXTAREA

<textarea name="nome" cols="número" rows="número"><textarea> o componente TEXTAREA é


um espaço pré destinado a textos extensos. O atributo cols="" define a quantidade de colunas e
rows="" de linhas. Exemplo:

Esta é uma textarea aqui você pode inserir textos ex

SELECT

<select>
<option>opção 1
<option>opção 2
<option>opção 3
</select> -------------este componente apresenta opções através de caixas com barras de rolagem.
Exemplo:

EXEMPLO DE UM FORMULÁRIO:

<h1>Requisição de dados:</h1><br>
<form action="http://www.site.com.br/cgi-bin.pl" method="post"><br>
Nome: <input type="text" name="nome"><br>
Sobrenome: <input type="text" name="sobre"><br>
Sexo: <input type="radio" name="sexom"> Masculino <input type="radio" name="sexom">
Feminino<br>
Data de nascimento: <input type="text" name="nasc"> dd/mm/aa<br>
O que você achou da apostila? <input type="checkbox" name="chb">Boa <input type="checkbox"
name="raz">Razoável <input type="checkbox">Ruim<br>
Dê seu comentário sobre ela <textarea name="coment" cols="50" rows="5"></textarea><br>
<input type="submit" value="OK"> <inpu type="reset" value="Recomeçar"><br>
</form>

Assim ficará esse código:

Requisição de dados:

Nome:

Sobrenome:

Sexo: Masculino Feminino

Data de nascimento: dd/mm/aa

O que você achou da apostila? Boa Razoável Ruim


Dê seu comentário sobre ela
OK Recomeçar

FRAMES

Frames são porções divididas da página(janelas), e cada uma dessas porções irá possuir um documento
HTML.

Clique aqui para ver uma página com frames

Para dividir a janela em frames utilizamos esta sintaxe básica:

<frameset cols="número" cols="número">


<frame src="endereço do arquivo html">
<frame src="endereço do arquivo html">
</frameset>

Onde frameset é a tag que envolve as frames. O atributo cols="" define a largura dos frames e o
atributo rows="" a altura. A tag <frame src=""> especifica o endereço do documento html que irá ficar
no frame.

Atributos de frameset:

cols="número" esse atributo especifica a largura do frame. Pode ser expressada em pixels, em
porcentagem da tela e quartos. Para definir muitos frames, colocamos as larguras separadas por vírgula.
Exemplo:

<frameset cols="60%,30%"> o primeiro frame nesse caso terá uma largura de 60% da tela do
computador enquanto o outro só 30%.

rows="número" esse atributo especifica a altura dos frames. Ele funciona da mesma maneira de
cols="".

frameborder="opção" especifica se o frame terá bordas ou não. Opções yes(sim)e no(não).

border="número" se o frame tiver bordas, esse atributo especifica a espessura da borda.

bordercolor="cor" especifica a cor da borda, se houver.

--- fim dos atributos ---

<frame src="endereço do documento html"> a tag frame especifica qual será o documento que irá
abrir na janela determinada.

Atributos de frame:

<frame src=" " noresize> o atributo noresize impede que o frame seja redimensionado pelo usuário.

<frame src=" " scrolling="opção"> diz ao browser se o frame terá ou não barra de rolagem. Opções
yes(sim) e no(não).
name="nome" dá um nome ao frame. Muito util para abrir links, se você quiser abrir um link em um
frame, basta colocar no atributo target="" do link o nome do frame, assim o link se carregará no
frame.