Curso IT Fundamentos HTML 011_Texto

HTML proporciona una gran cantidad de etiquetas de texto para que las usemos al crear páginas web. Estas etiquetas pueden ayudarnos a organizar y formatear mejor nuestro contenido de texto. A continuación se presentan algunas etiquetas de texto HTML de uso común.

Encabezados

Los elementos de encabezado se utilizan para definir los títulos o subtítulos de documentos HTML. Normalmente representan la jerarquía de la estructura del documento. Hay seis niveles de encabezado, desde h1 hasta h6, y cuanto más alto sea el nivel, más importante será el encabezado.

Ejemplo:

1
<h1>Este es un encabezado h1</h1>
2
<h2>Este es un encabezado h2</h2>
3
...
4
<h6>Este es un encabezado h6</h6>

Efecto:

[!Resumen]

• Asegúrese de que los elementos de encabezado se utilicen solo para encabezados y no deben usarse solo para negrita o fuentes grandes.
• Los motores de búsqueda utilizan los encabezados para indexar la estructura y el contenido de su página web.
• El uso correcto de los elementos de encabezado puede hacer que la página sea más legible y accesible, y al mismo tiempo beneficia el SEO.
• Debe usar h1 como el único encabezado principal (el más importante), seguido de h2 (segundo en importancia), luego h3, y así sucesivamente.

Párrafos

Los elementos de párrafo se utilizan para definir la estructura de párrafos del texto, haciendo que el texto sea más organizado y legible. Añade un salto de línea antes y después del contenido, agrupando el texto en secciones independientes, de modo que los párrafos tengan una separación clara entre ellos. El elemento de párrafo consiste principalmente en la etiqueta <p>, que representa un párrafo.

Ejemplo:

1
<p>Este es un párrafo.</p>
2
<p>Este es otro párrafo.</p>

Efecto:

[!Resumen]

• Un documento HTML puede contener varios párrafos
• El navegador añade automáticamente líneas en blanco antes y después de los párrafos
• No olvide la etiqueta de cierre (incluso si la olvida, la mayoría de los navegadores la mostrarán correctamente)
• Si no le gustan las líneas en blanco añadidas por el elemento de párrafo y desea reducir el espaciado entre líneas, use la etiqueta <br>
• De forma predeterminada, el número de caracteres mostrados en una línea de código en el elemento de párrafo está determinado por el ancho de la pantalla

Hipervínculos

El elemento <a> se utiliza para definir hipervínculos, permitiendo a los usuarios hacer clic en los enlaces y navegar a otras páginas o recursos. La etiqueta <a> generalmente contiene algo de texto o imágenes, que se convertirán en la parte clickeable del enlace. Al mismo tiempo, especificamos la dirección de destino del enlace a través del atributo href de la etiqueta <a>. Los hipervínculos son una función básica en HTML y pueden enlazar a otras partes de la página web, a otras páginas web o incluso a otros sitios web.

Ejemplo:

1
<a href="https://www.zhaojian.net">zhaoJian.Net</a>

Efecto:

Atributos de hipervínculo

• href: Especifica la URL del destino del enlace, este es el atributo más importante del enlace. Puede ser la URL de otra página web, la URL de un archivo o la URL de otro recurso.
• target (opcional): Especifica cómo se abre el enlace en el navegador. Los valores comunes incluyen _blank (abre el enlace en una nueva pestaña o ventana) y _self (abre el enlace en la pestaña o ventana actual, estado predeterminado).
• title (opcional): Proporciona información de texto del enlace, generalmente se muestra cuando el ratón se coloca sobre el enlace.
• rel (opcional): Especifica la relación con el destino del enlace, como nofollow (no seguir), noopener (no abrir nuevo contexto), noreferrer (no pasar información de referencia), etc.
• class: Especifica la clase CSS del enlace.
• id: Especifica el ID CSS del enlace.

Enlaces ancla

En una página web larga, es posible que deseemos crear enlaces a ciertas partes dentro de la página. Esto se puede lograr mediante enlaces ancla. Primero, necesitamos usar el atributo name o id de la etiqueta <a> para marcar la posición de destino, luego en el atributo href del enlace usar # más el valor name o id del destino para crear el enlace.

Ejemplo:

1
<a href="#a1">Saltar a a1</a>
2
<!-- Aquí se omite contenido suficiente para desplazarse o <br> -->
3
<a name="a1">Algún contenido</a>

Efecto:

Después de hacer clic en el hipervínculo “Saltar a a1”, la página se desplazará a la sección “contenido a1”.

Enlaces de correo electrónico

Además de enlazar a otras páginas web, la etiqueta <a> también puede enlazar a direcciones de correo electrónico. Al agregar mailto: antes del valor del atributo href, se puede crear un enlace que al hacer clic iniciará el cliente de correo predeterminado del usuario y creará un nuevo correo.

Ejemplo:

1
<a href="mailto:757118@qq.com">Enviar correo a 757118@qq.com</a>

Efecto:

Al hacer clic en este hipervínculo, el sistema iniciará el cliente de correo predeterminado y creará un nuevo correo para 757118@qq.com.

[!Resumen]

• Cuando mueve el puntero del ratón sobre un enlace en una página web, la flecha se convierte en una pequeña mano.
• Los hipervínculos no tienen que ser necesariamente texto, las imágenes u otros elementos HTML también pueden convertirse en enlaces.
• De forma predeterminada, los enlaces aparecerán en el navegador de las siguientes formas: Un enlace no visitado se muestra en fuente azul con subrayado. Un enlace visitado se muestra en morado con subrayado. Al hacer clic en un enlace, el enlace se muestra en rojo con subrayado.

Salto de línea

El elemento de salto de línea <br> se utiliza para insertar un carácter de salto de línea en el texto, forzando que el texto pase a una nueva línea.

Ejemplo:

1
Esta es una línea de texto.<br>Esta es otra línea de texto.

Efecto:

[!Resumen]

• La barra / en la etiqueta <br> es opcional. En HTML 4, la etiqueta <br /> debe incluir la barra; En HTML 5, la barra es opcional.

Negrita

El elemento <b> es una etiqueta de estilo de texto básica utilizada para establecer el texto en negrita, pero sin énfasis semántico en el texto. El elemento <strong> es una etiqueta semántica utilizada para expresar el énfasis del texto, normalmente los navegadores lo mostrarán en negrita.

Ejemplo:

1
Este es texto normal
2
<b>Este es texto en negrita</b>
3
<strong>Este es texto en negrita con énfasis semántico</strong>

Efecto:

Cursiva

El elemento <i> se utiliza para representar un efecto de texto en cursiva, pero sin énfasis semántico en el texto. El elemento <em> se utiliza para representar texto en cursiva, normalmente utilizado para enfatizar la importancia del texto o crear efectos visuales.

Ejemplo:

1
Este es texto normal
2
<i>Este es un texto en cursiva</i>
3
<em>Este es un texto en cursiva con énfasis semántico</em>

Efecto:

Subrayado

El elemento de subrayado <u> se utiliza para representar texto subrayado.

Ejemplo:

1
Este es un texto con <u>subrayado</u>

Efecto:

[!Resumen]

• En HTML 5, el elemento de subrayado <u> fue desaprobado. Esto significa que sigue siendo un elemento HTML válido, pero no se recomienda su uso.

Tachado

El elemento de tachado <del> se utiliza para mostrar texto que ha sido eliminado u obsoleto. Los navegadores generalmente añaden una línea horizontal sobre este texto.

Ejemplo:

1
Este es un texto <del>tachado</del>

Efecto:

[!Resumen]

• En HTML5, el elemento de tachado <del> fue desaprobado. Esto significa que sigue siendo un elemento HTML válido, pero no se recomienda su uso.

Resaltado

El elemento <mark> se utiliza para marcar una parte del texto para resaltar o marcar esa parte del texto. Normalmente, el texto marcado por el elemento <mark> se resaltará con un fondo amarillo para hacerlo más visible en el documento.

Ejemplo:

1
Este es un texto <mark>resaltado</mark>

Efecto:

Subíndice y superíndice

El elemento <sub> representa texto en subíndice (subscript), el elemento <sup> representa texto en superíndice (superscript). Los elementos de subíndice y superíndice se utilizan normalmente en escenarios de matemáticas, fórmulas químicas, fechas, temperaturas, etc.

Ejemplo:

1
H<sub>2</sub>O es la fórmula molecular del agua.
2
2<sup>10</sup> es igual a 1024.

Efecto: