Guia de composição HTML
Amostra de comandos


 Dica: Salve esta página no seu micro e, 
       depois de desfeita a conexão, confira 
       com calma o texto-source do documento HTML   
       com o que aparece na tela do seu monitor.


Índice:

FONTS TABLE LINKS
LIST MOLDURAS CORES
COLUNAS IMAGENS FORMATAÇÕES

Exemplo de Parágrafo centralizado
(só no Netscape)

Exemplos de linhas de diferentes tamanhos (só no Netscape)

e de fontes...:
negrito italico piscante (só no Netscape) sublinhado (só no Mosaic)

Fontes Netscape Hn e FONT SIZE

AaBbCcDdEeFfGgHhIiLlMmNnOoPpQqRrSsTtUuVvZz - FS=1
AaBbCcDdEeFfGgHhIiLlMmNnOoPpQqRrSsTtUuVvZz - H6
AaBbCcDdEeFfGgHhIiLlMmNnOoPpQqRrSsTtUuVvZz - FS=1 Bold


AaBbCcDdEeFfGgHhIiLlMmNnOoPpQqRrSsTtUuVvZz - FS=2

AaBbCcDdEeFfGgHhIiLlMmNnOoPpQqRrSsTtUuVvZz - FS=2 Bold

AaBbCcDdEeFfGgHhIiLlMmNnOoPpQqRrSsTtUuVvZz - H5

AaBbCcDdEeFfGgHhIiLlMmNnOoPpQqRrSsTtUuVvZz - FS=3
AaBbCcDdEeFfGgHhIiLlMmNnOoPpQqRrSsTtUuVvZz - sem nada
AaBbCcDdEeFfGgHhIiLlMmNnOoPpQqRrSsTtUuVvZz - H7

AaBbCcDdEeFfGgHhIiLlMmNnOoPpQqRrSsTtUuVvZz - FS=3 bold

AaBbCcDdEeFfGgHhIiLlMmNnOoPpQqRrSsTtUuVvZz - H4


AaBbCcDdEeFfGgHhIiLlMmNnOoPpQqRrSsTtUuVvZz - FS=4

AaBbCcDdEeFfGgHhIiLlMmNnOoPpQqRrSsTtUuVvZz - FS=4 bold

AaBbCcDdEeFfGgHhIiLlMmNnOoPpQqRrSsTtUuVvZz - H3


AaBbCcDdEeFfGgHhIiLlMmNnOo - FS=5

AaBbCcDdEeFfGgHhIiLlMmNnOo - FS="+2"

AaBbCcDdEeFfGgHhIiLlMmNnOo - FS=5 Bold

AaBbCcDdEeFfGgHhIiLlMmNnOo - H2


ONGs da Bahia - FS="+3"
ONGs da Bahia - FS=6
ONGs da Bahia - FS=6 bold

ONGs da Bahia - H1


ONGs da Bahia - FS=7
ONGs da Bahia - FS="+4"
ONGs da Bahia - FS=7 Bold

O uso de Font Size aparece melhor nesse E X E M P L O

ou nesse aqui:

ORGANIZAÇÕES NÃO GOVERNAMENTAIS

LIST

  1. Numbered List (1)
  2. Numbered List (2)
  1. Numbered List 1
    1. Numbered List 1.1
      1. Numbered List 1.1.1
        1. Numbered List 1.1.1.1
        2. Numbered List 1.1.1.2
      2. Numbered List 1.1.2
    2. Numbered List 1.2
  2. Numbered List 2
Definition List
<dt> Aqui vai o termo
<dd> E aqui vai a definição
Menu (diferença visível no Mosaic)
  • menu
  • menu 2
    • Dir (diferença visível no Mosaic)
  • directory
  • directory 2

    • Colunas

    1 col.2 col.
    1 col.2 col. 3 col.
    1 col.2 col. nowrap3 col.
    a esq centra dir

    Table

    1 col.2 col.
    1 col.2 col. 3 col.
    1 col.2 col. nowrap3 col.
    a esqcentr a dir
    1 col.2 col.
    1 col.2 col. 3 col.
    1 col.2 col. nowrap3 col.
    a esqcentr a dir
    com borda maior (border=3)
    1 col.2 col.
    1 col.2 col. 3 col.
    1 col.2 col. nowrap3 col.
    a esqcentr a dir
    Corner Headings This is the top line explaining the headings - Food
    Meat Fruit Breads
    This is a sidebar explaining the side heads - required Yes X X X
    No - X -

    Molduras

    ONGs da Bahia
    ONGs da Bahia
    Aqui o texto desaparece
    quando chamar a imagem

    Imagens

    normal ou align=bottom

    align=top

    align = middle

    align=right

    border 1

    border 3

    border 5

    Aumento HEIGHT=100 WIDTH=250

    distância hspace=20, vspace=5

    Links

  • Use: <a href="#nomeitem"> Item </a>
    para ir a outro ítem desse texto identificado por: <a name="#nomeitem"> Target </a>
    Exemplo: Caracteres especiais

  • Use: <a href="nomefile"> Página html </a>
    para ir à outra página html. Exemplo: Home Page das ONGs

  • Use: <a href="nomefile"> <img src="nomeimagem"> </a>
    para construir uma imagem-link. Exemplo:
    Home Page Zumbi

  • E: <a href="mailto:username@dominio"> </a> para disponibilizar e-mail.
    Exemplo: correio para quem preparou esta página

    Outras formatações (lógicas)

    blockquote = tabulado
    typewriter
    emphasis: como italico
    strong: como negrito
    sample
    code
    keyboard
    variable: quando quer inserir uma variavel
    definition: quando quer inserir uma definição
    Cite: quando quer inserir uma citação
    address

    text preformatted

    texto tabulado

    esse aqui é o LISTING
    Caracteres especiais:

    Para permitir que os caracteres acentuados sejam lidos em computadores com diferentes configurações é possível usar uma formula (começa com & e termina com ;) para mostrar sempre os acentos ou caracteres portugueses. Assim:

    &aacute; = á
    &Aacute; = Á    		 &agrave; = à
    &Agrave; = À    		 &atilde; = ã
    &Atilde; = Ã    		 &acirc; = â
    &Acirc; = Â    		 &ccedil; = ç
    &Ccedil; = Ç

    Geralmente, os Editores HTML possuem um comando que permite traduzir automaticamente todos os caracteres acentuados com a fórmula transcrita acima. Também é possível fazer aparecer os caracteres especiais, aqueles que se confundem com comandos. Use:

    &amp; para escrever: &
    &lt; para escrever: <
    &gt; para escrever: >
    &quot; para colocar aspas duplas: " "

    e &nbsp para acrescentar espaços entre palavras (só no Netscape!).
    Exemplo: 10 espaços = >          < = 10 espaços

    Existe também o comando &#NNN, onde NNN é um número correspondente à página ISO Latin 1, que permite mostrar outros caracteres. Desse modo:

    Veja a tabela completa dos Caracteres ISO

    Se estiver usando o Netscape 1.22, com a opção Cores do Documento (ou Let Document Override no 1.1) entre as Preferências de Fonts and Colors, pode estar se perguntando como obter as cores dessa página. É só acrescentar alguns comandos dentro da opção < body >.
    Por exemplo: Onde foram arranjar essas letras e números? Bom, cada cor do vídeo é resultado da soma de três cores básicas: vermelho, verde e azul. Cada uma dela é identificada de 0 a 255 (tem mais de 16,5 milhões de cores. Confira no Paintbrush ao dar um duplo clique sobre cada cor).
    O mesmo número pode ser identificado com a numeração hexadecimal (de 16 em 16).
    Assim 0 = 00 e 255 = FF. O vermelho, por exemplo, é FF0000, isto é: 255, 0, 0; o verde é 00FF00 ou 0, 255, 0, o azul 0000FF ou 0, 0, 255. Use a calculadora científica do Windows para fazer as ‘traduções’ para a numeração hexadecimal. Consulte nossa Tabela de Cores

    Esse a seguir é um comando meio "esquisito",

    <plaintext> pois, a partir daqui nao le mais os TAGs nem os caracteres acentuados Exemplo: <b>bold</b>, n&atilde;o (nao), a&ccedil;&atilde;o (acao), s&oacute; (so') ... e nao tem nenhum </plaintext> para ser desfeito. Entao, so' pode usar no fim da pagina!