Bienvenido a mi página web.
Ya sé... no es una página web muy emocionante.
Está completamente en blanco, pero todas la páginas web empiezan así,
les mostraré cómo construir esta página.
En primer lugar, dame un minuto
para mostrarte cómo crear el esqueleto de esta página web en blanco.
Cada página web comienza con
esta cosa divertida aquí arriba que llamamos DOCTYPE.
Esta es una señal para el navegador
de que esta página web está escrita en HTML moderno
y no en el viejo y raro HTML.
A continuación, sigue la primera etiqueta de la página.
HTML es un lenguaje de marcado, por lo que todo se refiere a etiquetas.
Una etiqueta es una de esas cosas
que empiezan con un paréntesis angular
y terminan con otro paréntesis angular.
O si te gustan las matemáticas, tal vez pienses en ellos
como los signos de menor que y mayor que.
La primera etiqueta de la página siempre es
la etiqueta de HTML justo debajo de DOCTYPE.
Ésta es la etiqueta de inicio de HTML,
y hasta abajo está la etiqueta de fin de HTML,
que es igual excepto por esta barra invertida,
que es realmente importante.
La etiqueta de HTML requiere cada una de las otras etiquetas
para construir esta página web.
Es por eso que tenemos la etiqueta de fin de HTML hasta abajo.
Muchas de las etiquetas de HTML se usan en pares como ésta,
pero no todas.
Debajo de HTML, siempre hay una etiqueta de inicio del encabezado.
Ésta contiene etiquetas que ayudan al navegador a reproducir la página,
pero no contienen nada que el usuario realmente pueda ver.
Ésta es una etiqueta de tipo meta que le da al navegador
más detalles acerca de cómo reproducir la página.
Por ejemplo, si estás usando los caracteres comunes
del idioma inglés
y no los caracteres difíciles de reproducir
del idioma árabe,
entonces debes tener la etiqueta de tipo meta charset igual a utf-8.
Después está esta etiqueta de título,
que el navegador usa para poner el título de la página.
Esto es lo que se muestra en la pestaña superior del navegador
en los marcadores y en los resultados de las búsquedas.
Aquí en Khan Academy, el título se muestra en la parte superior de nuestra página.
Déjame cambiar el título.
Voy a hacer una página de todo sobre conejos.
Así que pondré: "Todo sobre conejos"
y probablemente puedas ver que el título cambia arriba.
Bueno, hemos terminado con esos detalles,
terminamos con la etiqueta de encabezado y pasamos a la siguiente etiqueta
donde está todo lo que va a suceder, es la etiqueta .
Es un poco aburrido ahora, sólo tenemos el principio y el fin.
¿Qué debería poner aquí?
Bueno, voy a hacer una página web sobre conejos,
así que aquí podría poner
un título grande en la parte superior.
Para añadir un título, usamos la etiqueta H1
¡Todo sobre conejos!, muy bien.
En realidad tenemos seis etiquetas que podríamos usar
para títulos: H1, H2, H3, H4, H5 y H6.
La etiqueta H1 es para el título más importante de la página.
y la etiqueta H6 es para el menos importante.
Déjame añadir algunos títulos para otras secciones.
Voy a usar una etiqueta H2 ya que éstas son
secciones menos importantes.
Algunas canciones, ok, muy bien.
Ahora voy a añadir algo de información.
Bueno, mi público objetivo para esta página
son alienígenas que nunca han visto un conejo.
Así que mejor les doy una buena descripción de los conejos.
De hecho, creo que necesito un párrafo completo de información.
¿Cómo puedo marcar un párrafo en HTML?
Con la etiqueta P, por supuesto.
Ponemos la etiqueta P, seguimos adelante
y pegamos la información
para que no tengan que verme tecleando todo.
Hermoso.
Ahora, los alienígenas necesitarán una canción para saludar a los conejos,
así que les daré la letra de una de mis favoritas.
Una vez más, usamos la etiqueta P y pegamos la canción
"Pequeño conejito Foofoo", es una buena canción.
Pero, oh, toda la canción se muestra en la misma línea.
¿Cómo van a saber los alienígenas donde hacer pausa?
¿Por qué el navegador no reproduce
los saltos de línea que le puse?
En realidad los navegadores ignoran los saltos de línea
y los espacios en blanco de HTML.
Si queremos que el navegador reproduzca un salto de línea,
tenemos que indicarlo explícitamente usando otra etiqueta,
la etiqueta BR que es sinónimo de pausa.
Bueno, vamos a recorrer la canción y añadir BR después de cada línea.
Ahora sí se ve como letra de canción.
¿Notas algo gracioso en la etiqueta BR?
No tiene etiqueta final.
Si lo piensas,
un salto de línea no tiene ningún contenido,
así que no hay nada que terminar.
Todo lo que necesitamos es la etiqueta de inicio.
Y aquí lo tenemos.
Los alienígenas podrán aprender lo básico sobre los conejos
y tú has aprendido lo básico sobre HTML.
Después de que haya terminado de hablar,
practica con esto y trata de cambiar cosas.
Cuando estés listo, continúa con tu primer desafío de HTML.