Poradnik - tworzenie html

Wiele osób zapewne zawsze się zastanawiało nad tym, jak umieścić obrazek lub stworzyć ładny tekst na prezentacji. Zapewne wszyscy wiedzą, iż do tego potrzebna jest znajomość języka html (Hyper Text Markup Language). Owy kod jest pisany w języku angielskim, czyli urzędowym na [prawie] całym świecie. Nie jest on trudny. Zresztą, zaraz sami się o tym przekonacie.

Zanim zaczniemy tworzyć naszą prezentację, zapoznajmy się z podstawowymi znacznikami html:

<div> - tym „otwieramy” i „zamykamy” naszą prezentację oraz ramkę z tekstem. Owy znacznik jest nam potrzebny do tego, aby umieścić obrazek oraz tekst na prezentacji.

width - jak sama nazwa wskazuje (z ang. „szerokość”), tym znacznikiem określamy szerokość obrazka lub ramki, w której będzie umieszczony tekst.

 

height - (z ang. „wysokość”) tym znacznikiem określamy wysokość obrazka lub ramki z tekstem.

margin-left - (z ang. „margines-lewo”) tym znacznikiem określamy odległość między danym elementem, a czymś po lewej stronie.

margin-top - (z ang. „margines-góra”) tym znacznikiem określamy odległość między danym elementem, a czymś na górze.

<b> - pogrubienie tekstu.

<i> - pochylenie tekstu.

<u> - podkreślenie tekstu.

No dobrze, skoro znamy już podstawowe znaczniki, możemy stworzyć naszą ramkę z kodem. Zawsze zaczynamy najpierw od umieszczenia obrazka. Można go stworzyć w dowolnym programie graficznym zaczynając od Painta, a kończąc na Photo Shopie. Ja osobiście korzystam z: Gimp, Photoscape, Photo Filtre Studio i (najrzadziej) Adobe Photo Shop CS6. Następnie musimy umieścić nasz obrazek w Internecie za pomocą darmowych hostingów. Może to być tinypic.com, imageshack.us czy photobucket.com. Jednak ostrzegam, że na tinypic obrazki często znikają.

Następnie tworzymy kod naszego obrazka:

<div style="background-image: url(przykładowy link do obrazka); width: 940px; height: 550px; margin-top:0px; margin-left: 0px;"></div>

Jak widzicie, kod musiałam „otworzyć”  i „zamknąć” za pomocą znacznika <div></div> oraz oddzielać poszczególne polecenia [;]. Pochyła kreska [/] jest naszym domknięciem w każdym znaczniku. Szerokość i wysokość mojego obrazka będzie wynosiła w tym przypadku 940x550. Jest to obrazek, więc margin-top i margin-left mają wartości zerowe! Background-image (z ang. „tło-obrazek”) jest naszym znacznikiem, dzięki któremu będziemy mogli umieścić na prezentacji grafikę. W miejscu, gdzie mamy napisane przykładowy link do obrazka, umieszczamy bezpośredni odsyłacz do obrazka. Jak go rozpoznać? Zazwyczaj na końcu ma nazwę formatu pliku (PNG., JPG., GIF. itp.).

No, to było chyba najprostsze. Nieco bardziej skomplikowane jest tworzenie ramek, ale to nie taki diabeł straszny jak go malują. Zaraz Wam to udowodnię.

By stworzyć ramkę z tekstem ponownie musimy ją „otworzyć” i „zamknąć” znacznikiem <div></div>.

Wyjdzie nam coś takiego:

<div style="width:319px; height:420px; overflow: auto; margin-top:-448px; margin-left:120px;">KOD DO TESTU </div>

W tym przypadku, nasza ramka z tekstem będzie miała wymiary 319x420. Overflow (z ang. „przelewać”) zostawiamy tak, jak jest. Jednak tym razem musimy określić pozycję naszej ramki i to tutaj możemy pobawić się naszymi „marginesami” (left i top). W miejscy, gdzie mamy „KOD DO TEKSTU” umieścimy nasz kod z tekstem, w którym określimy wielkość, kolor itd.

Będzie on wyglądał następująco:

<span style="font-family: Verdana; text-shadow: 0px 0px 1px;"><font size="1"><span style="color:black;">NASZ TEKST</span></font></span>

Pojawiają się tutaj znaczniki, których wcześniej nie użyłam, ale to również jest język angielski.

Font-family - (z ang. „rodzinna czcionka”) tutaj wpisujemy nazwę czcionki, jaka będzie użyta w tekście.

Text-shadow - (z ang. „tekst-cień”) tym określamy pozycję cienia tekstu. Gdy dwie pierwsze cyfry będą ujemne, cień przesunie się w lewo i górę, zamiast prawo i dół.

Font-size - (z ang. „czcionka-rozmiar”) tym określamy rozmiar naszej czcionki.

Color - po angielsku „color” oznacza po prostu kolor, ale to wie każdy. Tutaj używamy angielskich nazw kolorów. W tym przypadku test będzie czarny. Można również użyć white (biały), blue (niebieski), yellow (żółty) itd.

Ten kod należy zamykać znacznikami najwcześniejszymi, czyli np. jeśli użyliśmy <div><style> to zamykamy kod tak jakby od końca, czyli zamiast </div></style> musimy napisać </style></div>.

Kolejne ramki dodajemy tak samo. Jednak jest tu pewien haczyk, który sprawia problemy początkującym. Otóż tym razem margin-top będzie określało górną odległość od ramki, a nie (jak na początku) obrazka. W związku z tym, jeśli chcemy, żeby kolejna ramka znajdowała się pod drugą, wpisujemy wartości dodatnie (np. margin-top: 30px). A jeśli chcemy, żeby kolejna ramka znajdowała się obok drugiej lub nad nią, wpisujemy wartości ujemne (np. margin-top: -30px). 

I to koniec. Mam nadzieję, że pokazałam Wam, iż tworzenie html nie jest takie straszne, jak to się wydawało na początku. To tak naprawdę zabawa. Wszystkie tłumaczenia znaczników wykonałam sama. Pamiętajcie, ćwiczenie czyni mistrza!

Życzę miłej zabawy,

Hiena