Tekst: znaczenie i czytelna struktura
HTML opisuje rolę tekstu. CSS pozwala zmieniać jego wygląd. Dobieraj element do znaczenia, a nie tylko do pogrubienia czy kursywy.
Co oznacza wyróżnienie?
| Element | Znaczenie | Przykład |
|---|---|---|
<strong> |
Szczególna ważność | Nie udostępniaj hasła. |
<em> |
Akcent słowny | To Ty wybierasz temat. |
<b> |
Zwrócenie uwagi bez dodatkowej ważności | Słowo kluczowe w streszczeniu |
<i> |
Tekst o innej roli, np. termin obcojęzyczny | responsive design |
Przeglądarki zwykle wyświetlają <strong> i <b> pogrubione, a <em> i <i> kursywą. CSS może zmienić ten wygląd bez zmiany znaczenia elementów.
<p><strong>Uwaga!</strong> Zapisz plik przed zamknięciem edytora.</p>
<p>Wyślij <em>własny</em> projekt, a nie kopię przykładu.</p>Podkreślenie
<u> oznacza nietekstową adnotację, np. oznaczenie błędnie zapisanego słowa. Sam efekt podkreślenia uzyskasz w CSS przez text-decoration: underline;. Stosuj go ostrożnie, ponieważ podkreślenie kojarzy się z linkami.
Listy i podlisty
<ol> tworzy listę uporządkowaną, a <ul> nieuporządkowaną. Każda pozycja jest elementem <li>. Podlistę umieszczaj wewnątrz pozycji listy nadrzędnej.
<ol>
<li>Utwórz folder projektu.</li>
<li>Dodaj pliki:
<ul>
<li>index.html</li>
<li>style.css</li>
</ul>
</li>
</ol>Cytaty
<q> służy do krótkiego cytatu w zdaniu. <blockquote> oznacza osobny blok cytatu, zwykle wyświetlany z wcięciem. <cite> oznacza tytuł przywoływanego dzieła.
<p>Autorka napisała: <q>Czytelny kod łatwiej poprawić.</q></p>
<blockquote>
<p>Czytelny kod łatwiej poprawić.</p>
</blockquote>Sprawdź i zmodyfikuj
Przewidź, jak będzie wyglądała lista z przykładu, a następnie zapisz ją w swoim pliku HTML i otwórz w przeglądarce. Zmień listę kroków na listę nieuporządkowaną. Wyjaśnij, co zmieniło się w znaczeniu i wyglądzie.
Napisz krótki akapit z ostrzeżeniem i cytatem. Użyj <strong> dla ważności, <q> dla cytatu i CSS, jeżeli chcesz zmienić sam wygląd.
