YouTube

Got a YouTube account?

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

Spanish, Mexican subtitles

← Bases de HTML (Versión video)

Get Embed Code
11 Languages

Showing Revision 9 created 03/04/2016 by Martha Isabel Soriano Ruiz.

  1. Bienvenido a mi página web.

  2. Ya sé... no es una página web muy
    emocionante.
  3. Está completamente en blanco,
    pero todas la páginas web empiezan así,
  4. les mostraré cómo construir esta página.
  5. En primer lugar, dame un minuto
  6. para mostrarte cómo crear el esqueleto
    de esta página web en blanco.
  7. Cada página web comienza con
  8. esta cosa divertida aquí arriba que
    llamamos DOCTYPE.
  9. Esta es una señal para el navegador
  10. de que esta página web está escrita
    en HTML moderno
  11. y no en el viejo y raro HTML.
  12. A continuación, sigue la primera
    etiqueta de la página.
  13. HTML es un lenguaje de marcado,
    por lo que todo se refiere a etiquetas.
  14. Una etiqueta es una de esas cosas
  15. que empiezan con un paréntesis angular
  16. y terminan con otro paréntesis angular.
  17. O si te gustan las matemáticas,
    tal vez pienses en ellos
  18. como los signos de menor que y
    mayor que.
  19. La primera etiqueta de la página
    siempre es
  20. la etiqueta de HTML justo
    debajo de DOCTYPE.
  21. Ésta es la etiqueta de inicio de HTML,
  22. y hasta abajo está la etiqueta de
    fin de HTML,
  23. que es igual excepto por esta
    barra invertida,
  24. que es realmente importante.
  25. La etiqueta de HTML requiere cada
    una de las otras etiquetas
  26. para construir esta página web.
  27. Es por eso que tenemos la etiqueta de fin de HTML hasta abajo.
  28. Muchas de las etiquetas de HTML
    se usan en pares como ésta,
  29. pero no todas.
  30. Debajo de HTML, siempre hay una
    etiqueta de inicio del encabezado.
  31. Ésta contiene etiquetas que ayudan al
    navegador a reproducir la página,
  32. pero no contienen nada que el usuario
    realmente pueda ver.
  33. Ésta es una etiqueta de tipo meta que le da
    al navegador
  34. más detalles acerca de cómo reproducir
    la página.
  35. Por ejemplo, si estás usando los
    caracteres comunes
  36. del idioma inglés
  37. y no los caracteres difíciles
    de reproducir
  38. del idioma árabe,
  39. entonces debes tener la etiqueta de tipo
    meta charset igual a utf-8.
  40. Después está esta etiqueta de título,
  41. que el navegador usa para poner el
    título de la página.
  42. Esto es lo que se muestra en la pestaña
    superior del navegador
  43. en los marcadores y en los resultados
    de las búsquedas.
  44. Aquí en Khan Academy, el título se muestra
    en la parte superior de nuestra página.
  45. Déjame cambiar el título.
  46. Voy a hacer una página de todo
    sobre conejos.
  47. Así que pondré: "Todo sobre conejos"
  48. y probablemente puedas ver que el título
    cambia arriba.
  49. Bueno, hemos terminado con esos detalles,
  50. terminamos con la etiqueta de encabezado
    y pasamos a la siguiente etiqueta
  51. donde está todo lo que va a suceder, es la
    etiqueta <body>.
  52. Es un poco aburrido ahora, sólo tenemos
    el principio y el fin.
  53. ¿Qué debería poner aquí?
  54. Bueno, voy a hacer una página web sobre
    conejos,
  55. así que aquí podría poner
  56. un título grande en la parte superior.
  57. Para añadir un título, usamos la etiqueta H1
  58. ¡Todo sobre conejos!, muy bien.
  59. En realidad tenemos seis etiquetas que
    podríamos usar
  60. para títulos: H1, H2, H3, H4, H5 y H6.
  61. La etiqueta H1 es para el título más
    importante de la página.
  62. y la etiqueta H6 es para el menos
    importante.
  63. Déjame añadir algunos títulos para
    otras secciones.
  64. Voy a usar una etiqueta H2 ya que
    éstas son
  65. secciones menos importantes.
  66. Algunas canciones, ok, muy bien.
  67. Ahora voy a añadir algo de información.
  68. Bueno, mi público objetivo para esta página
  69. son alienígenas que nunca han
    visto un conejo.
  70. Así que mejor les doy una buena
    descripción de los conejos.
  71. De hecho, creo que necesito un párrafo
    completo de información.
  72. ¿Cómo puedo marcar un párrafo en HTML?
  73. Con la etiqueta P, por supuesto.
  74. Ponemos la etiqueta P, seguimos adelante
  75. y pegamos la información
  76. para que no tengan que verme tecleando todo.
  77. Hermoso.
  78. Ahora, los alienígenas necesitarán una
    canción para saludar a los conejos,
  79. así que les daré la letra de una de
    mis favoritas.
  80. Una vez más, usamos la etiqueta P y
    pegamos la canción
  81. "Pequeño conejito Foofoo", es una
    buena canción.
  82. Pero, oh, toda la canción se muestra en la
    misma línea.
  83. ¿Cómo van a saber los alienígenas
    donde hacer pausa?
  84. ¿Por qué el navegador no reproduce
  85. los saltos de línea que le puse?
  86. En realidad los navegadores ignoran
    los saltos de línea
  87. y los espacios en blanco de HTML.
  88. Si queremos que el navegador reproduzca un
    salto de línea,
  89. tenemos que indicarlo explícitamente
    usando otra etiqueta,
  90. la etiqueta BR que es sinónimo
    de pausa.
  91. Bueno, vamos a recorrer la canción y
    añadir BR después de cada línea.
  92. Ahora sí se ve como letra de canción.
  93. ¿Notas algo gracioso en la etiqueta BR?
  94. No tiene etiqueta final.
  95. Si lo piensas,
  96. un salto de línea no tiene ningún
    contenido,
  97. así que no hay nada que terminar.
  98. Todo lo que necesitamos es la etiqueta
    de inicio.
  99. Y aquí lo tenemos.
  100. Los alienígenas podrán aprender lo
    básico sobre los conejos
  101. y tú has aprendido lo básico sobre HTML.
  102. Después de que haya terminado de hablar,
  103. practica con esto y trata de cambiar
    cosas.
  104. Cuando estés listo, continúa con tu primer
    desafío de HTML.