sieci komputerowe i technologie internetowe (skiti)...język (x)html składa się ze znaczników...

© SKiTI 2017

Sieci Komputerowe i Technologie Internetowe(SKiTI)

Wykład 11: Wprowadzenie do (X)HTML

WYDZIAŁ ELEKTROTECHNIKI I AUTOMATYKI – KATEDRA IN ŻYNIERII SYSTEMÓW STEROWANIAKierunek: Automatyka i Robotyka

Studia stacjonarne I stopnia: rok I, semestr IIdr in ż. Tomasz Rutkowski

2017

Plan WykładuPlan Wykładu

Część ICzęść I1.1. Podstawowe technologie Podstawowe technologie dla potrzeb WWWdla potrzeb WWW

-- przegl ąd przegl ąd technologii technologii GeneracjiGeneracji-- przegl ąd przegl ąd technologii technologii PrezentacjiPrezentacji

© SKiTI 2016

Część IICzęść II1. 1. Troch ę Troch ę historii o: SGML, HTML, XHTMLhistorii o: SGML, HTML, XHTML2.2. Konsorcjum W3CKonsorcjum W3C3.3. Podstawowe zasady (X)HTML Podstawowe zasady (X)HTML 4.4. Przykładowa struktura szablonu strony (X)HTMLPrzykładowa struktura szablonu strony (X)HTML5.5. Podstawowe znaczniki (X)HTMLPodstawowe znaczniki (X)HTML

2

Część ICzęść I

© SKiTI 2016

Część ICzęść I-- technologie technologie dla potrzeb dla potrzeb WWW WWW --

3

Technologie WWWTechnologie WWW

Podstawowe grupy technologii WWW:Podstawowe grupy technologii WWW:

�� Generacji (Generacji (ang. Serverang. Server--SideSide))�� dynamiczne tworzenie, generowanie przez serwer dynamiczne tworzenie, generowanie przez serwer

zawartości strony WWW w zależności od różnych zawartości strony WWW w zależności od różnych

© SKiTI 2016

zawartości strony WWW w zależności od różnych zawartości strony WWW w zależności od różnych czynników, m.in. „wymagań” czynników, m.in. „wymagań” użytkownikaużytkownika((proces proces generacjigeneracji odbywa się po stronie serweraodbywa się po stronie serwera) )

�� Prezentacji (Prezentacji (ang. Clientang. Client--SideSide))�� przedstawienie „wygenerowanej” przez serwer treści przedstawienie „wygenerowanej” przez serwer treści

strony WWW w zrozumiałej, logicznej i atrakcyjnej dla strony WWW w zrozumiałej, logicznej i atrakcyjnej dla użytkownikaużytkownika postaci postaci ((proces proces prezentacjiprezentacji odbywa się po odbywa się po stronie klienta stronie klienta –– przeglądarka internetowaprzeglądarka internetowa) )

Technologie Technologie ServerServer--SideSide

Przykłady technologii generacji:Przykłady technologii generacji:

�� CGI (CGI (ang. ang. CommonCommon GatewayGateway InterfaceInterface))�� SSI (SSI (ang. Server ang. Server SideSide IncludeInclude))�� ASP (ang. ASP (ang. ActiveActive Server Server PagesPages))

© SKiTI 2016

�� ASP (ang. ASP (ang. ActiveActive Server Server PagesPages))

�� ISAPI ISAPI ((ang. ang. Internet Server Internet Server APIAPI) ) // NSAPINSAPI ((ang. ang. Netscape ServerNetscape Server APIAPI))

�� PHP (PHP (ang. ang. Personal Home PagePersonal Home Page))�� JSP (ang. JSP (ang. Java Server Java Server PagesPages))�� ServletyServlety�� Serwery aplikacjiSerwery aplikacji

Technologie Technologie ClientClient--SideSide

Przykłady technologii prezentacji:Przykłady technologii prezentacji:

�� (X)HTML(X)HTML�� CSS (CSS (ang. ang. CascadeCascade Style Style SheetSheet))�� JavaScriptJavaScript, , JScriptJScript, , VBScriptVBScript

© SKiTI 2016

�� JavaScriptJavaScript, , JScriptJScript, , VBScriptVBScript�� Aplety JavyAplety Javy�� ShockwaveShockwave, , FlashFlash�� AJAX (AJAX (ang.ang. Asynchronous JavaScript and XMLAsynchronous JavaScript and XML))�� X3DX3D�� WML (WML (ang. ang. Wireless Wireless MarkupMarkup LanguageLanguage))�� RSS (RSS (ang. ang. Really Simple Syndication Really Simple Syndication ) / Atom) / Atom

Testowanie technologiiTestowanie technologii-- ServerServer--Side i ClientSide i Client--Side Side --

Przykładowa platforma potrzebna do testów w Przykładowa platforma potrzebna do testów w „domowym zaciszu”:„domowym zaciszu”:

�� Komputer PCKomputer PC�� OS: Windows, Linux lub Mac OS XOS: Windows, Linux lub Mac OS X

© SKiTI 2016

�� OS: Windows, Linux lub Mac OS XOS: Windows, Linux lub Mac OS X�� Przeglądarkę lub przeglądarki internetowePrzeglądarkę lub przeglądarki internetowe�� np.: np.:

�� XAMPPXAMPP, który, który jest jedną z popularniejszych i „wzbogaconych” jest jedną z popularniejszych i „wzbogaconych” dystrybucji serwera Apache.dystrybucji serwera Apache.XAMPP XAMPP oferuje między innymioferuje między innymi: Apache, : Apache, MariaDBMariaDB (kompatybilna z (kompatybilna z MySQLMySQL)), PHP, PHP,, Perl, Perl, FileZillaFileZilla FTP Server, FTP Server, phpMyAdminphpMyAdmin, , OpenSSLOpenSSL,, ……

�� WAMPP WAMPP –– WampServerWampServer, który zawiera , który zawiera Apache, Apache, MySQLMySQL, , PHPPHP

Część IICzęść II

© SKiTI 2016

Część IICzęść II-- (X)HTML (X)HTML --

8

Troch ę HistoriiTroch ę Historii

Historia Historia SGMLSGML / HTML / XHTML/ HTML / XHTML

�� Dawno, dawno temu…Dawno, dawno temu…�� W latach 80 dwudziestego wieku wykorzystywano język SGML W latach 80 dwudziestego wieku wykorzystywano język SGML (ang. (ang.

Standard Generalized Markup Languag) Standard Generalized Markup Languag) -- Standardowy Uogólniony Standardowy Uogólniony Język ZnacznikówJęzyk Znaczników

© SKiTI 2016 9

Język ZnacznikówJęzyk Znaczników�� SGML jest językiem służącym do definiowania języków SGML jest językiem służącym do definiowania języków

znacznikowych, zwłaszcza tych używanych w elektronicznej wymianie znacznikowych, zwłaszcza tych używanych w elektronicznej wymianie dokumentów, zarządzaniu dokumentami i ich publikowaniu.dokumentów, zarządzaniu dokumentami i ich publikowaniu.

�� W 1986 roku uznano go jako międzynarodowy standardW 1986 roku uznano go jako międzynarodowy standard�� SGML posiada szeroki zasób możliwości i jednocześnie jest SGML posiada szeroki zasób możliwości i jednocześnie jest

elastycznyelastyczny�� Owa elastyczność ma swą cenę, którą jest wysoki stopień złożoności, Owa elastyczność ma swą cenę, którą jest wysoki stopień złożoności,

który zahamował jego wprowadzenie w różne środowiska, m.in. w sieć który zahamował jego wprowadzenie w różne środowiska, m.in. w sieć WWWWWW

Troch ę HistoriiTroch ę HistoriiHistoria SGML / Historia SGML / HTMLHTML / XHTML/ XHTML�� W 1990 rokuW 1990 roku

�� Na bazie SGML powstaje HTML (Na bazie SGML powstaje HTML (ang. ang. HyperTextHyperText MarkupMarkup LanguageLanguage))-- Hipertekstowy Język ZnacznikówHipertekstowy Język Znaczników, opracowany przez , opracowany przez TimaTima BernersBerners--LeeLee i Daniela i Daniela W. W. ConnollyConnolly

�� Początkowo HTML miał być językiem służącym do wymiany dokumentów Początkowo HTML miał być językiem służącym do wymiany dokumentów naukowych i technicznych, odpowiednim do używania przez specjalistównaukowych i technicznych, odpowiednim do używania przez specjalistów

© SKiTI 2016 10

naukowych i technicznych, odpowiednim do używania przez specjalistównaukowych i technicznych, odpowiednim do używania przez specjalistów�� HTML rozwiązał problem złożoności SGML poprzez zdefiniowanie niewielkiego HTML rozwiązał problem złożoności SGML poprzez zdefiniowanie niewielkiego

zestawu strukturalnych i semantycznych znaczników (zestawu strukturalnych i semantycznych znaczników (tagówtagów) nadającego się do ) nadającego się do tworzenia względnie prostych dokumentówtworzenia względnie prostych dokumentów

�� W krótkim czasie HTML stał się bardzo popularny i szybko wykroczył poza swój W krótkim czasie HTML stał się bardzo popularny i szybko wykroczył poza swój pierwotny cel pierwotny cel

�� Od 1990 do 1997 rokuOd 1990 do 1997 roku�� Powstają kolejne wersje języka HTML, w których pojawiają się nowe elementy Powstają kolejne wersje języka HTML, w których pojawiają się nowe elementy

przeznaczone dla tego językaprzeznaczone dla tego języka�� W 1997 roku pojawia się wersja HTMLW 1997 roku pojawia się wersja HTML 4.0 4.0 �� W 1999 roku pojawia się ostatnia poprawka do wersji HTML 4.01W 1999 roku pojawia się ostatnia poprawka do wersji HTML 4.01�� Wielość nowych elementów języka HTML doprowadziła do pojawiania się Wielość nowych elementów języka HTML doprowadziła do pojawiania się

problemów ze wzajemnym współdziałaniem dokumentów na różnych platformach problemów ze wzajemnym współdziałaniem dokumentów na różnych platformach �� I co dalej?I co dalej?

Troch ę HistoriiTroch ę HistoriiHistoria SGML / HTML / Historia SGML / HTML / XHTMLXHTML�� W 2000 rokuW 2000 roku

�� Na bazie SGML powstaje XML (Na bazie SGML powstaje XML (ang. ang. ExtensibleExtensible MarkupMarkup LanguageLanguage ))-- Rozszerzalny Język ZnacznikówRozszerzalny Język Znaczników

�� XML był pomyślany jako sposób na odzyskanie możliwości i XML był pomyślany jako sposób na odzyskanie możliwości i elastyczności SGML bez jego dużej złożoności elastyczności SGML bez jego dużej złożoności

© SKiTI 2016 11

elastyczności SGML bez jego dużej złożoności elastyczności SGML bez jego dużej złożoności �� XML jest ograniczoną formą SGMLXML jest ograniczoną formą SGML�� XML zachowuje większość z bogatych możliwości SGML przy czym XML zachowuje większość z bogatych możliwości SGML przy czym

usuwa wiele z jego bardziej złożonych właściwości SGMLusuwa wiele z jego bardziej złożonych właściwości SGML�� Następuje przeformułowanie HTML 4 w XML Następuje przeformułowanie HTML 4 w XML 1.0, powstaje 1.0, powstaje XHTML 1.0XHTML 1.0�� XHTMLXHTML (ang. (ang. ExtensibleExtensible HyperTextHyperText MarkupMarkup LanguageLanguage) ) -- Rozszerzalny Rozszerzalny

Hipertekstowy Język ZnacznikówHipertekstowy Język Znaczników –– jest następcą języka HTMLjest następcą języka HTML�� XHTMLXHTML to rodzina obecnych i przyszłych typów dokumentów i to rodzina obecnych i przyszłych typów dokumentów i

modułów, które kopiują i rozszerzają HTMLmodułów, które kopiują i rozszerzają HTML 44�� XHTMLXHTML w porównaniu do HTML w porównaniu do HTML wprowadza pewne obostrzeniawprowadza pewne obostrzenia, które , które

pozwalają dostosować składnię do języka pozwalają dostosować składnię do języka XMLXML�� W 2001 roku powstaje W 2001 roku powstaje XHTML XHTML 1.1 i co dalej ? 1.1 i co dalej ?

World Wide Web Consortium (W3C)World Wide Web Consortium (W3C)

WorldWorld WideWide Web Web ConsortiumConsortium (W3C)(W3C)

�� W3C to organizacja, która zajmuje się ustanawianiem W3C to organizacja, która zajmuje się ustanawianiem standardów pisania i przesyłu stron WWWstandardów pisania i przesyłu stron WWW

�� W3C jest obecnie zrzeszeniem ponad 400 organizacji, W3C jest obecnie zrzeszeniem ponad 400 organizacji,

© SKiTI 2016 12

�� W3C jest obecnie zrzeszeniem ponad 400 organizacji, W3C jest obecnie zrzeszeniem ponad 400 organizacji, firm, agencji rządowych i uczelni z całego światafirm, agencji rządowych i uczelni z całego świata

�� Publikowane przez W3C rekomendacje nie mają mocy Publikowane przez W3C rekomendacje nie mają mocy prawnej, nakazującej ich użycie, lecz wpływ samej prawnej, nakazującej ich użycie, lecz wpływ samej organizacji nie pozwala się z nimi nie liczyćorganizacji nie pozwala się z nimi nie liczyć

Link konsorcjum Link konsorcjum W3C: W3C: http://www.w3.orghttp://www.w3.org

Troch ę HistoriiTroch ę HistoriiI co dalej ?I co dalej ?

�� Do końca roku 2009 trwały pracę grupy W3C związane z Do końca roku 2009 trwały pracę grupy W3C związane z XHTML 2 XHTML 2 (całkowicie zrywa z kompatybilnością wstecz (całkowicie zrywa z kompatybilnością wstecz --> HTML), > HTML), obecnie są one obecnie są one zarzuconezarzucone

�� Niezależnie od organizacji W3C grupa Niezależnie od organizacji W3C grupa WHATWG (WHATWG (ang. ang. Web Hypertext Web Hypertext

© SKiTI 2016 13

�� Niezależnie od organizacji W3C grupa Niezależnie od organizacji W3C grupa WHATWG (WHATWG (ang. ang. Web Hypertext Web Hypertext Application Technology Working Group)Application Technology Working Group) zrzeszająca środowiska i zrzeszająca środowiska i producentów przeglądarek zaczęła pracę nad HTML 5.0 i wspólnie z W3C producentów przeglądarek zaczęła pracę nad HTML 5.0 i wspólnie z W3C (od 2007) opracowuje pierwszy draft HTML 5.0 (2008 rok)(od 2007) opracowuje pierwszy draft HTML 5.0 (2008 rok)

�� Planowano że HTML 5.0 w Planowano że HTML 5.0 w 2022 roku 2022 roku będzie miał pełną implementację będzie miał pełną implementację (bez błędów) w co najmniej dwóch przeglądarkach internetowych(bez błędów) w co najmniej dwóch przeglądarkach internetowychHTML 4 wci ąż na to czeka ;)HTML 4 wci ąż na to czeka ;)

�� Od październikaOd października 2014 HTML 5.02014 HTML 5.0 uzyskał status rekomendacji W3C uzyskał status rekomendacji W3C �� Równolegle przywrócono prace nad Równolegle przywrócono prace nad XHTML 5XHTML 5 zgodnym z zgodnym z XHTM 1.1XHTM 1.1�� W listopadzie W listopadzie 20162016 opublikowano specyfikację opublikowano specyfikację HTML HTML 5.15.1, w kolejnych , w kolejnych

miesiącach (miesiącach (2017?) 2017?) zapowiedziany szkic zapowiedziany szkic specyfikacji specyfikacji HTML 5.2HTML 5.2..

Różnice pomi ędzy HTML 4 a 5: Różnice pomi ędzy HTML 4 a 5: http://www.w3.org/TR/html5http://www.w3.org/TR/html5--diff/diff/

(X)HTML(X)HTML

© SKiTI 2016 14

(X)HTML(X)HTML

Przykładowa struktura szablonu strony Przykładowa struktura szablonu strony (X)HTML(X)HTML

<!DOCTYPE html <!DOCTYPE html PUBLIC "PUBLIC "--//W3C//DTD HTML 4.01 Transitional//EN" //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><"http://www.w3.org/TR/html4/loose.dtd"><htmlhtmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">>

<<headhead>><<metameta httphttp--equiv=equiv="Content"Content--Type" Type" content=content="text/html; "text/html; charsetcharset==isoiso--88598859--2"2" //>><<metameta name=name="Description"Description" " content=content=””TuTu opis zawarto ści stronyopis zawarto ści strony "" //>>

© SKiTI 2016 15

<<metameta name=name="Description"Description" " content=content=””TuTu opis zawarto ści stronyopis zawarto ści strony "" //>><<metameta name=name="Keywords"Keywords" " content=content=””TuTu wyrazy kluczowewyrazy kluczowe "" //>><<metameta name=name="Author"Author" " content=content=””TuTu dane autora stronydane autora strony "" //>><<titletitle >>TuTu tytuł stronytytuł strony <<//titletitle >>

<<//headhead>><<bodybody >>

Tu tre ść stronyTu tre ść strony<<//bodybody >><<//htmlhtml > >

Szablon strony (X)HTML w przegl ądarceSzablon strony (X)HTML w przegl ądarce

© SKiTI 2016 16

Podstawowe zasady (X)HTMLPodstawowe zasady (X)HTML�� Język (X)HTML składa się ze znaczników (tzw. Język (X)HTML składa się ze znaczników (tzw. tagówtagów), które ), które

zapisywane są w nawiasach klamrowych zapisywane są w nawiasach klamrowych <><>�� Do każdego z Do każdego z tagówtagów zwykle można podać pewne atrybuty (inaczej zwykle można podać pewne atrybuty (inaczej

parametry, nie zawsze jest to jednak konieczne, bądź możliwe)parametry, nie zawsze jest to jednak konieczne, bądź możliwe)�� Atrybut może posiadać także przypisaną pewną wartość, bądź Atrybut może posiadać także przypisaną pewną wartość, bądź

występować samodzielnie występować samodzielnie -- wtedy określa on pewne cechy danego wtedy określa on pewne cechy danego znacznikaznacznika

© SKiTI 2016 17

znacznikaznacznika�� TagiTagi nie są widoczne na ekranie, widoczne są tylko efekty ich nie są widoczne na ekranie, widoczne są tylko efekty ich

działania działania �� Większość Większość tagówtagów wymaga także „zamknięcia” przy użyciu wymaga także „zamknięcia” przy użyciu tagataga o o

identycznej nazwie jak identycznej nazwie jak tagtag otwierający, jednak poprzedzonej otwierający, jednak poprzedzonej znakiem "znakiem "//„„

�� TagiTagi zamykające nigdy nie posiadają parametrówzamykające nigdy nie posiadają parametrów

<<b b title=”tytul”title=”tytul” > > Tekst pogrubionyTekst pogrubiony <<//bb> >

Podstawowe zasady (X)HTMLPodstawowe zasady (X)HTML�� Nazwy tagów oraz parametrów i ich wartości mogą być pisane Nazwy tagów oraz parametrów i ich wartości mogą być pisane

dużymi, jak i małymi literami. Zaleca się jednak pisanie ich dużymi, jak i małymi literami. Zaleca się jednak pisanie ich wyłącznie małymi literami, ze względu na wymogi języka XHTMLwyłącznie małymi literami, ze względu na wymogi języka XHTML

�� Wartości poszczególnych parametrów zaleca się obejmowaniem Wartości poszczególnych parametrów zaleca się obejmowaniem cudzysłowami cudzysłowami -- wymogi XHTMLwymogi XHTMLTagi można zagnieżdżać, przy czym kolejność zagnieżdżania Tagi można zagnieżdżać, przy czym kolejność zagnieżdżania

© SKiTI 2016 18

�� Tagi można zagnieżdżać, przy czym kolejność zagnieżdżania Tagi można zagnieżdżać, przy czym kolejność zagnieżdżania ma znaczenie (przy jej zmianie wynikowy dokument wyświetlony ma znaczenie (przy jej zmianie wynikowy dokument wyświetlony przez przeglądarkę jest zwykle inny)przez przeglądarkę jest zwykle inny)

�� Przy umieszczaniu tagów zamykających (rozpoczynających się Przy umieszczaniu tagów zamykających (rozpoczynających się od "od "//") należy pilnować kolejności w jakiej były otwierane, i ") należy pilnować kolejności w jakiej były otwierane, i zamykać je w odwrotnej kolejności (poczynając od najbardziej zamykać je w odwrotnej kolejności (poczynając od najbardziej zagnieżdzonego) zagnieżdzonego) -- wymogi XHTMLwymogi XHTML

<<b b title=”tytul_g”title=”tytul_g” > > TekstTekst <<i i title=”tytul_i”title=”tytul_i” > > pogrubiony i pochylonypogrubiony i pochylony <<//ii><><//bb> >


<!DOCTYPE html<!DOCTYPE htmlPUBLIC "PUBLIC "--//W3C//DTD XHTML 1.0 Transitional//EN//W3C//DTD XHTML 1.0 Transitional//EN” ” "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1--transitional.dtd">transitional.dtd">

<<htmlhtml xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" >><<headhead>>

<<metameta httphttp--equiv="Contentequiv="Content--Type" content="text/html; Type" content="text/html; charsetcharset=iso=iso--88598859--2"2" //>>

© SKiTI 2016 19

<<metameta name="Descriptionname="Description" " content=”content=”TuTu opis zawarto ści stronyopis zawarto ści strony "" //>><<metameta name="Keywordsname="Keywords" " content=”content=”TuTu wyrazy kluczowewyrazy kluczowe "" //>><<metameta name="Authorname="Author" " content=”content=”TuTu dane autora stronydane autora strony "" //>><<titletitle >>TuTu tytuł stronytytuł strony <<//titletitle >>



Deklaracja typu dokumentuDeklaracja typu dokumentu -- DTDDTD

�� DTD (DTD (ang. ang. DocumentDocument TypeType DeclarationDeclaration), określa która wersja ), określa która wersja języka (X)HTML i w jakim zakresie będzie wykorzystywana na języka (X)HTML i w jakim zakresie będzie wykorzystywana na

<!DOCTYPE html<!DOCTYPE htmlPUBLIC "PUBLIC "--//W3C//DTD HTML 4.01 Transitional//EN" //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">"http://www.w3.org/TR/html4/loose.dtd">

© SKiTI 2016 20

języka (X)HTML i w jakim zakresie będzie wykorzystywana na języka (X)HTML i w jakim zakresie będzie wykorzystywana na stronie, w tym przypadku stronie, w tym przypadku TransitionalTransitional (przejściowa) , co (przejściowa) , co zagwarantuje, że strona używająca znaczników i atrybutów zagwarantuje, że strona używająca znaczników i atrybutów zdeprecjonowanych (nie zalecanych) zawsze będzie zdeprecjonowanych (nie zalecanych) zawsze będzie poprawna pod względem zgodności ze standardem HTMLpoprawna pod względem zgodności ze standardem HTML

�� Deklarację typu dokumentu DTD należy wpisać jako pierwszą Deklarację typu dokumentu DTD należy wpisać jako pierwszą linijkę w dokumencie linijkę w dokumencie -- jeszcze przed znacznikiem jeszcze przed znacznikiem otwierającym <otwierającym <htmlhtml >>

�� Podanie adresu wersji DTD, pozwala przeglądarce pobrać Podanie adresu wersji DTD, pozwala przeglądarce pobrać wersję DTD oraz wszystkie potrzebne zestawy znaków wersję DTD oraz wszystkie potrzebne zestawy znaków

Inne przykłady DTDInne przykłady DTD

<!DOCTYPE HTML PUBLIC "<!DOCTYPE HTML PUBLIC "--//W3C//DTD HTML 4.01//EN" //W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> "http://www.w3.org/TR/html4/strict.dtd">

�� Ścisła deklaracja dokumentu (Ścisła deklaracja dokumentu (ang. Strict DTDang. Strict DTD ) zawiera ) zawiera wszystkie elementy i atrybuty, które nie są wszystkie elementy i atrybuty, które nie są zdeprecjonowanezdeprecjonowaneoraz nie pojawiają się w dokumentach z ramkamioraz nie pojawiają się w dokumentach z ramkami

© SKiTI 2016 21

�� Deklaracja dokumentu dla ramek (Deklaracja dokumentu dla ramek (ang. Frameset DTDang. Frameset DTD) ) zawiera wszystko co w zawiera wszystko co w Transitional DTDTransitional DTD plus elementy plus elementy odnoszące się do ramek odnoszące się do ramek

<!DOCTYPE HTML PUBLIC "<!DOCTYPE HTML PUBLIC "--//W3C//DTD HTML 4.01 Frame set//EN" //W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">"http://www.w3.org/TR/html4/frameset.dtd">

Inne przykłady DTDInne przykłady DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

�� Ścisła Ścisła (jedyna) deklaracja (jedyna) deklaracja dokumentu dokumentu XHTML 1.1XHTML 1.1

�� Przykłady deklaracji dokumentu HTML5Przykłady deklaracji dokumentu HTML5

© SKiTI 2016 22

�� Przykłady deklaracji dokumentu HTML5Przykłady deklaracji dokumentu HTML5

�� Przykładowa deklaracja dokumentu XHTML5Przykładowa deklaracja dokumentu XHTML5

<!DOCTYPE html >

<!DOCTYPE html SYSTEM ”about:legacy-comat”>

<?xml version=”1.0” encoding=UTF-8””>

Przykładowa struktura szablonu strony HTMLPrzykładowa struktura szablonu strony HTML




© SKiTI 2016 23




Sekcja: <Sekcja: < htmlhtml > </> </htmlhtml >>

�� Element <Element <htmlhtml > > definiuje początek dokumentu HTMLdefiniuje początek dokumentu HTML

......<<htmlhtml xmlns= "http://www.w3.org/1999/xhtml" xml:lang= "pl" >>

......<<//htmlhtml >>

© SKiTI 2016 24

�� Element <Element <htmlhtml > > definiuje początek dokumentu HTMLdefiniuje początek dokumentu HTML

�� Atrybut Atrybut xmlnsxmlns definiuje przestrzeń nazw dla języka XMLdefiniuje przestrzeń nazw dla języka XML�� Atrybut Atrybut xml:lang definiuje język dla zawartości elementudefiniuje język dla zawartości elementu

�� Element Element </</htmlhtml > powinien znaleźć się na końcu dokumentu > powinien znaleźć się na końcu dokumentu HTMLHTML


<!DOCTYPE html<!DOCTYPE htmlPUBLIC "PUBLIC "--//W3C//DTD XHTML 1.0 Transitional////W3C//DTD XHTML 1.0 Transitional//EN"EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1--transitional.dtd">transitional.dtd">



© SKiTI 2016 25




Sekcja: <Sekcja: < headhead> </> </headhead>>

......<<headhead>>

......<<//headhead >>

......

© SKiTI 2016 26

�� Sekcja tzw. „nagłówka dokumentu”Sekcja tzw. „nagłówka dokumentu”�� Wewnątrz części nagłówkowej można określić ogólne Wewnątrz części nagłówkowej można określić ogólne

informacje o dokumencie oraz jego zawartości (tag <informacje o dokumencie oraz jego zawartości (tag <meta meta />), />), między innymi stronę kodową, opis zawartości strony, słowa między innymi stronę kodową, opis zawartości strony, słowa kluczowe związane ze stroną i jej autorakluczowe związane ze stroną i jej autora

�� Oraz tytuł dokumentu, pomiędzy tagami: <Oraz tytuł dokumentu, pomiędzy tagami: <titletitle > </ > </ titletitle >>

Sekcja: <Sekcja: < bodybody > </> </bodybody >>

�� Sekcja tzw. „ciała dokumentu”Sekcja tzw. „ciała dokumentu”

<<bodybody >>Tu tre ść stronyTu tre ść strony

<<//bodybody >>

© SKiTI 2016 28

�� Sekcja tzw. „ciała dokumentu”Sekcja tzw. „ciała dokumentu”�� W tej części dokumentu można dzielić tekst na W tej części dokumentu można dzielić tekst na

akapity, tworzyć tytuły spisy, określać łącza do innych akapity, tworzyć tytuły spisy, określać łącza do innych dokumentówdokumentów itp..itp..

Podstawowe zabawy z tekstem Podstawowe zabawy z tekstem

AkapitAkapit�� jest to część tekstu objęta znacznikami: jest to część tekstu objęta znacznikami: <<pp>...</>...</pp>>

PrzykładyPrzykłady, wyrównanie w lewo (domyślne), w prawo, , wyrównanie w lewo (domyślne), w prawo, do środka oraz justowanie tekstu do środka oraz justowanie tekstu

© SKiTI 2016 29

<<pp align="left">align="left"> ......</</pp>>

do środka oraz justowanie tekstu do środka oraz justowanie tekstu

<<pp align="rightalign="right ">"> ......</</pp>>

<<pp align="center">align="center"> ......</</pp>>

<<pp align="justifyalign="justify ">"> ......</</pp>>


TytułTytuł�� Stosowany aby nadać tytuł (nagłówek) jakiejś części Stosowany aby nadać tytuł (nagłówek) jakiejś części

tekstu (rozdziałowi)tekstu (rozdziałowi)�� Tytuł, w zależności od wielkości czcionki obejmuje Tytuł, w zależności od wielkości czcionki obejmuje

<<h1h1>...</>...</h1h1> > <<h6h6>...</>...</h6h6> >

© SKiTI 2016 30

się znacznikami: od się znacznikami: od <<h1h1>...</>...</h1h1> > dodo <<h6h6>...</>...</h6h6> >

PrzykładyPrzykłady, „bardzo duży” tytuł oraz tytuł normalnej , „bardzo duży” tytuł oraz tytuł normalnej wielkości (ale pogrubiony) wielkości (ale pogrubiony)

<<h1h1> > Bardzo du ży tytuł Bardzo du ży tytuł </</h1h1>>

<<h6h6> > Tytuł normalnej wielko ściTytuł normalnej wielko ści </</h6h6>>


Przejście do nowego wierszaPrzejście do nowego wiersza

<<brbr >>

Podkreślenie wybranego tekstuPodkreślenie wybranego tekstu

<<uu> > tekst do podkre śleniatekst do podkre ślenia </</uu>>

© SKiTI 2016 31

Pogrubienie wybranego tekstuPogrubienie wybranego tekstu

<<bb> > tekst do pogrubieniatekst do pogrubienia </</bb>>

Pochylenie wybranego tekstuPochylenie wybranego tekstu

<<ii> > tekst do pochyleniatekst do pochylenia </</ii>>


Indeks dolnyIndeks dolny

Podkreślenie wybranego tekstuPodkreślenie wybranego tekstu

<<supsup > > ...... </</supsup >>

<<subsub > > ...... </</subsub >>

© SKiTI 2016 32

Wielkość czcionkiWielkość czcionki, , gdzie "gdzie "nn" oznacza wielkość pisma" oznacza wielkość pisma(1(1 -- najmniejsza, 7najmniejsza, 7 -- największa, największa, 33 -- domyślna)domyślna)

<<fontfont size="size=" nn ">"> ......</</fontfont >>

Kolor czcionkiKolor czcionki

<<fontfont color="color=" kolorkolor ">"> ......</</fontfont >>

Odsyłacze Odsyłacze OdsyłaczeOdsyłacze�� To inaczej To inaczej hiperłączahiperłącza, , odnośniki hipertekstoweodnośniki hipertekstowe, , linkilinki�� Są wykorzystywane głównie do:Są wykorzystywane głównie do:

�� Tworzenie spisu treści serwisu Tworzenie spisu treści serwisu

© SKiTI 2016 33

Tworzenie spisu treści serwisu Tworzenie spisu treści serwisu �� Linki do innych ciekawych miejsc w InternecieLinki do innych ciekawych miejsc w Internecie

Otwarcie linku w nowym oknie:Otwarcie linku w nowym oknie:

<<aa href="href=" wzgl ędna ścieżka dost ępuwzgl ędna ścieżka dost ępu "> "> opisopis </</aa>>

<<aa href="href=" ..index.html..index.html "> "> Strona główna Strona główna </</aa>>

<<aa target="_blank"target="_blank" href="href=" www.firma.com.plwww.firma.com.pl ">"> StartStart </</aa>>

Listy (wykazy)Listy (wykazy)Listy (wykazy)Listy (wykazy)�� Typowo wykorzystywane do sporządzania Typowo wykorzystywane do sporządzania

usystematyzowanych zestawień informacji w postaci usystematyzowanych zestawień informacji w postaci wyszczególnionych punktów (wyszczególnionych punktów (<<lili > … <> … </li/li >)>) ::�� nieuporządkowanych (nienumerowanych) nieuporządkowanych (nienumerowanych) –– <<ulul > <> </ul/ul>>

© SKiTI 2016 34

�� nieuporządkowanych (nienumerowanych) nieuporządkowanych (nienumerowanych) –– <<ulul > <> </ul/ul>>

�� lub uporządkowanych (numerowanych) lub uporządkowanych (numerowanych) –– <<olol > <> </ol/ol>>

<<ulul >><<lili > > Pierwszy element listy nieuporz ądkowanejPierwszy element listy nieuporz ądkowanej <</li/li >><<lili > > Drugi element listy nieuporz ądkowanejDrugi element listy nieuporz ądkowanej <</li/li >>

<</ul/ul >>

<<olol >><<lili > > Pierwszy element listy uporz ądkowanejPierwszy element listy uporz ądkowanej <</li/li >><<lili > > Drugi element listy uporz ądkowanejDrugi element listy uporz ądkowanej <</li/li >>

<</ol/ol >>

Tabele Tabele Struktura tabeliStruktura tabeli

<<tabletable borderborder= "1" width="100%"= "1" width="100%" >>

<<trtr >><<tdtd >>komórka1komórka1 </</tdtd >> <<tdtd >>komórka2komórka2 </</tdtd >>

</</trtr >>

© SKiTI 2016 35

</</trtr >><<trtr >>

<<tdtd >>komórka3komórka3 </</tdtd >> <<tdtd >>komórka4komórka4 </</tdtd >></</trtr >></</tabletable >>

�� Powyższe polecenia tworzą tabelę, złożoną z dwóch kolumn i Powyższe polecenia tworzą tabelę, złożoną z dwóch kolumn i dwóch wierszy (razem cztery komórki)dwóch wierszy (razem cztery komórki)

�� Tabela zajmie 100% szerokości przeglądarki minus marginesyTabela zajmie 100% szerokości przeglądarki minus marginesy�� Znaczniki wierszy <Znaczniki wierszy <trtr >>......</</trtr >, znaczniki kolumn <>, znaczniki kolumn <tdtd >>......</</tdtd > >

Tabele Tabele Atrybuty Atrybuty colspancolspan ii rowspanrowspan


<tr> <td colspan="2" >komórki1,2 </td>

</tr>

© SKiTI 2016 37

</tr><tr>

<td>komórka3 </td> <td>komórka4 </td></tr> </</tabletable >>

�� Atrybut Atrybut colspancolspan pozwala na poziome łączenie x komórek w tabeli (w tym przypadku 2), dzi ęki czemu jedna poł ączona komórka mo że się „rozci ągać” na kilka komórek pojedynczych

Tabele Tabele Atrybuty Atrybuty colspancolspan ii rowspanrowspan


<tr> <td rowspan="2"> komórki1,3 </td> <td>komórka2 </td>

</tr>

© SKiTI 2016 39

</tr><tr>

<td>komórka4 </td></tr></</tabletable >>

�� Atrybut Atrybut rowspanrowspan pozwala na pionowe łączenie x komórek w tabeli (w tym przypadku 2), dzi ęki czemu jedna poł ączona komórka mo że się „rozci ągać” na kilka komórek pojedynczych

Obrazek Obrazek Wstawianie obrazka do dokumentu:Wstawianie obrazka do dokumentu:

<<imgimg src="src="ścieżka dost ępuścieżka dost ępu " alt="" alt="Tekst alternatywnyTekst alternatywny ""

width="width="xx" height="" height="yy" />" />

�� „„ścieżka dostępuścieżka dostępu” wskazuje lokalizację obrazka na dysku, może ” wskazuje lokalizację obrazka na dysku, może

© SKiTI 2016 42

�� „„ścieżka dostępuścieżka dostępu” wskazuje lokalizację obrazka na dysku, może ” wskazuje lokalizację obrazka na dysku, może być ścieżką względną lub ścieżką bezezględnąbyć ścieżką względną lub ścieżką bezezględną

�� „„Tekst alternatywnyTekst alternatywny” oznacza krótką informację, która pojawi się w ” oznacza krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlonyprzypadku, kiedy obrazek nie zostanie wyświetlony

�� „„xx” szerokość obrazka” szerokość obrazka�� „„yy” wysokość obrazka ” wysokość obrazka

<<imgimg src="src="..logo.jpg..logo.jpg " alt=„" alt=„Logo firmyLogo firmy " width="" width="100100" height="" height="100100" />" />

Wybrane z wielu innych …Wybrane z wielu innych …

Pozioma liniaPozioma linia –– np. do rozdzielania tekstunp. do rozdzielania tekstu

<<hr hr />/>

KomentarzKomentarz –– np. do np. do opisywania fragmentów kodu (X)HTML opisywania fragmentów kodu (X)HTML

© SKiTI 2016 43

KomentarzKomentarz –– np. do np. do opisywania fragmentów kodu (X)HTML opisywania fragmentów kodu (X)HTML (tekst objęty w znaczniki komentarza nie jest wyświetlany (tekst objęty w znaczniki komentarza nie jest wyświetlany przez przeglądarkę internetową)przez przeglądarkę internetową)

<<!!---- tekst komentarza tekst komentarza ---- >>

Czym jest Czym jest walidatorwalidator ??

Walidator jest to program sprawdzający poprawność dokumentu o określonej składni np.: HTML, XHTML, CSS, RSS…

© SKiTI 2016 44

Walidator języków znacznikowych (HTML, XHTML,…):http://validator.w3.org/

Walidator CSS i dokumentów (X)HTML z CSS:http://jigsaw.w3.org/css-validator/

Zadanie domoweZadanie domowe

Wykorzystuj ąc ogólnodost ępne materiały w Internecie

zapoznać się z podstawowymi

© SKiTI 2016

zapoznać się z podstawowymi znacznikami (tagami) (X)HTML

oraz ich atrybutami

BibliografiaBibliografia

Przykładowa Literatura:Przykładowa Literatura:

�� Konsorcjum W3C:Konsorcjum W3C:http://www.w3.orghttp://www.w3.org

�� Specyfikacja HTML: Specyfikacja HTML:

© SKiTI 2016

http://www.w3.org/TR/html4/http://www.w3.org/TR/html4/�� Specyfikacja XHTMLSpecyfikacja XHTML::

http://www.w3.org/TR/xhtml1/http://www.w3.org/TR/xhtml1/�� WalidatorWalidator języków znacznikowych (HTML, XHTML,…):języków znacznikowych (HTML, XHTML,…):

http://validator.w3.org/http://validator.w3.org/�� WalidatorWalidator CSS i dokumentów (X)HTML z CSS:CSS i dokumentów (X)HTML z CSS:

http://jigsaw.w3.org/http://jigsaw.w3.org/csscss--validatorvalidator//

46

sieci komputerowe i technologie internetowe (skiti)...język (x)html składa się ze znaczników...

Documents