docHTML - Polsko-Japońska Akademia Technik Komputerowych
download 
Reklamacja Transkrypt
HTML - Polsko-Japońska Akademia Technik Komputerowych
Technologie Internetu HTML Aleksander Denisiuk [email protected] 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 dostepna ˛ jest pod adresem http://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 Jezyki ˛ 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 O O (TR)+> <!ELEMENT COL - O EMPTY> (O — optional) <!ENTITY % coreattrs "id ID class CDATA #IMPLIED #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ć domkniety ˛ 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 note ❙❙ ❦ ❦ ❙❙❙❙ ❦ ❦ ❦ ❦ ❙❙❙❙ ❦ ❦ ❦ ❦ ❙❙❙❙ ❦ ❦ ❦ ❦ ❙) u ❦❦ ❦ body to ❧ ❧❧ ❧ ❧ ❧❧❧ ❧ ❧ ❧ ❧ ❧ ❧ u Technologie internetu title ❧ ol ❧ ❧ ❧❧ ❧ ❧ ❧❧❧ ❧ ❧ ❧❧ ❧ ❧ u❧❧ TINY li li HTML CSS Technologie Internetu – p. 13 XML. Przykład DTD <!ENTITY % coreattrs "id ID class CDATA style %StyleSheet; title %Text; > <!ELEMENT ul (li)+> <!ATTLIST ul %coreattrs; > #IMPLIED #IMPLIED #IMPLIED #IMPLIED" 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 bed ˛ a˛ oparte o HTML, CSS, DOM oraz JavaScript zmniejszyć (eliminować) potrzebe˛ we wtyczkach (Flash) ulepszyć możłiwości debugowania nowe elementy maja˛ zastapić ˛ skrypty sprz˛etowo niezależny otwarty standard Technologie Internetu – p. 18 HTML5 nowe znaczniki (section, article, header, footer, nav, video, audio, etc) nowe pola formularzy tel, 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ów base, head, html, meta, param, script, style i title. class, id, style, title Atrybuty jezykowe. ˛ Nie dotyczy elementów base, br, frame, frameset, hr, iframe, param, oraz script. 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 Element head zawiera meta-informacje˛ o dokumencie. Meta-informacji nie wyświetla sie˛ w przegladarce. ˛ Może ona być użyta przy przetwarzaniu dokumentu. Element body zawiera logiczne elementy dokumentu, które maja˛ sie˛ 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 I/Bp Bi2Kb+QT2 Bi2KivT24]?iiT,ffb+?2KXQ`;fS2`bQM]= IbTM Bi2KT`QT4]MK2]=H2FbM/2` .2MBbBmFIfbTM= IBK; b`+4]/2MBbBmFXDT;] Bi2KT`QT4]BK;2] f= IbTM Bi2KT`QT4]DQ#hBiH2]=/mBMFiIfbTM= I/Bp Bi2KT`QT4]77BHBiBQM] Bi2Kb+QT2 Bi2KivT24]?iiT,ffb+?2KXQ`;fP`;MBxiBQM]= IbTM Bi2KT`QT4]MK2]=lMBr2`bvi2i q`KBbFQ@qxm`bFBIfbTM= I/Bp Bi2KT`QT4]//`2bb] Bi2Kb+QT2 Bi2KivT24]?iiT,ffb+?2KXQ`;fSQbiH//`2bb]= IbTM Bi2KT`QT4]bi`22i//`2bb]= mHX aQM2+xM 89 IfbTM= IbTM Bi2KT`QT4]//`2bbGQ+HBiv]=PHbxivMIfbTM=IbTM Bi2KT`QT4]TQbiH*Q/2]=Ry@dRyIfbTM= If/Bp= If/Bp= If/Bp= http://schema.org Technologie Internetu – p. 28 Logiczne elementy dokumentu HTML. Akapit Treść akapitu powinna być poświecona ˛ jednej spójnej myśli lub pojeciu ˛ Cały akapit należy umieszczać wewnatrz ˛ elementu p <p>Pierwszy akapit</p> Technologie Internetu – p. 29 Rozdziały dokumentu podzielenie dokumentu na rozdziały, podrozdziały, punkty itd. pomaga czytelnikom lepiej orientować sie˛ 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˛ role, ˛ umieszcza sie˛ wewnatrz ˛ div <div id=’menu’> . . . . . . . . </div> <div id=’main’> . . . . . . . . </div> <div id=’right’> . . . . . . . . </div> Technologie Internetu – p. 34 Wyróżnienia logicznie wyróżniony fragment tekstu umieszcza sie˛ wewnatrz ˛ elementu em <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˛ role˛ umieszcza sie˛ wewnatrz ˛ elementu span <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 sie˛ odpowiednio znaczników ul (unordered list) i ol (ordered list) Każdy element listy zostaje umieszczony wewnatrz ˛ znacznika li (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 znacznik q, specjalnie przeznaczony do krótkich cytatów. Przegladarka ˛ powinna(?) otoczyć cytat właściwym dla zadeklarowanego jezyka ˛ 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 odstepy ˛ 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łedów). ˛ nadaje sie˛ 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˛ sie˛ 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 znacznik label <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 Przycisk submit <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 Przycisk submit <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 Przycisk reset <input type="submit" /> <input type="reset" /> <input type="submit" value=’Wyslij Dane’ /> <input type="reset" value=’Zresetuj’ /> Technologie Internetu – p. 58 Przycisk button <input type="button" value=’Oblicz Pole’ onclick="funkcjaJavascript()" /> Technologie Internetu – p. 59 Przycisk image <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 Atrybut placeholder <input name="q" placeholder="Search Bookmarks and History"> Technologie Internetu – p. 64 Atrybut autofocus <input name="q" autofocus> Technologie Internetu – p. 65 Pole email <input type="email"> Technologie Internetu – p. 66 Pole url <input type="url"> Technologie Internetu – p. 67 Pole number <input type="number" min="0" max="10" step="2" value="6"> Technologie Internetu – p. 68 Pole range <input type="range" min="0" max="10" step="2" value="6"> Technologie Internetu – p. 69 Pole dat <input <input <input <input <input <input type="date"> type="month"> type="week"> type="time"> type="datetime"> type="datetime-local"> Technologie Internetu – p. 70 Pole search <input type="search" /> Technologie Internetu – p. 71 Pole color <input <input <input <input <input <input type="date"> type="month"> type="week"> type="time"> type="datetime"> type="datetime-local"> Technologie Internetu – p. 72 Walidacja form i atrybut reqired <input id="q" required> <input id="q" required="required"> Technologie Internetu – p. 73 Wsparcie nowych elementów przez przegladarki ˛ wufoo Technologie Internetu – p. 74
