Contenido del Curso
Conceptos básicos de HTML
Conceptos básicos de HTML
Marcado de Texto Especial
Etiquetas de formato de texto
HTML proporciona varias etiquetas de formato de texto que te 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 una 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, usa el subrayado con moderación para evitar saturar el texto.
La etiqueta <s>
tacha el texto, indicando eliminación o irrelevancia. Se usa comúnmente para mostrar que cierto texto ha sido eliminado o ya no es válido.
Ejemplo:
index
index
index
En el ejemplo anterior:
- Las etiquetas
<strong>
y<em>
proporcionan énfasis al texto, con<strong>
mostrando el texto en negrita y<em>
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 usando la etiqueta <a>
(ancla).
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. Formateado como
"tel:phone-number"
. Es esencial 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. Formateado como
"mailto:email-address"
. Es importante incluir la dirección de correo electrónico completa después demailto:
(por ejemplo,"mailto:example@example.com"
).
Ejemplo:
index
index
index
En el ejemplo anterior:
- La etiqueta
<a>
crea hipervínculos con diferentes destinos; - El atributo
href
especifica varias URLs, incluyendo URLs absolutas, números de teléfono y direcciones de correo electrónico.
Otros atributos útiles
La etiqueta <a>
tiene varios atributos que se pueden usar para especificar propiedades del hipervínculo. Algunos atributos comunes incluyen:
target="_blank"
: Especifica dónde abrir el documento enlazado."_blank"
abre el enlace en una nueva ventana o pestaña;download
: Especifica que el objetivo se descargará cuando el usuario haga clic en el hipervínculo. Este atributo puede tener un valor para especificar el nombre del archivo para guardar el recurso.
Ejemplo:
index
index
index
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 desencadenar acciones como enviar un formulario o ejecutar código JavaScript. Aunque no nos centraremos en JavaScript en este curso, es importante saber que tal posibilidad existe.
Tipos de botones
- Botón estándar (
<button type="button">
): Un botón de propósito general utilizado para varias acciones en la página web, como desencadenar funciones de JavaScript o navegar a otra página; - Botón de envío (
<button type="submit">
): Se utiliza dentro de un formulario para enviar los datos del formulario a un servidor; - Botón de reinicio (
<button type="reset">
): Se utiliza dentro de un formulario para restablecer los campos del formulario a sus valores predeterminados.
Ejemplo:
index
index
index
En el ejemplo anterior:
- El primer botón es un botón estándar con un atributo
onclick
que desencadena 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
¡Gracias por tus comentarios!