LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH PODSTAWY JĘZYKA HTML (HyperText Markup Language) 1. STRUKTURA DOKUMENTU HTML Dokument HTML jest zwykłym nie skonwertowanym tekstem, z tak zwanymi znacznikami (tagami). Polecenie HTML (tag) jest specjalnym ciągiem znaków (wielkie i małe litery nie są rozróżniane) ujętym w ostre nawiasy. Znaczniki pozwalają nadać dokumentowi pożądane właściwości, takie jak: strona kodowa, kolor czy rodzaj czcionki. Sam tekst nie wystarczy, więc aby strona mogła być poprawnie wyświetlona potrzebna jest przeglądarka internetowa. Podstawowy dokument powinien składać się z trzech części. Całość powinna być objęta parą znaczników <HTML> </HTML>, między nimi należy umieścić informacje nagłówkowe w znacznikach <HEAD> </HEAD>. Pozostała zawartość dokumentu powinna znaleźć się wewnątrz znaczników <BODY> </BODY>. Struktura taka jest następująca: <HTML> <HEAD> Informacje o dokumencie, łącznie z tytułem </HEAD> <BODY> Zawartość dokumentu - tekst, grafika, odsyłacze itp. </BODY> </HTML> 1.1. HEAD Najważniejszą informacją zawartą w ramach HEAD jest tytuł <TITLE> Przykładowy tytuł </TITLE>. Jest to obowiązkowy znacznik i choć strona zostanie wyświetlona gdy go nie będzie, to nie ma pewności, że zostanie to zrobione prawidłowo. Tytuł strony jest wyświetlany pasku tytułowym przeglądarki, zaraz obok jej nazwy. 1.2. META Polecenie <META> szczegółowo informuje o zawartości dokumentu, np. dla celów katalogowych czy indeksów, wykorzystywanych przez odpowiednie programy, np. wyszukiwarki sieciowe. Zawiera trzy atrybuty: HTTP-EQUIV, NAME i CONTENT w kombinacji pierwszy z trzecim albo drugi z trzecim. HTTP-EQUIV definiuje zmienne systemowe, natomiast NAME zmienne użytkownika. Polecenie META umieszcza się w ramach znaczników HEAD, nie jest konieczne do poprawnego funkcjonowanie strony, ale ułatwia życie użytkownikom wyszukiwarek internetowych. W Polsce powinniśmy używać polskich liter, dlatego jako standard przyjęto stronę kodową dokumentu ISO-8859-2 (czyli ISO Latin 2), zgodny również z Polską Normą: <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-2"> Polecenie do deklaracji strony kodowej dokumentu. <META NAME ="Description" CONTENT="Opis strony"> Polecenie opisujące stronę w wyszukiwarkach. Nie należy przekraczać 200 znaków. <META NAME="Keywords" CONTENT="słowa kluczowe"> Słowa kluczowe definiują stronę i są porównywane z wpisywanymi w wyszukiwarki. Nie wszystkie wyszukiwarki używają tego polecenia. <META NAME="Language" CONTENT="pl"> Polecenie informuje o języku strony. Przy stosowaniu języka angielskiego en, niemieckiego de, francuskiego fr. <META NAME="Author" CONTENT="imię i nazwisko"> Polecenie informuje o autorze strony.
1.3. BODY W każdym dokumencie HTML może istnieć jeden znacznik BODY. Definiując <BODY> możemy wstawić dodatkowo kilka parametrów, które zadecydują o graficznej postaci strony. 1.3.1. PARAMETRY BACKGROUND="adres obrazka, może być URL" Parametr wstawia graficzne tło, najlepiej gdyby obrazek znajdował się w tym samym katalogu co strona HTML BGPROPERTIES="fixed" Parametr wstawia tło graficzne jako znak wodny BGCOLOR="kolor tła, może być w systemie Hex" Parametr wstawia jako tło jednolity kolor. Nazwy kolorów piszemy w języku angielskim TEXT="kolor tekstu" Parametr definiuje kolor tekstu używanego na stronie ALink="kolor", Link="kolor", VLink="kolor" Parametr definiuje kolory odnośników, w kolejności: aktywnego, normalnego, odwiedzonego LEFT MARGIN="wartość" Parametr definiuje lewy margines. Wartość liczona w pikselach TOP MARGIN="wartość" Parametr definiuje górny margines Wszystkie te polecenia można wstawić do jednego znacznika BODY, np.: <BODY BgColor="black" alink="#00ffff" vlink="#000080" Link="#0000FF" TEXT="white"> 1.3.2. ZNACZNIKI CZCIONKI A. FIZYCZNE - ATRYBUTY Czcionka pogrubiona (bold) <B> </B> Czcionka pochylona (italic) <I > </I > Czcionka podkreślona (underline) <U> </U> Czcionka o stałej szerokości znaku <TT> </TT> Indeks górny <SUP> </SUP> Indeks dolny <SUB> </SUB> Duża czcionka (+1 punkt) <BIG> </BIG> Mała czcionka (-1 punkt) <SMALL> </SMALL> B. LOGICZNE- STYLE Znaczniki logiczne odnoszą się do konkretnych zastosowań, ale efekt ich działania jest analogiczny jak w przypadku znaczników fizycznych. Czcionka pogrubiona, pochylona lub monotypiczna (o stałej szerokości znaku) są domyślnie przypisane do wybranego stylu. Cytat blokowy <CITE> </CITE> Definicja wyróżnia blok tekstu np. pojawiający się pierwszy raz <DFN> </DFN> Element usunięty pokazuje przekreślony, zmieniony tekst <DEL> </DEL> Element wstawiony podkreśla nowość <INS> </INS> Skrót i akronim sygnalizuje obecność skrótów i akronimów
<ABBR lang="pl">prof.</abbr> <ACRONYM lang="en">www</acronym> Czcionka mocno wyróżniona <STRONG> </STRONG> Czcionka wyróżniona (emfaza) <EM> </EM> Kod (tekst programu) <CODE> </CODE> Czcionka wprowadzana z klawiatury <KBD> </KBD> Przykład <SAMP> </SAMP> Zmienna (słowo kluczowe języka) <VAR> </VAR> Kolory czcionki - barwy z atrybutami i stylami można dowolnie łączyć <FONT COLOR="nazwa_koloru"> </FONT> Wielkość czcionki - może mieć wielkość zależną od osoby redagującej dokument HTML <FONT SIZE="xx"> </FONT> 1.3.3. FORMATOWANIE BLOKÓW Nagłówek pierwszego stopnia (drugiego... -...szóstego) <H1> </H1>... <H6> </H6> Wyrównywanie tytułów środkowanie <Hx ALIGN=CENTER> </Hx> justowanie do prawego marginesu <Hx ALIGN=RIGHT> </Hx> justowanie do prawego marginesu <Hx ALIGN=LEFT> </Hx> Znacznik akapitu <P> </P> wyrównanie do lewego marginesu (domyślne ustawienie) <P ALIGN=LEFT> </P> wyrównanie do prawego marginesu <P ALIGN=RIGHT> </P> środkowanie <P ALIGN=CENTER> </P> wyrównanie do obu marginesów <P ALIGN=JUSTIFY> </P> Znacznik końca wiersza przełamanie linii, czyli tekst następujący po znaczniku wyświetlany jest przez przeglądarkę w nowej linii <BR> </BR> Pozioma linia <HR> </HR> bez cieniowania <HR NOSHADE> nadanie określonej grubości <HR SIZE=6> nadanie określonej długości w pikselach <HR WIDTH=200> umieszczenie na środku (domyślnie) <HR ALIGN=center> połączenie powyższych atrybutów <HR ALIGN=left SIZE=3 WIDTH=100> Blok preformatowany pozwala wprowadzić dodatkowe spacje, tabulacje <PRE> </PRE> Blok cytowany <BLOCKQUOTE> </BLOCKQUOTE> Adres - stosowane w odniesieniu do bloku tekstu zawierającego imię i nazwisko, adres pocztowy, adres poczty elektronicznej itp. <ADDRESS> </ADDRESS> 1.3.4. ODSYŁACZE Odsyłacze (hiperłącza, łącza hipertekstowe, odnośniki) są charakterystycznym elementem dokumentów w światowej sieci World Wide Web. Dzięki odsyłaczom można wiązać ze sobą poszczególne strony, ponieważ wskazują inne miejsca. Kliknięcie na takim wskazaniu przenosi użytkownika do docelowego miejsca, przy czym może to być miejsce na tej samej stronie, inna strona w ramach tego samego, złożonego dokumentu, a nawet strona na drugim końcu świata. Najważniejsze jest tematyczne powiązanie informacji, a nie lokalizacja. Etykieta (zwana też zakładką lub kotwicą - ang. anchor) jest znakiem, swoistą elektroniczną zakładką, która zaznacza jakieś miejsce w tekście. Gdy utworzymy etykietę, będziemy mogli się odwoływać nie tylko do zawierającej ją strony, ale i do konkretnego miejsca na stronie. W ten sposób czytelnik będzie mógł natychmiast skoczyć do wskazanego punktu. Jej konstrukcja jest następująca: <A NAME="nazwa_etykiety"> </A>
Odsyłacz jest konstrukcją, która wskazuje pewne miejsce w Internecie i pozwala skoczyć do niego za pomocą kliknięcia na nią myszką. Jej konstrukcję można obrazowo przedstawić w postaci: <A HREF="miejsce_docelowe">Tekst, na którym należy kliknąć</a> <A HREF=mailto:imie_nazwisko@adres>Tutaj kliknij</a> Konstrukcja pozwalająca wysłać pocztę elektroniczną do autora strony ISTOTNA UWAGA: przy tworzeniu wszelkich odsyłaczy należy zwracać uwagę na wielkość liter. Dla wielu serwerów internetowych ta sama wielka i mała litera są dwoma różnymi znakami. 1.3.5. WYKAZ NIEUPORZĄDKOWANY Wykaz nieuporządkowany (LISTA) służy do sporządzenia wykazu nienumerowanego i dodatkowo może zawierać definicję symbolu graficznego: <UL TYPE=circle> <LI>Pierwszy punkt <LI>Drugi punkt <LI>Trzeci punkt </UL> 1.3.6. GRAFIKA I MULTIMEDIA Dobrze skonstruowane przeglądarki pozwalają wykorzystywać cache, który gromadzi (jednorazowo) elementy graficzne i dźwiękowe, pozwalając przeglądarce sięgać do zasobów na dysku lokalnym, a nie do sieci, co wydatnie zmniejsza ruch na łączach. Z tego powodu w Internecie zostały przyjęte dwa podstawowe standardy graficzne - GIF i JPG - które charakteryzują się znaczną kompresją, a tym samym relatywnie niewielkimi rozmiarami plików graficznych. <IMG SRC="plik_graficzny" HEIGHT=150 WIDTH=200> IMG jest skrótem od Image (obraz), natomiast SRC jest skrótem od Source (źródło). Wielkość obrazka możemy regulować za pomocą parametrów HEIGHT (wysokość) i WIDTH (szerokość). Podstawowa konstrukcja ma następującą postać: 1.3.7. TABELE Definicja tabeli musi być umieszczona między tymi dwoma znacznikami <TABLE> </TABLE>. 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. W ramach tabeli można umieścić wiele kolejnych definicji wierszy <TR> </TR>. Komórka w wierszu zawiera konkretne dane. Między jej znacznikami można umieszczać tekst i grafikę. Konkretne komórki są umieszczane między znacznikami wybranego rzędu: <TABLE> </TABLE>
1.3.8. RAMKI Ramki ułatwiają nawigowanie w wielostronicowych dokumentach HTML. Najbardziej typowym przykładem użycia ramek jest umieszczenie w jednej spisu treści i przeznaczenie drugiej na wywoływane dokumenty (odrębne strony HTML), dowiązane do poszczególnych pozycji spisu. Można powiększyć ramkę do wielkości niemal całego obszaru roboczego przeglądarki, niezależnie od domyślnych parametrów utworzonych przez autora strony. <FRAMESET COLS="25%,*%"> Znacznik stanowiący ramy dla całej konstrukcji. Umieszczanie szczegółowych znaczników dotyczących liczby i wielkości ramek, podziału strony (parametr COLS="x,y") <FRAME SCROLLING="auto" NAME="baza danych" SRC="źródło.htm"> Wprowadzenie 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 itp. <FRAME SCROLLING="yes" NAME="baza" SRC="base.htm"> </FRAMESET> 2. ZADANIE PROJEKTOWE Każdy student jest zobowiązany oddać samodzielnie utworzoną stronę w HTMLu. Projekt powinien być oddany najpóźniej na szóstych zajęciach. Oceniany będzie oryginalny pomysł, szata graficzna, wykorzystanie możliwości języka. Dublowanie projektów niemile widziane.