HTML - basic - Lección nº 3
Estructurando el texto
En un documento html el texto aparece siempre sin estructura. Para poder formatear y estructurar el texto podemos definir títulos y párrafos.
Para añadir estructura a nuestro texto utilizamos las siguientes etiquetas:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> - define títulos de diferentes tamaños y niveles, la h es la abreviatura de encabezado (header). El texto incluido en esta etiqueta aparece en una fila separada.
<br> - salto de línea. Donde aparece esta etiqueta, el texto cambia a una nueva línea, sin comenzar un nuevo párrafo. Esta etiqueta no necesita cierre.
<p> </p> - párrafo, abreviatura de párrafo (paragraph). El texto incluido en estas etiquetas se separa visiblemente como una parte distinta.
La diferencia entre el salto de línea y el párrafo es que, la etiqueta <p> tiene una parte de cierre, el salto de línea no. El texto en un párrafo está marcado e identificado para que podamos formatearlo. El salto de línea no tiene etiqueta de cierre, por lo que no marca una parte del texto, simplemente marca el lugar donde comienza una nueva línea.
Para añadir estructura a nuestro texto utilizamos las siguientes etiquetas:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> - define títulos de diferentes tamaños y niveles, la h es la abreviatura de encabezado (header). El texto incluido en esta etiqueta aparece en una fila separada.
<br> - salto de línea. Donde aparece esta etiqueta, el texto cambia a una nueva línea, sin comenzar un nuevo párrafo. Esta etiqueta no necesita cierre.
<p> </p> - párrafo, abreviatura de párrafo (paragraph). El texto incluido en estas etiquetas se separa visiblemente como una parte distinta.
La diferencia entre el salto de línea y el párrafo es que, la etiqueta <p> tiene una parte de cierre, el salto de línea no. El texto en un párrafo está marcado e identificado para que podamos formatearlo. El salto de línea no tiene etiqueta de cierre, por lo que no marca una parte del texto, simplemente marca el lugar donde comienza una nueva línea.
Ejercicios
1. En el archivo index.html, marca el texto Coders Work como el encabezado de nivel más alto. Luego coloca el resto del texto en un párrafo.
Ver el resultado
2. Copia el siguiente texto en el archivo index.html después del párrafo anterior.
After finishing my studies, as a sociologist, I was eager to find out how youth is coping with getting a decent job for fulfilling their lives. The result of my research showed that the IT sector is the most popular, yet most unreachable for people with limited educational possibilities.
Together with a couple of friends who work as programmers, we decided to draw up a course – Coders Work - in which those interested can find out, about the basics of programming, ex: how to make a website, how to use JavaScript, CSS and HTML, and more.
Observa que el texto aparece de forma continua, el navegador no reacciona a nuestras entradas. El encabezado que marcamos anteriormente permanecen en una fila separada.
Ver el resultado
After finishing my studies, as a sociologist, I was eager to find out how youth is coping with getting a decent job for fulfilling their lives. The result of my research showed that the IT sector is the most popular, yet most unreachable for people with limited educational possibilities.
Together with a couple of friends who work as programmers, we decided to draw up a course – Coders Work - in which those interested can find out, about the basics of programming, ex: how to make a website, how to use JavaScript, CSS and HTML, and more.
Observa que el texto aparece de forma continua, el navegador no reacciona a nuestras entradas. El encabezado que marcamos anteriormente permanecen en una fila separada.
3. Pon el texto copiado previamente en 2 párrafos. Como ves, ambos comienzan en nuevas filas.
Ver el resultado
4. Inserta un salto de línea después de la primera frase del primer párrafo y observa que comienza en una nueva fila en el navegador.
Ver el resultado
Cuestionario
1. Si un documento html contiene las siguientes filas:
<h4>Opera</h4>
<h5>Chrome</h5>
<h1>Firefox</h1>
¿Qué encabezado es más grande / tiene el nivel más alto?
<h4>Opera</h4>
<h5>Chrome</h5>
<h1>Firefox</h1>
¿Qué encabezado es más grande / tiene el nivel más alto?
2. Si un documento html contiene la siguiente línea:
<h1>Hobbies</h1><p>designing</p><p>painting, <br> drawing</p> writing
¿Cuántas filas aparecen en el navegador?
<h1>Hobbies</h1><p>designing</p><p>painting, <br> drawing</p> writing
¿Cuántas filas aparecen en el navegador?
3. Si queremos insertar un texto más largo en una página web, ¿qué procedimiento es el mejor para estructurar el texto?
Información suplementaria
Puedes probar más
Párrafos aquí: https://www.w3schools.com/html/html_paragraphs.asp
Encabezados aquí: https://www.w3schools.com/html/html_headings.asp
1. Inicia sesión en la página web codepen.io, copia el texto de abajo:
My social Life
Having an evening out with friends;
Chating with friends who are abroad;
Going out to nature;
Watching movies
La primera fila debe ser un encabezado de tercer nivel.
Usando saltos de línea, haz que el texto aparezca en cinco filas.
2. Copia el texto de nuevo, pero esta vez usa el párrafo para obtener el texto en cinco líneas.
Párrafos aquí: https://www.w3schools.com/html/html_paragraphs.asp
Encabezados aquí: https://www.w3schools.com/html/html_headings.asp
1. Inicia sesión en la página web codepen.io, copia el texto de abajo:
My social Life
Having an evening out with friends;
Chating with friends who are abroad;
Going out to nature;
Watching movies
La primera fila debe ser un encabezado de tercer nivel.
Usando saltos de línea, haz que el texto aparezca en cinco filas.
2. Copia el texto de nuevo, pero esta vez usa el párrafo para obtener el texto en cinco líneas.
