Resumo de HTML

Olá, visitante!

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:
Este sou eu Este sou eu Este sou eu Este sou eu Este sou eu Este sou eu Este sou eu
Para fazer um link para outra página:
Link para o meu site.


O link pode estar associado a uma imagem:
Link para o meu site.

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:

  1. Primeiro item
  2. Segundo item
  3. Terceiro item
  4. Quarto item
  5. Quinto item
Exemplo de lista não ordenada. (usa marca para cada 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
Digite o seu email:

Digite o seu nome:

O que você achou deste site? Gostei. Não gostei. Achei quase mais ou menos.

De qual parte você mais gostou? O size do select determina o número de opções que serão apresentadas de uma vez.

Deixe aqui seus comentários:

Você gostaria que eu respondesse a este comentário? Sim.




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):

Você gostaria que eu respondesse a este comentário? Sim. Não. De jeito nenhum. Nem pensar.

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.
Menu:



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.

Menu:



Exemplo: caixa de alerta.
Clique no link "LAGOINHA" para exibir caixa de alerta:

LAGOINHA


Exemplo: Outra caixa de alerta. Bom exemplo para mostrar instruções para o usuário.
Clique no botão "caixa" para exibir caixa de alerta:



Exemplo: Diálogo com o visitante do site:
Clique no link "diálogo":

DIÁLOGO


Este exemplo mostra botões de navegação que utilizam o histórico da máquina do visitante.
Estes botões estão dentro de uma tabela:
Clique nos botões para voltar à página anterior ou avançar.






Pode-se navegar utilizando-se links:
Voltar
Avançar



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:

Página dividida em 2 frames


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:

Página dividida em 2 frames



















 

1