Temat: Podstawy tworzenia stron internetowych

Transkrypt

Temat: Podstawy tworzenia stron internetowych.
1. Kodowanie dokumentów.
Strony WWW są tworzone za pomocą języka HTML, który posiada określony zestaw
znaczników umieszczanych w nawiasach <> i ich atrybutów. Dokument definiujący stronę WWW jest
zapisywany jako zwykły plik tekstowy z rozszerzeniem htm lub html.
Dokument taki można utworzyć za pomocą najprostszego edytora tekstów, ręcznie dodając
znaczniki. Metoda taka, choć skuteczna, jest jednak uciążliwa. Dlatego na rynku pojawiło się już wiele
specjalizowanych edytorów, które wydatnie ułatwiają konstruowanie dokumentu, wspomagając
wprowadzanie poleceń. Są to zazwyczaj programy klasy shareware, aczkolwiek znajdziemy też sporo
programów komercyjnych i całkowicie bezpłatnych (freeware).
Przykładowe edytory stron WWW:
• Pajączek,
• Tiger98,
• WebEdit,
• HotDog ,
• HotDog ,
• WebEdit WebPager Xpress ,
• HomeSite,
• ezHTML .
2. Struktura dokumentu HTML.
Wszystkie polecenia powinny się znaleźć w pewnych standardowych ramach.
Zostało przyjęte, że dokument HTML zawiera szkielet, który stanowi osnowę dla
wszystkich innych poleceń.
Wygląda to następująco:
<HTML>
<HEAD>informacje nagłówkowe</HEAD>
<BODY>
właściwa treść (ciało) dokumentu
</BODY>
</HTML>
3. Przykładowe znaczniki sekcji HEAD
Między znacznikami <HEAD> i </HEAD> powinno się znaleźć polecenie <TITLE>
</TITLE>.
<HEAD>
<TITLE>Tytuł strony</TITLE>
</HEAD>
Zawarta między tymi znacznikami treść ukaże się w pasku
tytułowym przeglądarki, a nie w dokumencie. Drugim bardzo ważnym elementem
jest informacja o stronie kodowej dokumentu. Zalecane jest stosowanie strony
kodowej ISO-8859-2 (czyli ISO Latin 2). Jest to międzynarodowy standard, a
"przy okazji" także Polska Norma. Powinieneś sporządzać dokument w tym
standardzie i zarazem opatrywać go informacją typu META. Jest ona umieszczana
w ramach znaczników HEAD i wygląda następująco:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
4. Standardowa osnowa dokumentu HTML.
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<TITLE>Tytuł strony</TITLE>
</HEAD>
<BODY>
właściwa treść (ciało) dokumentu
</BODY>
</HTML>
5. Uwagi techniczne dotyczące tworzenia stron WWW.
Używaj dobrych narzędzi. Możesz korzystać z wielu programów darmowych, shareware'owych czy komercyjnych i starannie wybierz najlepszy
dla siebie zestaw. Jeśli nie wiesz, czego używać, zapytaj innych, zajrzyj do czasopism komputerowych, rzuć okiem na strony internetowe (opisy
czy klasyfikacje w serwisach shareware'owych), poproś o informację w grupach dyskusyjnych w Usenecie.
Dobre edytory tekstowe (polskie Pajączek czy Tiger, amerykańskie HomeSite, HotDog, WebEdit) i graficzne (FrontPage 98, FrontPage Express,
NetObjects Fusion).
Stosuj się do standardów. Pamiętaj, że w polskim Internecie przyjęło się używanie polskich znaków w stronie kodowej ISO-8859-2 (ISO Latin 2,
czyli potoczna "izolatka"). Jeśli koniecznie chcesz używać nieformalnego standardu Windows-1250, nikt Ci tego nie zabroni, ale koniecznie podaj
deklarację strony kodowej w nagłówku dokumentu, tak samo zresztą, jak w przypadku standardu ISO. Zwróć uwagę, że ten ostatni standard jest
bardziej uniwersalny. Jeśli opracowałeś wcześniej strony w standardzie Windows, przekonwertuj je - mamy już kilka dobrych polskich narzędzi,
np. Ogonki 97.
Nie nasycaj strony zbyt wielką ilością grafiki. Jeśli wydaje Ci się, że strona wygląda "super" na Twoim lokalnym dysku, tańczy, śpiewa i gada,
przypomnij sobie, że inni muszą ją wczytać z Sieci. Im więcej bajerów - obrazków, wideo, apletów i czego tam jeszcze - tym dłużej to trwa i tym
więcej innych kosztuje. Jeśli przesadzisz, nie będą Cię odwiedzać. Pamiętaj, że w Internecie, jak w życiu, elegancki szary garnitur wygląda
znacznie lepiej niż bajecznie kolorowe łowickie pasiaki. Poza tym świadczy o lepszym guście. Zauważ, jak stonowane bywają strony
opracowywane przez środowiska akademickie, gdzie najbardziej ceni się informację, a nie graficzny sztafaż, czyli "cały ten multimedialny zgiełk".
Jeśli koniecznie chcesz zaprezentować więcej grafiki, nie zaskakuj nią już na stronie głównej. Jeśli dajesz odsyłacz do innej swojej strony, która
jest mocno obciążona obrazkami, zaznacz przy nim, jak wiele kodu trzeba wczytać. Dobrym obyczajem jest uprzedzanie o stronach ważących
powyżej 50 KB. Podobnie, zaznaczaj wielkość plików, do których dajesz bezpośrednie odsyłacze (na przykład do programów czy
zarchiwizowanych dokumentów). Jeśli stosujesz mapy odsyłaczy na grafikach, podawaj także w jakimś miejscu odsyłacze tekstowe. Nie wszystkie
przeglądarki są w stanie zobaczyć mapy graficzne. Ponadto wielu internautów wyłącza wczytywanie grafiki w swoich przeglądarkach, nawet gdy
pracują w graficznym systemie operacyjnym. Chcą w ten sposób przyspieszyć przeglądanie Internetu. Nie pozbawiaj ich szansy obejrzenia Twoich
wiekopomnych dokonań.
Ostrożnie wykorzystuj cudzą grafikę. Bardzo często korzystamy z grafiki, którą znajdziemy na innych stronach. Zanim ją skopiujesz, zastanów
się, czy jej specyfika nie skłoni w pewnym momencie jej autora do interwencji (zdarzyło się już kiedyś, że Corel nakazał jednemu z polskich
webmasterów wycofanie bardzo ciekawego animowanego obrazka). Ale na pewno nikt nie będzie Cię ścigać za wykorzystanie jakiejś ikonki,
bombki czy paska. Jest zresztą mnóstwo darmowych kolekcji w Internecie - na przykład corelowski serwis ClipArtCity oferuje za darmo ponad 100
tysięcy obrazków!.
Podawaj datę aktualizacji serwisu. Twój gość na ogół nie ma czasu na szperanie w serwisie i zastanawianie się, co się właściwie zmieniło. Jeśli
twoja witryna ma kilka stron, podaj datę także przy hiperłączach. A jeśli z powodów estetycznych nie chcesz tego robić, wydziel osobną stroniczkę
pod hasłem "Co nowego?" i opisz tam krótko zmiany i uzupełnienia. Zasłużysz na wdzięczność swoich gości, którzy płacą słone rachunki
telefoniczne za czas połączenia.
Nie bądź anonimowy. Podaj w widocznym miejscu krótką informację o sobie, aby czytelnik wiedział, z kim ma do czynienia. Podaj także
koniecznie adres poczty elektronicznej, aby można się było do Ciebie zwrócić z pytaniem, sprostowaniem czy uwagami. Przypomnij sobie, jaką
irytację wzbudzają w nas anonimowe oferty handlowe opatrzone jedynie numerem skrytki pocztowej.
Wstaw licznik odwiedzin. Liczniki takie oferują usługodwcy internetowi i są one dość obiektywnym miernikiem popularności Twoich stron. Nie
usiłuj jednak oszukiwać innych pracowitym wczytywaniem strony dziesięć razy z rzędu. Oszukasz w ten sposób także sam siebie, gdyż w pewnym
momencie stracisz rozeznanie, na ile wiarygodne są wskazania licznika. Traktuj ten wskaźnik jako cenne narzędzie pomiaru. Uwierz mi, jeśli
serwis jest ciekawy, sam się obroni. Nie sądź, że chwilowy brak zainteresowania to dla Ciebie dyshonor, lecz staraj się ulepszyć swoją ofertę.
Poinformuj innych o swoich stronach. Służy do tego specjalna grupa dyskusyjna pl.comp.www.nowe-strony. Została ona w tym właśnie celu
wydzielona z grupy pl.comp.www, aby nie przeciążać forum dyskusyjnego WWW. Staraj się podawać w nich informacje rzeczowe. Nie krzycz
WIELKIMI LITERAMI !!!!!!, że strona jest genialna, jedyna, niepowtarzalna i koniecznie cały świat musi ją zobaczyć. Wzbudza to na ogół
irytację innych i zgryźliwe uwagi. Zaznacz, jaka jest tematyka Twojego serwisu, czy jest optymalizowany dla jakiejś przeglądarki, jak wielki
materiał trzeba na początku wczytać (tekst, obrazki, ActiveX, aplety). Nie bombarduj wszystkich możliwych grup dyskusyjnych informacjami o
swojej witrynie. Nie wysyłaj także setek listów, jeśli przypadkiem masz dostęp do jakiejś listy wysyłkowej (spamerstwo jest tępione w Internecie).
Najwyżej poinformuj pocztą kilku-kilkunastu swoich znajomych, czego nikt nie będzie Ci miał za złe. Jeszcze raz przypominam - jeśli pokażesz w
Internecie coś ciekawego, wieść o tym rozejdzie się stopniowo sama, jak kręgi na wodzie. Pamiętaj tylko, aby rzucony kamień miał odpowiedni
"ciężar gatunkowy".
Temat: Wybrane elementy stron WWW.
1. Tytuły
W dokumentach często wprowadzamy tytuły. Służy do tego polecenie <Hn> </Hn>. Znak H oznacza header,
natomiast cyfra n to stopień tytułu (mamy ich sześć). Polecenie wprowadzające tytuł stopnia pierwszego składa
się ze znacznika otwierającego <H1> i zamykającego </H1>. Ten drugi zawiera dodatkowo ukośnik (ang.
slash). Większość poleceń zawiera znacznik otwierający i zamykający, aczkolwiek stosuje się też polecenia
zawierające jedynie znacznik otwierający. Niektóre polecenia można używać w obu postaciach, choć coraz
powszechniejsze używanie stylów wymusza ostatnio bardziej rygorystyczne stosowanie znaczników
zamykających (np. akapit).
Podkreślmy od razu, że znaczniki w przeglądarce WWW nie są wyświetlane. Są one jedynie interpretowane,
tzn. pozwalają "w locie" formatować tekst.
Uwaga: Powszechnie używany termin "nagłówek" jest nieco mylący. Aby nie było kłopotu z rozróżnianiem
tytułu i nagłówka dokumentu, przyjmujemy właśnie pojęcie "tytuł". Jest ono zresztą bardziej intuicyjne, gdyż
kojarzy się z tytułami rozdziałów i podrozdziałów w obszernych dokumentach, a taka jest jego istota.
Jak wspomnieliśmy wyżej, dysponujemy sześcioma stopniami tytułów, różniącymi się w przeglądarce
wielkością znaków. Wprowadzamy je za pomocą poleceń H1, H2 itd.
Tytuł stopnia pierwszego
Tytuł stopnia drugiego
Tytuł stopnia trzeciego
Tytuł stopnia czwartego
Tytuł stopnia piątego
Tytuł stopnia szóstego
2. Akapit i wiersz.
Jak wprowadzać do dokumentu "zwykły" tekst? W zasadzie każdy tekst, który nie jest objęty specjalnym
znacznikiem, jest interpretowany jako "masa tekstowa". Gdybyśmy jednak wpisali dłuższy fragment tekstu,
rozdzielając w edytorze akapity za pomocą klawisza Enter, przeglądarka zignoruje znaki końca wierszy i
akapitów i wyświetli jednolity blok tekstu. Aby naprawdę rozdzielić akapity, należy się posłużyć poleceniem
 (P = paragraph), które wstawi interlinie między poszczególne fragmenty tekstu. Zalecamy także
konsekwentne stosowanie znacznika zamykającego .
Przykład:
To jest treść pierwszego akapitu
To jest treść drugiego akapitu
Niekiedy zdarza się, że chcemy przełamać tekst, nie wprowadzając przy tym znaku końca akapitu.
Możemy wówczas zastosować pojedyncze polecenie , które przenosi tekst o jeden wiersz w
dół, choć nie wprowadza dodatkowej interlinii.
To jest pierwszy wiersz 
To jest drugi wiersz 
To jest trzeci wiersz 
To jest czwarty wiersz 
Ponadto polecenie ma jeszcze jedną zaletę. Napisanie kilku kolejnych pozwala
poszerzyć pionowy odstęp między elementami.
3. Pozioma linia.
Następnym, często spotykanym elementem jest pozioma linia, którą wstawiamy za pomocą
polecenia <HR> (ang. horizontal rule). Pozwala ono wyświetlić w dokumencie poziomą linię, na
szerokość całej strony, rozdzielając nią logiczne fragmenty tekstu, dzięki czemu strona jest bardziej
przejrzysta. Zauważ, że w tym dokumencie bloki informacji są rozdzielane właśnie poziomymi
liniami.
4. Wykazy.
Na stronach WWW powszechnie stosuje się wykazy. Są to po prostu systematyczne wyliczenia
jakichś punktów, które w przeciwieństwie do tekstu o charakterze opisowym w skondensowany
sposób prezentują jakąś myśl czy zespół zagadnień. Użytkownicy edytorów tekstów spotykają się z
tym elementem - np. w polskiej wersji edytora Word są one znane pod nazwą list numerowanych i
list wypunktowanych.
Aby utworzyć szkielet wykazu wypunktowanego, należy użyć polecenia <UL> </UL> (ang. unordered
list). W ramach szkieletu znajdą się poszczególne punkty wykazu, które wprowadzamy za pomocą
polecenia <LI>
Dlaczego zajmuję się UFO?
<UL>
<LI>Uważam, że UFO istnieje</LI>
<LI>Uważam, że pozaziemskie cywilizacje mogą nam pomóc</LI>
<LI>Uważam, że należy się przygotować na spotkanie</LI>
</UL>
W efekcie uzyskamy:
•
•
•
Dlaczego zajmuję się UFO?
Uważam, że UFO istnieje
Uważam, że pozaziemskie cywilizacje mogą nam pomóc
Uważam, że należy się przygotować na spotkanie
Jest w zasadzie obojętne, czy użyjemy pojedynczego znacznika <LI>, czy też zastosujemy
dodatkowo znacznik zamykający </LI>. Autorzy edytorów HTML stosują różne konwencje, a wynik w
przeglądarce WWW w obu przypadkach jest identyczny. Generalnie jednak zaleca się zamykanie
znaczników.
Gdy chcemy utworzyć wykaz numerowany, wówczas zamiast <UL> i </UL> możemy zastosować
<OL> i </OL> (ang. ordered list). Uzyskamy wówczas listę numerowaną za pomocą liczebników
arabskich (w dalszej części podręcznika pokażemy inne sposoby numerowania).
1. Uważam, że UFO istnieje
2. Uważam, że pozaziemskie cywilizacje mogą nam pomóc
3. Uważam, że należy się przygotować na spotkanie
5. Atrybuty czcionki.
Aby tekst w przeglądarce nie wyglądał wszędzie tak samo, stosuje się dodatkowe atrybuty czcionki pogrubienie (bold), pochylenie (italic) i podkreślenie (underlined). Atrybuty pozwalają uwypuklić
jakieś fragmenty tekstu, np. nazwy za pomocą kursywy, a ważniejsze pojęcia za pomocą
pogrubienia:
To jest tekst normalny
To jest tekst pogrubiony (bold)
To jest tekst pochylony (italic, kursywa)
To jest tekst podkreślony (underlined)
6. Odsyłacze.
Charakterystyczną cechą Internetu jest obecność na stronach hipertekstowych odsyłaczy do innych
stron, które znajdują się w światowej sieci. W gruncie rzeczy czytelnik dokumentu nie musi wcale
wiedzieć, gdzie znajdują się te strony - ważne jest, aby miał do nich łatwy dostęp. Na tym polega
istota hipertekstu - jakiś temat może być opisany za pomocą stron tworzonych przez różnych
autorów, mieszkających w różnych krajach, nawet często nie znających się wzajemnie. Gdy na
zbudowanych przez nich stronach znajdą się odsyłacze, ich wspólne zainteresowania zostaną
zjednoczone za pomocą hipertekstu, który uczyni te strony jedną całością. Czytelnik jakiegoś
dokumentu będzie po prostu za pomocą kliknięć myszką na odsyłaczach przenosić się do różnych
miejsc w Internecie, skacząc np. z Polski do Japonii, z Japonii do USA, a stamtąd do Francji. Z jego
punktu widzenia jest zupełnie obojętne, gdzie strony się znajdują. Dla niego ważny jest łatwy dostęp
do informacji.
Odsyłacz do innej strony jest tworzony za pomocą polecenia:
<A HREF="adres.strony.internetowej">Jakaś nazwa tej strony</A>
Ukośnik (slash) na końcu adresu wymusza wczytanie strony domyślnej, zazwyczaj o nazwie
index.html (lub index.htm - zależy to od typu serwera WWW).
Uwaga: zalecane jest nadawanie stronie głównej serwisu nazwy index.htm lub index.html. Jest to
powszechnie przyjęta praktyka w Internecie. W ostatnich latach stosuje się także default.htm lub
default.html
Na ekranie przeglądarki jest wyświetlany tekst, który znajduje się między znacznikami <A HREF="...
"> i </A>. Jest on domyślnie wyświetlany na niebiesko z podkreśleniem (możemy to jednak zmienić).
Gdy przesuniemy kursor myszki nad odsyłacz, w pasku stanu przeglądarki zobaczymy kryjący się
pod tekstem adres internetowy. Kliknięcie na nim spowoduje skok do strony.
Zwróćmy uwagę na to, że adres internetowy jest podawany w cudzysłowie. Dla działania odsyłacza
nie jest to wprawdzie absolutnie konieczne, ale wymaga tego formalna poprawność składni. Edytory
HTML na ogół respektują ten wymóg (choć nie wszystkie).
Drugim ważnym odsyłaczem jest adres poczty elektronicznej. Bardzo często autorzy stron, którzy
dysponują przecież zazwyczaj swoim własnym adresem, wstawiają go na stronie, prosząc o uwagi
czytelnika (ale rzadko to czynią autorzy stron z informacjami dla hackerów!). Jest to dobry obyczaj,
który daje czytelnikowi łatwy kontakt z autorem.
Stosujemy tutaj na przykład następujące polecenie:
<A HREF="mailto:[email protected]">Imię i nazwisko</A>
Napis mailto daje sygnał przeglądarce WWW, że ma uruchomić pocztę elektroniczną. Navigator
wywoła swój własny moduł pocztowy Mail, Internet Explorer zaś skorzysta z Outlook Express (albo
np. z Outlook 98, jeśli jest on domyślnym programem pocztowym).
7. Wielkość i kolor czcionki.
To jest czcionka o wielkości 6
Polecenie, które określa wielkość czcionki, ma następującą postać:
Tekst objęty definicją
x = 1...7
Gdy w taki właśnie sposób definiujemy wielkość czcionki, nadajemy jej wartość absolutną. Możemy
jednak także nadać wartość relatywną, czyli względną, podając wielkość zmiany. Skoro czcionka
standardowa ma wielkość 3, możemy dodać do niej co najwyżej 4 jednostki lub odjąć co najwyżej 2.
Gdyby czcionka podstawowa miała wielkość 1, moglibyśmy dodać 6, ale już niczego nie moglibyśmy
odejmować.
Tekst objęty definicją 
Tekst objęty definicją 
x = 1...6
Gdy jakiś fragment tekstu obejmiemy definicją , będzie on miał wielkość
5, gdyż dodajemy 2 jednostki do wielkości podstawowej. Gdy użyjemy polecenia 
, tekst będzie miał wielkość 2.
W ten sposób możemy manipulować wysokością czcionki w tekście, uwypuklając jakieś fragmenty.
Jest to wygodne, gdyż możemy zmienić wielkość czcionki wewnątrz akapitu, do czego nie nadaje się
definicja tytułu.
W analogiczny sposób możemy zmieniać kolor czcionki. Posługujemy się tutaj poleceniem:
Tekst objęty poleceniem
Kolory możemy definiować w postaci tradycyjnej, a więc za pomocą wartości szesnastkowych (np.
kolor biały ma wartość #FFFFFF, a czarny #000000), albo za pomocą ich nazw. Wszystkie
popularne przeglądarki akceptują wartości heksadecymalne (w formacie RRGGBB, gdzie RR składowa czerwona, GG - składowa zielona, BB - składowa niebieska), aczkolwiek ich
wprowadzanie wymaga wspomagania w edytorze HTML. Niektóre z edytorów pozwalają wybrać
barwę za pomocą suwaków i wstawiają odpowiedni kod do edytora. Można się również posłużyć
specjalnym programem do wyznaczania tych wartości - w Internecie można znaleźć kilka robiących
to aplikacji.
Internet Explorer i Netscape Navigator interpretują również nazwy kolorów. Początkowo można było
się posłużyć jedną z 16 barw, zaś ostatnio paleta rozszerzyła się do 256 kolorów. Najczęściej jednak
przy definiowaniu koloru tekstu wystarczy 16 barw i można przyjąć, że posługiwanie się nazwami
kolorów jest najwygodniejszą metodą ich definiowania, ponieważ przeglądarki Netscape i Microsoftu
zdominowały rynek, więc znaczna część czytelników strony będzie widziała właściwe kolory
8. Grafika na stronie.
Strony WWW zawierają zwykle grafikę, która bardzo urozmaica ich czytanie - pod warunkiem
oczywiście, że korzystamy z graficznego systemu operacyjnego. Niektórzy autorzy stron tak się
zatracają w ozdabianiu stron, że zapominają o przepustowości łączy internetowych. Gdy czytelnik
strony nie wyłączy w swojej przeglądarce funkcji wczytywania grafiki, może stracić dużo czasu i
nerwów, oczekując na wczytanie tak spreparowanej strony. Na szczęście za następnym razem
przeglądarka sięga do katalogu cache, gdzie gromadzą się grafiki z Internetu, co znacznie
przyspieszy transmisję zawartości strony. Niemniej jednak warto z umiarem stosować graficzne
ozdobniki, zwłaszcza gdy nie niosą żadnych istotnych treści.
Na stronach WWW są stosowane dwa podstawowe formaty bitowych plików graficznych - GIF i JPG
(JPEG) - które są z założenia skompresowane (często nawet dziesięciokrotnie w stosunku do innych
popularnych formatów), a więc zajmują znacznie mniej miejsca grafiki w innych formatach. Dzięki
temu transmisja strony trwa znacznie krócej.
Grafikę możemy wprowadzić za pomocą polecenia:
<IMG SRC="nazwa_pliku">
Temat: Zastosowanie styli na stronach www.
CSS (ang. Cascading Style Sheets, kaskadowe arkusze stylów) jest językiem służącym do opisu sposobu
prezentowania informacji na stronach WWW, który został opracowany przez organizację W3C. kurs css
Arkusz CSS to lista dyrektyw (tzw. reguł) ustalających w jaki sposób ma być renderowany przez przeglądarkę
tekst znajdujący się wewnątrz danego elementu HTML/XHTML/XML. Ustalać można w ten sposób wszystkie
właściwości odpowiedzialne za wygląd elementów HTML, takie jak rodzaj czcionki tekstu, kolor, marginesy,
odstęp międzywierszowy itp., a nawet pozycję danego elementu względem innych elementów lub całej strony.
Do czego służą klasy
Klasy stworzone są po to, by móc obiektom tego samego typu w treści jednej strony przypisywać inne
właściwości. Dodatkowo dzięki klasom można zaoszczędzić sporo miejsca, gdyż właściwości konkretnego
znacznika opisujemy tylko raz, a potem jedynie się do niego odnosimy.
Przykład:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tytuł strony</title>
<style type="text/css">
p.klasa1 {color:red; text-decoration:overline;}
p.klasa2 {color:blue; text-decoration:underline;}
</style>
</head>
<body>
Oto wyniki:
To jest tekst określony klasą pierwszą
To jest tekst określony klasą drugą
</body>
</html>
Klasy tworzone są zawsze tak samo wg schematu:
selektor.nazwaklasy {właściwość : wartość;}
a żeby na stronie odwołać się do klasy należy obok selectora [czyli wewnątrz tagu] wpisać wg schematu:
<selektor class="nazwaklasy">xxx</selektor>
Pseudoklasy
Czasemi istnieje potrzeba, aby jakiś element strony reagował na zachowanie użytkownika, lub był inny w
zależności od swojego umiejscowienia itp. Za idealny przykład mogą tu posłużyć linki - po najechaniu,
kliknięciu, odwiedzeniu, zmieniają swój wygląd. Do tego służą właśnie pseudoklasy. Trzymajmy się dalej
naszego przykładu linków. Odnośniki mają kilka właściwości, które mogą być opisywane jako osobne znaczniki
i wywoływane stosownie do akcji wywołanej przez internautę.
Przykład:
A:active {color:blue;}
A:link {color:black;}
A:visited {color:green;}
A:hover {color:red; text-decoration:underline;}
Aby móc stworzyć kilka różnych wzorców hiperłączy na stronie możemy użyć klas i pseudoklas wg schematu i
umieścić w miejscu, w którym opisujemy style.
selektor.nazwaklasy:pseudoklasa {właściwość: wartość;}
czyli przykładowo:
a.nazwaklasy:hover { color:silver;}
Dziedziczenie
Dzięki dziedziczeniu webmaster może skrócić swoja pracą o nawet kilkadziesiąt procent bez żadnego
uszczerbku na wyglądzie strony. Dziedziczenie polega na przejmowaniu części cech od "starszego" - zupełnie
jak u ludzi.
p {color: blue;}
p.klasa1 {font-size:8 pt;}
p.klasa2 {font-size:14 pt; }
p.klasa3 {color:red; font-size:8 pt;}
nie musisz w każdym opisywać tej samej cechy, starczy, że opiszej ją raz w obiekcie głównym. Wtedy każde
dziecko zawiarać będzie automatycznie cechy opisane w obiekcie rodzicu.
czyli przykładowo:
Ten txt jest niebieski
Ten txt jest niebieski (odziedziczony kolor) i ma rozmiar 8pt (z klasy)
Ten txt jest niebieski (odziedziczony kolor) i ma rozmiar 14pt (z klasy)
Ten txt jest czerowny (zerwane więzi:-)) i ma rozmiar 8pt (z klasy obydwa)
Łączenie CSS z HTML-em
Istnieje kilka podstawowych metod łaczenia CSS z HTML-em. W tej lekcji opiszę po krótce każdy z nich.
W treści strony:
Jest to najdłuższy i najgorszy sposób, ponieważ nie można wtedy tworzyć klas - a więc za każdym razem trzeba
od nowa opisywać właściwości kolejnego obiektu, nawet kiedy jest identyczny do poprzedniego.
Przykład:
<html>
<head><title>Tytuł strony</title></head>
<body>

To jest przykładowy text
</body>
<html>
W nagłównku strony:
Jest to już sposób lepszy od poprzedniego. Pozwala na wielokrotne wykorzytanie fragmentu kodu, ale tylko w
obrębie danej strony. Cały opis dla poszczególnych obiektów umieszczamy w sekcji head między znacznikami
<style type="text/css"> </style>
Przykład:
<html>
<head>
<title>Tytuł strony
<style type="text/css">
p.klasa1 { właściwość1:wartość; właściwość2:wartość;} // 1
table {właściwość1:wartość; właściwość2: wartość;} // 2
span.gorne {właściwość1:wartość; właściwość2: wartość;} // 3
</style>
</head>
<body>
To jest przykładowy text // 4
<table> // 5
<tr>
<td> ... </td>
</tr>
</table>
To jest fragment textu // 6
</body>
</html>
W osobnym pliku:
Jest to najlepszy i najpopularniejszy sposób łączenia htm z css. Aby móc skorzystać z tej metody należy w jakiś
sposób poinformować przeglądarkę z jakiego pliku ma czytać. Wszystko dzieje się w sekcji head:
Przykład:
<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="plikstyli.css" type="text/css" /
</head>
<body>
W tym miejscu umieszczasz treść strony. Możesz skorzystać ze wszystkich klas opisanych w pliku 'plikstyli.css'.
</body>
</html>

Temat: Podstawy tworzenia stron internetowych

Transkrypt

Podobne dokumenty

i-lekcja

Wprowadzenie do języka html

Buty narciarskie HEAD EZON ht 5.0

HTML

Źródła - strony WWW

01 Osadzanie skryptow PHP w dokumentach HTML

Broszura informacyjna do ściągnięcia