docWykład HTML
download 
Reklamacja Transkrypt
Wykład HTML
Mapy odnośników
Mapa odnośników – grafika ze zdefiniowanymi obszarami aktywnymi, stanowiącymi łącza do różnych
dokumentów (lub do różnych odnośników tego samego dokumentu)
interpretowana po stronie klienta
interpretowana po stronie serwera
Mapy odnośników interpretowane po stronie klienta składają się z trzech części:
zwykłego pliku graficznego w formacie JPEG lub GIF, stanowiącego tło mapy,
ograniczonego znacznikami <map> opisu odwzorowania, zawierającego współrzędne i wskazywany adres
URL dla każdego obszaru aktywnego,
znacznika grafiki <img>, wskazującego na tło mapy i jednocześnie zawierającego w atrybucie usemap
powiązanie z wykorzystywanym odwzorowaniem.
Mapy odnośników interpretowane po stronie serwera składają się z czterech części:
zwykłego pliku graficznego w formacie JPEG lub GIF, stanowiącego tło mapy,
znacznika łącza w dokumencie (<a>), zawierającego adres pliku .map na serwerze (zawiera odwzorowanie)
oraz znacznik <img> z atrybutem ismap
<a href=”ścieżka_do_pliku.map”>
<img src="MapaOdn.jpg" alt="Serwisy informacyjne" ismap>
</a>
pliku definicji odwzorowania (.map), zawierającego współrzędne i wskazywany adres URL dla każdego
obszaru aktywnego (format tego pliku jest zależny od serwera),
działającego na serwerze skryptu CGI (bądź wbudowanej funkcji odwzorowania serwera), który interpretuje
plik .map i wysyła prawidłowy adres URL, odpowiadający klikniętemu punktowi.
Tworzenie mapy odnośników
Na tle wybranej grafiki należy wybrać obszary aktywne:
1.
a)
b)
c)
2.
Współrzędne obszarów zapisać w następującym formacie:
dla prostokąta współrzędne lewego górnego i prawego dolnego narożnika x1,y1,x2,y2
dla koła współrzędne środka koła i jego promienia x, y, r
dla wielokąta kolejne pary współrzędnych dla kolejnych narożników x1, y1, x2, y2, x3, y3,...
Przygotować plik HTML, zawierający informacje o odwzorowaniu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mapa odnośników do serwisów informacyjnych</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
</head>
<body>
<div>
<map name="informacje">
<area shape="circle" coords="78, 123, 34" href="http://onet.pl" alt="onet">
<area shape="rect" coords="318, 86, 421, 134" href="http://www.gazeta.pl"
alt="gazeta">
<area shape="poly" coords="182, 204, 289, 204, 235, 151" href="http://www.wp.pl"
alt="wirtualna polska">
</map>
<img src="MapaOdn.jpg" alt="Serwisy informacyjne" width="488" height="240"
usemap="#informacje" /></div>
</body>
</html>
Iwona Dolińska, WSEI
„Internet i jego usługi”
1
Kaskadowe arkusze stylów
obecnie używana jest wersja CSS2 (ang. Cascading Style Sheets) z 1998 r. (http://www.w3.org/Style/CSS)
pozwalają na wykorzystanie typograficznych stylów i instrukcji w stosunku do elementów strony
gromadzą wszystkie informacje dotyczące prezentacji w jednym wspólnym miejscu
Składnia reguł
selektor {właściwość: wartość}
deklaracja
h1 { color: green; font-size: 12px; font-style: italic; }
p { color: blue }
Dodawanie stylów do dokumentu
Style wewnętrzne
<h1 style=”color: green; font-size: 16px; font-style: italic;”>Ten nagłówek ma swój
własny styl</h1>
<p style=”color: blue”>Dla odmiany ten akapit jest niebieski,</p>
<div style="text-transform: capitalize">a w tej sekcji tekstu każdy wyraz zaczyna się od
wielkiej litery.</div>
Osadzone arkusze stylów
<head>
<style type=text/css>
<!-h1 { color: green; font-size: 12px; font-style: italic; }
p { color: blue }
div { text-transform: capitalize }
-->
</style>
</head>
Zewnętrzne arkusze stylów
<head>
<link rel=”stylesheet” href=”ścieżka/plik.css” type=”text/css”>
</head>
<style type=text/css>
@import url(http://ścieżka/plik.css);
</style>
Arkusze stylów zależne od mediów
<link rel=”stylesheet” href=”ścieżka/wspolny.css” type=”text/css” media=”screen”>
<link rel=”stylesheet” href=”ścieżka/drukow.css” type=”text/css” media=”print”>
<style type=text/css media=”screen”>
p { color: blue }
</style>
<style type=text/css media=” print”>
p { color: black }
</style>
<style type=text/css>
@import url(http://ścieżka/ wspolny.css) screen;
Iwona Dolińska, WSEI
„Internet i jego usługi”
2
@import url(http://ścieżka/ drukow.css) print;
</style>
Dziedziczenie
własności stylów są przekazywane od elementu przodka do każdego zawartego w nim elementu potomnego
style zastosowane do konkretnego elementu przesłaniają (anulują) ustawienia dokonane dla elementów
ustawionych wyżej w hierarchii dokumentu
jeżeli w arkuszu stylów znajdują się dwie równoważne reguły, to zostanie zastosowana ta usytuowana niżej
niektóre ustawienia nie są dziedziczone
Kaskada stylów
Hierarchia instrukcji stylów od najbardziej ogólnych do najbardziej szczegółowych jest następująca:
domyślne ustawienia przeglądarki,
konfiguracja stylów użytkownika (ustawiona w przeglądarce jako arkusz stylów użytkownika),
dołączone zewnętrzne arkusze stylów (w przypadku dołączenia wielu arkuszy stylów polecenia z pliku
ostatnio odczytanego mają pierwszeństwo przed odczytanymi wcześniej),
zaimportowane arkusze stylów (w przypadku dołączenia wielu arkuszy stylów polecenia z pliku ostatnio
odczytanego mają pierwszeństwo przed odczytanymi wcześniej),
osadzone arkusze stylów, tzn. reguły wewnątrz elementu <style> (reguły późniejsze są ważniejsze niż
wcześniejsze),
wewnętrzne informacje stylów (atrybut style elementu).
– wskaźnik wskazujący przeglądarce, że dana reguła nigdy nie może zostać anulowana przez
regułę znajdującą się poniżej
!important
p { color: red !important; }
Tworzenie selektorów
Wybór elementu na podstawie nazwy
h1 { color: green }
h2 { color: green }
p { color: green }
grupa selektorów:
h1, h2, p { color: green }
Wybór elementu na podstawie klasy lub identyfikatora
<h1 class="info">Informacje o produkcie</h1>
<p class="info">Nasz produkt jest najlepszy na świecie! Nic mu nie dorówna!</p>
h1.info { font-size: 18px }
h1.info { color: red }
p.info { color: red}
h1.info { font-size: 18px;
color: red }
p.info { color: red}
.info { color: red }
h1.info { font-size: 18px }
<p id="cena">Ceny są oczywiście konkurencyjne. Nigdzie nie znajdziesz taniej.</p>
#cena { color: blue; font-style: italic }
Wybór elementu na podstawie kontekstu
em { color: red }
wszystkie elementy wyróżnione mają kolor czerwony
li em { color: green }
tekst wyróżniony występujący wewnątrz elementu listy ma kolor zielony
h1 b, h2 b, h2 b { color: olive }
selektory kontekstowe można łączyć w grupy
Iwona Dolińska, WSEI
„Internet i jego usługi”
3
Pseudoselektory
Pseudoelementy first-line i first-letter
div:first-line { letter-spacing: 4pt }
div:first-letter { font-size: 300%; color: fuchsia }
<div>Tekstowi w HTML można nadać <b>pewien domyślny</b>
<i>wygląd</i>. Można użyć <big>trochę większej</big>
lub <small>trochę mniejszej</small> czcionki.</div>
Pseudoklasy, określające stan elementu
a:link { color: fuchsia }
a:visited { color: navy }
a:focus { color: fuchsia }
a:hover { color: aqua }
a:active { color: fuchsia }
Nazwy pseudoklas mają następujące znaczenie:
link oznacza łącza, które nie zostały jeszcze odwiedzone i których użytkownik nie wskazuje kursorem myszy;
visited oznacza łącza, które już kliknął;
focus oznacza łącze, które zostało zaznaczone przy pomocy klawiatury i jest gotowe do aktywacji,
hover oznacza łącze, na które aktualnie wskazuje kursor myszy;
active oznacza łącze, które użytkownik właśnie klika.
Wybieranie elementów na podstawie atrybutów
p[class] { color: aqua }
div[class=”info”] { color: magenta }
Przykład złożonej reguły formatowania stylów
div.works p em:first-letter { color: red }
Określanie wartości długości i kolorów
Właściwości, będące miarami długości, mogą przyjmować wartości w określonych jednostkach miar:
piksel (px), stopień (pt, 1/72 cala), pika (pc, 1/6 cala), em (em, szerokość równa szerokości wielkiej litery M w
aktualnej czcionce), ex (ex, jednosta równa wysokości litery „x”, w praktyce ½ em), cal (in), milimetr (mm),
centymetr (cm).
h2 { line-height: 120% }
Podstawowe nazwy kolorów:
aqua (morski)
gray (szary)
navy (granatowy)
silver (srebrny)
black (czarny)
green (zielony)
olive (oliwkowy)
teal (seledyn)
blue (niebieski)
lime (jasny jaskrawozielony)
purple (purpurowy)
white (biały)
fuchsia (fuksja)
maroon (kasztanowy)
red (czerwony)
yellow (żółty)
Przykłady określania kolorów za pomocą wartości liczbowych RGB:
h1
h1
h1
h1
{
{
{
{
color:
color:
color:
color:
#0000FF }
#00F }
rgb(0, 0, 255) }
rgb(0%, 0%, 100%) }
Źródła:
1. Elizabeth Castro, „HTML 4”, wydanie 3, Wydawnictwo Helion, 2003.
2. Jennifer Niederst, „Tworzenie stron WWW. Almanach”, wydanie 2, Wydawnictwo Helion, 2002.
Iwona Dolińska, WSEI
„Internet i jego usługi”
4
