Przedstawiamy informacje dotyczące tworzenia stron internetowych od podstaw. Między innymi wybór i instalacja edytora kodu, składnię języka HTML, , składnia języka CSS oraz podstawowy szablon strony WWW. Mogą być one przydatne w szczególności uczniom na lekcjach informatyki.
Na początek przygotujemy komputer do pracy. Będziemy potrzebować edytora kodu, dlatego że pisanie kodu, na przykład w systemowym Notatniku jest bardzo niewygodne. Dobry edytor ułatwia to zadanie przez m.in. numerowanie wierszy i ich wcięcia, kolorowanie składni oraz podpowiedzi. Z najbardziej znanych i darmowych edytorów możemy polecić Microsoft Visual Studio Code, ale jeśli okaże się zbyt skomplikowany, dla początkujących dobrym wyborem będzie Notepad++ i użyjemy go w przykładach w naszym tekście. Te aplikacje można pobrać tutaj:
Microsoft Visual Studio Code: https://code.visualstudio.com
Notepad++: https://notepad-plus-plus.org
Instalacja jest bardzo prosta, a w przypadku Notepad++ nawet niepotrzebna, bo program jest dostępny również w wersji “Portable”, którą uruchomimy od razu po pobraniu, bez instalowania jej na komputerze.
Wstępna konfiguracja jest bardzo prosta. Po uruchomieniu Notepad++ warto ustawić język polski – Klikamy kolejno Settings -> Preferences i w okienku, które się pojawi, pod Localization wybieramy z listy Polski. Kolejną ważną rzeczą jest wybór języka, w którym będziemy pisać nasz kod. Notepad++ to uniwersalny edytor i wspiera wiele innych języków. Na nasze potrzeby ustawimy HTML. Żeby to zrobić, klikamy w górnym meny na Składnia -> wybieramy literę H i klikamy HTML. Teraz możemy zacząć pisać nasz kod 🙂
Wpisujemy w okno edytora podstawowy szablon strony internetowej i zapisujemy go do pliku o nazwie index.html:
Mamy tutaj:
<!DOCTYPE html> – Typ dokumentu.
<html></html> – Zawiera całą treść strony. Wskazuje, gdzie zaczyna i kończy się kod HTML.
<head></head> – Nagłówek strony. Działa jak kontener dla wszystkich elementów, które chcesz umieścić na stronie HTML, ale nie w treści. Na przykład style CSS, które omówimy później.
<body></body> – Zawiera całą zawartość, która ma być wyświetlana użytkownikom internetowym podczas odwiedzania strony – tekst, obrazy, wideo, gry, odtwarzalne ścieżki dźwiękowe i inne.
<meta charset=”utf-8″> – Ten element ustawia zestaw znaków, którego dokument powinien używać do wyświetlenia treści strony. W tym wypadku jest to UTF-8, który zawiera większość znaków z większości ludzkich języków pisanych.
<title></title> – Ustawia tytuł strony, który jest tytułem wyświetlanym na karcie przeglądarki.
Po otworzeniu naszego pliku index.html w przeglądarce zobaczymy taki wynik. Jak widać, tytuł strony został wyświetlony na górnym pasku, a w oknie jej treść.
HTML nie jest językiem programowania, tylko językiem znaczników. HTML składa się z serii znaczników (tagów), których używa się do “opakowania” różnych części treści, tak aby wyglądały i działały w określony sposób. Mamy tagi otwierające i zamykające. Najważniejsze z nich to:
Akapit:
<p>Treść akapitu…</p>
Nowa linia:
<br>
Obrazek:
<img src=”ścieżka-do-pliku-obrazka-na-serwerze” alt=”tekst-który-wyświetli-się-w-razie-błędu”>
Nagłówki (mamy do dyspozycji sześć wielkości nagłówka – od h1 do h6):
<h1>Treść nagłówka</h1>
Odnośnik – link:
<a href=”adres-strony-internetowej”>Tekst zastępczy odnośnika</a>
Umieśćmy je wszystkie w naszym kodzie, zapiszmy zamiany i odświeżmy stronę w przeglądarce:
Kaskadowe arkusze stylów CSS
To kod służący do nadawania wyglądu strony. Służy do zmiany koloru i kroju tekstu, zmiany położenia i rozmiaru elementów na stronie i wielu więcej.
Podobnie jak HTML, CSS nie jest językiem programowania. Nie jest jednak też językiem znaczników, ale językiem arkuszy stylów. Pozwala on selektywnie stosować style do elementów w dokumentach HTML. Spróbujmy zmienić wygląd naszej strony. Najpierw stworzymy nowy plik, w menu Składnia, tym razem zamiast HTML zaznaczymy CSS i zapiszemy go pod nazwą style.css w tym samym folderze, co plik index.html. Nie możemy zapomnieć o umieszczeniu w sekcji <head> naszej strony odnośnika do naszego arkusza stylów. W CSS, podstawowa zasada jest prosta. Wpisujemy nazwę znacznika HTML i w nawiasach klamrowych zmieniamy jego właściwości. Wszystkie znaczniki na stronie otrzymają określony wygląd. Po zapisaniu naszych plików i odświeżeniu strony, zobaczymy zmiany:
Zadanie sfinansowane ze środków Gminy Sępólno Krajeńskie.
