Introwertyczka na Bloggerze Introwertyczka na Wordpressie Introwertyczka na Faceboku Introwertyczka na Google Plus Introwertyczka na Google Plus Introwertyczka na Twitterze Introwertyczka na Tumblr Introwertyczka na Youtube Introwertyczka na Pinterest Kanał RSS bloga Introwertyczka na Bloglovin Mail Introwertyczka na Disqus Introwertyczka na We heart it

HTML: Jak wstawić obrazek?

Do wstawiania obrazków na blogu służy znacznik <img>. Znacznik ten nie posiada tagu zamykającego.

Aby wstawić obrazek należy do znacznika <img> dodać atrybut "src". Całość będzie wyglądać następująco: <img src="adres URL obrazka" />

Istnieją również inne atrybuty, dzięki którym wstawiony obrazek zyska nowe właściwości.

alt="tekst_alternatywny" - tekst alternatywny jest to taki tekst, który wyświetla się w razie niemożności wyświetlenia się obrazka. Innymi słowy: jeżeli obrazek z jakichś przyczyn nie może się załadować, wówczas wyświetla się jego opis, tekst alternatywny.

title="tytuł_obrazka" - tytuł obrazka, który wyświetla się po najechaniu na obrazek myszką. Element "title" można przypisać praktycznie każdemu elementowi języka HTML, jednak najczęściej przypisuje się go właśnie obrazkom (img) oraz odnośnikom (a).

Zarówno "alt", jak i "title" pomagają w pozycjonowaniu obrazka, ponieważ są czytane przez wyszukiwarki. 

style="width:szerokość_obrazka" - jeżeli w poście zastosujemy width równą 100%, wówczas obrazek zajmie całą szerokość posta. Możemy również ustawić szerokość obrazka w pikselach.

style="height:wysokość_obrazka" - j.w. tyle, że chodzi o wysokość obrazka.

style="border:obramowanie_obrazka" - ramka wokół obrazka, a konkretnie grubość ramki w pikselach, rodzaj ramki (np. solid) oraz kolor ramki. Możemy także wybrać np. obramowanie jedynie dla górnej części obrazka (border-top), dolnej części obrazka (border-bottom), prawej (border-right) lub lewej części (border-left).

style="padding:odległość_od_sąsiadujących_elementów" - i tak jak wyżej: możemy ustawić również padding-top, padding-bottom, padding-right lub padding-left. A ogólnie padding idzie tak: górapx, prawopx, dółpx, lewopx. Innymi słowy, całość będzie wyglądać na przykład tak: <img style="padding: 10px 5px 10px 5px;" />

Warto wiedzieć, iż style można również stosować w skinie strony, czyli w arkuszach CSS, a nie tylko w samym kodzie obrazka.

Aby wyśrodkować obrazek, należy otoczyć jego kod pozycją "center", czyli <center><img /></center>

Jeżeli mamy do wyśrodkowania kilka położonych obok siebie obrazków, możemy otoczyć je wszystkie jednym kodem "center" - dokładnie tak jak na przedstawionym niżej screenie:

Jak wstawić grafikę?

A tutaj już kod bez wyśrodkowania obrazków:

Jak wstawić grafikę?

Jeżeli chcemy uzyskać dany efekt obrazka dopiero po najechaniu na niego myszką, musimy posłużyć się znacznikiem <img:hover>

Tak jak w linkach po najechaniu myszką jest <a:hover>, analogicznie w obrazkach jest <img:hover>

Dla urozmaicenia obrazka możemy wstawić w arkusz CSS właściwość "opacity". Przeczytaj: Opacity - co to jest i czemu takie fajne?

Możemy nawet ustawić obrazki w formie latających buttonów (tzw. element marquee). Patrz: Porady HTML - Punkt 2.

Oczywiście, jak widać na wyżej dołączonych screenach, możemy stworzyć także grafikę w formie linku, czyli obrazek przekierowujący do konkretnej strony. Tutaj przyda nam się prosty kodzik: <a href="odnośnik_do_wybranej_strony"><img /></a>. Jak wiemy z powyższych informacji, zarówno do znacznika a, jak i img, możliwe jest dodanie tytułu: title.

Jak dodać zaokrąglenia do grafiki, jak wyśrodkować wszystką grafikę na pasku bocznym? O tym dowiesz się w Poradach CSS.
Kopiowanie treści jest zabronione. Wszelkie prawa zastrzeżone.

Introwertyczka na Bloggerze Introwertyczka na Wordpressie Introwertyczka na Faceboku Introwertyczka na Google Plus Introwertyczka na Google Plus Introwertyczka na Twitterze Introwertyczka na Tumblr Introwertyczka na Youtube Introwertyczka na Pinterest Kanał RSS bloga Introwertyczka na Bloglovin Mail Introwertyczka na Disqus Introwertyczka na We heart it