Praca z kodami HTML - budowa prezentacji

Aby można było umieścić prezentację na howrse niestety potrzebujemy do tego kodu. Sama z początku nie zastanawiałam się co i jak działa oraz do czego jest potrzebne. Z czasem byłam zmuszona do nauczenia się części znaczników kodu html (klasa informatyczna to jednak styl życia :3). Poniżej przedstawię Wam ten które przydadzą się do tworzenia prezentacji.

Pierwszym podstawowym znacznikiem jest <div>. Służy on do otwierania i zamykania (</div>) wszystkich kodów w języku html. Dzięki niemu jesteśmy w stanie umieścić obrazek lub chociażby tekst na naszej prezentacji. 

W różnych kodach (m.in. html, css) występują pojęcia dzięki którym umieścimy dany obiekt (np. ramkę) w wybranym miejscu. Mowa oczywiście o:

width - z angielskiego "szerokość”. Za pomocą tego znacznika możemy określić jaką szerokość ma mieć nasz obiekt.

height - z angielskiego „wysokość”. Za pomocą tego znacznika możemy określić jaką wysokość ma mieć nasz obiekt.

margin-left -  z angielskiego „margines-lewo”. Za pomocą tego znacznika możemy określić odległość naszego obiektu od czegoś znajdującego się po lewej stronie (np. lewej krawędzi obrazka).

margin-top -  z angielskiego „margines-góra”. Za pomocą tego znacznika możemy określić odległość naszego obiektu od czegoś znajdującego się wyżej (np. górnej krawędzi obrazka).

Gdy znamy już podstawowe znaczniki wypadałoby zrobić coś. Na początek proponuję zbudować kod na obrazek. 

<div style="background-image:url(wklejamy adres url grafiki); width: {szerokość obrazka}px;  height: {wysokość obrazka}px; color: rgb(0, 0, 0); overflow: auto; margin-top: 0px; margin-left: 0px;">

Ale moment!

W kodzie pojawiło się coś o czym nie wspomniałam!

Aby umieścić obrazek będący naszą prezentacją potrzebujemy background-image:url(adres url grafiki). Background to z angielskiego  tło. Bez tego fragmentu obrazek po prostu się nie otworzy. Adres url to najprościej mówiąc adres bezpośredni obrazka. Aby go zdobyć musimy wrzucić nasze dzieło na stronę hostingującą. Osobiście polecam założenie konta na imageshack.us. 

Drugą nowością w kodzie jest color: rgb(treść w nawiasie na razie nas nie interesuje). znacznik ten odpowiada za kolor (najczęściej napisów). Rgb mówi nam z jakiej palety bierzemy kolor. Inna paleta to ral. Sam kod nie musi być zapisany w htmlu. Możemy to zrobić normalnie używając nazw angielskich danego koloru, ale uwaga tylko 16 jest prawidłowych. Inne mogą nie działać. Kolory które działają to:

Nazwa	Kod	Kolor
black	#000000
silver	#C0C0C0
gray	#808080
white	#FFFFFF
maroon	#800000
red	#FF0000
purple	#800080
fuchsia	#FF00FF
green	#008000
lime	#00FF00
olive	#808000
yellow	#FFFF00
navy	#000080
blue	#0000FF
teal	#008080
aqua	#00FFFF

Drugą istotną sprawą jest oddzielanie poszczególnych znaczników za pomocą średnika (;). Tak jest i koniec. Bez tego kod nie będzie działał poprawnie.

Jak zapewne zauważyliście wszystkie znaczniki są dwa razy użyte tylko mają po nawiasach kreskę /. Odpowiada ona za stworzenie zamykającego znacznika. Nie możemy zapomnieć o stosowaniu ich, ponieważ bez tego kod nie ma szans działać.
Na samym końcu prezentacji będziemy musieli dodać znacznik zamykający </div>. Ale to na końcu, na razie przejdźmy do tworzenia ramek.

Gotowy kod powinien być podobny do tego:

<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od górnej krawędzi obrazka}px;"><font color="kod koloru z palety RGB"><font face="nazwa czcionki">Tekst</font></font></div>

Użyłam tutaj znaczników font color i  font face. Są one odpowiedzialne za czcionkę. Color odpowiada za jej kolor (to raczej większość już wie), a face za rodzaj. I tu pojawia się problem. Jeśli nie znacie żadnych czcionek to odpalcie Worda. W narzędziach głównych macie opcję za pomocą której możecie zmienić czcionkę. Bierzecie jej nazwę i gotowe. Jeśli jednak dalej nie macie żadnej to polecam wziąć Arial.

Jeśli chcecie zmienić wielkość tekstu potrzebujecie <font size="1">. Tą jedynkę należy zastąpić wybraną przez siebie cyfrą, która będzie odpowiedzialna za rozmiar tekstu.
Czyli kod powinien wyglądać mniej więcej tak:
<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od górnej krawędzi obrazka}px;"><font color="kod koloru z palety RGB"><font size="1"><font face="nazwa czcionki">Tekst</font></font></div>

Kolejne ramki tworzymy niemalże identycznie. Jest tylko jeden element, który sprawia problemy osobom początkującym. Każdej kolejnej ramce  margin-top będzie określało górną odległość od ramki. W takim przypadku jeśli chcemy, żeby kolejna ramka znajdowała się pod drugą, wpisujemy wartości dodatnie (np. margin-top: 90px). A jeśli chcemy, żeby kolejna ramka znajdowała się obok drugiej lub nad nią, wpisujemy wartości ujemne (np. margin-top: -90px). Czasami sama mam z tym problemy więc robię to metodą prób i błędów, aż uda mi się "trafić" :)

No i dochodzimy do końca. Teraz gdy mamy już ramki musimy zamknąć prezentację. Potrzebujemy do tego, wspomnianego już wcześniej, znacznika </div>. Gdy go wstawimy możemy uznać naszą pracę za skończoną. Jeśli chcecie sprawdzić czy kod działa, mam dla Was tester HTML.

Gotowe kody do uzupełnienia znajdziecie w poście Praca z kodami HTML - gotowe wzory.

mugi-chan