KURS HTML


Witam wszystkich w następnej edycji 'Webmastera'. To już 5 odcinek. Ach, jak ten czas szybko leci... W chwili gdy czytacie, wakacje trwają już pewnie w najlepsze, a ja piszę te słowa w maju i nauczyciele koszą też w najlepsze ;P. No, ale nic nie poradzę na taki, a nie inny tok wydawniczy AM. Chciałbym też jeszcze nadmienić, że wszystkie niepewności związane z tematem: "Jak napisać znak ... w ISO-8859-2" rozwiążą się po przeczytaniu wykazu wszystkich znaków, który znajduje się w Textach. Dzisiejszy odcinek jest jubileuszowy, a więc będzie coś więcej niż zwykle. Najpierw jednak zajmiemy się pozostałościami z kursu HTMLa...

WYKAZY

Wykazy znacie już pewnie chociażby z Worda lub wspaniałomyślnie wprowadzonego przez MEN fantastycznego pakietu Works ;)) W Wordzie nazywane są: numerowaniem i wypunktowaniem. My natomiast będziemy posługiwać się bardziej fachowym słownictwem i nazwiemy je: wykazami uporządkowanymi i wykazami nieuporządkowanymi. Wykazy uporządkowane wyglądają tak:

  1. element 1
  2. element 2
Natomiast wykazy nieuporządkowane mogą wyglądać tak:
  • element 1
  • element 2
Mam nadzieję, że od razu zrozumieliście czym się one różnią. Nie zrozumieliście?? Są dwa wyjścia: albo jesteście ślepi, albo się jeszcze nie urodziliście ;P. Dobra, koniec tego gadania. Przejdźmy teraz do tego, jak zrobić takie wykazy. Wykaz uporządkowany "od kuchni" wygląda tak:
<OL>
<LI>
element 1
<LI>element 2
</OL>
Teraz pora na omówienie. OL definiuje nam rozpoczęcie wykazu uporządkowanego. Tagi LI tak samo w wykazie uporządkowanym jak i nieuporządkowanym definiują poszczególne elementy wykazu. Jak widać, nie potrzebują zamknięcia. Dodatkowymi parametrami OL, są:
  • START="x" - pozwala rozpocząć numerowanie od 'x';
  • TYPE="x" - pozwala określić typ numerowania listy (np. TYPE="a" elementy numeruje według małych liter);
Można też oczywiście zagnieżdżać kilka poziomów wykazu, czyli np.
<OL>
<LI>
element 1
<LI>element 2
<OL TYPE="a">
<LI>
element 2.1
<LI>element 2.2
</OL>
</OL>
Co da nam:
  1. element 1
  2. element 2
    1. element 2.1
    2. element 2.2

Wykazy nieuporządkowane tworzymy w następujący sposób:
<UL>
<LI>
element 1
<LI>element 2
</UL>
Dodatkowym parametrem UL jest TYPE="x". Definiuje on nam typ graficznego symbolu. 'x' może być równe: disc (koło), circle (okrąg), square (kwadrat). Tak samo jak w przypadku wykazów uporządkowanych możemy zagnieżdżać kilka poziomów wykazu.

[na górę]

PŁYWAJĄCE RAMKI

"Pływające ramki" działają na takiej samej zasadzie, jak zwykłe ramki. Różnią się jedynie tym, że można je wstawić niczym pole tekstowe w każdym miejscu strony (nie dzielą od razu całego dokumentu). "Pływającą ramkę" tworzymy w następujący sposób:

<IFRAME SRC="strona.html" WIDTH="x" HEIGHT="y" FRAMEBORDER="z" SCROLLING="yes" NAME="nazwa" MARGINHEIGHT="a" MARGINWIDTH="b">Twoja przeglądarka nie obsługuje "pływających ramek"!</IFRAME>
Omówionko: SRC definiuje, jaki dokument ma się znaleźć w ramce. WIDTH i HEIGHT oznaczają szerokość i wysokość ramki. FRAMEBORDER oznacza szerokość obramowania. SCROLLING definiuje nam, czy ma być wyświetlany suwak do przesuwania, w przypadku większego dokumentu (yes-tak, no-nie). NAME nadaje nazwę ramce, co nam się przyda przy robieniu odsyłaczy. MARGINHEIGHT oznacza wysokość górnego wewnętrznego marginesu ramki, a MARGINWIDTH - szerokość lewego wewnętrznego marginesu ramki. Text pomiędzy tagami <IFRAME> a </IFRAME> definiuje nam, co ma być wyświetlone, gdy przeglądarka nie obsługuje "pływających ramek".
Teraz zajmiemy się odsyłaczami do "pływających ramek". Robi się je w identyczny sposób jak w przypadku zwykłych ramek. Dla przypomnienia:
<A HREF="strona.html" TARGET="ramka">
Pod 'ramka' podstawiamy nazwę "pływającej ramki".

[na górę]

LINIA

O tym powinienem właściwie powiedzieć już dawno, ale jak wiadomo: skleroza nie boli ;)). Linia wygląda tak:


Tworzymy ją za pomocą tagu <HR> (bez zamknięcia). Dodatkowymi parametrami HR, są:
  • NOSHADE - służy do pozbawienia cieniowania;
  • SIZE="x" - ustalenie grubości linii;
  • WIDTH="y" - ustalenie szerokości linii;
  • ALIGN="z" - ustalenie wyrównania pionowego (center, left, right);
  • COLOR="a" - ustalenie koloru (hexy lub nazwa angielska)
To by było na tyle, jeśli chodzi o poziome linie.

[na górę]

ANIMACJA MARQUEE

Animacja Marquee jest wbrew pozorom elementem HTMLa. Może ona wyglądać tak:
To jest właśnie animacja Marquee
Tworzymy ją za pomocą znaczników:

<MARQUEE>Text animacji</MARQUEE>
Text animacji można dowolnie formatować, dodawać podkreślenia itp. Dodatkowo można wstawić też obrazek. Teraz omówmy parametry MARQUEE. BEHAVIOR="abc" jest parametrem, który definiuje sposób poruszania się elementów animacji. Może być równy SCROLL (przepływa przez ekran), SLIDE (leci od jednego brzegu do drugiego i zatrzymuje się), ALTERNATE (odbija się od brzegów). BGCOLOR="x" ustala kolor tła, a COLOR="y" definiuje kolor textu. SCROLLAMOUNT="a" ustala skok animacji co 'a' pixeli. SCROLLDELAY="b" ustala w milisekundach odstęp pomiędzy klatkami animacji (1000 = 1 sekunda). DIRECTION="abc" ustala ruch animacji (left-w lewo, right-w prawo, up-w górę, down-w dół). LOOP="c" powtarza animacje 'c' razy. WIDTH="x" i HEIGHT="y" ustalają szerokość i wysokość pola animacji.

[na górę]

BONUS

Teraz obiecany bonus. Pokażę wam jak wstawić zegarek na stronę. Sam skrypt omówimy po przerobieniu podstaw JavaScriptu. Na razie nie będę wam mieszał w głowie, bo i tak nic z tego nie zrozumiecie ;). Jak dobrze pójdzie, to podstawy JavaScriptu powinniście znaleźć w następnym numerze, ale nic nie obiecuję. Dobra, a teraz pora na skrypt. W sekcji HEAD dokumentu wpisujemy:

<SCRIPT><!--
// Copyright 2001 by PELE. All Rights Reserved. var timerID = null; var timerRunning = false; function stopclock() { if(timerRunning) clearTimeout(timerID) timerRunning = false; } function startclock() { stopclock(); showtime(); } function showtime() { var teraz = new Date(); var godziny = teraz.getHours(); var minuty = teraz.getMinutes(); var sekundy = teraz.getSeconds(); var timeValue = ""+(godziny); timeValue += ((minuty < 10) ? ":0" : ":") + minuty; timeValue += ((sekundy < 10) ? ":0" : ":") + sekundy; document.clock.face.value = timeValue; timerID = setTimeout("showtime()",1000); timerRunning = true; }
--></SCRIPT>
Następnie w sekcji BODY, w miejscu, gdzie chcemy umieścić zegarek, wpisujemy:
<FORM NAME="clock">
<INPUT TYPE="text" NAME="face" READONLY>
</FORM>
Ponieważ, zdaje się, zapomniałem przy opisywaniu formularzy o parametrze READONLY, to powiem tylko, że kiedy jest wpisany, powoduje, że nie można zmienić tekstu w INPUT. Nie będę pokazywał, jak wygląda ten zegarek, bo można go zobaczyć na stronie tytułowej Action Maga.

[na górę]

LUDZIE LISTY PISZĄ...

Dziękuję wszystkim, ponieważ przyszło naprawdę sporo maili z pytaniami, sugestiami i krytyką. W tym numerze postanowiłem zacytować dyskusję, która wywiązała się między mną, a pewnym osobnikiem z Bydgoszczy. Ogólnie mówiąc, chodziło mu o to, że niepotrzebnie rozlewam się nad każdym tagiem, lepiej gdybym opisał funkcje Pajączka. Chciałbym teraz powiedzieć wszystkim tym, którzy podobnie myślą, że to jest kurs HTMLa, a nie obsługi Pajączka. Równie dobrze zamiast uczyć się matematyki, moglibyśmy uczyć się obsługi kalkulatora. Dlaczego tak nie jest? Ano dlatego, że tak kurs HTMLa w AM, jak i matematyka w szkole, służą do tego, żeby się czegoś nauczyć samemu zrobić, a nie, żeby we wszystkim pomagały nam urządzenia. Ten facet argumentował wszystko tym, że używając Pajączka też chcąc nie chcąc się uczymy. Jakie było moje pytanie? Zapytałem się go, co by zrobił, gdyby pajączki i inne robactwa zniknęły mu z twardziela. On przyznał szczerze, że nie potrafiłby stworzyć żadnej strony. Ja natomiast potrafię zrobić stronę na kartce papieru podczas lekcji polskiego ;). Nie ujawniam xywki tego gościa, ponieważ chcę, żeby uniknął jakiegoś natłoku maili od gangu pruszkowskiego ;D. Na koniec tylko powiem, że doszliśmy ostatnio do względnej ugody i dał mi kilka pomysłów (thx jeszcze raz), które być może wejdą w życie od następnego numeru. Jak zawsze przypominam, że możecie słać maile na amwebmaster@poland.com z pytaniami, sugestiami i uzasadnioną krytyką. Jestem otwarty na wszelkie pomysły, pod warunkiem, że nie będą one sprzeczne z tematyką. Pamiętajcie, że to jest kurs HTMLa i nie będę tutaj opisywał funkcji Pajączka, Homesite'a, a tym bardziej edytorów graficznych (Word, Dreamweaver), od których po prostu mnie odrzuca ;-P. Do następnego listu!

[na górę]

THE END

To już koniec 5 (jubileuszowego) odcinka 'Webmastera'. W następnym numerze postaram się opisać arkusze stylów kaskadowych (CSS) i podstawy JavaScriptu. Co z tego wyjdzie, zobaczymy... A na razie mówię: "Miejcie web na karku" ;-D.

PELE

[na górę]