WEBVTT 00:00:00.411 --> 00:00:01.835 Bienvenido a mi página web. 00:00:01.835 --> 00:00:04.059 Ya sé... no es una página web muy emocionante. 00:00:04.059 --> 00:00:07.477 Está completamente en blanco, pero todas la páginas web empiezan así, 00:00:07.477 --> 00:00:10.166 les mostraré cómo construir esta página. 00:00:10.275 --> 00:00:11.681 En primer lugar, dame un minuto 00:00:11.681 --> 00:00:14.860 para mostrarte cómo crear el esqueleto de esta página web en blanco. 00:00:15.389 --> 00:00:16.944 Cada página web comienza con 00:00:16.944 --> 00:00:20.384 esta cosa divertida aquí arriba que llamamos DOCTYPE. 00:00:20.562 --> 00:00:21.961 Esta es una señal para el navegador 00:00:21.961 --> 00:00:24.603 de que esta página web está escrita en HTML moderno 00:00:24.603 --> 00:00:27.530 y no en el viejo y raro HTML. 00:00:27.931 --> 00:00:31.026 A continuación, sigue la primera etiqueta de la página. 00:00:31.026 --> 00:00:34.582 HTML es un lenguaje de marcado, por lo que todo se refiere a etiquetas. 00:00:34.635 --> 00:00:36.399 Una etiqueta es una de esas cosas 00:00:36.399 --> 00:00:38.314 que empiezan con un paréntesis angular 00:00:38.314 --> 00:00:40.684 y terminan con otro paréntesis angular. 00:00:40.745 --> 00:00:42.346 O si te gustan las matemáticas, tal vez pienses en ellos 00:00:42.346 --> 00:00:45.383 como los signos de menor que y mayor que. 00:00:46.474 --> 00:00:48.356 La primera etiqueta de la página siempre es 00:00:48.356 --> 00:00:51.343 la etiqueta de HTML justo debajo de DOCTYPE. 00:00:51.343 --> 00:00:53.871 Ésta es la etiqueta de inicio de HTML, 00:00:53.871 --> 00:00:57.055 y hasta abajo está la etiqueta de fin de HTML, 00:00:57.055 --> 00:00:59.729 que es igual excepto por esta barra invertida, 00:00:59.729 --> 00:01:01.747 que es realmente importante. 00:01:01.889 --> 00:01:05.147 La etiqueta de HTML requiere cada una de las otras etiquetas 00:01:05.147 --> 00:01:07.354 para construir esta página web. 00:01:07.376 --> 00:01:11.051 Es por eso que tenemos la etiqueta de fin de HTML hasta abajo. 00:01:11.119 --> 00:01:13.351 Muchas de las etiquetas de HTML se usan en pares como ésta, 00:01:13.351 --> 00:01:15.099 pero no todas. 00:01:15.571 --> 00:01:19.176 Debajo de HTML, siempre hay una etiqueta de inicio del encabezado. 00:01:19.437 --> 00:01:22.146 Ésta contiene etiquetas que ayudan al navegador a reproducir la página, 00:01:22.146 --> 00:01:25.162 pero no contienen nada que el usuario realmente pueda ver. 00:01:25.435 --> 00:01:27.885 Ésta es una etiqueta de tipo meta que le da al navegador 00:01:27.885 --> 00:01:30.017 más detalles acerca de cómo reproducir la página. 00:01:30.204 --> 00:01:31.885 Por ejemplo, si estás usando los caracteres comunes 00:01:31.885 --> 00:01:33.281 del idioma inglés 00:01:33.281 --> 00:01:34.747 y no los caracteres difíciles de reproducir 00:01:34.747 --> 00:01:36.628 del idioma árabe, 00:01:36.628 --> 00:01:40.048 entonces debes tener la etiqueta de tipo meta charset igual a utf-8. 00:01:40.100 --> 00:01:41.578 Después está esta etiqueta de título, 00:01:41.578 --> 00:01:45.009 que el navegador usa para poner el título de la página. 00:01:45.212 --> 00:01:47.623 Esto es lo que se muestra en la pestaña superior del navegador 00:01:47.623 --> 00:01:49.558 en los marcadores y en los resultados de las búsquedas. 00:01:50.583 --> 00:01:53.430 Aquí en Khan Academy, el título se muestra en la parte superior de nuestra página. 00:01:53.687 --> 00:01:55.544 Déjame cambiar el título. 00:01:55.695 --> 00:01:59.348 Voy a hacer una página de todo sobre conejos. 00:01:59.348 --> 00:02:01.914 Así que pondré: "Todo sobre conejos" 00:02:01.914 --> 00:02:04.923 y probablemente puedas ver que el título cambia arriba. 00:02:05.539 --> 00:02:08.149 Bueno, hemos terminado con esos detalles, 00:02:08.149 --> 00:02:11.946 terminamos con la etiqueta de encabezado y pasamos a la siguiente etiqueta 00:02:11.946 --> 00:02:14.809 donde está todo lo que va a suceder, es la etiqueta . 00:02:15.033 --> 00:02:17.805 Es un poco aburrido ahora, sólo tenemos el principio y el fin. 00:02:18.081 --> 00:02:19.521 ¿Qué debería poner aquí? 00:02:19.521 --> 00:02:21.921 Bueno, voy a hacer una página web sobre conejos, 00:02:21.921 --> 00:02:23.155 así que aquí podría poner 00:02:23.155 --> 00:02:25.455 un título grande en la parte superior. 00:02:25.559 --> 00:02:28.656 Para añadir un título, usamos la etiqueta H1 00:02:29.574 --> 00:02:33.154 ¡Todo sobre conejos!, muy bien. 00:02:33.154 --> 00:02:34.772 En realidad tenemos seis etiquetas que podríamos usar 00:02:34.772 --> 00:02:38.441 para títulos: H1, H2, H3, H4, H5 y H6. 00:02:38.461 --> 00:02:41.153 La etiqueta H1 es para el título más importante de la página. 00:02:41.153 --> 00:02:43.358 y la etiqueta H6 es para el menos importante. 00:02:43.491 --> 00:02:45.682 Déjame añadir algunos títulos para otras secciones. 00:02:45.696 --> 00:02:49.035 Voy a usar una etiqueta H2 ya que éstas son 00:02:49.035 --> 00:02:51.197 secciones menos importantes. 00:02:51.957 --> 00:02:55.469 Algunas canciones, ok, muy bien. 00:02:56.214 --> 00:02:58.240 Ahora voy a añadir algo de información. 00:02:58.402 --> 00:03:00.435 Bueno, mi público objetivo para esta página 00:03:00.435 --> 00:03:03.934 son alienígenas que nunca han visto un conejo. 00:03:03.934 --> 00:03:06.943 Así que mejor les doy una buena descripción de los conejos. 00:03:07.100 --> 00:03:10.174 De hecho, creo que necesito un párrafo completo de información. 00:03:10.396 --> 00:03:12.856 ¿Cómo puedo marcar un párrafo en HTML? 00:03:13.391 --> 00:03:16.049 Con la etiqueta P, por supuesto. 00:03:16.470 --> 00:03:20.736 Ponemos la etiqueta P, seguimos adelante 00:03:20.736 --> 00:03:22.633 y pegamos la información 00:03:22.633 --> 00:03:25.568 para que no tengan que verme tecleando todo. 00:03:25.856 --> 00:03:27.116 Hermoso. 00:03:27.699 --> 00:03:30.901 Ahora, los alienígenas necesitarán una canción para saludar a los conejos, 00:03:30.912 --> 00:03:33.170 así que les daré la letra de una de mis favoritas. 00:03:33.170 --> 00:03:38.170 Una vez más, usamos la etiqueta P y pegamos la canción 00:03:39.521 --> 00:03:43.419 "Pequeño conejito Foofoo", es una buena canción. 00:03:43.572 --> 00:03:47.672 Pero, oh, toda la canción se muestra en la misma línea. 00:03:47.868 --> 00:03:50.315 ¿Cómo van a saber los alienígenas donde hacer pausa? 00:03:50.418 --> 00:03:51.660 ¿Por qué el navegador no reproduce 00:03:51.660 --> 00:03:54.092 los saltos de línea que le puse? 00:03:54.350 --> 00:03:57.052 En realidad los navegadores ignoran los saltos de línea 00:03:57.052 --> 00:03:59.139 y los espacios en blanco de HTML. 00:03:59.318 --> 00:04:01.647 Si queremos que el navegador reproduzca un salto de línea, 00:04:01.647 --> 00:04:05.022 tenemos que indicarlo explícitamente usando otra etiqueta, 00:04:05.022 --> 00:04:08.176 la etiqueta BR que es sinónimo de pausa. 00:04:08.398 --> 00:04:12.513 Bueno, vamos a recorrer la canción y añadir BR después de cada línea. 00:04:12.777 --> 00:04:14.885 Ahora sí se ve como letra de canción. 00:04:15.440 --> 00:04:18.890 ¿Notas algo gracioso en la etiqueta BR? 00:04:19.221 --> 00:04:20.851 No tiene etiqueta final. 00:04:20.966 --> 00:04:21.938 Si lo piensas, 00:04:21.938 --> 00:04:23.492 un salto de línea no tiene ningún contenido, 00:04:23.492 --> 00:04:25.861 así que no hay nada que terminar. 00:04:26.006 --> 00:04:28.496 Todo lo que necesitamos es la etiqueta de inicio. 00:04:29.062 --> 00:04:30.361 Y aquí lo tenemos. 00:04:30.456 --> 00:04:32.704 Los alienígenas podrán aprender lo básico sobre los conejos 00:04:32.704 --> 00:04:35.883 y tú has aprendido lo básico sobre HTML. 00:04:36.044 --> 00:04:37.158 Después de que haya terminado de hablar, 00:04:37.158 --> 00:04:39.915 practica con esto y trata de cambiar cosas. 00:04:39.976 --> 00:04:43.658 Cuando estés listo, continúa con tu primer desafío de HTML.