Temat

Tworzenie stron WWW z wykorzystaniem języka HTML

Etap edukacyjny

Drugi

Podstawa programowa

Klasy VII‑VIII

II. Programowanie i rozwiązywanie problemów z wykorzystaniem komputera i innych urządzeń cyfrowych. Uczeń:

3) korzystając z aplikacji komputerowych, przygotowuje dokumenty i  prezentacje, także w chmurze, na pożytek rozwiązywanych problemów i  własnych prac z różnych dziedzin (przedmiotów), dostosowuje format i  wygląd opracowań do ich treści i przeznaczenia, wykazując się przy tym umiejętnościami:

e) tworzenia prostej strony internetowej zawierającej: tekst, grafikę, hiperłącza, stosuje przy tym podstawowe polecenia języka HTML.

III. Posługiwanie się komputerem, urządzeniami cyfrowymi i sieciami komputerowymi. Uczeń:

2) rozwija umiejętności korzystania z różnych urządzeń do tworzenia elektronicznych wersji tekstów, obrazów, dźwięków, filmów i animacji;

3) poprawnie posługuje się terminologią związaną z informatyką i technologią.

Czas

45 minut

Cel ogólny

Poznanie zasad projektowania stron internetowych.

Cele szczegółowe

1. Poznanie reguł dotyczących projektowania stron www.

Efekty uczenia

Uczeń:

- zna zasady projektowania stron internetowych.

Metody kształcenia

1. Metoda odwróconej klasy.

2. Dyskusja.

Formy pracy

1. Praca własna ucznia.

2. Praca w grupach.

Etapy lekcji

Wprowadzenie do lekcji

Uczniowie odpowiadają na pytania wprowadzające:

1. Co to jest HTML?

2. Czy wiesz gdzie wyświetlić źródło strony którą oglądasz? tzn. zbiór poleceń, które wykonuje przeglądarka napisany prze z autora strony.

3. Czy główne założenia strony internetowej można napisać w notatniku?

4. Co zrobić, jeśli w dokumentach HTML nie ma polskich liter?

Realizacja lekcji

Polecenie 1

Uczniowie czytają tekst, a następnie na podstawie zawartych w nim informacji wykonują pierwszą prostą stronę internetową w języku HTML

Strony WWW tworzone są w języku HTML (ang. Hyper Text Markup Language, hyper text - hipertekstowy, markup - znacznik, language – język)

Czym jest HTML?

Jest to hipertekstowy język znaczników czyli bardziej zrozumiale język komputerowy służący do komunikacji z komputerem, który używany jest do opisu stron internetowych.

Ale po kolei: hipertekst to tekst (treść) połączony ze sobą w luźny sposób odsyłaczami/linkami zwanymi hiperłączami. Tak jak to ma miejsce w sieci Internet. Strony posiadają do siebie odsyłacze, tzw. linki.

Teraz w kolejności zajmijmy się znacznikami. Znaczniki to wyrażenia wpisane w ostrych nawiasach <>, Jak otworzysz źródło strony z pewnością zauważysz dużą liczbę poleceń zapisanych właśnie w ten sposób, w znacznikach.

No to jeszcze wyjaśnijmy stwierdzenie „język opisu stron internetowych”. Opis strony internetowej to nazwanie jej poszczególnych elementów. W języku HTML oddzielnie oznaczymy tekst nagłówka, oddzielnie tytuł strony, a oddzielnie treść strony. Jednakże nie wystarczy powiedzieć co jest nagłówkiem, a co treścią strony, trzeba jeszcze określić jak one mają wyglądać, do tego celu służy język styli CSS (Cascading Style Sheets: cascading - kaskadowe, style - styl, sheets - arkusze). Ale znów co to takiego? Są to zewnętrzne pliki w których zawarte są informacje na temat zasad formatowania strony internetowej. Określone są tam takie właściwości jak rozmieszczenie elementów na stronie, kolor i rozmiar czcionki, kolor tła itp.

Język html określa czym są poszczególne elementy strony internetowej, natomiast język CSS określa się wygląd poszczególnych elementów.

Wróćmy do znaczników. W elementach kodu strony występuje pewna prawidłowość - kod składa się ze znaczników ograniczonych znakami „< >” przy czym początek fragmentu kodu rozpoczyna się symbolem „<ZNACZNIK>” i kończy się podobnym symbolem, jednak z dodanym znakiem - pionową kreską pochyloną w prawo, tzw. forward slash „/”. Zatem znacznik zamknięcia przybiera postać: „</ZNACZNIK>”. Na tej podstawie przeglądarka internetowa interpretuje przesłany z serwera kod znajdując początek i koniec fragmentu i odpowiednio go wyświetlając. Znaczniki najczęściej występują parami.

Kod strony WWW możesz stworzyć zarówno w zwykłym edytorze tekstowym (np. notatnik, Microsoft Word, Libre Office) jak i w specjalizowanym edytorze HTML (np w bezpłatnym HTML‑kit). Przy zapisywaniu pliku kodu strony pamiętaj, aby nadać mu rozszerzenie .htm lub .html – wtedy przeglądarka poprawnie rozpozna rodzaj pliku i wyświetli stronę.

Kod strony powinien zaczynać się znacznikiem <HTML> a zakończyć </HTML>.

Jest to informacja dla przeglądarki z jakim typem dokumentu ma do czynienia. Zapis <HTML> przeglądarka rozpoznaje jako stronę internetową i może ją wyświetlić na naszym ekranie. Aby tak się zadziało wystarczy, że na zapisanym dokumencie klikniesz prawym klawiszem myszy i wybierzesz polecenie „otwórz jako” a dalej wybierz przeglądarkę w której ma się strona wyświetlić.

Należy pamiętać o umieszczeniu znacznika zamknięcia na końcu dokumentu. I tak pierwsza linia kodu będzie wyglądała:

<HTML>

A ostatnia:

</HTML> co oznacza koniec dokumentu.

Wszystkie polecenia musza się znaleźć między tymi dwoma znacznikami.

Dla zwiększenia czytelności dokumentu wszystkie znaczniki umieszczane są w nowych liniach kodu. Ma to tylko znaczenie dla osoby piszącej lub czytającej kod strony, dla przeglądarki nie ma to znaczenia.

Teraz kolej na nagłówek naszej strony. Do przekazania informacji przeglądarce, że chcemy napisać nagłówek służy znacznik <head> (z ang. głowa, sekcja nagłówkowa). Znacznik ten zarówno w wersji otwarcia jak i zamknięcia musi być umieszczony pomiędzy znacznikami <html>. Używamy go, aby opisać ustawienia dokumentu html. Zapisujemy informacje m.in. o rodzaju języka, którym będziemy się posługiwać (np. polski lub angielski).

Ze względu na to, że znacznik <html> był używany jako pierwszy, a znacznik <head> drugi i pomiędzy nimi nie było znacznika zamknięcia </html> mówimy o tym, że znacznik <html> jest rodzicem znacznika <head> i odwrotnie, że ten ostatni jest dzieckiem tego pierwszego. Skoro już ustawiliśmy parametry strony teraz czas na umieszczenie na niej treści. Do tego celu użyjemy kolejnego ważnego znacznika <body> (z ang. ciało, główna część dokumentu). Zatem między znacznikami <body> oraz </body> umieszczamy to co chcemy, aby było wyświetlono w przeglądarce.

A więc zapiszmy ten kawałek kodu w notatniku, struktura takiego pliku powinna wyglądać tak:

<HTML>
<HEAD>
... zawartość nagłówka strony ...
</HEAD>
<BODY>
... treść strony ...
</BODY>
</HTML>

W języku polskim występują znaki diakrytyczne. Dla przypomnienia są to znaki graficzne używane w alfabetach umieszczane nad, pod, obok lub wewnątrz litery, zmieniające jej artykulację i tworzące przez to nową literę. W języku polskim jest dziewięć liter tworzonych za pomocą znaków diakrytycznych. Należą do nich: ą, ć, ę, ł, ń, ó, ś, ź, ż. Aby na naszej stronie dobrze się wyświetlały należy przeglądarkę powiadomić, że chcemy z nich skorzystać. Do tego służy znacznik <meta charset=”utf‑8”> lub <meta charset=” windows‑1250”>.

Aby sprawdzić czy przeglądarka poprawnie będzie wyświetlała polskie litery należy wpisać poprawne gramatycznie, ale nie mające sensu zdanie, w którym wyświetlane są wszystkie polskie znaki diakrytyczne: „Zażółć gęślą jaźń”.

Jednym z ważniejszych znaczników jest <title> określający tytuł strony. Powinien on zostać umieszczony w sekcji nagłówka. Tytuł taki może np. wyglądać tak:

<TITLE> Moja pierwsza strona WWW</TITLE>

Natomiast w treści strony (czyli po znaczniku <body>) podstawowym znacznikiem jest znacznik akapitu <P>, czyli fragmentu tekstu zaczynającego się od nowej linii.

Jeśli w sekcji treści strony umieścimy więc kod:

<P>To jest moja pierwsza strona WWW. Wyszła całkiem fajnie.</P>

otrzymamy w oknie przeglądarki jedną linię zapisu:

To jest moja pierwsza strona WWW. Wyszła całkiem fajnie.

Jeśli będziemy chcieli, aby oba zdania zostały wyświetlone jedno pod drugim, kod wyglądałby tak:

<P>To jest moja pierwsza strona WWW.</P><P>Wyszła całkiem fajnie.</P>

Cały kod naszej pierwszej strony wyglądałby więc następująco:

<HTML>
<HEAD>
<TITLE> Moja pierwsza strona WWW</TITLE>
</HEAD>
<BODY>
<P>To jest moja pierwsza strona WWW.</P> <P>Wyszła całkiem fajnie.</P>
</BODY>
</HTML>

To nie jest specjalnie trudne, prawda? Po poznaniu zasad konstruowania kodu musisz jeszcze poznać inne znaczniki, które pozwolą Ci na wstawianie bardziej złożonych elementów na stronę i decydowanie o ich kolorze, wielkości czy stylu. O tym na kolejnej lekcji.

Obejrzyj teraz pokaz slajdów, na którym zobaczysz poszczególne kroki tworzenia kodu strony:

[Slideshow]

Podsumowanie lekcji

Zapamiętaj:

W języku HTML prawie każde polecenie musi rozpocząć się i zakończyć znacznikiem. Znacznik otwarcia i zamknięcia różni się znakiem „/”. Każdy znacznik musi być wstawiony między dwa symbole nierówności <>.

Znaczenie podstawowych znaczników w języku HTML:

<HTML> </HTML> - między nimi jest cała projektowana strona;

<HEAD> </HEAD> - między nimi umieszcza się treść nagłówka;

<BODY> </BODY> - między nimi umieszcza się treść strony;

<TITLE>  </TITLE> - między nimi umieszcza się tytuł strony;

<P> </P> - między nimi umieszcza się treść która ma być w jednym akapicie.