Cursos de Informática Grátis www.megainforcursos.com

8 de agosto de 2012

Tutorial de HTML 2

Agora você já sabe as tags básicas, e se conferiu o exemplo como recomendei na lição 1, já viu a estrutura básica de um arquivo HTML:

   
      (aqui vão tags especiais, como a TITLE (ver exemplo da lição 1) )
   
   
      (aqui vai o texto e tudo que aparece na tela do browser )
   

Mas como nosso curso tem fins obviamente práticos, acho mais urgente passar mais algumas tags para que se possa começar já uma página apresentável. Lá vai:


 - já visto no exemplo 1, indica quebra de linha. É o "Enter" do HTML. Não é necessário 
.


 - traça uma linha horizontal. Não é necessário .
Algumas opções são:
COLOR - escolher a cor, por números RGB, ou por nomes como "WHITE" ou "LIGHTGREEN"
NOSHADE - sem efeito de relevo.
WIDTH - largura, pode-se indicar por tamanho em pixels ou pelo percentual relativo à largura da tela.
SIZE - a altura, em pixels, para-se gerar uma pequena barra ao invés de uma linha.

 - parágrafo. Adiciona um pequeno espaçamento no começo e no fim do bloco. Útil para formatar o alinhamento do texto. A principal opção é ALIGN, na qual você pode especificar LEFT, RIGHT, CENTER ou JUSTIFY.

, ,  - similares às tags , , e , estas mostram o texto riscado, subscrito ou sobrescrito, respectivamente.
Exemplo: A fórmula da água é H2O.

 - para exibir o texto com fonte de largura fixa (Courier).

    ,
 - para definir uma lista numerada ou de marcadores (bullets). Para definir uma lista numerada, especifique a opção TYPE na tag
    , por exemplo:
    (o TYPE I fará uma lista de números romanos maiúsculos, experimente os TYPEs i, a, A, 1)

       - a tag
        é similar à
          , mas não gera lista de marcadores, e permite escolher o primeiro item da lista, com a opção START. O padrão da
            é lista de bullets, da
              é a lista numerada.

              ,
              ,
               - para fazer uma lista de definições, gerando as propícias tabulações.

               - o texto incluso entre estas tags aparecerá tabulado, como uma citação.

              
              
               - texto pré-formatado. Às vezes não vale a pena formatar o texto usando tags de HTML, como por exemplo, quando queremos inserir numa página listagens de programas de computador. Para isto existe a tag
              . Tudo que estiver entre 
               e 
              , aparecerá sem alterações, incluindo espaçamentos, tabulações e quebras de linha. A única exceção são as tags HTML, que são processadas. Para exibir uma tag escrita na tela, sem que o browser processe-a, é necessário substituir os sinais < e > por < e >. Mas isso é outro assunto que veremos mais tarde. A listagem em HTML que apareceu no começo desta página foi feita usando
              . Perceba que este comando muda a fonte para Courier, por isso tive que inserir uma tag  para "corrigir" esta alteração.
              
              Bem, aí está um monte de tags, e existem várias outras, mas estas são praticamente as únicas que eu uso. São de longe as mais úteis para se montar uma página HTML de texto. Veja o arquivo de exemplo, ele monta uma página de demonstração completa, usando praticamente todas as tags listadas aqui. Procure examinar e entender o código fonte desta página-exemplo. Salve a página em disco, e abra-a novamente. Experimente alterar as opções das tags, e ver os diferentes resultados. Lembre-se de salvar o arquivo, e de clicar em "Atualizar" (ou "Reload", ou "Refresh", conforme seu navegador), se o manteve aberto, para que as alterações tenham efeito.
              
              Ah, sobre o exercício da lição 1... A opção para definir um gráfico de fundo deve ser definida na tag BODY, bem como a cor do texto, do fundo (se não tiver gráfico), dos links:
    BACKGROUND - arquivo de papel de parede, em geral GIF ou JPEG.
    BGCOLOR - cor de fundo da tela, se não usar papel de parede (o padrão é WHITE);
    TEXT - cor do texto (o padrão é BLACK);
    LINK - cor do link (o padrão é BLUE);
    VLINK - cor do link já visitado (o padrão é DARKMAGENTA ?! ).

    E lá vai o exercício para esta lição: crie uma "escada" de tabulações usando tags HTML! Este será um bom teste para que você se familiarize com as particularidades da linguagem. O resultado esperado é algo assim (aqui eu fiz usando
    , isto é, sem tags):
    nivel 1
            nivel 2
                    nivel 3
                            nivel 4
                                    nivel 5
                                            nivel 6
    
    Bem, agora já vimos as principais tags para edição de texto em HTML, e você tem uma bela trívia para solucionar. Na próxima lição, veremos a inclusão de imagens e de tabelas. Tabelas invisíveis são a alma da diagramação de uma página HTML, elas estão presentes em lugares que você nem imagina. Até lá!

    0 comentários:

    Postar um comentário

     
    Design by Wordpress Theme | Bloggerized by Free Blogger Templates | coupon codes