Professional Documents
Culture Documents
. INTRODUO:
Os documentos em HTML so como arquivos ASCIL comuns, que podem ser editados
em: vi, emacs, textedit, notepad ou qualquer outro editor simples.
Para editarmos os comandos HTML utilizaremos o bloco de notas que possui no prprio
Windows. Todo documento HTML comandos tambm chamados de TAGs so apresentados
entre parnteses angulares <..> inicio e </..>fim.
Os comandos no so sensveis a caixa, ou seja, tanto faz escrever: <HTML>, <HTml> <
html>, <Html>.
importante (para fins de organizao) que as TAGs sejam sempre fechadas do ltimo
para o primeiro desde modo: <head><title>documento </title></head>.
. TABELAS:
Exemplo 1:
<table border="5" bordercolor="#ff0000" cellspacing="12" cellpadding="7"
width="150" height="50" bgcolor="#6666ff"<tr><td>primeira
coluna</td><td>segunda coluna</td><td>terceira coluna</td></tr><tr>
<td>primeira linha</td><td>primeira linha</td><td>primeira
linha</td></table><br>
Exemplo 2:
<table border="1" bordercolor="#6666ff" cellspacing="0" cellpadding="0"
width="300" height="100" background="img01.jpg" <tr><td>primeira
coluna</td><td>segunda coluna</td><td>terceira coluna</td></tr>
<tr><td>primeira linha</td><td>primeira linha</td><td>primeira
linha</td></table><br>
Exemplo 3:
Exemplo:
<table border="1" width="600" height="150">
<tr><td>Alinhamento padro</td>
<td align="center" valign="top">Alinhamento ao centro e no topo</td>
<td align="left" valign="middle">Alinhamento esquerda no meio da
clula</td>
Exemplo:
<table border="1">
<tr><td colspan=2>Mesclando primeira e segunda coluna</td></tr>
<tr><td>primeira linha</td><td>primeira linha</td></tr>
<tr><td>segunda linha</td><td>segunda linha</td></tr>
<tr><td rowspan=3>Mesclando trs linhas<td>uma linha</td></tr>
<tr><td>duas linhas</td></tr>
<tr><td>trs linhas</td></tr>
</table>
Como foi dito anteriormente podemos utilizar qualquer formatao dentro da
clula, utilizando as TAGs e os atributos correspondentes. Vamos adicionar uma
imagem na tabela.
Exemplo:
<table border=3 width=100 height=100>
<tr align="center"><td><img src="img02.jpg">
</td></tr></table>
Exemplo:
<table border=1><tr>
<td>Adicionando uma lista dentro da clula
<ul><li>primeiro item
<li>segundo item
<li>terceiro item
</ul></td></table>
. FORMULRIO:
Exemplo:
<form>
<textarea name=Area_de_texto rows=4 cols=40 value=Comentarios>Texto
padro</textarea>
</form>
<select></select> - Define uma lista de opo.
Antes da tag </form> digite mais este exemplo:
<select>
<option select>Escolher um item</option>
<option>primeiro item</option>
<option>segundo item</option>
<option>terceiro item</option></select>
Passe o mouse sobre a imagem abaixo e veja como ficaram estes exemplos.
<select name=escolhido>
<option>primeiro item</option>
<option>segundo item</option>
<option selected>terceiro item</option></select>
<inputs> - Define botes e caixas de seleo.
Atributos
Type=text Caixa de texto simples.
Type=password Dados confidncias.
No text e no password podem ser usados os seguintes atributos:
Name Define o nome dos dados.
Size Define o tamanho do campo.
Maxlength Define o mximo de caracteres.
Antes da tag </form> digite mais este exemplo.
<input type=text name=nomesize=15 maxlength=35><br>
<input type=password name=senha size=10 maxlength=6>
Passe o mouse sobre a imagem abaixo e veja como ficaram os exemplos acima.
10
11
METHOD=GET Este mtodo envia toda sua informao ao final da URL ativada,
pois a maioria dos documentos HTML so recuperados a partir da requisio de uma
nica URL ao servidor.
METHOD= POST Este mtodo transmite toda a informao fornecida, via
formulrio, imediatamente aps a URL ativada, ou seja, quando o servidor recebe uma
ativao de um formulrio utilizando POST, ele sabe que precisa continuar ouvindo
para obter a informao. Este o melhor mtodo.
Utilizando a marcao ACTION, voc estar indicando para onde o formulrio
deve enviar as informaes. Esta URL em geral aponta para um script CGI que ir
receber e decodificar os resultados. Lembre-se que se voc est referenciando um
script que reside no mesmo servidor do formulrio, voc no precisa incluir a URL
completa.
Neste exemplo abaixo as informaes esto sendo enviadas para um script local
chamado: post-query no diretrio: /cgi-bin do servidor.
Exemplo:
<form METHOD=Post ACTION=/cgi-bin/post-query>
Neste outro exemplo abaixo as informaes esto sendo enviadas para o
endereo de correio eletrnico.
<form METHOD=Post ACTION=mailto:nomedoemail@provedor.com.br>
. FRAME:
12
Outros comandos:
<frameset></frameset> - Define a diviso da pgina e quadros, onde o atributo
cols divide em colunas (so definidas da esquerda para a direita) e rows divide em
linhas.
Dentro da formatao da frameset temos os frames src que so referncias
s pginas que sero mostradas no frame definido.
Tambm tem noframe, utilizado para informar ao usurio que utilizam antigos
browser (anteriores ao Netscape 2.0) que a pgina contm frames, mas que no as
conseguem visualizar.
Abaixo daremos alguns exemplos para que voc tenha a noo de como
ficariam suas pginas com as frames, mas antes disto, crie 5 pginas simples
mudando apenas a cor de fundo e salvando-as como: pagina1.html; pagina2.html;
pagina3.html; pagina4.html e pagina5.html.
Exemplo:
<html>
<head>
<title>Pgina 01</title>
</head>
<body bgcolor="#FFFFCC">
</body>
</html>
Como montar os frames em colunas.
Exemplo:
<html>
<head>
<title>Exemplo de Frame </title>
</head>
<frameset cols=20 % , 80 %>
<frame src=pagina1.html>
<frame src=pagina2.htmlNAME=principal>
<noframe>
</noframe>
</frameset>
<body>
</body>
</html>
Salve esta pgina como: index.html
Veja como ficaria sua pgina:
13
Criado este frame voc pode criar outro frame em linha. Faa as seguintes alteraes
que esto grifadas em vermelho
Exemplo:
<html>
<head>
<title>Exemplo de Frame </title>
</head>
<frameset cols=20%, 80%>
<frame src=pagina1.html>
<frameset rows=20%,80%>
<frame src=pagina3.html>
<frame src=pagina2.html NAME=principal>
<noframe>
</noframe>
</frameset>
</frameset>
<body>
</body>
</html>
14
<html>
<head>
<title>Exemplo de Frame </title>
</head>
<frameset rows=20%,80%>
<frame src=pagina1.html>
<frame src=pagina2.html NAME=principal>
<noframe>
</noframe>
</frameset>
<body>
</body>
</html>
15
16
17
Digite no local onde voc deseja que a pgina retorne para outro ponto da
mesma, ou seja, no corpo da pgina depois do <body>.
. FOLHA DE ESTILO:
Voc pode personalizar sua pgina utilizando a folha de estilo que permitir a
voc definir a fonte, cor e tamanho de toda sua pgina,quando se tratar de um texto
longo.
Aps a TAG <head> digite:
<style type=text/css>
body{font:14pt verdana}
h3{color:#6666ff}
.destaque{color:#ff0000}
</style>
No decorrer do seu texto voc s precisar acrescentar a TAG: <span
class="destaque">...</span> , quando precisar realar alguma palavra.Quanto
formao de fonte, estilo de fonte e a cor do cabealho, j esto personalizados. Seu
texto ficaria parecido com o exemplo abaixo:
18
. ADICIONANDO MSICA:
Para se inserir uma msica no site, digite antes da tag </head> a tag: <bgsound
src=nomedoarquivo.mid (ou .wav)>
Ou utilize a mesma tag e no lugar do: nomedoarquivo. mid, coloque o
endereo da URL do site de msica.
Exemplo:
<bgsound src=http://www.nomedosite/nomedamusica.mid >
Utilizando esta tag no aparecer nenhum reprodutor(display).
Para que a msica toque vrias vezes acrescente: loop="-1"
Exemplo:
<bgsound src=nomedoarquivo.mid loop=-1
Outra forma seria colocar a tag: <embed src="nomedoarquivo.mid"
autostart="true" Loop="1">, onde aparecer um reprodutor(display)no local que
voc desejar dentro da tag <body>.
Ou utilize a mesma tag e no lugar do: nomedoarquivo. mid, coloque o
endereo da URL do site de msica.
Exemplo:
<embed src="http://www.nomedosite/nomedamusica.mid" autostart="true"
Loop="1">
19
Para
se
colocar
um
texto
animado
ser
utilizado
a
tag:
<marquee></marquee> e o texto ir rolar da direita para a esquerda. Para que o
texto role da esquerda para a direita acrescente direction="right". Para que o texto
role de baixo para cima acrescente direction=up. Para que o texto role de cima
para baixo acrescente direction=down.
Utilizando o up ou down, os mesmos podem ser definidos a altura:
height=valor e a largura: width=valor
OBS: Efeito visualizado somente no Internet Explorer.
Exemplo:
<marquee> digite seu texto</marquee>
<marquee direction="right"> digite seu texto</marquee>
<marquee direction=up height=30 width=100>digite seu
texto</marquee>
Seus atributos so:
BEHAVIOR="valor" - Define o tipo de comportamento.
Alternate - o texto rola at o canto esquerdo e volta.
Slide - o texto rola at o canto direito e para.
Exemplo:
<marquee behavior="alternate">digite seu texto</marquee>
<marquee behavior="slide">digite seu texto</marquee>
20
OBS: O texto pode ser formatado e o marquee poder ser alinhado. O texto poder
ser substitudo por uma imagem.
. CARACTERES ESPECIAIS:
Para garantir que sua pgina seja visualizada sem nenhum problema, em
qualquer idioma, equipamento ou sistema operacional na Web, a linguagem HTML
possui uma codificao para caracteres especiais.
Cada caracteres deve ser apresentado da seguinte forma: um caracteres (&)
inicial, um nmero ou um cdigo especial correspondente ao caractere desejado, e um
caracteres (;) final (ponto-e-vrgula obrigatrio).
Exemplo: Para escrever a palavra voc, digite: você
21
ENTIDADE
á
â
à
ã
ç
é
ê
í
ó
ô
õ
ú
ü
CARACTER
ENTIDADE
Á
Â
À
Ã
Ç
É
Ê
Í
Ó
Ô
Õ
Ú
Ü
CARACTER
. DICAS IMPORTANTES:
OBS:
22
Publicar uma Web basicamente copiar os arquivos do site para o servidor que
poder ser o seu prprio provedor de acesso ou um outro que preste servio de
hospedagem.
Existem alguns provedores que liberam um determinado espao gratuitamente,
para que voc possa ter sua Home Page publicada.
A diferena entre um servio pago e um gratuito, que no servio gratuito voc
no poder registrar o site como um domnio seu (exemplo: www.cadex.com.br ),
voc
ter
que
usar
o
nome
do
prestador
do
servio
(exemplo:
www.prestadordeservico.com.br/cadex.
Atravs do site http://registro.br voc consegue se cadastrar no sistema,
registrar domnios, fazer pesquisas e obter informaes e estatsticas, porm, o
registro de domnios acarretar em custos e se seu objetivo no investir, a soluo
fazer um cadastro gratuito.
H vrios servidores gratuitos na Internet como o Terravista em portugus, que
pode ser acessado pelo endereo www.terravista.pt ou o Geocities, este em ingls que
pode ser acessado pelo endereo www.geocities.com.
Outro servio interessante que poder te oferecer vrios servios o HPG que
pode ser acessado pelo endereo www.hpg.com.br.
Aps fazer o seu cadastro voc receber um nome de usurio e uma senha
(palavra chave) que sero utilizados para que voc possa fazer acesso ao seu espao e
transferir seus arquivos.
Para a transferncia de arquivos voc precisar ter conhecimento em FTP ou
algum software que utilize este protocolo. Atualmente existem bons softwares de FTP
como o Cuteftp e WSFTP que fazem a transferncia de arquivos de forma grfica, do
mesmo modo como voc manipula seus arquivos no Windows Explorer.
Um hospedador que no requer FTP o http://vila.bol.com.br/index.html
gratuito, basta se cadastrar e colocar seu site na Internet.
Servio de busca
Depois do site pronto e publicado, voc precisa cadastrar o site em servios de
busca para que ele entre na lista de sites do sistema de procura, para que outros
internautas possam acesa-lo.
Abaixo fornecemos alguns sites de busca onde voc poder incluir seu site:
www.cade.com.br
www.achei.com.br
www.yahoo.com.br
www.google.com.br
www.radar.com.br
www.encontrei.com.br
www.aonde.com.br
23