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śli 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, za pomocą 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 ciekawe 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
Znacznik pojedynczy:
<img src="https://devkot.pl/logo" />
Znacznik podwójny:
<h1>Devkot.pl</h1>
Jak widać na powyższym przykładzie różnią się one tym, że 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ę, że 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, że 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ę, że 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ę, że 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ę, że 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, że treść między nimi należy wyświetlić kolejno jako nagłówek, a następnie paragraf. Czyli zazwyczaj 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?
HTML + CSS = strona doskonała
- 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 class="subheader">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.:
<link rel="stylesheet" href="styles.css">
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, że 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śli 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śli 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 na 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.
Jedna odpowiedź