Na początku...
Początki nauki programowania w języku HTML są stosunkowo proste, ponieważ składa się on głównie z prostych znaczników. Można się go łatwo nauczyć samodzielnie z pomocą dostępnych w internecie samouczków i przykładów. Po opanowaniu podstaw HTML można stopniowo rozszerzać swoje umiejętności i nauczyć się innych języków, takich jak CSS i JavaScript, które pozwalają na tworzenie bardziej zaawansowanych stron internetowych. Nauka programowania w języku HTML to świetny sposób na rozpoczęcie przygody z kodowaniem i poznanie podstaw, które przydadzą się w dalszej nauce innych języków. Jeśli chcesz dowiedzieć się więcej o programowaniu i zacząć tworzyć swoje własne strony internetowe, to zachęcamy do śledzenia naszego bloga. Aby w ogóle rozpocząć przygodę z programowaniem musimy zapoznać się z podstawowymi zagadnieniami oraz składnią języka, którego mamy zamiar się uczyć. Wobec tego od początku...
Nie będę rozpisywał tutaj szczegółów jak działa komunikacja z komputerem, warto wiedzieć jednak że komputery potrafią odczytać jedynie informacje zapisane za pomocą cyfr 0 oraz 1. To co właściwie zapiszesz korzystając z języka programowania, koniec końców i tak będzie przetworzone w ciąg zer oraz jedynek, bo tylko taka forma jest zrozumiała przez procesor. Języki programowania pozwalają nam w przystępny sposób porozumiewać się z komputerem i wydawać polecenia jakie nasz program ma wykonać.
Język HTML o którym dziś będzie mowa nie jest językiem programowania, natomiast używamy go do budowania struktury naszej strony internetowej, takiego szkieletu, który składa się na poszczególne sekcje i jak z klocków układamy naszą stronę. Sam skrót HTML oznacza Hyper Text Markup Language czyli hipertekstowy język znaczników i to właśnie ów znaczniki tzw. tagi służą nam jako wspomniane klocki.
Ten artykuł jest skierowany do osób, które absolutnie nie miały dotąd styczności z językiem HTML i szukają podstawowych informacji na ten temat. Został przygotowany tak, aby zapoznać czytelników z podstawami składni HTML oraz pokazać im, jak działają poszczególne elementy tego języka. W kolejnym artykule zostaną przedstawione różne tagi oraz ich przeznaczenie i miejsca użycia w kodzie.
Co to są tagi w języku HTML?
Sam znacznik to nic innego jak element składający się z pary nawiasów ostrych, a pomiędzy nimi umieszczona jest nazwa tego znacznika. Oprócz standardowych znaczników HTML, istnieje możliwość tworzenia własnych, niestandardowych znaczników. Może to być przydatne w przypadku, gdy chcemy zdefiniować nowy element, który nie jest objęty standardowymi znacznikami. Należy jednak pamiętać, że takie znaczniki mogą być obsługiwane tylko przez niektóre przeglądarki internetowe lub wymagać dodatkowych skryptów, aby poprawnie działać.
Zauważ co dzieje się w przykładzie powyżej. Zaczynamy od <p> co oznacza iż otwieramy tag o nazwie p (od paragraf) potem umieściłem tekst wewnątrz oraz zamykam znacznikiem troszkę różniącym się od otwierającego, mianowicie przed jego nazwą umieszczamy znak /.
Właściwie tyle wystarczyło, aby wyświetlić w przeglądarce:
Efekt użycia znacznika <p> w przeglądarce.
To był przykład chyba najprostszego znacznika, który należy otworzyć i zamknąć. Istnieją jednak znaczniki, które nie wymagają przekazywania żadnej treści, co za tym idzie nie ma potrzeby umieszczania nic pomiędzy jego tagami. Zanim przedstawię taki przykład, dodam, że znaczniki mogą również przyjmować argumenty. To są pewnego rodzaju dodatkowe funkcjonalności. Takim prostym przykładem atrybutu jaki może przyjąć nasz poprzedni przykład będzie atrybut title. Atrybut podajemy po nazwie naszego tagu:
Analizując kod powyżej i co nam to daje. Nasz paragraf otrzymał atrybut title, któremu przypisujemy poprzez znak = informację zamieszczoną w cudzysłowach, która będzie miała wyświetlić przeglądarka jeśli użytkownik najedzie kursorem myszy na nasz paragraf.
Znacznik samozamykający
Teraz jak już wiemy jak wyglądają i do czego mogą służyć atrybuty, pokażę przykład znacznika samozamykającego. Jest on bardzo podobny do swojego poprzednika, lecz nie umieszczamy nic pomiędzy jego znacznikiem otwierającym, a zamykającym gdyż posiada nieco inną strukturę.
Zapewne już zauważyłeś kilka nowości, mianowicie nazwa znacznika to img (skrót od image) - służy on do wstawiania obrazów na naszą stronę, jego atrybut ma nazwę src (skrót od source) - w nim umieszczamy ścieżkę do pliku który ma zostać dodany (plik znajdujący się w tym samym folderze, wymaga podania tylko nazwy pliku). Rezultat widać w przeglądarce:
Efekt użycia znacznika <img /> w przeglądarce. Wyświetlona została fotografia z dołączonego źródła.
Kolejną kwestią o której warto wspomnieć na początku poznawania HTML-a, że nic nie stoi na przeszkodzie abyśmy zagnieżdżali nasze tagi w innych tagach. Potraktuj to jakbyś wkładał coś do pudełka.
W powyższym przykładzie poznajemy znacznik <h1>, który służy do określania nagłówka (dostępny jest w 6 poziomach h1-h6 przy czym h1 jest tym najważniejszym, głównym). Taki znacznik to nic innego, jak wyświetlanie tekstu podobne do znacznika <p> natomiast w tym przypadku znacznik posiada inne style początkowe (rozmiar czcionki, marginesy itd.). Wewnątrz <h1> umieściłem tekst: "Zapraszamy na stronę naszego sklepu", lecz jedna z części tego zdania (...stronę...) została umieszczona pomiędzy tagami znacznika <a>, który jest hiperłączem. Efekt jaki otrzymamy to, że ta część zdania opleciona znacznikiem <a> będzie linkiem do adresu, który podamy w atrybucie href, czyli https://www.allegro.pl
Efekt użycia znacznika <a> zagnieżdżonego w znaczniku <h1>.
Podsumowanie
Jeśli chcesz rozpocząć swoją przygodę z tworzeniem stron internetowych, to HTML jest idealnym miejscem do startu. W kolejnych artykułach z tej serii poznasz coraz bardziej zaawansowane techniki, dzięki którym będziesz w stanie tworzyć w pełni profesjonalne strony. Nie zwlekaj, zacznij już dziś swoją przygodę z HTML!
