Kurs HTML - kawę na ławę wykładam..
Napisane przez ULLISSES
Uwaga: Artykuł ten powstał kilka lat temu i obecnie strony pisze się trochę inaczej. Mimo wszystko jest nadal na stronie, gdyż jego ogólne przesłanki są nadal aktualne i mogą pomóc początkującym webmasterom.
Słowem wstępu
Jeśli myślicie, iż po przeczytaniu tego arta będziecie znać HTMLa, to sprowadzam Was na ziemie mówiąc: nie ma szans. W arcie na 9 KB zamieszczenie całego kursu HTML delikatnie mówiąc graniczy z cudem. Artykuł jedynie wyjaśnia ogólne zasady tego języka, które pozwolą szybciej zrozumieć, "o co w nim biega" i szybciej się go nauczyć. Treść tego arta ma Was jedynie przekonać, że HTML to kaszka z mleczkiem i każdy może się go nauczyć w miarę krótkim czasie.
Znajomość języka angielskiego znacznie ułatwi Wam naukę, ale i bez niego obiecuję, iż nie powinno być trudności. Większość z Was już pewnie próbowało się uczyć HTMLa, ale wyglądało to tak:
Przeglądając różne strony w Sieci czasami myślimy o tym, aby samemu stworzyć jakąś stronę. Ściągamy więc dowolny kurs HTMLa i po kilku minutach czytania czegoś, co przypomina mowę architekta z filmu Matrix, tracimy cierpliwość i na tym chwilowo kończy się przygoda z tym językiem.
Owszem, wcześniej czy później przebrniemy przez ten lub inny kurs i nauczymy się tworzyć coś z niczego. Wymaga to jednak dużo czasu i cierpliwości, której jak wiadomo nikt nie zjada kilogram dziennie przepijając sokiem. Jednym z powodów poddawania się jest to, iż większość kursów swoim stylem przypomina książki spotykane na studiach: dużo i o niczym. Do tego dochodzi także słownictwo powiedzmy średnio strawne dla normalnych ludzi. Dlatego też ja postanowiłem napisać ten krótki "kurs" - aby wywalić kawę na ławę..
Budowa strony WWW
Ogólnie rzecz biorąc na stronę składa się kilka plików:
- HTML - sama zawartość strony - zwykłe pliki tekstowe, w których zawarty jest tekst oraz opis wyglądu strony (podejrzyj sobie dowolny plik w Notatniku - nawet ten plik: kliknij 'Widok' a potem 'Źródło')
- CSS - plik styli, definiuje typy, kolory i rozmiary czcionek użyte na stronie; także zwykły plik tekstowy; wprawdzie nie jest konieczny, gdyż te same definicje styli można zamieścić bezpośrednio w pliku HTML, lecz jeśli chcemy, kilka stron wyglądało tak samo, to prościej napisać ten plik i zmusić do korzystania z niego nasze strony, niż w każdej od nowa definiować kolory itp.; zaoszczędzimy przy tym trochę KB, do dla modemowców nie jest bez znaczenia
- JS, VBS - zwykłe pliki tekstowe, zawierają skrypty (mini programiki), które odpowiadają np. za animowane menu, sterowanie przeglądarką itp.; także nie są konieczne, gdyż skrypty można umieścić w pliku HTML, ale jeśli.. (uwaga ta sama, co przy CSS.. :-) )
- GIF, JPG, PNG - pliki graficzne używane na stronie; nie można ich zamieścić w pliku HTML, muszą być oddzielnie, ale można użyć tego samego pliku na kilku podstronach
Sedno sprawy, czyli plik HTML
Otwierając dokumenty DOC w Wordzie widzimy, iż wszystko jest w nim tak, jak zapisaliśmy wcześniej - pogrubienie tekstu, pochylenie tekstu, wklejony obrazek czy tabelka leżą zawsze tam, gdzie ich zostawimy. Gdy jednak zechcemy podejrzeć ten plik np. w Notatniku, to zamiast naszego dokumentu zobaczymy jego kawałki poprzedzielane mniejszą lub większą ilością 'krzaczków" nieczytelnych dla zwykłego śmiertelnika.
W HTML też wszystko jest rozmieszczone tam, gdzie należy, gdy otworzymy plik w Wordzie lub przeglądarce. Gdy jednak zajrzymy do środka (przy pomocy Notatnika) zamiast nieczytelnych znaczków zobaczymy zawartość naszej strony poprzeplataną angielszczyzną umieszczoną w takich oto nawiasach: < >. To właśnie te kilkaset słów w nawiasach decyduje o wyglądzie naszej strony. Opisane jest tutaj rozmieszczenie każdego elementu, od dużej tabeli do najmniejszej nawet graficzki gdzieś na końcu strony.
Budowa typowego pliku HTML
Jest to po prostu plik tekstowy, który prócz naszego tekstu, zawiera tzw. TAGI, czyli polecenia odczytywane przez przeglądarkę. Niektóre z nich są obowiązkowe, inne zaś nie. Aby przeglądarka odróżniła je od zawartości strony, umieszczane są one w nawiasach: < >. Proste jak wieża w Pizzie - wystarczy odpowiednio przechylić głowę ;-).
A oto przykładowa strona:
<HTML>
<HEAD>
<TITLE>Moja pierwsza strona</TITLE>
</HEAD>
<BODY BACKGROUND=GRAY>
<DIV ALIGN=CENTER>Tutaj treść strony</DIV>
</BODY>
</HTML>
To, czy tagi pisane są DUŻYMI czy małymi literami, nie ma znaczenia. Niektórzy piszą je dużymi literami, aby wyróżniały się od zawartości strony. W bardziej zaawansowanych edytorach, które rozpoznają składnię nie ma potrzeby pisania dużymi literami, gdyż tagi są automatycznie kolorowane na inny kolor niż reszta tekstu. (Specyfikacja XHTML zaleca pisanie literami małymi.)
Przeglądarka i jej zadania
Przeglądarka internetowa to nic innego jak taki "zmieniony Word". Jej zadaniem jest tworzenie strony w taki sposób, w jaki każe jej plik HTML. Powyższa strona w rozumieniu przeglądarki wygląda tak:
<tu zaczyna się plik html>
<tu zaczyna się nagłówek tego pliku, gdzie opisywane są jego właściwości takie jak: strona kodowa, tytuł, użyte style itp. (ang. head = głowa)>
<tutaj zaczyna się tytuł strony>Moja pierwsza strona</koniec tytułu>
</koniec nagłówka>
<tutaj zaczyna się część właściwa, czyli "ciało" dokumentu, (ang. body = ciało) kolor_tla=szary>
<ustawianie_stylu_zawartości wyrownanie=do_środka>Tutaj treść strony</koniec stylu>
</koniec części właściwej>
</koniec pliku html>
Jeśli dostalibyśmy taki opis, to nie mielibyśmy problemu ze zrobieniem takiej strony w programie Word, gdyż wyraźnie opisane są poszczególne czynności. W tym wypadku wystarczy we właściwościach dokumentu ustawić tytuł, zmienić tło na szare i na środku napisać zdanie "Tutaj treść strony". Przeglądarka zrobi to samo, tyle że "troszkę" szybciej niż my..
Składnia HTML
Skoro już wiemy, jak działa przeglądarka, to naszym zadaniem jest powiedzenie jej, jak ma wyglądać nasza strona. Składni języka HTML nie będę tutaj wypisywał, gdyż to jest w każdym kursie. Jak już powiedziałem, polecenia tego języka to nie zbiór kilkuset przypadkowych wyrazów, lecz logiczne słowa pochodzące z języka angielskiego. Dlatego też ci, którzy znają ten język mogą niemal od razu pisać w HTML...
Chcesz zmienić czcionkę, to zmieniasz:
<FONT SIZE=4>
Chcesz wstawić poziomą linię, to wstawiasz:
<HR>
- Opis:
- FONT = czcionka
- SIZE = rozmiar
- HR = Horizontal Rule = pozioma linia
Jedną z (na szczęście) niewielu sztuczek w HTML jest przechodzenie do nowej linii. Przeglądarka wyświetlając stronę ignoruje wszelkie przejścia zrobione przy użyciu ENTERa. Jedyny dopuszczalny znak nowej linii to:
<BR>
Z tego właśnie powodu, możemy cały kod HTML umieścić w jednej linii:
<html><head><title>tytul</title></head><body>jakaś treść<br>jakaś inna</body></html>
Przeglądarka odczyta go poprawnie. Korzyścią z tego zapisu jest zmniejszony rozmiar pliku. Niestety taki zapis podczas tworzenia strony jest nieczytelny i utrudnia wprowadzanie zmian. Dlatego też podczas edycji strony stosuje się zwykle dowolnie wybrany przez siebie sposób zapisu zwiększający czytelność kodu. Zapis w jednej linii stosowany jest tylko w przypadku, gdy strona już jest gotowa i ma iść na serwer. Wtedy specjalne programy do optymalizacji kodu mogą usunąć znaki nowej linii oraz tabulatory i niepotrzebne spacje, zmniejszając w ten sposób rozmiar pliku i jednocześnie utrudniając odczytanie tym, którzy zechcą "pożyczyć" od nas trochę kodu bez naszej zgody.
Od teorii do praktyki
Teraz, gdy wiemy, o co chodzi w tym dziwnym języku, możemy brać się do pracy. Piszemy stronę o podobnej zawartości, jak w punkcie 4 i patrzymy na nasze dzieło. Następnie dopisujemy do niej dalszą treść. Składnię można brać z głowy lub z kursu HTML, jeśli powoli brakuje nam intuicji. Osobiście polecam kurs Pawła Wimmera, gdyż kurs ten jest jednym z lepszych, jakie czytałem. Można by właściwie pominąć wstęp, ale przeczytanie go też nie zaszkodzi. Na pewno nie będzie problemów z jego zrozumieniem i jeśli nie braknie Wam zapału, to za tydzień będziecie mieli na dysku całkiem rozbudowaną witrynę.
I pamiętajcie: Programiści to czarodzieje...
kategoria: artykuł