1 Język HTML
2 Podstawowe problemy w przetwarzaniu informacjiJak zapisywać informację w sieci Internet, Jak ją przetwarzać, Jak wprowadzać dane, Odpowiedź - obecnie strony WWW, język HTML.
3 Języki opisu dokumentów – SGML – trochę historiiJęzyk SGML (ang. Standard Generalized Markup Language) - pomysł na zestan- daryzowanie uogólnionego znakowania dokumentów. Jest to język zdefiniowany w standardzie ISO 8879 opublikowany w październiku 1986 r. Twórcą standardu jest dr Charles Goldfarb.
4 Przykład Jeżeli np. zdefiniujemy elementy chap, title i p w następujący sposób: to możemy napisać w dokumencie: Pierwszy akapit tekstu
5 Co po SGML HTML - pochodzi od SGML, SGML należy do języków kodujących dokument, a HTML należy do języków prezentacyjnych, tzn. wyświetlających dokument. XML - pochodzi od SGML, ma zachować zgodność w „dół” z HTML. Zrezygnowano z DTD, ponieważ jego opracowanie jest sprawą złożoną.
6 XML XML (skrót od eXtensible Markup Language - rozszerzalny język znaczników) to otwarty standard opracowany przez W3C. Otóż XML nie jest kolejnym językiem do przechowywania konkretnych danych, jak np. język HTML opisujący wygląd stron sieciowych. XML to język opisujący dane, czyli metajęzyk. W uproszczeniu można powiedzieć, że XML służy do tworzenia innych języków (aplikacji XML) służących do przechowywania informacji.
7 W języku XML opisem dla danych są one sameMożna również stosować schematy Definicji Typu Dokumentu (znane jeszcze z SGML, DTD) i inne sposoby deklarowania jego zawartości (jak XML Schemas), ale rzadko jest to potrzebne. Czytelność XML, nawet bez użycia specjalnych narzędzi, to jedna z jego ważniejszych zalet.
8 Przykład informacji zapisanej w XML
9 HTML - co to jest? HTML to skrót od angielskiego HyperText Mark-up Language. Jest to swoisty język programowania, który służy do "opisu stron". "Opis stron" to reguły określania wyglądu tekstu (wielkość, czcionka, pogrubienie, kursywa itd.). Najważniejszą cechą HTML jest to, że jest on kompatybilny z każdym systemem operacyjnym (Windows, MacOS, OS/2, rożne odmiany Unixa, itd.). HTML jest językiem (ale nie programowania)
10 Historia HTML (na podstawie http://kurshtml5.edu.pl/)W 1993 roku organizacja IETF (ang. Internet Engineering Task Force) opublikowała pierwszy szkic specyfikacji języka HTML. Producenci przeglądarek mogli zgłaszać swoje propozycje do specyfikacji przez okres 6 miesięcy. W tym samym roku w szkicu HTML+ zasugerowano standaryzację zaimplementowanych znaczników. W 1994 roku powstała Grupa Robocza HTML (ang. HTML Working Group), która w 1995 roku zaprezentowała specyfikację HTML 2.0. Był to pierwszy oficjalny standard. Specyfikacja ta zawierała pomysły ze szkicu HTML oraz HTML+. Język umożliwiał określenie koloru tła, umieszczenie obrazka w tle, tworzenie tabel oraz formularzy. W 1995 roku została zaprezentowana trzecia wersja tego języka, lecz z powodu zbytniej złożoności, prace nad nią zostały przerwane. Od 1996 roku specyfikacje HTML były rozwijane przez konsorcjum producentów oprogramowania World Wide Web Consortium (W3C) pod kontrolą, którego rozwój języka trwa do chwili obecnej. W 1997 roku HTML 3.2 został opublikowany jako rekomendacja. Wprowadzał on nowe atrybuty oraz obsługę CSS (ang. Cascading Style Sheets). W tym samym roku czarta wersja tego języka została opublikowana jako rekomendowana. Wprowadziła kilka nowych elementów, a wszystkie kwestie dotyczące wyglądu strony przejął CSS. Język ten został zaproponowany w trzech typach (Strict, Transitional, Frameset). W 1999 roku została wydana uaktualniona wersja pod numerem Obecnie jest to ostatnia rekomendowana wersja tego języka. W 2004 roku producenci Mozilli oraz Opery przedstawili swoje stanowiska na temat rozwoju HTML. Została stworzona specjalna grupa WHATWG (ang. Web Hypertext Application Technology Working Group), która w 2008 roku przedstawiła pierwszy publiczny szkic HTML 5. Do końca 2011 roku producenci przeglądarek mogli zgłaszać swoje uwagi do specyfikacji, natomiast w 2012 roku HTML 5 przeszedł w fazę kandydata do rekomendacji. W 2013 roku prace nad piątą wersją języka zostały zakończone, a w 2014 roku ma być on uznany za oficjalnie rekomendowany
11 Zgodność przeglądarek z HTML5
12 Organizacja i nawigacja - struktura liniowaStrona główna
13 Organizacja i nawigacja - struktura hierarchicznaStrona główna
14 Organizacja i nawigacja - struktura liniowa z alternatywąStrona główna
15 Organizacja i nawigacja - struktura mieszana (liniowo hierarchiczna)Strona główna
16 Organizacja i nawigacja - struktura sieciowa (pajęczyna)Strona główna
17 Elementy HTML Publiczne identyfikatory tekstu HTMLZnaczniki łamania tekstu Listy Kroje czcionek Tabele Grafika i multimedia Sieć dokumentów HTML Tu znajduje się przegląd wszystkich znaczników dostępnych w poszczególnych wersjach HTMLhttp://webmaster.helion.pl/index.php/spis-polecen/32-tabela-znacznikow
18 Pierwszy plik HTML Cześć
Oj, oj, a co z polskimi znaczkami?
Może inne?: ążźęćńłóĄŹŻĆŃŁÓ To mój pierwszy HTML
19 Dodatkowe informacje o dokumencie Cześć
Oooo, są polskie znaczki, :) Więcej polskich znaczków: ążźśęćłóĄŻŚŹĆĘŁŃ To mój pierwszy HTML
20 Ogólne informacje o budowie znaczników
, Znaczniki, które nie musza być zakończone można pisać
Przykłady: ... (obszar nagłówka) .... (obszar ciała) ...
(obszar nagłówka) - oznacza komentarz (nie wyświetlany)
21 Znaczniki - parametry znacznikówZnaczniki mogą mieć parametry, np..:
22 Nagłówki Nagłówki służą do podziału tekstu na części, są elementami ogólnego planu strony, mogą składać się wielu linii tekstu, zazwyczaj nagłówki umieszcza się na górze strony, w HTML zostało zdefiniowanych sześć poziomów nagłówka (od H1- najbardziej się wyróżnia do H6 - najmniej się wyróżnia), Różnią się między sobą wielkością i atrybutami czcionki (pogrubienie, podkreślenie, itd.), Przykład: Opis języka HTML
23 Formatowanie paragrafówParagrafy używamy dla wypisania myśli, paragraf może zajmować kilka wierszy (to zależy od przeglądarki), występuje zazwyczaj między nagłówkami i jest używany min. do rozmieszczania tekstu między marginesami, ... ... ... ... ...
- nowy wiersz bez przerywania paragrafu
24 Przykład dla paragrafów Z paragrafami Paragrafy używamy dla wypisania myśli, paragraf może zajmować kilka
występują zazwyczaj między nagłówkami i jest używany min. do rozmieszczania
tekstu między marginesami, 25 Listy Listy służą do wyróżniania poszczególnych grup informacji, strukturalizują tekst dokumentu, Listy wypunktowane (są zaznaczane kropkami lub innymi symbolami), tag ...
Listy mogą być zagnieżdżone, Parametry: , gdzie atrybut może być równy:
„disc” - kółko lub kropka, „square” - mały kwadrat, „circle” - wypełnione (większość przeglądarek) kółko,
26 Listy - cd. Lista numerowane, są oznaczane kolejnymi liczbami (arabskimi, rzymskimi), tag ...
Atrybuty: Type=”1” - standardowa numeracja, Type=”a” - numeracja za pomocą kolejnych małych liter alfabetu, Type=”A” - numeracja za pomocą kolejnych małych liter alfabetu, Type=”i” - numeracja za pomocą kolejnych małych liczb rzymskich, Type=”I” - numeracja za pomocą kolejnych dużych liczb rzymskich, START=wartość, np.. START=”C” VALUE - rozpoczyna numerację listy od początku, COMPACT - oznacza, że lista powinna zajmować jak najmniej miejsca na ekranie
27 Przykład dla list
28 Listy - cd. Lista definicyjna - każdy element składa się dwóch części: pojęcie definiowane DT (ang. definition term) i definicji pojęcia DD (ang. definition definition) , np.
29 Listy - cd. Listy katalogów i menusą bardzo podobne do paragrafów, mogą być formatowane inaczej, niż zwykłe akapity są to zazwyczaj bardzo krótkie teksty, nie są zbyt często wykorzystywane w praktyce (przeglądarki nie rozróżniają tych list).
30 Przykład
31 Tekst preformatowany Tekst preformatowany jest używany wtedy, gdy chcemy zachować wszystkie znaki odstępu, tabulacji, puste linie i rozmieszczenie tekstu. Czcionka jest nieproporcjonalna (litera i i m zajmują tyle samo miejsca). Używamy go do np. prezentacji tekstu programu. Np. Tekst preformatowany jest Tak wyświetlany, jak został napisany
32 Style fizyczne ... - wyróżnienie,... - wyróżnienie mocniejsze, ...
- oznacza fragment kodu, ... - oznacza tekst przykładowy, ... - oznacza tekst, który ma być wpisany przez użytkownika ... - oznacza nazwę zmiennej lub innego elementu .... - oznacza definicję ... - oznaczamy cytaty ... - pogrubienie, ... - kursywa, ... - czcionka większa od reszty tekstu, ... - czcionka mniejsza od reszty tekstu, ... - indeks dolny, ... - indeks górny.
33 Przykład dla styli fizycznych
Wyróżniony tekst
Mocniejsze wyróżnienie
oznacza fragment kodu
oznacza tekst przykładowy
oznacza tekst, który ma być wpisany przez użytkownika
oznacza nazwę zmiennej lub innego elementu
oznacza definicję
oznaczamy cytaty
34 przykład
35 Linie poziome Służą do wizualizacji poszczególnych fragmentów strony - znacznik HR. Atrybuty HR: SIZE - grubość linii w pikselach, WIDTH - długość linii w pikselach albo w procentach, ALIGN - sposób umieszczenia linii, NOSHADE - linia jest rysowana bez cienia Przykład:
36 Znaki specjalne Służą do wstawiania znaków, które przez przeglądarkę mogą być zinterpretowane jako znaki formatujące, poprzedzamy je znakiem & (ampersand) Znaki specjalne - przykłady: < - <, > - > n - znak o kodzie n Przykład
< Tekst1>
37 Inne znaczniki
38 Inne znaczniki
39 Inne znaczniki