I. 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 & & " < < > > 1 S t r o n a
II. 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. Zadanie 1.1: kolory Należy przy pomocy poznanych poleceń języka XHTML odtworzyć stronę WWW pokazaną na ilustracji. 2 S t r o n a
III. 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: font-family: times new roman, serif; / font Times New Roman, jeżeli nie jest dostępny to inna czcionka szeryfowa/ 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;/ 3 S t r o n a
IV. 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> 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> 4 S t r o n a
UWAGA: [XHTML I CSS ĆWICZENIE 1] dr Artur Bartoszewski 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. Rozwiązania praktyczne: Ścieżki powrotu Ścieżki powrotu są jednym z prostszych mechanizmów nawigacyjnych. Podobnie jak napis Jesteś tutaj", ścieżki powrotu pokazują Twoją aktualną pozycję w hierarchii witryny (czasem nawet zawierają słowa Jesteś tutaj"). Zadanie 1.2: Ścieżki powrotu W archiwum materialy_z07.zip znajdują się strony HTML wraz ze strukturą katalogów (pokaznom na rysunku). a) Wykonaj mechanizm nawigacji oparty o ścieżki powrotu z07 p1_01 p2_01 p2_02 5 S t r o n a
V. Definiowanie sposobu otwierania dokumentów [XHTML I CSS ĆWICZENIE 1] dr Artur Bartoszewski 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..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> Okno pop-up - czasem trzeba otworzyć małe okienko o określonej wielkości z krótką informacją, opisem czy ankietą. W takiej sytuacji można skorzystać ze zdarzeń JavaScript: <a href="#" onclick="window.open( nowa_strona.htm', 'Nowe_okno', 'height=150, width=200');">0twórz małe okienko</a> Zadanie 1.3: sposoby otwierania okien a) Stwórz stronę pokazaną na rysunku. Dodaj linki pozwalające na przejście do strony www.bartoszewski.pr.radom.pl, oraz linki otwierające bezpośrednio instrukcję do tego ćwiczenia (jeden z nich ma otwierać się w nowym oknie). b) Stwórz stronę popup.html która będzie wyświetlona w wyskakującym okienku. c) Stwórz link, który spowoduje pojawienie się okienka. 6 S t r o n a