Wstawienie obrazka w BBCode jest bardzo banalne:
Jednak nas, jak zwykle, bardziej interesuje HTML. Tutaj sprawa również nie jest bardzo skomplikowana.
Przy zwykłym kodzie sprawa wygląda łatwo:
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:
(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ą:
(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ę!
|