Wstawianie Grafiki W HTML-u - .pl

Podstawowy układ strony w HTML-4 Podstawowy układ strony w HTML-5 Używanie styli lokalnych, globalnych i zewnętrznych w HTML-u Nagłówki HTML h1, h2, h3 Znacznik akapitu w HTML-u Znacznik krótkiego cytatu q i znacznik długiego cytatu blockquote w HTML-u Znacznik pre w HTML-u Znacznik definicji dfn w HTML-u Znacznik kodu programu code w HTML-u Znacznik kodu wyniku działania programu samp w HTML-u Znacznik danych wprowadzanych przez użytkownika w programie kbd używany w HTML-u Znacznik zmiennej w kodzie programu var w HTML-u Znaczniki wstawienia ins i usunięcia del tekstu w HTML-u Wyróżnienie ważnych fragmentów tekstu znacznikami emfazy em i mocnego wyróżnienia strong w HTML-u Znaczniki skrótu abbr i akronimu acronym w HTML-u Znaczniki bezpośredniego formatowania tekstu w HTML-u Wstawianie linków i kotwic na stronie za pomocą znacznika a w HTML-u Wstawianie list wypunktowanych w HTML-u Wstawianie list numerowanych w HTML-u Wstawianie listy definicji w HTML-u Wstawianie grafiki w HTML-u Wstawianie tabelek w HTML-u Znacznik div w HTML-u Znacznik nagłówka (header) w HTML-5 Menu poziome z rozwijaną listą w HTML-u Menu pionowe z pojawiającą się listą w HTML-u Znacznik stopki strony footer w HTML-5 Znacznik artykułu article w HTML-5 Znacznik section w HTML-5 Znacznik aside w HTML-5 Znacznik script, czyli osadzanie kodu JavaScript na stronie Znacznik canvas w HTML-u Tworzenie formularza na stronie Wstawianie wektorowej grafiki SVG w HTML-5 Style formatowania tekstu Selektory pseudoklas w CSS Animacje CSS Ta strona należy do działu: Programowanie poddziału Podstawy HTML-aAutor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 76872 razy

Wstawianie grafiki za pomocą znacznika <img src/>

Znacznik ten zawsze jest stosowany z atrybutem src, którym jest adres do grafiki, która ma być wstawiona na stronie. Możliwe jest również ustawienie następujących atrybutów tego znacznika:

• alt - tekst alternatywny, który zostanie wyświetlony jeżeli obraz będzie niedostępny. Zaleca się korzystanie z tego znacznika, jako opisu grafiki na stronie dla przeglądarek internetowych, które lubują się w ich czytaniu;
• width - określa szerokość obrazka (nie zalecane jest jego używanie, lepiej jest wstawiać grafikę o żądanych wymiarach na stronie);
• height - określa wysokość obrazka (nie zalecane jest jego używanie, lepiej jest wstawiać grafikę o żądanych wymiarach na stronie);

Przykład wstawienia grafiki na stronie:

<img src="rysunki/Panorama.jpg" alt="panorama" style="display: block; margin: auto"/>

Wynik działania powyższego kodu:

W powyższym przykładzie obrazek został wyśrodkowany za pomocą dwóch stylów:

display:block;margin: auto

Atrybutów width i height warto używać do responsywnego dostosowania szerokości obrazka do strony. Oto przykład z wykorzystaniem zamiast wcześniej wymienionych atrybutów, atrybutu style z odpowiednimi stylami CSS:

<img src="rysunki/Panorama.jpg" alt="panorama" style="width: 100%;height: 345px"/>

Wynik działania powyższego kodu:

Przydatne style CSS

Zaokrąglenie narożników pliku graficznego

img{ display: block; margin: auto; width: 50%; height: 50%; border-radius: 10px; /* ten styl jest odpowiedzialny za zaokrąglenie promieniem 10px */ }

Wynik działania powyższego zestawu styli:

Można też ustawić zaokrąglenie tak, że obrazek będzie wyglądał jak elipsa:

img{ display: block; margin: auto; width: 50%; height: 50%; border-radius: 50%; /* ten styl jest odpowiedzialny za zaokrąglenie promieniu responsywnym 50% */ }

Wynik działania powyższego zestawu styli:

Dodanie ramki obrazka

img{ display: block; margin: auto; width: 50%; height: 50%; border: 1px solid #aaaaaa; padding: 5px; border-radius: 50%; /* ten styl jest odpowiedzialny za zaokrąglenie promieniu responsywnym 50% */ }

Wynik działania powyższego zestawu styli:

Dodanie cienia ramki obrazka

img{ display: block; margin: auto; width: 50%; height: 50%; border: 1px solid #aaaaaa; padding: 5px; border-radius: 50%; /* ten styl jest odpowiedzialny za zaokrąglenie promieniu responsywnym 50% */ box-shadow: 0 0 10px 10px rgba(200, 200, 200, 0.5); /* przesunięcie pionowe cienia [px]; przesunięcie poziome cienia [px]; promień rozmycia [px]; promień rozszerzenia cienia [px] rgba( czerwony, zielony, niebieski, przezroczystość) */ }

Wynik działania powyższego zestawu styli:

Animacja przejścia z wykorzystaniem filtru graficznego

Poniższy kod sprawi, że grafika będzie wyświetlana jako czarno-biała, a po najechaniu kursorem myszy zacznie się jedno sekundowe przejście od czarno-białego do w pełni kolorowego obrazu:

<style> img.gray { -webkit-filter: grayscale(100%); /* filtr grayscale dla Safari 6.0 - 9.0 */ filter: grayscale(100%); /* filtr grayscale dla reszty przeglądarek */ transition-property: filter; /* ustawienie, dla jakich elementów będzie wykonywana animacja przejścia */ transition-duration: 1s; /* czas animacji */ transition-timing-function: linear; /* sposób realizacji animacji - liniowy */ } img.gray:hover /* zdarzenie najechania kursora myszy na znacznik img z atrybutem class = "gray" */ { -webkit-filter: grayscale(0%); /* docelowa wartość animacji dla filtra gray (Safari 6.0 - 9.0) */ filter: grayscale(0%); /* docelowa wartość animacji dla filtra gray */ } </style> <img class="gray" src="rysunki/Panorama.jpg" alt="panorama" style="display:block;margin: auto; width: 50%;height: 50%; border: 1px solid #aaaaaa;border-radius: 50%;padding: 5px;box-shadow: 0 0 10px 10px rgba(200, 200, 200, 0.5);"/>

Efekt działania powyższego kodu:

Istnieją też inne filtry graficzne:

• filtr rozmycia blur:

  img { -webkit-filter: blur(10px); /* Safari 6.0 - 9.0 */ filter: blur(10px); }

  Efekt:

  

• filtr rozjaśnienia brightness:

  img { -webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */ filter: brightness(200%); }

  Efekt:

  

• filtr kontrastu contrast:

  img { -webkit-filter: contrast(200%); /* Safari 6.0 - 9.0 */ filter: contrast(200%); }

  Efekt:

  

• filtr obrotu odcieni kolorów hue-rotate:

  img { -webkit-filter: hue-rotate(180deg); /* Safari 6.0 - 9.0 */ filter: hue-rotate(180deg); }

  Efekt:

  

• filtr odwrócenia kolorów invert:

  img { -webkit-filter: invert(100%); /* Safari 6.0 - 9.0 */ filter: invert(100%); }

  Efekt:

  

• filtr przezroczystości opacity:

  img { -webkit-filter: opacity(50%); /* Safari 6.0 - 9.0 */ filter: opacity(50%); }

  Efekt:

  

• filtr saturacji saturate:

  img { -webkit-filter: saturate(50%); /* Safari 6.0 - 9.0 */ filter: saturate(50%); }

  Efekt:

  

• filtr sepii sepia:

  img { -webkit-filter: sepia(100%); /* Safari 6.0 - 9.0 */ filter: sepia(100%); }

  Efekt:

  

Tematy powiązane

• Używanie styli lokalnych, globalnych i zewnętrznych w HTML-u
• Animacje CSS