Escolar Documentos
Profissional Documentos
Cultura Documentos
Introdução À Programação Web PDF
Introdução À Programação Web PDF
INTRODUO PROGRAMAO
WEB
2007
INDICE
1. INTRODUO INTERNET E A THE WORLD WIDE WEB...................................4
1.1 A INTERNET.......................................................................................................................4
1.2 ENDEREAMENTO INTERNET .............................................................................................4
1.3 DEFINIES DA HTML .......................................................................................................4
1.4 ELEMENTOS DE UM PROJETO WEB.....................................................................................4
1.5 ESTRUTURA DE UM WEB SITE............................................................................................4
2. COMANDOS HTML (TAGS)............................................................................................5
2.1 FORMAS DOS COMANDOS HTML ......................................................................................5
2. 2 REGRAS HTML E DICAS ..................................................................................................6
2.3 DOCUMENTO BSICO HTML ...............................................................................................7
3 FORMATAO DE TEXTO, HIPERTEXTO E FIGURAS...........................................7
3.1 - FORMATAO BSICA DA FONTE ....................................................................................8
3.1.1 Exerccio - Formatao Bsica.................................................................................8
3.2 - FORMATAO DO TAMANHO E ESTILO DA FONTE ............................................................9
3.2.1 Atributo SIZE.............................................................................................................9
3.2.2 Atributo FACE...........................................................................................................9
3.2.3 Atributo COLOR......................................................................................................10
3.3 EXERCCIO - FORMATAO E CORES ...............................................................................12
3.4 CABEALHOS...................................................................................................................12
4 RGUAS E MARCADORES............................................................................................13
4.1 MARCADORES .................................................................................................................13
4.1.1 Lista com marcadores .............................................................................................13
4.1.2 Lista numerada ou alfabtica..................................................................................13
4.1.3 Lista sem marcadores..............................................................................................14
4.2 RGUAS ...........................................................................................................................14
4.3 EXERCCIO - RGUAS E MARCADORES ............................................................................16
5 INSERO DE IMAGENS ..............................................................................................16
5.1 IMAGEM DE FUNDO ..........................................................................................................19
5.1.1 - Exerccio - Insero de Imagens...........................................................................19
6 LINKS ...................................................................................................................................19
6.1 EMBUTINDO
a)
Seqencial
b) rvore
c) Mista
<comando>
</ comando>
ERRADO!!!
- NUNCA!!!!
NOMES DOS TAGS - Maisculas (no estritamente necessrio mas facilita a leitura
e tomaremos como conveno para os nossos cdigos);
Como a maioria dos usurios Web ainda se conectam a velocidades baixas, verifique se
suas pginas podem ser visualizadas com estes modems;
Revise a grafia e a gramtica antes de publicar a sua pgina (pea que outra pessoa a
leia). Verifique todos os links entre as pginas. Esta dica simples mas muitas pessoas
esquecem dela e publicam pssimos trabalhos;
Em vez de fazer seu vnculo de texto com coisas chatas do tipo Clique aqui!, procure
ser mais especfico, use Iniciar, Transferir, ou outra;
Pea a opinio de outras pessoas antes de publicar o seu site, o olhar crtico de algum
pode detectar erros que no foram percebidos por voc.
O corpo do contedo.
OBS.: Nunca se esquea de fechar cada tag, com a barra e o nome da tarefa. Quando seu tag
tiver vrios atributos eles devem ser omitidos no fechamento do tag. Por exemplo:
<A HREF="agenda.html">Agenda</A>
Este tag um link, que voc aprender com mais detalhes depois, mais agora o importante
que voc perceba que os atributos (detalhes do tag) foram omitidos no seu fechamento. Se voc
no fechar um tag ele ficar aberto at o final do documento, alterando a propriedade de todo
ele, por exemplo, se voc no fechar <B> que o tag que cria textos em negrito, o documento
inteiro ficar em negrito. Uma dica que ns damos que voc sempre escreva os tags em letra
maiscula, que facilita a posterior visualizao e modificao dos arquivos.
3.1 - Formatao bsica da Fonte
Dentro do tag BODY, voc escreve todo o texto da sua pgina. E neste texto que vamos nos
concentrar agora. Os principais tags para a formatao de texto so:
<P>Cria um pargrafo</P>
<CENTER>Centraliza o texto</CENTER>
<B>Textos em negrito</B>
<I>Textos em itlico</I>
<U>Textos sublinhados</U>
<TT>Textos no estilo da mquina de escrever</TT>
<SUB>Texto subscrito</SUB>
<SUP>Texto sobrescrito</SUP>
<BR>Quebra de linha, no necessita ser fechado
<!--Este tag foi feito para comentrios e ignorado pelo browser -->
<DD>Este tag usado para criar pargrafo (o espao para a primeira linha). Se voc quiser
um pargrafo maior ou menor necessrio o uso de espaos atravs do caractere
No difcil, com o tempo voc ir memorizar o nome de cada tag!!
3.1.1 Exerccio - Formatao Bsica
Visualizao exemplo1
Visualizao exemplo2
Neste exemplo demonstramos que os atributos podem ser usados ao mesmo tempo sem
nenhum problema para o browser.
Nota 1: os tamanhos e estilos padres so configurados de acordo com cada browser. Ou seja,
se voc no determinar estes valores, o browser que abrir a sua pgina ir interpretar o seu texto
com a fonte e estilo configurada nele.
Nota 2: os atributos SIZE e FACE, podem tambm ser usados no tag <BODY>,
determinando o estilo do documento. Se voc determinou um estilo no tag <BODY>, mas quer
mud-lo em uma s frase, s configurar as fontes para a frase desejada (como foi explicado
acima). Lembre-se sempre valero as configuraes mais prximas do texto.
3.2.3 Atributo COLOR
As cores das fontes so determinadas pelo atributo COLOR, no tag FONT ou, abrangendo
todo o texto, pelo atributo TEXT, no tag BODY. Voc pode citar a cor que voc quer de duas
formas:
<FONT COLOR="nome da cor"></FONT>
<FONT COLOR=#XXXXXX></FONT>
Exemplo 3: Formatao de fonte
10
A primeira forma mais simples, e admite os nomes de cores: red (vermelho), blue (azul),
green (verde), yellow (amarelo), maroon (marrom), navy (azul-marinho), purple (roxo), olive
(verde-oliva), teal (verde-azulado),fuchsia (mangenta), aqua (azul-ciano), lime (verde-limo),
silver (prata), gray (cinza), black (preto), white (branco).
Os 16 nomes de cores aceitos segundo o HTML 3.2 so estes:
00FF00 = verde
000000 = preto
0000FF = azul
FF0000 = vermelho
FFFF00 = amarelo
11
3.4 Cabealhos
Outra forma usada para configurar o tamanho da fonte o tag <H*></H> onde o asterisco
substitudo por um nmero que vai de 6 (menor) a 1 (maior). Este tag mais usado para
ttulos de textos.
Exemplo 4: Cabealho
Visualizao do exemplo4
12
4 RGUAS E MARCADORES
4.1 Marcadores
Outros recursos importantes para a formatao de textos em HTML so o uso de rguas e
marcadores. Os marcadores podem ser usados de trs formas bsicas:
4.1.1 Lista com marcadores
Listas no-numeradas equivalentes s listas com marcadores do MS Word:
Funciona como nesta apostila, voc pode mudar a cor do marcador do mesmo modo que
muda a cor de uma fonte.
Primeiramente voc abre a lista com o tag <UL>. Depois, quando voc quiser incluir
outro item s usar o tag <LI> para cada item includo. No se esquea de fechar a lista:
</UL>.
O atributo TYPE, assume os valores CIRCLE, SQUARE e DISC (default).
Exemplo 5: Lista com marcadores:
13
Visualizao do exemplo 6
Visualizao do exemplo 7
4.2 Rguas
As rguas so usadas da seguinte forma:
Para a incluso de um rgua simples horizontal s usar o tag <HR>, se voc quiser
mudar a aparncia da rgua, use os seguintes atributos:
Para alterar a largura use o atributo WIDTH.
Por exemplo: <HR WIDTH=50%> cria uma rgua com largura de 50% da pgina.
14
A configurao padro cria uma rgua 3D, com o atributo NOSHADE voc cria uma
rgua em negrito.
Exemplo 8: Rgua
Visualizao exemplo 8
A configurao padro cria uma rgua centralizada. Se voc quiser que ela fique alinhada a
esquerda ou direita, use o atributo ALIGN igual a LEFT ou RIGHT.
Exemplo 9: Rguas alinhadas
Visualizao exemplo 9
15
5 INSERO DE IMAGENS
Este um exemplo inicial:
Exemplo 10: imagens
Visualizao exemplo 10
16
comportamento da
imagem. Uma parte deles opcional, com o tempo voc descobrir o que realmente importa
no tag . Veja os mais importantes:
SRC
SRC="local da imagem"
Este atributo especifica o local aonde est a imagem e o seu nome. Nas pginas pessoais
mais comum o uso de arquivos jpg ou gif, que voc pode obter facilmente na rede. Exemplo
de uso:
IMG
<IMG SRC="tecnologia.gif">
Este tag abrir o arquivo tecnologia.gif, localizado no mesmo diretrio em que est o
arquivo HTML que est sendo editado. Lembre-se que este o nico atributo que no pode
ser omitido neste tag.
Nota: guarde sempre as imagens de sua preferncia na mesma pasta em que esto os seus
arquivos de HTML para evitar problemas, ento s escrever o nome do arquivo no atributo
SRC para abrir a imagem.
Dica1: mantenha as imagens pequenas e use-as com critrio, voc deve usar os grficos
para dar impacto e interesse pgina, sem acrescentar muito volume (ou tempo de espera para
o carregamento dos arquivos).
Dica2: o alinhamento mais prtico quando feito com o uso de tabelas (que tambm
ser explicado).
ALT
ALT="legenda"
Fornece o texto que aparece no espao da imagem quando o browser no pode abrir a imagem
ou esta capacidade foi "desligada".
17
Visualizao exemplo 11
LEFT: a figura desenhada como uma imagem alinhada esquerda, com o texto fluindo ao
seu redor.
RIGHT: a figura desenhada como uma imagem alinhada direita.
TOP: a parte superior do texto ao redor alinhada com a parte superior da imagem.
MIDDLE: a linha de base do texto ao redor alinhada com a parte central da imagem.
BOTTOM: A linha de base do texto ao redor alinhada com a parte inferior da imagem.
Nota:
tag
<CENTER></CENTER> usado
tambm para imagens, se voc
quiser alinhar o texto e a figura em
relao a pgina. O tag imagem
deve estar dentro do tag CENTER.
18
HEIGHT=nmero e WIDTH=nmero
6 LINKS
Um dos tags mais importantes o que permite fazer links, ou seja, fazer referncia a um outro
recurso da WEB ou a um ponto especfico da sua pgina.
ncoras Externas - Ligao (link) entre um arquivo
hipertexto para outro arquivo.
19
20
Voc pode referenciar rea de texto para a qual voc quer pular.
No local que voc quer acessar digite:
<A NAME="nome da rea de texto">Texto que voc quer acessar</A>
Para ir at esta rea digite:
<A HREF="#nome-da-rea-de-texto">Link</A>
Se a rea estiver em outro arquivo digite:
<A HREF="outro.html#nome-da-rea-do-arquivo">Clique aqui</A>
Outros atributos podem ainda ser usados em tags <A>. Por exemplo:
TARGET=" ": Especifica o carregamento de um link em uma janela de destino. Ele usado
muitas vezes com o tag FRAME. Ele pode assumir diversos valores:
_top Carrega o link no corpo inteiro da janela
_blank Carrega o link em uma janela em branco
_parent Carrega o link no seu pai imediato
_self Carrega o link na mesma janela dele
window Define a janela de destino do link (ver em FRAMES).
6.2 Exerccio Links
Vianna Jnior
21
7 IFRAME
Outra maneira mais elegante de inserir outras pginas dentro de nossos documentos
HTML atravs do comando <iframe>. Nesse caso, devemos especificar o tamanho
do espao que dever ser aberto no documento para apresentao da outra pgina.
Abaixo um exemplo, onde <iframe> foi colocado de forma a abrir uma pgina
centralizada:
CENTER>
<iframe src="http://www.viannajr.edu.br" width=740 height=255> </iframe>
</CENTER>
7.1 Atributos
Valores :
LEFT Moldura esquerda e texto ao redor;
RIGHT Moldura direita e texto ao redor;
CENTER Moldura no centro e texto ao redor;
TOP Texto alinhado com a parte superior do frame;
MIDDLE Texto alinhado com o centro do frame;
BOTTOM Texto alinhado com a parte inferior do frame;
FRAMEBORDER = 1 | 0
MARGINHEIGHT = nmero | %
MARGINWIDTH = nmero | %
NAME = texto
NORESIZE
22
SRC = URL
8 FRAMES
Um recurso que nos permite sair do carter contnuo de um texto exibido na tela o frame,
onde podemos colocar em um lado da tela (ou em qualquer outra parte) um ndice para os
diversos assuntos que so abordados na pgina, sem que esse ndice desaparea quando
escolhemos algum de seus tpicos.
O frame o recurso que nos permite uma tela do navegador em vrias reas diferentes.
Cada frame tratado como uma pgina independente, pois para sua utilizao se faz
necessrio dois tipos de documentos .html: o frameset e o contedo.
O frameset um documento.html que o responsvel pelo layout da pgina com os
frames. nele que so especificados a quantidade, o tamanho e a posio.
O contedo o documento.html em que ficam contidas as informaes (texto, figuras,
etc.) a serem exibidas em seu respectivo frame ou em uma janela independente.
O frameset um documento que serve apenas como o layout da pgina, portanto, os tags
de formatao de texto, insero de figuras, tabelas e outros no so suportados neste
documento, incluindo o tag <BODY>. Mesmo assim o frameset permitido dentro de um
documento comum, mas no pode ficar entre os tags <BODY></BODY>, apesar disso
recomendamos que o frameset seja um documento totalmente separado, pois facilita a
construo da pgina e suas futuras correes e expanses.
Exemplo 12:
23
24
8.2 NOFRAME
<NOFRAME></NOFRAME>: especifica o contedo que ser mostrado no lugar das
frames caso o browser no possua suporte a frames. Os browsers que suportam este recurso
iro ignorar esta tag e no haver problemas com a exibio do documento.
8.3 O Tag FRAME
Define o frame dentro do frameset.
<FRAME SRC=URL NAME=TEXTO>
8.3.1 Atributos
25
8.5 Exerccio
Construa os arquivos para o documento mostrado a seguir:
9 TABELAS
Atravs das tags apropriadas podem ser colocados em forma de tabela textos formatados,
listas, links, imagens e campos de formulrio. Para que uma tabela seja exibida corretamente
deve-se tomar o cuidado de usar os comandos de fechamento dos tags </TH>, </TD> e
</TR>, pois caso no sejam usados diferentes browsers interpretaro, e portanto iro exibir, a
tabela de maneira diferente.
9.1 O TAG <TABLE></TABLE>
Estas tags definem que o contedo que est entre elas deve ser organizado na forma de tabela.
Para a formatao da tabela podem ser colocados junto da tag <TABLE> os seguintes
atributos abaixo, sendo n: tamanho em pixels e n%: tamanho em porcentagem relativo ao
tamanho da tabela.
26
CELLPADING=n: espaamento entre a borda de uma clula e seu contedo (padro: 1).
Depois de definida a estrutura da tabela podemos colocar as tags que posicionaro o contedo
da tabela. Abaixo mostramos somente o esqueleto de uma tabela com clulas de ttulo (tag
<TH></TH>) e 2 linhas e 2 colunas de dados. O contedo da tabela colocado entre o tags
<TD></TD>.
<TABLE> <!-- DEFINE A TABELA -->
<TR> <!-- ABRE UMA LINHA -->
<TH></TH> <!--INSERE UMA CLULA TTULO E SEU CONTEDO-->
<TH></TH> <!--INSERE UMA CLULA TTULO E SEU CONTEDO-->
</TR> <!-- FECHA A LINHA -->
<TR> <!-- ABRE UMA LINHA -->
<TD></TD> <!-- INSERE UMA CLULA E SEU CONTEDO -->
<TD></TD> <!-- INSERE UMA CLULA E SEU CONTEDO -->
</TR> <!-- FECHA A LINHA -->
<TR> <!-- ABRE UMA LINHA -->
<TD></TD> <!-- INSERE UMA CLULA E SEU CONTEDO -->
<TD></TD> <!-- INSERE UMA CLULA E SEU CONTEDO -->
</TR> <!-- FECHA A LINHA -->
</TABLE> <!-- FECHA A TABELA-->
9.2 O TAG <TR></TR>
Abertura de uma linha da tabela, possui as seguintes opes:
27
Exemplo 13
Vianna Jr.
VLINK="#000099"
ALINK="#FF0000">
<CENTER><IMG SRC="cdown.gif"><BR>
<FONT FACE="COMIC SANS MS">CURSO DE HTML E JAVASCRIPT
<HR WIDTH="100%"></CENTER>
<TABLE COLS=6 WIDTH="100%" >
<TR>
<TD ALIGN=CENTER>
<A HREF="HTTP://WWW.CAPES.GOV.BR" TARGET="_TOP">
28
</TD>
<TD ALIGN=CENTER>
<A HREF=" http://prouni-inscricao.mec.gov.br/prouni/ " TARGET="_TOP">
<IMG SRC="coffee.GIF" BORDER=0 HEIGHT=89 WIDTH=100></A>
</TD>
<TD ALIGN=CENTER>
<A HREF="HTTP://WWW.UFJF.BR" TARGET="_TOP">
<IMG SRC="FAX-ICON.GIF" BORDER=0 HEIGHT=70 WIDTH=70></A>
</TD>
<TD ALIGN=CENTER>
<A HREF=" http://www.capes.gov.br/capes/portal/ " TARGET="_TOP">
<IMG SRC="TEL-ICON.GIF" BORDER=0 HEIGHT=84 WIDTH=56></A>
</TD>
<TD ALIGN=CENTER>
<B><FONT FACE="CENTURY GOTHIC"><FONT SIZE=-1>
<AHREF=http://www.viannajr.edu.br/
TARGET="_TOP">Vianna</A></FONT></B>
</TD>
</TR>
</TABLE>
TELEFONE: <I>XXX-XXXX</I> / FAX: <I>331-7075</I>
<FONT SIZE=-2>
<BR><A HREF="ATUALIZACAO.HTML">LTIMA ATUALIZAO: <I>06/02/2007</I></A>
</FONT>
</BODY>
</HTML>
29
9.4 Exerccio
10 Formulrios
Um dos recursos mais fascinante da linguagem Html a possibilidade de criar formulrios
eletrnicos.
Usando um formulrio o usurio pode interagir com o servidor, enviando dados que sero
processados no servidor e posteriormente devolvidos ao cliente.
Esses comandos so os principais responsveis pela viabilizao da troca de informaes
entre o cliente e o servidor. Eles podem ser usados em qualquer tipo de atividade.
O elemento <FORM> delimita um formulrio e contm uma seqncia de elementos de
entrada e de formatao do documento.
<FORM ACTION="URL_de_script" METHOD=mtodo>...</FORM>
Os atributos de FORM que nos interessam agora so:
30
A forma mais simples de campo de entrada a marcao text. Este campo permite a
digitao de uma nica palavra ou linha de texto, e possui uma largura default de 20
caracteres.
b. Entrada de texto protegido, senha PASSWORD
Marcaes de entrada do tipo password so idnticas aos campos do tipo text, exceto pelo
fato de todos os caracteres serem exibidos como asteriscos ( *).
c. Entrada de vrias linhas de texto - TEXTAREA
31
COLS="" OBRIGATRIO
Se voc deseja que um texto seja exibido no campo textual ao abrir o formulrio,
simplesmente coloque este texto entre as marcaes de incio e fim da TEXTAREA.
10.2 Menus
a. Menus com opes - SELECT
b. Listas paginveis - SELECT com SIZE
a. Menus com opes - SELECT
MULTIPLE OPCIONAL
Especifica que mltiplas opes podem ser selecionadas, em oposio ao exemplo
anterior do SELECT, onde apenas uma opo pode ser selecionada no menu.
SIZE - OBRIGATRIO
Nmero de linhas (opes de menu) exibidas na janela.
OPTION - OBRIGATRIO
Especifica uma opo da lista.
VALUE - OPCIONAL
32
SELECTED OPCIONAL
So objetos que permitem ao usurio a escolha de apenas uma alternativa, diante de uma srie
de opes.
Suas principais propriedades so: name, value e checked.
name : Especifica o nome do objeto. Para caracterizar uma mesma srie de opes, todos
os objetos desta srie tm que ter o mesmo "name".
value : Especifica o valor que ser enviado ao "server" se o objeto estiver ligado
(checked). Caso seja omitido, ser enviado o valor default "on" . Esta propriedade tambm
serve para ativar comandos lgicos, testando-se a condio de "checked".
Em vez do usurio corrigir cada INPUT, um boto RESET pode ser utilizado para
restaurar todos os campos a seus valores default, como se nenhuma informao houvesse sido
33
digitada.
E finalmente, o FORM precisa de uma opo para enviar toda a informao digitada para
o servidor, uma vez que o usurio terminou de preencher os todos os campos de entrada. O
boto SUBMIT transfere toda a informao para a URL especificada no elemento ACTION.
Exemplo 14: Cadastro de informaes
34
BIBLIOGRAFIA
1. OLIVEIRO, Carlos A. J. HTML 4.0 - Orientado por projeto.. 2 ed. Ed. rica, So
Paulo 2001.
2. PRATES, Rubens. HTML - Guia de consulta rpida. So Paulo, 1999, Ed. Novatec.
3. PROFFITT, Brian e Zupan, Ann. XHTM Desenvolvimento Web. Makron Books,
So Paulo, 2001.
4. TITTEL, Ed et al. HTML 4 para Dummies. Rio de Janeiro, 1998. Ed. Campus Ltda.
35