Wprowadzenie
Dzisiaj spróbuję pomóc tym, którzy uważają, że HTML to najczarniejsza magia. Też tak myślałam i stwierdzałam, że to nie dla mnie. Dopiero jak nieco się w to zagłębiłam, przekonałam się, że to naprawdę banalne.
Od czego zaczynamy?
Nie ma prezentacji bez grafiki. Wykonujemy ją w Gimpie/fotoszopie/PhotoScape - jak kto woli. Moja grafika wygląda tak:
Fantastycznie. Mamy swój wymarzony obrazek, więc czas zabrać się za kod. Niewypełnione kody wyglądają tak:
Kod na grafikę:
<div style="background-image:url(link do obrazka); width: {szerokość obrazka}px; height: {wysokość obrazka}px; overflow: auto; margin-top: 0px; margin-left: 0px;">
Kod na ramkę:
<div style="width: {szerokość ramki}px; height: {wysokość ramki}px; color: rgb(0, 0, 0); overflow: auto; margin-top: {odległość naszej ramki od górnej krawędzi grafiki}px; margin-left: {odległość ramki od lewej krawędzi grafiki}px;"><font style="color: rgb(kod koloru w RGB);" size="{wyjściowy rozmiar to 1, ale możemy zmieniać według upodobań}"><font size="{wyjściowy rozmiar to to 1, ale możemy zmieniać według upodobań}"><p style="text-shadow: 2px 2px 2px #000000;"> <span style="font-family: {nazwa czcionki, którą chcemy mieć};">TEKST</div> </div>
Jak wypełnić?
Kod na grafikę
Link - przesyłamy obrazek na tinypic.pl lub inną dowolną stronę tego typu i kopiujemy jego link
Szerokość i wysokość obrazka - wchodzimy w 'właściwości' obrazka i tam mamy wszystko ładnie wypisane
Kod na ramkę
Wymiary ramki i odległość od krawędzi - otwieramy nasz obrazek w gimpie i zaznaczamy pole, w którym chcemy mieć ramkę. Po lewej stronie wszystko mamy wypisane. Wystarczy przepisać dane do kodu.
Bierzemy na logikę, która liczba jest odległością od góry, a która od lewej. W przypadku tej grafiki logiczne jest, że większa wartość będzie oznaczała odległość od góry, a mniejsza - odległość od lewej.
Kod koloru w RGB - Wikipedia pomoże. :D Wystarczy skopiować kod znajdujący się w kolumnie 'Hex' do nawiasu, pamiętając o drabince (#)
Rozmiar - nic prostszego. Zaczynamy od 1, a gdy po wklejeniu kodu tekst jest za mały, wpisujemy 2, 3 itd.
Cień pod tekstem - to fragment zaznaczony na czerwono. Możemy zmieniać tam wartość pixeli (rozmieszczenie cienia) oraz jego kolor, tak, jak zmienialiśmy kolor czcionki. (#000000 oznacza kolor czarny) A jeśli ktoś nie chce cienia, wystarczy usunąć ten fragment.
Czcionka - Tutaj pełna dowolność, jednak przy wyborze czcionki warto pamiętać, by miała polskie znaki. Czcionek możecie sobie poszukać chociażby w Wordzie.
I na koniec - usuwamy wszystkie nawiasy z dzióbkami {}
Co dalej, gdy już to zrobimy? Wklejamy gotowy kod i cieszymy się naszą prezentacją. :)))
I co? Było aż tak źle?
Mam nadzieję, że pomogłam Wam zagłębić się w tajniki HTML'u. Jeśli macie jakieś pytania, coś Wam nie działa to piszcie w komentarzach. Z chęcią pomogę rozwiązać problem. :}
A jeśli macie jeszcze jakieś pomysły na poradniki, też piszcie.
Pozdrowionka!
~Misia (chomik11nobl)