Párrafos y encabezados

Progreso de Lección:

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

Las páginas web se componen más que todo de texto, de modo que es importante saber cómo añadir texto correctamente
En este video iniciaremos aprendiendo las etiquetas que nos ayudan a darle el formato correcto a nuestro texto
Aquí tenemos el mismo código que usamos en el video anterior
Y lo único que hemos hecho es eliminar todo lo que teníamos dentro de la etiqueta body, todo lo demás es igual.
La primera etiqueta relacionada al texto que aprenderemos es una que ya vimos anteriormente, es la etiqueta de párrafo
Así que vamos a escribir nuestra etiqueta p, y vamos a cerrarla también
Y hay algo que no hemos mencionado hasta ahorita, y es que si lo notas, cada una de las etiquetas tiene una pequeña sangría con respecto a la etiqueta superior
Esto no es un requisito técnico, sin embargo esta técnica hace que nuestro código sea más fácil de leer
De modo que cuando una etiqueta se encuentra dentro de otra,  como podemos ver aquí con nuestra etiqueta p que se encuentra dentro de la etiqueta body
Es más fácil de leer de quien es hija la etiqueta p, y podemos hacernos una idea de cómo se encuentra organizado el código gracias a estas sangrías
Dentro de nuestra etiqueta de párrafo, vamos a colocar un texto que simulará nuestro contenido, yo ya lo tengo copiado así que simplemente lo pegare
Ahora este texto, se llama lorem ipsum, parece latin, pero no lo es, en realidad no significa nada
Es solo un conjunto de texto que se usa mucho en trabajos de imprenta y diseño web para probar como se vería nuestro texto real.
De modo que lorem ipsum hace muy bien su trabajo como texto de prueba
Así que vamos a guardar nuestro documento
Vamos a ir hacia nuestro navegador, refrescamos la página
Y como puedes ver, ahora tenemos nuestro párrafo apareciendo en el navegador
Podemos añadir tantos párrafos nosotros deseemos
Así que podemos regresar hacia el editor de texto, copiar este párrafo, y ahora vamos a pegarlo dos veces más
Guardamos el documento, regresamos el navegador, refrescamos la página
Y ahora puedes ver los cambios que hemos realizado en nuestro documento, ya que ahora tenemos 3 párrafos
Posiblemente notes que existe una pequeña separación entre cada uno de los párrafos
Esto se debe a que el navegador se encuentra aplicando estilos que ya tiene por defecto a nuestros párrafos
Sin embargo con CSS, el cual aprenderemos después de HTML, podremos ajustar el espacio entre los párrafos
Ahora aprenderemos más sobre otra etiqueta que ya vimos anteriormente, y esa es la etiqueta de título, o headline
La etiqueta de título en realidad debe ser parte de la estructura de nuestro documento HTML
Sin embargo es más fácil y comprensible pensar en ella como parte del texto de nuestro sitio
Así que regresaremos a nuestro editor de texto
Y vamos a colocar nuestra etiqueta headline justo arriba del primer párrafo
Siempre dentro de la etiqueta body, vamos a colocar la etiqueta h1, que es el headline 1 o el titular de primer nivel, vamos a cerrar la etiqueta
Y dentro de ella vamos a colocar nuestro título, en este caso colocaremos, este es un título de nivel 1
Luego guardaremos el documento y entraremos al navegador, y refrescaremos la página
Y  ahora puedes ver que tenemos nuestro título, el cual es mucho más grande que nuestro párrafo
De nuevo, esto es debido a que el navegador se encuentra aplicando estilos por defecto a nuestra etiqueta h1
Cada etiqueta de título menor a la etiqueta de título 1, es decir a la etiqueta h1, será un poco más pequeña, y existen 6 niveles de título
Vamos a ver como lucen todos
Regresamos a nuestro editor de texto
Y lo que haremos será simplemente copiar la etiqueta h1 actual, y pegarla 5 veces más
Y ahora simplemente cambiaremos el número dentro de la etiqueta, hasta llegar al h6
Igualmente para las etiquetas de cierre, colocamos el número correspondiente a la etiqueta que se encuentran cerrando
Y ahora vamos a cambiar el número que se muestra en el título, esto no es necesario pero lo vamos a hacer para no confundirnos y saber cuál es cuál
Igualmente guardamos, regresamos al navegador y refrescamos la página
Y como puedes ver cada nivel hacia debajo de la etiqueta de título es un poco más pequeña que la superior
Generalmente desearas tener tus títulos organizados correctamente por medio de estas etiquetas
Por ejemplo, no querremos tener etiquetas h3 que son títulos de nivel 3 por encima de etiquetas h1 que son del título1 ya que no tendría sentido
Debemos usar estas etiquetas semánticamente, es decir colocarlas con el nivel de jerarquía correcta
Puedes pensar en esto como en un periódico
El titular del nivel 1 podría ser el nombre del periódico
El titular de nivel 2 quizá sea el nombre de una sección
El titular de nivel 3 probablemente sea el nombre de un artículo
El titular de nivel 4 quizá un sub tema dentro de un artículo
Y así sucesivamente
Igual que con los párrafos, tú puedes tener tantos títulos desees
Los párrafos y los títulos son unos de los elementos más importantes cuando damos formato a nuestro texto
En el siguiente video aprenderemos como dar énfasis a ciertas partes de nuestro texto

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image