Kurs ten napisałem dla mojej 12-letniej córki. Jest to ten czas, kiedy dziecko umie już korzystać z serwisów społecznościowych i zakładać galerie zdjęć, a teraz chce założyć własną stronę internetową. W szkole mojej córki nie nauczali HTML ani innych sposobów tworzenia stron internetowych. Zatem, spróbowałem napisać coś bardzo prostego, co w efekcie prowadzi do zbudowania małej strony internetowej z kilku podstronami. Cała nauka zajęła jej niecałą godzinę. Radośc wielka. Choć efekt nie był oszałamiający, to był to start do wielkiej przygody, jaką jest tworzenie stron internetowych i programowanie. Teraz Tobie, drogi adepcie sztuki programowania, życzę powodzenia i satysfakcji.
Wiem, że nauka to sposób znęcania się nad dziećmi, więc
żebyś nie potraktowała mnie jako ojca-sadydtę, napisałem
Ci kurs lekki, łatwy i przyjemny.
Nie masz sie uczyć, tylko kopiować przykłady i oglądać
jak działają na Twoim kompie.
Pierwsza strona, którą stworzysz będzie wyglądała tak: index.htm
Wiadomo, że jest to badziewie jakiego świat nie widział,
ale proszę zobacz jej źródło.
O tym, że rzeczywicie tylko tyle zawiera ta strona możesz się przekonać podgladając źródlo strony.
W tym celu jeszcze raz otwórz stronę i w przeglądarce wybierz opcje: Widok - Źródło strony).
I co zobaczyłaś? Proste? Tylko tyle i juz jest strona!
Sorki nie powinno być 'Tworze' tylko 'Tworzę' itd.
Tu masz poprawioną wersję: index.htm
I co widać? Krzaczki. Badziewiaste krzaczki. Sprawdź źródło strony
(przypomnienie: w przeglądarce wybierasz opcje: Widok - Źródło strony).
Miało być dobrze. Przecież poprawiliśmy literki, a co z tego wyszło?
I tu się zaczyna całe nieszczęście polskich dzieci.
Gdyby Mikołaj Rej nie zaczął pisać po polsku
i dalej obowiązywałaby w piśmie łacina, czyli nie byłoby tych naszych pięknych ogonków przy literkach,
wszystko byłoby w porządku. Cóż, zachciało się własnych literek, no to
muszą cierpieć pokolenia.
Żeby się pozbyć badziewiastych krzaczków i zobaczyć
nasze piękne literki, musimy do naszej prostej strony
dopisać coś, co poinformuje komputer,
że nasza strona używa polskich literek.
Było prosto, ale musi wyglądać teraz tak:index.htm
Zobacz źródło tej strony.
Nie wygląda to już tak wesoło. Zaraz to wyjaśnimy w drugiej lekcji.
Podstawowym językiem służącym do pisania stron internetowych jest HTML. Nazwa jest z języka angielskiego: HyperText Markup Language, a po Polsku to znaczy: hipertekstowy język znaczników. To jest właśnie to, czego podstaw zaraz się nauczysz.
Teraz omówię te elementy, które powinna mieć każda strona internetowa. Zacznijmy od tego, że strona internetowa nie jest tylko zwykłym tekstem, a jest tekstem wraz z poleceniami dla przeglądarki internetowej. Te polecenia mówią przeglądarce jak stronę wyświetlić. Zobaczmy źródło poprzedniej strony. index.htmTo co teraz przeczytasz, to jest bodaj jedyna rzecz, którą warto zapamiętać, a potem nawet zrozumieć, (albo najpierw zrozumieć a potem zapamiętać) by móc tworzyć własne strony.
Uff! Tyle teorii, wierz mi, że niezbędnej.
Acha, miałem wyjaśnić źródło poprzedniej strony. Trochę się wymigam. Powiedzmy tak. Każda nasza strona ma mieć to wszystko, co jest na początku i na końcu w tym źródle w takiej postaci jaka tu jest i już. To co będziemy tworzyć sami według własnego upodobania, kopiując i eksperymentując ma się znaleźć między znacznikami <body> </body>
Za chwilę lekcja trzecia, a tam już przyjemne przykłady do wykorzystania w najbliższej przyszłości, gdy będziesz samodzielnie tworzyła strony.
Załóżmy, że chcemy (na początek) zbudować stronę, która ma mieć: tytuł, Twoje ulubione zdjęcie i troche tekstu. Nic trudnego. Oto ta strona. :index.htm
Jeszcze jej nie kopiuj na Twój komputer, bo chciałbym Ci najpierw wyjaśnić trzy nowe znaczniki, które znalazły się w źródle strony. A oto źródło.
index.htmA znaczniki są następujące:
Utworzymy teraz stronę, która będzie miała menu. Będziemy więc mieli stronę i jej podstrony. Grubszą czcionką zaznaczyłem to, co nowego jest w źródle strony.
index.htmMamy więc znane już znaczniki rozpoczynające i kończące paragrafy. Wewnątrz paragrafu dwa znaczniki <a>. Nazwa znacznika to skrót od słowa 'anchor' - kotwica. Służą one do wyświetlenia tekstu lub obrazka, które po kliknięciu przenoszą nas do innej strony. Jednym z ich zastosowań jest tworzenie menu strony. Tak właśnie zrobilismy w naszym przypadku. Przyciśniecie spowoduje przeniesienie do naszych podstron wakacje.htm, szkola.htm lub nawet do innej strony np. Wikipedii. Pięknie, już mamy stronę z odsyłaczami do podstron. Zaraz, zaraz, przecież nie mamy jeszcze żadnej podstrony. Nic trudnego. Oto przykład kodu HTML dla podstrony wakacje.htm:
Srawdź jak działa całość: index.htm
Trochę prostych zabiegów i Twoja strona internetowa ma styl i kolor: index.htm
Grubą czcionką zaznaczyłem zmiany wykonane w plikach.
Jak widać, jedyną rzeczą, którą zrobiłem, to dopisanie pewnej informacji w części nagłówka każdej ze stron. Jest to informacja dla przegladarki, że korzystamy z pliku o nazwie 'style.css', w którym mamy zapisane informacje o tym, jak wyświetlić stronę, czyli jaki nadać jej styl. W tym miejscu pora pokazać ten plik:
style.cssTen plik nie jest napisany w języku HTML, tylko w języku o nazwie CSS (ang. Cascading Style Sheets), co po Polsku tłumaczy się jako kaskadowe arkusze stylów. W dawnych czasach, to znaczy jakieś kilkanaście lat temu, nie używano CSS, bo jeszcze nie był wymyślony, a informacje o tym, jak ma wyglądać strona zapisywane były w języku HTML. Zapisywało się odpowiednie atrybuty przy znacznikach (o atrybutach było w lekcji nr 3). Obecnie nie zaleca się pisać atrybutów w HTML, a informacje o wyglądzie zapisywać właśnie poprzez CSS.
Cóż takiego znajdziemy w naszym pliku style.css? Są tu nazwy trzech znaczników: BODY, A i IMG. Po nazwie znacznika, pomiędzy klamrowymi nawiasami, znajduje się lista atrybutów, które nadajemy danemu znacznikowi. Każdy z atrybutów ma nazwę i wartość. Pomiędzy nazwą atrybutu a jego wartośćią zanajduje się dwukropek, a poszczególne atrybuty rozdzielone są średnikami. Można atrybuty umieszczać w kolejnych liniach, ale nie jest to konieczne.
CSS to bardzo rozbudowany język. Dość powiedzieć, że dzięki niemu można każdemu znacznikowi nadać odpowiedni kolor (color), tło (background-color),
można dodać obramowanie (border-width, border-style). Znacznikom, które zawieraja tekst można określić rodzaj czcionki (font-family),
wielkość czcionki (font-size), orientacje tekstu (text-align) - czyli powiedzieć, czy ma być wyrównany do lewej strony, prawej czy na środku.
Zapraszam Cię do własnych eksperymentów. Na początek pozmieniaj wartości atrybutów naszego pliku style.css lub posusuwaj niektóre atrybuty.
Zmień atrybuty kolorów. Jak widzisz kolory zapisane sa liczbami. Najlepiej jak wejdziesz na stronę:
Tester kolorów
i tam wybierzesz odpowiednie liczby. Możesz tam od razu sprawdzić, jak będzie prezentował się kolorowy tekst na odpowiednim tle.
To juz wszystko. Jak opanujesz to co jest w tym kursie, to możesz śmiało kontynuować naukę w oparciu o inne materiały z internetu lub podręczniki. Nie ucz się wszystkiego na pamięć. Dobra ściąga i jednocześnie kompletny kurs HTML i CSS znajduje się na stronie: Kurs HTML
Inna propozycja szkoleniowa to strona: Kurs HTML 5
Powodzenia!