Enquanto estudava HTML, achei interessante fazer um resumo de comandos
para o meu próprio uso. Depois, resolvi compartilhá-lo com meus
amigos ocultos da Internet. Aqui eu apresento as marcas HTML, exemplos e
explicações de como fazer. Creio que isto será útil principalmente para
aquelas pessoas que já têm uma idéia sobre HTML mas ainda não dominam
a linguagem. Coloquei também alguma coisa sobre JavaScript. Ao visualizar
esta página, você pode ver várias formatações HTML ou JavaScript. Para
aprender como fazer, visualize o código fonte desta página. Para isso, clique no botão direito do mouse e depois em "view source" ou "exibir código fonte".
Você vai ver muito a marca "BR" no código fonte. Na maioria das vezes ela está ali só para a mudança de linha. Estou explicando isso porque o iniciante poderia se confundir. Eu ainda estou aprendendo HTML, por isso só coloquei aqui conceitos básicos. No mais, boa sorte. (Anísio).
Parâmetros da marca body:
Background define uma figura para ficar no fundo da página.
Bgcolor define a cor de fundo da tela.
Text - define a cor do texto.
link - cor de link.
alink - cor de link clicado.
vlink - cor de link visitado.
br - muda de linha.
Testando links: Igreja Batista da Lagoinha Tribunal Regional do Trabalho
H1 H2 H3 H4 H5 H6 determinam níveis de títulos.
Primeiro Título
Segundo Título
Um título pode ter os parâmetros align= left, center ou right:
Título Centralizado
As marcas B /B ou STRONG E /STRONG determinam negrito. As marcas I /I ou EM e /EM determinam itálico.
Pode-se usar negrito e itálico ao mesmo tempo.
Font - inicia parâmetros da fonte utilizada no texto.
Face - determina o tipo de fonte.
Size - determina o tamanho da fonte.
Color - determina a cor da fonte.
A marca /font retorna ao padrão anterior.
Exemplos de cores: white (branca), black (preta), red (vermelha), yellow (amarela),
olive (verde oliva), green (verde), purple (roxa), maroon (marron).
P e /P delimitam os parágrafos, obrigando o salto de uma linha.
A marca final do parágrafo pode ser omitida.
Parâmetros: align com os valores: center, left e right.
Este é um parágrafo alinhado com o parâmetro right.
ALINHAMENTO - DIV e /DIV alinham um texto sem quebrá-lo.
O parãmetro align determina a posição do texto.
O valor do align pode ser center, left, right ou justify.
Vamos testar esse negócio de alinhamento de texto sem quebrá-lo.
Preciso digitar qualquer bobagem aqui para ver o que que o browser vai fazer com esse
meu textinho esquisito. Tomara que ele não estrague esse texto, pois eu tive
muito trabalho para digitá-lo. Acho que já chega de abobrinha. Vamos ver o resultado tão
esperado.
Podemos também centralizar um texto usando a marca CENTER e /CENTER
Para colocar uma linha horizontal basta usar HR.
Os parâmetros são opcionais: size, width, align (left, right ou center).
Testando
Esta linha é feita apenas com um HR:
Estas linhas são feitas usando parâmetros. Size determina espessura. Width é o comprimento.
Para colocar uma imagem na página, basta usar IMG SRC e o nome do arquivo: A marca IMG pode conter parâmetros: alt, border, width, height, hspace e vspace.
ALT contém texto alternativo ou legenda.
BORDER determina borda (valor numérico).
WIDTH é a largura e HEIGTH é a altura.
HSPACE e VSPACE determinam o espaço horizontal e vertical da imagem em relação aos
outros elementos da página. Vejamos: Para fazer um link para outra página: Link para o meu site.
O link pode estar associado a uma imagem:
Criação de listas: OL - ordenadas. UL - não ordenadas. DL - lista de definições.
Podem ser aninhadas.
As listas tipo OL são numeradas ou "letradas" automaticamente:
O parâmetro TYPE determina se o browser colocará números ou letras e que tipo de letras
diante de cada item da lista. Os types são: "A", "a", "I", "i" e "1" (default).
START é o início da numeração ou primeira letra a ser usada (4 = D).
Exemplo de lista ordenada:
Primeiro item
Segundo item
Terceiro item
Quarto item
Quinto item
Exemplo de lista não ordenada. (usa marca para cada item):
Primeiro item
Segundo item
Terceiro item
Primeiro item aninhado
Em um item pode haver outra lista.
Em um item pode haver uma imagem.
Em um item pode haver um link.
Quinto item aninhado
Quarto item
Quinto item
Exemplo de lista de definição, própria para glossários:
HTML
HiperText Markup Language
ASP
Active Server Page
Vamos à utilização de formulários
Em uma marca FORM pode-se usar também o parâmetro TARGET, que identifica o frame onde
o form será exibido.
O campo de entrada INPUT pode ter os parâmetros: TYPE, NAME, VALUE, SIZE, MAXLENGHT E CHECKED.
O SIZE determina o tamanho do campo que vai aparecer na tela, sem limitar o conteúdo a ser
digitado.
O MAXLENGHT limita a digitação.
O CHECKED já mostra marcada a opção. Pode ser usado nos tipos radio e checkbox.
Campo senha:
Exemplo de checkbox com várias opções (o name é sempre o mesmo, mas o value muda):
Pode-se também usar uma imagem no lugar dos botões submit e reset:
Em seguida, um script que cria um menu de opcoes. Cada página é chamada
quando a opção é selecionada.
Em seguida, um script que cria um menu de opcoes. Cada página é chamada
quando se clica em ok. Opss.. Este não está funcionando.
Exemplo: caixa de alerta.
Clique no link "LAGOINHA" para exibir caixa de alerta:
Exemplo de janela de confirmação. Clicando no link, será apresentada janela
pedindo confirmação para acesso à página linkada.
Internet Grátis
Exemplo de tabela.
Uma tabela é um conjunto de linhas e colunas que se interceptam.
Em cada interseção verifica-se um espaço quadrangular chamado célula.
Na célula podemos inserir qualquer elemento HTML: texto, imagem, link, formulário,
De fato, se você quiser, sua página html pode estar toda dentro de uma tabela.
Assim, sua tabela seria aberto logo após o BODY e fechada imediatamente antes do /BODY.
TABLE e /TABLE marcam o início e o fim da tabela.
TR e /TR marcam o início e o fim de uma linha da tabela.
TD e /TD marcam o início e o fim de uma célula. Uma linha pode conter n células.
TH e /TH marcam o início e o fim de uma célula de título (para linha ou coluna).
CAPTION e /CAPTION marcam o início e o fim do título da tabela.
BORDER determina uma borda para as células. Este parâmetro é opcional.
WIDTH determina a largura da tabela (percentual em relação à tela).
CELLSPACING determina o espaço entre as células (largura das bordas).
CELLPADDING determina o espaço entre o conteúdo das células e suas bordas.
ALIGN determina o alinhamento horizontal da tabela.
BGCOLOR determina a cor de fundo da tabela.
Eis uma tabela simples, sem bordas:
Título da Tabela
Título da coluna 1
Título da coluna 2
Título da Linha 1
Célula 1.1
Célula 1.2
Título da Linha 2
Célula 2.1
Célula 2.2
Título da Linha 3
Célula 3.1
Célula 3.2
Agora, uma tabela mais trabalhada:
Título da Tabela
Título da coluna 1
Título da coluna 2
Título da Linha 1
Célula 1.1
Célula 1.2
Título da Linha 2
Célula 2.1
Célula 2.2
Título da Linha 3
Célula 3.1
Célula 3.2
Uma linha de célula pode também ter alguns parâmetros:
ALIGN determina o alinhamento horizontal do conteúdo das células de uma linha.
ALIGN pode ter os valores: center, left ou right. O default é left.
VALIGN define o alinhamento vertical: top, middle ou bottom. Default: middle.
BGCOLOR define a cor de fundo da linha.
Uma célula (TD ou TH) também pode ter alguns parâmetros. Então, você pode definir uma configuração
para a linha toda, ou então para cada célula, de modo específico.
Os parâmetros de célula são:
ALIGN, VALIGN, BGCOLOR e...
NOWRAP determina que o texto de uma célula será apresentado numa só linha.
COLSPAN determina o número de colunas ocupadas por uma célula. Expande a largura da célula.
Se COLSPAN=2 então aquela célula ocupa 2 colunas.
ROWSPAN determina o número de linhas ocupadas por uma célula. Expande a altura da célula.
Se ROWSPAN=2 então aquela célula ocupa 2 linhas.
Vejamos então uma tabela com alguns desses parâmetros:
Título da tabela colocado em uma célula preta expandida.
Coluna 1
Coluna 2
Título da Linha 1
Célula 1.1
Célula 1.2
Título da Linha 2
Célula 2.1
Célula 2.2
Título da Linha 3
Célula 3.1
Célula 3.2
Vamos aos frames. Um frame é um recurso que permite dividir a tela em áreas distintas,
de modo que cada uma delas possa ser administrada isoladamente. Você pode, por exemplo,
abrir em cada área uma página html diferente.
Para usar frames é necessário que se tenha uma página html de abertura do site, com o
objetivo específico de definir os frames e as páginas que serão mostradas em cada um deles.
Exemplo: Clique no link abaixo:
FRAMESET e /FRAMESET delimitam as definições dos frames.
Seus parâmetros são:
COLS - número de colunas do frame e a largura de cada uma. Então: COLS="200,*" significa
que a tela será dividida em 2 frames. O primeiro terá a largura de 200 pixels. A segunda
terá a largura *, ou seja, todo o espaço restante na tela.
ROWS - define o número de regiões horizontais e a altura de cada uma. Exemplo: ROWS="200,*,400"
BORDER - define a largura da linha que divide as regiões. Valor zero elimina a linha.
BORDERCOLOR - define a cor da linha divisória.
FRAMEBORDER - (yes/no) define efeito 3D para a linha. O IE não usa.
A marca FRAME deve aparecer tantas vezes quantas forem as divisões da tela.
FRAME possui os parâmetros:
SRC (source) - determina a página que será carregada no frame.
NAME - nome do frame.
MARGINHEIGHT - define margem vertical.
MARGINWIDTH - define margem horizontal.
NORESIZE - fixa a posição da linha divisória.
SCROLLING - determina exibição ou não da barra de rolagem. Valores: yes, no, auto.
O valor AUTO determina que a barra de rolagem será apresentada automaticamente, caso
o conteúdo do frame seja maior que a área do mesmo.
NOFRAMES e /NOFRAMES delimitam conteúdo a ser exibido apenas em browsers antigos,
que não suportam frames. Estas marcas também devem estar entre FRAMESET e /FRAMESET.
Para direcionar um link ou um formulário para um frame, use a marca TARGET:
Em um link: A HREF=... TARGET=NomeDoFrame. Assim, a nova página será aberta dentro
do frame especificado.
Em um form: FORM ACTION=... TARGET=...
FRAMES ESPECIAIS
Parâmetros de TARGET:
_blank - abre o documento em uma nova janela do browser.
_self - abre no mesmo frame.
_top - abre na janela do browser, desconsiderando os frames.
_parent - quando se usam frames dentro de frames, o _parent determina a abertura
na área original.
Veja outro exemplo com uma página de frames mais elaborada. Clique no link abaixo: