Guia Prático HTML

download Guia Prático HTML

of 62

  • date post

    30-Mar-2016
  • Category

    Documents

  • view

    226
  • download

    8

Embed Size (px)

description

Guia Prático HTML

Transcript of Guia Prático HTML

  • Gu ia P r t i co de HTML P ro f . T iago Dan ie l de Souza h t tp : / /www. t iagosouza .com

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    - 1 -

    Guia Prtico de HTML

    Este Gu ia fo i esc r i to por T iago Dan ie l de Souza

    Ema i l : t i agocopa [a t ] gma i l [do t ] com

    S i te do Autor : h t tp : / /www. t iagosouza .com

    Th i s work i s l i censed under a Crea t i ve Commons

    A t t r ibu t ion-NonCommerc ia l -ShareA l i ke 2 .0 Braz i l

    L i cense .

    h t tp : / / c re a t i ve commons .o rg / l i c ense s / by - n c - sa /2 . 0 /b r

  • Gu ia P r t i co de HTML P ro f . T iago Dan ie l de Souza h t tp : / /www. t iagosouza .com

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    - 2 -

    SUMRIO 1. INTRODUO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . 05 2. SOBRE O HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . 05 3. SUA PRIMEIRA PGINA EM HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 06

    3.1 - O que est dentro de um arquivo em HTML?! . . .. . . . . . . . . . . . . . . . . . . . . . 06 3.2 - Experimente voc mesmo .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 06 3.3 - Expl icao do Exemplo . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 06 3.4 - Devemos usar a extenso .htm ou .html? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 07 3.5 - Editores "Puros" versus WYSIWYG .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 07 3.6 - FAQ (Perguntas Freqentes) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 07

    4. ELEMENTOS E ATRIBUTOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . 08

    4.1 Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 08 4.2 Atr ibutos das Tags . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 09 4.2.1 - Atr ibutos podem ser apl icados maior ia das tags . . . . . . . . . . . . . . . . 10 4.3 - Devemos usar aspas ou pl icas/apstrofos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 4.4 Notas Rpidas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

    5. O CABEALHO DE UM DOCUMENTO HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

    5.1 - O Elemento (cabealho do documento) . .. . . . . . . . . . . . . . . . . . . . 11 5.1.1 - A Informao Cont ida no Elemento .. .. . . . . . . . . . . . . . . . . . . 11 5.1.2 - E lementos de cabealho ( ) . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . 12 5.1.3 - A declarao DOCTYPE .. . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

    5.2 - O elemento .. . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 5.2.1 - Palavras-chave para os motores de pesquisa . . . . . . . . . . . . . . . . . . . . . 12 5.2.2 - Valores desconhecidos para o atr ibuto name do .. . . . 13

    6. MODIFICANDO O CORPO DO DOCUMENTO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 7. ELEMENTOS BSICOS DA LINGUAGEM HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

    7.1 Cabealhos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 7.2 Pargrafos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

    7.2.1 - Al inhamentos de pargrafo . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . 14 7.3 - Criando uma diviso .. . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 7.4 Quebras de Linha .. . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 7.5 Comentr ios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 7.6 Informaes teis . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

    7.7 L ista de elementos bsicos do HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 8. FORMATAO DE TEXTO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . 17

    8.1 Elementos para formatao de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 8.2 Elementos para o "output de cdigo de computador" . . . . . . . . . . . . . . . 18 8.3 Elementos para c i taes e l istas de def in ies . . . . . . . . . . . . . . . . . . . . . . . 18

    9. LIGAES DE HIPERTEXTO ("LINKS") . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

    9.1 - Links internos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 9.2 - Links locais ou re lat ivos . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 9.3 - Links externos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 9.4 - Alvo (target) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 9.5 Elementos para fazer l igaes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

    10. LISTAS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

  • Gu ia P r t i co de HTML P ro f . T iago Dan ie l de Souza h t tp : / /www. t iagosouza .com

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    - 3 -

    10.1 - L istas No Ordenadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 10.2 - L istas Ordenadas . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 10.3 L istas de Definies . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 10.4 Elementos para L istas . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

    11. IMAGENS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . 22

    11.1 - Tamanho de exibio da imagem .. . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . 23 11.2 - Texto a lternat ivo . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 11.3 - Borda da imagem .. . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 11.4 - Al inhamento da imagem .. . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 11.5 - Espaamento da imagem .. . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 11.6 Elementos re lacionados com imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 11.7 Fundos de Pgina . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

    11.7.1 - O atr ibuto bgcolor do elemento . . . .. . . . . . . . . . . . . . . . . . . . . 25 11.7.2 - O atr ibuto background .. . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

    11.8 Dicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 12 CORES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . 27

    12.1 - Formas de expr imir cores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 12.2 Nomes de cores . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 12.3 Cores seguras da Web .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 12.