Theory
Theory

Attributes of HTML tags

In the previous task, as you noticed, nothing happened after inserting the <img> tag into the code. Why did it happen?

Tags can have attributes. Some tags need attributes. For example, the <img> tag, which denotes an image. It is obligatory to specify the src attribute, which specifies the address of the image (otherwise the browser will not be able to load it).

A tag can have multiple attributes:

<tag-name attribute1="value1" attribute2="value2" ...>

Here are examples:

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

In this assignment, you will practice using tag attributes.

Don't forget the spaces between the tag name and attribute and the spaces between attributes.

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <title>Attributes of HTML tags</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Instructor Cupcake</h1> <p>In future courses, you'll often get help from Instructor Cupcake. Let's give him a chance to introduce himself:</p> <img> <hr> <blockquote> <p>Hi, my name is Cupcake and I am your future instructor. I am a web developer. My most famous projects are:<br> Cat Energy blog,<br> HTML and CSS course,<br> JavaScript course.</p> <p>We'll see you in future courses!</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; } /* Example of photo design */ .photocard { display: block; width: 300px; margin: 20px auto; border-radius: 10px; box-shadow: 0 0 5px #666666; }

GoalsCompleted

Add the src attribute with the value keks.jpg to the img tag,
and class attribute with the value photocard.