Podstawy tworzenia strony, czyli HTML

6 Mar

Zgodnie z zapowiedziami zgłosiłam się do konkursu Daj Się Poznać 2017, zapraszam więc do śledzenia jak dojść “Od zera do własnego szablonu WordPress”, a dziś to, od czego każdy musi zacząć, czyli zaprzyjaźnienie się z HTML-em.

Czym jest HTML?

Bez wątpienia jest to podstawa podstaw. HTML to HyperText Markup Language, czyli hipertekstowy język znaczników. Mówiąc najprościej pozwala on na tworzenie:

  • hiperłączy,
  • akapitów,
  • nagłówków,
  • list,

oraz osadzanie plików (zdjęć, multimediów, baz danych, formularzy).

HTML pozwala nadać stronie strukturę, a elementom znaczenie.

Wszystko to można obejrzeć w przeglądarce internetowej, a żeby było ładniej, to można poszczególne elementy formatować (do formatowania używa się zwykle CSS, czyli kaskadowych arkuszy stylów – o tym w kolejnym wpisie).

CSS pozwala nadać stronie wygląd.

Prototyp HTML powstał w roku 1980 i od tego czasu stopniowo się rozwijał, a co za tym idzie, pojawiały się kolejne, doskonalsze (choć nie zawsze) wersje, zwane standardami (ich ustanawianiem zajmuje się World Wide Web Consortium, w skrócie W3C). Ten, który obecnie jest rekomendowany, to HTML 5.

Warto przy tej okazji wspomnieć, że równocześnie i równolegle rozwijały  się XHTML, XML i XLS. Różnice między nimi są różne i dość znaczące i dla początkujących trudne do ogarnięcia. Wystarczy wiedzieć, że HTML 5 jest rozwinięciem HTML 4 i XHTML 1, a zatem bez trudu czytać go będzie każda przeglądarka, trzeba go jednak zadeklarować w pierwszym znaczniku (służy do tego <!DOCTYPE html>)

Komponenty, atrybuty

HTML jest tekstem znaczników, więc najważniejszy komponent to znacznik (tag, markup). Prawie każdy tag siedzi w klatce, to znaczy musi mieć otwarcie <tag> i zamknięcie </tag>. Niektóre tagi można zagnieżdżać w innych i trzeba uważać, aby ich poziomy nie mieszały się ze sobą (to znaczy najpierw zamykamy bliższy znacznik, potem dalszy, trochę jak z nawiasami w matematyce). Znaczniki mogą mieć atrybuty (zapisywane w cudzysłowie), encje (kody jednoznacznie zapisujące znaki, np. typograficzne), itd.

HTML jest także hipertekstowy, co znaczy, że pozwala na przenoszenie się do własnych podstron lub stron zewnętrznych.

Jaki edytor HTML-a?

W zasadzie stronę można pisać przy użyciu notatnika czy najzwyklejszego edytora tekstu. Jeśli zrobimy to dobrze, to strona będzie działać. Jeśli popełnimy błąd, to… szukanie go zajmie mnóstwo czasu. Dlatego wymyślono specjalne edytory, które pomogą nam te błędy znaleźć, ale też przyspieszą pisanie, bo mają funkcję autouzupełniania, podświetlania poziomów, czy sygnalizowania niedomknięcia tagów. Oczywiście można zainstalować sobie edytor typu WYSIWYG, jak choćby FrontPage, ale nawet ja z mojego skromnego doświadczenia wiem, że to nie najlepszy pomysł. Przede wszystkim nie uczy programowania, a co gorsza, jest dość niechlujny. Jeśli potem chcecie coś w kodzie strony znaleźć – jest to trudne, bo jest tam mnóstwo znaków, które są zbędne i utrudniają zrozumienie co do czego. Kod powinien być elegancki, bez dziur, łat i plasterków. Dlatego potrzebujemy edytora pracującego w trybie tekstowym.
Zatem co? Fajny jest Pajączek – polski, znany, rozwijany od lat i… płatny. Na początek można wziąć wersję demo lub sięgnąć po coś darmowego. Przypuszczam, że trzeba popróbować kilku programów, żeby dobrać to, co akurat nam najlepiej leży.

Mnie spodobał się Brackets i Atom, ale okazało się, że pod Windowsem (a w tym systemie aktualnie pracuję, choć coraz częściej łapię się na tym, że nie wiem czemu i za jakie grzechy) działa też Bluefish i od niego postanowiłam zacząć.

Kursy HTML-a dla zielonych i nie tylko

Pierwszym wyszukiwanym kursem na jaki natrafiamy w google jest ten dla zielonych. Jest prosty, przejrzysty, łatwo wracać do poprzednich lekcji. Podobnie e-Zoner. Można też sięgnąć po darmowy kurs dostępny w Kodilla, fajny ze względu na proponowane i automatycznie sprawdzane ćwiczenia. Jednak tu konieczne jest zarejestrowanie się, co oznacza zgodę na otrzymywanie ofert. Z pewnością kursów jest więcej, podobno bardzo dobre, ale anglojęzyczne są Udacity, Codecademy czy w3schools. Ten ostatni przydaje się do sprawdzania znaczenia poszczególnych tagów, bo jest wyjątkowo klarowny i można mieć pewność, że dany tag jest obsługiwany przez HTML5.

Jeśli chcemy powtórzyć i utrwalić wiedzę w dość przyjazny sposób, przyda się kurs na Memrise. Mamrise działa na komputerze, ale ma też apkę na telefon, więc można powtarzać w chwilach, gdy nie mamy dostępu do komputera, czy po prostu się nudzimy, a telefon jest pod ręką.

Pierwsze kody za płoty!

Pierwsze znaczniki, od których trzeba zacząć (edytor od razu je wpisuje sam), to <html> </html> czyli główne tagi całej strony. To one ograniczają caluteńki kod strony i wszystko (z wyjątkiem deklaracji, np. <!DOCTYPE html> musi mieścić się między nimi. Następnie umieszczamy dwa kolejne <head> </head> gdzie podajemy definicje wszystkich elementów, które są umieszczone na stronie, ale nie są widziane: skrypty, arkusze styli, tytuł, autora itd. Kolejne znaczniki to <body> </body> a między nimi to, co będzie wyświetlane, a wśród nich nowe tagi (<p> – tekst, <h1> nagłówek 1 poziomu, <ol> lista numerowana itd.).

Wykonując krok po kroku zadania z Kodilli (link podawałam wcześniej) zrobiłam stronkę najprostszą z możliwych, kod dostępny jest tutaj.

2 komentarzy w “Podstawy tworzenia strony, czyli HTML

  1. Bardzo ładnie! To w następnym kroku oddziel strukturę strony od jej wyglądu, to znaczy trzymaj style w osobnym pliku CSS. A w jeszcze następnym kroku, gdy zaczniesz do strony dodawać skrypty JavaScript, też trzymaj je w osobnym pliku JS.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *