HTML5 - obrazki, linie
Trudno sobie wyobrazić strony internetowe bez grafiki, gdyż często jest ona z jednej strony niezbędnym elementem informacyjnym, z drugiej zaś nadaje stronom efektowny wygląd, jeśli tylko autor umie nią zręcznie operować.
Napis css sugeruje stosowanie arkusza stylów.
Większość znaczników otwarcia posiada znacznik zamknięcia. Do wyjątków zaliczamy wstawianie grafiki.
| Określenie | Znacznik | Przykład | Efekt/Uwagi |
|---|---|---|---|
| Przełamanie linii | br | Przed br <br> po br | Przed br po br |
| Pozioma linia | hr | <hr> | |
| Długość linii | width | <hr width="50%"> | w % lub pixelach |
| Grubość linii css | size | <hr size="4"> | |
| Brak cienia css | noshade | <hr size="4" noshade> | |
| Kolor linii css | color | <hr color="maroon"> | |
| Wstawienie grafiki | img | <img src="obraz.jpg"> |  |
| Źródło niezbędny | src | src="ścieżka/obraz.jpg" | element niezbędny do wyświetlenia grafiki (rozszerzenia: png, jpg, gif, bmp) |
| Alternatywny tekst wskazany | alt | alt="kwiaty w wazonie" | informuje o zawartości ilustracji w urządzeniu nie odczytującym grafiki |
| Rozmiar obrazka (szerokość, wysokość) | width height | <img src="obraz.jpg" width="80"> |  Stosujemy jeden z nich, drugi ustalany jest automatycznie. Może być określany w %. |
| Obramowanie css | border | <img src="obraz.jpg" border="2"> | domyślnie równe 0 gdy obrazek jest odsyłaczem część przeglądarek dodaje obramowanie |
| Ustawienie względem tekstu css | align | <img src="obraz.jpg" align="right"> | Możliwe wartości: "left", "right", "top", "middle" - tekst ustawiony na średniej wysokości względem obrazka, "bottom" - tekst ustawiony na dole obrazka (domyślnie). Do środkowania grafiki używaj odrębnego znacznika center. |
| Odległość od tekstu pozioma, pionowa css | hspace vspace | <img src="obraz.jpg" hspace="20"> | Nie działa. Tutaj użyłem arkusza stylów. |
| Grafika svg - Okrąg | circle | <svg width="150" height="100"> <circle cx="50" cy="50" r="40" stroke-width="4" stroke="olive" fill="gold"/></svg> | Przykład grafiki wektorowej wprowadzanej w html5. |
| Grafika svg - Prostokąt | rect | <svg height="60"> <rect id="mojProstokat" width="200" height="50" stroke-width="8" stroke="blue" fill="gold" /> </svg> |