Technologie Internetu HTML Aleksander Denisiuk denisjuk@pja.edu.pl Polsko-Japońska Akademia Technik Komputerowych Wydział Informatyki w Gdańsku ul. Brzegi 55 80-045 Gdańsk Technologie Internetu p. 1
HTML Najnowsza wersja tego dokumentu dostępna jest pod adresemhttp://users.pja.edu.pl/~denisjuk/ Technologie Internetu p. 2
Hipertekst Vannevar Bush, As We May Think, 1945 Memex Ted Nelson 1960 Xanadu 1965 Hipertekst, hipermedia Milorad Pavić, 1984 Słownik chazarski Technologie Internetu p. 3
Języki znaczników. SGML 1969, IMB (Charles Goldfarb, Edward Mosher, Raymond Lorie) GML Dokument deklaratywny: opisanie struktury i atrybutów dokumentu, nie sposobu jego przetwarzania (prezentacji) Opisanie powinno być precyzyjne: powtarzalny wynik Standard Generalized Markup Language ISO 8879 (1986 rok) Technologie Internetu p. 4
SGML. Przykład <!DOCTYPE BOOK PUBLIC "-//OASIS//DTD DocBook V3.1//EN" [<!ENTITY % fulltext SYSTEM "fulltext.ent"> %fulltext; ]> <BOOK ID="DOCBOOK"> <BOOKINFO> <TITLE>Document HTML</TITLE> </BOOKINFO> <BODY> <PARA>Hello & World! </BODY> </BOOK> Technologie Internetu p. 5
Poprawność SGML poprawny strukturalnie (tag-valid, dobrze ułożony) zgodny z DTD (poprawny) Technologie Internetu p. 6
Document Type Definition http://www.w3.org/tr/rec-html40/strict.dtd <!ELEMENT UL - - (LI)+> <!ELEMENT TBODY <!ELEMENT COL O O (TR)+> - O EMPTY> (O optional) <!ENTITY % coreattrs "id ID #IMPLIED class CDATA #IMPLIED"> <!ATTLIST BR %coreattrs; > Technologie Internetu p. 7
HTML 1989/90, CERN (Tim Berners-Lee, Robert Cailliau) Poczatkowe wersje były inspirowane SGML 1992, HTML 1.0 pierwsza nieoficjalna wersja 1995, HTML 2.0 pierwsze oficjalne SGML-owe DTD Wojna przegladarek Styczeń 1997 HTML 3.2 Grudzień 1997 HTML 4.0 1999 HTML 4.01 2000 ISO HTML 28 października 2014 HTML 5 Technologie Internetu p. 8
HTML 4.01 transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> Technologie Internetu p. 9
HTML 4.01. Przykład <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html><head> <title> A HTML 1.0 Strict standard template </title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <p>your HTML content here</p> </body> </html> Technologie Internetu p. 10
XML extensible Markup Language 1996 1998 uproszczona wersja SGML każdy element powinien być domknięty case-sensitive elementy powinny być poprawnie zagnieżdżone powinien być jeden element korzeniowy wszystkie atrybuty powinny być w cudzysłowie (apostrofie) przestrzenie nazw Technologie Internetu p. 11
XML. Przykład <?xml version="1.0"?> <html> <head> <title> TINY </title> </head> <body> Technologie internetu. <ol> <li>html</li> <li>css</li> </ol> </body> </html> Technologie Internetu p. 12
Drzewo XML to title TINY note Technologie internetu li body ol li HTML CSS Technologie Internetu p. 13
XML. Przykład DTD <!ENTITY % coreattrs "id ID #IMPLIED class CDATA #IMPLIED style %StyleSheet; #IMPLIED title %Text; #IMPLIED" > <!ELEMENT ul (li)+> <!ATTLIST ul %coreattrs; > Technologie Internetu p. 14
Aplikacje XML Docbook RSS OpenDocument SVG XHTML Technologie Internetu p. 15
XHTML 2000 XHTML 1.0 transitional frameset strict 2001 XHTML 1.1 28 października 2014 HTML 5 Technologie Internetu p. 16
HTML 5 Wide Web Consortium (W3C) XHTML 2.0 Web Hypertext Application Technology Working Group (WHATWG) Web Applications and Web Forms 2006, decyzja połaczyć wysiłki HTML5. Technologie Internetu p. 17
Zadania HTML 5 nowe możliwości będa oparte o HTML, CSS, DOM oraz JavaScript zmniejszyć (eliminować) potrzebę we wtyczkach (Flash) ulepszyć możłiwości debugowania nowe elementy maja zastapić skrypty sprzętowo niezależny otwarty standard Technologie Internetu p. 18
HTML5 nowe znaczniki (section,article,header, footer,nav,video,audio, etc) nowe pola formularzytel,search,url,email, datetime,date,number, etc nowe atrybuty elementów formularzy:autofocus, required,autocomplete,min,max etc możliwość osadzenia MathML i SVG nie zawiera żadnych elementów prezentacyjnych (np. font) canvas dynamiczne, skryptowe renderowanie grafiki (2D, 3D) Technologie Internetu p. 19
HTML5 wsparcie przez wszystkie przegladarki już przed 2014 rokiem brak końcowej specyfikacji 2016 rok: 5.1 Technologie Internetu p. 20
XHTML 1.1. Przykład <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> A XHTML 1.1 Strict standard template </title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <p>your HTML <br />content here</p> </body> </html> Technologie Internetu p. 21
HTML 5. Przykład <!DOCTYPE html> <html> <head> <title> A XHTML 1.1 Strict standard template </title> <meta charset="utf-8" /> </head> <body> <p>your HTML <br />content here</p> </body> </html> Technologie Internetu p. 22
Znaczniki HTML Każdy znacznik HTML (ang. tag) odpowiada logicznemu elementowi dokumentu Znacznik (element) pusty <hr /> Znacznik (element) prosty <h1>technologie Internetu</h1> Pusty element majacy atrybuty <img width="100" height="75" src="images/domek.png" /> Element złożony, który ma treść oraz atrybuty <a href="http://www.pjwstk.edu.pl"> PJWSTK</a> Technologie Internetu p. 23
Atrybuty standardowe Atrybuty uniwersalne. Nie dotyczy elementówbase, head,html,meta,param,script,style ititle. class,id,style,title Atrybuty językowe. Nie dotyczy elementówbase,br, frame,frameset,hr,iframe,param, orazscript. dir (ltr,rtl),lang (polski pl),xml:lang Atrybuty klawiatury. accesskey,tabindex Technologie Internetu p. 24
Ogólna struktura pliku HTML5 <!DOCTYPE html> <html> <head>.......... </head> <body>.......... </body> </html> Technologie Internetu p. 25
Ogólna struktura pliku HTML domyślna przestrzeń nazw http://www.w3.org/1999/xhtml Elementhead zawiera meta-informację o dokumencie. Meta-informacji nie wyświetla się w przegladarce. Może ona być użyta przy przetwarzaniu dokumentu. Elementbody zawiera logiczne elementy dokumentu, które maja się pojawić w przegladarce. Technologie Internetu p. 26
Meta informacja o dokumencie HTML <title>podstawy HTML</title> <meta name="description" content="wyklad z podstaw HTML" /> <meta name="keywords" content="html XHTML" /> <meta charset="utf-8" /> <meta name="author" content="aleksander Denisiuk" /a> Technologie Internetu p. 27
Mikrodane http://schema.org Technologie Internetu p. 28
Logiczne elementy dokumentu HTML. Akapit Treść akapitu powinna być poświęcona jednej spójnej myśli lub pojęciu Cały akapit należy umieszczać wewnatrz elementup <p>pierwszy akapit</p> Technologie Internetu p. 29
Rozdziały dokumentu podzielenie dokumentu na rozdziały, podrozdziały, punkty itd. pomaga czytelnikom lepiej orientować się w tekście HTML5 ma semantyczne znaczniki dla rozdziałów dokumentu: <article> artykuł (rozdział) <section> podrozdział <header> nagłówek dokumentu <footer> stopka <figure> wstawka <aside> wstawka, logicznie mniej zwiazana z dokumentem (na marginesie) <nav> blok nawigacyjny Technologie Internetu p. 30
Rozdziały dokumentu. Nagłówki h1 nagłówek całości dokumentu h2 h6 nagłówki rozdziałów i podrozdziałów dokumentu zarys dokumentu, Outliner Technologie Internetu p. 31
Przykład sematycznego dokumentu <header> <h1>aleksander Denisiuk. PJWSTK</h1> </header> <article> <h2>technologie Internetowe</h2> Technologie Internetu p. 32
Przykład, cd <section> <h3>wyklady</h3> <p>zaliczenie na egzaminie</p> </section> </article> <footer> <p>strona utworzona: <time datetime="2009-09-23">23 lutego 2009 roku</time></p> </footer> Technologie Internetu p. 33
Rozdziały dokumentu,div bloki dokumentu, które graja pewna rolę, umieszcza się wewnatrzdiv <div id= menu >........ </div> <div id= main >........ </div> <div id= right >........ </div> Technologie Internetu p. 34
Wyróżnienia logicznie wyróżniony fragment tekstu umieszcza się wewnatrz elementuem <p>element <em>pusty</em> nie ma ani tresci ani atrybutow</p> mark łagodniejsze wyróżnienie (na przykład, wyniki wyszukiwania) <p>i also have some <mark>kitten</mark>s who are visiting me these days. Maybe I should adopt a <mark>kitten</mark>.</p> Technologie Internetu p. 35
Wyróżnienia.span fragmenty tekstu, które graja pewna rolę umieszcza się wewnatrz elementuspan <p class= bibliography > <span class= author >Aleksander Denisiuk</span> <span class= title >Inversion of the X-ray transform</span> <span class= journal >Inverse Problems</span>, <span class= pages >399 411</span> <span class= year >2007</span> </p> Technologie Internetu p. 36
Wyszczególnienia i wyliczenia Do wyszczególnień i wyliczeń używa się odpowiednio znacznikówul (unordered list) iol (ordered list) Każdy element listy zostaje umieszczony wewnatrz znacznikali (list item): <ul> <li>wprowadzenie</li> <li>znaczniki HTML</li> <li>struktura pliku HTML</li> </ul> Technologie Internetu p. 37
Wyszczególnienia i wyliczenia. Zagnieżdżenie <ol> <li>meta informacja o dokumencie HTML <ol> <li>kodowanie</li> <li>inne elementy body</li> </ol> </li> <li>logiczne elementy <ol> <li>akapit</li> <li>listy</li> <li>tabele</li> </ol> </li> </ol> Technologie Internetu p. 38
Tabele <table> <th> <td>nazwa waluty</td> <td>kurs</td> </th> <tr> <td>dolar USA</td> <td>3,0828</td> </tr> <tr> <td>euro</td> <td>3,9390</td> </tr> </table> Technologie Internetu p. 39
Obrazki <img width="100" height="75" src="images/domek.png" alt="gmach uczelni" title="gmach uczelni" /> Technologie Internetu p. 40
Odnośniki inny dokument <a href="http://gdansk.pjwstk.edu.pl"> PJWSTK</a> ten sam dokument <h3 id="rysunki">obrazki</h3>.......... w <a href="#rysunki">obrazkach</a> Technologie Internetu p. 41
Komentarze <!-- To jest komentarz --> Technologie Internetu p. 42
Znaki Specjalne. Meta Symbole < < > > & & Technologie Internetu p. 43
Znaki Specjalne. Cudzysłowy Press the x key. Press the x key. tylko po «zebrach» tylko po «zebrach» HTML zawiera znacznikq, specjalnie przeznaczony do krótkich cytatów. Przegladarka powinna(?) otoczyć cytat właściwym dla zadeklarowanego języka cudzysłowem. <q>tylko po «zebrach»</q> Technologie Internetu p. 44
Pauzy i myślniki Łacznik niebiesko-czarny Myślnik ( ) Półpauza ( ) str. 11 13 11 czerwca 13 lipca Znak minusa ( 2) 2 Technologie Internetu p. 45
Wielokropek Nie tak..., tylko raczej tak: Nowy Jork, Tokio, Budapeszt,... Nie tak..., tylko raczej tak: Nowy Jork, Tokio, Budapeszt, Technologie Internetu p. 46
Niełamliwe odstępy Polskie zasady nie pozwalaja przy łamaniu linii pozostawiać na końcu jednoliterowych spójników lub przyimków. nie dbaj o bilet Inne przykłady: godz. 17.00; od 15 do 40 minut; na str. 2 napisano; rozdz. 2; 2 kule; p. Jan Nowak; p. J. Nowak; I takt IX Symfonii. Technologie Internetu p. 47
Poprawnie ułożony dokument HTML zostanie poprawnie wyświetlony w każdej przegladarce internetowej (o ile ona nie ma błędów). nadaje się do automatycznego opracowania. Na przykład, przy indeksacji strony zostanie poprawnie wyświetlony w alternatywnych niż przegladarka środkach, zarówno istniejacych jak i tych, co maja się pojawić w przyszłości. zostanie poprawnie skonwertowany w inny format. Na przykład, w PDF lub Open Document. zostanie poprawnie połaczony z innym dokumentem. Technologie Internetu p. 48
Validator W3C Validator W3C Technologie Internetu p. 49
Formularze HTML <form action= index.php method= post name= DaneOsobowe id= FDO > <p>login: <input type= text name= login id= FDO_L /> </p> <p>password: <input type= password size= 1 name= password id= FDO_P /> </p> </form> dwie metody:post,get Technologie Internetu p. 50
Pole tekstowe <input type= text size= 4 maxlength= 8 value= Jan /> <input type= password size= 4 maxlength= 8 /> Technologie Internetu p. 51
Pole wyboru <form> <input type="checkbox" name="czerwony" /> czerwony<br /> <input type="checkbox" name="zielony" /> zielony<br /> <input type="checkbox" name="niebieski" checked="checked" /> niebieski<br /> </form> Technologie Internetu p. 52
znaczniklabel <form> <input type="checkbox" name="czerwony" id= r /> <label for= r >czerwony</label> <br /> <input type="checkbox" name="zielony" id= g /> <label for= g >zielony</label><br /> <input type="checkbox" name="niebieski" checked="checked" id= b /> <label for= r >niebieski</label> </form> Technologie Internetu p. 53
Pole wyboru radio <form> <p>select size:<br /> <input type="radio" name="rozmiar" value="s" id= S /> <label for= S >small</label> <br /> <input type="radio" name="rozmiar" value="m" id= M /> <label for= M >medium</label> <br /> <input type="radio" name="rozmiar" value="l" id= L checked="checked" /> <label for= L >big</label><br /> </p> </form> Technologie Internetu p. 54
Ukryte pole <input type="hidden" name="id" value="de1fb04019f95d9ac3aad2eb87039896" /> Technologie Internetu p. 55
Przycisksubmit <input type="submit" /> <input type="submit" value= Wyslij Dane /> <input type="submit" name= platnosc value= Karta /> <input type="submit" name= platnosc value= Gotowka /> Technologie Internetu p. 56
Przycisksubmit <input type="submit" /> <input type="submit" value= Wyslij Dane /> <input type="submit" name= platnosc value= Karta /> <input type="submit" name= platnosc value= Gotowka /> Technologie Internetu p. 57
Przyciskreset <input type="submit" /> <input type="reset" /> <input type="submit" value= Wyslij Dane /> <input type="reset" value= Zresetuj /> Technologie Internetu p. 58
Przyciskbutton <input type="button" value= Oblicz Pole onclick="funkcjajavascript()" /> Technologie Internetu p. 59
Przyciskimage <input type="image" src="pliks/world.png" align="absmiddle" height="150" width="200" alt="send it in!" /> Technologie Internetu p. 60
Wysyłka plików <form method="post" enctype="multipart/form-data" action="costam.php"> Zaznacz plik: <input type="file" name="upfile" /> <br /> <input type="submit" /> </form> Technologie Internetu p. 61
Pole edycji tekstu <textarea name="comments" cols="40" rows="6"></textarea> Technologie Internetu p. 62
Lista wyboru <select name="pizzasize"> <option value="s">small</option> <option value="m">medium</option> <option value="l">big</option> <option value="xxl">xxl</option> </select> Technologie Internetu p. 63
Atrybutplaceholder <input name="q" placeholder="search Bookmarks and History"> Technologie Internetu p. 64
Atrybutautofocus <input name="q" autofocus> Technologie Internetu p. 65
Poleemail <input type="email"> Technologie Internetu p. 66
Poleurl <input type="url"> Technologie Internetu p. 67
Polenumber <input type="number" min="0" max="10" step="2" value="6"> Technologie Internetu p. 68
Polerange <input type="range" min="0" max="10" step="2" value="6"> Technologie Internetu p. 69
Pole dat <input type="date"> <input type="month"> <input type="week"> <input type="time"> <input type="datetime"> <input type="datetime-local"> Technologie Internetu p. 70
Polesearch <input type="search" /> Technologie Internetu p. 71
Polecolor <input type="date"> <input type="month"> <input type="week"> <input type="time"> <input type="datetime"> <input type="datetime-local"> Technologie Internetu p. 72
Walidacja form i atrybutreqired <input id="q" required> <input id="q" required="required"> Technologie Internetu p. 73
Wsparcie nowych elementów przez przegladarki wufoo Technologie Internetu p. 74