formatowanie tekstu, czyli jak zrobić, żeby to jakoś wyglądało...
W poprzednim ćwiczeniu
napisaliśmy naszą pierwszą stronę korzystając z tzw. języka HTML.
Otwórzmy tą stronę w dowolnej przeglądarce internetowej. Nie zamykając okienka
przeglądarki uruchom też swój ulubiony edytor tekstu i wybierz z górnego
menu plik-> otwórz, a potem odszukaj swoją stronę.
Nasza strona ma jedną podstawową zaletę: działa. Nadeszła więc pora, aby
tekstowi nadać trochę bardziej atrakcyjny wygląd. Zacznijmy od zmiany koloru
tła strony; uzyskamy to dopisując w znaczniku body (wewnątrz nawiasu!)
<body bgcolor="yellow">
pamiętaj, aby nie robić zbędnych odstępów. Teraz wybierz z górnego menu plik
-> zapisz (ale nie "zapisz jako") i przejdź do okna przeglądarki.
I co? Jakby nie działa. Spokojnie - działa, tylko musimy poinformować przeglądarkę,
że coś się zmieniło. Naciśnij ikonkę "odśwież" . Teraz powinno być wszystko
wporządku. Zapamiętaj: po każdej zmianie w treści strony powinno
się ją zapisać, a następnie odświeżyć widok w przeglądarce.
Oczywiście zamiast "yellow" możesz napisać inną nazwę koloru w jężyku
angielskim (wypróbuj to!)
Ćwiczenie
Dopisz pomiędzy znacznikami <body> i </body> kolejno
poniższe wiersze. Jaki jest efekt działania tych znaczników? Zapisz w zeszycie
te znaczniki. Nie zapomnij zanotować, co powoduje ich umieszczenie.
Zwróć uwagę, że dwa ostatnie
znaczniki nie występują parami.
Ćwiczenie
Wymaż w swoim dokumencie strona1.html wszystko, co znajduje się między
znacznikami <body> i </body>. Napisz w tym miejscu kilka zdań
o sobie: jak masię nazywasz, cile masz lat, do której klasy chodzisz, czym
się interesujesz, co lubisz a czego nie lubisz... Wykorzystaj poznane znaczniki,
aby tekst miał atrakcyjny wygląd (kolory, wielkość napisów). Zapisz dokument
i obejrzyj go w przeglądarce. No i jak - dobrze wygląda?
informacje dla nauczyciela i administratora pracowni
komentarz metodyczny:
we wstępnej części lekcji ograniczmy się do zademonstrowania działania jednego
tylko znacznika, pozostawiając dzieciom możliwość samodzielnego odkrywania
funkcji pozostałych znaczników. Dopilnujmy, aby uczniowie zanotowali te znaczniki
wraz z ich działaniem w zeszytach - to co dziś wydaje się im oczywiste,
za tydzień stanie się trudnym do przypomnienia... Jeżeli jest taka możliwość,
temat ten warto rozłożyć na dwie jednostki lekcyjne po 45 min. Możemy wtedy
nieco rozszerzyć listę poznawanych w pierwszym ćwiczeniu znaczników.
co przygotować:
Windows
Linux
MacOS
Internet Explorer lub Mozilla
(Netscape), notatnik
Mozilla, gedit
Internet Explorer lub Netscape,"łatwy
edytor"
*za wyjątkiem Netscape
wszystkie wymienione narzędzia są narzędziami systemowymi i nie trzeba ich
doinstalowywać;
co uczniowie powinni umieć wcześniej:
uruchomić edytor tekstu i przeglądarkę;
przełączać się pomiędzy otwartymi oknami programów;
zapisać plik w edytorze tekstu.
odróżniać i poprawnie pisać znaczniki html
najczęściej popełniane błędy:
wpisywanie zbędnych nawiasów ostrych, np.
<body>bgcolor="red">
niedomykanie cydzysłowów i nawiasów np. <font
color="red>
niepoprawna pisownia nazw kolorów np. 'blu'
zamiast 'blue'
wpisywanie zbędnych spacji, np. <font
size_=_5>
wpisywanie znaczników poza ciałem dokumentu,
tj. przed <body> lub za </body>;czasmi wręcz po końcowym</html>.
Należy zwracać uwagę uczniom na to że znaczniki</body></html>są
ostatnie w dokumencie.
czego należy oczekiwać od uczniów:
W wyniku ćwiczenia 2 uczniowie powinni poznać kilka podstawowych znaczników
służących do formatowania tekstu i nauczyć się je stosować.Celem następnego ćwiczenia jest przygotowanie
przez ucznia własnej strony www, którą będzie mógł traktować jak swoje własne
dzieło.