Matura - Internet

Hiperłącze (ang. link) jest elementem strony, który wskazuje inną stronę lub inny plik w Internecie. Uaktywnienie hiperłącza następuje po kliknięciu lewym przyciskiem myszki w element objęty hiperłączem. Po uaktywnieniu zostanie załadowany i wyświetlony wskazany plik (jeśli twoja przeglądarka potrafi obsłużyć ten plik, jeśli nie, to plik zostaje najczęściej załadowany do katalogu Pobrane i stamtąd można go uruchomić przy pomocy odpowiedniej aplikacji). Hiperłącze może też wskazywać inne miejsce strony WWW zawierającej hiperłącze. W takim przypadku kliknięcie w hiperłącze powoduje przewinięcie strony do wskazanego miejsca.

Uruchom Expression Web 4. Jeśli w aplikacji jest otwarta jakaś witryna, zamknij ją przy pomocy opcji menu

Site → Close

Utwórz nową witrynę z pustą stroną, zmień nazwę pliku strony na index.html i dodaj tytuł: Hiperłącza:

Załaduj stronę index.html do edytora i we własnościach strony ustaw język polski.

Zapisz stronę w witrynie (Ctrl+S).

Przejdź do widoku witryny (zakładka Site View) i utwórz nowy katalog o nazwie images (kliknij prawym przyciskiem muszki w puste miejsce pod index.html i z menu kontekstowego wybierz opcję New → Folder, a następnie nazwij katalog images):

Katalog możesz również utworzyć klikając w ikonę żółtej teczuszki w prawym górnym rogu okna widoku witryny:

Utwórz w ten sposób drugi katalog o nazwie files (pliki) i kliknij w Name (nazwa u góry kolumny)  (uporządkuje to alfabetycznie pliki i katalogi w widoku witryny):

Poniżej masz trzy obrazy. Skopiuj je do katalogu images następująco:

• Kliknij prawym przyciskiem myszki pierwszy obraz i wybierz z menu kontekstowego opcję: Kopiuj obraz. Obraz zostanie skopiowany do schowka.
• Przejdź do Expression Web na zakładkę Site View.
• Kliknij prawym przyciskiem myszki katalog images i z menu kontekstowego wybierz opcję Paste. Obraz w schowku zostanie skopiowany do katalogu images.
• Postąp podobnie z obrazem drugim i trzecim.
• Otwórz katalog images i zmień nazwy plików na o1.jpg, o2.jpg i o2.jpg (klikasz w nazwę pliku, aby go wybrać, po czym naciskasz klawisz F2 i zmieniasz nazwę i zatwierdzasz zmianę klawiszem Enter). Katalog powinien wyglądać następująco:

• Wróć do katalogu głównego witryny klikając ostatnią ikonę u góry okna po prawej stronie (teczka katalogu ze strzałką).

Obrazy do skopiowania do katalogu images:

Teraz do katalogu files skopiujemy trzy poniższe pliki następująco:

• Wskaż kursorem myszki plik i kliknij go prawym przyciskiem. Z menu kontekstowego wybierz opcję Zapisz element docelowy jako...
• Gdy pojawi się okienko zapisu, przejdź do katalogu files w twojej witrynie i kliknij w przycisk Zapisz.
• Gdy zapiszesz wszystkie trzy pliki, wróć do Expression Web. Otwórz katalog files i zmień nazwy plików odpowiednio na: p1.docx, p2.xls i p3.txt (nie zmieniaj rozszerzeń nazw plików):

Pliki do skopiowania do katalogu files:

Plik Word

Plik Excel

Plik tekstowy

Mamy już wszystko do utworzenia strony. Wróć na zakładkę index.html. Przekopiuj na stronę poniższy tekst:

Hiperłącza do plików graficznych:

Obraz nr 1
Obraz nr 2
Obraz nr 3

Hiperłącza do pozostałych plików:

Plik edytora tekstu Microsoft Word
Plik arkusza kalkulacyjnego Microsoft Excel
Plik tekstowy

Kliknij w pierwszy wiersz Hiperłącza do plików graficznych: (nie musisz go zaznaczać, wystarczy, aby w tym wierszu został umieszczony kursor). U góry w przyborniku zmień styl Paragraph (akapit) na Heading 2 (nagłówek drugiego poziomu), to samo zrób z drugim tekstem Hiperłącza do pozostałych plików:.

Zaznacz lewym przyciskiem myszki tekst: Obraz nr 1. Następnie kliknij w przedostatnią ikonę na pasku narzędziowym (kula ziemska z ogniwami łańcucha : hiperłącze po angielsku to link, czyli ogniwo):

Możesz również nacisnąć klawisze Ctrl+K.

Pojawi się okienko dialogowe wstawiania hiperłącza:

W okienku tym po lewej stronie mamy rodzaj hiperłącza (Link to = łącze do). W tym wypadku chcemy, aby hiperłącze wskazywało określony plik, zatem powinna być wybrana opcja pierwsza: Existing File or Web Page (istniejący plik lub strona WWW).

W centralnym obszarze okienka jest bieżący katalog witryny. Powinna być zaznaczona opcja pierwsza: Current Folder (bieżący katalog). Pierwszy link ma wskazywać na obrazek o1.jpg, który umieściliśmy w katalogu images. Kliknij zatem dwukrotnie lewym przyciskiem myszki w katalog images, a następnie w plik o1.jpg.

Kliknij w przycisk Target Frame... (ramka docelowa) i wybierz opcję New Window (nowe okno).

Spowoduje to, iż po kliknięciu w link obrazek zostanie załadowany na nowej zakładce w przeglądarce. Inaczej zastąpiłby bieżąco wyświetlaną stronę. Zatwierdź okienka przyciskami OK. Link jest gotowy:

Hiperłącza standardowo wyświetlane są tekstem w kolorze niebieskim i z podkreśleniem. Można to zmienić stylami, co zrobimy dalej w tym rozdziale.

W podobny sposób utwórz hiperłącza na dwóch pozostałych tekstach:

Obraz nr 2 → o2.jpg
Obraz nr 3 → o3.jpg

Przełącz edytor w tryb kodu i zlokalizuj hiperłącza. Hiperłącze używa znacznika <a...>tekst</a>. Wewnątrz znacznika zdefiniowane są parametry hiperłącza.

Zapisz stronę w witrynie i użyj przycisku przeglądania w przeglądarce:

Sprawdź, czy po kliknięciu hiperłącza ładowane są właściwe obrazki oraz czy są one ładowane na osobnych zakładkach.

Teraz utworzymy hiperłącza do pozostałych plików. W trybie Design zaznacz lewym przyciskiem myszki tekst: "Plik edytora tekstu Microsoft Word", a następnie naciśnij klawisze Ctrl+K. Pojawi się okienko wstawiania hiperłącza. Robimy to dokładnie tak samo, jak przy plikach graficznych. Otwierasz katalog files i wybierasz plik p1.docx.

Zanim zatwierdzisz okienko, kliknij w przycisk Target Frame... i wybierz opcję New Window:

Teraz zatwierdź okienka przyciskami OK. Link został utworzony. Tak samo zrób z pozostałymi hiperłączami:

Zapisz stronę w witrynie. Uruchom panel XAMPP. Włącz serwer Filezilla i prześlij zawartość witryny poprzez FTP do katalogu htdocs serwera Apache przy pomocy Eksploratora Plików. Uruchom serwer Apache i w przeglądarce wpisz adres localhost. Sprawdź działanie wszystkich hiperłącz.

Do zapamiętania:

• Co to jest hiperłącze?
• Tworzenie hiperłącza.

Standardowo hiperłącza wyświetlane są z podkreśleniem w kolorze niebieskim (jeśli hiperłącze nie zostało wykorzystane) lub bordowym (gdy użytkownik już kliknął w hiperłącze). Przy pomocy stylów można to zmienić. Utworzymy dla poprzedniej witryny arkusz stylów. Uruchom Expression Web i otwórz witrynę w5 (jeśli nie jest już otwarta). Z menu wybierz opcję:

File → New → CSS

W edytorze zostanie utworzony nowy plik arkusza. Musisz go zapisać w katalogu witryny. Naciśnij klawisze Ctrl+S, po czym zmień nazwę pliku na style.css.

Łączymy plik arkusza ze stroną index.html. Przejdz na zakładkę Site View i załaduj do edytora plik index.html.

W panelu Apply Styles kliknij opcję Attach Style Sheet (dołącz arkusz stylów). W okienku dialogowym, które się pojawi, wpisz w polu URL nazwę pliku arkusza stylów: style.css:

Zapisz plik index.html w katalogu witryny (Ctrl+S).

Zatwierdź okno przyciskiem OK.

Teraz przechodzimy w edytorze na zakładkę style.css. W arkuszu stylów można przedefiniować każdy znacznik HTML. Tak właśnie zrobimy ze znacznikiem <a>, który wprowadza hiperłącze na stronie. W panelu Apply Styles kliknij w New Style... . Na ekranie pojawi się znane ci okno definiowania stylu. W polu Selector kliknij strzałkę w dół. Pojawi się lista znaczników, których styl możesz zdefiniować:

U samej góry listy mamy znacznik <a> wraz z czterema jego stanami:

Każdy z tych stanów można sformatować stylami. Ważna jest kolejność definiowania, taka jak podana wyżej. Kliknij w stan a:link. Teraz wybierz dla tego stanu odpowiedni styl, np. zmień kolor czcionki i jako text-decoration wybierz none:

Zatwierdź okno przyciskiem OK. W arkuszu stylów pojawi się definicja:

Styl tex-decoration określa ozdobniki tekstu. Jeśli wybierzesz none, to tekst będzie bez ozdobników.

Teraz w podobny sposób definiujemy pozostałe stany. W panelu Apply Styles klikasz w New Style... . W oknie dialogowym New Style jako Selector wybierasz z listy stany znacznika <a> zgodnie z podaną wyżej kolejnością i określasz dla nich odpowiednie style: Dekorację tekstu none użyj we wszystkich stanach, za wyjątkiem a:hover, w którym to wybierz underline. Gdy kursor myszki wskaże hiperłącze, to zostanie ono podkreślone, co nada stronie dynamiki.

Zapisz arkusz stylów w katalogu witryny, przejdź na zakładkę index.html i uruchom podgląd w przeglądarce.

Do zapamiętania:

• Stany znacznika <a>.
• Definiowanie stylu dla znacznika.
• Prawidłowa kolejność definicji stanów znacznika <a>.