Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprende Mejora de Texto e Interactividad en HTML | Fundamentos de HTML
Fundamentos de HTML

bookMejora de Texto e Interactividad en HTML

Etiquetas de formato de texto

HTML proporciona varias etiquetas de formato de texto que permiten añadir énfasis, subrayar o tachar texto según sea necesario.

Las etiquetas <strong> y <em> se utilizan para enfatizar texto. La etiqueta <strong> muestra el texto en negrita, indicando gran importancia, mientras que la etiqueta <em> muestra el texto en cursiva, indicando énfasis.

La etiqueta <u> subraya el texto para proporcionar claridad visual y resaltar información importante. Sin embargo, se recomienda usar el subrayado con moderación para evitar sobrecargar el texto.

La etiqueta <s> tacha el texto, indicando eliminación o irrelevancia. Es comúnmente utilizada para mostrar que cierto texto ha sido eliminado o ya no es válido.
Ejemplo:

index.html

index.html

copy

En el ejemplo anterior:

  • Las etiquetas <strong> y <em> proporcionan énfasis al texto, donde <strong> muestra el texto en negrita y <em> lo muestra en cursiva;
  • La etiqueta <u> subraya el texto, resaltándolo visualmente;
  • La etiqueta <s> tacha el texto, indicando eliminación o irrelevancia.

Enlaces

Los enlaces, también conocidos como hipervínculos, permiten a los usuarios navegar entre páginas web, recursos y diversas formas de comunicación. En HTML, los enlaces se crean utilizando la etiqueta <a> (ancla).

<a href="href-value">some text</a>

El atributo href dentro de la etiqueta <a> especifica el destino del enlace. Puede aceptar varios tipos de URLs, incluyendo:

  • URLs absolutas: Especifican la dirección completa del recurso enlazado, incluyendo el protocolo (por ejemplo, "https://www.example.com");
  • URLs de teléfono: Permiten a los usuarios iniciar llamadas telefónicas directamente desde el navegador al hacer clic. Se formatean como "tel:phone-number". Es fundamental incluir el código de país y eliminar cualquier carácter especial o espacio del número de teléfono (por ejemplo, "tel:+123456789");
  • URLs de correo electrónico: Permiten a los usuarios redactar correos electrónicos al hacer clic. Se formatean como "mailto:email-address". Es importante incluir la dirección de correo electrónico completa después de mailto: (por ejemplo, "mailto:example@example.com").

Ejemplo:

index.html

index.html

copy

En el ejemplo anterior:

  • La etiqueta <a> crea hipervínculos con diferentes destinos;
  • El atributo href especifica varias URL, incluyendo URL absolutas, números de teléfono y direcciones de correo electrónico.

Otros atributos útiles

La etiqueta <a> tiene varios atributos que pueden utilizarse para especificar propiedades del hipervínculo. Algunos atributos comunes incluyen:

  • target="_blank": Especifica dónde abrir el documento vinculado. "_blank" abre el enlace en una nueva ventana o pestaña;
  • download: Indica que el destino se descargará cuando el usuario haga clic en el hipervínculo. Este atributo puede tener un valor para especificar el nombre del archivo al guardar el recurso.

Ejemplo:

index.html

index.html

copy

En este ejemplo:

  • El atributo href especifica la URL del recurso enlazado;
  • El atributo target abre el enlace en una nueva ventana o pestaña.

Botones

La etiqueta <button> crea botones clicables en las páginas web. Permite a los usuarios interactuar con la página web al activar acciones como enviar un formulario o ejecutar código JavaScript. Aunque no nos centraremos en JavaScript en este curso, es importante saber que existe esa posibilidad.

Tipos de botones

  • Botón estándar (<button type="button">): Botón de propósito general utilizado para diversas acciones en la página web, como activar funciones de JavaScript o navegar a otra página;
  • Botón de envío (<button type="submit">): Utilizado dentro de un formulario para enviar los datos del formulario a un servidor;
  • Botón de reinicio (<button type="reset">): Utilizado dentro de un formulario para restablecer los campos del formulario a sus valores predeterminados.

Ejemplo:

index.html

index.html

copy

En el ejemplo anterior:

  • El primer botón es un botón estándar con un atributo onclick que muestra una alerta al hacer clic;
  • El segundo botón es un botón de envío que envía los datos del formulario al servidor;
  • El tercer botón es un botón de reinicio que restablece los campos del formulario a sus valores predeterminados.

Tutorial en video

1. Seleccione la afirmación correcta de las opciones proporcionadas.

2. ¿Cómo se crean los enlaces?

3. ¿Qué especifica el atributo href en una etiqueta <a>?

4. ¿Qué hace la etiqueta <button type="submit">?

question mark

Seleccione la afirmación correcta de las opciones proporcionadas.

Select the correct answer

question mark

¿Cómo se crean los enlaces?

Select the correct answer

question mark

¿Qué especifica el atributo href en una etiqueta <a>?

Select the correct answer

question mark

¿Qué hace la etiqueta <button type="submit">?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 5

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you explain more about how screen readers interact with these tags?

What are some best practices for using links and buttons in HTML?

Can you show more examples of using these tags together in a real webpage?

Awesome!

Completion rate improved to 3.13

bookMejora de Texto e Interactividad en HTML

Desliza para mostrar el menú

Etiquetas de formato de texto

HTML proporciona varias etiquetas de formato de texto que permiten añadir énfasis, subrayar o tachar texto según sea necesario.

Las etiquetas <strong> y <em> se utilizan para enfatizar texto. La etiqueta <strong> muestra el texto en negrita, indicando gran importancia, mientras que la etiqueta <em> muestra el texto en cursiva, indicando énfasis.

La etiqueta <u> subraya el texto para proporcionar claridad visual y resaltar información importante. Sin embargo, se recomienda usar el subrayado con moderación para evitar sobrecargar el texto.

La etiqueta <s> tacha el texto, indicando eliminación o irrelevancia. Es comúnmente utilizada para mostrar que cierto texto ha sido eliminado o ya no es válido.
Ejemplo:

index.html

index.html

copy

En el ejemplo anterior:

  • Las etiquetas <strong> y <em> proporcionan énfasis al texto, donde <strong> muestra el texto en negrita y <em> lo muestra en cursiva;
  • La etiqueta <u> subraya el texto, resaltándolo visualmente;
  • La etiqueta <s> tacha el texto, indicando eliminación o irrelevancia.

Enlaces

Los enlaces, también conocidos como hipervínculos, permiten a los usuarios navegar entre páginas web, recursos y diversas formas de comunicación. En HTML, los enlaces se crean utilizando la etiqueta <a> (ancla).

<a href="href-value">some text</a>

El atributo href dentro de la etiqueta <a> especifica el destino del enlace. Puede aceptar varios tipos de URLs, incluyendo:

  • URLs absolutas: Especifican la dirección completa del recurso enlazado, incluyendo el protocolo (por ejemplo, "https://www.example.com");
  • URLs de teléfono: Permiten a los usuarios iniciar llamadas telefónicas directamente desde el navegador al hacer clic. Se formatean como "tel:phone-number". Es fundamental incluir el código de país y eliminar cualquier carácter especial o espacio del número de teléfono (por ejemplo, "tel:+123456789");
  • URLs de correo electrónico: Permiten a los usuarios redactar correos electrónicos al hacer clic. Se formatean como "mailto:email-address". Es importante incluir la dirección de correo electrónico completa después de mailto: (por ejemplo, "mailto:example@example.com").

Ejemplo:

index.html

index.html

copy

En el ejemplo anterior:

  • La etiqueta <a> crea hipervínculos con diferentes destinos;
  • El atributo href especifica varias URL, incluyendo URL absolutas, números de teléfono y direcciones de correo electrónico.

Otros atributos útiles

La etiqueta <a> tiene varios atributos que pueden utilizarse para especificar propiedades del hipervínculo. Algunos atributos comunes incluyen:

  • target="_blank": Especifica dónde abrir el documento vinculado. "_blank" abre el enlace en una nueva ventana o pestaña;
  • download: Indica que el destino se descargará cuando el usuario haga clic en el hipervínculo. Este atributo puede tener un valor para especificar el nombre del archivo al guardar el recurso.

Ejemplo:

index.html

index.html

copy

En este ejemplo:

  • El atributo href especifica la URL del recurso enlazado;
  • El atributo target abre el enlace en una nueva ventana o pestaña.

Botones

La etiqueta <button> crea botones clicables en las páginas web. Permite a los usuarios interactuar con la página web al activar acciones como enviar un formulario o ejecutar código JavaScript. Aunque no nos centraremos en JavaScript en este curso, es importante saber que existe esa posibilidad.

Tipos de botones

  • Botón estándar (<button type="button">): Botón de propósito general utilizado para diversas acciones en la página web, como activar funciones de JavaScript o navegar a otra página;
  • Botón de envío (<button type="submit">): Utilizado dentro de un formulario para enviar los datos del formulario a un servidor;
  • Botón de reinicio (<button type="reset">): Utilizado dentro de un formulario para restablecer los campos del formulario a sus valores predeterminados.

Ejemplo:

index.html

index.html

copy

En el ejemplo anterior:

  • El primer botón es un botón estándar con un atributo onclick que muestra una alerta al hacer clic;
  • El segundo botón es un botón de envío que envía los datos del formulario al servidor;
  • El tercer botón es un botón de reinicio que restablece los campos del formulario a sus valores predeterminados.

Tutorial en video

1. Seleccione la afirmación correcta de las opciones proporcionadas.

2. ¿Cómo se crean los enlaces?

3. ¿Qué especifica el atributo href en una etiqueta <a>?

4. ¿Qué hace la etiqueta <button type="submit">?

question mark

Seleccione la afirmación correcta de las opciones proporcionadas.

Select the correct answer

question mark

¿Cómo se crean los enlaces?

Select the correct answer

question mark

¿Qué especifica el atributo href en una etiqueta <a>?

Select the correct answer

question mark

¿Qué hace la etiqueta <button type="submit">?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 5
some-alt