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.