Teoria
Teoria

Atrybuty znaczników HTML

W poprzednim zadaniu, jak zauważyłeś, nic się nie stało po wstawieniu znacznika <img> do kodu. Dlaczego tak się stało?

Tagi mogą mieć atrybuty. Niektóre znaczniki wymagają atrybutów. Na przykład znacznik <img>, który oznacza obraz. Obowiązkowe jest podanie atrybutu src, który określa adres obrazu (w przeciwnym razie przeglądarka nie będzie mogła go załadować).

Znacznik może mieć wiele atrybutów:

<nazwa-znacznika atrybut1="wartość1" atrybut2="wartość2" …>

Oto przykłady:

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

W tym zadaniu przećwiczysz używanie atrybutów znaczników.

Nie zapomnij o spacjach między nazwą tagu a atrybutem oraz spacjach między atrybutami.

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <title>Atrybuty znaczników HTML</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Instruktor Cupcake</h1> <p>W poniższych kursach w opanowaniu zawiłości HTML i CSS często będzie ci pomagał instruktor Cupcake. Dajmy mu szansę się przedstawić:</p> <img> <hr> <blockquote> <p>Cześć, nazywam się Cupcake i jestem twoim przyszłym instruktorem. Jestem web developerem. Moje najbardziej znane projekty:<br> blog Cat Energy,<br> kurs HTML i CSS,<br> kurs JavaScript.</p> <p>Do zobaczenia w przyszłych kursach!</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; } /* Przykład projektu zdjęcia */ .photocard { display: block; width: 300px; margin: 20px auto; border-radius: 10px; box-shadow: 0 0 5px #666666; }

ObiettiviFatto

Do znacznika img dodaj atrybut src z wartością keks.jpg,
a następnie kolejny atrybut class z wartością photocard.