Pierwszy krok – zapoznanie z HTML | #1

Na początku był chaos… zapoznanie z HTML

Aby napisać swoją pierwszą stronę nie potrzeba nie wiadomo jakich narzędzi czy umiejętności. Poznanie kilku podstawowych znaczników może pozwolić na stworzenie projektu, którym po jakimś czasie będziemy mogli się pochwalić w Internecie. Jednym z kluczy, który ułatwi nam pracę z kodem będzie edytor tekstowy. Jest tego szeroka gama, mają swoje wady i zalety. Jedną z ważniejszych cech wspólnych jest możliwości pisania naszych stron. Mogę wymienić kilka z nich, ale generalnie bez różnicy który wybierzecie: Atom, Sublime Text, Visual Studio Code. Posiadają one różne wtyczki, które trzeba odnaleźć w katalogu i doinstalować. Usprawni nam to pisanie, niektóre rzeczy będą się robiły automatycznie. Troszkę zbyt zagłębiłem się w konfigurację, ale warto o tym wiedzieć. To tak pokrótce z przygotowania, później będzie tylko łatwiej.

Zatem do rzeczy

Na początek może pokażę szablon okraszony kilkoma komentarzami oznaczonymi następująco: <-- -->. Ten tekst jest widoczny tylko dla nas, ułatwia opisanie kodu. Dzięki takiej podstawie można przejść do znaczników, które stworzą nam trochę magii. Na początku warto zaznaczyć, że każdy znacznik znajduje się w nawiasach ostrokątnych. Większość z nich należy zamykać ukośnikiem poprzedzający znacznik.

Wreszcie właściwe znaczniki!

Aby umieścić jakiś tekst powinniśmy użyć wszystko zgodnie z jego przeznaczeniem. Tekst wpisany swobodnie wyświetli się w przeglądarce, ale to nieprofesjonalne. Przeglądarce łatwiej będzie interpretować i wizualnie lepiej dla nas. Strukturalnymi znacznikami będziemy opisywać nagłówki i akapity tekstu. Charakteryzują się one tym, że zaczynają się od nowego wiersza (elementy blokowe).

Wiele rzeczy warto przedstawić jako listę, gdy chcemy wypunktować jakieś elementy. Tutaj z pomocą przychodzą nam trzy znaczniki ul, ol, li. Spróbujmy odwzorować podane listy.

  • Kilogram mąki
  • Dwie butelki wody
  • Paczka paluszków

  1. Wstać o 8 rano
  2. Zrobić projekt do 12
  3. Udać się na spotkanie o 16

Gdy chcemy aby dany tekst, obrazek lub cokolwiek innego nawiązywało do innej strony. Po prostu by przeniosło nas w inne miejsce to musimy użyć znacznika łącza. Nawet nasz obrazek może być odnośnikiem np. do jakiegoś artykułu. Zarazem mamy tutaj przykład znacznika, który nie wymaga zamknięcia, jest nim img czyli znacznik obrazka.
Różne ciekawe blogi!


logo wikipedia

4 thoughts on “Pierwszy krok – zapoznanie z HTML | #1

Dodaj komentarz

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