Baixe Elementos HTML e outras Notas de estudo em PDF para Engenharia Naval, somente na Docsity!
Elementos HTML - Guia de Referência
Este Guia de Referência apresenta em primeiro plano uma tabela onde estão relacionadas as tags HTML e seus respectivos atributos. Nas duas primeiras colunas da tabela, aparecem as tags de abertura e de fechamento e, a terceira, a descrição da finalidade de cada uma. Na última coluna aparecem os atributos com seus possíveis valores. E eis o que é mais importante: um clique no atributo leva você a um esclarecimento a respeito dele com riqueza de detalhes. As tags e atributos estão sinalizados com vermelho ou verde. O sinal vermelho indica desaprovação pelo W3C e o verde indica que não há desaprovação.
1 - DOCUMENTO
Abertura Fechamento Finalidade Atributos
Abertura e fechamento do documento HTML.
Abertura e fechamento do cabeçalho do documento
Abertura e fechamento do título do documento
Abertura e fechamento do corpo do documento
bgcolor=nomecor | #rrggbb | rgb(x,x,x) background=nomearquivo text=nomecor | #rrggbb | rgb(x,x,x) link=nomecor | #rrggbb | rgb(x,x,x) vlink=nomecor | #rrggbb | rgb(x,x,x) alink=nomecor | #rrggbb | rgb(x,x,x)
Abertura e fechamento de comentários 2 - TEXTO Abertura Fechamento Finalidade Atributos
... ...
Abertura e fechamento de um cabeçalho. São 6 níveis: h1 (o maior) até h6 (o menor).
align=left | center | right
Dispensável
Inicia um parágrafo pulando uma linha.
align=left | center | right | justifiy
Não há Vai para outra linha sem pular nenhuma.
clear=left | right | all
Coloca o texto em negrito
Coloca o texto em itálico
Coloca o texto em fonte monoespaçada
Coloca o texto sobrescrito
Coloca o texto subscrito
Estabelece o tipo de fonte, o tamanho e a cor.
face="nomefonte, nomefonte" size=+x | - x | x color=nomecor | #rrggbb | rgb(x,x,x)
Não há Cria uma linha divisória horizontal.
align=left | center | right size=x width=x | x% noshade
Abertura e fechamento de uma divisão de página cujos elementos que estão dentro dela obedecerão às mesmas definições.
align=left | center | right
3 - LISTAS
Abertura Fechamento Finalidade Atributos
Abertura e fechamento de uma lista ordenada.
type=1 | A | a | I | i start=x
Abertura e fechamento de uma lista não ordenada.
type=disc | circle | square
Dispensável
Inicia um item de lista ordenada ou não ordenada.
type=1 | A | a | I | i | disc | circle | square
Abertura e fechamento de uma lista de definições.
Dispensável
Inicia o termo a ser definido.
Dispensável Inicia a definição do termo.
4 - LINKS Abertura Fechamento Finalidade Atributos
rgb(x,x,x)
Abertura e fechamento de uma célula dentro de uma linha da tabela.
align=left | center | right valign=top | middle | bottom width=x height=x colspan=x rowspan=x bgcolor=nomecor | #rrggbb | rgb(x,x,x)
Abertura e fechamento de uma célula dentro de uma linha da tabela. Funciona como , mas o texto que contém aparece em negrito e centralizado (uma espécie de cabeçalho ou título).
Os mesmos atributos de
Esclarecimentos detalhados sobre os atributos das tags
bgcolor
Como atributo de
Define uma cor de fundo para a página. Pode-se usar o nome da cor, o código hexadecimal no formato #rrggbb ou o código decimal no formato rgb(x,x,x). Neste último formato, x pode ser um número de 0 a 255 ou um percentual de 0% a 100%.
Exemplos:
Note que o símbolo # no início do código hexadecimal é obrigatório.
Disponibilizamos neste site uma tabela de cores que você poderá usar.
Observações:
- Muitas vezes você não poderá utilizar o nome das cores, porque poucas têm um nome reconhecido pelo navegador. É recomendável que se utilize sempre o código hexadecimal.
- Ao escolhermos uma cor de fundo, devemos nos preocupar também com a definição de uma cor adequada para o texto, para que ocorra o devido contraste
entre ambas e fique assegurada a nitidez dos caracteres. Assim, um fundo de cor clara exige uma cor escura para o texto, já um fundo de cor escura exige uma cor clara
bgcolor
Como atributo de , , ou
Define uma cor de fundo de uma tabela, linha ou célula. Pode-se usar o nome da cor, o código hexadecimal no formato #rrggbb ou o código decimal no formato rgb(x,x,x). Neste último formato, x pode ser um número de 0 a 255 ou um percentual de 0% a 100%.
Quando uma cor de fundo é definida para a página na tag , a tabela também será abrangida, mas mesmo assim você poderá definir outra cor para a tabela, o que irá distingüi-la. Isso pode ser feito também para uma ou mais linhas e/ou células.
Exemplos:
Note que o símbolo # no início do código hexadecimal é obrigatório.
Disponibilizamos neste site uma tabela de cores que você poderá usar.
Observações:
- Muitas vezes você não poderá utilizar o nome das cores, poucas têm um nome reconhecido pelo navegador. É recomendável que se utilize sempre o código hexadecimal.
- Ao escolhermos uma cor de fundo, devemos nos preocupar também com a definição de uma cor adequada para o texto, para que ocorra o devido contraste entre ambas e fique assegurada a nitidez dos caracteres. Assim, um fundo de cor clara exige uma cor escura para o texto, já um fundo de cor escura exige uma cor clara
background
Como atributo de
Define uma imagem como fundo de uma página. Supondo a existência de um arquivo de imagem com o nome "imagem.gif" no mesmo diretório onde se encontra a página, podemos fazer o seguinte: .
bgcolor="black" background="imagem.gif">. Mas é claro que essa preocupação será desnecessária, caso o texto tenha uma cor que possa apresentar-se nítida num fundo branco.
text
Como atributo de .
Define a cor do texto para todo o corpo da página, ou seja, para tudo que está entre as tags e , sendo que o padrão é black (preto). Pode-se usar o nome da cor, o código hexadecimal no formato #rrggbb ou o código decimal no formato rgb(x,x,x). Neste último formato, x pode ser um número de 0 a 255 ou um percentual de 0% a 100%.
Exemplos:
Note que o símbolo # no início do código hexadecimal é obrigatório.
Disponibilizamos neste site uma tabela de cores que você poderá usar.
Se você quer que o texto da página, do início ao fim, tenha determinada cor, então defina esse atributo. Mas, no decorrer do texto você pode mudar a cor de segmentos da página, utilizando a tag com o seu atributo color. Mas, depois que for aplicada a tag de fechamento , o texto volta à cor estabelecida no atributo text de .
Veja o exemplo abaixo:
Este parágrafo é verde, porque essa cor foi estabelecida como atributo de body.
Estas palavras são azuis, mas estas voltam a ser verdes.
Observações:
- Muitas vezes você não poderá utilizar o nome das cores, porque poucas têm um nome reconhecido pelo navegador. É recomendável que se utilize sempre o código hexadecimal.
- Ao definirmos uma cor para o texto, devemos considerar a cor que foi escolhida como fundo, para que ocorra o devido contraste entre ambas e fique assegurada a nitidez dos caracteres. Assim, um fundo de cor clara exige uma cor escura para o texto, já um fundo de cor escura exige uma cor clara.
link, vlink e alink
Atributos de .
São três atributos que definem as cores dos links, já que estes devem diferenciar-se do restante do texto, para que o visitante da página possa identificá-los com facilidade.Tais definições valem para todos os links que aparecem dentro do corpo da página, ou seja, entre as tags e . Veja o que é definido em cada um dos atributos:
link - Define a cor dos links que não foram visitados. vlink - Define a cor dos links já visitados. alink - Define a cor dos links ativos. Um link está ativo no momento em que se dá um clique nele.
Pode-se usar o nome da cor, o código hexadecimal no formato #rrggbb ou o código decimal no formato rgb(x,x,x). Neste último formato, x pode ser um número de 0 a 255 ou um percentual de 0% a 100%. Existe uma cor padrão para cada um dos três casos, para quando não se faz a definição.
Exemplos:
Note que o símbolo # no início do código hexadecimal é obrigatório.
Disponibilizamos neste site uma tabela de cores que você poderá usar.
Observações:
- Muitas vezes você não poderá utilizar o nome das cores, porque poucas têm um nome reconhecido pelo navegador. É recomendável que se utilize sempre o código hexadecimal.
- Ao definirmos uma cor para o texto, devemos considerar a cor que foi escolhida como fundo, para que ocorra o devido contraste entre ambas e fique assegurada a nitidez dos caracteres. Assim, um fundo de cor clara exige uma cor escura para o texto, já um fundo de cor escura exige uma cor clara.
align
Como atributo de
Define o alinhamento do parágrafo dentro da página. O funcionamento é igual ao alinhamento que é feito num processador de textos, como o Word. Os valores que podem ser atribuídos são os seguintes: left - Alinhamento à esquerda (o padrão). right - Alinhamento à direita. center - Alinhamento ao centro
**bottom** - A imagem coloca-se à esquerda do texto. O texto tem seu início na linha nivelada com o canto inferior direito da imagem. Este é o padrão, portanto não precisa ser especificado. Exemplo: texto.
left - A imagem coloca-se à esquerda da página. O texto tem seu início na linha nivelada com o canto superior direito da imagem, contornando-a. Exemplo: texto.
right - A imagem coloca-se à direita da página. O texto tem seu início na linha nivelada com o canto superior esquerdo da imagem, contornando-a. Exemplo: texto.
top - A imagem coloca-se à esquerda do texto. O texto tem seu início na linha nivelada com o canto superior direito da imagem. Apenas uma linha fica ao lado da imagem, sendo que o resto do texto passa a fluir por baixo a partir da margem esquerda da página. É de se notar que esse tipo de alinhamento é mais útil com pouco texto. Exemplo: texto.
middle - A imagem coloca-se à esquerda do texto. O texto tem seu início na linha nivelada com o ponto central da imagem (sentido vertical). Apenas uma linha fica ao lado da imagem, sendo que o resto do texto passa a fluir por baixo a partir da margem esquerda da página. Como em top, esse alinhamento também é mais útil com pouco texto. Exemplo: texto.
O alinhamento de uma imagem dentro da página pode ser feito também utilizando o atributo align na tag
ou
, mas a definição em , se for left ou right, irá prevalecer.
Já os valores bottom, middle e top apenas controlam o fluxo do texto e, com eles, o alinhamento da imagem obedece ao que foi definido em
ou
, sendo que o padrão é left. Podemos esclarecer isso melhor através de alguns exemplos, onde fizemos a combinação do alinhamento definido em
com o alinhamento definido em .
pouco texto
pouco texto
pouco texto
pouco texto
Observação:
Você pode interromper o fluxo do texto ao lado da imagem, fazendo-o passar para a parte de baixo antecipadamente, com a utilização do atributo clear na tag
.
face
Como atributo de
Define a fonte do texto, como arial, verdana , etc. O padrão costuma ser Times New Roman , dependendo do navegador. Você deve preocupar-se em colocar uma fonte mais comum, porque pode ser que o visitante não tenha a que você escolheu instalada em seu computador. Caso ocorra isso, o texto será exibido com a padrão.
Exemplos:
Pelo segundo exemplo, você percebe que pode especificar mais de uma fonte, para que o navegador escolha a primeira, se encontrá-la, e se não encontrar, coloque a segunda e assim por diante. Neste caso você não pode deixar de colocar o valor do atributo entre aspas que em alguns casos são opcionais. Quando um atributo possui espaços em seu interior as aspas passam a ser necessárias. No caso exemplificado, não fossem colocadas as aspas, o navegador entenderia que o nome da primeira fonte é apenas Comic. Note que tem de ser apenas um par de aspas, englobando todos os nomes.
Observação:
Quando você coloca a tag com os atributos face, size e color em qualquer ponto do documento, a partir daí todo o texto terá essa fonte até encontrar o fechamento , exceto o conteúdo das tabelas. O texto antes e depois de uma tabela terá a fonte que você definiu, mas o texto dentro de suas células terá a fonte padrão. Então, é preciso definir a fonte dentro de cada célula, ou seja, utilizar as tags e entre e .
size
Como atributo de
Define o tamanho da fonte do texto. Existem 7 tamanhos numerados de 1 a 7 por ordem crescente. Portanto, se especificarmos size="1", teremos o menor tamanho e, se especificarmos size="7", teremos o maior. Você notará que esses números não coincidem com os números que identificam o tamanho da fonte em seu processador de textos, como o Word, onde encontramos, por exemplo, tamanhos 10, 12, etc. Aqui é uma escala de 1 a 7 que vigora.
Observações:
- Muitas vezes você não poderá utilizar o nome das cores, porque poucas têm um nome reconhecido pelo navegador. É recomendável que se utilize sempre o código hexadecimal.
- Se a definição da cor não for feita em (ou, se feita, mas depois fechada com ), o texto será apresentado na cor padrão que é o preto (black ou #000000) ou a definida no atributo text de .
- Ao definirmos uma cor para o texto, devemos considerar a cor que foi escolhida como fundo, para que ocorra o devido contraste entre ambas e fique assegurada a nitidez dos caracteres. Assim, um fundo de cor clara exige uma cor escura para o texto, já um fundo de cor escura exige uma cor clara.
- Quando você coloca a tag com os atributos face, size e color em qualquer ponto do documento, a partir daí todo o texto terá essa fonte até encontrar o fechamento , exceto o conteúdo das tabelas. O texto antes e depois de uma tabela terá a fonte que você definiu, mas o texto dentro de suas células terá a fonte padrão. Então, É preciso definir a fonte dentro de cada célula, ou seja, utilizar as tags e entre e .
width
Como atributo de
Define a extensão da linha horizontal criada. O padrão é a linha atingir toda a largura da página. Deve ser especificado em quantidade de pixels ou em percentual. Veja os exemplos:
- A linha terá 200 pixels de extensão.
- A linha terá uma extensão igual à metade da largura da página.
width e height
Como atributos de
Definem a largura e altura da imagem em pixels. Deve-se colocar exatamente as medidas que a imagem possui. Obtém-se esses valores através da utilização de um designer gráfico ou exibindo a imagem no próprio navegador e, com um clique com o botão direito do mouse sobre ela, lê-se suas propriedades.
Exemplo:
Pode-se inserir uma imagem sem definir esses dois atributos, mas isso não é recomendável. Vejamos por que: fazendo tal definição, o navegador, durante o processamento, já reserva o espaço necessário para o carregamento da imagem. Assim o visitante poderá ler o texto que se apresenta, antes da imagem ser baixada.
É possível reduzir ou aumentar o tamanho da imagem através desses atributos, mas isso também não é conveniente, porque a imagem apresenta-se distorcida, além de que, quando fazemos reduçao, estamos utilizando um arquivo de imagem maior do que o necessário.
noshade
Como atributo de
A linha horizontal sem esse atributo é desenhada com uma sombra que lhe dá um efeito de três dimensões. Com esse atributo a linha fica sem essa sombra, ou seja, perde o efeito de três dimensões. Exemplo:
clear
Como atributo de
Utilizado para interromper o fluxo de texto ao lado de uma imagem ou tabela. Quando ou contém o atributo align definido como left ou right, o texto inicia-se ao lado da imagem ou da tabela e vai contornando-a. Então,
com o atributo clear faz com que esse fluxo lateral seja interrompido.O texto é jogado para a próxima margem livre.
São os seguintes os valores que podem ser atribuídos:
left - pula e atinge a margem livre após a imagem ou tabela alinhada à esquerda. right - pula e atinge a margem livre após a imagem ou tabela alinhada à direita. all - pula e atinge as duas margens livres (esquerda e direita).
Exemplo: texto
texto
Observação: Usa-se all com mais freqüencia porque há situações em que, com sua utilização, pode-se obter o mesmo que obteríamos com left ou right. Mas left e right têm especial importância quando temos uma imagem ou tabela à esquerda e outra à direita, e uma delas é menor na altura. Neste caso, você pode querer que o efeito seja interrompido apenas em relação à imagem menor, mas que continue em relação à maior.
type
Como atributo de
As listas ordenadas têm, por padrão, os seus itens numerados com algarismos arábicos. Você poderá mudar o tipo de marcador para letras, minúsculas ou maiúsculas, ou para algarismos romanos, minúsculos ou maiúsculos. Para fazer isso basta definir o atributo type com um dos seguintes valores: 1 - seqüência numérica (algarismos arábicos) - o padrão. a - letras minúsculas. A - letras maiúsculas. i - seqüência numérica (algarismos romanos minúsculos). I - seqüência numérica (algarismos romanos maiúsculos). Exemplo:
Como atributo de
acessa um alvo localizado no interior de outra página mas no mesmo site.
Notar que, para acessar um ponto localizado no interior do arquivo, é necessário o símbolo #.
name
Como atributo de
Define o alvo a ser atingido no interior da página. Quando você estabelece um link, precisa de uma referência para o destino, ou seja, é necessário atribuir um valor ao atributo href. Quando se trata de acessar um site ou um arquivo, a referência já existe, porque você dispõe do endereço do site ou do nome do arquivo. Mas quando você precisa atingir um alvo no interior da página, é necessário criar tal referência.
Para isso você utiliza o atributo name : textoalvo onde nomealvo é um nome que você cria e textoalvo é o trecho de texto que você quer atingir dentro da página.
Vejamos o exemplo abaixo: Capítulo 3 [corpo do texto intitulado capítulo 3]
Agora você pode acessar o capítulo 3 de seu documento assim:
Capítulo 3.
Note que é necessário usar o símbolo # no atributo href.
target
Como atributo de
Define em qual janela (ou frame) que será exibido o resultado do link. Se não for especificado, a exibição será feita na própria janela onde está o link.
Pode-se atribuir um dos seguintes valores:
_blank - A exibição é feita em uma nova janela. _self - A exibição é feita na própria janela onde está o link(padrão). _parent - A exibição é feita na janela que contém o frame onde está o link. _top - A exibição é feita na janela que ocupa posição mais alta na hierarquia, quando há frames.
Exemplo: Site ABC.
src
Como atributo de
Especifica o arquivo de imagem ou o caminho completo (path). Observe que src vem de source (fonte).
Exemplos: acessa um arquivo de imagem no mesmo mesmo diretório. acessa um arquivo de imagem noutro diretório.
lowsrc
Como atributo de
Define uma imagem provisória, de baixa resolução, para ser exibida antes de ser carregada a definitiva. É um truque para melhorar a performance da página, mas hoje em dia pouca gente o utiliza porque as máquinas agora têm mais recursos.
Pode-se,por exemplo, carregar uma imagem em preto e branco antes da colorida. A especificação é feita da mesma forma que em src, ou seja, o nome do arquivo ou o caminho completo (path).
Exemplo:
alt
Como atributo de
Especifica um texto que aparecerá dentro do retângulo da imagem até que ela seja baixada. Observe que alt vem de alternative (texto alternativo). Esse texto aparecerá também numa tarjeta quando o ponteiro do mouse for estacionado sobre a imagem.
Essa definição é importante para que o visitante saiba de qual imagem se trata, antes de ela ser exibida, ou mesmo depois.
Exemplo:
É imporante que você digite o texto entre aspas. Sabemos que em muitos casos as aspas são dispensáveis, mas aqui, se não fossem colocadas, o navegador iria ver só a primeira palavra. No caso, exibiria apenas a palavra foto.
Como atributo de
O atributo alt na tag especifica um texto que aparecerá numa tarjeta quando o ponteiro do mouse for estacionado sobre uma área clicável de um mapa de imagens.
Muitas vezes você terá que recorrer ao código hexadecimal, porque apenas algumas cores podem ser identificadas pelo nome.
Note que o símbolo # no início do código hexadecimal é obrigatório.
Disponibilizamos neste site uma tabela de cores que você poderá usar.
hspace e vspace
Como atributos de
Definem as margens da imagem, em pixels. O atributo hspace define as margens à esquerda e à direita (sentido horizontal) e o vspace acima e abaixo (sentido vertical). Muito úteis para distanciar o texto da extremidade da imagem.
Exemplo:
Não é possível definir margem à esquerda diferente da margem à direita. Da mesma forma, não é possível definir margem de cima diferente da margem de baixo.
cellspacing e cellpadding
Como atributos de
Definem, em pixels, o espaço entre as células e a margem dentro das células, respectivamente.
Com cellspacing você cria um distanciamento entre as extremidades das células, nos quatro lados, à direita, à esquerda, em cima e embaixo.
Com cellpadding, você também cria um distanciamento, mas do conteúdo da célula em relação às suas extremidades e também nos quatro lados.
Exemplo:
Para se ter uma idéia mais nítida da diferença entre os dois atributos, observe uma tabela com bordas, ou seja, com o atributo border igual ou maior que 1. Nela você percebe que cellspancing estabelece um distanciamento entre os contornos das células contíguas. Já cellpaddig, estabelece um distanciamento do conteúdo da célula em relação ao seu contorno.
Outra forma de se observar o efeito causado por esses atributos é colocando uma cor de fundo em cada célula com bgcolor. Esses fundos criam para cada célula uma espécie de tarja e dentro da tarja fica o conteúdo da célula. Assim, com cellspacing, você cria um distanciamento entre as tarjas, à esquerda e à direita, bem como em cima e embaixo. E,
com cellpadding, você cria distanciamentos do conteúdo em relação à extremidade da tarja.
É bom esclarecer que o funcionamento de ambos os atributos não depende de que haja bordas ou fundos nas células. Entretanto, quando temos uma tabela que não possui bordas, e que para suas células não houve nenhuma definição de cor de fundo ou de imagem de fundo, na prática, pode ser indiferente utilizar cellspacing ou cellpadding para estabelecer espaços entre os conteúdos das células. Ou seja, neste caso, pode-se estabelecer o espaço desejado utilizando apenas um dos atributos.
width
Como atributo de e
Em define a largura da tabela e em define a largura da célula. Os valores são atribuídos em pixels ou em percentagem. Não sendo definida as larguras da tabela e das células, cada uma das células terá uma largura suficiente para acomodar o seu conteúdo. E, se as larguras forem definidas de forma insuficiente para acomodar o conteúdo, haverá quebra de linhas, fazendo a altura crescer. Mas isso só vai ocorrer se o conteúdo for quebrável, como um texto, por exemplo. Suponha que o conteúdo seja uma imagem com 100 pixels de largura e que a célula tenha uma definição de 50 pixels, neste caso, prevalecerá a largura suficiente para acomodar a imagem.
A soma dos valores das larguras das células de uma linha será igual à largura da tabela. É interessante definir as larguras em percentagem, porque em pixels, a visualização não será a mesma dependendo da resolução de vídeo.
Eis um exemplo:
célula 1 da linha 1 célula 2 da linha 1
célula 1 da linha 2 célula 2 da linha 2
Se você definir a largura da tabela em 100%, ela ocupará toda a largura da página que é possível ser vista sem a barra de rolagem horizontal. Isso com qualquer resolução de vídeo.
Quando não há definição de largura para as células, a largura total da tabela é dividida igualmente entre elas e, quando apenas algumas estão definidas, o espaço restante é dividido igualmente entre as demais.
A não ser nos casos em que se usa o atributo colspan, todas as células de uma mesma coluna terão a largura igual, prevalencendo sempre a maior largura. Portanto, é possível alterar a largura de uma coluna, definindo-a em uma única célula dentro de uma coluna.
