Temat 43. Tworzenie łączy hipertekstowych, podstron oraz innych elementów z wykorzystaniem języka HTML
Poniżej znajduje się fragment tematu. Z pełną wersją zapoznasz się w podręczniku Informatyka 1-3.
Wszelkie prawa zastrzeżone. Wszystkie treści na stronie dlaucznia.migra.pl chronione są prawami autorskimi. Dowiedz się więcej.
- Czym charakteryzuje się język znaczników HTML?
- Czym są hiperłącza?
1. Tworzenie łączy hipertekstowych
Przykład 1. Tworzenie hiperłączy
<a href="example.html">Dalej</a>
Po kliknięciu tekstu Dalej w oknie przeglądarki zostanie wyświetlona zawartość pliku index2.html.
<a href="https://www.gov.pl/web/edukacja" target="_blank">Ministerstwo Edukacji i Nauki</a>
Po kliknięciu tekstu Ministerstwo Edukacji i Nauki otworzy się nowe okno (nowa karta) przeglądarki, w którym zostanie wyświetlona strona Ministerstwa Edukacji Narodowej.
<a href="example.html"><img src="rys.gif"></a>
Aktywowanie hiperłącza następuje poprzez kliknięcie rysunku rys.gif.
2. Tworzenie podstrony
Ćwiczenie 1. Tworzymy podstronę i dodajemy hiperłącze do strony głównej
- Utwórz w programie Notepad++ podstronę o wybranej wyspie, np. Lanzarote. Umieść na stronie w nagłówku tytuł, a pod nim trzy zdania opisujące wyspę (możesz utworzyć trzy akapity lub zastosować listę).
Pobierz T43_c1_lanzarote.html - Zapisz podstronę w pliku pod nazwą lanzarote.html w folderze Strona.
- Na stronie głównej umieść hiperłącze na nazwie „Lanzarote”, prowadzące do podstrony lanzarote.html, a na podstronie – w lewym górnym rogu ikonę z linkiem powrotu do strony głównej.
Pobierz T43_c1_index.html
Pobierz T43_c1_home.jpg
Przed wykorzystaniem plików, zapisz je odpowiednio pod nazwami: indeks.html i home.jpg. - Zapisz obydwa pliki: stronę główną i podstronę. Odśwież stronę w przeglądarce. Sprawdź poprawność działania hiperłączy.
3. Wstawianie obrazów
Znacznik ten nie ma postaci zamykającej.
Na przykład: <img src="zdjecie.jpg">
Ćwiczenie 2. Dodajemy obrazy do podstrony
Zdjęcia:
Pobierz T43_c2_Lanzarote1.jpg
Pobierz T43_c2_Lanzarote2.jpg
Przed wykorzystaniem plików, zapisz je odpowiednio pod nazwami: Lanzarote.jpg i Lanzarote2.jpg.
4. Wstawianie tabel
Przykład 2. Tworzenie tabeli
<tableborder="1">
<tr>
<td>Wiersz 1, komórka 1</td>
<td>Wiersz 1, komórka 2</td>
</tr>
<tr>
<td>Wiersz 2, komórka 1</td>
<td>Wiersz 2, komórka 2</td>
</tr>
</table> | Wiersz 1, komórka 1 | Wiersz 1, komórka 2 |
| Wiersz 2, komórka 1 | Wiersz 2, komórka 2 |
Ćwiczenie 3. Dodajemy tabelę do podstrony
5. Stosowanie kolorów
Wielu elementom strony WWW można nadawać odrębne kolory. Kolor można określić albo za pomocą angielskiej nazwy, albo podając jego wartość w systemie RGB.
Przykład 3. Stosowanie kolorów
<font color="red">czerwony tekst</font> <font color="#ff0000">czerwony tekst</font> Ćwiczenie 4. Stosujemy kolory na stronie
Plik lanzarote.html zapisany w ćwiczeniu 3.
Przydatne linki
Program Notepad++
https://notepad-plus-plus.org/downloads/
Podziel się swoimi sugestiami do tego tematu
Cały czas się rozwijamy i zależy nam, aby treści dostosować do oczekiwań nauczycieli i uczniów. Masz sugestię do tego tematu? Napisz do nas:
