Na początek coś na rozgrzewkę. Nasza witryna ma już strukturę, a dzięki temu iż pokolorowaliśmy tła poszczególnych bloków, widzimy dokładnie jak to wszystko wygląda. Pierwsze co rzuca się w oczy to to iż wszystkie bloki witryny są przysunięte do lewej części okna przeglądarki. Większość witryn jest
jednak zawsze wyśrodkowana, tak iż po obu stronach konkretnej strony jest zachowany jednakowy odstęp. Zróbmy to teraz w naszym serwisie. Otwieramy KED-a,  a  następnie pliki index i styl. Ponieważ chcemy zmienić wygląd strony, zmiany musimy przeprowadzić… oczywiście w pliku css.

W naszym pliku styl.css odnajdujemy część odpowiedzialną za całość witryny. Jak pamiętamy wszystkie bloki witryny umieściliśmy w jednym bloku ogólnym i
nazwaliśmy go glowny. W pliku css, przy części odpowiedzialnej za wygląd tego bloku zdefiniowaliśmy szerokość strony. Pisząc stronę mam na myśli nie całą
stronę w przeglądarce a jej funkcjonalne części czyli nagłówek, menu, treść i stopkę. Reszta to tylko tło. Szerokość tych elementów mamy ustalona na 780
px. Jeśli ktoś ma rozdzielczość 800 na 600, to bloki witryny wypełnią całe okno przeglądarki (na szerokość). Jednak przy większej rozdzielczości jak widać
bloki zajmują tylko część ekranu i są przysunięte na lewo. Naszym zadaniem jest stworzenie równych odstępów od lewej i prawej strony ekranu. Jak to zrobić?

Ktoś powie, użyć marginesów. Owszem trzeba użyć marginesów ale jak je prawidłowo ustawić? Możemy wyliczyć odległości i wpisać dla lewego i prawego
marginesu np po 30 px ale wtedy przy innej rozdzielczości ekranu wszystko się rozjedzie. Nasze rozwiązanie musi być uniwersalne. Dlatego użyjemy specjalnej wartości marginesu – auto. To znaczy że margines będzie tworzony automatycznie w zależności od potrzeb (czyli defacto zależnie od rozdzielczości).
Oczywiście aby to zadziałało musimy ustawić auto zarówno dla prawego jak i lewego marginesu. Odnajdujemy zatem blok glowny w pliku css i dopisujemy dwie linijki:

Dzięki temu nasza strona w przeglądarce będzie teraz idealnie wyśrodkowana (sprawdźcie). Warto tu zauważyć, że gdybyśmy nie mieli bloku glowny , margines musielibyśmy ustalac dla wszystkich części witryny (nagłówek, stopka itd.). Efekt oczywiście byłby taki sam ale należałoby wprowadzać zmiany w conajmniej 4 różnych miejscach, co nie tylko wydłuzyłoby niepotrzebnie kod witryny, ale i stanowiłoby pewną komplikację gdy strona będzie bardziej rozbudowana. Dzięki ogólnemu blokowi głównemu, wszystko mozemy robić w jednym miejscu, a wpływamy na całą stronę.

Jeszcze jedna uwaga. W niektórych kursach do tej pory wyśrodkowanie elementów uzyskuje się za pomocą dwóch znaczników<center></center>. Owszem cokolwiek będzie miedzy tymi znacznikami zostanie wyśrodkowane. Jednak po pierwszeten znacznik należy wstawiać już w kodzie html czyli naszym pliku index.html. Gdy strona będzie bardziej rozbudowana , ten znacznik musiałby być powtórzony w każdym pliku. I znów przy jakiś zmianach trzeba edytować mnóstwo plików. Po drugie dążymy do tego aby wszelkie zmiany wyglądu strony odbywały się z pliku css. A po trzecie znacznik <center> nie jest już wspierany przez nowsze wersję html-a i niedługo zostanie wycofany całkowicie, dlatego stosowanie go nie jest już mile widziane.

Mamy wyśrodkowaną stronę czas zrobić coś z poszczególnymi blokami naszego bloga. Na początek zajmijmy się częścią – naglowek czyli logo strony. W większości stron mamy tutaj tytuł strony plus jakiś obrazek. Zajmijmy się tym teraz. Na początek musimy sobie przygotować taki obrazek. Oczywiście w programie graficznym. Tutaj mamy już dowolność. Można korzysać z Gimpa, Photoshopa itp. Byle nie Paint . Osobiście kozystam z Gimpa albo Photoshopa.

Nie będe tu pokazywał  jak coś robić w tych programach gdyż nie jest to kurs grafiki. Powiem tylko co musimy uzyskać.
Przede wszystkim wymiary naszego obrazka muszą być ustalone. Jak pamiętamy szerokość naszego bloku głównego (a wiec i bloku-logo) to 780px. Taką szerokość musi też mieć nasz obrazek. Wysokość to już raczej sprawa dowolna jednak nie możemy przesadzić. 200 pikseli powinno być w sam raz. Na takim obrazku mniej więcej pośrodku dajemy tytuł strony a z boku jakieś logo, element graficzny. To już wedle fantazji:) Jako logo możemy wstawić też np zdjęcie. Grunt aby nasz obrazek miał wymiary takie jak podałem. Zapisujemy go w formacie jpg! O tym trzeba pamiętać.

Internet to nie dysk twardy, gdzie zdjęcia mają i ponad 5 Mb. Tutaj liczy się każdy kB. Im większy rozmiar elementów graficznych na stronie tym dłużej
ładuje się dana strona. Należy więc dążyć do tego aby pliki graficzne były jak najmniejsze (wagowo). Już 100kB dla pliku graficznego to za dużo. 100 kB
powinny ważyć w sumie wszystkie pliki graficzne strony (mówię tu o plikach tła, logo itp.). Co do grafik wstawianych potem w treści strony jak np. zdjęcia,
nie ma już takich ograniczeń. Oczywiście nie można wstawiać zdjęć które mają kilka mega bo zanim się wczytają internauta dawno opuści stronę. Dobrym
zwyczajem jest robienie miniatur zdjęć, które po kliknięciu otwierają dopiero zdjęcie w pełnym rozmiarze.

Wróćmy jednak do naszego logo. Jest to zazwyczaj największy wagowo element strony dlatego wielkość około 40-70 kB jest tu do zaakceptowania. W moim wypadku plik ten waży około 55 kB. Ostatecznie może być . Tak więc zpaisujemy logo w formacie jpg i staramy się go skompresować do odpowiedniej wagi. Oczywiście Paint np. też zapisuje jpg ale nie ma w nim mozliwości wybrania stopnia kompresji obrazka, a tym samym nie mamy wpływu na jego końcową wagę. Dlatego trzeba użyć programu bardziej zaawansowanego. Jakiego to już Wasz wybór.

Zrobiłem przykładowy plik  z którego będę korzystał. Możecie go dowolnie edytować lub stworzyć swój własny.

Nasz plik nazywamy logo.jpg . Jednak nie umieszczamy go tam gdzie pliki index i styl. Lepiej oddzielić pliki graficzne od plików strony. Tworzymy więc w
naszym folderze, tam gdzie mamy pliki index i styl, katalog – grafika, i tam umieszczamy nasz plik logo.jpg .

Teraz musimy go umieścić na naszej stronie. Robi się o inaczej niż np. wstawianie obrazków typu zdjęcia itp. w treści witryny. Ponieważ nasz plik to logo,
a więc część niezmienna naszej strony, należy go na stałe zdefiniować w pliku css.
W pliku styl.css odnajdujemy część  odpowiedzialną za nagłówek naszej strony:

Mamy tu część odpowiedzialną za kolor tła naszego bloku naglowek. Jednak teraz zamiast tła będziemy chcieli mieć obrazek a więc usuwamy linijkę
background-color. Aby zdefiniować tło bloku jako obrazek  musimy zmienić definicje naszego nagłówka na następującą:

Tak więc po kolei. Obrazek, tło danego bloku definiujemy za pomocą słowa background po którym wpisujemy url czyli po prostu ścieżkę dostępu do danej
grafiki. Po prostu musimy powiedzieć przeglądarce gdzie ma szukać naszego loga. Jak widać nasza ścieżka prowadzi do katalogu grafika, a potem wskazuje plik logo.jpg czyli to o co nam chodizło. Warto zauważyć,  że scieżke podajemy nie w pełnej postaci (C:/moja_strona/grafika/logo.jpg). Podajemy ścieżke począwszy od katalogu w którym znajduje się nasz plik styl.css . Gdyby logo.jpg znajdowało się nie w katalogu grafika ale tam gdzie nasz plik index i styl, to po url podalibyśmy tylko nazwe pliku czyli: url(logo.jpg) . To wszystko jest bardzo sprytnie ułożone, gdyż nawet gdy zmienimy lokalizację naszych plików np.
przeniesiemy na inny dysk czy wyślemy na serwer, to nasz url zawsze będzie prawidłowy, gdyż wskazuje ścieżkę względną do naszego pliku. Po adresie url
naszego pliku z grafiką podajemy jeszcze słowo no-repeat . Zakazuje ono przeglądarce powielać obrazek. Normalnie gdy każemy jakiś obszar wypełnić
tłem to zostaje on powielony tak aby wypełnić cały obszar. Gdy naszą grafiką jest np. jakiś deseń, to powtarzanie takie jest nawet wskazane. Jednak
zazwyczaj chcemy aby nasza grafika nie była ucięta czy powielona i zajmowała dokładnie tyle miejsca ile chcemy. Słowo no-repeat zapewnia nam iż nawet
jeśli miejsce do wypełnienia będzie większe, to nasza grafika zostanie wyświetlona tylko raz.

W naszym przypadku podajemy jeszcze w definicji nagłówka dokładny jego rozmiar. Chodzi o to aby nasza grafika była wyświetlona w całości. Przeglądarka jest cwana. Jeśli definiujemy jakiś blok o szerokości 780 pikseli to nam taki blok zrobi ale wyskość jego ustali tylko na jedną linijkę. Dopiero po wpisaniu
czegoś do tego bloku, wydłuża się on aby pomieścić wszystko co trzeba. W niektórych sytuacjach jest to bardzo przydatne – strona sama dopasowuje sie do
ilości tekstu – ogólnie do zawartości. Jednak w przypadku naszego loga chcemy aby było ono jednakowe przez cały czas. Niekiedy widziałem strony , gdzie
autor radził sobie wstawiając do danego bloku….nowe linie. Nową linię wymuszamy w przeglądarce znacznikiem <br />. Podając po sobie kilka takich
znaczników sprawimy iż otrzymamy kilka pustych linii jedna pod drugą. Oczywiście jest to jakiś sposób na to aby sztucznie zwiększyć wysokość danego bloku,
jednak jest to rozwiązanie nieestetyczne i nie powinno sie tego stosować. Zamiast tego podajemy po prostu wymiary naszego pudełka na sztywno. Wystarczą dwie linijki width i height tak jak to zrobiliśmy. Dzięki temu nasz blok będzie miał szerokość dokładnie 780 px, a wysokosć 200 px. Tak naprawdę ważna jest
tylko wysokość , gdyż szerokość ustaliliśmy już jak pamiętacie w bloku głównym. A wszystkie inne bloki po nim dziedziczą tą szerokość. Jednak dla
bezpieczeństwa warto podać raz jeszcze szerokość. Nawet jeśli kiedyś zmienimy szerokość bloku głównego (np. jeśli zechcemy poszerzyć naszą stronę) to nasz nagłówek utrzyma swój rozmiar.

Oczywiście wysokość bloku podajemy dokładnie taką, jaką wysokość posiada nasz obrazek który służy za tło.

Zapisujemy plik styl.css i możemy sprawdzić efekt otwierając index.html . Jak widać nasze logo wygląda już jak trzeba. Jedyne co szpeci jeszcze naszą prace
to tekst – "nagłówek strony" na tle naszego logo w lewym górnym rogu. Jak pamiętamy tekst ten służyć miał nam tylko jako pomoc w zorientowaniu sie gdzie
znajdują się poszczególne bloki. W tej chwili jest on nam zbędny wiec otwieramy plik index.html w KED i usuwamy z linijki: <div id="NAGLOWEK">Nagłówek strony</div> – tekst Nagłówek strony. Pozostanie nam tylko pusty w środku blok:

I o to nam chodziło:) Nasze logo jest póki co gotowe.

Każdy inny blok na naszej stronie możemy wypełnić dowolnym tłem dokładnie w ten sam sposób. Przygotowujemy obrazek o odpowiednich wymiarach, podajemy w definicji bloku jego adres oraz określamy wymiary i gotowe. W praktyce takie coś warto zastosować jeszcze dla stopki naszej strony. Menu i treść wymaga trochę innego podejścia. Zajmiemy się tym jednak kiedy indziej.

Teraz czas połączyć naszą stronę z innymi.
Odnośniki na stronach widział każdy. Klikamy i strona wysyła nas na inną podstronę lub do zupełnie innego serwisu. W praktyce stworzenie hiperłącza jest
bardzo proste. Zacznijmy jednak od stworzenia podstrony w naszym serwisie. W KED klikamy Plik -> Nowy plik . Teraz przechodzimy do pliku index.html i
zaznaczamy cały stworzony przez nasz kod. Następnie klikamy prawym na zaznaczenie i z menu wybieramy kopiuj. Przechodzimy do nowego pliku, klikamy prawym i wklej. Tym sposobem stworzyliśmy dokładną kopię naszej pierwszej strony. Oczywiscie chcemy aby się różniła od strony głównej. Jednak najpierw klikamy Plik -> Zapisz plik jako.. i nazywamy zapisywany plik… no właśnie jak?

O ile pierwsza strona serwisu, strona główna zawsze musi się nazywać index.html o tyle do pozostałych podstron naszego serwisu nie ma już takiej reguły. Możemy więc nazywać pliki jak chcemy. W praktyce dobrze jest powiązać nazwe pliku z faktyczną jego zawartością. Powiedzmy że nasza podstrona będzie zawierała krótkie informacje o autorze strony. Zapisujemy więc plik jako omnie.html a jako miejsce zapisu wskazujemy katalog w którym jest już nasz index.html i styl.css . To bardzo ważne aby wszystkie pliki zapisywać w tym samym katalogu co index i styl . Bez tego nie stworzymy odpowiedniej nawigacji,a nasza grafika nie wyświetli się.

Po zapisaniu pliku czas go zmodyfikować. W pliku omnie.html zmieniamy linijki które są odpowiedzialne za treść:

Chcemy napisać coś o sobie, a więc zmieniamy na np. coś takiego:

Oczywiście to tylko przykład. Tak naprawdę treść w tej chwili nie ma takiego znaczenia. W przyszłości dokładniej zajmiemy sie każdą podstroną serwisu i
wtedy pokażę jak sformatować nasz tekst, dodać nasze zdjęcie itd. Póki co chcemy tylko aby podstrona się jakoś odróżniała. Możemy jeszcze zmienić tytuł
naszej podstrony – <title>Strona domowa</title> – na:

Jak pamiętacie tytuł wyświetla się na pasku górnym przeglądarki. Stosowanie takiej struktury tytułu czyli – TYTUŁSTRONY -> TYTUL PODSTRONY ułatwia
orientację w serwisie gdy ktoś wejdzie nie na stronę główną, tylko od razu na podstronę (zdarza się to często gdy ktoś znajdzie naszą stronę np. w
wyszukiwarce).

Zapisujemy nasz plik omnie.html . Podstrona naszego serwisu jest już gotowa i teraz czas ja połączyć ze stroną główną. Przechodzimy do pliku index.html .
Interesuje nas blok menu :

Zamiast słowa Menu wpisujemy coś takiego :

Gotowe. Nasze hiperłącze zostało stworzone. Jak to działa? Do definicji hiperłączy służy znacznik <a></a>. Znacznika tego nigdy nie używamy bez parametru
href. To on służy do wskazywania dokąd ma prowadzić hiperłącze. Parametr podajemy wewnątrz znacznika <a>. A wartością naszego href jest po prostu nazwa
naszego pliku, do którego chcemy stworzyć odnośnik. Pamiętajcie aby nie używać w nazwach plików dużych liter!! To jeden z najczęstszych błędów
początkujących twórców stron. Konsekwentnie używajcie małych liter. Nie wolno też używać spacji. Zamiast tego można się posłużyć podkreśleniem _ np.
o_mnie.html . Nasz plik jednak nazywa się już omnie.html i tak wpisujemy w href.

Pomiędzy znacznikami <a> i </a> znajduje się treść którą chcemy zrobić odnośnikiem. Może to być wyraz, kilka wyrazów a nawet zdanie czy cały blok tekstu.
Wszystko co zamkniemy pomiędzy znacznikiem <a> </a> będzie odnośnikiem (Tak, nawet obrazek !!).

Po końcu znacznika <a> warto wpisać jeszcze znak nowej linii. Domyślnie przeglądarka traktuje wszystko jak jedną linię i bez tego znacznika, każdy inny
tekst czy hiperłącze zostałyby ustawione w linii za naszym odnośnikiem. Dzięki nowej linii mamy pewność iż nasze menu będzie wyglądać jak trzeba. Nową linię tworzymy wpisując znacznik <br />. Tak wiec cały nasz blok wygląda tak:

Jak widzicie zastosowałem w kodzie wcięcia i rozbiłem go na kilka linijek aby był bardziej czytelny. Html nie interpretuje tego jak kod jest ułożony więc mamy tu pełną dowolność. Ważne aby było to dla nas czytelne.

Nasze menu jest już w sumie gotowe ale… Jeszcze dwie rzeczy. Po pierwsze gdy ktoś już przejdzie na naszą podstronę chciałby zapewne też wrócić z powrotem na stronę główną. Zmuszanie kogoś do korzystania z przycisku wstecz na przeglądarce nie jest dobrym pomysłem tym bardziej, że to nie zawsze zadziała. Nasze menu powinno być tak stworzone aby pozwalało na łatwą nawigację w dowolne miejsce naszej witryny. Stwórzmy więc jeszcze na początku menu odnośnik do strony głównej. Zmieniamy nasz blok MENU tak:

Jak widać dodaliśmy tylko jedną linijkę. Odnośnik wygląda tak samo. Różni się tylko wskazywanym plikiem. To nie szkodzi że wskazujemy z pliku index.html na stronę główną index.html. Odnośnik zadziała. Efektem tego będzie po prostu przeładowanie naszej strony głównej. Należy pamiętać aby zawsze dawać komplet odnośników do każdego miejsca w serwisie i to na każdej podstronie.

I właśnie to jest druga rzecz którą musimy jeszcze zrobić. Kopiujemy nasz blok MENU i przechodzimy do pliku omnie.html . Na miejsce starego bloku MENU wklejamy ten nowy. W ten sposób mamy pełne powiązanie pomiędzy plikiem index i omnie.html. Zapiszmy oba pliki i zobaczmy efekt naszej pracy w przeglądarce.

Jak widać efekt jest zadowalający. Możemy klikać na oba łącza a zmieniać się będzie tylko treść i tytuł stronki. Grafika, menu i struktura się nie zmienia. I o to chodzi.

Rozwiązanie to ma jednak pewne minusy. Za każdym razem gdy zmienimy menu dodając nowy odnośnik itp., musimy te zmiany wprowadzić we wszystkich plikach naszego serwisu. Przy naszej witrynie, gdzie będziemy mieć tylko kilka podstron, nie będzie to póki co zbyt uciążliwe. Przy większych serwisach jest to jednak nie do pomyślenia i wtedy stosuje się tu PHP. W przyszłości nauczymy się i tego.

Póki co na tym zakończę ten odcinek kursu. W następnym zagłębimy się bardziej w tajniki hiperłączy i nauczymy się wstawiać obrazki w dowolnym miejscu strony. Zajmiemy się też bardziej zaawansowanym formatowaniem tekstu i dostosowywaniem serwisu do naszych potrzeb.

Na początku będziemy pracować tylko na własnym komputerze. Jednak jak już strona nabierze kształtu nauczymy się jak przesłać, a wcześniej założyć konto na serwerze i opublikować własną witrynę.
A więc otwieramy notatnik (na pierwszą lekcję wystarczy) i zaczynamy. Na początek musimy wstawić deklarację zgodności. Chodzi o to aby przeglądarki wiedziały w jakim tak naprawdę języku piszemy i w zgodzie z jakimi regułami. Ponieważ powstało kilka kolejnych wersji html i nowsze xhtml, trzeba jasno zadeklarować czym my będziemy się posługiwać A więc wstawiamy w pierwszej linijce poniższą linijkę (wystarczy skopiować):

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

To po prostu odnośnik do odpowiedniej strony, skąd przeglądarka pobiera deklarację. Dodajemy to na początku każdego pliku html. Trzeba o tym  pamiętać, bo bez tego przeglądarka może trochę się gubić na naszej stronie.

Mamy deklarację to czas na dokument właściwy. Rozpoczynamy od znacznika <html> który mówi przeglądarce że strona jest właśnie dokumentem html. Cała zawartość strony musi być pomiędzy znacznikiem <html> , a zamykającym </html>. Przy okazji warto wspomnieć, że jeśli chcemy pisać zgodnie ze standardami i mieć dobry kod , musimy pamiętać o zamykaniu każdego otwartego znacznika. Wprawdzie dzisiejsze przeglądarki umieją same domykać niedomknięte znaczniki ale warto robić to samemu, gdyż czasem to może spowodować poważne błędy w wyświetlaniu strony. Najlepiej wyrobić sobie nawyk wpisywania od razu obu znaczników (otwierającego i zamykającego) i potem pisać między nimi.

Znaczniki działają jak swego rodzaju pudełka. Zamykają w sobie tekst lub inne znaczniki i tylko na, rzeczach zamkniętych w pudełku (czyli miedzy znacznikami) wykonują jakieś działania. W tym wypadku w takim pudełku zamykamy całą stronę. Pudełko się zwie html więc tworzymy coś takiego :

Po znaczniku zamykającym </html> nie możemy już nic wpisywać bo przeglądarka nie potraktuje to jako części naszej strony. Po prostu znaczniki <html> definiują obszar całej strony.

No dobrze obszar mamy zdefiniowany czas na pewne podstawowe czesci witryny. Zdefiniujemy teraz obszar nagłówka. Nie będzie on właściwie widoczny na samej stronie, ale będzie stanowił ważną częśc naszej strony, przydatną nie tylko przeglądarce ale i wyszukiwarkom. Tak więc wpisujemy między znaczniki <html> kolejny (w podglądzie kodu będę pogrubiał kod który został dodany jako nowy, tak aby było widać czym się różni od poprzedniego):

<html>
<head>

</head>
</html>

Znacznik <head> mówi, że tu właśnie będzie nagłówek. Póki co nic konkretnego przeglądarce ani użytkownikowi nie przekazaliśmy. Tak więc czas to zrobić. Między znacznikami <head> definiujemy kolejny – <title> czyli tytuł:

<html>
<head>
<title>Strona domowa</title>

</head>
</html>

Tekst między znacznikiem <title> definiuje po prostu tytuł strony. To ważna cześć każdej strony bo to właśnie ten tekst widzimy w przeglądarce na pasku tytułu. W przypadku mojego bloga jest to np. The Sunrise. W naszym przypadku przeglądarka wyświetli Strona domowa. Oczywiście ten tekst może być dowolny. Całość między <title> a </title> będzie potraktowane jako tytuł. Nie warto jednak przesadzać z długością po za długie tytuły przeglądarka zwyczajnie przycina.

Tytuł jest też ważne dla wyszukiwarek takich jak choćby Google czy Onet. W wynikach wyszukiwania wyświetlany jest właśnie nasz tytuł

Teraz należałoby zadeklarować jakiego właściwie języka używamy na stronie:
 

<html>
<head>
<title>Strona domowa</title>
<meta http-equiv="Content-Language" content="pl" />
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />

</head>
</html>

Znowu trochę zagmatwany kod ale też znów można go spokojnie przekopiować, bo na każdej stronie będziemy używać takiego właśnie kodu. Pierwsza dodana linijka mówi przeglądarce że piszemy w języku polskim a druga deklaruje kodowanie znaków jakie używamy. Ta druga jest szczególnie ważna bo bez niej nie mielibyśmy polskich znaków na stronie. UWAGA znaczniki te nie wymagają znacznika zamykającego. To są jakby dwa w jednym. Jak można zauważyć na końcu mamy />  co mówi przeglądarce ze to koniec znacznika. Jest jeszcze kilka znaczników które nie wymagają zamknięcia.

W nagłówku powinny być jeszcze inne znaczniki ale w tej chwili nie będą nam potrzebne. Potem do nich wrócimy. Czas zamknąć nagłówek (jeśli jeszcze tego nie zrobiliście. W kodzie przeze mnie pokazanym jest już zamknięty.) i zdefiniować obszar właściwej strony:

<html>
<head>
<title>Strona domowa</title>
<meta http-equiv="Content-Language" content="pl" />
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
</head>
<body>

</body>
</html>

Tak więc zdefiniowaliśmy ciało dokumentu html – <body>. Między tymi znacznikami znajduje się właściwy tekst strony i wszystko między tymi znacznikami będzie już widoczne na naszej stronie. Spróbujmy (od tej pory nie będe wpisywał całego wcześniej już napisanego kodu aby zbytnio go nie wydłużać):

<body>
<h1>Witam na mojej stronie</h1>
<p>Witam na mojej stronie domowej. Mam nadzieję, że wam się spodoba</p>
</body>

I znów mamy dwa nowe znaczniki. Pierwszy z nich <h1> , definiuje nagłówek w tekście. Domyślnie jest on pogrubiony i znacznie wyróżniony, jednak potem można to zmienić. Używamy go do tytułowania stron. Pamiętać trzeba że na jednej podstronie powinniśmy używać tego znacznika co najwyżej jeden raz (dlaczego dowiemy się trochę później). Jeśli chcemy wyróżnić np. podtytuły używamy znacznika <h2></h2> lub <h3></3>. Są one coraz to mniejszej wielkości, aż do najmniejszego określonego jako <h6></h6>.
Kolejnym użytym przez nas znacznikiem jest <p></p>. Definiuje on akapit. Tekst między tym znacznikiem będzie odsunięty od góry i od dołu od innych elementów. No dobrze ale warto by zobaczyć jak wygląda już nasza strona. Klikamy zatek w notatniku na Plik ->zapisz jako i wpisujemy index.html. To ważne aby nasz plik miał takie właśnie rozszerzenie – html. Bez tego przeglądarka nie rozpozna tego jako strony www. Aby obejrzeć utworzony plik otwieramy go po prostu w przeglądarce. Powinniśmy uzyskać efekt podobny do tego:

Zgadzam się efekt imponujący nie jest ale wszystko w swoim czasie. W następnej części kursu pokażę jak definiować odnośniki do innych stron, obrazki no i zaczniemy zabawę stylami css aby trochę pokolorować i sformatować naszą stronę.

A wiec co tak naprawdę będzie w tym kursie? Nie będę tu opisywał po kolei składni języków itp. bo tego typu informacje są dostępne w wielu książkach czy też internecie (o html, php itp można znaleźć mnóstwo kursów i poradników). Tym bardziej że taka wiedza nikomu na nic się nie przydaje. Prawdziwym problemem jest potem stworzenie stronki. Na swojej drodze napotykamy mnóstwo problemów, które nie zawsze można rozwiązać za pomocą posiadanej wiedzy. Dlatego w kolejnych częściach kursu stworzymy od podstaw stronę przy okazji omawiając potrzebne części języka. Zaczniemy od strony statycznej w html i css, wspomnę co nieco o pozycjonowaniu i optymalizacji witryny, aby potem przejść do bardziej zaawansowanych spraw jak php i bazy danych. Jako że ostatnimi czasy strasznie popularne stały się blogi i strony prywatne, spróbujemy stworzyć taką właśnie stronę (ale dzięki zdobytej tu wiedzy każdy będzie mógł stworzyć także inne strony). Mam nadzieję ze kurs ten stanie się przydatny dla wszystkich a przede wszystkim tych którzy nie wiedzą nic o pisaniu stron.