HTML Comandos1

HTML
NOÇÕES BÁSICAS
MODELO BÁSICO DE UMA
PÁGINA WEB
Uma página criada em HTML possui três partes
básicas: estrutura, cabeçalho e corpo de página.
Possui uma estrutura dividida em 4 TAGS básicas:
• <HTML>………</HTML>
• <HEAD>………</HEAD>
• <TITLE>………</TITLE>
• <BODY>………</BODY>
MODELO BÁSICO DE UMA
PÁGINA WEB
EXEMPLO:
<HTML>
<HEAD>
<TITLE> CURSO BÁSICO DE HTML </TITLE>
</HEAD>
<BODY> DESENVOLVENDO PÁGINAS DE INTERNET </BODY>
</HTML>
CABEÇALHOS
Linhas do documento exibidas no browser com letras
diferentes do restante texto chamando a atenção para
um novo tópico ou secção.
TAG <H>: possui tamanhos diferentes, que vão diminuindo á medida que aumenta o H;
H1 é o maior corpo de texto e H6 o menor.
Exemplo:
<HTML>
<HEAD>
<TITLE> CABEÇALHOS </TITLE>
</HEAD>
<BODY>
<H1> TEXTO FORMATADO COM H1 </H1>
<H2> TEXTO FORMATADO COM H2 </H2>
</BODY>
</HTML>
PARÁGRAFOS
A Tag <P> é responsável por finalizar um parágrafo e
inserir automaticamente uma linha em branco entre
parágrafos. Faz também o alinhamento de parágrafos.
Exemplo:
<HTML>
<HEAD>
<TITLE> Alinhamento de parágrafos </TITLE>
</HEAD>
<BODY>
<P> Este parágrafo utiliza o alinhamento à esquerda </P>
<P ALIGN=“CENTER”> Este parágrafo utiliza o alinhamento centralizado </P>
<P ALIGN=“RIGHT”> Este parágrafo utiliza o alinhamento à direita </P>
</BODY>
</HTML>
FONTES
A Tag FONT permite que se insira um texto com fontes de

tamanhos, cores e tipos diferentes.
Comandos:
<FONT SIZE=“N”> varia de 1 a 7;
<FONT FACE = “nome”> nome da fonte a ser utilizada
(verdana, arial, etc)
<FONT COLOR=“COR”> nome pré definido ou RGB
<FONT> ….. </FONT>
ESTILOS DE TEXTO
COMANDO APLICAR O ESTILO FUNÇÃO
NEGRITO <B> TEXTO </B> ESTILO NEGRITO
ITÁLICO <I> TEXTO </I> ESTILO ITÁLICO

SUBLINHADO <U> TEXTO </U> ESTILO SUBLINHADO
STRONG <STRONG>TEXTO</STRONG> SEMELHANTE AO NEGRITO
ÊNFASE <EM> TEXTO </EM> SEMELHANTE AO ITÁLICO
TYPEWRITER <TT> TEXTO </TT> ESPAÇO REGULAR AO

TEXTO
BIG <BIG> TEXTO </BIG> AUMENTA A FONTE E
ATRIBUI NEGRITO
SMALL <SMALL> TEXTO </SMALL> REDUZ E ALTERA A FONTE
SOBRESCRITO <SUP> TEXTO </SUP> ELEVA O TEXTO E O CORPO
DO TEXTO
SUBSCRITO <SUB> TEXTO </SUB> REBAIXA O TEXTO E DIMINUI
O SEU CORPO
QUEBRAS DE LINHA
A Tag BR faz uma quebra de linha sem acrescentar espaços extras entre as
linhas. Finaliza a linha de texto e insere automaticamente outra linha em
branco. Não necessita de </BR>.
Exemplo:
<HTML>
<HEAD>
<TITLE> UTILIZAR QUEBRA DE LINHA COM BR </TITLE>
<BODY>
Este texto utiliza a Tag BR no final de cada linha <BR> <BR>
Pode utilizar <BR> a Tag BR <BR> sempre que <BR> quiser passar o texto
<BR> para a próxima linha. <BR><BR> O resultado é simples.
</BODY>
</HTML>
INSERIR COMENTÁRIOS
Os comentários são utilizados na codificação do HTML para lembrete do próprio
programador, de forma a relembrar futuras actualizações ou dicas. O texto de um
comentário não é visualizado pelo navegador.
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 para o navegador-->
<!—Um comentário é um lembrete--.>
<!—Pode ser colocado em qualquer ponto do HTML-->
</BODY>
</HTML>
LINHAS HORIZONTAIS
A Tag HR insere linhas horizontais. Podem ser utilizadas para dividir a página
chamando a atenção para um tópico específico.
COMANDO:
<HR WIDHT=“N%” ALIGN=“POSIÇÃO” SIZE=“N” COLOR=#COR NOSHADE>
CADA ATRIBUTO DO COMANDO TEM A FUNCIONALIDADE SEGUINTE:
1. WIDTH=“N%” define a largura da linha. Pode ser definida em pixels ou % do tamanho do
ecra.
2. ALIGN=“POSIÇÃO”
1. LEFT
2. CENTER
3. RIGTH
3. SIZE=“N” espessura da barra em pixels
4. COLOR=#COR define a cor a utilizar na barra
5. NOSHADE: define que a barra não tem efeito 3d (sombreado)
LINHAS HORIZONTAIS
Exemplo
<BODY BGCOLOR=“#D6E4ED”>
<DIV ALIGN=“CENTER> Linhas horizontais </DIV>
<BR>
<FONT>Linhas com alturas diferentes: tamanho 10:</FONT>
<HR SIZE=“10” WIDTH=“85%”>
<FONT>Linhas com alturas diferentes: tamanho 20:</FONT>
<HR SIZE=“20”WIDTH=“85%”>
<BR>
<FONT>Linhas com largura diferente </FONT>
<FONT>Largura a 50% da página </FONT>
<FONT>Largura a 100% da página </FONT>
<FONT>Linhas com alinhamentos diferentes </FONT>
<HR SIZE=“05” ALIGN=“RIGTH” WIDTH=“80%”>
</BODY>
OBS: A TAG DIV ALIGN PERMITE ALINHAR QQ ELEMENTO DA PÁGINA, TAL COMO
CABEÇALHOS, IMAGENS, ETC.
ACENTOS
Para criar uma página com caracteres especiais, é necessário definir códigos
especiais que o browser interpreta e substitui por um caractér específico.
Exemplos:
<HTML>
<HEAD>
<TITLE> Alguns acentos e caracteres especiais </TITLE> </HEAD>
<BODY>
&grave; <BR> ã <BR> â <BR> ä <BR> é <BR> &egrave
<BR> ê <BR> í <BR>ì <BR> &otilde
</BODY>
</HTML>
ESCREVER A PALAVRA VOCÊ: VOC&ECIRC;

ESCREVER A PALAVRA PÁGINA: P&AACUTE;GINA
Elementos gráficos de fundo
1. Cores de fundo:
1. BGCOLOR: é a cor de fundo da página; este atributo deve ser colocado
dentro da TAG BODY
Comando: <BODY BGCOLOR=“#RRGGBB”>
EXEMPLO:
<BODY BGCOLOR=“#FFFFCC” TEXT=“#000033”>
<H4 ALIGN=“CENTER”>COR DE FUNDO<BR>
BGCOLOR=&QUOT;#COR&QUOT;</H4>
COM ESTE ATRIBUTO VOC&ECIRC, CONTROLA A COR DE FUNDO DAS P&AACUTE;GINAS.<BR><BR>
COMANDO:<BR>
&IT;BODY BGCOLOR=&QUOT;#FFFFCC&QUOT;
TEXT=&QUOT;#000033&QUOT;&GT;
</BODY>
OBS: EM COMENTÁRIOS DE TEXTO NA PÁGINA
&QUOT=“
&IT=<
&GT=>
&nbsp = espaço
Elementos gráficos de fundo
• IMAGENS DE FUNDO – background

– Aplica uma imagem como plano de fundo, que vai ocupar toda
uma área do fundo da tela do navegador. Deve ser inserida na
TAG BODY, e ser especificado o caminho de acesso á imagem
a utilizar na página.
– Comando:
<BODY BACKGROUND=“URL”> CORPO DA PÁGINA </BODY>
– EXEMPLO:
• <BODY BACKGROUND=“../IMAGENS/FUNDO1.JPG”>
Cores de Links:
LINK; ALINK; VLINK
1. LINK: cor dos links
2. ALINK. Cor do link activo, onde o utilizador pressionou
o botão do rato, mas ainda não o soltou
3. VLINK: cor dos links visitados
Comando:
<BODY LINK=“#RRGGBB” VLINK=“#RRGGBB”
ALINK=“#RRGGBB”>
<BODY BGCOLOR=“#FFFFE0” TEXT=“#FF6347”
LINK=“#ADFF2F” VLINK=“#7FFFD4”
ALINK=“#0000CD”>
FFFFE0=LIGHTYELLOW; FF6347=TOMATO; ADFF2F=GREENYELLOW;
7FFFD4=AQUAMARINE; 0000CD=MEDIUMBLUE
LISTAS
• Podem servir como resumos, índices do
site, contendo Links para outras páginas
nossas ou criadas por outras pessoas.
• Existem dois tipos básicos de listas:

– Não numeradas
– Numeradas
LISTAS NÃO NUMERADAS
• A TAG UL
– INSERE MARCADORES NA FRENTE DE CADA ÍTEM
– COMANDO:
• <UL TYPE=“FORMATO”>
• <LI> TÓPICO 1
• <LI> TÓPICO 2
• <LI> TÓPICO 3
• </UL>
– OBS: <UL> INÍCIO DA LISTA
TYPE=“FORMATO” PODE SER DISK (PONTO), SQUARE
(QUADRADO); CIRCLE (CIRCULO)
<LI> TÓPICOS DA LISTA
</UL> FIM DA LISTA PONTUADA
LISTAS NUMERADAS
• A TAG OL
– INSERE LISTA NUMÉRICA OU ALFABÉTICA
– COMANDO:
• <OL TYPE=“FORMATO” START=“N”>
• <LI> TÓPICO 1
• <LI> TÓPICO 2
• <LI> TÓPICO 3
• </OL>
– OBS: <OL> INÍCIO DA LISTA NUMERADA
TYPE=“FORMATO” PODE SER:
1: LISTA NUMÉRICA
A: LISTA ALFABÉTICA COM LETRAS MAIUSCULAS
a: LISTA ALFABÉTICA COM LETRAS MINUSCULAS
I: LISTA NUMERICA COM NUMEROS ROMANOS MAIUSCULOS
i: LISTA NUMERICA COM NUMEROS ROMANOS MINUSCULOS
START=“N” VALOR INICIAL DA LISTA
<LI> TÓPICOS DA LISTA
</OL> FIM DA LISTA
O comando &nbsp
Exemplo:
<B>Listas não ordenadas</B>

As listas não ordenadas ou pontuadas inserem&nbsp<I>
marcadores</I>&nbspna frente de cada item.
TEXTO ANIMADO
O comando MARQUEE
Orienta o browser a definir o efeito de texto a passar desde o seu
início até ao fim. Permite também que uma imagem possa correr na
página de um lado para o outro.
Comando: <MARQUEE> TEXTO OU IMAGEM </MARQUEE>
CADA ATRIBUTO DO COMANDO TEM A FUNCIONALIDADE SEGUINTE:
• ALIGN: Posição que pode ser Top, Midlle ou Bottom
• BEHAVIOR: Controle que pode ser Scroll (texto entra por 1 canto e sai pelo outro), Slide (entra
por 1 canto e sai pelo oposto), Alternate (passa de um canto para o outro dentro do marquee)
• BGCOLOR: =“#000000” muda a cor de fundo do marquee
• DIRECTION: define a direcção em que o texto se move (LEFT, RIGHT)
• HEIGHT: “altura” n ou %
• WIDTH: n ou %
• HSPACE: “n” define margens a esquerda e direita do marquee
• VSPACE: “n” define margens acima e abaixo o marquee
• LOOP: “n” quantas vezes o texto passa em marquee
ADDRESS
Endereços: são normalmente colocados no final da
página, contendo informações sobre o autor, data
alteração, etc. tudo o que fica dentro da TAG ADDRESS
fica em itálico.
Exemplo:
<html> Inserção
<head> <title> ADDRESS </title> </head> de
<body bgcolor=“#FFFFFF”> imagem
<div align=“left”>
<image src=“../imagens/upfel_pagina.jpg” wigth=“307” height=“254”><br>
</div>
<address>
UNIVERSIDADE FEDERAL DE PELOTAS<BR>
CAMPUS UNIVERSIT&AACUTE;RIO, S/N&DEG;-CAIXA POSTAL 354<BR>
CEP 96010-900 – PELOTAS, RS – BRASIL<BR>
</address></body>
</html> &deg = º
HIPERLIGAÇÕES (LINKS)
SINTAXE DO COMANDO:
<A HREF=“NOME DO FICHEIRO.EXTENSÃO”>TEXTO</A>
EXEMPLO:
LINKS PARA OUTRAS PÁGINAS:
<A HREF=“FOTOS.HTM”> FOTOS </A>
<A HREF=“MENU.HTM”> MENU </A>
OBS: NÃO ESQUECER QUE PARA FAZER A HIPERLIGAÇÃO A
OUTROS DIRECTORIOS (PASTAS) É NECESSÁRIO INDICAR TODO O
CAMINHO A PERCORRER, USANDO A BARRA /.
LINKS PARA OUTROS SERVIDORES:
<A HREF=“HTTP://GOOGLE.COM”>GOOGLE</A>
LINKS PARA O E-MAIL:
<A HREF=“MAILTO.ENDEREÇO”>MAIL</A>
LINKS PARA DOWNLOAD:
<A HREF=“*.EXE, *.ZIP”>DOWNLOAD</A>
IMAGENS GRÁFICAS
OS FORMATOS DE IMAGEM MAIS ACEITES POR QQ BROWSER SÃO GIF E JPEG. O
FORMATO GIF É USADO EM DIFERENTES PLATAFORMAS DE HARDWARE, SUPORTA NO
MÁXIMO 256 CORES E GERA FICHEIROS MENORES; É MUITO USADO PARA DESENHOS
E GRÁFICOS. O FORMATO JPEG SUPORTA 16 MILHÕES DE CORES E PODE REDUZIR O
TAMANHO DE UMA IMAGEM ATÉ 10 VEZES.É MUITO USADO PARA FOTOGRAFIAS.
COMANDO DE INSERÇÃO DE IMAGEM:

<IMG SRC=“NOME DO FICHEIRO.EXTENSÃO” WIDTH=“N” HEIGHT=“N” ALIGN=“POSIÇÃO
BORDER=“N”>
EXEMPLO:
<HTML>
<HEAD> <TITLE> IMAGENS GRÁFICAS </TITLE> </HEAD>
<BODY>
<CENTER>
<H2>INSERIR UMA IMAGEM </H2> <BR>
<H3> CANCUN BEACH </H3> <BR>
<IMG SRC=“../IMAGENS/CANCUN_BEACH.JPG”>
</CENTER>
</BODY>
</HTML>
IMAGENS GRÁFICAS – EXEMPLOS DE DIMENSÃO
EXEMPLO:
<HTML>
<HEAD> <TITLE> REDIMENSIONAR IMAGENS GRÁFICAS </TITLE> </HEAD>
<BODY>
<CENTER>
<H2 ALIGN=“CENTER”>REDIMENSIONAR <BR>
IMAGENS GRÁFICAS </H2>
<CENTER>
<H3> TAMANHO ORIGINAL DA PAISAGEM: 300*197 PIXELS – 20K </H3>
<P><IMG SRC=“../IMAGENS/PAISAGEM.JPG” WIDHT=“240” HEIGHT=“137”><BR>
<P><IMG SRC=“../IMAGENS/PAISAGEM.JPG” WIDHT=“240” HEIGHT=“137” ALIGN=“MIDDLE”><BR>
<P><IMG SRC=“../IMAGENS/PAISAGEM.JPG” WIDHT=“160” HEIGHT=“57”><BR>
<P><IMG SRC=“../IMAGENS/PAISAGEM.JPG” WIDHT=“160” HEIGHT=“57” ALIGN=“MIDDLE” ><BR>
</CENTER>
</BODY>
</HTML>
OBS: SELECCIONAR UMA IMAGEM Á VOSSA ESCOLHA E VERIFICAR A DIMINUÇÃO DO TAMANHO DAS
IMAGENS; AS FIGURAS REDIMENSIONADAS PODEM PERDER UM POUCO DA SUA DEFINIÇÃO.
IMAGENS GRÁFICAS – ALINHAMENTO
• EM RELAÇÃO AO NAVEGADOR:
– RIGHT
– LEFT
• EM RELAÇÃO AO TEXTO:
– BOTTOM: ALINHAMENTO PELA BASE DA IMAGEM
– MIDDLE: ALINHAMENTO PELO CENTRO DA IMAGEM
EXEMPLO:
<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/PRAIA.JPG” ALIGN=“BOTTOM”><BR><BR>
ALINHAMENTO PELO CENTRO DA IMAGEM:
IMG SRC=“../IMAGENS/PRAIA.JPG” ALIGN=“MIDDLE”><BR><BR>
</BODY>
IMAGENS GRÁFICAS – MENSAGENS
EXIBEM MENSAGENS QUANDO O RATO PASSA EM CIMA DA IMAGEM.

COMANDO=<IMG SRC ALT>
EXEMPLO:
<HTML>
<HEAD><TITLE>IMAGENS COM MENSAGENS</TITLE></HEAD>
<BODY>
<CENTER><H3>INSERIR UMA MENSAGEM NUMA IMAGEM</H3><BR>
<IMG SRC=“../IMAGENS/PEIXES.JPG” ALT=“PEIXES NO LAGO. EXEMPLO DE
MENSAGEM EM IMAGEM.>
</CENTER>
</BODY>
</HTML>
IMAGENS GRÁFICAS – BORDAS
COMANDO: BORDER = “n”

DEFINIÇÃO DE DIFERENTES BORDAS NA IMAGEM, EM PIXELS.
EXEMPLO:
<BODY>
<CENTER>
<H2>INSERIR BORDAS <BR> EM IMAGENS</H2><BR>
<IMG SRC=“../IMAGENS/ANIMAIS.JPG” BORDER=“0” ALT=“ANIMAIS SEM BORDA”>
<IMG SRC=“../IMAGENS/ANIMAIS.JPG” BORDER=“5” ALT=“ANIMAIS COM BORDA
5”>
<IMG SRC=“../IMAGENS/ANIMAIS.JPG” BORDER=“10” ALT=“ANIMAIS COM BORDA
10”>
</CENTER>
</BODY>
INSERÇÃO DE SOM
TAG <BGSOUND>
CARREGA UM FICHEIRO DE AUDIO ENQUANTO A PÁGINA É
VISITADA.QUANDO A PÁGINA É ENCERRADA, O SOM TAMBÉM É.
COMANDO:
<BGSOUND SRC=“NOME_FICHEIRO.EXTENSÃO” LOOP=“INFINITE”>
SRC: NOME DO FICHEIRO A CARREGAR
LOOP: Nº VEZES QUE É EXECUTADO; SE FOR 1 OU INFINITE, NÃO PARA
ENQUANTO A PÁGINA É VISITADA.
A TAG DEVE SER INSERIDA EM QUALQUER PONTO DA TAG BODY.
SUPORTA OS FORMATOS *.WAV, *.MIDI, *.AU, *.MP3.
OBS: NÃO SE DEVE INSERIR FICHEIROS MUITO EXTENSOS DEVIDO AO ACESSO

DIFICIL DOS UTILIZADORES QUE TÊM LIGAÇÃO VIA MODEM A 56 KB.
INSERÇÃO DE SOM – PLAYER VISÍVEL
PARA O UTILIZADOR
TAG <EMBED>
O UTILIZADOR INTERAGE NO SOM DISPONÍVEL NA PÁGINA.
COMANDO:
<EMBED WIDTH=“120” HEIGHT=“50” SRC=“NOME_FICHEIRO.EXTENSÃO”
AUTOSTART=“FALSE” SHOWSTATUSBAR=“1” SHOWDISPLAY=“1”>
WIDTH: LARGURA DO PLAYER

HEIGHT: ALTURA DO PLAYER
SRC: FICHEIRO
AUTOSTART: SE TRUE, INICIA AUTOMATICAMENTE, SE FALSE, FICA PARADO
SHOWSTATUSBAR: SE 1 EXIBE STATUS DO FICHEIRO, SE 0 ESCONDE
SHOWDISPLAY: SE 1 EXIBE INFORMAÇÕES DO FICHEIRO, SE 0 ESCONDE
TABELAS
• São muito utilizadas para organizar as páginas WEB.
Permitem a inserção de texto, imagem, hiperligações,
etc.
Marcações básicas para desenvolver tabelas em HTML:
• <table> </table>
• <tr> </tr> serve para inserir uma linha na tabela.
• <td></td> serve para inserir células em cada linha da
tabela.
TABELAS
Desenvolver uma tabela simples:
<table border=“1”>
Primeira linha da tabela
<tr>
<td>primeira celula</td> Primeira célula da tabela
<td> segunda celula</td>

<td> terceira celula</td>
</tr> Fim da primeira linha da tabela
<tr> Segunda linha da tabela
<td>primeira celula</td>
<td> segunda celula</td>
<td> terceira celula</td>
</tr> Fim da segunda linha da tabela
</table>
TABELAS – títulos das tabelas
• Comando: <TH> </TH> EXEMPLO
<TABLE BORDER=“1” WIDTH=“400”>
<TR>
<TD> NOVOS CADASTROS</TD>
<TH> OUTUBRO</TH> FICAM A NEGRITO
<TH> NOVEMBRO </TH>
NA PÁGINA
<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>
TABELAS – Legendas das tabelas
• TAG CAPTION <CAPTION></CAPTION>
• INSERE A LEGENDA DA TABELA; DEVE SER INSERIDA ENTRE
<TABLE> E </TABLE>
• EXEMPLO:
<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>
TABELAS – ATRIBUTOS DE CONTROLE
• WIDTH: valor ou percentagem; permite alterar a largura da tabela
em relação a tela, assim como a das células. Insere-se o parâmetro
dentro da tag <TD>.
EXEMPLO:
<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>
<TR>
<TD WIDTH=“100”> WIDTH=100 </TD>
<TD ALIGN=“MIDDLE” WIDTH=“200”> WIDTH=200 (PIXELS)</TD>
</TR>
</TABLE>
BORDER: EXEMPLO DE BORDER=“3”
<TABLE BORDER =“0” WIDTH=“400”>

<TR>
<TD WIDTH=“50%” ALIGN=“CENTER”>TABELA COM BORDER</TD>
<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>
ALIGN: POSIÇÃO DO ALINHAMENTO DO CONTEÚDO DENTRO DA
TABELA. EXEMPLO:

<TR>
<TD WIDTH=“152” ALIGN=“CENTER”><B>PRIMEIRA CÉLULA</B></TD>
<TD WIDTH=“147” ALIGN=“CENTER”><SEGUNDA CÉLULA</B></TD>
<TD WIDTH=“153” ALIGN=“CENTER”><B> TERCEIRA CÉLULA</B></TD>
</TR>
<TR>
<TD WIDTH=“152” ALIGN=“CENTER”>ALIGN=&QUOT;LEFT&QUOT;</TD>
<TD WIDTH=“147” ALIGN=“CENTER”>ALIGN=&QUOT;CENTER&QUOT;</TD>
TD WIDTH=“153” ALIGN=“CENTER”>ALIGN=&QUOT;RIGHT&QUOT;</TD>
</TR>
<TR> ALINHA
<TD WIDTH=“152”> ESQUERDA</TD>
AUTOMATICAMENTE
<TD WIDTH=“147”> <P ALIGN=“CENTER”>CENTRO</TD>
<TD WIDTH=“153”><P ALIGN=“RIGTH”> DIREITA</TD> A ESQUERDA
</TR>
</TABLE>
VALIGN: CONTROLA O POSICIONAMENTO DENTRO DAS
CÉLULAS.PODE SER TOP, MIDDLE OU BOTTOM. PODE SER
ADICIONADO ENTRE AS TAGS TR, TD E TH.
EXEMPLO:
<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: DISTÂNCIA ENTRE CÉLULAS E LINHAS. DEVE
SER ADICIONADO ENTRE A TAG <TABLE>. EXEMPLO:
<TABLE BORDER=“1” WIDTH=“80%” ALIGN=“CENTER” CELLSPACING=“6”>
<TR>
<TD WIDTH=“33%” ALIGN=“CENTER”><B><FONT SIZE=“2” FACE=“ARIAL”>
CELLSPACING=&QUOT;6&QUOT;</FONT></B></TD>
<TD WIDTH=“33%” ALIGN=“CENTER”>&NBSP;</TD>
</TR>
<TR>
<TD WIDTH=“33%” ALIGN=“CENTER”><B><FONT SIZE=“2” FACE=“ARIAL”>
CELLSPACING=&QUOT;6&QUOT;</FONT></B></TD>
</TR>
<TR>
<TD WIDTH=“34%” ALIGN=“CENTER”><B><FONT SIZE=“2”
FACE=“ARIAL”>CELLSPACING=&QUOT;6&QUOT;</FONT></B></TD>
</TR>
</TABLE>
CELLPADDING=“VALOR EM PIXELS”; FORMATA O ESPAÇO ENTRE O CONTEÚDO
DE UMA CÉLULA E AS SUAS BORDAS. É APLICADO NA TAG <TABLE>. EXEMPLO:
<TABLE BORDER=“1” WIDTH=“80%” ALIGN=“CENTER” CELLPADDING=“8”>
<TR>
<TD WIDTH=“33%” ALIGN=“CENTER”>MAÇA</TD>
<TD WIDTH=“33%” ALIGN=“CENTER”>PÊRA</TD>
<TD WIDTH=“34%” ALIGN=“CENTER”>UVAS</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>
NOWRAP: SEM QUEBRA DE LINHA;O TEXTO INSERIDO DENTRO DA

CÉLULA NÃO PODE SER DIVIDIDO EM MAIS DO QUE UMA LINHA.
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%”> ESTA CÉLULA ,COMO NÃO TEM O COMANDO NOWRAP, SOFRE QUEBRA
DE LINHA </TD>
</TR>
</TABLE>
ROWSPAN=”N”:DEFINE QUANTAS LINHAS
UMA CELULA PODE ABRANGER.
EXEMPLO:
<TABLE BORDER=“12 WIDTH=“380” CELLPADDING=“7”
ALIGN=“CENTER”>
<TR>
<TD WIDTH=“16%” ROWSPAN=“3”> 3 LINHAS</TD>
<TD WIDTH=“16%”>COLUNA2</TD>
</TR>
<TR>
<TD WIDTH=“17%”>COLUNA4</TD> COLUNA2 COLUNA3 COLUNA4 COLUNA5
</TR>
<TR>
<TD WIDTH=“16%”>COLUNA3</TD> 3 LINHAS
<TD WIDTH=“17%”>COLUNA4</TD> COLUNA2 COLUNA3 OLUNA4 COLUNA5
</TR>
</TABLE>
COLUNA2 COLUNA3 COLUNA4 COLUNA5

COLSPAN=“N”; QUANTAS COLUNAS UMA
CÉLULA PODE ABRANGER. EXEMPLO:
<TABLE BORDER=“1” WIDTH=“80%”

ALIGN=“CENTER”>
<TR>
<TD WIDTH=“24%” COLSPAN=“3”> CELULA COM 3
COLUNAS </TD>
<TD WIDTH=“20%”> COLUNA4</TD>
</TR>
<TR>
<TD WIDTH=“20%”> COLUNA3</TD> CELULA COM 3 COLUNAS COLUNA4 COLUNA5
</TR>
</TABLE>
COLUNA1 COLUNA2 COLUNA3 COLUNA4 COLUNA5
TABELAS –INSERÇÃO DE CORES COMO
PANO DE FUNDO
PODE SER ÚTIL PARA DAR DESTAQUE A UMA CÉLULA EM
ESPECIAL. EXEMPLO:
<TR>
<TD WIDTH=150 BGCOLOR =RED> VERMELHO </TD>
<TD WIDTH=150 BGCOLOR =BLEU> AZUL </TD>
</TR>
<TD>
<TD WIDTH=150 BGCOLOR =BLUE> AZUL </TD>
<TD WIDTH=150 BGCOLOR =BLUE> AZUL </TD>
</TR>
</TABLE>
TABELAS –COLOCAR UMA IMAGEM DE
FUNDO NAS TABELAS
BASTA INDICAR O ENDEREÇO E O NOME DA IMAGEM DENTRO
DA TAG TABLE.
EXEMPLO:
<TABLE BACKGROUND=“NOME DO FICHEIRO.EXTENSÃO”

BORDER=5>
<TR>
<TD>IMAGEM</TD>
</TR>
</TABLE>
TABELAS –USAR TABELAS COMO
MOLDURAS
USAR UMA TABELA COMO MOLDURA PARA UMA IMAGEM.
EXEMPLO:
<TABLE BORDER=5>
<TR>
<TD> <IMG SRC=ENDEREÇO/NOME DA FIGURA.EXTENSÃO>
</TD>
</TR>
</TABLE>
TABELAS –FORMATAR LINHAS INTERNAS
PARA ESCOLHER AS LINHAS INTERNAS QUE SERÃO
MOSTRADAS NA TABELA, ESCOLHEMOS O ATRIBUTO:
RULES DENTRO DA TAG TABLE.
RULES: COMPLEMENTOS
EXISTEM TRÊS COMPLEMENTOS PARA ESTE ATRIBUTO:
1. NONE: NENHUMA LINHA INTERNA

2. ROWS: SEM LINHAS VERTICAIS INTERNAS
3. COLS: SEM LINHAS HORIZONTAIS ENTRE CADA COLUNA
DA TABELA
NONE: SEM LINHAS INTERNAS
<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”> CATIA</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”> LARA</TD>
</TR>
</TABLE>
ROWS: SEM LINHAS INTERNAS VERTICAIS
<TABLE BORDER=“2” WIDTH=“300” RULES=“ROWS” >
<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>
COLS: SEM LINHAS HORIZONTAIS ENTRE CADA
COLUNA DA TABELA
<TABLE BORDER=“2” WIDTH=“300” RULES=“COLS”>
<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>
Formulários
É um dos recursos mais interessantes do HTML. Permitem ao
utilizador interagir com o servidor, enviando informações para o
fornecedor de serviços.
Finalidade dos formulários:
1. Venda de produtos
2. Cadastro on-line
3. Pedidos de tele-entrega
4. Reservas em hotéis
5. Solicitação de serviços no geral
6. Troca de informação entre utilizadores e servidores.
Formulários
TAG A UTILIZAR <FORM> </FORM>
COMANDOS DE FORMULÁRIOS:
1. TEXTAREA: define uma área onde o utilizador poderá digitar

linhas de texto
2. SELECT: define opções num quadro de rolamento ,
permitindo que o utilizador seleccione a opção desejada
3. INPUT: definem botões e caixas de selecção, botões para
limpar e enviar dados, linhas de texto, etc.
4. Os comandos de um formulário devem ser inseridos nas
tags apropriadas.
Formulários
Comando geral: <FORM>
ATRIBUTOS:
1. METHOD – “ “; existem dois métodos:

1. POST: envia cada informação de forma separada do URL. Desta
forma, os dados fazem parte do corpo da mensagem enviada para o
servidor e transfere grandes quantidades de dados;
2. GET: os dados entrados fazem parte do URL associado á consulta
enviada para o servidor e suporta até 128 caracteres.
2. ACTION=“NOME DA BIBLIOTECA A SER ACEDIDA NO
SERVIDOR” - cada servidor possui as suas bibliotecas, que
contêm informações para o envio de dados do seu formulário.
Formulários – tags de formulário
INPUT – opção para reunir informações, tal como:

1. Campos de senha
2. Botões para marcar
3. Caixas de selecção
4. Limpar dados digitados e enviar dados
Comando geral
<input type=“tipo a escolher”>
Existem diferentes atributos para cada tipo de type.

1. TEXT: ARMAZENA DADOS DIGITADOS PELO UTILIZADOR TAIS COMO

NOME, MORADA, TELEFONE, ETC.
<input type=“text” name=“telefone” size=“10”

maxlength=“10”>
TELEFONE
NAME: NOME OBRIGATORIO

SIZE: TAMANHO DO CAMPO VISUALIZADO NO FORMULÁRIO
MAXLENGHT: NUMERO MAXIMO DE CARACTERES A SER DETERMINADO PARA O
CAMPO.
NOTA: USAR SEMPRE O ATRIBUTO NAME PARA DEFINIR O NOME DOS CAMPOS
2. 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=“senha” size=“15”

maxlength=“15”>
PASSWORD *************

SIZE: TAMANHO DO CAMPO VISUALIZADO NO FORMULÁRIO
MAXLENGHT: NUMERO MAXIMO DE CARACTERES A SER DETERMINADO PARA O
CAMPO.
NOTA: USAR SEMPRE O ATRIBUTO NAME PARA DEFINIR O NOME DOS CAMPOS
3. CHECKBOX: DEFINE UMA CAIXA DE SELECÇÃO PARA O VISITANTE

MARCAR A OPÇÃO DESEJADA
<input type=“CHECKBOX” name=“OPERA” VALUE=“SIM”>
VALUE: VALOR DEFINIDO PARA RESPOSTA QUANDO SELECCIONADO O ITEM.
ARROZ
V FEIJÃO
4. RADIO: DEFINE UMA CAIXA DE SELECÇÃO PARA O VISITANTE
QUE SO PODE MARCAR UMA DAS SELECÇÕES
<input type=“RADIO” name=“NOTA” VALUE=“EXCELENTE”>
NAME: DEFINE O NOME DOS DADOS, É OBRIGATÓRIO.
VALUE: VALOR RETORNADO AO AUTOR, QUNDO UM DETERMINADO
NOME FOR ESCOLHIDO.
EXEMPLO:
O QUE ACHOU DESTE TUTORIAL?
ÓPTIMO
EXCELENTE
NÃO PODIA SER MELHOR

5. RESET: UM BOTÃO É INSERIDO E TEM A FUNÇÃO DE APAGAR OS

DADOS DIGITADOS NO FORMULÁRIO.
<INPUT TYPE=“RESET” VALUE=“APAGA”>
VALUE: DEFINE O NOME QUE APARECE NO BOTÃO
APAGA
6. SUBMIT: UM BOTÃO É INSERIDO E TEM A FUNÇÃO DE
SUBMETER AS INFORMAÇÕES DIGITADOS NO FORMULÁRIO PARA
O SERVIDOR.
<INPUT TYPE=“SUBMIT” VALUE=“ENVIAR”>
VALUE: DEFINE O NOME QUE APARECE NO BOTÃO
ENVIAR
6. SELECT: DEFINE UMA LISTA DE OPÇÕES COM BARRA DE
ROLAMENTO OU FIXA NA TELA DE NAVEGADOR.PODE SER
SELECCIONADO UM ITEM. É UM TAG QUE DEVE SER INICIADO E
TERMINADO. <SELECT> </SELECT>
<SELECT MULTIPLE NAME=“SOFTWARES”>

<OPTION SELECTED VALUE=“ADOBE”> ADOBE PHOTOSHOP
<OPTION SELECTED VALUE=“COREL”> CORELDRAW
</SELECT>
ADOBE
NAME: OBRIGATORIO, IDENTIFICA A LISTA

OPTION: ITEM DA LISTA
MULTIPLE: LISTA APARECE SEMPRE ABERTA
SELECTED: VALOR PADRÃO DA LISTA
VALUE: VALOR A SER RETORNADO AO SERVIDOR
7. TEXTAREA: INSERE UMA CAIXA DE TEXTO COM UM NUMERO
PREDETERMINADO DE LNHAS E COLUNAS. TEM A FINALIDADE DO
UTILIZADOR DEIXAR UMA MENSAGEM PARA O AUTOR. É UMA TAG
QUE DEVE SER INICIADA E TERMINADA.
<TEXTAREA> </TEXTAREA>
<TEXTAREA NAME=“COMENTARIOS” ROWS=“4” COLS=“40”

VALUE=“COMENTARIOS”
TEXTO PADRÃO – DIGITE AQUI OS SEUS COMENTARIOS
</TEXTAREA>
NAME: DEFINE O NOME DOS DADOS INSERIDOS comentários

ROWS: NUMERO DE LINHAS
COLS: NUMERO DE COLUNAS
VALUE: NÃO É OBRIGATORIO, INDICA QUAL O TEXTO A SER REFERENCIADO AO
AUTOR

HTML Comandos1

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML Comandos1

Enviado por

Direitos autorais:

Formatos disponíveis

HTML

A Tag FONT permite que se insira um texto com fontes de

ITÁLICO <I> TEXTO </I> ESTILO ITÁLICO

TYPEWRITER <TT> TEXTO </TT> ESPAÇO REGULAR AO

ESCREVER A PALAVRA VOCÊ: VOC&ECIRC;

• IMAGENS DE FUNDO – background

• Existem dois tipos básicos de listas:

<B>Listas não ordenadas</B>

COMANDO DE INSERÇÃO DE IMAGEM:

EXIBEM MENSAGENS QUANDO O RATO PASSA EM CIMA DA IMAGEM.

COMANDO: BORDER = “n”

OBS: NÃO SE DEVE INSERIR FICHEIROS MUITO EXTENSOS DEVIDO AO ACESSO

WIDTH: LARGURA DO PLAYER

Marcações básicas para desenvolver tabelas em HTML:

<td> segunda celula</td>

<TABLE BORDER =“0” WIDTH=“400”>

<TABLE BORDER=“1” WIDTH=“474”>

NOWRAP: SEM QUEBRA DE LINHA;O TEXTO INSERIDO DENTRO DA

COLUNA2 COLUNA3 COLUNA4 COLUNA5

<TABLE BORDER=“1” WIDTH=“80%”

<TABLE BACKGROUND=“NOME DO FICHEIRO.EXTENSÃO”

EXISTEM TRÊS COMPLEMENTOS PARA ESTE ATRIBUTO:

1. NONE: NENHUMA LINHA INTERNA

Finalidade dos formulários:

1. TEXTAREA: define uma área onde o utilizador poderá digitar

1. METHOD – “ “; existem dois métodos:

INPUT – opção para reunir informações, tal como:

Existem diferentes atributos para cada tipo de type.

1. TEXT: ARMAZENA DADOS DIGITADOS PELO UTILIZADOR TAIS COMO

<input type=“text” name=“telefone” size=“10”

NAME: NOME OBRIGATORIO

2. PASSWORD: UTILIZADO QUANDO SE DESEJA ARMAZENAR DADOS

<input type=“password” name=“senha” size=“15”

NAME: NOME OBRIGATORIO

3. CHECKBOX: DEFINE UMA CAIXA DE SELECÇÃO PARA O VISITANTE

NÃO PODIA SER MELHOR

5. RESET: UM BOTÃO É INSERIDO E TEM A FUNÇÃO DE APAGAR OS

<INPUT TYPE=“RESET” VALUE=“APAGA”>

VALUE: DEFINE O NOME QUE APARECE NO BOTÃO

<INPUT TYPE=“SUBMIT” VALUE=“ENVIAR”>

VALUE: DEFINE O NOME QUE APARECE NO BOTÃO

<SELECT MULTIPLE NAME=“SOFTWARES”>

NAME: OBRIGATORIO, IDENTIFICA A LISTA

<TEXTAREA NAME=“COMENTARIOS” ROWS=“4” COLS=“40”

NAME: DEFINE O NOME DOS DADOS INSERIDOS comentários

Você também pode gostar