Símbolo © en HTML: Aprende a Usarlo con Estilo

Aprende a Usarlo con Estilo

¡Hola! Hoy vamos a hablar de algo súper útil que puedes añadir a tus páginas web: el símbolo de copyright (©). Si quieres mostrar que algo es tuyo o simplemente agregar un toque profesional a tu página, este símbolo es perfecto. ¡Vamos a aprender cómo usarlo! 🚀

1. ¿Qué es el Símbolo ©? 🛡️

El símbolo © representa la palabra "Copyright" (Derechos de Autor). Lo usamos para indicar que un contenido está protegido o para dar crédito al creador. Es muy común verlo al final de las páginas web.

Ejemplo:


<p>&copy; 2024 Mi Sitio Web. Todos los derechos reservados.</p>

En este caso, el navegador mostrará:

2. Es un Carácter Especial 📋

El © es un carácter especial en HTML. Esto significa que no puedes escribirlo directamente como un símbolo en tu teclado, pero puedes usar su código para que el navegador lo reconozca y lo muestre correctamente.

3. Atributos que Puedes Usar con © 🎨

Aunque el símbolo © por sí mismo no lleva atributos, puedes combinarlo con etiquetas como <p>, <span> o <div> para personalizarlo. ¡Aquí tienes algunas ideas!

Style:

Usa este atributo para cambiar el color, el tamaño o el tipo de letra del símbolo.


<p style="color: gray; font-size: 12px;">&copy; 2024 Mi Sitio Web</p>

En este ejemplo, el símbolo será de color gris y más pequeño. 🎨

Class:

Dale un estilo especial al símbolo usando CSS y el atributo class.


<p class="copyright">&copy; 2024 Mi Sitio Web</p>

En tu archivo CSS:


.copyright {
    font-size: 14px;
    color: darkgray;
    text-align: center;
}

¡Ahora el símbolo tiene su propio estilo personalizado! ✨

Id:

Si necesitas aplicar estilos o usar JavaScript para un solo símbolo de copyright, usa el atributo id.


<p id="mi-copyright">&copy; 2024 Mi Empresa</p>

Esto te permite modificar ese símbolo específico sin afectar a otros en tu página.

4. Ejemplos Prácticos 🛠️

Copyright Básico:


<p>&copy; 2024 Mi Sitio Web</p>

Copyright con Estilo:


<p style="color: blue; font-weight: bold;">&copy; 2024 Mi Sitio Web</p>

Copyright con Clase e ID:


<p class="mi-clase" id="mi-copyright">&copy; 2024 Mi Sitio Web</p>

5. Resumen ✍️

El © es un símbolo sencillo pero muy profesional que puedes usar para indicar los derechos de autor de tu contenido. Con atributos como style, class e id, puedes personalizarlo para que se vea genial en cualquier parte de tu página.

Símbolo ©