Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

HTML (skrót terminu HyperText Markup Language) jest językiem adjustacji, który umożliwia tworzenie i publikowanie własnych dokumentów multimedialnych w.

Podobne prezentacje


Prezentacja na temat: "HTML (skrót terminu HyperText Markup Language) jest językiem adjustacji, który umożliwia tworzenie i publikowanie własnych dokumentów multimedialnych w."— Zapis prezentacji:

1 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. 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. HTML

2 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 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. Komponenty HTML 4.0

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 [Kurs języka HTML] Struktura dokumentu Tu tekst To jest nagłówek

5 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. 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, 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 Uwagi o pisaniu tekstu

6 [Kurs języka HTML] to bedzie jedna linia a to cztery linie to tez cztery linie PRZYKŁAD I to z dodatkowymi interliniami to bedzie jedna linia a to cztery linie to tez cztery linie tak to wygląda w przeglądarce

7 Formatowanie bloków Definiowanie nagłówków sekcji Każdy poziom formatowania nagłówków ma znacznik otwierający i zamykający. Znacznik formatu nagłówka najwyższego poziomu to, a najniższego (najmniejsza i najmniej istotna podsekcja) to. 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 [Kurs języka HTML] Nagłówek pierwszy Nagłówek drugi Nagłówek trzeci Nagłówek czwarty Nagłówek piąty Nagłowek szósty

8 Wyrównywanie akapitów 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 kota. Ala ma kota. Ala ma kota. [Kurs języka HTML] 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. Formatowanie akapitów

9 Znacznikiem niezwykle przydatnym do wizualnego organizowania dokumentów jest znacznik linii poziomej (horizontal rule):. Postawiony w dowolnym miejscu dokumentu powoduje pojawienie się cienkiej linii w poprzek strony Linia pozioma Linia może być pozbawiona cieniowania Możemy jej nadać dowolną grubość Linia może mieć określoną długość w pikselach lub w procencie szerokości strony Można określić gdzie linia ma być umieszczona na środku po lewej lub z prawej Internet Explorer pozwala nadać linii kolor. Przykład:

10 Czcionki pogrubiona kursywa migająca podkreślona o stałej szerokości (teletype) przekreślona indeks górny(superscript) indeks dolny(subscript) duża mała

11 Czcionki Kolory Zmiana kroju czcionki Wielkość white aqua silver gray teal yellow lime olive navy red blue maroon fuchsia black green purple 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 Duży czerwony mały purpurowy Arial Czcionki - przykłady

13 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. ODSYŁACZE

14 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: Tekst, który należy kliknąć ODSYŁACZE

15 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 Odczytywanie URL-a

16 Odczytywanie URL-a -przykłady Możesz zaglądnąć pod ten adres 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 Archiwum World Wide Web Consortium 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 Napisz do autorów tej strony 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:

19 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. GRAFIKA

20 GRAFIKA - wstawianie Kod HTML służący do umieszczania w dokumentach grafiki wygląda następująco 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ść).

21 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. TABELE

22 Wiersz tabeli jest jej konkretyzacją, a sam tworzy ramy dla komórek z danymi. W ramach można umieścić wiele kolejnych definicji wierszy >/TR>, np.: TABELE

23 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ść. TABELE [Kurs języka HTML] AA AB AC AD BA BB BC BD CA CB CC CD DA DB DC DD Przykład:

24 TABELE -formatowanie wysokość szerokość wyrównanie tekstu w tabeli wyrównanie tekstu w komórce w poziomie wyrównanie tekstu w komórce w pionie kolor tła tabeli kolor komórki tło tabeli tło komórki

25 TABELE -łączenie komórek Atrybut ten służy do połączenia poziomych komórek w tabeli, rozciągających się na x kolumn Programy polskie Programy zagraniczne Polsat TVN BBC CNBC

26 TABELE - łączenie komórek Takie sobie stacje BBC CNBC EuroSport Ten natomiast atrybut służy do łączenia rzędów tabeli.

27 Francja Niemcy Hiszpania Kanada St. Zjednoczone Texas Washington >TR> Floryda Kalifornia Meksyk TABELE - zagnieżdżone


Pobierz ppt "HTML (skrót terminu HyperText Markup Language) jest językiem adjustacji, który umożliwia tworzenie i publikowanie własnych dokumentów multimedialnych w."

Podobne prezentacje


Reklamy Google