Laboratorium 1 ZAKŁAD SYSTEMÓW ROZPROSZONYCH LABORATORIUM Aplikacje internetowe Powtórzenie - język HTML TWORZENIE STRUKTURY DOKUMENTU HTML 1. Utwórz strukturę dokumentu. Nadaj tytuł dokumentu. Zadanie wykonaj w notatniku. Program1.html <HTML> <HEAD> <TITLE> Moja pierwsza strona WWW </TITLE> </HEAD> <BODY> Tutaj wpisujemy tekst który chcemy widzieć na stronie WWW </BODY> </HTML> W dowolnej przeglądarce sprawdź działanie strony. 2. Wstaw informację o autorze dokumentu dopisując w nagłówku poniższą linię <META NAME="Author" CONTENT="Jan Kowalski"> ATRYBUTY SEKCJI BODY W nagłówku tej sekcji, tzn. obok słowa kluczowego BODY, można umieszczać dodatkowe znaczniki służące do ustalania atrybutów dokumentu, takich jak kolor tekstu, tła, odsyłaczy, itp. Poniższa tabela prezentuje te znaczniki: Znacznik TEXT=kolor Opis Określa domyślny kolor tekstu na stronie HTML Zakład Systemów Rozproszonych - 1 / 20
BGCOLOR=kolor LINK=kolor VLINK=kolor ALINK=kolor BACKGROUND= adres_pliku_obrazka TOPMARGIN="n" LEFTMARGIN="n" Określa domyślny kolor tła strony HTML Określa domyślny kolor odsyłaczy hipertekstowych do stron jeszcze nie odwiedzanych (ang. Hyperlink) Określa domyślny kolor odsyłaczy hipertekstowych do stron już odwiedzonych (ang. Visited Hyperlink) Określa domyślny kolor odsyłaczy hipertekstowych w momencie ich wciśnięcia (ang. Active Hyperlink) Ustawia wybrany obrazek jako tapetę, tzn. wypełnia nim tło strony. Jeśli obrazek jest mniejszy od strony, wtedy jest powielany i drukowany wielokrotnie, aż do całkowitego wypełnienia strony. Ustawia górny margines strony na n pikseli (punktów na ekranie) Podobnie, ale dla lewego marginesu STYLESRC=adres_innej_strony Kopiuje powyższe ustawienia z podanej strony Zadanie Uzupełnij pole BODY w taki sposób aby nadać stronie odpowiednie tło np. czerwone <BODY TEXT="#000000" BGCOLOR="#Cc0000" LINK="#FF0000" VLINK="#551A8B" ALINK="#FFFF00"> FORMATOWANIE TEKSTU Znaczniki formatowania tekstu Znaczniki formatowania tekstu używa się w standardowy dla HTML-u sposób, tzn. <XXX>tekst+inne znaczniki</xxx> gdzie XXX jest identyfikatorem znacznika. Wszystkie te znaczniki prezentuje poniższa tabela: Znacznik Typ formatowania Działanie <EM>..</EM> Logiczny <STRONG>..</STRONG> Logiczny Zakład Systemów Rozproszonych - 2 / 20 Powoduje średnie wyróżnienie tekstu. Z reguły (np. na Windows) powoduje on pochylenie tekstu. Powoduje mocne wyróżnienie tekstu. Z reguły (np. na Windows) powoduje on pogrubienie tekstu. <I>..</I> Fizyczny Powoduje pochylenie tekstu (Italic). <B>..</B> Fizyczny Powoduje pogrubienie tekstu (Bold). <CITE>..</CITE> <DFN>..</DFN> <SAMP>..</SAMP> Logiczny Logiczny Logiczny Działa różnie. Z reguły (np. na Windows) powoduje on pochylenie tekstu (Citation). Działa różnie. Z reguły (np. na Windows) powoduje on pochylenie tekstu (Definition). Działa różnie. Z reguły (np. na Windows) powoduje on wypisanie tekstu czcionką o stałej szerokości (Sample).
<CODE>..</CODE> <VAR>..</VAR> <KBD>..</KBD> <TT>..</TT> Logiczny Logiczny Logiczny Fizyczny Działa różnie. Z reguły (np. na Windows) powoduje on wypisanie tekstu czcionką o stałej szerokości (Code). Działa różnie. Z reguły (np. na Windows) powoduje on wypisanie tekstu czcionką o stałej szerokości (Variable). Działa różnie. Z reguły (np. na Windows) powoduje on wypisanie tekstu czcionką o stałej szerokości (Keyboard). Powoduje on wypisanie tekstu czcionką o stałej szerokości (Typewriter). Jest on najczęściej używanym znacznikiem do wyprowadzania tekstów taką czcionką. <STRIKE>..</STRIKE> Fizyczny Powoduje on "skreślenie" tekstu (Strikethrough). <U>..</U> Fizyczny Powoduje podkreślenie tekstu (Underline). <SUP>..</SUP> Fizyczny Powoduje wypisanie tekstu jako indeks górny (Superscript). <SUB>..</SUB> Fizyczny Powoduje wypisanie tekstu jako indeks dolny (Subscript). <FONT SIZE="n">..</FONT> Logiczny <FONT COLOR=kolor> Fizyczny..</FONT> <BASEFONT SIZE="n"> <BASEFONT COLOR=kolor> <BIG>..</BIG> Logiczny fizyczny Logiczny Ustawia rozmiar czcionki w wybranym tekście na wartość n z przedziału 1-7. Liczba n jest logiczną wielkością czcionki, tzn. jednej wartości n mogą odpowiadać różne wielkości rzeczywiste czcionki na różnych przeglądarkach. Ważne jest tylko to, że czcionka o wielkości 1 jest najmniejsza, 2 trochę większa, itd. aż do 7 (gigant). Wartością domyślną jest 3. Można stosować razem ze znacznikiem COLOR. Ustawia kolor czcionki w wybranym tekście na "kolor". Można stosować razem za znacznikiem. Działa tak jak znacznik FONT, ale ustawia atrybuty domyślne tekstu w obszarze od miejsca wystąpienia do końca strony lub wystąpienia innego BASEFONT. Nie używa się tu znacznika kończącego. Również tak jak w przypadku FONT można oba atrybuty używać razem. Powoduje zwiększenie o jeden wielkości czcionki (patrz FONT SIZE). Zadanie Wpisz do strony dowolny tekst oraz sformatuj go wykorzystując do tego zmianę czcionki, używając różnych stylów, zmieniając rozmiar czcionki (całego tekstu oraz tylko fragmentu), zmieniając kolor tekstu, używając indeksów dolnych i górnych. Przykład <FONT SIZE=12 FACE="Verdana" COLOR=#22a4d6> Tutaj wpisujemy tekst ktory chcemy widziec na stronie WWW </FONT> Zakład Systemów Rozproszonych - 3 / 20
Zadanie Korzystając z tabeli wpisz zmodyfikuj swoją stronę WWW tak aby uzyskać dodatkowo na stronie WWW poniższy tekst: Czcionka pochylona Czcionka pogrubiona Czcionka o stałej szerokości (każda litera i znak ma tę samą szerokość). Dobra przy robieniu tekstowych tabelek. Tekst skreślony Tekst podkreślony a to jest indeks górny To jest tekst normalny To jest tekst normalny a to jest indeks dolny To jest czcionka o rozmiarze 5 (SIZE="5") Grafika Jedną z głównych zalet dokumentów HTML jest możliwość ozdobienia i urozmaicenia stron WWW za pomocą obrazków. W tym celu wykorzystuje się pliki graficzne w formatach GIF oraz JPG. Dzięki obrazkom strony WWW zyskują na atrakcyjności, a przekazywana informacja jest bardziej zrozumiała. Obrazki wstawia się do dokumentu HTML za pomocą komendy: <IMG SRC="plik_graficzny"> gdzie plik_graficzny oznacza nazwę (lub pełną ścieżkę dostępu URL i nazwę) pliku graficznego, który chcemy wyświetlić. Przykłady: <IMG SRC="obrazek.jpg"> <IMG SRC="../pictures/eagle.gif"> <IMG SRC="www.kul.lublin.pl/logo.jpg"> Dodatkowe polecenia: ALIGN- Polecenie to służy do ustalenia położenia i sposobu oblewania obrazka przez tekst. Możliwymi wartościami tej opcji są: ALIGN= "left" "right" "top" "middle" "bottom" Np. <IMG SRC="mirror.jpg" ALIGN="left"> <IMG SRC="mirror.jpg" ALIGN="middle"> <IMG SRC="mirror.jpg" ALIGN="bottom"> Zakład Systemów Rozproszonych - 4 / 20
BORDER - Opcja ta służy do określenia szerokości obramowania obrazka w punktach. Składnia tej opcji jest następująca: <IMG SRC="micro.jpg" BORDER=0> <IMG SRC="micro.jpg" BORDER=7> WIDTH oraz HEIGHT - Parametr WIDTH określa, jaką szerokość (w punktach) ma mieć wyświetlany obrazek. Parametr HEIGHT określa, jaką wysokość (w punktach) ma mieć obrazek. W przypadku obrazka o innym wymiarze, jest on automatycznie przeskalowywany. Uwaga: Gdy podano tylko jeden z tych parametrów, przeskalowywanie odbywa się z uwzględnieniem proporcji obrazka. Jeśli podano oba parametry na raz, obrazek jest odpowiednio deformowany tak, by miał żądane wielkości. WIDTH=liczba HEIGHT=liczba Np. <IMG SRC="micro.jpg" WIDTH=100> <IMG SRC="micro.jpg" HEIGHT=35> <IMG SRC="micro.jpg" WIDTH=200 HEIGHT=35> HSPACE - Opcja ta określa wielkość (w punktach) odstępu w poziomie pomiędzy obrazkiem a innymi elementami dokumentu (np. tekstem albo innym obrazkiem). Wartością parametru jest liczba: HSPACE=liczba Np. <IMG SRC="palace.jpg" HSPACE=0> <IMG SRC="palace.jpg" HSPACE=20> VSPACE - Opcja ta określa wielkość (w punktach) odstępu w pionie pomiędzy obrazkiem a innymi elementami dokumentu (np. tekstem albo innym obrazkiem). Wartością parametru jest liczba: VSPACE=liczba Np. <IMG SRC="palace.jpg" HSPACE=0> <IMG SRC="palace.jpg" HSPACE=20> ALT - Parametr ten określa alternatywny opis obrazka, używany zazwyczaj wtedy, gdy nie można wyświetlić samego obrazka, lub gdy chcemy dodatkowo go opisać. ALT="tekst" Przykładowa pełna linijka opisująca jakiś rysunek w dokumencie HTML może mieć postać: <IMG SRC="picture.jpg" ALIGN="left" BORDER=1 WIDTH=320 HEIGHT=240 HSPACE=5 VSPACE=3 ALT="To jest opis obrazka"> Zakład Systemów Rozproszonych - 5 / 20
Zadanie Wstaw do swojej strony dowolny rysunek. Sformatuj go używając powyższych funkcji. ODSYŁACZE HIPERTEKSTOWE Do wszelkiego rodzaju operacji na odsyłaczach służy w HTML-u znacznik <A>..</A> i jego atrybuty. Znacznik <A>..</A> może być wstawiany w dowolne miejsce nawet w środku akapitów, list, itd. Przypomnienie: Kolor tekstu odsyłacza określa się w sekcji BODY. Tworzenie połączeń Jeśli chcesz stworzyć na swojej stronie odsyłacz do innej strony, to użyj do tego atrybutu HREF. Wtedy znacznik <A> będzie miał następującą postać: <A HREF="adres_url">tekst odsyłający</a> gdzie adres_url jest poprawnie wprowadzonym adresem docelowej strony WWW łącznie z katalogami i nazwą pliku strony (jeśli pominiesz nazwę pliku strony, wtedy serwer będzie poszukiwał strony domyślnej w danym katalogu, która najczęściej ma nazwę "index.html". W przypadku braku takiej strony lub w przypadku błędnego podania nazwy strony serwer odeśle komunikat o błędzie); tekst odsyłający to ten napis, po kliknięciu którego użytkownik będzie mógł się przenieść do strony o adresie adres_url. Połączenia wykorzystujące odnośniki Jeśli chcesz robić odsyłacze do różnych miejsc tego samego lub innego dokumentu, to musisz najpierw zaznaczyć w docelowym dokumencie "gorące" miejsca - umieścić odnośniki. Robi się to przez wstawianie w miejscach, do których chcesz wykonywać skoki znaczników: <A NAME="nazwa"></A> gdzie nazwa jest identyfikatorem odnośnika - danego miejsca w dokumencie. Teraz odsyłacz do takiego miejsca wygląda następująco: W ramach tej samej strony: <A HREF="#nazwa>tekst odsyłający</a> Do innej strony: <A HREF="adres_url#nazwa">tekst odsyłający</a> Połączenia do poczty elektronicznej Jeśli chcesz w sposób wygodny dla użytkownika umieścić na swojej stronie odsyłacz do swojej skrzynki e-mail, by użytkownik mógł łatwo wysyłać Ci wiadomości itp., możesz to zrobić wpisując: <A HREF="mailto:osoba@adres">tekst odsyłający</a> gdzie osoba@adres jest Twoim adresem e-mail. Zakład Systemów Rozproszonych - 6 / 20
Zadanie 1. Wstaw dowolny odnośnik do innej strony WWW (możesz stworzyć drugi plik i odnosić się do niego). 2. Wstaw odnośnik do poczty e-mail. TABELE Tabele to jedna z bardzo użytecznych i elastycznych struktur języka HTML. Warto więc się z nimi lepiej zapoznać. Poleceniem, które wstawia do dokumentu tabele jest para znaczników: <TABLE> Wszystko, co dotyczy tabeli musi się znajdować pomiędzy tymi znacznikami. W HTML-u tabela podzielona jest na wiersze, a te z kolei na komórki. Tabelę dzielimy na wiersze za pomocą par znaczników Natomiast z wierszy wydzielamy pojedyncze komórki za pomocą znaczników <TD> </TD> Np. Przykład tabelki: <TABLE> <TD>a11</TD> <TD>a12</TD> <TD>a21</TD> <TD>a22</TD> a11 a12 a21 a22 Parametry całej tabeli ALIGN - Służy do określenia sposobu poziomego wyrównywania tabeli. Możliwe opcje to ALIGN= "left" "center" "right" ALIGN="left" wyrównuje tabelę do lewej <TABLE ALIGN="left">... Zakład Systemów Rozproszonych - 7 / 20
BORDER - Określenie szerokości (w punktach) obramowania tabeli. BORDER=liczba <TABLE BORDER=2>... BGCOLOR - ustalenie koloru tła całej tabeli. Są dwie możliwości, albo "określenie_koloru" może być jedną z predefiniowanych nazw kolorów, np "Yellow" albo szesnastkowym opisem natężenia kolejnych składowych koloru (tzn. rr-red; gg-green; bb-blue ), np."#ff00a0" BGCOLOR="określenie_koloru" "#rrggbb" <TABLE BORDER=3 BGCOLOR="#008000"> BORDERCOLOR - Za pomocą tej opcji ustalamy, jakiego koloru mają być obramowania tabeli. "określenie_koloru" może być jedną z predefiniowanych nazw kolorów, np "Yellow" lub szesnastkowym opisem natężenia kolejnych składowych koloru, np. "#FF00A0" <TABLE BORDER="2" BORDERCOLOR="Red"> BACKGROUND - W ten sposób ustalamy, że tłem dla wszystkich komórek tabeli ma być obrazek plik_graficzny. Będzie on wyświetlany w ten sposób, że lewy górny róg obrazka będzie znajdował się w lewym górnym rogu każdej komórki. Jeżeli komórki będą miały rozmiar mniejszy niż rozmiar obrazka, będzie on obcięty, jeżeli większy, będzie on powtarzany jak wzorek na tapecie. <TABLE BORDER="2" BACKGROUND="skuld.jpg"> CELLPADDING - Określa (w punktach) odstęp pomiędzy brzegiem komórki a jej zawartością. <TABLE BORDER="2" CELLPADDING="10"> CELLSPACING Ten parametr określa odstępy pomiędzy komórkami tabeli, tzn. przestrzeń pomiędzy obramowaniami poszczególnych komórek. <TABLE BORDER="2" CELLSPACING="10"> WIDTH - Określa szerokość tabeli. W pierwszym przypadku (podania liczby) jest to bezwzględna szerokość tabeli w punktach, w drugim (podania ilości procent, zakończonej znakiem %) będzie to wyrażony w procentach ułamek szerokości okna, w którym wyświetlana jest strona WWW. <TABLE BORDER="2" WIDTH="300"> Zadanie Stwórz tabele Plan lekcji. Uzupełnij ją dowolnymi danymi. Zakład Systemów Rozproszonych - 8 / 20
Parametry wiersza ALIGN VALIGN BGCOLOR BACKGROUND Parametry dotyczące wierszy umieszczane są jako opcje po znaczniku początku wiersza w tabeli <TR [..tu parametry..] > i wpływają one na cały wiersz do którego się odnoszą. Jest to więc często zawężenie poprzednich parametrów do obrębu jednego wiersza. UWAGA: opcje zdefiniowane w znaczniku są niejako "ważniejsze" niż te zdefiniowane dla całej tabeli i dzięki temu "przesłaniają" je powodując, że można ustalić pewne żądane parametry tylko dla jednego, konkretnego wiersza, podczas gdy cała reszta komórek tabeli będzie formatowana według opcji zawartych w znaczniku <TABLE> ALIGN - Służy do określenia sposobu poziomego wyrównywania zawartości komórek w wierszu. Możliwe opcje to: ALIGN= "left" "center" "right" ALIGN="left" wyrównuje zawartości komórek wiersza do lewej ALIGN="right" wyrównuje zawartości komórek wiersza do prawej ALIGN="center" wyśrodkowuje zawartości komórek wiersza <TABLE BORDER="2" WIDTH="90%"> <TR ALIGN="LEFT"> <TD>to są komórki wyrównywane do lewej</td> <TD>to również</td> <TR ALIGN="CENTER"> <TD>to jest komórka z centrowaną zawartością</td> <TD>i to też</td> <TR ALIGN="RIGHT"> <TD>a to jest komórka z zawartością wyrównywaną do prawej</td> <TD>podobnie ta</td> VALIGN - Ta opcja pozwala na ustalenie pionowego wyrównywania zawartości komórek w wierszu. VALIGN= "top" "middle" "bottom" VALIGN="top" wyrównuje zawartość komórek do góry VALIGN="middle" centruje pionowo zawartość komórek Zakład Systemów Rozproszonych - 9 / 20
VALIGN="bottom" wyrónuje zawartość komórek do dołu Następująca definicja tabeli <TABLE BORDER="2" WIDTH="90%"> <TR VALIGN="TOP"> <TD HEIGHT="50">to są komórki wyrównywane do góry</td> <TD>to również</td> <TR VALIGN="MIDDLE"> <TD HEIGHT="50">to jest komórka z centrowaną zawartością</td> <TD>i to też</td> <TR VALIGN="BOTTOM"> <TD HEIGHT="50">to jest komórka z zawartością wyrównywaną do dołu</td> <TD>podobnie ta</td> BGCOLOR - W ten sposób ustala się kolor tła komórek danego wiersza tabeli. Są dwie możliwości, albo "określenie_koloru" może być jedną z predefiniowanych nazw kolorów, np "Yellow" albo szesnastkowym opisem natężenia kolejnych składowych koloru (tzn. rr-red; gg-green; bb-blue ), np."#ff00a0" BGCOLOR="określenie_koloru" "#rrggbb" Ustalamy tło dla wszystkich komórek tabeli jako czerwone, a potem narzucamy, że w pierwszym wierszu komórki mają mieć tło niebieskie: <TABLE BORDER="3" BGCOLOR="Red"> <TR BGCOLOR="Blue"> <TD>a11</TD> <TD>a12</TD> <TD>a21</TD> <TD>a22</TD> BACKGROUND - Podobnie jak taki sam parametr dla tabeli, określa obrazek, który będzie tłem dla wszystkich komórek, ale tym razem właśnie danego wiersza. BACKGROUND="plik_graficzny" <TABLE BORDER="3"> <TR BACKGROUND="skuld.jpg"> <TD>a11</TD> Zakład Systemów Rozproszonych - 10 / 20
<TD>a12</TD> <TD>a21</TD> <TD>a22</TD> Parametry dotyczące pojedynczych komórek Parametry dotyczące właściwości pojedynczych komórek umieszczane są jako opcje po znaczniku początku komórki w tabeli <TD [..tu parametry..] > i wpływają one jedynie na daną komórkę. UWAGA: opcje zdefiniowane w znaczniku <TD> są niejako "ważniejsze" niż te zdefiniowane dla całej tabeli czy też dla całego wiersza i dzięki temu "przesłaniają" je powodując, że można ustalić pewne żądane parametry dla danej, konkretnej komórki, podczas gdy cała reszta komórek tabeli będzie formatowana według opcji zawartych w znaczniku <TABLE> a reszta komórek w wierszu, wg. opcji znacznika ALIGN - Służy do określenia sposobu poziomego wyrównywania zawartości komórki. ALIGN="left" wyrównuje zawartości komórki do lewej ALIGN= "left" "center" "right" ALIGN="right" wyrównuje zawartości komórki do prawej ALIGN="center" wyśrodkowuje zawartość komórki <TABLE WIDTH="90%"> <TD ALIGN="LEFT">do lewej</td> <TD ALIGN="CENTER">centrowana</TD> <TD ALIGN="RIGHT">do prawej</td> VALIGN - Służy do określenia sposobu pionowego wyrównywania zawartości komórki. VALIGN= "top" "middle" "bottom" VALIGN="top" wyrównuje zawartości komórki do góry VALIGN="middle" wyśrodkowuje zawartość komórki VALIGN="bottom" wyrównuje zawartości komórki do prawej <TABLE WIDTH="90%"> Zakład Systemów Rozproszonych - 11 / 20
<TD VALIGN="TOP">do góry</td> <TD VALIGN="MIDDLE">centrowana</TD> <TD VALIGN="BOTTOM">do dołu</td> WIDTH - Ten parametr określa szerokość komórki tabeli. Podanie liczby oznacza szerokość komórki w punktach, natomiast podanie ilości procent (zakończonej znakiem %) oznacza, że komórka bedzie miała właśnie tyle procent szerokości tabeli. WIDTH= "liczba" "ilosc_procent%" UWAGA: ustawienie szerokości dla jednej komórki powoduje oczywiście ustawienie takiej samej szerokości dla wszystkich komórek znajdujących się w tej samej kolumnie. W przypadku, gdy w tej samej kolumnie znajduje się kilka komórek z określoną szerokością, szerokość kolumny (a więc i pozostałych komórek) jest dopasowywana do najszerszej komórki. <TABLE BORDER="2" WIDTH="60%"> <TD WIDTH="70">szerokość 70pkt.</TD> <TD WIDTH="150">szerokość 150pkt.</TD> <TD WIDTH="50%">szerokość 50% tabeli</td> HEIGHT - W ten sposób określana jest wysokość pojedynczej komórki tabeli w punktach. HEIGHT= "liczba" UWAGA: określenie wysokości pojedynczej komórki, automatycznie określa wysokość wszystkich komórek w danym wierszu. <TABLE BORDER="2"> <TD HEIGHT="20">a11</TD> <TD>a12</TD> <TD>a13</TD> <TD HEIGHT="100">a21</TD> <TD>a22</TD> <TD>a23</TD> Zakład Systemów Rozproszonych - 12 / 20
BGCOLOR- W ten sposób określa się kolor tła pojedyńczej komórki. "określenie_koloru" może być jedną z predefiniowanych nazw kolorów, np "Blue" albo szesnastkowym opisem natężenia kolejnych składowych koloru (tzn. rr-red; gg-green; bb-blue ). BGCOLOR= "okreslenie_koloru" "#rrggbb" <TABLE BORDER="2"> <TD BGCOLOR="#800000">a11</TD> <TD>a12</TD> <TD>a21</TD> <TD BGCOLOR="Blue">a22</TD> BACKGROUND - Podobnie jak taki sam parametr dla tabeli czy wiersza, określa obrazek, który będzie tłem dla jednej konkretnej komórki. BACKGROUND="plik_graficzny" <TABLE WIDTH="70%" BORDER="2"> <TD HEIGHT="100" BACKGROUND="skuld.jpg">a11</TD> <TD>a12</TD> <TD HEIGHT="140" BACKGROUND="pinkrod.jpg">a21</TD> <TD>a22</TD> COLSPAN - Za pomocą tego parametru można połączyć poziomo sąsiednie komórki w jedną, przebiegająca przez kilka komórek wzdłuż jednego wiersza (a więc łącząca kilka kolumn, stąd nazwa). COLSPAN="liczba" <TABLE WIDTH="70%" BORDER="2" BGCOLOR="#C0C0C0"> <TD>a13</TD> <TD COLSPAN="2">(komórki a12+a13) tu chociażby nagłówek</td> <TD>a21</TD> <TD>a22</TD> <TD>a23</TD> Zakład Systemów Rozproszonych - 13 / 20
<TD>a31</TD> <TD>a32</TD> <TD>a33</TD> UWAGA: jeśli rozszerzamy komórkę na więcej kolumn (w przykładzie na dwie) to nie wpisujemy już znaczników komórki która została niejako "pochłonięta" przez rozszerzającą się komórkę, bo doprowadzi to do zaburzenia kompozycji. Dlatego pomiędzy pierwszą parą znaczników znajdują się tylko dwie pary znaczników <TD> </TD>. ROWSPAN - Za pomocą tego parametru można połączyć pionowo sąsiednie komórki w jedną, przebiegającą przez kilka komórek wzdłuż jednej kolumny (a więc łączącą kilka wierszy, stąd nazwa). ROWSPAN="liczba" <TABLE WIDTH="70%" BORDER="2" BGCOLOR="#C0C0C0"> <TD ROWSPAN="2">a11+a21</TD> <TD>a12</TD> <TD>a13</TD> <TD>a22</TD> <TD>a23</TD> <TD>a31</TD> <TD>a32</TD> <TD>a33</TD> UWAGA: jeżeli rozszerzamy komórkę na inne wzdłuż jednej kolumny, nie wpisujemy już ich znaczników na ich miejscach, bo zaburzy to kompozycję tabeli. ZADANIA: 1. Zmodyfikuj stworzony wcześniej plan lekcji uwzględniając poznane funkcje wierszy i komórek. Zakład Systemów Rozproszonych - 14 / 20
Ramki i układy ramek Układ ramek jest definiowany w pliku HTML, w którym element body zastąpiono elementem frameset. W elemencie tym określane są następujące cechy układu ramek: Sposób podziału okna na ramki. Liczba wierszy lub kolumn. Obszar ekranu przyporządkowany poszczególnym kolumnom/wierszom. Znacznik <frame> definiuje dokument, który zostanie umieszczony w danej ramce. Wartością jego atrybutu src jest adres url dokumentu html. Ogólna postać definicji układu ramek Ogólna postać definicji układu ramek przedstawiona została na wydruku Przy tworzeniu ramek należy pamiętać, że znaczniki <body> i <frameset> wzajemnie się wykluczają. Co więcej, znacznik <frameset> nie może zawierać innych znaczników formatujących, połączeń oraz dokumentów tekstowych. <html> <head> <title>tytuł strony</title> </head> <frameset atrybut= wartość > <frame src= url >... <frame src= url > </frameset> </html> Tworzenie ramek 1. Otwórz Notatnik i zapisz plik jako index.html a następnie wpisz poniższy kod będący ramką: PRZYKŁAD 1. <html> <head> <title>ramki w pionie</title> </head> <frameset cols="25%,75%"> <!-- Atrybut name definiuje nazwy ramek --> <frame src="nawigacja.html" name="nawigacja"> <frame src="strona.html" name="strona"> </frameset> </html> Układ ramek z wydruku to układ dwóch ramek. Za pomocą atrybutu name przypisano pierwszej z ramek nazwę nawigacja, a drugiej strona. 2. Zapisz plik jako index.html i otwórz nowy plik w którym napisz kod strony nawigacja: PRZYKŁAD 2. <html> <head> <title>nawigacja</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> Zakład Systemów Rozproszonych - 15 / 20
</head> <body> <h3>wybierz interesujący cię temat: </h3> <!-- lista połączeń --> <ul> <!-- Zwróć uwagę na atrybut target jego wartością jest nazwa ramki --> <li><a href="strona.html" target="strona">strona 1</a> <li><a href="strona1.html" target="strona">strona 2</a> <li><a href="strona2.html" target="strona">strona 3</a> </ul> </body> </html> 3. Zapisz plik jako nawigacja.html W tym pliku html został wykorzystany element ul tworzący listę wypunktowaną. Elementami listy są połączenia prowadzące do kolejnych plików html: <li><a href="strona1.html" target="strona">strona 2</a> Połączenia są definiowane za pomocą znacznika <a>, który przyjmuje dwa atrybuty: href i target. Wartością atrybutu src są adresy url plików wyświetlanych w szerszej z ramek Ramka ta jest wskazywana jako cel połączeń za pomocą atrybutu target jego wartością jest nazwa szerszej ramki. Atrybut target ma kluczowe znaczenie w definiowaniu systemu nawigacji między ramkami. Ramkom warto nadawać nazwy, nawet jeśli w danej chwili nie korzystasz z nich. 4. Otwórz nowy plik i zapisz go jako strona.html a następnie wpisz poniższy kod: <html> <head> <title>strona</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> </head> <body> <!-- Wstaw tu dowolną zawartość --> <h2>to jest plik o nazwie strona.html.</h2> <p>jeśli chcesz wyświetlić inny plik, kliknij połączenie...</p> </body> </html> 5. Zapisz plik i otwórz plik index.html w przeglądarce. Klikając połączenia w ramce nawigacyjnej, będziesz wyświetlał w ramce z prawej strony kolejne dokumenty html składające się na Twoją witrynę. Zakład Systemów Rozproszonych - 16 / 20
Kod html poziomego układu ramek Prosty układ dwóch ramek, dzielących ekran w poziomie. W pierwszej, węższej, będzie mieścić się banner, a w drugiej, szerszej, dokument html. Wąskiej rameczce narzucimy stałą wysokość, na przykład 75 pikseli. Druga ramka niech wypełni pozostałą część ekranu. 1. Otwórz Notatnik i wpisz następujący kod: <html> <head> <title>ramki poziome</title> </head> <frameset rows="75,*"> <frame src="baner.html"> <frame src="strona.html"> </frameset> </html> 2. Zapisz plik jako strony index.html 3. Otwórz nowy plik i zapisz go jako banner.html w pliku tym umieszczony zostanie banner w tym celu wpisz poniższy kod: <html> <head> <title>banner</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> </head> <body> <marquee><h1>oto najwspanialsza strona WWW na świecie!!!<h1></marquee> </body> </html> Plik baner.html to prostu dokument html, który zawiera napis reklamowy. Napis ten będzie płynnie przewijany w poprzek ekranu. Wykorzystana tu została prosta metoda tworzenia animacji tekstowych, tak zwanych animacji Marquee. Aby utworzyć taką animację, wpisz między znacznikami <marquee> </marquee> dowolny tekst. Znacznik ten ma swoje atrybuty zostały one zebrane w tabeli. 4. Zapisz ponownie plik banner.html i otwórz nowy plik zapisując go pod nazwą strona.html, a w niej wpisz poniższy kod: <html> <head> <title>strona </title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> </head> <body> <h1>to jest ramka, w której wyświetlana będzie strona</h1> </body> </html> 5. Zapisz plik i otwórz w przeglądarce plik index.htm. Na poniższym rysunku pokazane zostały efekty pracy okno przeglądarki zostało podzielone na dwie poziome ramki. Zakład Systemów Rozproszonych - 17 / 20
Mieszane ramki poziome i pionowe Łączenie poziomych i pionowych układów ramek pozwala budować skomplikowane układy, przypominające szachownicę. Aby utworzyć mieszany układ ramek, konieczne jest zagnieżdżenie elementu frameset w innym elemencie frameset. Utworzymy taki układ ramek, który umożliwia jednoczesną prezentację trzech dokumentów. 1. Otwórz Notatnik i wpisz w nim poniższy kod zapisując plik jako index.html <html> <head> <title>mieszany układ ramek</title> </head> <frameset rows="50%,50%"> <frame src="ramka_a.html"> <frameset cols="25%,75%"> <frame src="ramka_b.html"> <frame src="ramka_c.html"> </frameset> </frameset> </html> Konieczne jest przygotowanie plików ramka_a.html zawartość górnej ramki, ramka_b.html zawartość dolnej lewej ramki, i ramka_c.html zawartość dolnej prawej ramki. 2. Zapisz plik i otwórz nowy plik i zapisz jako ramka_a.html a w nim wpisz poniższy kod: <html> <head> <title>ramka_a</title> </head> <body> To jest plik ramka_a.html.. </body> </html> Zakład Systemów Rozproszonych - 18 / 20
3. Zapisz plik i stwórz podobne pliki jak ramka_a.html tj. ramka_b.html, ramka_c.html Podstawowe atrybuty znacznika <frame> Nazwa longdesc= url marginheight= piksele marginwidth piksele frameborder= 0 1 noresize= true false scrolling= yes no auto name= nazwa_ramki src= url Opis Połączenie do strony zawierającej obszerny opis ramki. Stosuj tam, gdzie spodziewasz się, że ramki nie będą obsługiwane. Wysokość marginesu. Szerokość marginesu. Określa, czy obramowanie ramki ma być wyświetlane. Określa, czy użytkownik ma możliwość zmiany rozmiarów ramki. Definiuje sposób przewijania ramki. Nazwa ramki. Podaje ulokowanie pliku, który zostanie wyświetlony w ramce. Nazwy specjalne ramek: _blank _self _top _parent Nazwa Opis Otwiera stronę w nowym oknie. Otwiera stronę w bieżącej ramce lub oknie. Jest to ustawienie domyślne. Korzysta się z tej nazwy, aby zniwelować działanie ustawienia w znaczniku <base> (czyli wyświetlenie dokumentu w ramce domyślnej, wskazanej przez ten znacznik). Powoduje, że ładowany dokument jest wyświetlany w oknie umieszczonym na wierzchu stosu i zajmuje całe okno, zastępując układ ramek. Umożliwia to ucieczkę ze środowiska ramek. Dokument jest ładowany do ramki nadrzędnej względem ramki zawierającej bieżący dokument. Atrybuty znacznika <marquee> Atrybut behavior= scroll slide alternate direction= right left loop= liczba infinite Działanie scroll napis przesuwa się z prawej strony do lewej. slide napis przesuwa się do lewego marginesu i zatrzymuje się. alternate tekst pojawia się z lewej strony, po czym odbija się od marginesów. Tylko z atrybutem scroll; określa kierunek animowanego tekstu. Liczba powtórzeń przewinięć tekstu. Zakład Systemów Rozproszonych - 19 / 20
scrollamount= liczba scrolldelay= milisekundy bgcolor= definicja koloru height= wartość% piksele width= wartość% piksele hspace= piksele vspace= piksele Liczba pikseli, o jaką przesuwa się tekst w pojedynczym kroku. Opóźnienie między kolejnymi krokami animacji. Zmienia kolor w obszarze, po którym przesuwa się napis. Wymiary obszaru, po którym przesuwa się napis. Odległość obszaru od bocznych (hspace) oraz górnej i dolnej krawędzi okna (vspace). ZADANIA: 1. Wpisz wszystkie powyższe przykłady. 2. Zmodyfikuj stworzone wcześniej strony WWW wykorzystując mechanizm ramki. 3. Zmodyfikuj stworzoną stronę WWW z pkt. 2, tak aby każda część ramki miała inny kolor itp. Zakład Systemów Rozproszonych - 20 / 20