- Obrazek na strone

Obrazek na strone bez Html też nie jest taki trudny wystarczy ze to przeczytasz .

Wstawianie grafiki do dokumentu

Podstawowa konstrukcja ma następującą postać:

<img src="/sciezka/plik_graficzny" alt="nazwa alternatywna">

Img jest skrótem od Image (obraz), natomiast src jest skrótem od Source (żródło). Alt jest nazwą alternatywną, a więc taką, która poinformuje o zawartości ilustracji w urządzeniu nie odczytującym grafiki. Efekt zastosowania konstrukcji jest następujący:

Sufi w kwiatach

Jeśli nie stosujemy żadnych dodatkowych atrybutów, obrazek jest ustawiany przy lewym brzegu dokumentu i ma wielkość oryginału. Możemy jednak użyć szeregu atrybutów, które zmienią położenie, wielkość i inne cechy obrazka.

Przeglądarka automatycznie odczytuje właściwą wysokość i szerokość ilustracji, ale zazwyczaj w edytorach HTML wielkości te są jawnie wstawiane, np.

Jeśli z jakichś powodów zależy nam na deformacji oryginalnych wymiarów, możemy je ręcznie zmienić, podając arbitralnie inne rozmiary, na przykład:

Sufi w tulipanach

Należy przy tym pamiętać, ze zmniejszenie rozmiarów w definicji nie wpływa na wielkość pobieranego obrazka - jest on pobierany w oryginalnym rozmiarze, a następnie zmniejszany przez przeglądarką. Przy zwiększaniu wymiarów w stosunku do wartości oryginalnych pamiętajmy również o malejącej rozdzielczości obrazka na ekranie przeglądarki.

Obramowania i odstępy

W starszych wersjach HTML stosowano atrybut border, za pomocą którego nadawano grafice obwódkę. Obecnie jest to atrybut przestarzały, natomiast jego rolę przejęły style CSS, o znacznie większych możliwościach - obramowanie border lub obrys outline.

<img src="/grafika/sufinka.jpg" width="171" height="177" alt="Sufi w tulipanach" style="border: 5px red solid; ">

Sufi w tulipanach

Poprzednio stosowano atrybuty hspace i vspace, za pomocą których tworzono dodatkową przestrzeń w poziomie i w pionie między grafiką a sąsiadującymi elementami. Obecnie są to atrybuty przestarzałe, które zastąpiono stylami CSS - marginesem globalnym (margin) lub cząstkowym (margin-top, margin-bottom, margin-left, margin-right).

Ten tekst Sufi w tulipanach jest odsunięty od obrazka o 50 pikseli w poziomie.

A ten Sufi w tulipanach o 100 pikseli

Akapit 50 pikseli nad grafiką.

Akapit 50 pikseli pod grafiką.

Pozycja grafiki

W starszych wersjach HTML stosowano atrybut align (left, center, right), za pomoca którego ustawiano grafikę przy lewym lub prawym marginesie, względnie na środku wiersza. Obecnie jest to atrybut przestarzały, natomiast jego rolę przejęły style CSS.

Grafika jako blok

Przede wszystkim zwróć uwagę, że grafika nie jest elementem blokowym, zajmującym na wyłączność miejsce w wierszu, lecz tzw. zastępowanym, i możliwe jest ustawienie kilku grafik obok siebie.

Sufi w tulipanach

Chcąc umieścić grafikę jako samodzielny element w wierszu, można by ją umieścić w elemencie blokowym div, ustawionym po lewej czy prawej stronie lub na środku wiersza.

Jeśli nie zapewnisz osobnego miejsca grafice, sąsiadująca z nią inna grafika zostanie ustawiona w tym samym wierszu.

Możesz też nadać grafice blokowy charakter, jawnie zmieniając domyślny sposób jej wyświetlania, korzystając z polecenia stylów display:block;

Pozycjonowanie poziome

Grafikę często umieszcza się w ramach akapitu, a wtedy ujawnia swój naturalny charakter, czyli ukazuje się w jednym wierszu w treścią akapitu.

Przykład:

Najpierw rozpoczniemy akapit, potem umieścimy w nim zdjęcie psa Sufi w tulipanach i wreszcie zakończymy akapit.

Oczywiście takie rozwiązanie jest rażące z estetycznego punktu widzenia. Stosuje się zatem pozycjonowanie grafiki przy prawym lub lewym marginesie strony (lub nadrzędnego bloku), natomiast treść akapitu oblewa ilustrację. Więcej informacji znajdziesz w dziale o stylach - przepływanie elementów.

Aby umieścić ilustrację przy prawym marginesie, należy jej nadać styl style="float: right; ".

I rezultat:

Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Sufi w
tulipanach Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku.

Analogicznie, aby umieścić ilustrację przy lewym marginesie, należy jej nadać styl style="float: left; ".

Sufi w
tulipanach Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy lewym marginesie bloku.

Jak widać, ilustracja jest wtedy swobodnie oblewana z lewej strony przy definicji float:right i z prawej strony przy definicji float:left.

Pozycjonowanie pionowe

Do dyspozycji mamy jeszcze technikę pionowego pozycjonowania elementów względem siebie - wykorzystujemy w nim polecenie stylów vertical-align, które zastąpiło przestarzały atrybut align (top, middle, bottom).

Kilka przykładów z użyciem grafiki i akapitu.

Sufi w tulipanach Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach, Sufi w ogrodzie, w tulipanach.

Dziękuje za uwage i zapraszam ponownie .:) BaRoNeQ®