JavaScript jest językiem skryptowym działającym po stronie przeglądarki. Nie jest to to samo, co Java. JavaScript i Java to dwie zupełnie inne technlogie (mimo drobnych podobieństw - głównie w nazwie).

Oczywiście nie możesz traktować tej lekcji jako szczegółówego kursu JS. Postaram się jednak pokazać ci jak wykorzystać proste efekty js na twojej stronie.

Zdarzenia JavaScript

Dzięki zdarzeniom możemy reagować na zachownie internauty. Np. na kliknięcie:

{codecitation}<p onclick="alert('kliknąłeś mnie')">Kliknij mnie</p>{/codecitation}

przykład: kliknij mnie

Oto lista zdarzeń JS:

Wpisując w google "js events" znajdziesz wiele stron poświęconych temu zagadnieniu. Często z wieloma przykładami.

CzyToJestPoprawne?

Z pewnością natchniesz się wreszcie na dwie noptacje zdarzeń: camel case (notacja "wielbłądzia") oraz całośc pisana małymi literami (choć i tu są wyjątki w przypadku zdarzeń ze skrótem DOM w nazwie).

Obie wersje moga być poprawne. Wszystko zależy czy umieszczasz skrypt w HTML czy XHTML. Ja polecam jednak używać wyłącznie małych liter. Wtedy nazwy powyższych zdarzeń będą poprawne zarówno w HTML i XHTML.

Formularze. W budowie...

Udało się nam już trochę poukładać elementy na stronie. Pojawiły się też jakieś kolory. Jednak nadal tekst na stronie jest taki... domyślny :)
Zmieńmy to. Na tej lekcji pokażę jak w ąłtwy sposób zmienić wygląd tekstu na stronie. Zacznijmy zatem :)

Na początek, dodamy obramowanie oraz dodamy trochę odstępu między akapitami:

{codecitation}* { margin: 0; padding: 0; }
body { background: #fff url(img/background.png) 0 0 repeat-x; }
#wrapper { width: 1000px; margin: 10px auto; }
#menu { width: 200px; float: left; }
#content { width: 800px; float: left; background: red;}
p { border: 1px solid #000; margin: 12px; padding: 8px; text-align: justify; }
{/codecitation}

Jak widzisz, po raz kolejny - zmiana w pliku `arkusz.css' zmiania wygląd `index.htm' (a jeśli załączyłeś ten plik css do `kontakt.htm' to także wygląd tego pliku w przeglądarce ulega zmianie).
Co dodalismy? Odstęp między tekstem a obramowaniem o wielkości 8px, samo obramowanie 1px w kolorze czarnym (#000 = black) oraz margines o wielkości 12px. Cały tekst będzie wyjustowany.

Teraz powiększmy pierwszą literę każdego akapitu:
{codecitation}/* tu cały początek pliku arkus.css */
p { border: 1px solid #000; margin: 10px; padding: 10px; }
p:first-letter { font-size: 20px; color: #333; }
{/codecitation}

Ta nowa linia definiuje regułę dla pseudo elementu :first-letter (pierwsza litera). Pierwsza litera tekstu umieszczonego w znaczniku p będzie powiększona i wyświetlona w innym kolorze.

Co jednak, gdybyśmy chcieli wyróżnić jakiś drobny fragment tekstu? Dawniej używało się znacznika <font>. Dzisiaj jednak _NIE_ należy go używać. Znacznikiem zalecanym jest <span>.

Na poprzedniej lekcji nasza strona nabrała trochę barw. Teraz czas zająć się ułożeniem poszczególnych elementów na stronie.

Zaczniemy od ostylowania naszych warstw [nadal uważam, że słowo "pojemnik" mówi więcej:)]. Kod HTML nie zmieni się w porównaniu z poprzednią lekcją. Jednak wygląd strony ulegnie zmianie! Niemożliwe? Zobacz:).

{codecitation}* { margin: 0; padding: 0; }
body { background: #fff url(img/background.png) 0 0 repeat-x; }
#wrapper { width: 1000px; margin: 10px auto; }
#menu { width: 200px; float: left; }
#content { width: 800px; float: left; background: red;}
{/codecitation}

Po pierwsze warto zauważyć, że jeśli chcemy dopisać regułę do jakiegoś elementu z atrybutem id, dajemy #nazwa_id.

Pojemnikowi okalającemu wszystkie pozostałe pojemniki (#wrapper) ustalamy szerokość równą 1000pikseli. Wyśrodkowujemy cały pojemnik ustawiając margines lewy i prawy na wartość auto.

#menu i #content nadajemy odpowiednie szerokości, a także włączamy im "opływanie". Jest to jedna z technik ustawiania sposobu prezentacji treści na stronie (więcej można przeczytać w kursie CSS dostępnym na stronie serwisu).

Zapisz tak wyedytowany plik `arkusz.css' i odśwież stronę `index.htm' w przeglądarce. Coś się zmieniło? Zdziwiony?:)

Zaglądając w kod strony nic się nie zmieniło. A efekt wizualny zupełnie inny. Warto rozdzielać warstwę prezentacji (CSS) i strukturę dokumentu (HTML).

Już tradycyjnie, wprowadź podobne zmiany w pliku `kontak.htm'.
 

Póki co tworzyliśmy samą strukturę strony, celowo odsuwając wygląd na dalszy plan. W kilku kolejnych lekcjach będziemy próbować to nadrobić. Jako, że to jest kurs HTMl, a nie CSS, nie będziemy się zbytnio rozwodzić - poznasz jedynie podstawy. W załóżeniu jednak powinny one ci pomóc w dogłębnym poznaniu stylów CSS.

Dodajmy trochę blasku do naszej strony. Na początek dodamy gradientowe tło. Niestety pópki co CSS (wersja 2.1) nie przewiduje automatycznego tworzenia gradientów. Jednak pozwala umieszczać grafikę w tle.
Umieścimy i będziemy odpowiednio duplikować taką grafikę:

Najpierw załączmy plik css do naszej strony index.htm.

{codecitation}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <title>Moja pierwsza strona!</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <link rel="stylesheet" href="arkusz.css">
</head>

<body>
    <div id="wrapper">
        <div id="top">
            <h1>To jest moja pierwsza strona!</h1>
        </div>
        <div id="menu">
            <ul>
                <li><a href="index.htm" title="Przejdź do strony głównej">home</a></li>
                <li><a href="kontakt.htm" title="Skontaktuj się ze mną">kontakt</a></li>
            </ul>
        </div>
        <div id="content">
            <p>Tu umieść jakiś krótki wstęp.</p>
            <p>Jeśli chciałbyś się ze mną skontaktować, to zajrzyj na stronę <a href="kontakt.htm">kontaktu</a>.</p>
        </div>
    </div>
</body>
</html>{/codecitation}

Skoro mamy już załaczony plik, warto byłoby umieścić w nim coś. Plik `arkusz.css' jest zwykłym plikiem tekstowym. Tyle, że zamiast rozszerzenia `.txt' ma rozszerzenie `.css'. Do jego edycji możesz używać dowolnego edytra tekstowego (nawet Notatnika). Ja polecam geany.

Najpierw pozbądźmy się jakichkolwiek odległości (padding) i marginesów ze strony:
{codecitation}/* zawartosc pliku arkusz.css */
* { margin: 0; padding: 0; }{/codecitation}

Taki wpis znaczy "dla każdego elementu na stronie ustaw co następuje". A następuje: usuń marginesy, usuń padding. Wynikiem tego będzie "skelejenie" wszsytkiego. Znikną ze strony białe luki. To dobrze, dzięki temu, będziemy mogli opisywać teraz to sami, a ustawienia domyślne nie będą nam nic psuć.

Zajmijmy się teraz kolejnymi regułami CSS (reguła CSS czyli `separator { właściwość1: wartość_a; właściwość2: wartość_b; ... właściwośćN: wartość_z; }' ). Zadeklarujmy wygląd ciała strony:
{codecitation}/* zawartosc pliku arkusz.css */
* { margin: 0; padding: 0; }
body { background: #fff url(img/background.png) 0 0 repeat-x; }{/codecitation}

Reguła dla body mówi: "ustaw tło o kolorze białym" (#fff to inny zapis koloru białego, w pełni zrozumiały dla przeglądarek). "Na ten kolor narzuć grafikę ze źródła `img/background.png'. Grafika powinna być ustawiona w punkcie 0 0 (tzn. w lewym górnym rogu ekranu) i być powielana w poziomie".
Zapisz powyższy kod w pliku `arkusz.css', umieść ten plik w katalogu `kurs HTML youthcoders'. A plik [załączony na górze tej lekcji] graficzny umieść w katalogu `kurs HTML youthcoders/img'. Następnie otw órz plik `index.htm' w dowolnej przeglądarce i zobacz efekt swojej pracy :).

Zadanie domowe:
Zrób to samo w pliku `kontakt.htm'.
 

Jest kilka sposobów na połączenie stylów CSS z HTMLem.

1. Wykorzystanie artybutu style:

{codecitation}<dowolny_znacznik style="właściwość: wartość">zawartość znacznika</dowolny_znacznik>{/codecitation}

Przez `dowolny_znacznik' mam na myśli prawie dowolny znacznik. Np `title' nie powinien mieć stylów.
A teraz konkretne zastosowanie - zmiana koloru tła strony, oraz koloru czcionki w akapicie:
{codecitation}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <title>Przykład</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>

<body style="background: yellow">
    <p style="color: red">Ten tekst będzie czerwony</p>
    <p>Ten bedzie miał domyślny kolor (najprawdopodobniej czarny)</p>
</body>
</html>{/codecitation}

To rozwiązanie jest najprymitywniejszym i najgorszym. Dlaczego? Nawet jeśli chciałbyś, aby kilka akapitów miało taki sam styl, za każdym razem musisz dublować kod.
Gdy będziesz chciał zmienić 10 akapitów - musisz zmieniać kod w 10 miejscach. To jest rozwiązanie złe i używaj go w ostateczności.

2. Style w sekcji head

Skoro umieszczenie kodu CSS w atrybucie `style' jest złe, to co w zamian?
Można zawsze umieścić kod w sekcji head. Oto przykład:

{codecitation}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <title>Przykład</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <style type="text/css">
        body { background: yellow; }
        p { color: black; } /* w większości przeglądarek to jest wartość domyślna */
        p.mystyle { color: red; }
    </style>
</head>

<body>
    <p class="mystyle">Ten tekst będzie czerwony</p>
    <p>Ten bedzie miał domyślny kolor (najprawdopodobniej czarny)</p>
    <p class="mystyle">Ten tekst także będzie czerwony będzie czerwony</p>
</body>
</html>{/codecitation}

Jak widać na powyższym przykładzie mamy dwa akapity o kolorze czerwonym. Jednak jeśli chcielibyśmy zmienić kolor na niebieski, to zmiana ogranicza się do jednego miejsca!
A o to właśnie nam chodzi, aby zrobić wiele przy minimalnym wysiłku.

Nadal jednak czuję niedosyt... Przecież na wielu stronach chciałbym mieć takie same akapity. Czy na każdej muszę dublować kod? Nie... patrz niżej:)

3. Osobny plik ze stylami

Jest to najlepszy sposób na łączanie stylów css z kodem HTML. Jego główne zalety:
kod odpowiedzialny za prezentację jest trzymany w jednym miejscu,
    więc dużo łatwiej jest nim zarządzać
    raz wczytany nie jest więcej pobierany z serwera! (szybciej się ładuje strona)
możliwość wielokrotnego wykorzystania kodu (nawet na kilku różnych stronach, a.pl, b.pl itp.)
zmniejszenie rozmiaru pliku html

Widzisz już że to wrecz wspaniała rzecz, jednak nadal nie wiesz jak to zrobić :P. Już to naprawiamy, oto kod:
{codecitation}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <title>Przykład</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <link rel="stylesheet" href="arkusz.css">
</head>

<body>
    <p class="mystyle">Ten tekst będzie czerwony</p>
    <p>Ten bedzie miał domyślny kolor (najprawdopodobniej czarny)</p>
    <p class="mystyle">Ten tekst także będzie czerwony będzie czerwony</p>
</body>
</html>{/codecitation}

W pliku arkusz.css umieszczamy np.:
{codecitation}body { background: yellow; }
p { color: black; } /* w większości przeglądarek to jest wartość domyślna */
p.mystyle { color: red; }{/codecitation}

Powyższy kod CSS jest pełnym kodem. Nie musisz w jakikolwiek sposób rozpoczynać kodu CSS w osobnym pliku. Sam kod CSS - bez nagłowków itp.

Sposób z osobnym plikiem jest sposobem zdecydowanie najlepszym. Czasem zdarza się, że pozostałe dwa sposoby są warte rozpatrzenia. Jednak zakładaj, że są złe (a wyjątki - ja zawsze - się zdarzą).

 

Może najpierw czym jest warstwa? Mylnie możesz sądzić, że to jakaś folia. Choć przy odpowiednim użyciu stylów CSS można warstw używać jak "folii", to jednak ja proponuję abyś uważał warstwę [znacznik div] za "pojemnik" .
Przez pojemnik rozumiem prostokąt o jakichś rozmiarach, w którym możesz umieścić co tylko chcesz. Co więcej taki pojemnik sam z siebie ma niewiele cech.
W pojemniku możesz trzymać jakbłka, truskawki, proszek do prania albo częsci rowerowe. Chodzi o to, że dzięki pojemnikowi są one zebrane razem. Nie zyskują nagle jakichkolwiek właściwości "dziedziczonych" z pojemnika.

Pamiętaj - prostokąt.

Przeróbmy zatem naszą stronę `index.htm', w taki sposób, aby pewne jej fragmenty powrzucać do pojemników.

{codecitation}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <title>Moja pierwsza strona!</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>

<body>
    <div id="wrapper">
        <div id="top">
            <h1>To jest moja pierwsza strona!</h1>
        </div>
        <div id="menu">
            <ul>
                <li><a href="index.htm" title="Przejdź do strony głównej">home</a></li>
                <li><a href="kontakt.htm" title="Skontaktuj się ze mną">kontakt</a></li>
            </ul>
        </div>
        <div id="content">
            <p>Tu umieść jakiś krótki wstęp.</p>
            <p>Jeśli chciałbyś się ze mną skontaktować, to zajrzyj na stronę <a href="kontakt.htm">kontaktu</a>.</p>
        </div>
    </div>
</body>
</html>{/codecitation}

Jak widzisz mamy 4 pojemniki (warstwy):
wrapper
top
menu
content

Nazwy same mówią o tym, do czego mają służyć. Tak naprawdę, jeśli nie wykorzystuje się stylów CSS to warstwy bardzo niewiele dają.
Spokojnie - i do CSS dojdziemy w tym kursie (jako, że to kurs HTML, potraktujemy CSS bardzo pobieżnie, ale zawsze czegoś się nauczysz).
Zauważ, że tak naprawdę to niczego nie zmieniło na razie w sposobie prezentacji danych na stronie. Warstwy (znaczników div) używa się po to, aby pogrupować treść na stronie. Same z siebie niewiele formatują. Do tego służy CSS.
Teraz zapewne jesteś totalnie skołowany :P Spokojnie - w dalszej części się wszystko wyjaśni.

Zadanie dla ciebie:
Wprowadź podobną strukturę na stronie `kontakt.htm'
 

Na poprzedniej lekcji zrobiłem delikatny wstęp teoretyczny do tabel. Teraz czas je wykorzystać w praktyce.
Użyjemy tabeli na stronie kontaktu, prezentując w niej urojone (po prostu wymyślimy jakieś liczby) statyski.

{codecitation}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <title>Kontakt</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>

<body>
    <h1>Kontakt</h1>
    <ul>
        <li><a href="index.htm" title="Przejdź do strony głównej">home</a></li>
        <li><a href="kontakt.htm" title="Skontaktuj się ze mną">kontakt</a></li>
    </ul>
    <p>    <a href="mailto:zdzisio(a)serwer.pl">zdzisio(a)serwer.pl - napisz</a><br>
        tel. 99887766</p>
    <table>
        <tr>
            <td>Odebranych maili: </td>
            <td>2,3 mln</td>
        </tr>
        <tr>
            <td>Odebranych telefonów: </td>
            <td>2 057</td>
        </tr>
    </table>
    <!-- tu był link do strony głównej.
    wyrzuciłem, skoro mamy już menu -->
</body>
</html>{/codecitation}

Oczywiście dane wzięte z sufitu. Ale tu nie chodziło o wiarygodność, a o przykład.
Być może zauważyłeś ten zapis:
{codecitation}<!-- jakaś treść -->{/codecitation}
Jest to komentarz. Nie ma on wpływu na strukturę strony. Nie ma on także żadnej reprezentacji graficznej. Jest to tylko informacja dla osoby przeglądającej kod. Jeśli wyświetlisz stronę w przeglądarce, nie zobaczysz ani śladu komentarza.
 

Historia tabel w tworzeniu i kształtowaniu internetu z pewnością w przyszłości dorobi się setek publikacji. Ja w tym kurise postaram się podejść do tego tak, jak nalezy do tego podchdozić dzisiaj.
Spróbuję nie przesadzić w żadną ze stron - nie stawać ani po stronie webmasterw, którzy najchętniej w ogóle wyrzuciliby tabele na śmietnik (ah, nie bądźmy tacy srodzy, tabela czasem są bardzo przydatne). Nie stanę jednak także po stronie tych, którzy tabel używaliby do wszystkiego - otwieram lodówkę, a tam zamiast margaryny - tabelka.

Tabele służą do danych tabelarycznych. Choć są też niezwykle wygodnym (i bardzo niewłaściwym) narzędziem do formatowania treści na stronie.

Opisanie wszystkich za i przeciw stworzyłoby pokaźny artykuł, a może i nawet książkę. Przyjmijmy zatem, że zanim użyjesz tabeli zadasz sobie pytanie - czy gdybym to robił na kartce papieru, także rysowałbym tabelę? Jesli rysowałbyś, to użyj tabeli na stronie. Jeślnie nie - to wymyśl coś innego.

Dobrze, ale rozgadałem się o tym, aby tabel nie używać, a nawet nie zdążyłem pokazać czym są. Tabele składają się z wierszy, a każdy wiersz ma komórki:
{codecitation}<table>
    <tr>
        <td>1</td>
        <td>2</td
    </tr>
</table>{/codecitation}

Taki kod stworzy małą tabelę. Zawiera ona jeden wiersz (jeden znacznik tr) oraz dwie komórki w tym wierszu.

Gdybyśmy chcieli umieścić więcej wierzy, należałoby dodać więcej tr:
{codecitation}<table>
    <tr>
        <td>wiersz 1, komórka 1</td>
        <td>wiersz 1, komórka 2</td
    </tr>
    <tr>
        <td>wiersz 1, komórka 1</td>
        <td>wiersz 2, komórka 2</td
    </tr>
</table>{/codecitation}

Oczywiście jeśli dodałbyś jeszcze więcej komórek do wiersza to tabela miałaby więcej kolumn. Pamiętaj jednak, aby liczba komórek w wierszach była stała. Jeśli w jednym wierszu masz 3 komórki to wszystkie wiersze powinny mieć 3 komórki. Tak naprawdę można tworzyć nieregularne tabele. Ale to jest już torchę wyższa szkoła jazdy. Do tematu powrócę niedługo. Teraz zapraszam do kolejnej lekcji - wykorzystamy tabele w naszym projekcie!

 

Listy są dosyć często spotykanym, elementem w życiu codziennym - lista przebojów, zakupów, transferowa.
Jest to jakaś struktura, w której prezentuje się dane. Widaomo, że są one ze soą jakoś powiązane. Listę łatwo odczytać (sprawdzanie obecności), jest czytelna (wszelkie wyniki egzaminów są publikowane na listach).

Jak więc stworzyć listę na stronie www?

Służy do tego zestaw znaczników:
{codecitation}<ul>
    <li>Pierwsza pozycja na liście</li>
    <li>Druga pozycja na liście</li>
</ul>{/codecitation}

Całą listę obiejmujemy między znaczniki ul (istnieje też znacznik ol dla list numerowanych. Jednak nie będę się nimi tu zajmował). Każda pozycja na liście występuje między znacznikami li.

Gdzie na naszej stronie możemy użyć listy? Nadal nie mamy menu. Zróbmy je:
{codecitation}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <title>Moja pierwsza strona</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>

<body>
    <h1>Witam na mojej pierwszej stronie</h1>
    <ul>
        <li><a href="index.htm" title="Przejdź do strony głównej">home</a></li>
        <li><a href="kontakt.htm" title="Skontaktuj się ze mną">kontakt</a></li>
    </ul>
    <p>Tu umieść jakiś krótki wstęp.</p>
    <p>Jeśli chciałbyś się ze mną skontaktować, to zajrzyj na stronę <a href="kontakt.htm">kontaktu</a>.</p>
</body>
</html>{/codecitation}

Póki co wygląda to jakoś dziwnie i niezgrabnie. Póki co uczysz się tworzenia struktury dokumentu. Wygląd pozostawiamy sobie na deser :). Ale i nim się zajmiemy.

Zadanie dla ciebie wstaw taką samą listę menu na stronę kontaktu. Podpowiedź: po prostu skopiuj kod i wklej go w odpowiednie miejsce.

Zapraszam dalej.