menu

Krylan | Krzysztof Koperkiewicz

Blog

Ilustracja posta 36

Czym jest HTML?

2017-12-03 / Dla początkujących / Komentarze (0) / Wyświetleń: 177

Na początku swojej kariery w webdevie pojęciem, z którym musicie się zetknąć, jest HTML. Spokojnie, jego zrozumienie i nauczenie się będzie bardzo proste – nawet jeśli nigdy nie mieliście do czynienia z programowaniem, czy informatyką w ogóle. Zanim jednak zaczniemy coś pisać, wyjaśnię na prostym przykładzie, czym HTML jest oraz do czego służy.

Każdy z Was na pewno choć raz korzystał z zaawansowanego edytora tekstu, takiego jak Microsoft Word, LibreOffice Writer, czy Google Docs. Za pomocą tych programów możecie sformatować podaną treść, czyli zrobić nagłówki, pogrubić tekst, wstawić tablekę, czy obrazek. HTML służy właśnie do tego – do formatowania treści. Za pomocą kodu HTML możemy utworzyć elementy takie jak tabele, ramki, obrazki, kanwy i o wiele więcej.

Struktura kodu jest oparta o znaczniki (inaczej nazywane tagami oraz elementami). To one definiują, jaki element tworzymy, a przeglądarka internetowa go tak zinterpretuje i wyświetli użytkownikowi.

Poniżej pokażę kilka prostych przykładów znaczników:

Kod HTMLTo, co się wyświetla


<b>Pogrubiony</b> tekst


Pogrubiony tekst


<a href="http://krylan.ovh">Link</a>


Link


<img src="http://krylan.ovh/portfolio/img/avatar.png" />




Zwróćcie uwagę na to, że niektóre z nich występują pojedynczo, a niektóre posiadają drugi znacznik do pary. Znaczniki podwójne posiadają znacznik otwierający oraz znacznik zamykający – spowodowane jest to tym, że pomiędzy nimi może znajdować się jakaś treść. W przypadku znaczników pojedynczych, są one samozamykające się. Oznacza to tyle, że w środku takiego elementu nie może być niczego więcej.

Znaczniki definiujemy za pomocą znaków "<" oraz ">". Jeśli znacznik jest znacznikiem zamykającym, w środku powinien znaleźć się znak "/". W samym środku znacznika, pomiędzy < > znajdować się może sporo informacji o nim samym – niektóre z tych informacji są konieczne, inne opcjonalne. Pierwszym wyrazem w znaczniku jest jego typ. Dzięki temu będzie wiadomo, czym ten znacznik jest i jak powinno się go rozumieć. Następnie umieszczamy w nim atrybuty oraz jego wartości, wygląda to następująco: 


Poszczególne typy i atrybuty poznacie w kolejnych częściach poradnika. Teraz przejdźmy do tematu narzędzi, których możemy używać aby rozpocząć pisanie w HTML. Możecie używać... dosłownie każdego edytora tekstowego. Może być to nawet systemowy "Notatnik". Kiedy umieścimy jakieś znaczniki w naszym dokumencie, wystarczy zapisać plik z rozszerzeniem *.html (dokument hipertekstowy) zamiast *.txt (plik tekstowy). Plik z takim rozszerzeniem możemy otworzyć w naszej przeglądarce... i gotowe!

Ale wróćmy jeszcze na chwilę do innych narzędzi, o których wspomniałem na początku wpisu. Jeśli formatowanie w Wordzie możemy porównać do HTML-a, to do czego porównamy sam program, jakim jest Word? U nas takie programy nazywa się WYSIWYG (ang. What You See Is What You Get). W nich właśnie, możemy za pomocą kliknięcia na ikonę tabeli na pasku umieścić ją w dokumencie i ta od razu nam się wyświetla. Korzystanie z tej metody posiada jednak spore wady, ponieważ taki program samodzielnie pisze kod na podstawie tego, co się samemu ułożyło na ekranie. Budowanie stron internetowych jest jednak bardziej skomplikowane niż tworzenie dokumentów w Wordzie, dlatego taki kod po prostu może nie spełniać oczekiwań. Takie rozwiązania są wykorzystywane najczęściej w różnego rodzaju systemach zarządzania treścią (Wordpress, Joomla), ponieważ strony i blogi posiadają także osoby nie mające wiedzy o HTML-u i o tym, jak takie formatowanie przygotować pisemnie. W takim przypadku, gdy tylko formatujemy część strony i nie potrzebujemy zaawansowanych elementów, taki edytor może nam wystarczyć. Nadal jednak istnieją programy, które są skierowane do osób pragnących stworzyć stronę internetową bez wiedzy o jakimkolwiek programowaniu. Ja osobiście odradzam opierania się na takich rozwiązaniach, zwłaszcza jeśli chcecie tworzyć dobre strony.


Poprzedni post
Evoland 2 – Recenzja
Następny post
Screaming Frog SEO Spider – narzędzie do tworzenia map witryn

Komentarze

Wygląda na to, że nic tu nie ma :<

Dodaj komentarz