Teoría
Teoría

Atributos de etiquetas HTML

En la tarea anterior, como has notado, no ha pasado nada después de insertar la etiqueta <img> en el código. ¿Por qué ocurrió?

Las etiquetas pueden tener atributos. Algunas etiquetas necesitan atributos. Por ejemplo, la etiqueta <img>, que denota una imagen. Es obligatorio especificar el atributo src, que especifica la dirección de la imagen (de lo contrario, el navegador no podrá cargarla).

Una etiqueta puede tener varios atributos:

<nombre-de-etiqueta attribute1="valor1" attribute2="valor2" ...>

He aquí algunos ejemplos:

<p class="important">...</p>
<a class="external" href="https://mysite.com">...</a>
<img class="avatar" src="keks.png">

En esta tarea, practicarás el uso de atributos de etiquetas.

No olvides los espacios entre el nombre de la etiqueta y el atributo y los espacios entre atributos.

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <title>Atributos de etiquetas HTML</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Instructor Cupcake</h1> <p>En los siguientes cursos, el instructor Cupcake le ayudará a menudo a dominar las complejidades de HTML y CSS. Démosle la oportunidad de presentarse:</p> <img> <hr> <blockquote> <p>Hola, me llamo Cupcake y soy tu futuro instructor. Soy desarrolladora web. Mis proyectos más famosos:<br> Cat Energy blog,<br> curso sobre HTML y CSS,<br> curso sobre JavaScript.</p> <p>¡Nos vemos en futuros cursos!</p> </blockquote> </body> </html>

CSS

body { font-family: "Georgia", serif; } blockquote { margin: 1.5em 0; padding: 0.5em 15px; line-height: 1.5; background-color: #f9f9f9; border-left: 2px solid #cccccc; } /* Ejemplo de diseño fotográfico */ .photocard { display: block; width: 300px; margin: 20px auto; border-radius: 10px; box-shadow: 0 0 5px #666666; }

ObjetivosRealizado

A la etiqueta img, añada un atributo src con el valor keks.jpg,
y luego otro atributo de class con el valor photocard.