docINFORMACJE DO ZAPAMIĘTANIA
download 
Reklamacja Transkrypt
INFORMACJE DO ZAPAMIĘTANIA
INFORMACJE DO ZAPAMIĘTANIA
Do opisywania wyglądu witryn internetowych wykorzystywane są kaskadowe arkusze stylów CSS.
W języku JavaScript można tworzyć skrypty działające po stronie przeglądarki, aby nasza witryna
była widoczna dla innych, musimy składające się na nią pliki umieścić na serwerze WWW.
Przykładowy szkielet dokumentu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tytuł</title>
</head>
<body>
Tu znajduje się cała zawartość dokumentu wyświetlana przez przeglądarki.
</body>
</html>
Fragmenty materiałów ze strony:
http://webmaster.helion.pl/index.php/kurs-html
Definicja typu dokumentu
Jak wspomnieliśmy we wstępie, ramki nie są już obecne w specyfikacji HTML 4.01 Strict, a
jedynie w HTML 4.01 Transitional i Frameset. Jeśli stosujesz w swojej witrynie ramki, strona
zawierająca definicję ramek powinna mieć podaną następującą deklarację typu dokumentu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Również ramka, w której znajdują się odsyłacze wczytujące dokumenty do innej ramki nie może
mieć deklaracji Strict, gdyż nie przewiduje ona atrybutu target. Dlatego konieczne jest użycie
deklaracji Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Czym jest odsyłacz?
Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce w Internecie i pozwala skoczyć do
niego za pomocą kliknięcia na niej myszką. Jej budowę można obrazowo przedstawić w postaci:
<a href="miejsce_docelowe">Tekst, na którym należy kliknąć</a>
Gdy utworzymy odsyłacz, ciąg znaków "tekst, na którym należy kliknąć" będzie zaznaczony innym
kolorem, zazwyczaj niebieskim, i podkreślony (choć można to zmienić). Na przykład odsyłacz do
miesięcznika PC World Komputer:
<a href="http://www.pcworld.pl">Tutaj znajdziesz miesięcznik PC World Komputer</a>
Tutaj znajdziesz miesięcznik PC World Komputer
Gdy przesuniesz kursor myszki nad odsyłacz, kursor przyjmie postać rączki, natomiast w wierszu
statusu przeglądarki powinna się pojawić informacja http://www.pcworld.pl. Kliknięcie
spowoduje natychmiastowy skok do wskazanego miejsca ("natychmiastowość" jest pojęciem
względnym - niekiedy trwa to całkiem długo, jeśli łącza są przeciążone...).
Odsyłacz do pliku tekstowego TXT
<a href="plik_tekstowy.txt">Plik tekstowy TXT</a>
Plik tekstowy TXT
Odsyłacz do pliku graficznego GIF
<a href="plik_graficzny.gif">Plik graficzny GIF</a>
Plik graficzny GIF
Odsyłacz do pliku dźwiękowego
<a href="pinkpant.mid">Plik dźwiękowy</a>
Plik dźwiękowy
Odsyłacz do pliku PDF
<a href="licence.pdf">dokument PDF</a>
Czcionka pogrubiona
Kod:
<b> </b>
Przykład:
To jest czcionka pogrubiona (bold)
Czcionka pochylona
Kod:
<i> </i>
Przykład:
To jest czcionka pochylona (italic)
Czcionka o stałej szerokości znaku
Kod:
<tt> </tt>
Przykład:
To jest czcionka monotypiczna, o stałej szerokości znaku (fixed
width = teletype)
Duża czcionka (+1 punkt)
Kod:
<big> </big>
Przykład:
Duża czcionka
Mała czcionka (-1 punkt)
Kod:
<small> </small>
Przykład:
Mała
czcionka
Wstawianie grafiki do dokumentu
Podstawowa konstrukcja ma następującą postać:
<img src="/sciezka/plik_graficzny" alt="nazwa alternatywna">
Img jest skrótem od Image (obraz), natomiast src jest skrótem od Source (żródło). Alt jest nazwą
alternatywną, a więc taką, która poinformuje o zawartości ilustracji w urządzeniu nie odczytującym
grafiki.
eśli nie stosujemy żadnych dodatkowych atrybutów, obrazek jest ustawiany przy lewym brzegu
dokumentu i ma wielkość oryginału. Możemy jednak użyć szeregu atrybutów, które zmienią
położenie, wielkość i inne cechy obrazka.
Przeglądarka automatycznie odczytuje właściwą wysokość i szerokość ilustracji, ale zazwyczaj w
edytorach HTML wielkości te są jawnie wstawiane, np.
<img src="/grafika/sufinka.jpg" width="342" height="353" alt="Sufi w tulipanach">
Jeśli z jakichś powodów zależy nam na deformacji oryginalnych wymiarów, możemy je ręcznie
zmienić, podając arbitralnie inne rozmiary, na przykład:
<img src="/grafika/sufinka.jpg" height="150" width="200" alt="Sufi w tulipanach">
Należy przy tym pamiętać, ze zmniejszenie rozmiarów w definicji nie wpływa na wielkość
pobieranego obrazka - jest on pobierany w oryginalnym rozmiarze, a następnie zmniejszany przez
przeglądarką. Przy zwiększaniu wymiarów w stosunku do wartości oryginalnych pamiętajmy
również o malejącej rozdzielczości obrazka na ekranie przeglądarki.
Obramowania i odstępy
W starszych wersjach HTML stosowano atrybut border, za pomocą którego nadawano grafice
obwódkę. Obecnie jest to atrybut przestarzały, natomiast jego rolę przejęły style CSS, o znacznie
większych możliwościach - obramowanie border lub obrys outline.
<img src="/grafika/sufinka.jpg" width="171" height="177" alt="Sufi w tulipanach" style="border:
5px red solid; ">
Pozycja grafiki
W starszych wersjach HTML stosowano atrybut align (left, center, right), za pomoca którego
ustawiano grafikę przy lewym lub prawym marginesie, względnie na środku wiersza. Obecnie jest
to atrybut przestarzały, natomiast jego rolę przejęły style CSS.
Ogólne ramy tabeli
Ramy tabeli tworzone są za pomocą polecenia:
<table> </table>
Cała zawartość tabeli musi być umieszczona między tymi dwoma znacznikami, które stanowią jej
delimitery. W ich ramach są umieszczane definicje rzędów, definicje komórek w rzędach, konkretne
dane w komórkach, tytuł tabeli i nagłówki wierszy i kolumn.
Wiersze tabeli wprowadzamy za pomocą polecenia:
<tr> </tr>
Wiersz tabeli jest jej konkretyzacją, a sam tworzy z kolei ramy dla komórek z danymi. W ramach
<table> </table> można umieścić wiele kolejnych definicji wierszy <tr> </tr>, dla przykładu:
<table>
<tr> </tr>
<tr> </tr>
<tr> </tr>
</table>
Komórka w wierszu
Komórki tabeli wprowadzamy za pomocą polecenia:
<td> </td>
Komórka zawiera już konkretne dane. Między jej znacznikami można umieszczać tekst i grafikę.
Konkretne komórki są umieszczane między znacznikami wybranego wiersza, na przykład:
<table>
<tr> <td> </td><td> </td><td> </td></tr>
<tr> <td> </td><td> </td><td> </td></tr>
<tr> <td> </td><td> </td><td> </td></tr>
</table>
Uwaga: dla przejrzystości obrazu dokumentu w edytorze HTML warto umieszczać definicje
wierszy tabeli jedną pod drugą, natomiast definicje kolejnych komórek obok siebie, co symuluje
układ wierszy i kolumn w całej tabeli. Oczywiście komórki można opisywać w edytorze także w
kolejnych rzędach, co naturalnie nie wpływa na ich faktyczne położenie w przeglądarce,
wyznaczone przez definicję wiersza. Sposób pisania to kwestia wygody użytkownika.
Przykład tabeli:
a1 a2 a3 a4 a5
b1 b2 b3 b4 b5
c1 c2 c3 c4 c5
Jak widać, tabela zawiera 3 rzędy, w każdym po 5 komórek, zaś w konkretnych komórkach (w
ramach znaczników <td> </td>) zostały umieszczone dane: od a1 do c5. Jest to najprostszy
przykład tabeli, która nie zawiera żadnych obramowań, barw, nagłówków i podpisu. Za chwilę
przystąpimy do urozmaicania tabeli, dzięki czemu znacznie wzrośnie jej przejrzystość i wartość
informacyjna.
Obramowanie tabeli
Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o atrybut border. Jeśli
nie podamy szerokości obramowania, przyjmowana jest jej domyślna wartość.
<table border> </table>
a1 a2 a3 a4 a5
b1 b2 b3 b4 b5
c1 c2 c3 c4 c5
Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona odpowiednio zinterpretowana
przez przeglądarkę, na przykład:
<table border="10"> </table>
Szerokość tabeli
Dotychczas tworzyliśmy tabele, które przybierały domyślną szerokość na ekranie przeglądarki.
Atrybut width daje nam możliwość samodzielnego zdefiniowania szerokości tabeli. Podany atrybut
jest "silniejszy" od innych atrybutów, które wpływają na szerokość tabeli na ekranie.
<table border width="600"> </table>
Spowoduje to wyświetlenie tabeli o podanej szerokości w pikselach.
Ogólne ramy formularza
Elementy formularza są tworzone w pewnych ogólnych ramach, między nimi umieszczamy
wszystkie pozostałe elementy. Ramy te tworzymy za pomocą polecenia:
<form> </form>.
Kolejnym ważnym punktem jest akcja, która jest wykonywana przez komputer, gdy czytelnik
strony zechce przesłać do autora jakieś informacje. Nas interesuje w tym miejscu wysyłanie
informacji za pomocą poczty elektronicznej, w związku z czym w definicji formularza powinniśmy
umieścić specjalne polecenie action=jakaśtamakcja. Należy również określić sposób
komunikowania się przeglądarki czytelnika z serwerem, a więc czy przesyła ona jakieś informacje,
czy też je pobiera. Wybieramy zatem jedną z dwóch możliwych metod - post lub get. Wygląda to
więc ostatecznie następująco (zakładamy, że czytelnik strony ma wysłać informacje za pomocą
poczty elektronicznej):
<form action="mailto:autor_strony@jego_domena" method="post">
zawartość formularza
</form>
Jeśli dodasz jeszcze temat listu, czyli subject po znaku zapytania, wypełniony formularz trafi do
autora z taką właśnie informacją w polu tematu listu. Jeśli zamieszczamy na stronie kilka
formularzy z ankietami, każdą z nich możemy opatrzyć innym tematem, co ułatwi np. organizację
odbieranej poczty, a także da od razu szybką informację o tym, czego dotyczy konkretna przesyłka.
<form action="mailto:autor_strony@jego_domena?subject=Temat ankiety" method="post">
zawartość formularza
</form>
I jeszcze jeden istotny parametr:
Gdyby ktoś wysłał tak skonstruowany formularz , dane dotarłyby nie w liście, a w załączniku, i to
mniej więcej w takiej postaci:
Imi%EA+i+nazwisko=Jan+Kowalski&P%B3e%E6=m%EA%BFczyzna&Wiek=31-40&
zaj%EAcie=emerytura&Miejscowo%9C%E6=50100&komputer=PC+Pentium&system=on&
Przegl%B9darka+WWW=Netscape+Navigator&
Ocena=bdb&Opinia=prosilbym+o+podobny+kurs+jezyka+java&submit=Wy%9Clij
Problem polega na tym, że znaki z formularza są w dość osobliwy sposób konwertowane i docierają
częściowo w postaci "krzaków". Jeśli nie chcemy, aby odpowiedź przychodziła w postaci
"zaszyfrowanego" załącznika, lecz w czytelnej postaci w ramach listu, powinniśmy zastosować
parametr enctype="text/plain".
<form enctype="text/plain" action="mailto: [email protected]?subject=Temat ankiety"
method="post">
A oto, co zobaczymy w otrzymanym liście:
Imię i nazwisko=Jan Kowalski
Płeć=mężczyzna
Wiek=31-40
zajęcie=praca
Miejscowość=powyżej 1000
komputer=PC Pentium
system operacyjny=Windows 95
Przeglądarka WWW=Internet Explorer
Przeglądarka WWW=Netscape Navigator
Ocena=bdb
Opinia=Genialne
ąćęłńóśźż
ĄĆĘŁŃÓŚŹŻ
Pole tekstowe
Jak wspomnieliśmy wyżej, input służy o wprowadzania pól, które pozwolą czytelnikowi wpisać
jakąś informację lub wybrać jedną z opcji.
Pole tekstowe tworzymy za pomocą definicji:
<input type="text" name="nazwa_pola" value="wartość początkowa" size="rozmiar pola w
znakach" maxlength="maksymalny rozmiar pola">
Na przykład:
<input type="text" name="nazwisko" value="Kowalski" size="30" maxlength="40">
A łącznie z informacją wprowadzającą:
<p>Podaj swoje nazwisko: <input type="text" name="nazwisko" value="Kowalski" size="30"
maxlength="40"></p>t;text/javascript"
src="http://webmaster1.helion.pl/plugins/editors/jce/tiny_mce/themes/advanced/langs/en.js?
version=156">
Budowa strony ramkowej
Najbardziej typowym przykładem użycia ramek jest podział okna przeglądarki na dwa pionowe
okna i umieszczenie w jednym (zwykle lewym, mniejszym) spisu treści, a przeznaczenie drugiego
(prawego, większego) na przywoływane dokumenty (odrębne strony HTML), dowiązane do
poszczególnych pozycji spisu. Kliknięcie na jakiejkolwiek pozycji spisu w lewym oknie powoduje
wczytanie dokumentu do okna z prawej strony.
Podstawową rolę w "ramkowym" dokumencie pełni specjalna strona, na której definiujemy liczbę,
wielkość i pozycję ramek oraz zachowanie się innych dokumentów w momencie uaktywnienia
łącza hipertekstowego. Jest ona kontenerem dla ramek. Pozostałe strony, wchodzące w skład
całego, wielostronicowego układu, są stronami podrzędnymi.
Zauważmy od razu, że na podstawowej stronie nie powinno być żadnych znaczników poza blokiem
nagłówkowym i definicją samych ramek. Dopiero znaczniki noframes pozwalają umieścić treść,
która będzie wyświetlana przez przeglądarki nie interpretujące ramek. Znaczniki <body></body>
mogą być umieszczane jedynie w obrębie noframes, aczkolwiek ich obecność nie jest konieczna.
Poniższy przykład obrazuje znaczniki wprowadzone na fikcyjnej stronie prezentującej kilka
edytorów HTML. Za chwilę wyjaśnimy ich znaczenie, a oto przykład.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Edytory HTML</title>
</head>
<frameset cols="25%,*%">
<frame scrolling="auto" name="lista edytorów" src="spisedyt.htm">
<frame scrolling="yes" name="edytory" src="edyt.htm">
<noframes>
<body>
Zawartość strony dla przeglądarek nie obsługujących ramek
</body>
</noframes>
</frameset>
</html>
Wyjaśnienie znaczników
Kluczowe znaczenie ma para znaczników <frameset> </frameset>. Stanowią one, z dodatkowymi
parametrami, ramy dla całej konstrukcji i między nimi są umieszczane bardziej szczegółowe
znaczniki, dotyczące liczby ramek, podziału strony i wielkości ramek.
Zwróćmy uwagę na "wyłamującą się" parę znaczników <noframes> </noframes>, o której
będziemy mówić nieco niżej. Służą one do wprowadzenia elementów strony, które będą widoczne
dla posiadacza przeglądarki, która nie akceptuje ramek. Jeśli natomiast czytelnik strony posługuje
się nowoczesną przeglądarką, wszelkie informacje między tymi znacznikami zostaną zignorowane.
W ten sposób autor strony może utworzyć dokument uniwersalny, uniezależniony od konkretnej
przeglądarki. Nietrudno się domyślić, że treść między znacznikami <noframes> </noframes>
powinna stanowić swoisty równoważnik strony "ramkowej". Odradzamy raczej stosowany dość
często komunikat "Twoja przeglądarka nie obsługuje ramek" - szacunek dla gości strony wymaga
obsłużenia także tej wąskiej grupy, która z jakichś powodów posługuje się programami nie
akceptującymi ramek. Wygodnym rozwiązaniem może być podanie w ramach elementu noframes
odsyłacza do strony ze spisem treści, która posłuży takiej osobie jako punkt centralny.
Znacznik <frame> służy do wprowadzenia konkretnej ramki. Znacznik jest uzupełniany
dodatkowymi parametrami, mówiącymi o zawartości (zagnieżdżone strony), o tym, czy ramka
zawiera suwaki, a także definiującymi nazwę ramki.
Znacznik frameset
Aby konstrukcja mogła działać, konieczne jest podzielenie okna przeglądarki - pionowe lub
poziome. Poniższy kod (kontynuujemy nasz przykład) zawiera informację o podzieleniu okna na
dwie kolumny. Służy do tego atrybut cols="x,y", umieszczany w otwierającym znaczniku
frameset. Liczby x i y służą do liczbowego określenia szerokości ramek. Możemy podać obie
wartości w pikselach, w procentach szerokości strony, a także określić szerokość jednej kolumny i
oznaczyć szerokość drugiej za pomocą wieloznacznika * (ma to sens przy podziale na większą
liczbę kolumn lub wierszy).
Przykład, w którym lewa ramka zajmuje 18% szerokości okna przeglądarki, a prawa ramka - 82%:
<frameset cols="18%,82%">
Gdybyśmy dzielili stronę na trzy wiersze, moglibyśmy, przez analogię, użyć konstrukcji, w której
np. górna ramka ma 200 pikseli, dolna 200 pikseli, a środkowa zajmuje pozostały obszar, zależny
od wielkości okna przeglądarki:
<frameset rows="200,*,200">
Znacznik frame
Sam podział na ramki to nie wszystko. Należy im jeszcze przypisać jakieś dokumenty, zazwyczaj w
formacie HTML (choć mógłby to być na przykład plik w formacie PDF, który moglibyśmy obejrzeć
za pomocą specjalnej wtyczki (plugin) wspomagającej przeglądarkę.
Aby przypisać ramce dokument, musimy podać źródło src dokumentu. Należy w tym celu użyć
konstrukcji:
<frame src="nazwa_pliku.htm" ...>
Przywoływany plik może się znajdować w tym samym katalogu lub jakimkolwiek innym podajemy wtedy nazwę pliku z pełną ścieżką dostępu - może to nawet być dokument w innej
witrynie.
Jeśli przywoływany plik jest spory objętościowo, zapewne nie zmieści się w całości w ramce.
Możemy w takim razie użyć atrybutu scrolling, który wyświetli ramkę razem z suwakami.
Stosowny atrybut ma postać:
<frame scrolling="yes" ...>
Gdy dokument jest niewielki, np. zawiera jakiś tytuł, który ma pozostawać na ekranie, możemy
zrezygnować z suwaków i wstawić atrybut scrolling="no", ustawiając zarazem odpowiednio
szerokość lub wysokość przeznaczonej dla niego ramki. Gdy użyjemy parametru scrolling="auto",
suwaki pojawią się wtedy, gdy dokument będzie większy niż ramka.
Ponieważ stosując ramki używamy jednocześnie często odsyłaczy, powinniśmy jakoś nazwać naszą
ramkę - name. Nazwa będzie służyć jako punkt orientacyjny dla odsyłaczy.
<frame name="nazwa_ramki" ...>
Czytelnik dokumentu może regulować wielkość wyświetlonych ramek, przesuwając brzegi za
pomocą myszki. Gdy jednak użyjemy w definicji atrybutu noresize
<frame noresize ...>
zabezpieczymy ramkę przed skalowaniem.. Domyślnie, wszystkie ramki są skalowalne.
Atrybut frameborder="1" lub frameborder="0" pozwala ustalić, czy obramowanie danej ramki
będzie wyświetlane, czy też nie.
<frame frameborder="1" ...>
Atrybut marginheight="x" wymusza dodatkowy odstęp mierzony w pikselach (margines) u góry i
u dołu konkretnej ramki, odsuwając treść od obramowania. Z kolei marginwidth="x" wymusza
margines lewy i prawy.
<frame marginheight="50" ...>
Ostatecznie cała definicja ramki może mieć postać:
<frame scrolling="auto" name="nazwa_ramki" src="nazwa_pliku.htm">
W identyczny sposób określamy pozostałe ramki - tyle, ile kolumn (lub wierszy) zadeklarowaliśmy
w definicji frameset. W ten sposób zostaną "na dzień dobry" wczytane pewne strony początkowe.
Skoro jesteś w tym miejscu, jesteś gotów/a do
rozwiązania testu: kliknij
![TworzenieStron-Ramki [tryb zgodności]](http://s1.doczz.pl/store/data/001721520_1-eeede5983e249465b0da9ccfa53afdc1-70x70.png "TworzenieStron-Ramki [tryb zgodności]")
