Poniższe treści są realizowane podczas 2 jednostek lekcyjnych.
Temat: Tworzenie strony internetowej – podstawowa struktura, formatowanie tekstu.
Przeczytaj z podręcznika następujące rozdziały z tematu 17. Tworzenie strony internetowej z wykorzystaniem znaczników HTML – projekt:
- Narzędzia do tworzenia stron internetowych
- Ogólne zasady projektowania stron internetowych
- Kod źródłowy strony internetowej.
- Tworzymy stronę internetową „Podróże po stolicach Europy”
4.1. Formatowanie tekstu
Wykonaj zadania.
Zadanie 1
Tworzymy szablon strony.
Wiesz już, że w języku HTML będziemy stosować znaczniki. Znaczniki przeznaczone są dla przeglądarki, czyli dla programu wyświetlającego stronę. Najczęściej znaczniki są parzyste, czyli wymagają otwarcia i zamknięcia:
<to jest znacznik otwierający>Tu jest treść </to jest znacznik zamykający>
Otwórz Notatnik. Wpisz znaczniki (użyj klawisza Tab [tabulacji], aby przesunąć znaczniki dla poszczególnych części strony, struktura będzie wtedy bardziej przejrzysta):
<html>
<head>
<title>Podróże</title>
</head>
<body>
Podróże po stolicach Europy
</body>
</html>
Dodaj cztery zdania o tym, co znajdzie się na stronie. Każde zdanie wpisz w oddzielnym wierszu (przykład: Rys. 1 str. 214). Zapisz plik pod nazwą index.htm (zarówno tytuł pliku, jak i jego rozszerzenie wpisz sam w odpowiednie miejsce).
Zadanie 2
Zmieniamy kolor tła.
Aby móc zmieniać kod strony, należy ją otworzyć w Notatniku (np. naciśnij prawy przycisk myszy na ikonie pliku index.htm, wybierz z menu kontekstowego polecenie Otwórz za pomocą -> Notatnik).
W linii, gdzie otwieramy sekcję body dopiszemy polecenie „bgcolor” Służy ono do zmiany koloru tła strony.
Pamiętaj o odpowiedniej składni:
<body bgcolor=grey>
Można użyć w tym poleceniu angielskich nazw kolorów, ale lepszym wyjściem będzie skorzystanie z tabeli z kodami szesnastkowymi kolorów:
http://www.kurshtml.edu.pl/html/wykaz_kolorow,kolory.html
Używając zapisu w kodzie HEX nazwę koloru umieszczamy w cudzysłowie:
<body bgcolor="#c2c2c2">
Wybierz jasny kolor tła dla swojej strony.
Zadanie 3
Formatujemy tekst.
Na pewno zauważyliście, że cały tekst wyświetla się w jednej linii, mimo że w Notatniku podzielony został na wiersze. Zatem należy tekst odpowiednio sformatować.
Najpierw sformatuj tekst „Podróże po stolicach Europy” jako nagłówek za pomocą znacznika <h1>…</h1>.
Następnie pozostały tekst zapisz w jednym akapicie za pomocą znacznika <p>…</p>:
Teraz podziel tekst na wiersze za pomocą znacznika <br> (odpowiednik kombinacji klawiszy Shift+Enter w Wordzie – łamanie wiersza), umieszczając go na końcu każdej linii tekstu:
Przykładowo gotowe zadanie powinno wyglądać tak:
UWAGA!
NA RAZIE NIE WYSYŁAJ PLIKU DO SWOJEGO NAUCZYCIELA.
Zadanie dodatkowe
Formatujemy czcionkę.
Wiesz już z podręcznika, jak tekst pogrubić, pochylić, podkreślić. Ale jak zmienić krój czcionki?
Do tego celu służy znacznik span, umożliwia on ustalenie indywidualnego stylu dla fragmentu zadania. Aby zmienić czcionkę tekstu np. na Arial musimy więc dodać znacznik span i ustalić parametry czcionki:
<span style="font-family: Arial; color: white">
Zwróć uwagę na składnię tego polecenia – cudzysłów, średniki, dwukropki.
Zmień wygląd czcionki (krój i kolor), zadbaj, aby tekst był dobrze widoczny na wybranym przez Ciebie kolorze tła.
