-
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.
