Linki

Karta pracy 2017/2018

Adres:
http://plotkarka.eu/KP/linki.html
Autor:
Radosław Kowaluk

Hipertekst

 

W swoim folderze roboczym utwórz dokument linki.html (wykorzystaj metodę kopiuj-wklej) zawierający następujący kod:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Linki</title>
 </head>
 <body>
<header>
 <h1>Tytuł strony</h1>
</header>
<nav>

</nav>
<main>
 <h2>Tytuł rozdziału 1.</h2>
 <p>...</p>
 <br><br><br><br><br><br><br><br>
 <h2>Tytuł rozdziału 2.</h2>
 <p>...</p>
 <br><br><br><br><br><br><br><br>
</main>
 </body>
</html>

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce.

Hipertekst1 i identyfikator elementu2

W elemencie body dopisz kod:

<nav>
 <a href="#link1">Link do rozdziału 1</a>
 <a href="#link2">Link do rozdziału 2</a>
</nav>
...
 <h2 id="link1">Tytuł rozdziału 1.</h2>
...
 <h2 id="link1">Tytuł rozdziału 2.</h2>
...

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce. Sprawdź działanie hiperłączy.

W elemencie body dopisz kod (element a w jednym wierszu):

</main>
<aside>
 <a href="http://plotkarka.eu/PI/html5/linki.html#L"
 target="_blank">Teoria</a>
</aside>
 </body>

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce. Sprawdź działanie hiperłącza.

W elemencie body dopisz kod:

<header id="start">
</aside>
<footer>
 <a href="#start">^</a>
</footer>
 </body>

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce. Sprawdź działanie hiperłącza.

Zapisz pliki ćwiczeniowe.

Zastosuj poznane elementy (wybrane) w swojej stronie lub blogu.

  1. Element <a> - definiujący hiperłącze - był omawiany w karcie Tekst i hiperłącza. Przykład ilustruje zasadę działania hipertekstu w nawigacji po dokumencie. Po kliknięcie hiperłącza (#id) następuje przewinięcie dokumentu do olementu o unikalnym id
  2. Atrybut id - identyfikator elementu strony o wartości nazwy. Identyfikator musi zaczynać się od litery. Po niej mogą się znajdować: cyfry lub inne litery, myślniki, podkreślenia, dwukropki oraz kropki. W nazwach lepiej nie używać: wielkich liter, znaków specjalnych (np.: \ / : * ? " < > |), spacji i polskich liter (ą, ć, ę, ł, ń... itd.).

Linki

Ikona strony

Utwórz w edytorze grafiki plik favicon twojej strony głównej w formacie PNG w rozmiarze 16 na 16 pikseli.


Wskazówki dla edytora systemowego.

W menu Narzędzia główne wybierz:

W menu Widok wybierz:

Wykonaj ikonę i zapisz w formacie PNG pod nazwą favicon.png.

Definiowanie linku1 (źródło2, typ pliku3 i relacji4 )

W źródle pliku, w elemencie head dopisz kod.

  <title>Linki</title>
  <link rel="icon" href="favicon.png" type="image/png"/>
 </head>

Zapisz dokument i otwórz go w przeglądarce.

Styl strony5

W edytorze utwórz plik style.css (kodowanie UTF-8) zawierający kod:

body {
color: white;
background: black;
}

W źródle pliku linki.html, w elemencie head dopisz kod.

  <link rel="icon" href="favicon.png" type="image/png"/>
  <link rel="stylesheet" href="style.css">
 </head>

Zapisz dokument i otwórz go w przeglądarce. Zmień kolory.

Zapisz pliki ćwiczeniowe.

Zastosuj poznane elementy (wybrane) w swojej stronie lub blogu.

  1. Plik graficzny (np. favicon.png) – ikona strony, najczęściej (obecnie) w formacie PNG, wyświetlany w zakładce, adresie, historii przeglądania.
  2. Element <link> – definiuje relacje pomiędzy odnośnikami.
  3. Atrybut type – definiuje typ elementu w zależności od zastosowania.
  4. Atrybut href – definiuje adres docelowy.
  5. Atrybut rel – definiuje relacje między dokumentem bieżącym a docelowym.
  6. Plik tekstowy (np. style.css) – zawiera definicje CSS, formatujące stronę.