HTML

HTML #1 – początki

Pewnie słyszałeś w szkole o czymś takim jak HTML – jest to hipertekstowy język znaczników, używany do deklarowania struktury strony internetowej, wyobraź sobie szkielet człowieka (deklarujemy tutaj w jaki sposób ma być zbudowana strona internetowa, ale nie nadajemy parametrów związanych z wyglądem).

Skupię się tutaj na przykładach, zastosowaniu, użyciu głównych elementów języka HTML – więcej, o teorii dowiesz się tutaj.

Jeżeli chodzi o elementy których nie poruszę, znajdziesz je w obszernym poradniku.

 

Aby tworzyć w HTML potrzebujesz jedynie edytor tekstu (polecam Atom.io – może być też zwykły notatnik w komputerze) i przeglądarki.

Omówmy pewien przykład – uważam, że w taki sposób szybciej załapiesz jak to wszystko działa.

  1. Otwórz edytor tekstu i utwórz nowy plik o nazwie index.html – nazwa index jest używana jako domyślny (główny) plik dla stron internetowych, zatem po przejściu pod adres strony np. http://demo.pl/ przeglądarka kieruje nas na plik o nazwie index z rozszerzeniem pliku (.html, .htm, .php, itd. – zależy od języka programowania).
  2. Wklej poniższy kod i zapisz plik w preferowanym miejscu na komputerze np. Pulpit – następnie otwórz go w przeglądarce (klikając 2 razy lewym guzikiem myszy).

Pierwsza linia kodu deklaruje przeglądarce, używanie języka HTML, oczywiście przeglądarka potrafi rozpoznać, że jest to język HTML, ale dzięki takiemu zapisowi ustawiamy również wersję HTML5.

W dalszej części zaczyna się już cała struktura strony, rozpoczęta od elementu „html” i takim samym zakończona, podzielona na 2 części:

  • głowę
  • ciało

W głowie „head” deklarujemy tytuł strony (pojawia się w karcie przeglądarki), kodowanie UTF-8 (polskie znaki na stronie), dołączamy inne pliki CSS, JS – które pozwolą dodać wygląd i animacje na stronie, a także resztę rzeczy, które wykonać się mają przed załadowaniem ciała strony. Składniki te jedynie raz ustalamy dla całej strony.

Natomiast w ciele „body” wpisujemy wszystko co ma się pokazać użytkownikowi na ekranie w przeglądarce, obecnie dodaliśmy tam nagłówek i akapit na tekst. Treść każdej podstrony (np. „O mnie”, „Kontakt”, itd.) musimy deklarować na różne sposoby, zatem będziemy używać elementy dość często – warto je zapamiętywać 🙂

 

Deklarowanie HEAD:

  • zacznijmy od dodania tytułu strony (na przykładzie dodaliśmy tytuł „Tytuł naszej strony”), używamy do tego znacznika „title
  • dodanie kodowania znaków UTF-8 (polskich) na stronie wykonujemy przed dodanie do sekcji HEAD takiej linii kodu
  • Istnieje jeszcze kilka znaczników, które powinniśmy dodać – jak opis, słowa kluczowe, autora oraz deklarację skalowania ekranu na różne urządzenia (dodam jeszcze, że to co znajduje się pomiędzy „<!–„, a „–>” to komentarz i nie jest on pokazywany na stronie – używany do opisywania działania pewnych elementów).
  • Dodanie pliku CSS (z wyglądem strony) do sekcji HEAD wykonujemy w taki prosty sposób (oczywiście znajduje się tam zmienna „href” w której deklarujemy nazwę pliku CSS) – obecnie plik znajduje się w tym samym katalogu co plik strony (index.html) i nazywa się „style.css”.
  • Dodanie pliku JS (JavaScript – animacje, efekty ukrywania/pokazywania elementów, itd.), działa to na podobnej zasadzie jak przy CSS – tutaj natomiast deklarujemy nazwę pliku w zmiennej „src„, zatem nasz plik nazywa się „script.js”.

     

Konstruowanie BODY:

Pokażę Ci kilka głównych elementów, z którymi zbudujesz prawie każdą stronę (dodatkowe elementy są bardzo rzadko używane i trzeba się z nimi zapoznać z „dokumentacji – szczegółowego poradnika”).

Element w HTML deklarujemy w taki sposób:

Oczywiście, zamiast „nazwa_elementu” podajemy nazwę istniejącą np.

  • h1, h2, h3, h4, h5 – są to nagłówki (h1 będzie to największy nagłówek na stronie, a im dalej tym mniejszy)
  • p – akapit, dzięki temu oddzielimy pewną część tekstu od siebie
  • span – element używany w większości przypadków do oznaczenia pewnego tekstu na stronie w akapicie (możemy później nadać mu kolor wyróżnienia)
  • div – element używany do deklaracji „bloczków” na stronie, dzięki niemu budujemy układ strony np. dzielimy stronę na 2 bloczki z tekstem (oczywiście musimy to później obrać w wygląd, ponieważ obecnie będą to elementy pod sobą).
  • b – pogrubienie tekstu
  • upodkreślenie tekstu
  • iprzechylenie tekstu (kursywa)
  • sprzekreślenie tekstu

 

Dodawanie zdjęcia na stronie (poniższy kod doda na stronę zdjęcie z tego samego katalogu co plik index.html, o nazwie „photo.jpg” – pamiętaj, aby sprawdzać format zdjęcia „jpg”, „png”, itd.)

Dodawanie adresu URL na stronie (wykorzystujemy tutaj element „a„, któremu deklarujemy zmienną „href” – dzięki temu będzie wiadomo gdzie ma nas przenieść po kliknięciu w „więcej informacji” – oczywiście możemy zmienić adres i tekst takiego znacznika), dodając zmienną „target” z wartością „_blank„, adres otworzy nam się w nowej karcie przeglądarki

Dodawanie listy „zakupów” na stronie (element który pozwoli nam na stworzenie listy to „ul„, następnie zawiera on wiele elementów z listy „li„)

Aby w tekście przejść do nowej linii używamy takiego elementu „<br>” – wstawiamy go w miejsce gdzie chcemy przejść niżej.

 

 

Wydaje mi się, że po takim wstępie będziesz mógł zbudować swoją pierwszą stronę internetową (bez super efektów wizualnych, ale tym się również zajmiemy już wkrótce) 😀

 

Zadanie do wykonania

Spróbuj stworzyć samodzielnie katalog strony, z plikiem HTML i CSS, a następnie wczytaj plik CSS do strony, skonfiguruj poprawnie całą sekcję HEAD wykorzystując poznane elementy, utwórz również strukturę prostej strony internetowej dla księgarni online (powinny się tam pojawić książki, z dostępnością, ceny, krótki opis i ich tytuł).

Nie zapomnij pochwalić się swoimi efektami w komentarzu (możesz użyć tej platformy do udostępnienia kodu: paste.org pod linkiem).