HTML

(1)

Technologie Internetu

HTML

Aleksander Denisiuk

denisjuk@pja.edu.pl

Polsko-Japo ´nska Akademia Technik Komputerowych Wydział Informatyki w Gda ´nsku

ul. Brzegi 55 80-045 Gda ´nsk

(2)

HTML

Najnowsza wersja tego dokumentu dost ˛epna jest pod adresem http://users.pja.edu.pl/~denisjuk/

(3)

Hipertekst

Vannevar Bush, As We May Think, 1945 — Memex Ted Nelson

1960 — Xanadu

1965 — Hipertekst, hipermedia

(4)

J ˛ezyki 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´c precyzyjne: powtarzalny wynik

Standard Generalized Markup Language ISO 8879 (1986 rok)

(5)

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>

(6)

Poprawno ´s ´c SGML

poprawny strukturalnie (tag-valid, dobrze uło˙zony) zgodny z DTD (poprawny)

(7)

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 #IMPLIED

class CDATA #IMPLIED">

(8)

HTML

1989/90, CERN (Tim Berners-Lee, Robert Cailliau) Pocz ˛atkowe wersje były inspirowane SGML

1992, HTML 1.0 pierwsza „nieoficjalna” wersja

1995, HTML 2.0 pierwsze oficjalne SGML-owe DTD Wojna przegl ˛adarek

Stycze ´n 1997 HTML 3.2 Grudzie ´n 1997 HTML 4.0 1999 HTML 4.01

(9)

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">

(10)

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>

(11)

XML

eXtensible Markup Language 1996–1998

uproszczona wersja SGML

ka˙zdy element powinien by´c domkni ˛ety case-sensitive

elementy powinny by´c poprawnie zagnie˙zd˙zone powinien by´c jeden element korzeniowy

wszystkie atrybuty powinny by´c w cudzysłowie (apostrofie)

(12)

XML. Przykład

<?xml version="1.0"?> <html> <head> <title> TINY </title> </head> <body> Technologie internetu. <ol> <li>HTML</li> <li>CSS</li>

(13)

Drzewo XML

note uu ❦❦❦❦ ❦❦❦❦ ❦❦❦❦ ❦❦❦❦ ❦ )) ❙ ❙ ❙ ❙ ❙ ❙ ❙ ❙ ❙ ❙ ❙ ❙ ❙ ❙ ❙ to body uu ❧❧❧❧ ❧❧❧❧ ❧❧❧❧ ❧❧ title Technologie internetu ol uu ❧❧❧❧ ❧❧❧❧ ❧❧❧❧ ❧❧❧❧ ❧❧ TINY li li HTML CSS

(14)

XML. Przykład DTD

<!ENTITY % coreattrs

"id ID #IMPLIED

class CDATA #IMPLIED

style %StyleSheet; #IMPLIED

title %Text; #IMPLIED"

>

<!ELEMENT ul (li)+> <!ATTLIST ul

%coreattrs; >

(15)

Aplikacje XML

Docbook RSS OpenDocument SVG XHTML

(16)

XHTML

2000 XHTML 1.0 transitional frameset strict 2001 XHTML 1.1 28 pa´zdziernika 2014 HTML 5

(17)

HTML 5

Wide Web Consortium (W3C) — XHTML 2.0

Web Hypertext Application Technology Working Group (WHATWG) — Web Applications and Web Forms

(18)

Zadania HTML 5

nowe mo˙zliwo´sci b ˛ed ˛a oparte o HTML, CSS, DOM oraz JavaScript

zmniejszy´c (eliminowa´c) potrzeb ˛e we wtyczkach (Flash)

ulepszy´c mo˙złiwo´sci debugowania

nowe elementy maj ˛a zast ˛api´c skrypty sprz˛etowo niezale˙zny

(19)

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˙zliwo´s´c osadzenia MathML i SVG

nie zawiera ˙zadnych elementów prezentacyjnych (np.

font)

canvas — dynamiczne, skryptowe renderowanie

(20)

HTML5

wsparcie przez wszystkie przegl ˛adarki ju˙z przed 2014 rokiem

brak ko ´ncowej specyfikacji 2016 rok: 5.1

(21)

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>

(22)

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>

(23)

Znaczniki HTML

Ka˙zdy znacznik HTML (ang. tag) odpowiada logicznemu elementowi dokumentu

Znacznik (element) pusty <hr />

Znacznik (element) prosty

<h1>Technologie Internetu</h1> Pusty element maj ˛acy atrybuty

<img width="100" height="75"

src="images/domek.png" />

Element zło˙zony, który ma tre´s´c oraz atrybuty <a href="http://www.pjwstk.edu.pl">

(24)

Atrybuty standardowe

Atrybuty uniwersalne. Nie dotyczy elementów base,

head, html, meta, param, script, style i title. class, id, style, title

Atrybuty j ˛ezykowe. Nie dotyczy elementów base, br,

frame, frameset, hr, iframe, param, oraz script. dir (ltr, rtl), lang (polski – pl), xml:lang

Atrybuty klawiatury.

(25)

Ogólna struktura pliku HTML5

<!DOCTYPE html> <html> <head> . . . . </head> <body> . . . . </body> </html>

(26)

Ogólna struktura pliku HTML

domy´slna przestrze ´n nazw

http://www.w3.org/1999/xhtml

Element head zawiera meta-informacj ˛e o dokumencie. Meta-informacji nie wy´swietla si ˛e w przegl ˛adarce.

Mo˙ze ona by´c u˙zyta przy przetwarzaniu dokumentu. Element body zawiera logiczne elementy dokumentu, które maj ˛a si ˛e pojawi´c w przegl ˛adarce.

(27)

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"

(28)

Logiczne elementy dokumentu

HTML. Akapit

Tre´s´c akapitu powinna by´c po´swi ˛econa jednej spójnej my´sli lub poj ˛eciu

Cały akapit nale˙zy umieszcza´c wewn ˛atrz elementu p

(29)

Rozdziały dokumentu

Podział dokumentu na rozdziały, podrozdziały, punkty itd. pomaga czytelnikom lepiej orientowa´c si ˛e w tek´scie 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 zwi ˛azana z dokumentem (na marginesie)

(30)

Rozdziały dokumentu. Nagłówki

h1 — nagłówek cało´sci dokumentu

h2–h6 — nagłówki rozdziałów i podrozdziałów dokumentu

(31)

Przykład sematycznego dokumentu

<header> <h1>Aleksander Denisiuk. PJWSTK</h1> </header> <article> <h2>Technologie Internetowe</h2>

(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>

(33)

Rozdziały dokumentu,

div

bloki dokumentu, które graj ˛a pewn ˛a rol ˛e, umieszcza si ˛e wewn ˛atrz div

<div id=_'menu_'> . . . . </div> <div id=_'main_'> . . . . </div> <div id=_'right_'> . . . . </div>

(34)

Wyró˙znienia

logicznie wyró˙zniony fragment tekstu umieszcza si ˛e wewn ˛atrz elementu em

<p>Element <em>pusty</em> nie ma ani tresci ani atrybutow</p>

mark — łagodniejsze wyró˙znienie (na przykład, wyniki wyszukiwania)

<p>I also have some <mark>kitten</mark>s who are visiting me

these days. Maybe I

(35)

Wyró˙znienia.

span

fragmenty tekstu, które graj ˛a pewn ˛a rol ˛e umieszcza si ˛e wewn ˛atrz elementu span

<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>

(36)

Wyró˙znienia.

address

informacjia kontaktowa do autora b ˛ad´z wła´sciciela strony (dokumentu, rozdziału, etc)

<footer>

<p>Strona utworzona:

<time datetime="2017-03-24">24 marca 2017 roku</time></p>

<address class="author">

<a href="http://users.pja.edu.pl/~denisjuk"> Aleksander Denisiuk</a>

</address> </footer>

(37)

Wyszczególnienia i wyliczenia

Do wyszczególnie ´n i wylicze ´n u˙zywa si ˛e odpowiednio znaczników ul (unordered list) i ol (ordered list)

Ka˙zdy element listy zostaje umieszczony wewn ˛atrz znacznika li (list item):

<ul>

<li>Wprowadzenie</li> <li>Znaczniki HTML</li>

<li>Struktura pliku HTML</li> </ul>

(38)

Wyszczególnienia i wyliczenia.

Zagnie˙zd˙zenie

<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>

(39)

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>

(40)

Obrazki

<img width="100" height="75" src="images/domek.png" alt="Gmach uczelni"

(41)

Odno ´sniki

inny dokument

<a href="http://gdansk.pjwstk.edu.pl"> PJWSTK</a>

ten sam dokument

<h3 id="rysunki">Obrazki</h3> . . . .

(42)

Komentarze

(43)

Znaki Specjalne. Meta Symbole

< < > > & &

(44)

Znaki Specjalne. Cudzysłowy

“Press the ‘x’ key.”

“Press the ‘x’ key.” „tylko po «zebrach»”

&bdquo;tylko po «zebrach»” HTML zawiera znacznik q, specjalnie przeznaczony do

krótkich cytatów. Przegl ˛adarka powinna(?) otoczy´c cytat wła´sciwym dla zadeklarowanego j ˛ezyka

cudzysłowem.

(45)

Pauzy i my ´slniki

Ł ˛acznik niebiesko-czarny My´slnik (—) — Półpauza (–) str. 11–13

11 czerwca – 13 lipca Znak minusa (−2)

(46)

Wielokropek

Nie tak ..., tylko raczej tak: Nowy Jork, Tokio, Budapeszt, . . .

Nie tak ..., tylko raczej tak:

(47)

Niełamliwe odst ˛epy

Polskie zasady nie pozwalaj ˛a przy łamaniu linii

pozostawia´c na ko ´ncu 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.

(48)

Poprawnie uło˙zony dokument HTML

zostanie poprawnie wy´swietlony w ka˙zdej

przegl ˛adarce internetowej (o ile ona nie ma bł ˛edów). nadaje si ˛e do automatycznego opracowania. Na

przykład, przy indeksacji strony

zostanie poprawnie wy´swietlony w alternatywnych ni˙z przegl ˛adarka ´srodkach, zarówno istniej ˛acych jak i tych, co maj ˛a si ˛e pojawi´c w przyszło´sci.

zostanie poprawnie skonwertowany w inny format. Na przykład, w PDF lub Open Document.

(49)

Validator W3C

(50)

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>

(51)

Pole tekstowe

<input type=_'text_' size=_'4_'

maxlength=_'8_' value=_'Jan_' /> <input type=_'password_' size=_'4_'

(52)

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>

(53)

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>

(54)

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"

(55)

Ukryte pole

<input type="hidden" name="id"

(56)

Przycisk

submit

<input type="submit" />

<input type="submit" value=_'Wyslij Dane_' /> <input type="submit"

name=_'platnosc_' value=_'Karta_' /> <input type="submit"

(57)

Przycisk

reset

<input type="submit" /> <input type="reset" />

<input type="submit" value=_'Wyslij Dane_' /> <input type="reset" value=_'Zresetuj_' />

(58)

Przycisk

button

<input type="button" value=_'Oblicz Pole_'

(59)

Przycisk

image

<input type="image"

src="pliks/world.png" align="absmiddle"

height="150" width="200" alt="send it in!" />

(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>

(61)

Pole edycji tekstu

<textarea name="comments"

(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>

(63)

Atrybut

placeholder

<input name="q"

(64)

Atrybut

autofocus

(65)

Pole

email

(66)

Pole

url

(67)

Pole

number

<input type="number" min="0"

max="10" step="2" value="6">

(68)

Pole

range

<input type="range" min="0"

max="10" step="2" value="6">

(69)

Pole dat

<input type="date"> <input type="month"> <input type="week"> <input type="time">