Beruflich Dokumente
Kultur Dokumente
Índice
INTRODUÇÃO: ________________________________________________________________ 2
DESENVOLVENDO UMA PÁGINA WEB _________________________________________ 7
TÍTULOS______________________________________________________________________ 9
CABEÇALHOS: ______________________________________________________________ 10
PARÁGRAFOS _______________________________________________________________ 11
DEFININDO FONTES__________________________________________________________ 12
ESTILOS DE TEXTO __________________________________________________________ 13
ACENTOS E CARACTERES ESPECIAIS ________________________________________ 14
QUEBRAS DE LINHA _________________________________________________________ 15
INFORMAÇÕES SOBRE A PÁGINA ____________________________________________ 16
INSERINDO COMENTÁRIOS EM SUA PÁGINA __________________________________ 17
LINHAS HORIZONTAIS _______________________________________________________ 18
CONTROLE DE CORES E GRÁFICOS DE FUNDO _______________________________ 19
ALINHANDO ELEMENTOS DE UMA PÁGINA ___________________________________ 22
LISTAS ______________________________________________________________________ 24
TEXTO ANIMADO ____________________________________________________________ 28
ENDEREÇOS_________________________________________________________________ 30
INTERLIGANDO DOCUMENTOS – LINKS _______________________________________ 31
IMAGENS GRÁFICAS _________________________________________________________ 36
INSERINDO SOM _____________________________________________________________ 40
TABELAS ____________________________________________________________________ 42
FRAMES _____________________________________________________________________ 56
FORMULÁRIOS ______________________________________________________________ 60
UPLOAD DE ARQUIVOS ______________________________________________________ 64
DICAS _______________________________________________________________________ 67
INTRODUÇÃO:
WEB
Sua idéia inicial foi concebida em 1989, nos laboratórios de CERN (European
Laboratory of Particle physics), na Suíça. Tim Berners-Lee, seu criador, conheceu a
linguagem com o propósito de interligar os computadores do laboratório e instituições de
pesquisa coligadas a ele. O objetivo era Ter uma linguagem que exibia documentos
2 Centro de Informática - Seção de Projetos Científicos
Apostila de HTML Básico - http://www.ufpel.tche.br/ci/spc
UNIVERSIDADE FEDERAL DE PELOTAS
HIPERTEXTO
O termo hipertexto surgiu na década de 1960. Significa um texto não-linear, com
mais de uma dimensão enquanto que um texto é uma coleção de informações organizada
de forma linear, possuindo apenas uma dimensão, a qual deve ser apresentada e
recuperada de forma seqüencial.
No hipertexto, a informação está organizada em uma rede, cujos nós contém
informação e estão relacionados por “elos”. Cada elo está, em geral associado
diretamente a uma âncora, que pode ser um botão ou ícone, representando a origem de
um elo, e ao ativá-la ocorre um salto para um outro nó. Quanto a apresentação as
âncoras aparecem em geral realçadas, ou em cor diferente, na informação que está
sendo apresentada na tela.
Através de ligações(links), o usuário pode pesquisar apenas os tópicos que lhe
interessam e ignorar os que não lhe convém. O hipertexto é muito utilizado hoje em dia na
multimídia em geral e em páginas na Web.
MULTIMÍDIA
Refere-se a diversos tipos de informação que podem ser editadas e armazenadas
em tipos específicos de dispositivos. É as apresentações organizadas de som, imagens
gráficas estáticas, animações, textos e vídeos em movimento. Esse tipo de informação
tem por finalidade esclarecer assuntos, indicar tendências, informar, formar, demonstrar
ou simplesmente divertir.
HIPERMÍDIA
É definida pela associação do hipertexto e da multimídia, a qual manipula um
conjunto de informações pertencendo a diferentes tipos de mídia(textos, imagens, sons,
animações e gráficos), podendo estas informações serem recuperadas de forma não-
linear através de diversos caminhos de acesso disponíveis. Em outras palavras, a
hipermídia é simplesmente uma extensão do hipertexto que incorpora outros tipos de
dados além do texto.
simples de usar. Você poderá trocar skins do Neoplanet e usará o mecanismo do seu
Internet Explorer 3.0, 4.0, 5.0 ou 5.5. Esta versão já vem com um programa para
download e muito mais. O AWE - Adonay Web Explorer é atualmente o web browser com
maior número de recursos e funções. Multinavegação, bloqueio de janelas PopUps,
tradutor web inglês / português, zoom, notícias em tempo real, muda cor / imagem de
fundo e fontes das páginas, mostra todos os links relacionados,
navega em tela cheia, suporta Java, Flash e conexões seguras.
É importante que os usuários deve sempre usar a versão
mais recente de seu navegador para estar sempre atualizado
com os novos plugins disponíveis para melhor navegabilidade pela Web.
Estes navegadores relacionados são totalmente grátis, e podem
ser adquiridos em suas empresas ou em inúmeros locais disponíveis
para download na Internet, como
o site SuperDownloads no Brasil e o
Download.com internacional. O melhor lugar é o
seu próprio provedor de acesso.
TAGs
Os comandos HTML são chamados de TAGs, compreendem de marcas padrões que
são utilizadas para fazer indicações a um browsers.
Assim como em outras linguagens, os comandos têm uma sintaxe própria, e seguem
algumas regras:
#"As TAGs aparecem sempre entre os sinais de “menor que”(<) e “maior que”(>);
#"Geralmente são utilizadas aos pares, sendo que a TAG de finalização de um
comando qualquer é finalizada com a precedência de uma barra (/).
Em geral:
<nome da TAG> t e x t o </nome da TAG>
onde:
<nome da TAG>: indica o início da TAG
</nome da TAG>: indica o fim da TAG
Para criar uma página Web, você pode utilizar qualquer editor de texto simples,
até mesmo o bloco de notas do Windows. Porém é mais prático utilizar um editor de
HTML, que escrevem parte dos comandos para você.
Uma página Web criada em HTML, possui três partes básicas: estrutura
principal, um cabeçalho e um corpo de página.
Onde:
Exemplo:
<HTML>
<HEAD>
<TITLE>
CURSO DE HTML – PÁGINA BÁSICA
</TITLE>
</HEAD>
<BODY>
DESENVOLVENDO PÁGINAS DE
INTERNET
</BODY>
</HTML>
TÍTULOS
Exemplo:
<HTML>
<HEAD>
<TITLE> Curso de HTML </TITLE>
</HEAD>
<BODY>
<H2> Visualize a parte superior da janela do navegador </H2>
</BODY>
</HTML>
CABEÇALHOS:
São linhas do documento que são exibidas no browser com letras diferentes do
restante do texto chamando a atenção de uma nova seção ou tópico. Sempre que se
definir um novo cabeçalho, uma nova linha é inserida em branco após a sua linha.
Ao definir o tamanho de um cabeçalho, não se está definindo o tamanho da
letra, apenas é indicado ao navegador de cada usuário que deve ser visualicado com
maior ou menor destaque que o resto do texto.
A TAG <H>
Esta possui seis tamanhos os modelos diferentes. O tamanho ou corpo dos
caracteres vai do nível 6 (menor nível) ao 1 (maior nível).
Sintaxe de comando:
<Hn> TEXTO DO CABEÇALHO </Hn>
#"n varia de 1 a 6
#"H1 é o maior corpo
#"H6 é o menor corpo
Exemplo:
cabeçalhos.htm
<HTML>
<HEAD>
<TITLE> Cabeçalhos
</TITLE>
</HEAD>
<BODY>
<H1>Texto formatado com
H1</H1>
<H2>Texto formatado com
H2</H2>
<H3>Texto formatado com
H3</H3>
<H4>Texto formatado com
H4</H4>
<H5>Texto formatado com
H5</H5>
<H6>Texto formatado com
H6</H6>
</BODY>
</HTML>
PARÁGRAFOS
A TAG <P>
A TAG responsável pela quebra de parágrafos é a <P> que finaliza o parágrafo e
insere automaticamente a um alinha em branco entre parágrafos.
Também responsável pelo alinhamento de parágrafos.
Sintaxe de comando:
<P ALIGN=”posição”> Texto do parágrafo.
Exemplo:
Nome do arquivo: parágrafos.htm
<HTML>
<HEAD>
<TITLE> Alinhamento de Parágrafos </TITLE>
</HEAD>
<BODY>
<P>Este parágrafo utiliza o alinhamento padrão dos navegadores de Internet (esquerdo).
<P ALIGN=”center”> Este parágrafo tem o alinhamento centralizado.
<P ALIGN=”right”> Este parágrafo tem o alinhamento a direita.
</BODY>
</HTML>
DEFININDO FONTES
A TAG <FONT>
Permite que você insira em sua página um texto com fontes de tamanhos, cores
e tipos diferentes.
Comando:
<FONT SIZE=”n” FACE=”nome” COLOR=”cor”> texto </FONT>
Onde:
$" SIZE=”n”: n varia de 1 a 7 e 3 é o valor padrão da maioria dos navegadores;
$" FACE=”nome”: nome da fonte a ser utilizada;
$" COLOR=”cor”: cor da fonte definida em hexadecimal, ou através de um nome pré-
definido de cores.
Exemplo:
Formatando_fontes.htm
Observações:
Caso a fonte face indicada para sua
página não esteja disponível para o usuário
que visitar a sua página, a fonte utilizada
então será a padrão do navegador utilizado
pelo visitante;
Pode-se definir mais de uma fonte
face, caso a primeira não esteja instalada no
sistema do usuário, o browser reconhece a
próxima FACE definida;
Outros exemplos:
#"fontes_especiais.htm;
#"fontes_especiais2.htm;
ESTILOS DE TEXTO
Como nos editores de texto, alem dos tamanhos das fontes, você pode modificar
o estilo de texto. Pode-se atribuir o negrito, itálico, sublinhado entre outros, abaixo
relacionados:
Tabela de estilos:
Exemplo:
Exemplo:
<HTML>
<HEAD>
<TITLE>Alguns acentos e
caracteres especiais </TITLE>
</HEAD>
<BODY>
à<br>ã <br>â
<br>ä <br>é
<br>è <br>ê
<br>í <br>ì
<br>õ
</BODY>
</HTML>
QUEBRAS DE LINHA
A TAG <BR>
Faz uma quebra de linha sem acrescentar espaços extras entre linhas. Finaliza a
linha de texto e insere automaticamente uma outra linha em branco.
Não necessita ser finalizada com </BR>
Exemplo:
<HTML>
<HEAD>
<TITLE> Utilizando a quebra de linhas com a TAG <BR> </TITLE>
</HEAD>
<BODY>
Este texto está
utilizando a TAG BR no
final de cada
linha<BR><BR>
Você pode
utilizar<BR> a TAG
BR<BR> toda vez
que<BR> você quiser
passar o texto<BR> para a
próxima
linha.<BR><BR>O
resultado é simples.
</BODY>
</HTML>
A TAG <META>
Proporcionam informações sobre a página, para o utilizador e para os motores de
pesquisa. Estes tags só necessitam e devem estar presentes na primeira página do site
(normalmente no index.html), porque só essa é pesquisada pelos search engines.
Existem dois tipos de motores de pesquisa ou search engines: os indexes e os
spiders. Os primeiros são atualizados manualmente e os spiders são automáticos. Deste
modo, no Yahoo!, que é um index, para que um site seja listado, tem que se preencher
um formulário, enviá-lo, e esperar por uma resposta de um responsável do yahoo a
confirmar que o site foi adicionado à base de dados. Em contrapartida, no AltaVista, que
se trata de um spider, para adicionar um site, só se tem de introduzir o url na secção "add
url" e esperar por uma resposta automática e quase imediata do robot, a confirmar que o
endereço existe e que os <META> tags foram localizados.
Os <META> tags encontram-se geralmente dentro do <HEAD> </HEAD> e depois
do <TITLE> </TITLE>.
Os atributos de <META>:
CONTENT:
1. Corresponde a informação disponível na TAG <META>.
NAME:
1. O atributo NAME indica o tipo de informação que o <META> tag apresenta. Pode
ter vários valores, tais como:
$" Keywords: indica as palavras chaves da página.
Exemplo: <META NAME="keywords" CONTENT="HTML, Tags, Atributos">
$" Description: indica uma breve descrição da página.
Exemplo: <META NAME="description" CONTENT="Uma página sobre HTML">
$" Author: indica o autor da página.
Exemplo: <META NAME="author" CONTENT="Gabriel Augusto">
Visualizando o
código fonte da
página do UOL,
observe as
informações sobre a
página neste ponto.
Sintaxe de Comando:
<!—Texto do parágrafo -->
Exemplo:
<HTML>
<HEAD>
<TITLE> Página com comentários </TITLE>
</HEAD>
<BODY>
Esta página contém diversos comentários
<!--Um comentário não é exibido na tela pelo navegador-->
<!--Um comentário é como um lembrete-->
<!--Pode ser colocado em qualquer ponto dentro do HTML-->
</BODY>
</HTML>
Observe que em
determinados pontos do
código fonte, são inseridos
comentários para própria
orientação do
programador da página
LINHAS HORIZONTAIS
A TAG <HR>
Insere linhas horizontais no navegador. Este recurso pode ser utilizado para dividir
a sua página chamando a atenção para algum tópico específico.
Sintaxe de comando:
<HR WIDHT=”N%” ALIGN=”Posição” SIZE=”n” COLOR = #cor NOSHADE>
Exemplo:
<BODY bgcolor="#D6E4ED">
</BODY>
Comando:
<BODY BGCOLOR=”#RRGGBB”>
Exemplo:
<body bgcolor="#FFFFCC" text="#000033">
<H4 align="center">COR DE FUNDO<br>
BGCOLOR="#cor"</H4>
Com este atributo você controla a cor
de fundo das páginas.<br><br>
Comando:<br>
<BODY BGCOLOR="#FFFFCC"
TEXT="#000033">
</body>
</html>
Aplica uma imagem como plano de fundo e que ocupará toda a área do fundo da
tela do navegador, é aplicada em seqüência, uma ao lado da outra.
Deve ser inseridos a marcação <BODY> e especificar a URL da uma imagem
que será utilizada na página.
Comando:
<BODY BACKGROUND=”URL”> Corpo da Página </BODY>
Exemplo:
<body background=
"../imagens/fundo1.jpg">
<h3 align="center">IMAGEM DE DE
FUNDO<br>
BACKGROUND="endereço&
quot;</h3>
Com este atributo você insere
imagens de fundo nas suas
páginas. <br><br>Comando:<br>
<BODY
BACKGROUND="../imagens/fundo1
.jpg">
</body>
Nota:
É importante ter cuidado quando aplicar elementos de fundo para que não seja
prejudicada a leitura do texto.
Sempre vale a pena visitar outras páginas que utilizam este recurso para
recolher boas idéias.
Alguns usuários de internet navegam sem a utilização de imagens para viabilizar
uma melhor velocidade de acesso a WEB. em vista disso é interessante atribuir junto
ao <BODY> uma cor de fundo (BGCOLOR) .
#"Texto - TEXT:
Utilizado para controlar a cor do texto normal em uma página
TEXT=”#RRGGBB”= é a cor do texto, o padrão é preto;
Sintaxe de Comando:
<BODY TEXT=”#RRGGBB”> Corpo da Página </BODY>
Exemplo:
<body bgcolor="#FFFFFF"
text="#333333">
<div align="center">
<h4>CORES DE LETRAS DE TEXTO
NORMAL<br>
TEXT="#cor"</h4></div>
Com este atributo, você controla
a cor do texto normal em uma
página.<br>
Neste exemplo, estamos utilizando a
cor indicada conforme o exemplo a
seguir.<br><br>Comando:<br>
<BODY
BGCOLOR="#FFFFFF"
TEXT="#333333">
</body>
Comando:
<BODY LINK=”#RRGGBB” VLINK=”#RRGGBB” ALINK=”#RRGGBB”>
Exemplo:
<BODY BGCOLOR="#FFFFE0"
TEXT="#FF6347" LINK="#ADFF2F"
VLINK="#7FFFD4" ALINK="#0000CD">
<div align="center">
<h1>EXEMPLO DE CORES<h1> <BR>
<h3>O fundo da página está com uma cor
especial: Lightyellow - RGB:FFFFE0</h3><BR>
<h3>A cor do texto é: Tomato -
RGB:FF6347</h3> <BR>
LINK´s: Greenyellow - RGB:ADFF2F<BR>
VLINK´s: Aquamarine - RGB:7FFFD4<BR>
ALINK´s: Mediumblue - RGB:0000CD<BR>
</div>
</BODY>
A TAG <DIV>
Permite que você alinhe horizontalmente qualquer elemento em sua página.
Esta difere da TAG <CENTER> por permitir alinhamento centralizado. O Alinhamento
pode ser left, center ou right.
Comando:
<DIV ALIGN=”posição”>Elementos a serem alinhados</DIV>
Onde:
posição pode ser:
#"left: alinhamento a esquerda;
#"center: centralizado;
#"right: alinhamento a direita
Exemplo:
<HTML>
<HEAD>
<TITLE> Alinhando Elementos com a
TAG DIV </TITLE>
</HEAD>
<BODY>
<DIV ALIGN="CENTER">Usando a TAG
DIV:</DIV>
<BR>
<DIV ALIGN=”RIGHT”>
<P>Usando a TAG DIV você pode alinhar
o seu texto sem problemas.
<P>Pode utilizar o alinhamento a direita,
que alinha o seu texto na margem direita
da tela. Como um texto criado em um
editor de textos pra ser impressos em
uma página.
<P>Com a TAG DIV você pode aproveitar
o mesmo alinhamento para vários
parágrafos.
</DIV>
</BODY>
</HTML>
A TAG <CENTER>
Permite centralizar horizontalmente qualquer elemento em sua página. O efeito é
exatamente o mesmo da TAG <DIV ALIGN=”CENTER”>, porém a TAG CENTER não é
reconhecida em todos os navegadores.
Comando:
<CENTER>Elementos a serem centralizados</CENTER>
22 Centro de Informática - Seção de Projetos Científicos
Apostila de HTML Básico - http://www.ufpel.tche.br/ci/spc
UNIVERSIDADE FEDERAL DE PELOTAS
Exemplo:
<HTML>
<HEAD>
<TITLE>Centralizando com a TAG CENTER </TITLE>
</HEAD>
<BODY>
<CENTER>
TAG CENTER
</CENTER>
<br>
<p align="justify">Centralizar os
elementos de sua página em
relação ao navegador
Deve ser iniciada <center>e
finalizada </center>, para não
centralizar todos os elementos da
página. Você pode
utilizar.</p>
<b>EM IMAGENS:</b>
<div align="center"> <b><CENTER>
</b><br>
<img
src="../imagens/dexter_laboratory.jpg"
width="185" height="154"> <br>
</CENTER></div><BR>
<b>EM TEXTOS:</b><br>
<b><CENTER> </b><br>
<CENTER>Permite centralizar
horizontalmente qualquer elemento em
sua página. O efeito
é exatamente o mesmo da TAG <DIV
ALIGN="center">
ELEMENTO A SER
CENTRALIZADO </DIV>, porém a
TAG CENTER não é reconhecida em
todos os navegadores.</center>
<b></CENTER></b><br>
</BODY>
</HTML>
LISTAS
Uma boa forma de organizar as páginas WEB. Podem servir como resumos ou
índices de todo o site, contendo links para as outras páginas criadas por você ou outras
pessoas.
TIPOS DE LISTAS:
#"Listas não numeradas;
#"Listas numeradas;
#"Listas de definições;
#"Listas intercaladas.
Comando:
<UL TYPE=”formato”>
<LI> Tópico 1
<LI> Tópico 2
<LI> Tópico 3
</UL>
Onde:
1. <UL>: início da lista pontuada;
2. TYPE=”formato”: o formato do marcador pode ser:
$" disc: o marcador é um ponto (padrão utilizado pelos navegadores, não
precisa indicar)
$" square: o marcador é um quadrado
$" circle: o marcador é um círculo
3. <LI>: tópicos da lista, não e necessário encerrar com a TAG </LI>;
4. </UL>: fim da lista pontuada.
Exemplo: listas_nao_numeradas.htm
<HTML>
<HEAD>
<TITLE> Listas Não Numeradas
</TITLE>
</HEAD>
<BODY>
<H3>Listas Não Numeradas</H3>
<UL TYPE="disc">
<LI> TYPE="disc"
<LI> Tópico um;
<LI> Tópico dois;
<LI> Tópico três.
</UL>
<UL TYPE="square">
<LI> TYPE="square"
<LI> Tópico um;
<LI> Tópico dois;
<LI> Tópico três.
</UL>
<UL TYPE="circle">
<LI> TYPE="circle"
<LI> Tópico um;
<LI> Tópico dois;
<LI> Tópico três.
</UL>
</BODY>
</HTML>
#"Listas Numeradas:
A TAG <OL>:
Permite inserir em sua página uma lista numérica ou alfabética, com valor pré-definido ou
não
Sintaxe de comando:
<OL TYPE=”formato” START=”n”><LI>Tópico 1<LI>Tópico 2<LI>Tópico n</OL>
Onde:
1. <OL>: início da lista numerada;
2. TYPE=”formato”: o formato da numeração pode ser:
$"1: lista numérica(não é necessário ser definido);
$"A: lista alfabética com letras maiúsculas;
$"a: lista alfabética com letras minúsculas;
$"I: lista numérica com números romanos maiúsculos;
$"i: lista numérica com números romanos minúsculos.
3. START=”n”: o valor inicial da lista numerada;
4. <LI>: tópicos da lista;
5. </OL>: fim da lista numerada.
Exemplo: listas_numeradas.htm
<HTML>
<HEAD>
<TITLE> Listas Numeradas
</TITLE>
</HEAD>
<BODY>
<H3 align="center">Listas Ordenadas -
Numeradas</H3>
<H4>Lista Numerada Padrão:</H4>
<OL>
<LI> Tópico um;
<LI> Tópico dois;
<LI> Tópico três.
</OL>
<H5>Lista Numerada Padrão com
START="10":</H5>
<OL START="10">
<LI> Tópico um;
<LI> Tópico dois;
<LI> Tópico três.
</OL>
<H5>Lista Alfabética com Letras Maiúsculas:</H5>
<OL TYPE="A">
<LI> Tópico um;
<LI> Tópico dois;
<LI> Tópico três.
</OL>
</OL>
</BODY>
</HTML>
#"Listas de Definições:
A TAG <DL>:
São diferentes das outras listas, pois cada item de cada lista possui dois componentes:
um tópico e a descrição do tópico.
Sintaxe de comando:
<DL><DT> Tópico 1<DD> Descrição do tópico 1 <DT> Tópico n <DD> Descrição do
Tópico n </DL>
Onde:
1. <DL>: início da lista descritiva;
2. <DT>: tópico da lista descritiva;
$" não há limite para o número de tópicos;
$" não é necessário a TAG </DT>;
3. <DD>: descrição da lista descritiva:
$" para cada TAG <DT> existe uma TAG <DD>;
$" não é necessário a TAG </DD>;
4. </DL>: fim da lista descritiva.
Exemplo:
<HTML>
<HEAD>
<TITLE> Listas Descritivas
</TITLE>
</HEAD>
<BODY>
<H3><I>Exemplo de Listas
Descritivas</I></H3>
<DL>
<DT><B>Listas Não Ordenadas:</B>
<DD>As listas não ordenadas ou pontuadas
inserem <I>marcadores</I> na
frente de cada item.
<DT><B>Listas Ordenadas:</B>
<DD>As listas ordenadas ou numeradas
inserem <I>números</I> ou 
<I>letras</I>  na frente de cada item.
<DT><B>Listas Descritivas:</B>
<DD>As listas descritivas ou de grossário
são diferentes das outras listas. Cada item
de uma lista descritiva tem dois componetes:
um <I>tópico</I> e uma <I>descrição de
tópico</I>.
</DL>
</BODY>
</HTML>
#"Listas Intercaladas:
Pode ser utilizada para você criar listas hierárquicas, mesclando listas
ordenadas e não numeradas. É utilizado para melhor organizar a estrutura de tópicos;
utilizados como links, mapa de sites.
TEXTO ANIMADO
Comando:
<MARQUEE> Texto ou imagem </MARQUEE>
Atributos:
1. <MARQUEE>:
$" abertura da TAG de movimento;
2. ALIGN=”posição”:
Posição em relação ao browser, que pode ser:
$" top: alinha o texto com o topo do marquee;
$" middle: alinha o texto com o centro do marquee;
$" bottom: alinha o texto com a base do marquee;
3. BEHAVIOR=”controle”:
Controla o comportamento do texto dentro do marquee, que pode ser:
$" scroll: faz que o texto entre por um dos cantos e saia por outro,
$" slide: o texto entra por um dos cantos e do marquee e para ao chegar ao
canto oposto;
$" alternate: o texto fica passando de um canto para o outro dentro do
marquee;
4. BGCOLOR=”#000000”:
Muda a cor do fundo do marquee, valores em hexadecimais, ver tabela de cores
anexas a esta apostila;
5. DIRECTION=”direção”:
Define a direção no qual o texto se move, pode ser:
$" left: faz o texto correr para a esquerda;
$" right: faz o texto correr para a direita;
6. HEIGHT=”altura”:
Define a altura do marquee, sendo que n é um valor em pixel ou um porcentual da
altura da janela;
7. WIDTH=”n ou n%”:
Define a largura do marquee, sendo que n é um valor em pixel ou um porcentual
da altura da janela;
8. HSPACE=”n”:
Define margens a esquerda e a direita do marquee, sendo que n é um valor em pixels;
9. VSPACE=”n”:
Define margens acima e abaixo do marquee, sendo que n é um valor em pixels;
10. LOOP=”n”:
Define quantas vezes o texto irá cruzar o marquee, sendo que n é o número de
vezes. Se n for igual a 1 ou infinite, ele irá passar pelo marquee infinitamente;
11. SCROLLAMOUNT=”n”:
28 Centro de Informática - Seção de Projetos Científicos
Apostila de HTML Básico - http://www.ufpel.tche.br/ci/spc
UNIVERSIDADE FEDERAL DE PELOTAS
Visualizando exemplo:
Para visualizar o exemplo e necessário estar com o navegador aberto para
execução da animação.
ENDEREÇOS
A TAG <ADDRESS>
Comando:
Exemplo:
<html>
<head>
<title>ADDRESS</title>
</head>
<body bgcolor="#FFFFFF">
<div align="left">
<img src="../imagens/ufpel_pagina.jpg"
width="307" height="254"><br>
<ADDRESS> <br>
</div>
<ADDRESS>
---------------------------------------------------<br>
UNIVERSIDADE FEDERAL DE
PELOTAS<br>
Campus Universitário, s/n° -
Caixa Postal 354<br>
CEP 96010-900 - Pelotas, RS - BRASIL<br>
PABX: (53) 275-7000 - FAX: (53) 275-
9023<br>
CNPJ: 92.242.080/0001-00 <br>
--------------------------------------------------- <br>
</ADDRESS>
</ADDRESS>
</body>
</html>
Sintaxe de comando:
<A HREF=”nome do arquivo.extensão”> Texto ou imagem </A>
Onde:
$" A: abertura da TAG de link;
$" HREF=”nome do arquivo.extensão”: deve ser informado o nome completo do
arquivo que será acessado;
$" Texto ou imagem: que servirá como link;
$" /A: encerra a TAG de link.
Observação:
Não deixar espaço em branco entre <A> e </A>.
Exemplo:
Para criar links para uma página localizada em outros diretórios é necessário
indicar o caminho completo do arquivo. Para a WEB isto tem uma forma um pouco
diferente do Windows e do DOS, veja:
$" A barra utilizada para separar diretórios é a barra convencional (/);
$" O ponto de partida para localizar um arquivo em outro diretório é o atual;
$" Para baixar um nível deve utilizar os sinais “ ../ ”;
Exemplo:
Neste exemplo foi criado um link na
página index.htm que acessa a página
primeira.htm, localizada dentro da pasta
página.
Comando:
<A HREF=”protocolo://servidor.arquivo”> Texto ou imagem </A>.
Onde:
protocolo: é o tipo de servidor que está sendo acessado;
Os mais utilizados são:
#"http: Hiper Text Transfer Protocol, é um servidor da WWW;
#"ftp: File Tranfer Protocol, é um serviço para a troca de arquivos, programas entre
um servidor e um computador remoto;
o servidor: é o computador que contém a página;
o arquivo: é o nome do arquivo (diretório e nome do arquivo).
O protocolo do servidor deve ser seguido:
o Dos símbolos “://”;
o Do endereço do computador remoto.
Exemplo:
<body bgcolor="#FFFFFF">
<div align="center">
<h3>LINK PARA OUTROS
SERVIDORES</h3>
<br>
<A
HREF="http://www.ufpel.tche.br&
quot;><a
href="http://www.ufpel.tche.br"><img
src="../imagens/simbolo_ufpel.gif"
width="110" height="108" border="0"
align="middle"></a>
</A> </div>
</body>
ÂNCORAS:
Para ter links em uma mesma página, deve-se criar uma âncora no início de
cada seção que será acessada por um link. É um ponto de referência ou endereço que
será acessado por um link. Utilizada para marcar o início de cada seção da página. O
nome da âncora será a referência utilizada pelo link que a acessará.
Para criar ou acessar uma âncora deve-se utilizar a TAG de vínculo, com
atributos diferenciados.
Criando Âncoras:
Com este atributo você escolhe um local da página para inserir uma âncora.
Esta TAG fica invisível ao usuário. Pode ser visualizada no código fonte.
Normalmente utilizado em páginas com mais de uma tela do navegador e
inserida no topo do documento
Linkando Âncoras:
Com esta TAG você irá inserir uma imagem ou texto que indica ao usuário que
ao clicar neste tipo determinado de link ele irá para o local onde foi inserida uma
âncora.
IMPORTANTE:
O símbolo # indica ao navegador que o link se encontra na mesma página. É
indispensável o uso de "#”.
Sintaxe de comando:
<A HREF=”mailto:endereço”> Texto ou imagem </A>
$" mailto: informa ao browser que o link é para um endereço eletrônico
$" endereço: é o endereço de e-mail
Exemplo:
<body bgcolor="#FFFFCC">
INSERINDO
LINK PARA O SEU E-MAIL<br>
<A
HREF="mailto:seu_e_mail@domínio
"><a href="mailto:seu_e_mail@dom%
EDnio">Clique aqui<br> <img
src="../imagens/email1.gif" width="90" height="90"
align="middle" border="0"><br>
para enviar<br>um e-mail</a></A><br>
Você pode inserir imagem, texto ou os dois
conforme o exemplo para indicar seu e-mail.
</div></body>
Download em
andamento.
Processo de cópia do
arquivo e salvamento
para o local de destino
pré-determinado
Download concluído:
- Abrir: executa o arquivo
do download;
- Abrir pasta: pasta onde
foi salvo o arquivo;
- Fechar: fecha a janela
de download.
IMAGENS GRÁFICAS
Atualmente a maioria dos browsers exibe imagens, porém não é qualquer tipo de
arquivo imagem que deve ser inserido em HTML. Os formatos mais aceitos na WEB
são GIF e JPEG.
GIF e JPG
O formato GIF (Grafics Interchange Format) pode ser utilizado em diferentes
plataformas de hardware (PC e Macintosh), suporta no máximo 256 cores e gera
arquivos menores , com extensão .gif. este formato é muito utilizado para desenhos e
gráficos.
O formato JPEG (Joint Photographic Engineering Group) suporta 16 milhões de
cores e pode reduzir o tamanho de uma imagem até dez vezes. Gera arquivos com a
extensão .jpg e .jpeg. muito utilizado para fotos.
Utilizar imagens de dimensões pequenas, gravadas no formato JPEG (no caso
de fotografias) ou GIF (melhor para desenhos, em preto-e-branco ou com poucas
cores). Tenha cuidado com as GIFs animadas; elas podem ocupar bastante espaço em
disco, dependendo do número de cores e quadros de animação. Estes cuidados
também farão a sua página carregar mais rapidamente, tornando a visitação mais
agradável.
Onde:
SRC=”nome do arquivo.extensão”: é o nome do arquivo e sua extensão;
Exemplo:
imagens_graficas.htm
<HTML>
<HEAD>
<TITLE> Imagens Gráficas
</TITLE>
</HEAD>
<BODY>
<center>
<H2>INSERINDO UMA IMAGEN</H2>
<BR>
<h3>CANCUN BEACH</h3><BR>
<img src="../imagens/cancun_beach.jpg">
</center>
</BODY>
</HTML>
DIMENSIONANDO AS IMAGENS:
O tamanho das imagens exibido pelo navegador pode ser alterado. Recurso este
muito utilizado para a criação de trumbnails, que são pequenas imagens que servem
como links para imagens maiores. O tamanho do arquivo da imagem não é alterado.
Podemos redimensionar a figura através dos atributos a seguir:
1. WIDTH=”n”:
Altera a largura da imagem. Valores dados em pixels.
2. HEIGHT=”n”’:
Altera a altura da imagem. Valores dados em pixels.
Exemplo:
<HTML>
<HEAD>
<TITLE> Redimensionando Imagens Gráficas
</TITLE>
</HEAD>
<BODY>
<H2 align="center">Redimensionando<br>
Imagens Gráficas</H2>
<CENTER>
<H3>Tamanho original da paisagem: 300 x 197 pixels -
20k</H3>
<p><img src="../imagens/paisagem.jpg"> <BR>
widht="240" height="137"<br>
<IMG SRC="../imagens/paisagem.jpg" widht="240"
height="137" ALIGN="middle"><BR>
widht="160" height="57"<br>
<IMG SRC="../imagens/paisagem.jpg" widht="160"
height="57" ALIGN="middle">
</p>
</CENTER>
</BODY>
</HTML>
Nota:
As figuras redimensionadas podem perder um pouco a sua definição.
ALINHAMENTO DA IMAGEM:
ALIGN=”posição”:
Em relação ao navegador:
$" Right: alinhamento a direita;
$" Left: alinhamento a esquerda(padrão dos navegadores);
Exemplo:
imagens_alinhadaas_navegador.htm
<HTML>
<HEAD>
<TITLE> Imagens Alinhadas em relação ao navegador
</TITLE>
</HEAD>
<BODY>
<h3 align="center"> Imagens Alinhadas em Relação ao
Navegador </h3>
<BR>
Alinhamento a direita: <img
src="../imagens/dexter_laboratory2.jpg" align="right"
width="90" height="90">
<BR>
Alinhamento a esquerda: <img
src="../imagens/dexter_laboratory2.jpg" align="left"
width="90" height="90">
<BR>
<center>Alinhamento centralizado<br>
com a TAG CENTER:<br>
<img src="../imagens/dexter_laboratory2.jpg" width="90"
height="90">
</center>
</BODY>
</HTML>
Em relação ao texto:
$" Top: alinhamento pelo topo da imagem;
$" Bottom: alinhamento pela base da imagem;
$" Middle: alinhamento pelo centro da imagem;
Exemplo:
imagens_alinhadas_texto.htm
<BODY>
<H2> Imagens Alinhadas em Relação ao Texto </H2>
<BR><BR>
Alinhamento pelo topo da imagem:
<img src="../imagens/praia.jpg" ALIGN="top"><BR><BR>
<hr align="center" size="2" widht="80%"><BR><BR>
Alinhamento pela base da imagem:
<img src="../imagens/praia2.jpg" ALIGN="bottom"><BR><BR>
<hr align="center" size="2" widht="80%"><BR><BR>
Alinhamento pelo centro da imagem:
<img src="../imagens/praia3.jpg" ALIGN="middle"><BR><BR>
<hr align="center" size="2" widht="80%"><BR><BR>
</BODY>
DEMAIS ATRIBUTOS
$" ALT=”mensagem”:
Este atributo tem a função de exibir uma mensagem no lugar da imagem
enquanto ela é carregada. Quando o navegador não exibe imagem a mensagem é
exibida em seu lugar. Também tem a função de especificar, indicar sobre uma imagem,
quando o cursor é colocado sobre a imagem.
Exemplo:
imagens_com_alt.htm
<HTML>
<HEAD>
<TITLE> Imagens com mensagens
</TITLE>
</HEAD>
<BODY>
<center><H3>ISERINDO UMA
MENSAGEM EM UMA IMAGEM</H3>
<BR>
<img src="../imagens/peixes.jpg"
ALT="Peixes no Lago. Este é mais um exemplo de mensagens em uma imagem.
Visualizada quando o mouse passa por cima da imagem.">
</center>
</BODY>
</HTML>
$" BORDER=”n”:
Podem ser definidas diferentes tamanhos de bordas
para uma imagem, em pixels
Exemplo:
imagens_bordas.htm
<BODY>
<center>
<H2>INSERINDO BORDAS <BR> EM IMAGENS</H2>
<BR>
<img src="../imagens/animaniacs.jpg" BORDER="0"
ALT="Animaniacs sem bordas">
<img src="../imagens/animaniacs.jpg" BORDER="5"
ALT="Animaniacs com borda 5">
<img src="../imagens/animaniacs.jpg" BORDER="10"
ALT="Animaniacs com borda 10">
</center></BODY>
INSERINDO SOM
Comando
<BGSOUND SRC=”nome_arquivo.extensão” LOOP=”INFINITE”>
Nota:
#"Esta TAG de som pode ser inserida em qualquer ponto da página, dentro da
marcação <BODY></BODY>;
#"Procure não inserir arquivos de áudio muito grandes para diminuir o tempo de
acesso a página para os usuários que tem conexão discada(modem 56Kb).
#"Suporta os seguintes formatos de arquivos de áudio:
o *.wav;
o *.midi;
o *.au;
o *.mp3
Comando:
<embed width="120" height="50" src="nome do arquivo.extensão" autostart="false"
showstatusbar="1" showdisplay="1">
Exemplo:
<html>
<head>
<title>SOM NA PÁGINA -
<EMBED></title>
</head>
<body bgcolor="#F7FFD2">
<div align="center"><embed width="120"
height="45"
src="../sons/avril_lavigne_complicated.mid
" autostart="false"></embed><br>
Neste exemplo: <br>
<EMBED WIDTH="120"
HEIGHT="45"
SRC="../sons/complicated.midi"
AUTOSTART="false">
</font></div>
</body>
</html>
TABELAS
Muito utilizadas para organizar as páginas de internet hoje em dia. Também para
modelar o layout das home pages, organizar dados na web.
Pode ser inserido texto, imagens gráficas, links.
Em primeiro momento você pode achar difícil a compreensão das TAG´s utilizadas
nas tabelas, mas isto é só num primeiro momento de contato com estes códigos. Mas
depois torna-se muito fácil a sua utilização e interpretação para corrigir possíveis falhas
em um editor de HTML qualquer.
Pode também ser utilizada dentro de outras tabelas, melhorando a disposição dos
conteúdos de sua página
<TABLE> </TABLE>:
Ete é o comando para se inserir a tabela, esta TAG deve ser encerrada.
Antes e depois de inserir uma tabela, sempre acontece uma quebra de linha
Exemplo: tabelas.htm
<TABLE BORDER=1> <! Inicia a tabela e
coloca uma borda de espessura igual a 1>
<TR> <! Cria a primeira linha da tabela>
<TD>Primeira célula </TD><! Aqui foi
criada uma célula>
<TD>Segunda célula </TD>
<TD>Terceira célula </TD>
</TR><! Fecha a primeira linha da tabela>
<TR><! Abre a segunda linha da tabela>
<TD>Primeira célula </TD>
<TD>Segunda célula </TD>
<TD>Terceira célula </TD>
</TR><! Encerra a Segunda linha da
tabela>
</TABLE><! Encerra a tabela>
*Com isto você já consegue Ter uma idéia de como montar suas tabela. O segredo
para se conseguir fazer estas tabelas de forma eficiente é planejar e ter a idéia exata do
conteúdo desta tabela.
**Nas células da tabela você pode inserir desde simples frases até figuras inteiras.
***Parâmetros podem ser acrescidos às tabelas, tais como : aumentar ou diminuir a
largura de uma célula; distanciar as células uma das outras; inserir cor de fundo dentro da
célula etc.
42 Centro de Informática - Seção de Projetos Científicos
Apostila de HTML Básico - http://www.ufpel.tche.br/ci/spc
UNIVERSIDADE FEDERAL DE PELOTAS
Exemplo:
tabelas_table_header.htm
<table border="1" width="400">
<tr>
<td>Novos Cadastros</td>
<th>Outubro</th>
<th>Novembro</th>
<th>Dezembro</th>
</tr>
<tr>
<th>Alunos</th>
<td>10</td>
<td>3</td>
<td>16</td>
</tr>
<tr>
<th>Professores</th>
<td>3</td>
<td>7</td>
<td>11</td>
</tr>
</table>
<CAPTION> </CAPTION>:
Esta TAG insere a legenda da Tabela. Inserir entre <TABLE> e </TABLE>.
Exemplo:
tabela_caption.htm
<table BORDER="1"
WIDTH="80%">
<caption>LEGENDA ENTRE
CAPTION</caption>
<tr>
<th align="center">Uso de
Table Header - TH</th>
</tr>
<tr>
<td align="center">Uso de
Table Data - TD</td>
</tr>
</table>
WIDTH=”valor ou %”:
Com este atributo é possível alterar a largura da tabela em relação ao
navegador. Também a largura das células, como no exemplo que segue.
Para alterar a largura de uma célula da tabela basta acrescentar o parâmetro
WIDTH dentro da tag <TD>.
Exemplo:
tabela2.htm
<table BORDER="2">
<tr>
<td
WIDTH="25%">WIDTH=25%</td>
<td ALIGN="MIDDLE"
WIDTH="75%">WIDTH=75%</td>
</tr>
</table>
<br>
<br>
<div align="center">
<center>
<table BORDER="2">
<tr>
<td
WIDTH="100">WIDTH=100</td>
<td ALIGN="MIDDLE"
WIDTH="200">WIDTH=200
(PIXELS)</td>
</tr>
</table>
BORDER=”n”:
Com este abributo é possível colocar em maior destaque uma determinada
tabela. O número da espessura de uma tabela é definida em pixels.
Exemplo:
tabela_atribuindo_bordas.htm
<table border="5" width="300"
align="center">
<tr>
<td width="33%" align="center">L1 -
C1</td>
<td width="33%" align="center">L1 -
C2</td>
<td width="34%" align="center">L1 -
C3</td>
</tr>
<tr>
44 Centro de Informática - Seção de Projetos Científicos
Apostila de HTML Básico - http://www.ufpel.tche.br/ci/spc
UNIVERSIDADE FEDERAL DE PELOTAS
Sintaxe de comando:
<table border="0" width="400">
<tr>
<td width="50%"
align="center">
Tabela com
BORDER="3" 
;
table border="3" width="90%">
<tr>
<td width="50%"
align="center">Grêmio</td>
<td width="50%"
align="center">Juventude</td>
</tr>
<tr>
<td width="50%"
align="center">Pelotas</td>
<td width="50%" align="center">Brasil</td>
</tr>
</table>
</td>
<td width="50%" align="center">
Tabela com BORDER="0"
<table border="0" width="90%">
<tr>
<td width="50%" align="center">São Paulo</td>
<td width="50%" align="center">Bahia </td>
</tr>
<tr>
<td width="50%" align="center">Palmeiras </td>
<td width="50%" align="center">Internacional </td>
</tr>
</table>
</td>
</tr>
</table>
ALIGN=”posição”:
Este atributo controla o alinhamento do conteúdo dentro das TAG´s TD, TR, TH.
Podem ser:
$" left:
alinhamento a esquerda;
$" center:
alinhamento centralizado;
$" right:
alinhamento a direita.
Exemplo:
tabela_alinhamentos.htm
<table border="1"
width="474">
<tr>
<td width="152"
align="center"><b>P
RIMEIRA
CÉLULA</b></td>
<td width="147"
align="center"><b>S
EGUNDA
CÉLULA</b></td>
<td width="153"
align="center"><b>T
ERCEIRA CÉLULA</b></td>
</tr>
<tr>
<td width="152" align="center">ALIGN="left"</td>
<td width="147" align="center">
ALIGN="center"</td>
<td width="153" align="center">
ALIGN="right"</td>
</tr>
<tr>
<td width="152">ESQUERDA</td>
<td width="147">
<p align="center">CENTRO</td>
<td width="153">
<p align="right">DIREITA</td>
</tr>
</table>
VALIGN=”posição”:
Controla o posicionamento do conteúdo dentro dás células. Pode ser:
$" top: alinhamento superior;
$" middle: alinhamento centralizado;
$" bottom: alinhamento inferior;
Exemplo:
<table border="1" width="474">
<tr>
<td width="234" align="center"><b>Controle do posicionamento dos conteúdos
das células pode ser:</b></td>
<td width="91" valign="top" align="center"><b>TOP</b></td>
<td width="91" valign="middle" align="center"><b>MIDDLE</b></td>
<td width="91" valign="bottom" align="center"><b>BOTTOM</b></td>
</tr>
</table>
CELLSPACING=”valor em Pixels”:
Este atributo compreende a distância entre células e linhas.
Deve ser adicionado dentro da TAG <TABLE>.
Como padrão dos navegadores a distância é 2 pixels
Exemplo:
<table border="1" width="80%" ALIGN="center" cellspacing="6">
<tr>
<td width="33%"
align="center"><b><font size="2"
face="Arial
Narrow">CELLSPACING="6
"</font></b></td>
<td width="33%"
align="center"> </td>
<td width="34%"
align="center"> </td>
</tr>
<tr>
<td width="33%"
align="center"> </td>
<td width="33%" align="center"><b><font size="2" face="Arial
Narrow">CELLSPACING="6"</font></b></td>
<td width="34%" align="center"> </td>
</tr>
<tr>
<td width="33%" align="center"> </td>
<td width="33%" align="center"> </td>
<td width="34%" align="center"><b><font size="2" face="Arial
Narrow">CELLSPACING="6"</font></b></td>
</tr>
</table>
CELLPADDING=”valor em pixels”:
Este atributo é utilizado para formatar o espaço entre o conteúdo de uma célula
e suas bordas em todos os sentidos.
É aplicado dentro da TAG <TABLE>
Exemplo:
<table border="1" width="80%" align="center" cellpadding="8">
<tr>
<td width="33%"
align="center">PÊRA</td>
<td width="33%"
align="center">MAMÃO</td>
<td width="34%"
align="center">ABACAXI</td>
</tr>
<tr>
<td width="33%"
align="center">KIWI</td>
<td width="33%"
align="center">MELANCIA</td>
<td width="34%"
align="center">MORANGO</td
>
</tr>
<tr>
<td width="33%" align="center">ABACATE</td>
<td width="33%" align="center">MELÃO</td>
<td width="34%" align="center">MIRTILO</td>
</tr>
</table>
Exemplo:
<table border="1"
width="100%"
align="center">
<tr>
<td width="50%"
nowrap>Célula com
NOWRAP. O texto fica sem
quebra
de linha.</td>
<td width="50%">Ao
contrário desta célula que
não foi adicionado, o texto
sofre quebra de linha.</td>
</tr>
</table>
*Isto já dá uma idéia do funcionamento geral das tabelas na WEB. Muito dos
alinhamentos que encontramos na Internet é feito por intermédio de tabelas.
Centro de Informática - Seção de Projetos Científicos 49
**Você também pode usar todos os outros recursos já vistos de HTML para
otimizar o uso de tabelas.
ROWSPAN=”n”:
Define quantas linhas uma mesma célula pode abranger. Por padrão, na maioria
dos navegadores de internet cada célula adicionada em uma tabela corresponde a uma
linha. Pode ser aplicado em TH ou TD, proporcionando a mesmo efeito.
Exemplo: tabelas_rowspan.htm
<table border="1" width="380" cellpading="7" align="center">
<tr>
<td width="16%" rowspan="3">3 linhas</td>
<td width="16%">coluna 2</td>
<td width="16%">coluna 3</td>
<td width="17%">coluna 4</td>
<td width="17%">coluna 5</td>
</tr>
<tr>
<td width="16%">coluna 2</td>
<td width="16%">coluna 3</td>
<td width="17%">coluna 4</td>
<td width="17%">coluna 5</td>
</tr>
<tr>
<td width="16%">coluna 2</td>
<td width="16%">coluna 3</td>
<td width="17%">coluna 4</td>
<td width="17%">coluna 5</td>
</tr>
</table>
COLSPAN=”n”
Este atributo define quantas colunas uma célula pode abranger. Por padrão, na
maioria dos navegadores de internet cada célula adicionada em uma tabela
corresponde a uma coluna. Pode ser aplicado em TH ou TD, proporcionando a mesma
abrangência.
Exemplo: tabelas_colspan.htm
<table border="1" width="80%" align="center">
<tr>
<td width="24%"
colspan="3">CÉLULA COM 3
COLUNAS</td>
<td width="20%">coluna 4</td>
<td width="20%">coluna 5</td>
</tr>
<tr>
<td width="20%">coluna 1</td>
<td width="20%">coluna 2</td>
<td width="20%">coluna 3</td>
<td width="20%">coluna 4</td>
<td width="20%">coluna 5</td>
</tr>
</table>
Exemplo:
<table border=0>
<tr>
<td width=150
bgcolor=red>vermelho </td>
<td width=150
bgcolor=blue>azul </td>
<td width=150
bgcolor=red>vemelho</td>
</tr>
<tr>
<td width=150
bgcolor=blue>azul</td>
<td width=150
bgcolor=red>vemelho</td>
<td width=150 bgcolor=blue> azul</td>
</tr>
</table>
Exemplo:
<TABLE BACKGROUND="nome do
arquivo.extensão" BORDER=5>
<TR>
<TD>imagem</TD>
</TR>
</TABLE>
Exemplo:
<TABLE BORDER=5>
<TR>
<TD> <IMG SRC=endereço/nome da
figura.extensão> </TD>
</TR>
</TABLE>
RULES=”complementos”
Para escolher as linhas internas que serão mostradas dentro da tabela , usamos
o atributo RULES , dentro da tag <TABLE> .
Os complementos desse atributo são :
Exemplo:
tabelas_rules_none.htm
<table border="1" width="300" rules="none">
<tr>
<td width="20%"
align="center">Alberto</td>
<td width="20%"
align="center">Fabiana</td>
<td width="20%"
align="center">Denis</td>
</tr>
<tr>
<td width="20%"
align="center">Alex</td>
<td width="20%"
align="center">Jaqueline</td>
<td width="20%"
align="center">Lisla</td>
</tr>
<tr>
<td width="20%" align="center">Giovane</td>
<td width="20%" align="center">Cátia</td>
<td width="20%" align="center">Sandra</td>
</tr>
<tr>
<td width="20%" align="center">Darlan</td>
<td width="20%" align="center">Heloisa</td>
<td width="20%" align="center">Iara</td>
</tr>
</table>
Exemplo:
tabelas_rules_rows.htm
<table border="2" RULES="rows" width="300">
Centro de Informática - Seção de Projetos Científicos 53
<tr>
<td width="25%">papel</td>
<td width="25%">disquete</td>
<td width="25%">cadernos</td>
<td width="25%">corretivo</td>
</tr>
<tr>
<td width="25%">grafite</td>
<td width="25%">caneta</td>
<td width="25%">lapizeira</td>
<td
width="25%">calculadora</td>
</tr>
<tr>
<td width="25%">tesoura</td>
<td width="25%">pincel</td>
<td width="25%">lápis</td>
<td width="25%">borracha</td>
</tr>
</table>
Exemplo:
tabelas_rules_cols.htm
Observação:
FRAMES
<FRAMESET>:
É a TAG de inserção para a elaboração de um conjunto de frames com seu
elementos.
O FRAMESET aceita os atributos COLS e ROWS, referentes a divisão das
janelas que pode ser horizontal ou vertical. E internamente só podem ser utilizadas as
marcações FRAMESET, FRAME ou NOFRAMES.
Atributos utilizados:
#"COLS=”colunas, largura”:
Define o número de colunas a ser utilizado, o valor pode ser em pixels ou
porcentagem. É neste atributo que é definido o número de quadros usados em um
frame.
#"ROWS=”linhas, altura”:
Tem a mesma função do atributo COLS, só que este é para as linhas de um
frame.
#"FRAMEBORDER=”0”:
Você pode atribuir borda na divisa de frames, 0 sem borda e 1 com borda
<FRAME>:
Define o frame a ser criado. Não é utilizada a Tag de encerramento </FRAME>,
pois não necessita.
Define cada janela contida em um área, não necessita da TAG de finalização
(/FRAME).
Atributos utilizados:
#"SRC=”URL”:
Endereço do arquivo e extensão que será exibido no frame
#"NAME=”nome da janela”:
Este atributo é utilizado para associar um nome a uma janela. Utilizado para criar
alvos de um frame para outro.
#"MARGINWIDTH=”valor”:
Controla as margens de cada frame, a direita ou esquerda. Distância entre os
conteúdos de cada página e as margens da janela.
#"MARGINHEIGHT=”valor”:
Tem a mesma função do MARGINWIDTH, só que controla as margens superiores
e inferior.
#"SCROLLING=”yes, no ou auto”:
É um atributo opcional. Define se uma janela deve ou não possuir barra de
rolagem. O padrão utilizado, caso não especificar é auto, sendo assim o seu navegador
irá aplicar quando neceessário.
#"NORESIZE:
Este atributo não possue complementos. Quando não adicionado a TAG
<FRAME>, o usuário poderá alterar o tamanho das janelas, movendo as bordas das
janelas com o cursor. Por padrão todas as janelas podem ter seu tamanho alterado, mas
é bom colocar este atributo para não modificar o layout de sua página.
<NOFRAMES>:
Esta TAG é utilizada para informar a alguns usuários de que seu navegador de
internet não suporta FRAMES. Hoje em dia a maioria dos navegadores não tem este
problema, como os antigos navegadores IE 2.0.
Permite a navegação em primeira página somente. Sendo assim colocar as
informações de como atualizar o navegador do usuário para poder visualizar a sua
página corretamente.
Esta TAG deve ser encerrada com </NOFRAMES> e inserida dentro de
frameset. Exemplo:
<FRAMESET>
<NOFRAMES> Informações a serem dispostas aqui sobre a impossibilidade
de navegar com frames em uma página.
</NOFRAMES>
</FRAMESET>
A marcação:
TARGET=”complementos”:
Utilizada opcionalmente na TAG de links, permite controlar o alvo em que uma
determinada página irá “abrir”, ou seja, em que frame específico deverá aparecer.
Arquivo: frame_1.htm
<html>
<head>
<title>FRAME 1</title>
</head><body><div align="center">
<font size="4" face="Arial Black">FRAME
1.HTM</font><br><a href="frame_2.htm"
target="frame_2">Frame 2 (Página
Inicial)</a><br><br><br>
<a href="frames_ancoras.htm"
target="frame_2">Âncoras</a><br>
<a href="frames_imagens_fundo.htm"
target="frame_2">Backgrounds na
Página</a><a href="frames_tabela
_backgrounds.htm" target="frame_2">
Backgrounds em Tabelas</a></div>
</body>
</html>
Arquivo: frame_2.htm
<html>
<head>
<title>FRAME 2</title>
</head>
<body>
<div align="center">
<font size="4" face="Arial Black">
FRAME 2.HTM
<br><br>
PÁGINA INICIAL
</font>
</div>
</body>
</html>
Arquivo: frames.htm
<html>
<head>
<title> *** PÁGINA COM FRAMES *** </title>
</head>
<frameset cols="25%,*" frameborder="1">
<frame name="frame_1" src="frame_1.htm" noresize scrolling="no">
<frame name="frame_2" src="frame_2.htm" noresize scrolling="auto">
<noframes>
Seu computador não comporta frames <br><br>
Atualize a
versão do
seu
navegador:
<br><br><a
href="http://d
ownload.micr
osoft.com/do
wnload/ie6sp
1/finrel/6_sp
1/
W98NT42K
MeXP/PT-
BR/ie6setup.
exe"> ---
CLIQUE
AQUI ---
</a>
</noframes>
</frameset>
</html>
FORMULÁRIOS
Comandos de formulários
São basicamente três:
#"TEXTAREA: define uma área onde o usuário poderá digitar linhas de texto
#"SELECT: define opções em um quadro de rolagem, uma lista drop down,
permitindo que o usuário selecione a opção desejada.
#"IMPUT: definem botões e caixa de seleção, botões para limpar e enviar dados,
linhas de texto, etc.
Comando Geral:
Atributos:
METHOD=” ”
São dois:
- POST: é o mais utilizado pois envia cada informação de forma separada da URL.
Com este método POST os dados entrados fazem parte do corpo da mensagem enviada
para o servidor e transfere grande quantidade de dados.
- GET: com este, os dados entrados fazem parte do URL associado à consulta
enviada para o servidor e suporta até 128 caracteres
TAGs do formulário:
INPUT
É uma opção para a reunião de informações, tais como:
#"Campos de senha;
#"Botões para marcar;
#"Caixas de seleção;
#"Limpar dados digitados e enviar dados
Comando geral:
<INPUT TYPE=”tipo a escolher”>
Existem diferentes atributos para cada tipo de TYPE, que veremos a seguir:
TEXT
NOTA:
Importante sempre utilizar o atributo NAME para definir o nome dos campos.
PASSWORD
Utilizado quando se deseja armazenar
dados confidenciais que não aparecem na
tela do navegador quando digitados. Por
exemplo as senhas.
<INPUT TYPE=”password” NAME=”senhas” SIZE=”15” MAXLENGTH=”15”>
#"NAME: nome obrigatório;
#"SIZE: tamanho do campo visualizado no formulário;
#"MAXLENGTH: número máximo de caracteres, a ser determinado para o campo.
CHECKBOX
RADIO
HIDDEN
Com este atributo as informações dispostas ficam ocultas. Tem a função de
interagir por exemplo com o usuário a preencher um determinado campo que você
determinou obrigatório. De um modo geral você configura a interatividade do formulário
com o usuário e também a forma de recebimento dos formulários preenchidos na sua
página por seus visitantes. Tudo vai depender do seu provedor, das opções que irá
dispor para estes fins.
<INPUT TYPE=”hidden” NAME=” ” VALUE=” ”>
#"NAME:define o nome dos dados. Obrigatório.
#"VALUE: pode indicar destinos, ou campos obrigatórios utilizando seu nome.
RESET
SUBMIT
Um botão é inserido e tem a função de submeter as informações
digitadas no formulário para o servidor.
SELECT
TEXTAREA
</TEXTAREA>
#"NAME: obrigatório, pois define o nome dos dados inseridos
#"ROWS: número de linhas;
#"COLS: número de colunas;
#"VALUE: não é obrigatório, indica qual o texto será referenciado ao autor
UPLOAD DE ARQUIVOS
Hospedando o site:
Clique aqui
para
Informa o local de descompactar
descompactação do
arquivo e que será
numa pasta Altera o local de
chamada WS-FTP. descompactação
dos arquivos.
Para inserir novas pastas ou subdiretório clique no botão MkDir bem à direita da
tela; na janela que aparece, digite o nome que você deseja. Uma pequena pasta
amarela com o nome dado deve estar aparecendo agora na janela da direita.
Dê um clique duplo na pasta criada. A janela ficará em branco, indicando que
não há nada na pasta que você acabou de criar. Agora localize, na janela da esquerda,
os arquivos de sua página que você deseja colocar no servidor. Marque os arquivos,
clicando uma vez sobre eles - aperte e segure a tecla CTRL para marcar mais de um
arquivos. Finalmente, clique no botão --> entre as duas janelas, indicando que você
quer transferir os arquivos da janela da esquerda para a da direita. Os arquivos
aparecerão na janela da direita quando a transferência se completar.
Agora você já pode testar sua página. Se tudo estiver correto sua página já deve
estar acessível de qualquer parte do mundo!
Se não quiser transferir mais nenhum arquivo, retorne à tela do WS-FTP e clique
em Close para encerrar a conexão, e em Exit para fechar o programa.
DICAS
Você deve indicar aos visitantes do seu site com conteúdos atualizados para que
você os tenha sempre retornando. Com isso seu site ganhará muitas visitas, sempre.