LABORATORIUM Aplikacje internetowe Powtórzenie

Transkrypt

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
Opis
TEXT=kolor
Określa domyślny kolor tekstu na stronie HTML
Z ak ład Systemów R ozproszonych - 1 / 20
BGCOLOR=kolor
Określa domyślny kolor tła strony HTML
LINK=kolor
Określa domyślny kolor odsyłaczy hipertekstowych do
stron jeszcze nie odwiedzanych (ang. Hyperlink)
VLINK=kolor
Określa domyślny kolor odsyłaczy hipertekstowych do
stron już odwiedzonych (ang. Visited Hyperlink)
ALINK=kolor
Określa domyślny kolor odsyłaczy hipertekstowych w
momencie ich wciśnięcia (ang. Active Hyperlink)
BACKGROUND=
adres_pliku_obrazka
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.
TOPMARGIN="n"
Ustawia górny margines strony na n pikseli (punktów na
ekranie)
LEFTMARGIN="n"
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
Powoduje średnie wyróżnienie tekstu. Z reguły (np. na
Windows) powoduje on pochylenie tekstu.
<STRONG>..</STRONG> Logiczny
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>
Logiczny
Działa różnie. Z reguły (np. na Windows) powoduje on
pochylenie tekstu (Citation).
<DFN>..</DFN>
Logiczny
pochylenie tekstu (Definition).
<SAMP>..</SAMP>
Logiczny
wypisanie tekstu czcionką o stałej szerokości (Sample).
<CODE>..</CODE>
Logiczny
wypisanie tekstu czcionką o stałej szerokości (Code).
<VAR>..</VAR>
Logiczny
wypisanie tekstu czcionką o stałej szerokości (Variable).
<KBD>..</KBD>
Logiczny
wypisanie tekstu czcionką o stałej szerokości (Keyboard).
<TT>..</TT>
Fizyczny
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
(Superscript).
<SUB>..</SUB>
Fizyczny
Powoduje wypisanie tekstu jako indeks dolny (Subscript).
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.
<FONT COLOR=kolor>
Fizyczny
..</FONT>
Ustawia kolor czcionki w wybranym tekście na "kolor".
Można stosować razem za znacznikiem.
<BASEFONT SIZE="n">
Logiczny
<BASEFONT
fizyczny
COLOR=kolor>
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.
<BIG>..</BIG>
Powoduje zwiększenie o jeden wielkości czcionki (patrz
FONT SIZE).
<FONT
SIZE="n">..</FONT>
Logiczny
tekstu
jako
indeks
górny
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>
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
To jest tekst normalny a to jest indeks górny
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">
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>
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.
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"
VSPACE=3 ALT="To jest opis obrazka">
BORDER=1
WIDTH=320
HEIGHT=240
HSPACE=5
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.
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>
</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
<TR>
</TR>
Natomiast z wierszy wydzielamy pojedyncze komórki za pomocą znaczników
<TD>
</TD>
Np. Przykład tabelki:
<TABLE>
<TR>
a11 a12
<TD>a11</TD>
<TD>a12</TD>
a21 a22
</TR>
<TR>
<TD>a21</TD>
<TD>a22</TD>
</TR>
</TABLE>
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
Przykład:
<TABLE ALIGN="left">...
BORDER - Określenie szerokości (w punktach) obramowania tabeli.
BORDER=liczba
Przykład:
<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"
Przykład:
<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"
Przykład:
<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.
Przykład:
<TABLE BORDER="2" BACKGROUND="skuld.jpg">
CELLPADDING - Określa (w punktach) odstęp pomiędzy brzegiem komórki a jej zawartością.
Przykład:
<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.
Przykład:
<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.
Przykład:
<TABLE BORDER="2" WIDTH="300">
Zadanie
Stwórz tabele – Plan lekcji. Uzupełnij ją dowolnymi danymi.
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 <TR> 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" 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
Przykład:
<TABLE BORDER="2" WIDTH="90%">
<TR ALIGN="LEFT">
<TD>to są komórki wyrównywane do lewej</TD>
<TD>to również</TD>
</TR>
<TR ALIGN="CENTER">
<TD>to jest komórka z centrowaną zawartością</TD>
<TD>i to też</TD>
</TR>
<TR ALIGN="RIGHT">
<TD>a to jest komórka z zawartością wyrównywaną do prawej</TD>
<TD>podobnie ta</TD>
</TR>
</TABLE>
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
VALIGN="bottom" wyrónuje zawartość komórek do dołu
Przykład:
Następująca definicja tabeli
<TR VALIGN="TOP">
<TD HEIGHT="50">to są komórki wyrównywane do góry</TD>
<TD>to również</TD>
</TR>
<TR VALIGN="MIDDLE">
<TD HEIGHT="50">to jest komórka z centrowaną zawartością</TD>
<TD>i to też</TD>
</TR>
<TR VALIGN="BOTTOM">
<TD HEIGHT="50">to jest komórka z zawartością wyrównywaną do dołu</TD>
<TD>podobnie ta</TD>
</TR>
</TABLE>
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"
Przykład:
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>
</TR>
<TR>
<TD>a21</TD>
<TD>a22</TD>
</TR>
</TABLE>
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"
Przykład:
<TABLE BORDER="3">
<TR BACKGROUND="skuld.jpg">
<TD>a11</TD>
<TD>a12</TD>
</TR>
<TR>
<TD>a21</TD>
<TD>a22</TD>
</TR>
</TABLE>
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 <TR>
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="right" wyrównuje zawartości komórki do prawej
ALIGN="center" wyśrodkowuje zawartość komórki
Przykład:
<TABLE WIDTH="90%">
<TR>
<TD ALIGN="LEFT">do lewej</TD>
<TD ALIGN="CENTER">centrowana</TD>
<TD ALIGN="RIGHT">do prawej</TD>
</TR>
</TABLE>
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
Przykład:
<TABLE WIDTH="90%">
<TR>
<TD VALIGN="TOP">do góry</TD>
<TD VALIGN="MIDDLE">centrowana</TD>
<TD VALIGN="BOTTOM">do dołu</TD>
</TR>
</TABLE>
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.
Przykład:
<TR>
<TD WIDTH="70">szerokość 70pkt.</TD>
<TD WIDTH="150">szerokość 150pkt.</TD>
<TD WIDTH="50%">szerokość 50% tabeli</TD>
</TR>
</TABLE>
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.
Przykład:
<TABLE BORDER="2">
<TR>
<TD HEIGHT="20">a11</TD>
<TD>a12</TD>
<TD>a13</TD>
</TR>
<TR>
<TD HEIGHT="100">a21</TD>
<TD>a22</TD>
<TD>a23</TD>
</TR>
</TABLE>
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"
Przykład:
<TABLE BORDER="2">
<TR>
<TD BGCOLOR="#800000">a11</TD>
<TD>a12</TD>
</TR>
<TR>
<TD>a21</TD>
<TD BGCOLOR="Blue">a22</TD>
</TR>
</TABLE>
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"
Przykład:
<TABLE WIDTH="70%" BORDER="2">
<TR>
<TD HEIGHT="100" BACKGROUND="skuld.jpg">a11</TD>
<TD>a12</TD>
</TR>
<TR>
<TD HEIGHT="140" BACKGROUND="pinkrod.jpg">a21</TD>
<TD>a22</TD>
</TR>
</TABLE>
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"
Przykład:
<TABLE WIDTH="70%" BORDER="2" BGCOLOR="#C0C0C0">
<TR>
<TD>a13</TD>
<TD COLSPAN="2">(komórki a12+a13) tu chociażby nagłówek</TD>
</TR>
<TR>
<TD>a21</TD>
<TD>a22</TD>
<TD>a23</TD>
</TR>
<TR>
<TD>a31</TD>
<TD>a32</TD>
<TD>a33</TD>
</TR>
</TABLE>
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
<TR> </TR> 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"
Przykład:
<TABLE WIDTH="70%" BORDER="2" BGCOLOR="#C0C0C0">
<TR>
<TD ROWSPAN="2">a11+a21</TD>
<TD>a12</TD>
<TD>a13</TD>
</TR>
<TR>
<TD>a22</TD>
<TD>a23</TD>
</TR>
<TR>
<TD>a31</TD>
<TD>a32</TD>
<TD>a33</TD>
</TR>
</TABLE>
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.
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%">

<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">
</head>
<body>
<h3>Wybierz interesujący cię temat: </h3>

<ul>

<li><a href="strona.html" target="strona">strona 1</a>
<li><a href="strona1.html" target="strona">strona 2</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:
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>
</head>
<body>

<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ę.
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>
</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>
</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.
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>
3. Zapisz plik i stwórz podobne pliki jak ramka_A.html tj. ramka_B.html, ramka_C.html
Podstawowe atrybuty znacznika <frame>
Nazwa
Opis
longdesc=”url”
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.
marginheight=”piksele”
marginwidth”piksele”
frameborder=”0|1”
noresize=”true|false”
scrolling=”yes|no|auto”
name=”nazwa_ramki”
src=”url”
Nazwy specjalne ramek:
Nazwa
Opis
_blank
Otwiera stronę w nowym oknie.
_self
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).
_top
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.
_parent
Dokument jest ładowany do ramki nadrzędnej względem ramki zawierającej bieżący
dokument.
Atrybuty znacznika <marquee>
Atrybut
Działanie
behavior=”
scroll|slide|alternate”
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.
direction=” right|left”
Tylko z atrybutem scroll; określa kierunek animowanego tekstu.
loop=” liczba|infinite”
Liczba powtórzeń przewinięć tekstu.
scrollamount=” liczba”
Liczba pikseli, o jaką przesuwa się tekst w pojedynczym kroku.
scrolldelay=” milisekundy”
Opóźnienie między kolejnymi krokami animacji.
bgcolor=”definicja koloru”
Zmienia kolor w obszarze, po którym przesuwa się napis.
height=”wartość%|piksele”
Wymiary obszaru, po którym przesuwa się napis.
width=”wartość%|piksele
hspace=”piksele”
vspace=”piksele”
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.

LABORATORIUM Aplikacje internetowe Powtórzenie

Transkrypt

Podobne dokumenty

Niezwykła wystawa w Muzeum Śląska Opolskiego

Zdjęcie znaków z czeskich skrzyżowań

Mistrzostwa Nysy w siatkówce plażowej

Krzysztof Czerwonka – Kurs HTML

Najlepsi bębniarze świata w Opolu