1 Elementy XHTML Patrycja Jędrzejewska

2 Elementy ogólne div i span  div -> element blokowy  span -> element liniowy

3  Element div może zawierać dowolne elementy blokowe i liniowe. Witaj Wyliczamy Raz Dwa Trzy

4  Element span może natomiast zawierać dowolne elementy tekstowe, ale nie może zawierać elementów blokowych. Lorem ipsum dolor sit amet. Curabitur non turpis quis felis placerat  Pierwszy element span zawiera wyłącznie tekst, a drugi zawiera elementy em oraz span.

5 Używanie div i span w połączeniu z klasami i identyfikatorami  W połączeniu z klasami i identyfikatorami elementy div i span umożliwiają jak gdyby definiowanie nowych elementów.  Wprawdzie zbiór elementów języka XHTML jest zamknięty (nie można dodawać nowych elementów, np. … ), jednak stosując elementy ogólne, można to ograniczenie w pewnym stopniu ominąć.  Jeśli chcemy wprowadzić element przeznaczony na rozdział, możemy użyć elementu div klasy rozdział: Lorem ipsum…  Styl tak przygotowanego elementu zdefiniujemy stosując selektor: div.rozdzial { font-family: Georgia; }

6  Element div klasy rozdzial jest elementem blokowym- możemy w nim zawrzeć inne elementy blokowe oraz tekstowe Tytuł rozdziału Lorem ipsum… Lorem ipsum…

7  Stosując selektory potomne, można znacznie zmniejszyć liczbę potrzebnych klas i identyfikatorów w kodzie XHTML. Elementy h1 oraz zwykłe akapity p zawarte w rozdziale (czyli wewnątrz elementu div klasy rozdzial ) nie muszą mieć klasy ani identyfikatora. Można się do nich odwoływać selektorami div.rozdzial h1 { } div.rozdzial p.wprowadzenie { } div.rozdzial p { } lub nawet.rozdzial h1 { }.rozdzial.wprowadzenie { }.rozdzial p { } Style te będą modyfikowały wyłącznie te nagłówki h1 oraz akapity p, które występują wewnątrz elementu div klasy rozdzial (selektor div.rozdzial h1 ) lub wewnątrz dowolnego innego elementu klasy rozdzial (selektor.rozdzial h1 ).

8  Podobnie możemy wprowadzić element span klasy filename do oznaczania nazw plików. W pliku funkcje.php zdefiniowana jest funkcja…  Styl takiego elementu ustalimy selektorem span.filename { }

9  Definiowanie struktury oraz układu całej strony WWW odbywa się głównie w oparciu o element div  Tworzenie skomplikowanych i atrakcyjnych graficznie witryn WWW w zasadniczej części polega na: 1.Definiowaniu struktury dokumentu przy użyciu elementu div (opatrzonego klasami i identyfikatorami) 2.Ustalaniu sposobu i miejsca wyświetlania poszczególnych elementów div w oknie przeglądarki.

10 Tekst- elementy frazowe  Są to elementy liniowe, którymi oznaczamy pojedyncze wyrazy, skróty czy krótkie zwroty.

11 em, strong  Służą do uwypuklania fragmentu ( strong jest silniejszym uwypukleniem) dfn  Jest przeznaczony do oznaczania definiowanego terminu, np. Znacznik to napis otoczony znakami. code  Oznaczanie fragmentów kodów komputerowych, np.

12 samp  Przeznaczony do oznaczania tekstów, które są drukowane przez programy, np. …po wydaniu polecenia ftp na konsoli ujrzysz monit ftp> … cite  Oznaczenie cytowanego źródła W książce Zen stosowania CSS znajdziemy uwagę, że…

13 Tekst- cytaty  Elementy q oraz blockquote służą do umieszczania w tekście cytatów.  Element q jest elementem liniowym, a blockquote – blokowym.  Podstawowe użycie elementu q ma postać: Jak podaje Nowy słownik poprawnej polszczyzny przecinek jest znakiem oddzielającym mniejsze całości składniowe.  Cytat taki jest wyświetlany w bieżącej linii, bez eksponowania.  Specyfikacja języka HTML stwierdza, że nie należy umieszczać znaków cudzysłowu wewnątrz elementu q, gdyż cudzysłów ten powinien zostać automatycznie dodany przez przeglądarkę.

14  Cytaty w kliku językach: jabłko apple pomme  Cytaty tak przygotowane będą zawierały cudzysłowy zgodne z językiem cytatu.

15  Wykorzystując cytaty blokowe blockquote treść musimy ująć w akapit: Visual user agents must ensure that the content of the Q element is rendered with deliminting quotation maks. Authors should not put quotation marks at the beginning and end of the content of a Q element.  Wewnątrz blockquote może pojawić się kilka akapitów.

16 Listy  Lista nieuporządkowana– elementy ul (unordered list) oraz li ( list item ) Ala Ola Jola Ćwiczenie Przygotuj stronę WWW, która w formie listy nieuporządkowanej przedstawi nazwy wszystkich kontynentów.

17  Lista numerowana – elementy ol (ordered list) oraz li Jurek Wacek Adam Ćwiczenie Przygotuj stronę WWW, która w formie listy uporządkowanej przedstawi nazwy polskich samochodów produkowanych w czasach PRL. Jelcz, Nysa, Polski Fiat, Star, Syrena, Tarpan, Warszawa, Żuk

18  Lista definicji – pojedyncza pozycja listy składa się z definiowanego terminu dt (definition term) oraz definicji dd, całość jest zawarta w elemencie dl (definition list) cat kot dog pies horse koń Ćwiczenie Przygotuj stronę WWW, która w formie listy definicji wyjaśni rolę poszczególnych bóst starożytnej Grecji. Zeus, Posejdon, Hades, Hera

19 Zagnieżdżanie list Rozdział pierwszy Od czego zacząć? Początek historii Nasi bohaterowie …

20 Ćwiczenie Przygotuj stronę WWW, która zaprezentuje w formie dwupoziomowej listy nieuporządkowanej dzikie zwierzęta występujące w Polsce. W zestawieniu uwzględnij co najmniej: trzy ssaki, trzy ptaki, trzy gady, trzy płazy.

21 ssaki niedźwiedź lis wilk ptaki żuraw czapla orzeł bielik

22 Właściwości CSS list  list-style-type – typ numeracji lub wypunktowania  list-style-image – symbol wypunktowania  list-style-position – położenie symbolu wypunktowania  list-style – właściwość łączna, pozwalająca na ustalenie trzech powyższych cech

23 list-style-type  Jej wartość decyduje o tym, jaki będzie symbol wypunktowania lub format numeracji listy nieuporządkowanej

24 Strona one two three Ze stylami: ul { list-style-type: square; }

25  Dzięki właściwości list-style-type rola elementów ul oraz ol może zostać odwrócona. one two three ze stylami: ol { list-style-type: square; } przyjmie postać wypunktowania.

26 one two three ze stylami: ul { list-style-type: decimal-leading-zero; } będzie prezentowana jako lista numerowana.

27  Szczególną rolę odgrywa wartość none. Pozwala na usunięcie symbolu punktowania. one two three ze stylami: ol { list-style-type: none; }  Wartość tę używamy do formatowania menu witryny.

28 list-style-image  Pozwala na podanie dowolnego graficznego symbolu wypunktowania listy. list-style-image: url('punkt1.png'); Ćwiczenie

29 list-style-position  Pozwala na modyfikację symbolu wypunktowania względem tekstu  Wartość inside wciąga symbol wewnątrz tekstu, a wartość outside powoduje, że symbol pozostaje na zewnątrz.

30 list-style  Pozwala na łączne podawanie trzech wyżej wymienionych cech Np. list-style: none; list-style: url('punkt1.png’); list-style: inside; list-style: inside circle; list-style: inside url('punkt1.png’);

31 Tabele  …  Wiersze tabeli: …  Komórki tabeli: …  Elementy … są dla komórek nagłówkowych

32 lp. Imię 1. Jan 2. Janek 3. Janusz

33  Element table należy do grupy elementów blokowych, można w nim umieszczać jedynie elementy dotyczące tabel  Bezpośrednio w table nie może pojawić się ani akapit p, ani element div, ani żaden element liniowy.  Wewnątrz komórek td mogą pojawić się: tekst, elementy liniowe (np. strong, em ) oraz elementy blokowe (np. p, table, div )

34 Obramowanie i łączenie obramowania  Domyślnie tabela jest pozbawiona obramowania  Element table może mieć atrybut border pozwalający na dodanie ramki: …  Znacznie bardziej eleganckim wyjściem jest zdefiniowanie obramowania w CSS  W takim przypadku należy osobno opisać obramowanie elementów table, td oraz th.

35 table { border: 1px solid black; } td { border: 1px solid black; } th { border: 1px solid black; }

36  W celu połączenia obramowania przyległych komórek w regule opisującej wygląd elementu table użyjmy właściwości border-collapse o wartości collapse table { border-collapse: collapse; border: 1px solid black; }

37 Ćwiczenie Przygotuj stronę WWW przedstawiającą zestawienie najdłuższych rzek świata.

38 lp. Nazwa Długość 1. Nil 6671 2. Missisipi (od źródeł Missouri) 6418... table { border-collapse: collapse; border: 1px solid black; } td { border: 1px solid black; } th { border: 1px solid black; }...

39 Formatowanie komórek i tabel  margin, border, padding, width, height  background, color  Właściwości dotyczące tekstu i czcionek (np. text-align )  Właściwość vertical-align  Właściwości tych można używać w odniesieniu do całej tabeli, poszczególnych wierszy oraz komórek.

40 vertical-align  Ustala pionowe wyrównanie tekstu wewnątrz komórki  Wartości: 1.baseline – wyrównanie do linii bazowej tekstu 2.top – wyrównanie do górnej krawędzi komórki 3.middle – wyrównanie do środka komórki 4.bottom – wyrównanie do dolnej krawędzi komórki

41

42 Przedrostek Oznaczenie Wielokrotność Podwielokrotność tera- T 10 12 = 1 000 000 000 000 giga- G 10 9 = 1 000 000 000...

43  Obramowanie tabeli, szare tło, wyśrodkowanie na stronie, złączone krawędzie komórek: table { border: 3px solid black; background: rgb(245,245,245); margin:0 auto; border-collapse: collapse; }  Obramowanie komórek, zwiększenie ich dopełnienia td { border: 1px solid black; padding: 4px 20px; }  Odwrócenie kolorów i zwiększenie czcionki komórek nagłówkowych th { border: 1px solid black; padding: 4px 20px; background: black; color: white; font-size: 110%; }

44

45 PRODUCENT Nikon MODEL D80...

46 table { border-collapse: collapse; border: 2px solid black; margin: 50px auto; color: rgb(11,100,39); } th { text-align: right; border: 1px solid black; padding: 8px 20px; background: rgb(155,244,184); font-family: "Trebuchet MS", serif; } td { border: 1px solid black; padding: 8px 20px; background: rgb(232,253,239); font-family: Georgia, serif; }

47 Nagłówki kolumn i nagłówki wierszy  Jeśli w tabeli występują komórki nagłówkowe dla wierszy i dla kolumn, to wykorzystując atrybut scope lub atrybuty id oraz headers, możemy powiązać komórki td z odpowiadającymi im nagłówkami th  Użycie elementu scope jest prostsze- wystarczy, że każdą komórkę th wzbogacimy o jeden z wpisów: Imię 1.

48 Rodzina Czcionki bezszeryfowe Arial,Verdana,Trebuchet MS szeryfowe Georgia, Times New Roman …

49 Podpis i opis tabeli  Element caption nadaje tabeli podpis, tekst podpisu jest widoczny na stronie i domyślnie jest umiejscowiony powyżej tabeli.  Element ten musi występować jako pierwszy w kodzie tabeli Czcionki Rodzina Czcionki …

50  Położenie podpisu tabeli można zmienić, stosując właściwość CSS caption-side  Przyjmuje ona jedną z dwóch wartości: top lub bottom caption { caption-side: bottom; }  Element table ma atrybut summary, który nigdy nie jest wyświetlany przez przeglądarki graficzne, jest on przeznaczony dla przeglądarek czytających treść stron WWW Rodzina Czcionki …  W elemencie summary należy umieścić długi opis szczegółowo wyjaśniający zawartość tabeli.  Dzięki elementowi caption i atrybutowi summary tabela staje się bardziej dostępna.

51 Tab. 1. Wady układów optycznych aberracja chromatyczna (barwna) na krawędziach przedmiotów......

52 Tabele nieregularne  Tabele, które zawierają różną liczbę komórek w poszczególnych wierszach i kolumnach.  Jeśli chcemy, aby komórka rozciągała się na kilka kolumn lub wierszy, używamy atrybutów rowspan oraz colspan elementu td.  Komórka, która obejmuje trzy kolumny ma postać: …  Komórka, która obejmuje cztery wiersze ma postać: …

53  Musimy pamiętać, że jeśli wiersz zawiera komórki rozciągające się na kilka kolumn, to liczba jego komórek musi zostać odpowiednio zmniejszona.  Wiersz tabeli o 9 kolumnach zawierający komórkę, która rozciąga się na 7 kolumn, będzie zawierał oprócz niej tylko dwie komórki: …

54  Komórki rozciągające się na kilka wierszy będą również powodowały zmniejszenie liczby komórek w odpowiednich wierszach  Jeśli w tabeli o 3 kolumnach użyjemy w pierwszym wierszu komórki rozciągającej się na 3 wiersze, to dwa kolejne wiersze będą zawierały o jedną komórkę mniej. … … …

55

56 Znak iso-8859-2 windows-1270 dec hex dec hex ą 177 b1 185 b9 Wiersze zawierające niektóre litery będą miały różowe tło: tr.rozne { background: rgb(275,183,183); }

57 Nagłówek, stopka i treść tabeli  Treść tabeli może być umieszczana bezpośrednio w elemencie table lub może być podzielona na 3 sekcje: 1.Nagłówek tabeli ( thead ) 2.Stopkę tabeli ( tfoot ) 3.Treść tabeli ( tbody )  Jeśli taki podział jest stosowany, to w kodzie najpierw musi pojawić się nagłówek, następnie stopka, a na końcu treść. Żaden z tych elementów nie może być pominięty. Nagłówek, stopka i treść muszą mieć identyczną liczbę kolumn.

58 lp. Państwo lp. Państwo 1. Szwajcaria

59  Nagłówek i stopka ułatwiają przeglądanie długich tabel. Jeśli tabela nie mieści się na jednym ekranie i zostanie podzielona na kilka stron, wówczas na każdej stronie pojawi się nagłówek i stopka (np. w podglądzie wydruku). W przypadku braku elementów thead i tfoot tylko na pierwszej stronie pojawi się wiersz nagłówkowy.  Nie można korzystać z elementu thead bez elementu tfoot. Jeśli chcemy widzieć tylko nagłówek, to w stylach CSS można wyłączyć wyświetlanie elementu tfoot. tfoot { display: none; }

60 Ćwiczenie Wykonaj tabelę prezentującą kolory opisane w specyfikacji języka JavaScript. W tabeli użyj elementów thead, tfoot i tbody. W celu wyświetlenia koloru na stronie WWW użyj atrybutu style, np. komórkę, która ma przedstawiać kolor o nazwie Khaki, sformatuj: 59. Khaki F0E68C

61 lp. Kolor Nazwa koloru Kod koloru lp. Kolor Nazwa koloru Kod koloru 1. AliceBlue F0F8FF...

62 body { font-family: "Courier New", monospace; } table { border-collapse: collapse; border: 1px solid black; } td { border: 1px solid black; width: 120px; padding: 2px 8px; } th { border: 1px solid black; background: black; color: white; }.lp { text-align: right; width: 30px; } tfoot { display: none; } Wymuszenie szerokości komórki

63

64 Otwórz w programie NotH plik plik2.html, uruchom go w przeglądarce a następnie sformatuj wg poniższych zasad użwając zewnętrznego arkusza stylów:  tekst zawarty w nagłówku h1 powinien być wycentrowany, pisany czcionką Times New Roman, powinien być obramowany czarną ciągłą linią o grubości 3px, a tło w środku tego obramowania powinno być żółte  tekst zawarty w nagłówku h2 powinien być wycentrowany oraz napisany czcionką Arial  akapit p powinien być wyrównany do lewej strony, a lewy margines powinien wynosić 40%  lista_wypunktowana ma mieć margines równy 40%, tekst ma być wyrównany do lewej strony, a wypunktowanie ma być kwadratem (list-style-type: square;)  chcemy aby tylko strofa („schemacie jak ty nie lubisz tych co ci wymykają tych co ich nie możesz”) została wyróżniona w taki sposób aby rozmiar czcionki był równy 120%, rodzaj czcionki to Consolas, wysokość wiesza tekstu powinna wynosić 120%, a czcionka powinna być pogrubiona. W tym celu należy zastosować atrybut id  stwórzmy klasę powtórka do strofy („pomóż wspomóż dopomóż wyjątku czuły odeprzeć tłumnie armie reguły”), tak aby rozmiar czcionki wynosił 100% oraz żeby była pisana kursywą. Czcionkę ustawmy jako Corbel, a kolor czcionki niech będzie czerwony.  tło całej strony niech będzie koloru wheat

65 Element img Dwie najważniejsze metody umieszczania obrazów na stronach WWW są:  element img  tła ustalane właściwością background w stylach CSS. Ilustracje zawarte na stronach WWW są zapisane w osobnych plikach. Witryna, w której umieścimy jedno zdjęcie, będzie się składała z:  pliku XHTML  pliku ze zdjęciem.

66 Formaty graficzne, które można stosować na stronach WWW, są:  JPEG  PNG  GIF  SVG (nie obsługiwany przez IE).

67 Składnia elementu img  Element img umieszcza na stronie WWW jeden plik graficzny.  Jest to pusty element liniowy, który ma dwa obowiązkowe atrybuty: src (ang. source) oraz alt (ang. alternate text).  Znacznik ma postać:  Atrybut src ustala adres wstawianego pliku (w najprostszym przypadku adres obrazu jest nazwą pliku graficznego), zaś alt zawiera tekst przeznaczony dla wszystkich, którzy nie ujrzą obrazu (np. osoba niewidoma, osoba, której przeglądarka nie wyświetla obrazów). // NotH: Ctrl+D+I  Jeśli elementu img użyjemy do wstawienia obrazu, którego jedyną rolą jest ozdabianie witryny, wówczas atrybut alt należy pozostawić pusty, ale nie może być on pominięty!

68 Własności CSS, które można określić to m.in.:  Rozmiar ( width, height )  Odległość od tekstu ( padding, margin )  Otaczanie obrazka tekstem ( float: left, right, none )  Położenie tekstu w odniesieniu do obrazka ( vertical-align: top, bottom, middle, baseline )  Obramowanie ( border, border-style, border-width, border- color ) Element img powinien być zawarty wewnątrz akapitu. Jest to element liniowy, więc nie może być umieszczony bezpośrednio wewnątrz body.

69 Ćwiczenie Wykonaj stronę prezentującą podstawowe informacje na temat ropuchy szarej. Na stronie umieść opis pobrany z Wikipedii oraz zdjęcie z pliku ropuchy.jpg.

70 Ropucha szara Ropucha szara, ropucha zwyczajna (Bufo bufo) – gatunek płaza, największa z żyjących w Polsce ropuch. U tego gatunku dymorfizm płciowy pod względem wielkości ciała jest najwyraźniej zaznaczony wśród polskich ropuch. Samce – mniejsze – osiągają długość 48-97 mm, samice – większe – długość 61-125 mm. …

71 Wymiary obrazów Wymiary obrazów na stronie WWW możemy ustalić na trzy sposoby:  Korzystając z atrybutów width oraz height elementu img  Wykorzystując style CSS  Zmieniając fizycznie wymiary zdjęcia, czyli skalując obraz w programie graficznym (np. z rozmiaru 3264x2648 do 200x150) Dwa pierwsze rozwiązania mają dwie poważne i wykluczające ich użycie wady.

72 1.Jeśli obraz dom.jpg zajmujący niemal 5 MB, o wymiarach 3264x2648, umieścimy na stronie WWW znacznikiem: to odwiedzenie witryny spowoduje pobranie z internetu obrazu o rozmiarze 5 MB. Jeśli ten sam obraz najpierw przeskalujemy do wymiaru 200x150, a następnie zapiszemy jako dom-mini.jpg, to otrzymamy zdjęcie o rozmiarze nieco ponad 13 kB. 2. Skalowanie obrazów przez przeglądarkę nie da tak dobrych rezultatów jak ręczne wykonanie tej operacji w programie graficznym.

73  Dlatego aby powiększyć lub pomniejszyć obraz na stronie WWW, najpierw w programie graficznym przygotujmy obraz o odpowiednich wymiarach. Następnie umieśćmy obraz na stronie WWW, zachowując jego rzeczywiste wymiary.  Atrybuty width i height lub właściwości CSS width i height możemy wykorzystywać w innym celu. Jeśli wymiary obrazu jawnie wpiszemy jako wartości width i height, wówczas przeglądarka będzie je znała zanim obraz zostanie pobrany. W ten sposób wyeliminujemy efekt stopniowego zmieniania wyglądu strony wraz z pobieraniem obrazów.  Jeśli obraz dom.jpg ma wymiary 200x150, to w celu umieszczenia go na stronie WWW użyjemy kodu: lub stylów #domek{ width: 200px; height: 150 px; }

74 Ćwiczenie Przygotuj stronę prezentującą cztery zdjęcia zapisane w plikach tatry-1.jpg, tatry-2.jpg, tatry-3.jpg, tatry-4.jpg. Wszystkie cztery zdjęcia mają wymiary 400x266 pikseli. Zdjęcia ułóż w postaci tabelki o dwóch wierszach i dwóch kolumnach. Zadanie wykonaj w taki sposób, aby miejsce, które w układzie strony ma być przeznaczone na zdjęcia, zostało zarezerwowane przed pobraniem plików graficznych.

75 div { width: 800px; height: 532px; background: black; margin: 0 auto; padding: 0; border: none; } div img { border: none; display: block; float: left; height: 266px; width: 400px; margin: 0; padding: 0; } Element div ma pomieścić 4 zdjęcia ułożone po dwie w każdym wierszu, zatem wymiary elementu div będą 2 razy większe od wymiarów zdjęć. Elementy img zamieniamy w elementy blokowe i dosuwamy do lewej krawędzi. Dzięki temu, że każdy element img ma podane wymiary, po pobraniu stylów CSS przeglądarka zna dokładnie układ, jaki utworzą obrazy- jeszcze przed ich pobraniem.

76 Animacje

77 Opływanie  Właściwość float służy do modyfikacji zachowania elementu img oraz otaczającego go tekstu.  Formatując element img stylami: img{ float: left; } lub img{ float: right; } spowodujemy, że obrazy będą przylegały do lewej bądź prawej krawędzi obszaru, w którym są zawarte (np. akapitu lub elementu div ), a tekst będzie je opływał.

78 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse nunc pede, aliquet at, tincidunt id, sodales in, nulla. Pellentesque viverra ipsum ac quam. In hac habitasse … Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse nunc pede, aliquet at, tincidunt id, sodales in, nulla. Pellentesque viverra ipsum ac quam. In hac habitasse …

79  Dodajmy style.css p{ width: 60%; margin: 0 auto; }  a następnie: img{ float:left; }

80 Ćwiczenie  Stwórz stronę z kilkoma wierszami/piosenkami.  Przy każdym wierszu z umieść obrazek. Wykorzystaj style CSS dla grafiki.

81 Odsyłacze Onet //Ctrl+D+A  Atrybut href określa adres strony (http://www.onet.pl), a pomiędzy znacznikami trzeba wpisać tekst, który ma się pojawić na stronie (np. Onet). Uwaga. Konieczne jest http:// w adresie strony.  Możemy tam umieścić także postać względną: index.html wiersz.html opowiadanie.html (w najprostszym przypadku względny adres jest nazwąpliku z bieżącego folderu)

82 Ćwiczenie Przygotuj witrynę WWW prezentującą trzy wiersza Juliana Tuwima: Lokomotywa, Słoń Trąbalski, Pan Hilary. Strona główna witryny ma zawierać spis treści. Niech każda pozycja spisu treści będzie odsyłaczem do strony WWW z tekstem jednego wiersza. Ćwiczenie to wymaga wykonania czterech plików XHTML:  Plik index.html będzie zawierał spis treści  Plik lokomotywa.html będzie zawierał treść wiersza Lokomotywa  Plik slon.html będzie zawierał treść wiersza Słoń Trąbalski  Plik hilary.html będzie zawierał treść wiersza Pan Hilary

83 lokomotywa.html Julian Tuwim Lokomotywa Stoi na stacji lokomotywa, Ciężka, ogromna i pot z niej spływa - Tłusta oliwa. Stoi i sapie, dyszy i dmucha, Żar z rozgrzanego jej brzucha bucha: Buch - jak gorąco! Uch - jak gorąco! Puff - jak gorąco! Uff - jak gorąco! …

84 index.html Lokomotywa Słoń Trąbalski Pan Hilary

85 Spis treści w postaci listy numerowanej lub wypunktowanej  Sposób z poprzedniego ćwiczenia: Lokomotywa Słoń Trąbalski Pan Hilary jest niezalecany.  Do wykonania spisu treści znacznie lepiej jest wykorzystać listę ol lub ul.

86  Spis treści przyjmuje wówczas postać Lokomotywa Słoń Trąbalski Pan Hilary lub Lokomotywa Słoń Trąbalski Pan Hilary

87 Ćwiczenie Przygotuj witrynę WWW prezentującą trzy wiersza Cypriana Kamila Norwida: Czułość, Modlitwa, Mój psalm. Strona główna witryny ma zawierać spis treści. Niech każda pozycja spisu treści będzie odsyłaczem do strony WWW z tekstem jednego wiersza. Do wykonania spisu treści użyj listy ul.

88 Style CSS witryny z hiperłączami  Od chwili wprowadzenia odsyłaczy tworzone witryny składają się z kilku plików XHTML. W takiej sytuacji należy stosować zewnętrzne style CSS. Dzięki temu, ten sam plik CSS jest dołączony do wszystkich stron witryny, w jednym miejscu możemy modyfikować wygląd wielu stron.

89 Ćwiczenie

90 Powrót do spisu treści

91 body { background: rgb(230, 255, 240); font-family: Georgia, serif; margin: 100px; line-height: 200%; text-align: center; } h1 { font-size: 140%; letter-spacing: 0.3em; text-transform: uppercase; border-bottom: 4px solid black; width: 20em; margin: 0 auto; padding: 40px } h2 { font-size: 200%; margin: 50px auto; letter-spacing: 0.4em; text-transform: uppercase; } p { width: 20em; margin: 0 auto; text-align: left; } ul { text-align: left; width: 10em; margin: 100px auto; }

92 Atrybut title Powrót do spisu treści  Używamy, gdy tekst hiperłącza nie jest wystarczająco jasny i zrozumiały.  Wartość atrybutu title jest wyświetlana przez przeglądarki graficzne jako tzw. tooltip.  Stosowanie tego samego tekstu dwukrotnie, raz jako wartość atrybutu title, a drugi raz- jako treść hiperłącza, nie daje żadnych korzyści.

93 Odsyłacze do różnych typów plików  Hiperłącza mogą- poprzez atrybut href- wskazywać różne zasoby, nie tylko strony WWW.  Poprawnymi odwołaniami są m.in.: css2.zip html40.pdf lorem-ipsum.txt

94

95 Odsyłacze wskazujące strony w internecie Przygotuj witrynę z hiperłączami do stron domowych znanych informatyków.

96 Odsyłacze wewnętrzne  Adres URL może wskazywać nie tylko plik, ale także konkretne miejsce w dokumencie. Do tworzenia tego typu odwołań wykorzystujemy identyfikatory (tzn. atrybuty id znaczników).  Jeśli w dokumencie strona.html użyjemy identyfikatora tytul : Lorem ipsum wówczas adres: strona.html#tytul będzie wskazywać fragment pliku strona.html zawierający atrybut id="tytul"

97 Piosenki dla dzieci Bajka iskierki Był sobie paź Miała baba koguta Bajka iskierki Z popielnika na Wojtusia… Powrót na górę strony Był sobie paź Już księżyc zgasł, zapadła noc… Powrót na górę strony Miała baba koguta Miała baba koguta, koguta, koguta… Powrót na górę strony

98 Obrazy jako odsyłacze  Po wstawieniu do kodu strony powyższego elementu a przeglądarka wyświetli obraz las.jpg. Kliknięcie w zdjęcie lasu będzie powodowało przejście do dokumentu strona.html.  Hiperłącza, które zawierają wyłącznie obraz wzbogacamy o atrybut title :

99 Warzywa

100 Odnośnik do e-mail opis  Spowoduje otwarcie okna do wysyłania wiadomości programu pocztowego (np. Windows Live, Outlook) z wypełnionym polem adresata.

101 Pseudoklasy  :link – odnośnik zwykły  :visited – odnośnik odwiedzony  :active – odnośnik aktywny (przy kliknięciu)  :hover – odnośnik w momencie wskazania kursorem Umożliwiają one zmianę wyglądu odnośnika w każdej z powyższych sytuacji, np. jeżeli odnośnik ma mieć usunięte podkreślenie użyjemy instrukcji: a:link { text-decoration: none; }

102 Ćwiczenie a) Stwórz stronę z kilkoma utworami The Rolling Stones. b) Dołącz do niej spis treści z odnośnikami wewnętrznymi (czyli kliknięcie odnośnika w spisie treści ma przenosić do konkretnego wiersza). c) Po każdym utworze zrób odnośnik do góry strony (lub do spisu treści). d) Zastosuj pseudoklasy, aby zmienić formatowanie odnośnika w różnych stanach (odwiedzony, wskazany itd.). e) Przy każdym utworze z umieść zdjęcie piosenkarzy. Wykorzystaj style CSS dla grafiki. f) Każdy obrazek ma być odnośnikiem do strony zewnętrznej, z której go pobrano.