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.

 
Warto powtórzyć
  1. Czym charakteryzuje się język znaczników HTML?
  2. 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.

Dalej <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.

Ministerstwo Edukacji i Nauki <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

  1. 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 lanzarote.html
  2. Zapisz podstronę w pliku pod nazwą lanzarote.html w folderze Strona.
  3. 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 index.html
    Pobierz home.jpg
  4. Zapisz obydwa pliki: stronę główną i podstronę. Odśwież stronę w przeglądarce. Sprawdź poprawność działania hiperłączy.

3. Wstawianie obrazów

Aby umieścić na stronie rysunek, należy zastosować znacznik <img src="źródło_pliku">.
Znacznik ten nie ma postaci zamykającej.
Na przykład: <img src="zdjecie.jpg">

Ćwiczenie 2. Dodajemy obrazy do podstrony

Wykonaj ćwiczenie zgodnie z treścią w podręczniku. Plik lanzarote.html zapisany w ćwiczeniu 1.
Zdjęcia:

Pobierz Lanzarote1.jpg
Pobierz Lanzarote2.jpg

4. Wstawianie tabel

Przykład 2. Tworzenie tabeli

Utworzymy tabelę składającą się z dwóch wierszy – każdy z dwóch komórek.
<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

Wykonaj ćwiczenie zgodnie z treścią w podręczniku. Plik lanzarote.html zapisany w ćwiczeniu 2.

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> czerwony tekst <font color="#ff0000">czerwony tekst</font> czerwony tekst

Ćwiczenie 4. Stosujemy kolory na stronie

Wykonaj ćwiczenie zgodnie z treścią w podręczniku. Plik index.html zapisany w ćwiczeniu 1.
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:

Jestem:




Wyrażam zgodę na przesyłanie pocztą elektroniczną informacji o konferencjach i szkoleniach, nowych produktach i usługach, promocjach oraz innych informacji marketingowych.

Wyrażam zgodę na przetwarzanie moich danych osobowych, w celu świadczenia usług na stronie wydawnictwa przez MIGRA sp. z o.o., Wrocław, ul. Świeradowska 51-57 (REGON: 932280050) zgodnie z europejskim rozporządzeniem o ochronie danych osobowych z dnia 27 kwietnia 2016 r. (Dz. Urz. UE L nr 119, str. 1) oraz ustawą z dnia 18 lipca 2002 r. o świadczeniu usług drogą elektroniczną (Dz.U. 2002 nr 144 poz. 1204 z zm.)

Twoja książka

Informatyka 1-3. Podręcznik dla szkół ponadpodstawowych. Zakres podstawowy.

Zobacz również
Temat 42.

Dołącz do nas
Kontakt
Migra Sp. z o.o.
ul. Świeradowska 51/57
50-559 Wrocław

tel. 71 75 06 230
faks 71 75 06 235
biuro@migra.pl
www.migra.pl
Kapitał zakładowy: 80000 zł
NIP: 896-12-85-858
REGON: 932280050
KRS: 0000104198
Sąd Rejonowy dla Wrocławia-Fabryczna we Wrocławiu, VI Wydział Gospodarczy Krajowego Rejestru Sądowego
Migra Sp. z o.o.
ul. Świeradowska 51/57
50-559 Wrocław

tel. 71 75 06 230
faks 71 75 06 235
biuro@migra.pl
www.migra.pl
Dla nauczyciela
Materiały metodyczne (m.in. scenariusze lekcji, sprawdziany, rozwiązania zadań)
Pomoce dla nauczyciela
Copyright © Migra