Podstawy HTML’a
O HTML’u słyszeli zapewne wszyscy, nawet Ci, którzy na co dzień stronią od fachowych nazw z zakresu technologii informacyjnej a webmastering to dla nich dziwnie brzmiące hasło, będące co najwyżej, pseudonimem jakiegoś nieznanego hakera.
Czym zatem jest HTML? Otóż jest to hipertekstowy język oznaczania, służący do budowy stron internetowych. Swoją popularność zawdzięcza on stosunkowo łatwej i intuicyjnej obsłudze, jak również wysokiej funkcjonalności. A mówiąc inaczej, trudno wyobrazić sobie aby w najbliższym czasie, jakikolwiek system kodowania mógł zastąpić to klasyczne narzędzie, służące do kreacji i opisu struktury informacyjnej witryn internetowych.
Krótka historia HTML
Historia tego języka sięga lat 80 XX wieku, wówczas to powstał system, który bez wątpienia stanowi prototyp współczesnego HTML’a, hipertekstowy język informacji o nazwie ENQUIRE.
Dziś już trochę reliktowy i zapomniany, służył przede wszystkim celom organizacyjnym i sprawdzał się jako narzędzie porządkujące dokumenty badawcze. Główną funkcją ENQUIRE, było połączenie ze sobą wielu baz danych, dzięki którym użytkownik mógł bez problemu przeglądać dokumenty zlokalizowane w innym miejscu.
Pomysł jak na tamte czasy, okazał się rewolucyjny i to właśnie bezpośrednio z niego, wyewoluowała koncepcja znana dziś całemu światu pod nazwą WorldWideWeb. Chwile później „urodził” się pierwszy konspekt HTML, który składał się z dwudziestu dwóch znaczników. Część z nich należy do systemu do dziś.
Co to są znaczniki?
Znaczniki nazywane również tagami, to podstawowe elementy tworzące strukturę języka HTML. Dzielimy je na tagi otwierające i zamykające, które różnią się od tych pierwszych, obecnością tzw. slasha, czyli ukośnej kreski potwierdzającej zamknięcie pojedynczej struktury kodu. Wygląda to mniej więcej tak: <p>Prosta struktura HTML</p>.
Powyższy przykład stanowi wyodrębniony paragraf, zbudowany wokół pojedynczego, prostego zdani
Obok znaczników klasycznych, wymagających zamknięcia poprzez dodanie „slasha” w tagu zamykającym, w słowniku HTML, znajdują się również tzw.”self – closing tag”, czyli znaczniki niewymagające obecności „kreski zamykającej” na końcu.
Jednym z takich elementów jest np. tag „img src”, czyli znacznik, który pozwala na dodanie zdjęcia i umieszczenie pod nim, krótkiego opisu. Tego typu elementem jest również znak<br>, który przełamuje linię wiersza.
Struktura języka i podstawowe znaczniki
HTML nie jest skomplikowanym systemem programowania, tylko językiem kodowania i znaczników. Co też odzwierciedla, względnie prosta struktura dokumentu, która opiera się na kilku podstawowych tagach:
< !doctype html > – znacznik definiujący plik w formacie html.
< html >…< /html > – tworzy zręby całego kodu. Pomiędzy tymi znacznikami znajduje się cała, utworzona przez nas strona
< head >…< /head > – miejsce na zawarcie tytułu, stylu css i wszelkich innych cech definiujących charakter strony, takich jak np. interpretowane języki
< title>…< /title > – tytuł strony widoczny w panelu wyszukiwarki
< body>…< \body > – pomiędzy tymi tagami znajduje się wszystko to co będzie stanowiło treść strony. Tekst, zdjęcia oraz obrazki. Innymi słowy, cała zawartość witryny
< p>…< \p > – tag oznaczający pojedynczy paragraf
< div >…< /div > – oznacza wyodrębniony blok tekstu. Dzieli zawartość dokumentu Html
< b >…< /b > – znacznik służący do pogrubiania elementów tekstu
< u >…< /u > – podkreśla tekst
< i >… < /i > – tag służący do wprowadzeniu kursywy
Wyżej wymienione elementy to tylko podstawy kodu, które pozwolą na sporządzenie bardzo prostej strony opartej na języku HTML. Tworzenie złożonych i rozbudowanych serwisów, wymaga już zastosowania atrybutów oraz dodatkowych narzędzi takich jak system Css a nawet Javascript. Ten ostatni wzbogaca „nasze dzieło” o elementy interaktywne, multimedia oraz ruchome animacje.
Narzędzia do edycji i zapisu kodu
Skrypty HTML można zapisać bez problemu w starym, poczciwym notatniku. Trzeba tylko pamiętać aby przy zapisie dokumentu, wprowadzić w pliku rozszerzenie HTML. Tak aby przeglądarka internetowa zdołała poprawnie odczytać i wyświetlić sporządzony kod.
Wydaje się proste a wręcz banalne. To prawda, należy jednak pamiętać, że jest to optymalny sposób operowania tym językiem . Bardziej rozwinięte projekty, wymagają zastosowania specjalistycznych edytorów, które pozwalają na bieżąco śledzić nieścisłości i błędy w budowie struktur.
Edytorów do pisania stron w HTML, jest obecnie całe mnóstwo. Jednym z bardziej popularnych jest Sublime Text.
Program dostępny w wersji bezpłatnej jak i płatnej, który pozwala na podświetlanie poszczególnych partii kodu oraz wyświetlanie podpowiedzi dotyczących składni oraz – w przypadku języków programowania – zasobów bibliotek.
Kolejnym edytorem kodu źródłowego, wartym uwagi, jest Notepad++, który obsługuje ponad trzydzieści języków kodowania oraz programowania, w tym rzecz jasna Html. System jest w całości oparty na języku C++ i podobnie jak Sublime text, pozwala na podświetlanie składni i co więcej – autouzupełnienie kodu. Czyni to system doskonałym narzędziem, nawet dla koderów o niewielkim doświadczeniu.
Na koniec warto jeszcze wyróżnić Bluefish, charakteryzujący się dużą szybkością i wyposażony w funkcje tabel oraz ramek, znacznie ułatwiających tworzenie witryn. Na uwagę zasługuje to, że program jest w pełni darmowy.