YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Portuguese, Brazilian subtitles

← HTML: Básico (Versão em Vídeo)

Get Embed Code
11 Languages

Showing Revision 8 created 02/23/2015 by Retired user.

  1. Bem vindos à minha página.

  2. Eu sei, não é uma página muito emocionante
  3. Está totalmente em branco,
    mas toda página começa assim
  4. e vou te mostrar como construir essa
    página daqui a pouco.
  5. Mas, primeiro, me dê um momento para
  6. mostrar o esqueleto de uma
    página web em braco.
  7. Toda página começa com
  8. essa coisa divertida chamada DOCTYPE,
    aqui em cima.
  9. Isso é um indicador para o navegador
  10. de que essa página está escrita
    utilizando HTML moderno
  11. ao invés do HTML antigo e esquisito.
  12. Em seguida, para a primeira tag da página.
  13. HTML é uma linguagem de marcação,
    então, tudo se resume à tags.
  14. E uma tag é uma dessas coisas
  15. que começa com um colchete angular
  16. e termina com outro colchete angular.
  17. Ou, se você gosta de
    matemática, pense neles
  18. como sinais de maior e menor (< >).
  19. A primeira tag de todas as
    páginas é sempre
  20. a tag HTML, logo abaixo do DOCTYPE.
  21. Esse aqui é o começo da tag HTML.
  22. e, lá embaixo, existe o fechamento
    da tag HTML.
  23. que é a mesma coisa, exceto por esta
    barra, que é muito importante.
  24. A tag HTML deve conter todas
    as outras tags
  25. que compõem a página.
  26. É por isso que não fechamos a tag
    HTML antes do fim da página.
  27. Várias tags HTML vêm em pares como este,
  28. mas nem todas.
  29. Abaixo do HTML, sempre existe
    uma tag "head".
  30. Ela possui tags que ajudam o navegador
    a processar a página
  31. mas não contém nada que o
    usuário veja, de fato.
  32. Existe essa tag "meta" que
    fornece ao navegador
  33. mais detalhes sobre como ele deve
    processar a página.
  34. Por exemplo, se você está
    usando caracteres
  35. como os da língua Inglesa
  36. e não caracteres mais difíceis de
    processar, como
  37. os da língua Arábica,
  38. então você deve ter o meta charset
    definido como utf-8
  39. Em seguida, temos essa tag "title"
  40. que o navegador usa para decidir
    o título da página.
  41. Isso é mostrado nas abas de cima
    dos navegadores,
  42. nos favoritos e nos resultados de busca.
  43. Aqui, no Khan Academy, o título é
    exibido logo acima de nossa página.
  44. Vamos trocar o título.
  45. Eu vou criar uma página toda
    sobre coelhos.
  46. Então eu vou dizer: "Tudo Sobre Coelhos!!"
  47. e talvez você até possa ver
    isso mudando ali em cima.
  48. Legal.
  49. Agora terminamos com esses detalhes,
  50. fechamos a tag "head" e vamos até a tag
  51. onde tudo vai acontecer: a tag "body".
  52. Está muito chato agora,
    apenas o início e o fim.
  53. O que eu devo adicionar?
  54. Estou criando uma página
    sobre coelhos,
  55. então eu provavelmente deveria declarar
    isso em um grande título em cima.
  56. Para adicionar um título,
    usamos a tag "h1".
  57. e... Tudo sobre coelhos, ótimo.
  58. Na verdade, existem seis tags que
  59. podemos usar como títulos:
    h1, h2, h3, h4, h5 e h6.
  60. "h1" é atribuído ao título mais
    relevante na página
  61. e "h6", para o menos importante.
  62. Vamos adicionar mais títulos
    para as outras seções.
  63. Eu vou usar um h2 já que essas são seções
  64. menos importantes.
  65. E algumas músicas. Ótimo.
  66. Agora, vamos adicionar algum conteúdo.
  67. Meu público alvo para essa página
  68. são alienígenas que nunca viram
    coelhos antes.
  69. Logo, é bom que eu dê a eles uma descrição
    sobre coelhos.
  70. De fato, acho que preciso de um
    parágrafo inteiro de informações.
  71. Como eu posso demarcar um parágrafo
    usando HTML?
  72. Com a tag "< p >", é claro!
  73. Colocamos a tag "< p >" e
  74. em seguida, vou em frente colando
    as informações.
  75. Assim você não precisa me ver
    digitando tudo isso.
  76. Lindo!
  77. Agora os aliens precisam de uma música
    para cumprimentar os coelhos
  78. então, vou dar-lhes a letra de uma
    favorita pessoal.
  79. E, de novo usamos a tag "< p >" para isso.
  80. E colocamos a música.
  81. ♫ Little Bunny Foofoo ♫
  82. Ah, que música boa!
  83. Mas, tudo está aparecendo
    na mesma linha.
  84. Como os aliens vão saber onde parar?
  85. Por que o navegador não processou as
    quebras de linha que coloquei ali?
  86. Na verdade, os navegadores
    normalmente ignoram as
  87. quebras de linhas e os espaços em seu HTML
  88. Se quisermos que o navegador processe as
    quebras de linhas,
  89. precisamos avisá-lo explicitamente usando
    uma outra tag:
  90. a tag "< br >", que significa uma
    quebra de linha.
  91. Vamos em frente e adicionando < br > após
    cada linha.
  92. Agora isso parece uma letra de música.
  93. Você percebeu algo engraçado em
    relação ao "< br >"?
  94. Não existe tag de fechamento.
  95. Se você pensar nisso, uma quebra
    de linha não tem conteúdo.
  96. Logo, não há nada para ser fechado.
  97. Precisamos apenas da tag de abertura.
  98. Agora sim.
  99. Os aliens vão aprender o básico
    sobre coelhos
  100. e vocês aprenderam o básico do HTML.
  101. Depois que eu terminar de falar
  102. brinque um pouco com isso
    e tente mudar as coisas.
  103. E, quando estiver pronto, encare seu
    primeiro desafio HTML.
  104. Traduzidor por [Felipe Francisco]
    Revisado por [Fernando dos Reis]