Chcę zostać kotem internetu – wstęp do programowania – HTML

devkot.pl 2 lat temu

HTML (HyperText Markup Language) oraz CSS (Cascading Styles Sheets) są podstawowymi językami służącymi do tworzenia warstwy wizualnej stron internetowych. Każdy kot internetu powinien je znać, ponieważ są one bardzo często wykorzystywane w pracy frontendowca jak i fullstacka. Dodatkowo znajomość HTML jak i CSS, jest wręcz konieczna do rozwijania się w dowolnej ścieżce związanej z programowaniem usług internetowych.

Przed Tobą znajduje się trzeci artykuł serii Chcę zostać kotem internetu. W poprzednich artykułach miałeś okazję zapoznać się z podstawami działania internetu oraz z protokołem HTTP. jeżeli nie miałeś okazji ich przeczytać to szczerze polecam, ponieważ wiedza w nich przedstawiona pozwoli Ci uniknąć przeszkód w dalszej nauce. Linki do artykułów znajdziesz w sekcji Przydatne materiały.

Czym jest HTML?

Jak powstał HTML?

HTML i HTML+

Początki HTML sięgają 1980 roku, kiedy to brytyjski fizyk Tim Barners-Lee, pracujący dla ośrodka badawczego CERN, opracował prototyp hipertesktowego systemu informacyjnego o nazwie ENQUIRE. System ten był wykorzystywany do organizowania oraz udostępniania dokumentów powstałych w wyniku badań przeprowadzanych w obiekcie. Rewolucyjność ENQUIRE polegała na wprowadzeniu odnośników, dzięki których użytkownik mógł z jednego miejsca przeglądać dokumenty fizyczne znajdujące się w innych miejscach na świecie.
Pierwsza publicznie dostępna specyfikacja (o nazwie HTML Tags) języka HTML została opublikowana w 1991 roku przez Barnersa-Lee. Składała się z 22 znaczników, które składały się na prosty szkielet strony internetowej. HTML został napisany w oparciu o SGML (Standard Generalized Markup Langauge). Innymi słowy HTML wywodzi się z rodziny języków znacznikowych. Rok 1993 również był przełomowy dla tego języka, ponieważ to właśnie wtedy organizacja IETF opublikowała pierwszą propozycję specyfikacji języka HTML, która zawierała opis gramatyki opierający się na języku SGML. Inni programiści zaczęli eksperymentować z atrybutami znaczników, dodawaniem nowych itp. W efekcie tych działań Dave Raggett opracował projekt o nazwie HTML+, który sugerował standaryzację znaczników.

HTML 2.0

Organizacja IETF do prac nad HTMLem dedykowała osobny zespół o nazwie HTML Working Group. W 1996 roku zespół ten wydał pierwszą oficjalną specyfikację języka HTML, która do dzisiaj stanowi jego podstawę. Zawierała ona elementy ze szkicu HTMLa oraz HTML+. Przypisali jej nazwę HTML 2.0 aby wyraźnie odróżnić nową specyfikację od poprzednich szkiców. Co interesujące HTML 1.0 tak naprawdę nigdy nie istniał.

HTML5

Obecnie do tworzenia stron internetowych wykorzystuje się HTML5, który został opublikowany w 2014. Standard HTML5 poza dodaniem nowych elementów do składni języka, doprecyzowuje również wiele niejasności poprzednich wersji. Rozwiązuje problemy dotyczące między innymi sposobu obsługi błędów w kodzie HTML przez przeglądarki. Dzięki tej wersji obsługa tych błędów powinna być taka samo we wszystkich przeglądarkach.

Podstawowy HTMLa

Znaczniki HTML

Jak wspomniałem wcześniej HTML to język znaczników. Pewnie zastanawiasz się czym jest ten cały znacznik? Znaczniki HTML (inaczej tagi) są podstawowymi elementami konstrukcyjnymi kodu HTML. Składają się ze specjalnego tekstu umieszczonego między z nawiasami ostrymi < i >. Można wyróżnić znaczniki pojedyncze i podwójne czyli takie, które składają się zarówno ze znacznika otwierającego jak i zamykającego, mogę one zawierać również atrybuty, które służą do dostarczania dodatkowych informacji na temat tego jak powinien zostać on wyświetlony przez przeglądarkę.
Znacznik pojedynczy:

Znacznik podwójny:

<h1>Devkot.pl</h1>

Jak widać na powyższym przykładzie różnią się one tym, iż wariant pojedynczy pojawia się tylko raz oraz znak zamknięcia znacznika (/) znajduje się zaraz przez znakiem większości. W tym przypadku za zamknięcie tego tagi odpowiada ciąg znaków />. Informuje on przeglądarkę, iż w tym miejscu należy wykonać jakąś akcję, np. wyświetlić obrazek. Ogólny schemat takiego znacznika to: <znacznik atrybut=wartoscAtrybutu />

W przypadku znaczników podwójnych składają się one z dwóch elementów, które oddzielone są treścią. W tym przypadku informują one przeglądarkę o tym, iż należy wyświetlić ich treść w specjalny sposób. Dla przykładu jednym z takich tagów w HTML jest <strong>Treść</strong> , który informuje przeglądarkę, iż treść między znacznikiem otwierającym a zamykającym powinna być wyświetlona z wykorzystaniem pogrubionej czcionki (tzw. boldem).

Atrybuty HTML

Skoro już wiesz jak otwierać i zamykać znaczniki to teraz warto poświęcić chwilę na omówienie atrybutów. Są to dodatkowe informacje przekazywane do znaczników. Wróćmy na chwilę do przykładów powyżej, przedstawiłem tam znacznik img, który informuje przeglądarkę, iż w powinna wyświetlić obrazek. Znacznik ten poprzez atrybut src informuje przeglądarkę o tym, jaką grafikę powinna wyświetlić, poprzez podanie dokładnego adresu URL. Atrybuty można dodawać zarówno do znaczników pojedynczych i podwójnych. Jednymi z najczęściej występujących znaczników są:

class – definiuje klasę CSS, która pozwala zmodyfikować to w jaki sposób wyświetlany jest element
style – definiuje własne style CSS, służące do wyświetlenie elementu
id – ustawia identyfikator elementu (powinien być unikalny w skali całego dokumentu)

Przykładowy dokument HTML

<!DOCTYPE html> <html> <body> <img src="https://www.devkot.pl/wp-content/uploads/2022/07/Devkot_svg_1.svg" /> <h1>Devkot</h1><p>Nagłówek</p> </body> </html>

Powyższy kod HTML wyświetli następującą stronę HTML:

Omówienie przykładu

Zanim przejdziesz dalej warto na chwilę się tutaj zatrzymać i spróbować zrozumieć krok po kroku co tutaj się dzieje. Mianowicie na samym początku należy poinformować przeglądarkę, iż ma odczynienia z plikiem HTML. Służy do tego linka <!DOCTYPE html>. Każdy dokument HTML powinien zaczynać się od tej linijki.

Następnie znajduje się znacznik otwarcia dokumentu <html></html>. Cały HTML powinien znajdować się wewnątrz tego znacznika. Poniżej znajduje się tag <body>, który zawiera elementy, które chcemy wyświetlić na stronie internetowej, tzw. ciało strony internetowej. Prawidłowy dokument HTML powinien zawierać tylko po jednym wystąpieniu tagów <html>…</html> oraz <body>…</body>.

Czym jest <body>?

Wewnątrz znacznika <body> definiuje się wszystko co powinno zostać wyświetlone na stronie internetowej. W powyższym przykładzie pierwszym elementem jest znacznik <img>, który odpowiada za wyświetlenie obrazka. Jego atrybut src dostarcza URL prowadzącego do grafiki z logiem Devkot.

Kolejnymi elementemi, które zostaną wyświetlone na ekranie są <h1></h1> oraz <p></p>. Informują one przeglądarkę o tym, iż treść między nimi należy wyświetlić kolejno jako nagłówek, a następnie paragraf. Czyli zwykle wykorzystując pogrubioną czcionkę oraz w nowej linii. Ustawienia te można nadpisać wykorzystując style CSS.

Jeśli interesuje Ciebie temat HTMLa polecam zapoznać się z materiałami dostępnymi na stronie W3Schools, ponieważ znajdują się tam opisy podstawowych elementów składowych HTML wraz z przykładami.

Czym jest CSS?

CSS (Cascading Style Sheets) jest językiem służącym do opisu formy prezentacji stron WWW. Został stworzony przez organizację W3C w 1996 roku. Pozwala on na definiowania tego w jaki sposób dany element ma zostać wyświetlony przez przeglądarkę internetową. Wykorzystywane są do tego dyrektywy, dzięki których można opisać wszystkie pojęcia związane z prezentacją elementów na stronach internetowych. Zaczynając od opisania czcionek jakie mają zostać użyte do wyświetlenia tekstu, kończąc na opisie animacji jakie przeglądarka ma wykonać z danym elementem.

HTML + CSS = strona doskonała

W świecie dzisiejszego internetu nie wyobrażam sobie pracy z HTMLem bez znajomości CSSa. Te dwie rzeczy idą w parze, nie da się tworzyć nowoczesnych stron internetowych nie korzystająć z HTMLa oraz CSSa. HTML jest używany do opisania struktury strony internetowej, czyli elementów, które są wyświetlane przez przeglądarkę. w uproszczeniu HTML definiuje elementy, które powinny być widoczne na ekranie. Natomiast CSS opisuje to w jaki sposób powinny być wyświetlone. Innymi słowy dzięki CSSa możemy zdefiniować rozmiar i krój czcionki, wielkość danego elementu, odstępy między elementami itp.

Kaskadowy arkusz styli, czyli plik .css składa się z reguł, które opisują konkretne elementy. Do przypisania konkretnych styli do elementów wyświetlonych na stronie wykorzystywany są selektory. W CSS wyróżniamy 3 standardowe typy selektorów:

Klasa CSS – definicja selektora zaczyna się od znaku . np .klasa. Style opisane w danej klasie CSS zostaną zaaplikowane do wszystkich elementów, które posiadają atrybut <znacznik class=”klasa”></ znacznik>.
Element HTML – jako selektor wystarczy podać nazwę elementu HTML np. p. Style zostaną zaaplikowane do wszystkich elementów <p></p> wyświetlonych na stronie
Identyfikator – definicja selektora zaczyna się od # np #identyfikator. Style zostaną zaaplikowane do elementu z identyfikatorem <znacznik id=”identyfikator”></ znacznik>

Przykładowy arkusz styli CSS <!DOCTYPE html> <html> <head> <style> #logo { width: 100px; height: 100px; } h1 { font-size: 40px; color: red; } .subheader { font-size: 26px; color: blue; } </style> </head> <body> <img id="logo" src="https://www.devkot.pl/wp-content/uploads/2022/07/Devkot_svg_1.svg" /> <h1>Devkot</h1> <p>Nagłówek</p> </body> </html>

Co się dzieje po stronie przeglądarki?

Powyższy przykład przedstawia kod HTML zawierający kaskadowe arkusze styli wewnątrz znacznika <style></style>. Jest to jedna z metod dołączania arkuszy styli do dokumentu HTML, tzw. inline css. Najbardziej podstawową metodą dołączania styli do dokumentu HTML jest jednak użycie znacznika link, np.:

Znacznik <link> pozwala na załadowanie arkuszy styli z innej lokalizacji. Wystarczy podać tylko adres URL do pliku .css a przeglądarka automatycznie go pobierze i zaaplikuje style do elementów, które zostały wyświetlone na stronie.

Powyższy kod spowoduje wyświetlenie strony:

Rezultatem przetworzenia przez przeglądarkę internetową reguł CSS przedstawionych powyżej jest to, iż element z przypisanym identyfikatorem logo, czyli tak naprawdę element <img> zostanie wyświetlony jako grafika o rozmiarze 100x100px. Wszystkie nagłówki <h1> będą wyświetlone czerwoną czcionką o rozmiarze 40px. Natomiast elementy zawierają atrybut class=”subheader” będą wyświetlały tekst koloru niebieskiego czcionką o rozmiarze 26px.

Jak uczyć się HTMLa i CSSa?

Dowiedziałeś już się czym jest HTML oraz CSS, więc jeżeli dalej planujesz zostać kotem internetu warto poświęcić trochę czasu i spróbować się ich nauczyć. Znajomość tych dwóch języków jest wręcz nie oceniona, ponieważ są one wręcz niezbędne do pracy programisty. W dobie dzisiejszej technologii ich użycie nie ogranicza się tylko do stron internetowych. HTML i CSS bardzo często są również wykorzystywane do budowania warstwy wizualnej aplikacji mobilnych. Ze względu na mnogość zastosowań tych 2 języków ich znajomość w podstawowym stopniu to prawdziwy must-have dla programistów.

Najpierw skup się na HTML

Pewnie zastanawiasz się teraz skoro są one tak ważnymi składowymi warsztatu programisty to jak mam się ich uczyć? Najlepiej na początku spróbować poznać teorię, czyli to z jakich elementów składa się HTML, co one oznaczają i do czego są wykorzystywane. Spróbuj zrozumieć strukturę dokumentu HTML i to jak dane elementy się ze sobą łączą w całość. Następnie warto skupić się na CSS i poznać to jak można go wykorzystać do ulepszania warstwy wizualnej. jeżeli lubisz uczyć się tego typu rzeczy na kursach to polecam sprawdzone kursy na Udemy lub książki o tematyce HTML.

Polecana ścieżka nauki

Niezależnie od tego, którą ścieżkę nauki wybierzesz poniżej załączam elementy, na których warto się skupić, ponieważ w mojej opinii są jednymi z najważniejszych elementów:

Zrozumienie struktury dokumentu HTML – to z czego się składa i jako bazowe elementy powinien posiadać (warto również poczytać o tym czym jest Dokument Object Model tzw. DOM)
Znaczniki HTML – za co odpowiadają oraz jakie możliwości dostarczają
CSS – co i jak możemy stylować (marginesy, paddingi, czcionki, podstawowe stołowanie komponentów)
Zaawansowany CSS – tutaj warto zapoznać się z tym czym jest box-model oraz flexgrid, box-shadow. Dodatkowo można poświęcić trochę czasu w poznanie możliwości animacji
Responsive Web Design – jest bardzo ważna technika tworzenia stron internetowych, która pozwala stronie skalować się do wielkości ekranu. Dzięki temu strona, którą stworzysz będzie wyświetlana poprawnie zarówno na komputerach PC jak i na urządzeniach mobilnych
Biblioteki CSS – często nie ma sensu wymyślać koła no nowo, dlatego jak już poznałeś podstawy HTML oraz CSS warto poświęcić chwilę na zapoznanie się z bibliotekami CSS takimi jak np. boostrap. Dostarczają one podstawowe klasy CSS pozwalające na szybkie tworzenie szablonów stron internetowych.

Ucz się na własnych błędach

Niech Twoja przygoda nie zakończy się na samej teorii. Oprócz poznania i zrozumienia HTML oraz CSS bardzo ważne jest to, abyś przećwiczył nowo zdobytą wiedzę na własnych małych, bądź większych projektach. Wykorzystanie zdobytej wiedzy w praktyce pozwoli Ci lepiej zrozumieć te 2 języki oraz powiązania między nimi. Dodatkowo zdobędziesz trochę wprawy w tworzeniu warstwy wizualnej dla stron internetowych.

Jeśli nie masz pomysłu na projekt to zawsze możesz spróbować stworzyć kopię jakiegoś portalu, z którego korzystasz. To również będzie świetna opcja, aby potrenować i sprawdzić swoje umiejętności. Na pewno napotkasz trudności podczas rozwijania projektu, ale nie poddawaj się! Satysfakcja wynikająca z pomyślnego rozwiązania problemu oraz działająca własna strona internetowa będzie najlepszą rekompensatą za te trudne chwile. jeżeli nie będziesz pamiętał lub wiedział jak coś zrobić nie bój się sprawdzić tego w internecie. Ktoś prawdopodobnie przed Tobą miał już taki sam lub podobny problem i znalazł rozwiązanie. Ba, prawdopobnie choćby się nim podzielił! Dlatego zanim się poddasz warto poszukać odpowiedzi w internecie np. na portalu typu StackOverflow.

Czas zabrać się za naukę!

Wierzę, iż jesteś zmotywowany oraz gotowy do nauki i rozpoczęcia swojej przygody z kodowaniem. Mam nadzieję iż porady przedstawione w tym artykule będą dla Ciebie pomocne, a przedstawiona ścieżka nauki przydatna.

Życzę Ci miłej nauki HTMLa i CSS i mam nadzieję, iż do zobaczenia w kolejnych artykułach!

Stay tuned!