Teoría
Teoría

Atributos de las etiquetas HTML

En el ejercicio anterior, como ya vieron, no pasó nada después de insertar la etiqueta <img> en el código. ¿Por qué ocurrió eso?

Las etiquetas pueden tener atributos. Algunas los necesitan obligatoriamente. Por ejemplo, la etiqueta <img>, que representa una imagen. En su caso hay que indicar el atributo src, que define la dirección del archivo; de lo contrario, el navegador no podrá cargar la imagen.

Una etiqueta puede tener varios atributos:

<nombre-de-etiqueta atributo1="valor1" atributo2="valor2" …>

Aquí tienen algunos ejemplos:

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

En este ejercicio van a practicar el uso de atributos en las etiquetas.

No olviden dejar espacios entre el nombre de la etiqueta y el atributo, y también entre los propios atributos.

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <title>Atributos de las etiquetas HTML</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Instructor Cupcake</h1> <p>En los siguientes cursos, el instructor Cupcake los ayudará a entender mejor los detalles de HTML y CSS. Vamos a dejar que se presente:</p> <img> <hr> <blockquote> <p>¡Hola! Me llamo Cupcake y seré su próximo instructor. Soy desarrollador web. Mis proyectos más conocidos son:<br> el blog Cat Energy,<br> el curso sobre HTML y CSS,<br> el curso sobre JavaScript.</p> <p>¡Nos vemos en los próximos 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 estilo para la fotografía */ .photocard { display: block; width: 300px; margin: 20px auto; border-radius: 10px; box-shadow: 0 0 5px #666666; }

ObjetivosRealizado

Agreguen a la etiqueta img el atributo src con el valor photo.jpg,
y después añadan también el atributo class con el valor photocard.