Język HTML.

1 Język HTML ...
Author: Miłosław Donarski
0 downloads 0 Views

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: Tytuł rozdziału</span> <span class='tr'><p>Pierwszy akapit tekstu</span> <span class='tr'></chap></span> <span class='tr'>a nawet:</span> <span class='tr'>Tytuł rozdziału</span></p><p><span class="span-circle-num"> 5 </span> <span>Co po SGML</span> <span class='tr'>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.</span> <span class='tr'>XML - pochodzi od SGML, ma zachować zgodność w „dół” z HTML. Zrezygnowano z DTD, ponieważ jego opracowanie jest sprawą złożoną.</span></p><p><span class="span-circle-num"> 6 </span> <span>XML</span> <span class='tr'>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.</span></p><p><span class="span-circle-num"> 7 </span> W języku XML opisem dla danych są one same<span class='tr'>Moż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.</span></p><p><span class="span-circle-num"> 8 </span> Przykład informacji zapisanej w XML<span class='tr'><ludzie></span> <span class='tr'><człowiek dane="poprawne"></span> <span class='tr'><imie>Paweł</imie></span> <span class='tr'><nazwisko>Stroiński</nazwisko></span> <span></span> <span class='tr'><web>http://www.pabloware.w.pl/</web></span> <span class='tr'></człowiek></span> <span class='tr'><człowiek dane="fikcyjne"></span> <span class='tr'><imie>Jan</imie></span> <span class='tr'><nazwisko>Kowalski</nazwisko></span> <span></span> <span class='tr'><web>http://www.kowalski.net</web></span> <span class='tr'></ludzie></span></p><p><span class="span-circle-num"> 9 </span> <span>HTML - co to jest?</span> <span class='tr'>HTML to skrót od angielskiego HyperText Mark-up Language.</span> <span class='tr'>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.).</span> <span class='tr'>Najważniejszą cechą HTML jest to, że jest on kompatybilny z każdym systemem operacyjnym (Windows, MacOS, OS/2, rożne odmiany Unixa, itd.).</span> <span class='tr'>HTML jest językiem (ale nie programowania)</span></p><p><span class="span-circle-num"> 10 </span> Historia HTML (na podstawie http://kurshtml5.edu.pl/)<span class='tr'>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.</span> <span class='tr'>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.</span> <span class='tr'>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.</span> <span class='tr'>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.</span> <span class='tr'>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.</span> <span class='tr'>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.</span> <span class='tr'>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</span></p><p><span class="span-circle-num"> 11 </span> Zgodność przeglądarek z HTML5</p><p><span class="span-circle-num"> 12 </span> Organizacja i nawigacja - struktura liniowa<span class='tr'>Strona</span> <span class='tr'>główna</span></p><p><span class="span-circle-num"> 13 </span> Organizacja i nawigacja - struktura hierarchiczna<span class='tr'>Strona</span> <span class='tr'>główna</span></p><p><span class="span-circle-num"> 14 </span> Organizacja i nawigacja - struktura liniowa z alternatywą<span class='tr'>Strona</span> <span class='tr'>główna</span></p><p><span class="span-circle-num"> 15 </span> Organizacja i nawigacja - struktura mieszana (liniowo hierarchiczna)<span class='tr'>Strona</span> <span class='tr'>główna</span></p><p><span class="span-circle-num"> 16 </span> Organizacja i nawigacja - struktura sieciowa (pajęczyna)<span class='tr'>Strona</span> <span class='tr'>główna</span></p><p><span class="span-circle-num"> 17 </span> Elementy HTML Publiczne identyfikatory tekstu HTML<span class='tr'>Znaczniki łamania tekstu</span> <span class='tr'>Listy</span> <span class='tr'>Kroje czcionek</span> <span class='tr'>Tabele</span> <span class='tr'>Grafika i multimedia</span> <span class='tr'>Sieć dokumentów HTML</span> <span class='tr'>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</span></p><p><span class="span-circle-num"> 18 </span> Pierwszy plik HTML <HTML><span class='tr'><!to jest moja pierwsza strona - kometarz></span> <span class='tr'><HEAD></span> <span class='tr'><TITLE>Mój pierwszy HTML

Cześć

Oj, oj, a co z polskimi znaczkami?

Może inne?: ążźęćńłóĄŹŻĆŃŁÓ To mój pierwszy HTML

19 Dodatkowe informacje o dokumencie Mój pierwszy HTML

Cześć

Oooo, są polskie znaczki, :) Więcej polskich znaczków: ążźśęćłóĄŻŚŹĆĘŁŃ To mój pierwszy HTML

20 Ogólne informacje o budowie znaczników - instrukcja HTML (tzw. „tag”, „znacznik”) - koniec obszaru działania instrukcji. Mogą występować tagi bez zakończonego obszaru działania, np..
,
Znaczniki, które nie musza być zakończone można pisać , np.
Przykłady: ... (obszar nagłówka) .... (obszar ciała) ... (obszar pisania tytułu)

...

(obszar nagłówka) - oznacza komentarz (nie wyświetlany)

21 Znaczniki - parametry znacznikówZnaczniki mogą mieć parametry, np..:

Wartości parametrów często ujmuje się w cudzysłowy, Zwłaszcza wtedy, gdy nazwy są wieloczłonowe.

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,

...

- tagi paragrafu, Parametry „taga” P:

...

- do lewej,

...

- do prawej,

...

- centrowanie,

...

- do lewej i do prawej,

- nowy wiersz bez przerywania paragrafu
... - wyświetl tekst bez załamania wiersza - punkt łamania linii (zwykle między )
...
- centrowanie tekstu

24 Przykład dla paragrafów Paragrafy Bez paragrafów: Paragrafy używamy dla wypisania myśli, paragraf może zajmować kilka wierszy (to zależy od przeglądarki), występują zazwyczaj między nagłówkami i jest używany min. do rozmieszczania tekstu między marginesami,

Z paragrafami

Paragrafy używamy dla wypisania myśli, paragraf może zajmować kilka wierszy (to zależy od przeglądarki),

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 Paragrafy

      1. A1
      2. A2
      1. B1
      2. B2

          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.

          pojęcie
          definicja
          Listy definicyjne mówią, że pojęcie i jego definicja będą zazwyczaj w osobnych wierszach, oraz linia DD jest przesunięta w prawo. Np.
          Programowanie
          Zapisywanie algorytmu w języku programowania

          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

        1. w lewo
        2. w prawo
        3. w dół
        4. w górę
        5. Spożywcze
        6. Przemysłowe
        7. Rozrywka

          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 Tekst preformatowany zwykły tekst
          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 Tekst preformatowany zwykły tekst
          pogrubienie
          kursywa
          czcionka maszynowa
          podkreślony
          przekreślenie
          czcionka większa od reszty tekstu
          czcionka mniejsza od reszty tekstu
          aindeks dolny
          bindeks górny

          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

          Pozwala na lepszą semantykę HTML poprzez zdefiniowanie pojemnika który zawiera spójny zbiór elementów, niezależny od innych treści. Ułatwia to publikację kilku artykułów o różnej tematyce na jednej stronie.