16. Jak wstawić obrazek

20 lutego 2010

Autor: adam-as Etykiety: chomikuj.pl, formatowanie tekstu, grafika, html, obrazek, wstawianie obrazka, zdjęcie

Często w rozmowach chomikowych, chcemy w jakiś sposób sformatować nasz tekst, aby wyglądał nieco inaczej niż tylko zwykły napis. Formatowanie tekstu, omówiłem już wcześniej. Teraz chcemy coś więcej. Spróbujemy wstawić obrazek, oraz nauczyć się paru "sztuczek" z tym związanych.

Zwykły podstawowy kod html do wstawienia obrazka na stronie, wygląda tak:

<img src="ścieżka do obrazka" alt="tekst alternatywny" />

Przykład:

Parę objaśnień odnośnie kodu.

Ścieżka do obrazka - tutaj podajemy bezpośredni link prowadzący do miejsca w którym umieściliśmy nasz obrazek, np. do naszej galerii zdjęć.
Tekst alternatywny - tutaj wpisujesz tekst, który pojawi się, gdy wyświetlanie obrazka będzie niemożliwe. Przykład? serwer nie działa, skasowaliśmy nasz obrazek z galerii, lub przeglądający internet użytkownik, ma włączoną funkcję blokowania obrazków w przeglądarce. Zawsze podawaj tekst alternatywny.

Ok, wstawiliśmy obrazek, ale teraz powstaje problem z tekstem. Zobacz co się dzieje, gdy oprócz obrazka, mamy napisany jakiś tekst.

<img src="ścieżka do obrazka" alt="tekst alternatywny" style="float:left;" />

Przykład:
Wyrównanie do lewej (style="float:left;")

Tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst,

Objaśnienie odnośnie kodu:
style="float:left;" lub style="float:right;" - tym parametrem, definiujemy ustawienie obrazka po lewej stronie względem otaczającego go tekstu. Jeżeli chcemy zrobić odwrotnie, czyli ustawić obrazek po prawej stronie, wpisujemy right zamiast left w definicji stylów.

Teraz idziemy dalej i spróbujemy dodatkowo zmienić odstęp zawartości strony od obrazka.

<img src="ścieżka do obrazka" alt="tekst alternatywny" style="float:left;margin:20px;"/>

Przykład:
Wyrównanie do lewej, ustawiona odległość 20px (pikseli)

Tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst,

Objaśnienie odnośnie kodu:
margin:20px; - dodaliśmy parametr definiujący odległość zawartości strony od obrazka. Przykładowa liczba 20 oznacza ilość pikseli o które odsuniemy obrazek od otaczającej go zawartości. Liczbę tą zmieniamy na taką, żeby osiągnąć zadowalający nas efekt.

Jak prawidłowo wyciągnąć LINK prowadzący
do obrazka w chomikuj.pl ?

Chcesz podlinkować obrazek, który masz w galerii, a następnie wkleić go w rozmowy chomikowe, ale nie wychodzi (obrazek się nie pojawia)? Opiszę Ci jak to prawidłowo wykonać, ponieważ nie każdy jak miałem okazję się przekonać, radzi sobie z wyciąganiem linków w chomikuj.pl.

Wchodzimy do folderu gdzie mamy interesującą nas grafikę, obrazek lub zdjęcie.

Klikamy w obrazek, aby uzyskać powiększenie.

Klikamy prawym przyciskiem myszy na linku "Pobierz na dysk", a następnie z menu wybieramy opcję: "Kopiuj adres odnośnika"

Tym sposobem skopiowaliśmy sobie link obrazka do tymczasowej pamięci naszego komputera. Teraz wystarczy wkleić go w omawiane na początku tego wpisu miejsce: "ścieżka do obrazka"

Oto efekt:

UWAGA! przycisk nie zadziała w rozmowach chomikowych! Ten rodzaj przycisku możesz zastosować JEDYNIE w edycji swojego profilu chomikuj.pl. Oczywiście na innych stronach internetowych, przycisk będzie działał w normalny sposób.