#1 Jednoramkowe prezentacje HTML - krok po kroku

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)