Pobierz prezentację
Pobieranie prezentacji. Proszę czekać
1
HTML HTML (skrót terminu HyperText Markup Language) jest językiem adjustacji, który umożliwia tworzenie i publikowanie własnych dokumentów multimedialnych w sieci World Wide Web. Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia HTML. Wynika stąd, że dokument taki można utworzyć za pomocą najprostszego edytora tekstów, ręcznie dodając znaczniki. Metoda taka, choć skuteczna, byłaby jednak zbyt uciążliwa. Dlatego na rynku pojawiło się już wiele specjalizowanych edytorów, które wydatnie ułatwiają konstruowanie dokumentu, wspomagając wprowadzanie poleceń. Są to zazwyczaj programy klasy shareware, aczkolwiek znajdziemy też sporo programów komercyjnych i całkowicie bezpłatnych (freeware). HTML oparty jest na języku SGML (ang. Standard Generalized Markup Language). Zgodnie z konwencją wszystkie informacje HTML rozpoczynają się otwierającym nawiasem trójkątnym {<}, a konczą nawiasem trójkątnym zamykającym {>} - np <HTML>. Znacznik ten, znany również jako znacznik HTML, informuje interpreter języka HTML (przeglądarkę), że dokument został napisany w standartowym HTML-u. Przykładem interpretera moze być Internet Explorer, Netscape Communicator lub Navigator.
2
Komponenty HTML 4.0 Formularze: Przyciski opatrzone tekstem lub grafiką, pola przeznaczone tylko do odczytu, możliwość grupowania pól, przypisywanie etykiet i skrótów klawiaturowych poszczególnym obiektom oraz tytułów każdemu elementowi aktywnemu w formularzu. Ramki: Oprócz znanych dotychczas ramek można w dowolnym miejscu na stronie umieszczać ramki inline. Tabele: Tabele można łączyć w grupy, a obramowania tabeli mogą przybierać różnorodne formy. Daje to większe możliwości projektantom stron WWW. Obsługa obiektów i skryptów: Etykieta <OBJECT> pozwala programiście umieszczać na stronie dowolnego typu dane.Skrypty pozwalają użytkownikowi na prowadzenie dialogu, który sterowany jest przez klienta, a nie przez serwer. Szablony stylów (Style Sheets): Pozwalają tworzyć wzorce formatów dla całych akapitów lub pojedynczych wyrazów oraz umożliwiają rozdzielenie prac redakcyjnych i edytorskich.
3
Skróty klawiaturowe (Shortcuts): Wszystkim elementom dialogowym, takim jak pola tekstowe, odsyłacze, przyciski i pola wyboru można przypisać skróty klawiaturowe. W ten sposób możliwe jest poruszanie się po Internecie za pośrednictwem klawiatury. Technika ta ułatwi korzystanie z Internetu przede wszystkim ludziom niepełnosprawnym i zgodnie z wolą W3C "Przybliży WWW milionom nowych użytkowników". Internacjonalizacja: Autorzy stron internetowych będą teraz mogli przygotowywać serwisy we wszystkich językach świata. Aby to umożliwić, HTML 4.0 wykorzystuje międzynarodowy zestaw znaków zgodny z ISO Ponadto w dokumencie HTML będzie można pisać teksty od strony prawej do lewej, tak jak na przykład w językach hebrajskim i arabskim.
4
Struktura dokumentu To jest nagłówek Tu tekst
<HTML><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HEAD> <TITLE> [Kurs języka HTML] </TITLE> </HEAD> <BODY> </BODY> To jest nagłówek Tu tekst
5
Uwagi o pisaniu tekstu Gdy redagujemy tekst w edytorze, jesteśmy przyzwyczajeni do używania klawisza Enter, aby oddzielać od siebie akapity. Jednak przeglądarka ignoruje znak końca akapitu i mimo oddzielenia od siebie akapitów w edytorze zostaną one złączone w przeglądarce w ciągłą linię. Dlatego każdy akapit powinniśmy umieszczać między parą znaczników <P> </P>. Jeśli wlewamy do edytora HTML tekst z innego źródła, musimy objąć każdy z akapitów osobną parą znaczników. Akapity są w przeglądarce oddzielane dodatkową interlinią, która uwypukla podział. Możemy też posłużyć się pojedynczym (otwartym) znacznikiem <BR>, umieszczanym na końcu akapitu, który pozwoli oddzielić od siebie akapity, nie wprowadzając interlinii. Kilka spacji obok siebie jest zamienianych na pojedynczą spację, tak więc nie można (poza tzw. stylem preformatowanym) wstawiać większej liczby spacji między wyrazami. Na tej samej zasadzie ignorowane są również tabulatory
6
PRZYKŁAD I to z dodatkowymi interliniami
<HTML><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HEAD> <TITLE> [Kurs języka HTML] </TITLE> </HEAD> <BODY> to bedzie jedna linia <P> a <BR> to <BR> cztery <BR> linie</P> <P> to </P> <P> tez </P> <P> cztery </P> <P> linie</P> </BODY> tak to wygląda w przeglądarce to bedzie jedna linia a to cztery linie tez I to z dodatkowymi interliniami
7
Formatowanie bloków Nagłówek pierwszy Definiowanie nagłówków sekcji
<Hn> </Hn> Każdy poziom formatowania nagłówków ma znacznik otwierający i zamykający. Znacznik formatu nagłówka najwyższego poziomu to <H1>, a najniższego (najmniejsza i najmniej istotna podsekcja) to <H6>. <HTML><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HEAD> <TITLE> [Kurs języka HTML] </TITLE> </HEAD> <BODY> <H1> Nagłówek pierwszy </H1> <H2> Nagłówek drugi <H2> <H3> Nagłówek trzeci <H3> <H4> Nagłówek czwarty<H4> <H5> Nagłówek piąty<H5> <H61> Nagłowek szósty<H6> </BODY> W przeglądarce wygląda to mniej więcej tak Nagłówek pierwszy Nagłówek drugi Nagłówek trzeci Nagłówek czwarty Nagłówek piąty Nagłowek szósty
8
Formatowanie akapitów
Wyrównywanie akapitów <P ALIGN="wyrównanie"> </P> <HTML><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HEAD> <TITLE> [Kurs języka HTML] </TITLE> </HEAD> <BODY> <P ALIGN="left"> Ala ma kota. Ala ma kota. Ala ma kota. Ala ma kota.Ala ma kota. Ala ma kota. Ala ma kota. Ala ma kota. Ala ma kota. Ala ma kota. </P> <P ALIGN="CENTER"> <P ALIGN="right"> </BODY> W przeglądarce wygląda to mniej więcej tak Ala ma kota. Ala ma kota. Ala ma kota. Ala ma kota. Ala ma kota.Ala ma kota. Ala ma kota. Ala ma kota. Ala ma kota. Ala ma kota. Ala ma kota. Ala ma kota. Ala ma kota. Ala ma kota.Ala ma kota.Ala ma kota. Ala ma kota. Ala ma kota. Ala ma kota. Ala ma kota. Ala ma kota. Ala ma kota. Ala ma kota. Ala ma kota.Ala ma kota.Ala ma kota. Ala ma kota. Ala ma
9
Linia pozioma Znacznikiem niezwykle przydatnym do wizualnego organizowania dokumentów jest znacznik linii poziomej (horizontal rule):<HR>. Postawiony w dowolnym miejscu dokumentu powoduje pojawienie się cienkiej linii w poprzek strony <HR NOSHADE> Linia może być pozbawiona cieniowania <HR SIZE="8"> Możemy jej nadać dowolną grubość <HR WIDTH="200"> Linia może mieć określoną długość w pikselach <HR WIDTH="40%”> lub w procencie szerokości strony <HR ALIGN=center> Można określić gdzie linia ma być umieszczona na środku <HR ALIGN=center WIDTH="40%" > <HR ALIGN=left> po lewej <HR ALIGN=left WIDTH="300" SIZE="5" NOSHADE> <HR ALIGN=right> lub z prawej <HR ALIGN=right WIDTH="400" SIZE="3"> <HR COLOR="nazwa koloru"> Internet Explorer pozwala nadać linii kolor. Przykład: <HR COLOR="red" > <HR SIZE="7" WIDTH="400" COLOR="yellow"> <HR SIZE="8" WIDTH="100" ALIGN=left COLOR="navy">
10
Czcionki <B> </B> pogrubiona <I> </I> kursywa
<BLINK> </BLINK> migająca <U> </U> podkreślona <TT> </TT> o stałej szerokości (teletype) <STRIKE> </STRIKE> przekreślona <SUP> </SUP> indeks górny(superscript) <SUB> </SUB> indeks dolny(subscript) <BIG> </BIG> duża <SMALL> </SMALL> mała
11
Czcionki white aqua silver gray teal yellow lime olive navy red blue maroon fuchsia black green purple Kolory <FONT COLOR="nazwa koloru"> </FONT> Zmiana kroju czcionki <FONT FACE="nazwa kroju"> Wielkość <FONT SIZE="x"> </FONT> Kroje czcionki w HTML-u przyjmują rozmiary od 1 do 7, przy czym 1 to rozmiar najmniejszy, a 7 - najwiekszy. Niestety numeracja ta jest odwrotna wzglądem numeracji znaczników nagłówków, w której nagłówek 1 jest najwiekszy, a nagłówek 6 najmniejszy.
12
Czcionki - przykłady <FONT SIZE="6" COLOR="red">Duży czerwony </FONT> <FONT FACE="arial" SIZE="2" COLOR="purple"> mały purpurowy Arial </FONT>
13
ODSYŁACZE Odsyłacze (hiperłącza, łącza hipertekstowe, odnośniki)
są chyba najbardziej charakterystycznym elementem dokumentów w światowej sieci World Wide Web. Bez odsyłaczy nie istniałyby powiązania między dokume- ntami na tym samym serwerze, w tym samym mieście, kraju czy kontynencie.Dzięki odsyłaczom można wiązać ze sobą poszczególne strony. Odsyłacz jest niczym innym, jak wskazaniem jakiegoś innego miejsca. Kliknięcie na takim wskazaniu przenosi użytkownika do docelowego miejsca, przy czym może to być z powodzeniem miejsce na tej samej stronie, inna strona w ramach tego samego, złożonego dokumentu, a nawet strona na drugim końcu świata.
14
ODSYŁACZE Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce w Internecie i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. Jej konstrukcję można obrazowo przedstawić w postaci: <A HREF="strona.htm " > Tekst, który należy kliknąć </A>
15
Odczytywanie URL-a URL to unikatowy deskryptor, który może identyfikować dowolny dokument (zwykły lub hipertekstowy), grafikę, komputer, a nawet archiwum plików w dowolnym miejscu internetu lub w twoim komputerze. Stroną pozytywną jest fakt, że format określający URL jest jednakowy dla rozlicznych usług przezeń obejmowanych, a w tym dla wiadomości grup dyskusyjnych, Gophera, dokumentów WWW i archiwów FTP. W ogólnym przypadku URL składa się z następujących elementów. usługa : // nazwa - hosta : port / ścieżka-do-katalogu Nie w kazdym URL- u pojawiają się wszystkie z tych składników
16
Odczytywanie URL-a -przykłady
<A HREF=" Możesz zaglądnąć pod ten adres </A> W tym przypadku usługa została zidentyfikowana jako http: (HTTP - to protokół transferu hipertekstu, metody dzięki której dokonuje się transferu dokumentu WWW). Użycie http: wskazuje programowi takiemu jak Explorer lub Navigator, że chcemy nawiązać połączenie z dokume- ntem WWW. komputer-gospodarz (host) udostępniający poszukiwaną informację to Końcówka com mówi, że ten ośrodek jest ośrodkiem komercyjnym; microsoft to domena lub host; a www jest nazwą serwera WWW, czyli określonego komputera. Zwykle, tak jak w tym przykładzie, portu nie trzeba podawać, ponieważ większość serwerów używa standartowych, domyślnych numerów portów. Na serwerze chcemy się dostać do pliku index.html z katalogu poland
17
Odczytywanie URL-a -przykłady
<A HREF="ftp://"ftp.w3.org/pub/doc/"> Archiwum World Wide Web Consortium</A> Ten adres identyfikuje archiwum plikowe W3C. Widać, że URL wskazuje na archiwum przez swój identyfikator usługi (ftp - protokół transferu plików). Odpytywany serwer i host to ftp.w3.org. Adres URL wskazuje, iż po ustanowieniu połączenia z serwerem FTP program przeglądarki powinien zmienić katalog na /pub/doc/ i wyświetlić tamtejsze pliki.
18
Odczytywanie URL-a -przykłady
<A HREF=mailto:imię Napisz do autorów tej strony</A> URL-e poczty elektronicznej są całkiem proste, dowolny adres poczty można podać jako URL poprzedzając go krótkim tekstem mailto; stanowiący nazwę usługi. Gdybyśmy sobie zażyczyli , aby w momencie wysłania poczty przez czytelnika strony w polu tematu listu pojawiła się jakaś domyślna treść, możemy zdefiniować odsyłacz na przykład tak: <A subject=Jest Pan cudowny!> </A>
19
GRAFIKA Grafika jest jednym z najbardziej charakterystycznych elementów World Wide Web, ogromnie ubarwiając i uprzyjemniając pracę w sieci, ale także dostarczając sporej dawki informacji. Im strona bogatsza graficznie, tym bardziej atrakcyjna w odbiorze. Zręczne wykorzystywanie grafiki podczas tworzenia dokumentu internetowego jest umiejętnością niezmiernie przydatną, choć należy pamiętać, że to właśnie grafika jest przyczyną ogromnego wzrostu ruchu w sieci i zatykania się łącz. Konieczne jest zatem wybranie złotego środka między estetyką i nośnością informacyjną grafiki z jednej, a twardymi realiami technicznymi z drugiej strony. Autorzy regularnie odwiedzanych stron (zawierających stałe aktualizacje) mogą jednak liczyć na fakt, że dobrze skonstruowane przeglądarki pozwalają wykorzystywać cache, który gromadzi (jednorazowo) elementy graficzne i pozwala przeglądarce sięgać do zasobów na dysku lokalnym, a nie do sieci, co wydatnie zmniejsza ruch na łączach. Z tego też 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.
20
GRAFIKA - wstawianie <IMG SRC="plik_graficzny">
Kod HTML służący do umieszczania w dokumentach grafiki wygląda następująco <IMG SRC="plik_graficzny"> Jeśli nie stosujemy żadnych dodatkowych parametrów, obrazek jest ustawiany przy lewym brzegu dokumentu i ma wielkość oryginału. Możemy jednak użyć szeregu parametrów, które zmienią położenie, wielkość i inne cechy obrazka. Wielkość obrazka możemy regulować za pomocą parametrów HEIGHT (wysokość) i WIDTH (szerokość). <IMG SRC="grafika/plik.gif" HEIGHT="80"> <IMG SRC="grafika/plik.gif" WIDTH="200">
21
TABELE <TABLE> </TABLE>
Definicja tabeli musi być umieszczona między tymi dwoma znacznikami, które stanowią jej ograniczniki. 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. <TABLE> </TABLE>
22
TABELE Wiersz tabeli jest jej konkretyzacją, a sam tworzy ramy dla
komórek z danymi. W ramach <TABLE> </TABLE> można umieścić wiele kolejnych definicji wierszy <TR> >/TR>, np.: <TABLE> <TR> </TR> <TR> </TR> </TABLE>
23
TABELE <TABLE BORDER> </TABLE>
Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o parametr BORDER. Jeśli nie podamy szerokości obramowania, przyjmowana jest jej domyślna wartość. <TABLE BORDER> </TABLE> Przykład: <HTML><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HEAD> <TITLE> [Kurs języka HTML] </TITLE> </HEAD> <BODY> <TABLE BORDER> <TR> <TD> AA </TD> <TD> AB </TD> <TD> AC </TD> <TD> AD </TD> </TR> <TR> <TD> BA </TD> <TD> BB </TD> <TD> BC </TD> <TD> BD </TD> </TR> <TR> <TD> CA </TD> <TD> CB </TD> <TD> CC </TD> <TD> CD </TD> </TR> <TR> <TD> DA </TD> <TD> DB </TD> <TD> DC </TD> <TD> DD </TD> </TR> </TABLE> </BODY> </HTML>
24
TABELE -formatowanie <TABLE HEIGHT=x> </TABLE> wysokość
<TABLE WIDTH=x> </TABLE> szerokość <TABLE ALIGN="wyrównanie"> </TABLE> wyrównanie tekstu w tabeli <TD ALIGN="wyrównanie"> </TD> wyrównanie tekstu w komórce w poziomie <TD VALIGN="wyrównanie"> </TD> wyrównanie tekstu w komórce w pionie <BGCOLOR=kolor> kolor tła tabeli <TD BGCOLOR=kolor> </TD> kolor komórki <TABLE BACKGROUND="plik_graficzny"> </TABLE> tło tabeli <TD BACKGROUND="plik_graficzny"> </TD> tło komórki
25
TABELE -łączenie komórek
<TD COLSPAN=x> </TD> Atrybut ten służy do połączenia poziomych komórek w tabeli, rozciągających się na x kolumn <TABLE BORDER> <TR> <TD COLSPAN=2> Programy polskie </TD> <TD COLSPAN=2 > Programy zagraniczne </TD> </TR> <TD> Polsat </TD> <TD> TVN </TD> <TD> BBC </TD> <TD> CNBC </TD> </TABLE>
26
TABELE - łączenie komórek
<TD ROWSPAN=x> </TD> Ten natomiast atrybut służy do łączenia rzędów tabeli. <TABLE BORDER> <TR> <TD ROWSPAN=3> Takie <BR> sobie <BR>stacje </TD> <TD> BBC </TD> </TR> <TD> CNBC </TD> </TR> <TD> EuroSport </TD> </TABLE>
27
TABELE - zagnieżdżone <TABLE BORDER=5 WIDTH=60% HEIGHT=40%> <TR><TD> Francja </TD><TD> Niemcy </TD><TD> Hiszpania </TD></TR> <TR><TD> Kanada </TD><TD> St. Zjednoczone <TABLE BORDER=2 ALIGN=center> <TR><TD> Texas </TD><TD> Washington </TD> </TR>>TR><TD> Floryda </TD> <TD> Kalifornia </TD></TR> </TABLE> </TD><TD> Meksyk </TD></TR> </TABLE>
Podobne prezentacje
