Scenariusz
Temat
Podstawowe znaczniki i ich zastosowanie
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 podstawowych znaczników wykorzystywanych w kodzie html używanym przy pisaniu stron www.
Cele szczegółowe
1. Poznanie reguł dotyczących projektowania stron www.
2. Poznanie znaczników występujących w kodzie html.
Efekty uczenia
Uczeń:
- zna zasady projektowania stron internetowych,
- potrafi napisać prosty kod strony www w języku html.
Metody kształcenia
1. Praca z komputerem.
2. Dyskusja.
Formy pracy
1. Praca własna ucznia z komputerem.
Etapy lekcji
Wprowadzenie do lekcji
Uczniowie odpowiadają na pytania wprowadzające:
1. Jak pogrubić tekst na stole internetowej używając języka HTML?
2. Jak pochylić tekst na stole internetowej używając języka HTML?
3. Jak powiększyć tekst na stole internetowej używając języka HTML?
4. Jak wycentrować tekst na stole internetowej używając języka HTML?
Realizacja lekcji
Polecenie 1
Uczniowie czytają tekst, wypisują wszystkie użyte w tekście i na slajdach znaczniki stosowane w języku html.
Znacie już podstawową strukturę kodu HTML strony WWW. Czas na poznanie kolejnych znaczników, które pozwolą Ci umieścić na stronie inne, bardziej złożone elementy. Oto najważniejsze z nich.
W sekcji nagłówka strony umieszczamy znaczniki <META> definiujące podstawowe parametry strony. Są to znaczniki dla których nie stosujemy znacznika zamykającego/kończącego.
<META http‑equiv=”content‑type” content=”text/html; charset=iso‑8859‑2”>
jest to znacznik informujący przeglądarkę o tym, jakie kodowanie polskich znaków wybraliśmy. Do najczęściej stosowanych należą windows‑1250, iso‑8859‑2 oraz UTF‑8. Jest to ważny znacznik, gdyż jeśli kod strony zostanie napisany z wykorzystaniem innego zestawu znaków, niż wskazany będzie w znaczniku -polskie znaki diakrytyczne będą wyświetlane błędnie.
<META NAME=”Keywords” CONTENT=”słowo‑kluczowe‑1, słowo‑kluczowe‑2, słowo‑kluczowe‑3”>
Znasz wskazujący słowa kluczowe określające podstawową treść naszej strony i pomagający prawidłowe wyszukanie naszej strony w przeglądarce. Jest to znacznik istotny, jeśli zależy nam, aby nasza strona była prawidłowo wyszukiwana.
<META NAME=”Description” CONTENT=”opis precyzujący jaka jest treść naszej strony”>
Znacznik wyświetlający „opis” strony po znalezieniu jej przez wyszukiwarkę. Wyszukiwarki internetowe również go analizują w celu lepszego jej skatalogowania.
<META NAME=”Author” CONTENT=”Dane autora strony”>
Znacznik informujący o tym, kim jest autor strony.
<META NAME=”Generator” CONTENT=”nazwa użytego edytora HTML”>
Znacznik ten informuje jakiego edytora użyliśmy do stworzenia naszej strony.
<META NAME=”Language” CONTENT=”pl”>
Znacznik informuje w jakim języku została utworzona strona
W sekcji treści strony możemy korzystać z następujących znaczników:
TEKSTOWE:
<P></P> – akapit czyli fragment tekstu zaczynający się od nowej linii
<BR> - przejście do następnego wiersza. Ten znacznik występuje pojedynczo. Przeglądarka interpretując kod html pomija znaki takie jak enter, tabulator i więcej niż jedna spacja są to tzw. białe znaki (ang. white space)
Zapytasz pewnie a co wtedy gdy chcemy rozdzielić wyrazy więcej niż jedna spacją?
W takich przypadkach posługujemy się zapisem bez użycia znaków większości i mniejszości.
<B></B> – pogrubienie tekstu
<I></I> – pochylenie tekstu (tzw. kursywa)
<U></U> – podkreślenie tekstu
<FONT></FONT> – określenie stylu czcionki tekstu, przy czym styl ten określamy dodatkowym parametrem wewnątrz znacznika
<Font color=”kolor”></FONT> – jako kolor używamy angielskojęzycznych nazw takich jak “white”, “black” itd., ale lepiej użyć kodu koloru w zapisie hexadecymalnym (tabele kodów bez problemów znajdziesz w sieci Internet pod hasłem “kody kolorów HTML”)
<Font size=”wielkość”></FONT> – gdzie wielkość podawana jest w tzw. „punktach” i przyjmuje ona wartości liczbowe 2, 3, 4, 5, itd.
Przykład : wyświetlenie tekstu w kolorze czerwonym i rozmiarze czcionki 3pkt.
<Font color=”red” size=”3”> tekst </Font>
GRAFICZNE:
Chcąc wstawić w treści strony obrazek, należy użyć znacznika:
<IMG SRC=”nazwa obrazka z rozszerzeniem”> - Znacznik ten także nie ma znacznika zamykającego. Z praktycznego punktu widzenia (mniejsze rozmiary = szybsze ładowanie strony) właściwym jest, aby były to pliki typu JPEG lub PNG.
LINKI, czyli odsyłacze (fachowo nazywane łączami hipertekstowymi)
Link, jest to wyróżniony w pewien sposób tekst lub rysunek, po wybraniu którego zostaniemy przeniesieni na inną stronę www. Służy temu następujący znacznik:
<A HREF=”adres_hiperłącza”>test_linku</A>
Przykład:
<A HREF=http://google.pl>Idź do Google</A>
Na stronie zostanie wyświetlony tekst “Idź do Google”, a po kliknięciu na ten tekst do okna przeglądarki zostanie załadowana strona Google.
TABELE:
Na stronie możemy także zamieszczać tabele, a przy odpowiedniej wprawie wykorzystać te znaczniki do podziału całej strony na wymagany układ.
Tabele używamy po to, aby odpowiednio pooddzielać poszczególne części strony.
Definicja tabeli składa się z trzech podstawowych znaczników: <TABLE></TABLE> oznaczającego początek i koniec strony, <TR> </TR> definiującego początek i koniec wiersza oraz <TD> </TD> definiującego początek i koniec kolumny w wierszu.
Tak więc tabela składająca się tylko z jednej komórki będzie zakodowana tak: <TABLE><TR><TD>treść jednej komórki</TD></TR></TABLE>.
Natomiast tabela składająca się z dwu wierszy i dwóch kolumn:
<TABLE>
<TR>
<TD>wiersz 1 kolumna 1</TD>
<TD>wiersz 1 kolumna 2</TD>
</TR>
<TR>
<TD>wiersz 2 kolumna 1</TD>
<TD>wiersz 2 kolumna 2</TD>
</TR>
</TABLE>
Oczywiście znaczników jest wiele, wiele więcej niż tutaj opisano. Możesz je poznać poprzez tabele znaczników HTML kursy języka HTML których wiele znajdziesz w sieci Internet lub księgarni informatycznej.
A teraz dodatkowo o kilku z nich znajdziesz informacje w pokazie slajdów:
[Slideshow]
Polecenie 2
Połącz w pary:
[Tabela 1]
Polecenie 3
Weź gazetę i przepisz z niej tekst jednego z artykułów tworząc odrębną stronę internetową. Używaj języka html i poznanych znaczników.
Podsumowanie lekcji
Kilka znaczników kodu html wartych zapamiętania:
- <Font color=”kolor”> kolor czcionki,
- <Font size=”wielkość”> wielkość czcionki,
- <h1> – <h6> nagłówki,
- <p> akapit,
- <br> nowa linia,
- znak specjalny spacji twardej/niełamliwej,
- <hr> pozioma linia oddzielająca tekst,
- <i> pochylenie tekstu,
- <b> pogrubienie tekstu,
- <u> podkreślenie tekstu,
- <mark> podświetlenie tekstu,
- <small> pomniejszenie tekstu tyle razy ile razy jest użyty znacznik,
- <table> tabela,
- <td> kolumna w tabeli,
- <tr> wiersz w tabeli,
- <A HREF=”adres_hiperłącza”> link,
- <IMG SRC=”nazwa obrazka z rozszerzeniem”> wstawienie obrazka.