I. Znaczniki Jeśli wyświetlisz kod źródłowy strony WWW, zobaczysz, że zawiera on szereg poleceń języka HTML umieszczonych w nawiasach kątowych. Twory te noszą nazwę znaczników. Znaczniki informują przeglądarkę, jak wyświetlić stronę WWW na ekranie. Jak stosować znaczniki? Znaczniki stosowane są w parach: <znacznik otwierający> </znacznik zamykający>, na przykład: <html> </html> Zwróć uwagę na ukośnik (/), który odróżnia znacznik zamykający od otwierającego. Taką parę znaczników nazywa się elementem. W przypadku elementów samozamykających się (znaczników jednoelementowych) konieczne jest zakończenie znacznika otwierającego znakami />: <hr /> lub <br /> Znaczniki, oprócz nazwy znacznika, mogą zawierać w ostrokątnym nawiasie dodatkowe informacje tzw. atrybuty: <nazwa atrybutl="wartośćl" atrybut2="wartość2"> </nazwa> <nazwa atrybutl="wartośćl" atrybut2="wartość2" /> Uwaga: Przykład: Atrybuty znaczników dostarczają dodatkowych informacji o elementach strony definiowanych poprzez znaczniki. Jeśli na przykład chciałbyś, aby Twoja strona miała tło w kolorze zielonym, wystarczy, że poinformujesz o tym przeglądarkę, dodając do znacznika <body> odpowiedni atrybut: <body bgcolor="green"> Pewne zamieszanie wprowadził do terminologii języka HTML mechanizm kaskadowych arkuszy stylu, którego będziemy używać podczas definiowania wyglądu elementów stron WWW. Składnia takiego zapisu inna: <nazwa style= atrybut1: wartości; atrybut2; wartość2; > </nazwa> Tego typu atrybuty będziemy dla odróżnienia nazywać atrybutami stylu. Wewnątrz elementu a więc pomiędzy znacznikiem otwierającym i zamykającym znajdować się może tekst treści tego elementu lub dowolna liczba innych elementów języka HTML: 1 S t r o n a
<p>treść akapitu <b>pogrubiona</b> i <i>pochylona</i></p> Uwaga: [HTML I XHTML ĆWICZENIE 0] dr Artur Bartoszewski Bezwzględnie należy pamiętać o tym, by elementy nie przeplatały się, to znaczy, by elementy były zamykane w kolejności odwrotnej do kolejności ich otwierania: DOBRZE: <b><i> </i></b> ŹLE: <b><i> </b></i> II. Elementy dokumentu XHTML 1. <?xml version="1.0" encoding="utf-8"?> 2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> 3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> 4. <head> 5. </head> 6. <body> 7. </body> 8. </html> Pierwszy wiersz zawiera informację o tym, że plik zapisany jest zgodnie z zasadami standardu XML (ang. Extensible Markup Language) uniwersalnego języka znaczników. Drugi wiersz tworzy tak zwana deklaracja typu dokumentu, reprezentowana przez znacznik <!D0CTYPE>. Deklaracja typu dokumentu informuje przeglądarkę WWW, jak ściśle powinna się ona trzymać standardu języka HTML w czasie interpretowania kodu strony. Powyższa deklaracja również podkreśla, że strona WWW zawiera kod zapisany w zgodzie ze standardami HTML i XML, czyli XHTML. Pomiędzy znacznikami <html> i </html> umieszczmy wszystkie elementy składające się na stronę WWW. Za znacznikiem </html> nie może znajdować się już nic. Kolejne dwa wiersze zawierają znaczniki otwierający i zamykający elementu head, deklarującego obszar nagłówka strony. Nagłówek strony nie jest nigdzie wyświetlany. Elementy wyświetlane na stronie umieszczamy pomiędzy znacznikami <body> </body>. 2 S t r o n a
W edytorze KED wybieramy polecenie: plik -> nowy z szablonu -> XHTML 1.1 [HTML I XHTML ĆWICZENIE 0] dr Artur Bartoszewski Element <title></title> - tytuł strony, nie wyświetla się na stronie, lecz na pasku tytułowym okna przeglądarki (i ewentualnie na zakładce). Element <meta /> - informacje dla przeglądarki i dla wyszukiwarek. o o Przykład elementu meta, który definiuje opis strony (name= "description"): <meta name="description" content="strona poświęcona czemuś tam..."> Przykład elementu meta, który zawiera słowa kluczowe charakteryzujące zawartość strony WWW (name="keywords"): <meta name="keywords" content="html, DHTML, CSS, XML, XHTML, JavaScript, VBScript"> 3 S t r o n a
o o Przykład elementów meta, w których umieszczono informacje o autorze strony, dacie ostatniej modyfikacji dokumentu oraz o stosowanym oprogramowaniu: <meta name="author" content="jan Kowalski"> <meta name="revised" content="jan Kowalski,6/10/06"> <meta name="generator" content="microsoft FrontPage 4.0"> Atrybuty meta podają także dane autora, datę wprowadzenia poprawek oraz typ stosowanego oprogramowania. Kierowanie użytkownika pod nowy adres URL <meta http-equiv="refresh" content="5;url=http://www..."> Zadanie 1: tytuł strony a) Stwórz pustą stronę XHTML o tytule Moja pierwsza strona WWW (patrz rysunek). b) Zapisz stronę na dysku pod nazwą z01.html w folderze../moje Dokumenty/eti_s5/ Zadanie 2: znaczniki meta a) Wpisz w strukturę strony informacje o autorze. b) Dodaj listę słów kluczowych {HTML; XHTML; ETI; Wydział Nauczycielski; Politechnika Radomska;} c) Dodaj do swojej strony mechanizm, który po 7 sekundach automatycznie przekieruje odwiedzającego na stronę www.bartoszewski.pr.radom.pl 4 S t r o n a
III. Formatowanie tekstu i wygląd strony Akapit: <p>...</p> <p style="text-align: left;"> aby wyrównać tekst do lewego marginesu <p style="text-a1ign: right;"> aby wyrównać tekst do prawego marginesu: <p style="text-a1ign: center;"> aby wycentrować tekst: <p style="text-align: justify;"> aby wyrównać tekst do obu marginesów: Przejście do nowego wiersza: <br /> Pogrubienie: <b>...</b> Pochylenie: <i >...</i > Podkreślenie: <u>...</u> Przekreślenie: <strike>...</strike> Indeks górny: <sup>...</sup> Indeks dolny: <sub>...</sub> Znaki specjalne: spacja nierozdzielająca & & " < < > > 5 S t r o n a
Zadanie 3: atrybuty tekstu a) Stwórz pustą stronę o nazwie z03.html. b) Umieść na niej następujące próbki tekstu (zachowując formatowanie): Uwaga: Nie nadużywaj centrowania tekstu. Strona WWW, której cała zawartość została wycentrowana, nie prezentuje się dobrze. IV. Kolor tekstu, kolor strony i akapitu <p style="background-color: red; color: blue;">..</p> - zdefiniowane kolory dla akapitu (niebieski tekst na czerwnym tle); <body style="color: #ffffff; background-color: #000000 > - zdefiniowano kolory dla całej strony (biały tekst na czarnym tle) <span style= color: green;>...</span> - zmiana koloru fragmentu akapitu, pojedynczego wyrazu lub nawet litery. 6 S t r o n a
V. Struktura dokumentu Dokument HTML oprócz treści i wyglądu musi mieć również zakodowaną w sobie strukturę. Struktura to podział na rozdziały, podrozdziały, punkty oraz znajdujący się na najniższym poziomie tego podziału zwykły tekst zapisany w akapitach reprezentowanych przez elementy <p>. Nagłówki: <h1>...</h1> Linia pozioma: <hr /> atrybuty: <h2>...</h2> <h3>...</h3> border: none; - usuwa pseudo trójwymiarowe obramowanie background-color:...; - określa kolor; width - Szerokość linii zazwyczaj podaje się jako procent jej maksymalnej szerokości (na przykład: width: 80%; height - grubość można podać w punktach drukarskich [pt] Numeracja nagłówków nie oznacza ich kolejności ani ważności. Oznacza ich hierarchię <h3> dzieli tekst należący do < h2>,< h2> dzieli tekst należący do <h1>, < h1> dzieli < body>. Przykład: <hr style="border: none; width: 80%; height: 5pt; background-color: blue;" /> Uwaga: Element <hr /> nie może być umieszczany wewnątrz akapitów. Służy on do ich oddzielania. 7 S t r o n a
Zadanie 4: linie poziome Należy przy pomocy poznanych poleceń języka XHTML odtworzyć stronę WWW pokazaną na ilustracji. VI. Krój pisma Przy wyborze kroju pisma masz do dyspozycji wszystkie kroje zainstalowane na Twoim komputerze. Pamiętaj jednak, że inni użytkownicy wcale nie muszą nimi dysponować! Z tego powodu powinieneś ograniczać się c standardowych rodzin krojów pisma: serif czcionka szeryf owa, np. Times New Roman, sans-serif czcionka bezszeryfowa, np. Arial, cursive oraz fantasy ozdobne czcionki pochyłe (rzadko używane, gdyż każda przeglądarka może podstawić w ich miejsce całkowicie inne kroje pisma często w ogóle nieprzystające do zamysłu autora strony), mono czcionka nieproporcjonalna (o stałej szerokości wszystkich znaków) używana najczęściej do zapisywania tekstu programów komputerowych, tworzenia prymitywnych tabel lub wyróżniania poleceń programów; np. Courier New. Wyboru kroju pisma dokonuje się za pomocą atrybutu stylu o nazwie font-family: 8 S t r o n a
font-family: times new roman, serif; / font Times New Roman, jeżeli nie jest dostępny to inna czcionka szeryfowa/ [HTML I XHTML ĆWICZENIE 0] dr Artur Bartoszewski Z kolei rozmiar czcionki możesz określić za pomocą atrybutu stylu font-size: font-size: llpt; Tekst preformatowany (spacje i końce linii mają znaczenie) <pre>...</pre> Tekst pisany czcionką o stałej szerokości (tekst maszynowy) <tt>...</tt> Marginesy akapitów <p style="margin-top: 5pt; margin-bottom: 3pt;">...</p> <p style="margin: 10 10 10 10;"> /gdzie wartości oznaczają margin: górny prawy dolny lewy;/ VII. Listy <ol type=x start=n (A, a, I, i, l)> <li>element listy<li> <li>element listy<li>...kolejne elementy... </ol> Lista uporządkowana <ul type=kształt (Disc, Circle, Square)> Lista nieuporządkowana <li>element listy</li> <li>element listy</li>...kolejne elementy... </ul> 9 S t r o n a
<dl>tytuł listy (opcjonalnie) Lista definicji <dt>słowo (zwrot)</dt> <dd>definicja słowa (zwrotu)</dd>...kolejne słowa (zwroty) i ich definicje.. </dl> <ul> <li>punkt 1.</li> <li>punkt 2: <ul> <li>podpunkt a,</li> <li>podpunkt b,</li> <li>podpunkt c,</li> </ul> </li> <li>punkt 2.</li> </ul> Lista z podpunktami 10 S t r o n a
VIII. Ulokowanie dokumentu a ścieżka dostępu [HTML I XHTML ĆWICZENIE 0] dr Artur Bartoszewski URL (ang. Uniform Resource Locator) to adres dokumentu (lub innych zasobów) w sieci WWW. Ścieżki dostępu Jakie są rodzaje ścieżek dostępu? bezwzględne (np. http://www.netscape.corn/) podany adres od początku do końca (bezwzględnie) definiuje położenie strony WWW i może być stosowany w takiej samej postaci niezależnie od strony WWW, na której go użyjemy; względne (np.../teksty/opis.html lub też nowy.html) podany adres definiuje położenie strony WWW wyłącznie względem aktualnej strony, użycie go na innej stronie WWW (umieszczonej w innym katalogu tego samego serwera lub na innym serwerze) uniemożliwi odszukanie wskazywanego przez odnośnik dokumentu. Uwaga: W żadnym wypadku nie wolno stosować bezwzględnych adresów dyskowych np. c:\moje Dokumenty\plik.html Przykłady adresów względnych: Odnośnik z pliku al.html do pliku a2.html; oba pliki znajdują się w tym samym folderze A 11 S t r o n a
Odnośnik z pliku a.html do pliku b.html umieszczonego w folderze podrzędnym B Odnośnik zplikub.html do pliku a.html umieszczonego w folderze nadrzędnym A Odnośnik z pliku c.html do pliku b.html; oba pliki znajdują się w folderach podrzędnych w stosunku do folderu A 12 S t r o n a
UWAGA: W przypadku przesuwania całej grupy plików bez naruszania powiązań między nimi, odnośniki względne nie wymagają aktualizacji. Przesunięcie pojedynczych plików taką konieczność spowoduje. IX. Definiowanie odnośników Odnośnik do innego dokumentu: <a href="url_dokumentu.html">0dnośnik</a> Odnośnik do innej strony WWW <a href="http://www.helion.pl/">wydawnictwa Helion</a> /domyślnie wczytywany jest index.html Odnośnik do podstrony <a href="http://www.bartoszewski.pr.radom.pl/pipu_d/index.html">strona Artura Bartoszewskiego</a> <a href="http://dobreprogramy.pl/index.php?dz=15&n=9958&openoffice.org+3.0+juz+dostepny! ">Dobreprogramy.pl</a> 13 S t r o n a
odnośnik do pliku <a href="http://www.bartoszewski.pr.radom.pl/pipu_d/c2/xhtml_cw_1.pdf">0dnośnik</a> Odnośnik pocztowy <a href="mailto:jan.kowalski@moj.adres.pi">wyślij do mnie list</a> Odnośnik wmontowany w akapit Uwaga: Struktura adresu URL zgodna jest z formatami systemu UNIX. Oznacza to, że wszystkie nazwy i ścieżki dostępu są czułe na wielkość znaku (za wyjątkiem nazw komputerów i adresów e-mail). Aby utworzyć odnośnik do pliku w katalogu podrzędnym bieżącego pliku, należy skorzystać z prawego ukośnika, /, który umieszczany jest między nazwą katalogu a nazwą pliku. Oto przykład: Lista <a href="2005/wszystkie.html">moich publikacji wydanych w 2007r</a>. <p>wyświetl <a href="dane.html">dodatkowe informacje</a> na ten temat.</p> UWAGA: Nie można umieszczać elementów a w innych elementach a ani otaczać znacznikami <a></a> elementów blokowych. Jedynie elementy liniowe mogą zawierać się w elemencie <a>. Z tego powodu nie można zrobić odnośnikiem na przykład całego wiersza tabeli bez powtarzania a w każdej komórce. Zadanie 5: Odnośniki W archiwum materialy_z05.zip znajdują się strony HTML wraz ze strukturą katalogów (pokaznom na rysunku). a) Wykonaj linki pozwalające na nawigację pomiędzy nimi. z07 p1_01 p2_01 p2_02 14 S t r o n a
X. Zakotwiczenia Zakotwiczenia o zdefiniowanych nazwach tworzy się w XHTML przy użyciu tego samego znacznika <a>, który poznaliśmy przy okazji połączeń. Zamiast atrybutu href stosowany jest tu atrybut id (w języku HTML stosowany był atrybut name). Atrybut id zawiera słowa kluczowe, które będą stanowiły nazwę zakotwiczenia: <a id="nazwa">tekst</a> Żeby skierować odnośnik na wybrane zakotwiczenie, musimy utworzyć zwykły I odnośnik, z tym że wartością atrybutu href jest w tym przypadku nazwa zako-l twiczenia poprzedzona znakiem #. <a href="#nazwa>inny tekst</a> Zadanie 6: Zakotwiczenia a) W pliku potoki_i_konflikty.doc znajduje się tekst, który umieścić należy na stronie. b) Na górze strony stwórz spis treści pozwalający dotrzeć do każdego podrozdziału. c) Na końcu każdego podrozdziału stwórz odnośnik [Powrót] pozwalający wrócić na górę strony. XI. Definiowanie sposobu otwierania dokumentów W języki HTML otwieranie dokumentów w nowym oknie wyglądało tak: <a href= dokument.html target= _blank >...</a> Atrybut target może przyjmować wartości: o _blank, o _parent, o _self (jest to wartość domyślna) o _top 15 S t r o n a
..jednak nie jest to metoda poprawna dla XHTML. Jak wygląda zapis poprawny w języku XHTML? Oto on: <a href="nowa_strona.htm" onclick="this.target='_blankl">otwórz w nowym oknie</a> XII. Odnośniki graficzne Graficzne odnośniki do obrazów pełnowymiarowych: <a href="fotkal-duza.jpg"><img src="fotkal-mini.jpg" alt="pierwsza fotka" title="pierwsza fotka"/></a> Graficzne odnośniki do dokumentów html <a href="http://www.allegro.pl" ><img src="miniatura.jpg" alt="allegro" title="allegro"/></a> Zadanie 7: Galeria a) Stwórz stronę pokazaną na rysunku. b) Górna grupa miniaturek powinna być linkami do witryn, które przedstawiają miniaturki. c) Dolna grupa miniaturek powinna być odnośnikami do obrazków (zrzutów ekranu). Informacja: grafika do wykorzystania (zarówno zrzuty ekranu jak i miniaturki) znajduje się w archiwum materialy_z7.zip Niektóre przykłady wykorzystane w instrukcji zaczerpnięte zostały z książki: M. Sokół, ABC języka HTNL i XHTML, Wydawnictwo Helion, Gliwice 2006, 16 S t r o n a