Ir para conteúdo

Tutorial Sobre Html - Parte 2

Rafael Gomes

Por Rafael Gomes
em Programação Web

 Share

Posts Recomendados

Rafael Gomes

Rafael Gomes 5

Postado
Postado (editado)

Tutorial HTML - Parte 2

 

Elementos texto:

 

Elementos e tags responsáveis pela parte visual do site.

 

 

Tags <FONT> e </FONT>:

 

A tag <FONT> configura o tamanho, cor e fonte dos textos, e deve ser fechada com

 

</FONT>. Os atributos para <FONT> são: Face, Size e Color.

 

 

Face:

 

O atributo face define a fonte (Arial, Helvetica, Verdana, etc.) É possível definir uma segunda

 

(ou mais) fonte para ser carregada, caso o computador do visitante não tenha a primeira,

 

basta separar o nome das fontes com vírgula. Exemplos: <FONT FACE="Arial"> ou <FONT

 

FACE="Arial, Verdana">.

 

Dica: Use sempre fontes conhecidas, como Arial, Helvetica ou Verdana, caso

 

contrário, suas páginas poderão perder qualidade visual ao serem vistas por visitantes que

 

não as possuem em seu computador.

 

 

Size:

 

O atributo size determina o tamanho da fonte (1 a 7). Exemplo: <FONT SIZE="2">.

 

 

Color:

 

O atributo color define a cor do texto. Exemplo: <FONT COLOR="#3300CC">.

 

 

Tag <BASEFONT>:

 

A tag <BASEFONT> configura um estilo padrão de fonte para toda página HTML, e deve ser

 

usada após a tag <BODY>. Exemplo: <BASEFONT SIZE="2">.

 

 

Parágrafo:

 

As tags <P> e </P> delimitam um parágrafo, sempre deixando uma linha em branco antes

 

da próxima.

 

O alinhamento do parágrafo pode ser configurado através do parâmetro opcional Align. Ele

 

deve conter os valores Left (esquerda), Center (centro) ou Right (direita). Exemplo: <P

 

ALIGN="Center">...</P>.

 

 

Quebra de linha:

 

A tag <BR> força uma quebra de linha (não deixa linha em branco antes da próxima).

 

O atributo clear insere uma quebra de linha que limpa. Alinhamentos: left (esquerda), right

 

(direita) ou all (tudo). Exemplo: <BR CLEAR=RIGHT>.

 

 

Negrito, sublinhado e itálico:

 

As tags <B> Bold, <U> Underlined e <I> Italic, adicionam as seguintes características ao

 

texto: <B>...</B> texto em negrito, <U>...</U> texto sublinhado e <I>...</I> texto em

 

itálico.

 

Outras formatações:

 

Veja abaixo mais algumas tags e elementos ligadas a formatação de texto:
<H>...</H>: Título de 1 (maior) a 6 (menor), ou seja, <H1></H1>..., <H6></H6>.
<SMALL>...</SMALL>: Texto menor.
<BIG>...</BIG>: Texto maior.
<STRONG>...</STRONG>: Texto forte.
<STRIKE>...</STRIKE>: Texto tachado.
<SUP>...</SUP>: Texto em sobrescrito.
<SUB>...</SUB>: Texto em subscrito.
<TT>...</TT>: Texto de teletipo.
<PRE>...</PRE>: Texto pré-formatado.

 

 

Imagens:

 

A tag <IMG SRC="imagem.extensão"> insere uma imagem a sua página e os atributos

 

width e height definem a largura e altura respectivamente. Exemplo: <IMG

 

SRC="imagem.extensão" WIDTH="largura" HEIGHT="altura">.

 

Com o elemento opcional alt é possível acrescentar um texto descritivo a imagem (ao

 

posicionar o mouse sobre a figura o texto será exibido na tela). Exemplo: <IMG

 

SRC="imagem.extensão" ALT="texto">.

 

 

Hyperlinks:

 

As tags <A HREF="URL">...</A> são usadas para inserir um link a um texto ou a uma

 

imagem. Exemplos:

 

Link em um texto: <A HREF="http://www.crieseuwebsite.com">Crie'>http://www.crieseuwebsite.com">Crie seu Web site</A>.

 

Link em uma imagem: <A HREF="endereço"><IMG SRC="imagem.extensão" BORDER="0"

 

WIDTH="largura" HEIGHT="altura"></a>. Use BORDER="0" para que a imagem não tenha

 

borda.

 

Para que o link se abra em uma nova janela adicione o comando target="_blank" após o

 

endereço. Exemplo: <A HREF="http://www.crieseuwebsite.com" TARGET="_BLANK">Crie

 

seu Web site</A>.

 

Também é possível criar links para acessar arquivos (download), veja os exemplos: <A

 

HREF="http://www.crieseuwebsite.com/arquivo.zip">Download</A> ou <A

 

HREF="http://www.crieseuwebsite.com/arquivo.exe">Download</A>.

 

 

Indicadores:

 

A tag <A NAME="palavra"> é usualmente inserida antes de um subtítulo ou seção. Para

 

criar um link que aponte diretamente para o indicador, acrescente "#palavra" junto a URL,

 

como no exemplo: <A HREF="pagina.html#palavra">Link</A>.

 

 

E-mails:

 

Para criar um link, que quando clicado, abre a janela de mensagem do correio eletrônico,

 

use o atributo href="mailto:endereço". Para que a janela se abra com o assunto já

 

preenchido acrescente ainda o atributo subject. Exemplo: <A

 

HREF="mailto:webmaster@crieseuwebsite.com?subject=Sobre o site">E-mail</A>.

 

 

Barra:

 

A tag <HR> cria uma barra com aparência chanfrada. Seus atributos são: align (alinhamento

 

da barra), width (largura da barra em porcentagem ou pixels) e size (altura da barra em

 

pixels). Exemplo: <HR ALIGN="alinhamento" WIDTH="largura" SIZE="altura">.

 

No Internet Explorer é possível usar o atributo color. Exemplo: <HR COLOR="cor"

 

NOSHADE>. A opção noshade cria uma barra sem efeito chanfrado.

 

 

Listas:

 

Para criar uma lista ordenada inicie com a tag <OL>, adicione os itens com a tag <LI> e

 

finalize a lista com </OL>. Exemplo:

 

<OL>

<LI>Item da lista...

<LI>Item da lista...

<LI>Item da lista... (não precisa ser fechada)

</OL>

 

Na lista não ordenada basta trocar os comandos <OL> e </OL>, da lista ordenada, por <UL>

 

e </UL>.

 

Para criar uma lista definida inicie com a tag <DL>, adicione o conteúdo com as tags <DT>

 

e <DD> e finalize a lista com </DL>. Exemplo:

 

<DL>

<DT>Termo para ser definido...

<DD>Definição...

<DT>Termo para ser definido...

<DD>Definição...

<DT>Termo para ser definido...

<DD>Definição...

</DL>

 

 

 

Créditos: absolutamente para Rafael Hayashi, do Crieseuwebsite.com.

Editado por RaFaX
Link para o comentário
Compartilhar em outros sites
  • 3 months later...
Voxnot

Voxnot 1

Postado
Postado

Para entenderem melhor você poderia ter postos a forma que ficariam na web.

Como por exemplo o <OL></OL> ficaria bem legal se colocase a forma de visualisação na web.

Nem tudo é CTRL+C e CTRL+V

Fora isso esta bom.

Link para o comentário
Compartilhar em outros sites
  • 7 months later...
 Share
Ir para a lista de tópicos
×
×
  • Criar Novo...