Czym byłyby strony internetowe bez HTML? Ten kurs z pewnością przygotuję was do ich tworzenia. Każdy może szybko nauczyć się tego języka. Zaraz po tym, jak uważnie przeczytasz ten kurs HTML, będziesz w stanie zrobić swoją pierwszą stronę internetową. Zacznijmy jednak od początku.
Podstawy HTML
Język HTML (ang. Hypertext Markup Language – Hipertekstowy Język Oznaczania) jak jego rozwinięta nazwa wskazuje, nie jest językiem programowania, lecz opisowym. Oznacza się nim różne elementy na stronie. Wyróżniają się między innymi pojedyncze paragrafy, nagłówki oraz całe sekcje. Każdy ze znaczników HTML umieszcza się w nawiasach < ostrych >.
Sam kod możemy pisać nawet w Windowsowym notatniku ale nie polecam tego. Dużo lepiej jest pobrać jakiś darmowy program. Ja szczerze polecam Sublime Text, na przykład w wersji 3.
Większość tagów w języku HTML wymaga zamknięcia. Tag zamkniemy wpisując </[nazwa taga]> na końcu elementu. Przykładowo, bo najlepiej się uczyć na przykładach, aby utworzyć zwykły akapit tekstu, wpisujemy do kodu:
<p>Treść akapitu</p>
Możesz sprawdzić jak działa w praktyce każdy przykładowy kod używając przycisku z prawej strony 🙂
„P” jest skrótem od angielskiego słowa „paragraph” oznaczającego akapit. Znaczna część znaczników (tagów) w języku HTML pochodzi od angielskich słów. Pełną listę tagów języka znajdziemy na przykład tutaj.
Pierwsza strona w języku HTML
Zacznijmy od powiedzenia przeglądarce internetowej z jakim językiem ma do czynienia. Robi się to poprzez umieszczenie <!doctype HTML> na początku dokumentu. Teraz powinniśmy utworzyć tak zwane ramy dokumentu. Rama dokumentu składa się ze znaczników <head> oraz <body>. W tym pierwszym znajdować się będą informacje o naszej witrynie, natomiast w <body> treść strony.
Następnie otwórzmy znacznik nagłówka <h1>. Liczba w tym znaczniku określa stopień nagłówka. W sekcji <head> dodać możemy znacznik dodający <title> tytuł strony </title>, znajdujący się w między innymi w nazwie karty w przeglądarce.
Następnie dodajmy jakiś akapit tekstu żeby użytkownicy wiedzieli coś więcej na ten temat. Umieścimy go tym razem w znaczniku <p>.
<!doctype HTML> <head> <title>Przykładowy tytuł strony</title> </head> <body> <h1>Przykładowy NAGŁÓWEK strony</h1> <p>Przykładowy AKAPIT strony</p> </body>
Sam tekst zapewne zawiera dużo wartościowych i znaczących informacje, aczkolwiek dla czytelnika jest po prostu „klockiem” tekstu. Lepiej jest dodać jakąś grafikę czy obraz. Ważne jest, abyśmy mieli prawo do wykorzystania tego pliku lub żeby obowiązywaa na nim licencja Creative Commons (CC).
Gdy znajdziemy odpowiedni obraz, pobierzmy grafikę na nasz dysk a w kodzie dopiszmy:
<img src="przykladowa-sciezka-do-pliku/plik.png">
Gdy przeglądarka nie znajdzie w podanej lokalizacji zdjęcia o podanej nazwie wyświetli domyślny obrazek. Możesz go zobaczyć po kliknięciu przycisku „play” po prawej stronie okienka z powyższym kodem 😉
Atrybut „src” w tym tagu oznacza jego źródło i nie musi być ono lokalne, to znaczy że możemy tutaj wstawić link do obrazka na jakiejś stronie internetowej czy serwerze. Jest to jeden z tych znaczników HTML, których nie musimy zamykać.
Eksport pliku HTML
Niezależnie od tego w jakim programie pisaliśmy nasz kod procedura eksportu powinna przebiegać podobnie. Jeżeli robiliśmy to w Windowsowym Notatniku klikamy kolejno „Plik” > „Zapisz jako”. Następnie koniecznie w rozszerzeniu wybieramy plik *.html a nazwę wpisujemy według własnego uznania.
Jak plik zostanie zapisany w wygodnej dla nas lokalizacji, przykładowo na pulpicie, system powinien automatycznie wykryć i otworzyć go w domyślnej, zainstalowanej przeglądarce internetowej. Teraz możemy go dowolnie modyfikować i dodawać treść.
Kurs HTML cz. 1
To koniec pierwszej części kursu do języka HTML. W niedalekiej przyszłości ukażą się kolejne części tego cyklu, którego celem jest stworzenie samemu ładnej, estetycznej i wygodnej w obsłudze strony. Jej zawartość merytoryczna zależy tylko od was, autorów każdej strony jaką kiedykolwiek zrobicie. Gdy jednak czegoś nie zapamiętaliści zawsze możecie i powinniście otworzyć ten kurs HTML.
Thanks for your blog, nice to read. Do not stop.