Baczus

Wstawienie obrazka w BBCode jest bardzo banalne:

[img]ADRES_OBRAZKA[/img]

Jednak nas, jak zwykle, bardziej interesuje HTML. Tutaj sprawa również nie jest bardzo skomplikowana.

Przy zwykłym kodzie sprawa wygląda łatwo:

<img src="ADRES_OBRAZKA">

Jednak taki sposób jest mało "widowiskowy". Powinniśmy do tego kodu użyć atrybutów, a mamy do dyspozycji (podaję je od razu do odnośników obrazkowych):

Spoiler:

ALIGN="ustawienie"
    Określa położenie elementu w odniesieniu do kontekstu (zdeprecjonowane):

        bottom - na dole
        left - po lewej
        middle - na środku (w połowie)
        right - po prawej
        top - na górze

ALT="tekst"
    Tekst alternatywny, używany przez przeglądarki, które nie wyświetlają obrazków.

BORDER="piksele"
    Szerokość ramki elementu w pikselach (zdeprecjonowane).

CLASS="klasa"
    Przypisuje nazwę klasy (CSS) lub nazwy klas do elementu, które muszą być rozdzielone białymi znakami.

DIR="kierunek"
    Kierunek tekstu:

        ltr - od lewej do prawej
        rtl - od prawej do lewej

HEIGHT="długość"
    Wysokość w pikselach lub w procentach

HSPACE="piksele"
    Odstęp po lewej i prawej stronie w pikselach (zdeprecjonowane)

ID="nazwa"
    Przypisuje nazwę elementowi (identyfikator), która nie może się powtarzać w całym dokumencie

ISMAP
    Mapa obrazkowa serwera (współrządne kliknięcia zostaną przesłane na serwer)

LANG="język"
    Informacja o języku bazowym (np.: LANG="en" oznacza angielski, LANG="pl" - polski itd.)

LONGDESC="adres"
    Odnośnik do długiego opisu obrazka

NAME="nazwa"
    Nazywa element

SRC="adres"
    Określa lokalizację obrazka

STYLE="styl"
    Informacje stylów (CSS)

TITLE="tekst"
    Tekst pomocniczy

USEMAP="adres"
    Wiąże mapę odnośników (MAP) z elemenetm (wartość tego atrybutu musi zostać dopasowana do atrybutu NAME związanego elementu MAP)

VSPACE="piksele"
    Odstęp powyżej i poniżej w pikselach (zdeprecjonowane)

WIDTH="długość"
    Szerokość w pikselach lub w procentach

źródło

Z tego wszystkiego możemy wyjąć najważniejsze rzeczy (moim zdaniem) i wstawić obrazek w formie dokładniejszego kodu:

<img src="ADRES_OBRAZKA" border="0" alt="TEKST_ALTERNATYWNY" />

(Przy czym atrybut border w tym przypadku zlikwiduje nam ramkę wokół obrazka)

W przypadku, gdy chcemy nadać obrazkowi określone wymiary ważny jest atrybuty height i width (wysokość i szerokość). Zatem nasz kod zmieni swą postać na następującą:

<img src="ADRES_OBRAZKA" border="0" alt="TEKST_ALTERNATYWNY" height="Y" width="X" />

(Przy czym zmienne X i Y są deklarowane w pixelach lub procentach)

Dzięki tym atrybutom nasz obrazek zostanie przeskalowany do odpowiednich wartości.

Szczegółowe odsyłacze (na danym polu obrazka) są definiowane przez tzw. mapę odsyłaczy , o której będzie mowa w kolejnym wykładzie.

Dziękuję za uwagę!