I.Wojnicki, JiTW Języki i Technologie Webowe XHTML 1 Igor Wojnicki Katedra Informatyki Stosowanej Akademia Górniczo-Hutnicza w Krakowie 23 października 2013 03xhtml.tex,v 1.11 2013/03/16 10:44:58 wojnicki Exp wojnicki 1 Oparte w dużej mierze na materialach W3C Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 1 / 134
136
Embed
XHTML Igor Wojnickihome.agh.edu.pl/~wojnicki/wiki/_media/pl:jitw:d03xhtml.pdfJiTW Język (X)HTML Wprowadzenie do HTML 1 Język (X)HTML Wprowadzenie do HTML XHTML 1.0 Struktura Dokumentu
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
I.Wojnicki, JiTW
Języki i Technologie WeboweXHTML1
Igor Wojnicki
Katedra Informatyki StosowanejAkademia Górniczo-Hutnicza w Krakowie
1Oparte w dużej mierze na materialach W3CIgor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 1 / 134
I.Wojnicki, JiTW
Spis Treści I
1 Język (X)HTMLWprowadzenie do HTMLXHTML 1.0Struktura DokumentuTekstWypunktowanie(Hiper)PołączeniaObrazki, ObiektyTabeleMapyGrupowanie ElementówCSSFormularzeDTDDodatki
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 2 / 134
I.Wojnicki, JiTW
Spis Treści II2 O co tu chodzi
Krótka Historia WWW
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 3 / 134
I.Wojnicki, JiTW
Język (X)HTML Wprowadzenie do HTML
1 Język (X)HTMLWprowadzenie do HTMLXHTML 1.0Struktura DokumentuTekstWypunktowanie(Hiper)PołączeniaObrazki, ObiektyTabeleMapyGrupowanie ElementówCSSFormularzeDTDDodatki
2 O co tu chodziKrótka Historia WWW
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 4 / 134
Bezwzględne:Identyfikator Zasobu:http://home.agh.edu.pl/~wojnicki/didactic/index.htmlIdentyfikator Części Zasobu: http://home.agh.edu.pl/~wojnicki/didactic/database/tematy.html#pnt
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 9 / 134
Względne:koncepcja URI bazowego,../index.htmldla bazowego:http://home.agh.edu.pl/~wojnicki/didactic/index.htmloznacza: http://home.agh.edu.pl/~wojnicki/index.htmladres:portscieżka#odnośnikscieżka?zapytaniescieżka?att1=wart&att2=wart Uwaga: & powinien byćreprezentowany przez encje tj.:scieżka?att1=wart&att2=wart
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 10 / 134
1 Język (X)HTMLWprowadzenie do HTMLXHTML 1.0Struktura DokumentuTekstWypunktowanie(Hiper)PołączeniaObrazki, ObiektyTabeleMapyGrupowanie ElementówCSSFormularzeDTDDodatki
2 O co tu chodziKrótka Historia WWW
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 14 / 134
I.Wojnicki, JiTW
Język (X)HTML XHTML 1.0
Co oferuje XHTML
XHTML 1.0 oparty jest na HTML 4.01:
strukturalizację dokumentu,
wsparcie dla języków narodowych,separację struktury i prezentacji (wreszcie!!!), potrzebny inny język doprezentacji!
rezygnacja z ramek i opisu czcionek.
wykorzystanie stylów dokumentów,
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 15 / 134
I.Wojnicki, JiTW
Język (X)HTML XHTML 1.0
Struktura dokumentu, wstęp
<?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>I AM YOUR DOCUMENT TITLE REPLACE ME</title><meta http-equiv="Content-Type" content="application/xhtml+xml;
charset=UTF-8" /></head><body><p>akapit</p><h1>Gdzie to?</h1><p>Leży sobie u grodu bram.Na rzeczką opodal krzaczka.
</p><h2>Kto to?</h2><p>Potwora straszliwa. Z jęzorem na wierzchu,ślepiami łypiącymi. Dyszy, pluje i plądruje.A odór od niej straszliwy.
</p></body></html>
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 16 / 134
I.Wojnicki, JiTW
Język (X)HTML XHTML 1.0
Składnia XHTML (aplikacja XML)
Element – zbiór określony przez Document Type Definition (DTD),małe litery:
zakres elementu definiowany przez znaczniki, początkowy:<nazwa-elementu>, końcowy: </nazwa-elementu>niektóre elementy nie posiadają znaczników końcowych: <br/>niektóre elementy nie wymagają w ogólne znaczników, choć zawszeistnieją w dokumencie (np. head).
Atrybuty – właściwości elementu, nazwa atrybutu małymi literami,każdy atrybut ma wartość.
Znaki specjalne: np. cudzysłów, <, >.
Komentarze: <!-- komentarz -->
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 17 / 134
I.Wojnicki, JiTW
Język (X)HTML XHTML 1.0
Znaki, Systemy Kodowania
Dokument XHTML składa się ze znaków.
Dopuszczalne różne systemy kodowania, np. iso-8859-1, iso-8859-2,UTF-8. . .
System kodowania jest przekazany do przeglądarki poprzez protokółHTTP, nagłówek: Content-Type, np.Content-Type: application/xhtml+xml; charset=iso-8859-2(zależy od serwera).
System kodowania wskazany w dokumencie XHTML:<meta http-equiv="Content-Type"content="application/xhtml+xml; charset=ISO-8859-2">
Dla XHTML 1.0 obie wersje poprawne:content="application/xhtml+xml; charset=ISO-8859-2" vs.content="text/html; charset=ISO-8859-2"
Przeglądarka może ignorować kodowanie dokumentu/http.
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 18 / 134
I.Wojnicki, JiTW
Język (X)HTML XHTML 1.0
Znaki specjalne
Odwoływanie się do znaku poprzez:kod numeryczny (zgodnie z Unicode,ISO10646), składnia:&#D;, gdzie D kod dziesiętnie,&#xH;, gdzie H kod szesnastkowo,
nazwę symboliczną, np:<, >, &, "kompletna lista:http://www.w3.org/TR/html4/sgml/entities.html
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 19 / 134
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 20 / 134
I.Wojnicki, JiTW
Język (X)HTML Struktura Dokumentu
1 Język (X)HTMLWprowadzenie do HTMLXHTML 1.0Struktura DokumentuTekstWypunktowanie(Hiper)PołączeniaObrazki, ObiektyTabeleMapyGrupowanie ElementówCSSFormularzeDTDDodatki
2 O co tu chodziKrótka Historia WWW
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 21 / 134
I.Wojnicki, JiTW
Język (X)HTML Struktura Dokumentu
Struktura Dokumentu
1 Informacja o wersji XML,2 Informacja o wersji XHTML,3 Otwarcie elementu html
sekcja nagłówka (identyfikowana przez element head),zawartość dokumentu (identyfikowana przez element body).
4 Zamknięcie elementu html
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 22 / 134
I.Wojnicki, JiTW
Język (X)HTML Struktura Dokumentu
Prosty Dokument, Przykład
<?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Mój pierwszy dokument</title>
</head><body><p>Hello world!</p>
</body></html>
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 23 / 134
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 25 / 134
I.Wojnicki, JiTW
Język (X)HTML Struktura Dokumentu
Zawartość dokumentu – body
Dla XHTML 1.0 Strict, atrybuty związane z wyglądem (prezentacją)są niedozwolone (bgcolor, text, link, background) – należyużywać arkuszy stylów.Każdy element w ramach body może mieć atrybuty:id – unikalny identyfikator elementu (wybór stylu, cel dla połączeń,identyfikacja elementu np. w celu oprogramowania (formularze), ekstrainfo dla klienta),class – klasa do jakiej należy element (głównie przyporządkowaniestylu),title – opis elementu (tooltip),lang – informacja o języku, np: pl, en . . . .
Elementy blokowe (block), liniowe (inline).
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 26 / 134
I.Wojnicki, JiTW
Język (X)HTML Struktura Dokumentu
Nagłówki/Tytuły
h1 h2 h3 h4 h5 h6
Numeracja nie jest zdefiniowana ale często oferowana przezprzeglądarki.
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 27 / 134
I.Wojnicki, JiTW
Język (X)HTML Struktura Dokumentu
Adres
address
Informacja o autorze/autorach dokumentu, zwykle na początku, lubna końcu.
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 28 / 134
I.Wojnicki, JiTW
Język (X)HTML Tekst
1 Język (X)HTMLWprowadzenie do HTMLXHTML 1.0Struktura DokumentuTekstWypunktowanie(Hiper)PołączeniaObrazki, ObiektyTabeleMapyGrupowanie ElementówCSSFormularzeDTDDodatki
2 O co tu chodziKrótka Historia WWW
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 29 / 134
I.Wojnicki, JiTW
Język (X)HTML Tekst
Akapity i Linie
Akapit: pNowa linia: br,
znacznik końca niedozwolony: <br/>, – niepodzielna spacja.
Linie dzielone są automatycznie na granicach wyrazów, białe znaki:spacja, CR/LF, TAB.
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 30 / 134
I.Wojnicki, JiTW
Język (X)HTML Tekst
Wymuszenie formatowania
pre
jednakowa szerokość znaków,
każda spacja renderowana,
linie nie są ’zawijane’,
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 31 / 134
I.Wojnicki, JiTW
Język (X)HTML Tekst
Zaznaczanie zmian w dokumencie
ins, del
atrybuty:cite – źródło zmiany (URI),datetime – data i czas zmiany (1994-11-05T08:15:30-05:00),
rzadko stosowane.
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 32 / 134
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 34 / 134
I.Wojnicki, JiTW
Język (X)HTML Tekst
Super/Sub-script
sub, sup,
H<sub>2</sub>OE = mc<sup>2</sup>
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 35 / 134
I.Wojnicki, JiTW
Język (X)HTML Wypunktowanie
1 Język (X)HTMLWprowadzenie do HTMLXHTML 1.0Struktura DokumentuTekstWypunktowanie(Hiper)PołączeniaObrazki, ObiektyTabeleMapyGrupowanie ElementówCSSFormularzeDTDDodatki
2 O co tu chodziKrótka Historia WWW
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 36 / 134
I.Wojnicki, JiTW
Język (X)HTML Wypunktowanie
Listy
ul – bez wyliczenia
ol – z wyliczeniem, rodzaj użytego opisu do wyliczania oraz zakresdefiniowane przez styl,
elementy listy: li
<ol><li> projekt, należy zrealizować:<ul><li> wymagania 1-5, </li><li> dokumentacje. </li></ul></li><li> projekt, opis wkrótce.</li></ol>
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 37 / 134
I.Wojnicki, JiTW
Język (X)HTML Wypunktowanie
Opisy
dl
definicja: dt
opis: dd
<dl><dt>samochód</dt><dd>pojazd, który sam chodzi</dd><dt>mucha</dt><dd>takie coś małe, złośliwe i bzyczące</dd></dl>
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 38 / 134
I.Wojnicki, JiTW
Język (X)HTML (Hiper)Połączenia
1 Język (X)HTMLWprowadzenie do HTMLXHTML 1.0Struktura DokumentuTekstWypunktowanie(Hiper)PołączeniaObrazki, ObiektyTabeleMapyGrupowanie ElementówCSSFormularzeDTDDodatki
2 O co tu chodziKrótka Historia WWW
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 39 / 134
I.Wojnicki, JiTW
Język (X)HTML (Hiper)Połączenia
(Hiper)Połączenia ((hyper)links) I
Istotna zaleta XHTML, killer feature.
Odnośniki do URI.
Odnośniki do miejsca w dokumencie wskazanym przez URI.
a
atrybuty:href – URIid – nazwa, konstrukcja odnośnika do wskazanego miejsca
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 40 / 134
I.Wojnicki, JiTW
Język (X)HTML (Hiper)Połączenia
Połączenia: przykład I
Hiperpołączenia bezwzględne:
Krakowska <a href="http://www.agh.edu.pl">AGH</a>jest jedną z najlepszych uczelni technicznych w Polsce.
Hiperpołączenia względne:
<a href="./01opis.html">opis</a>ćwiczenia
Hiperpołączenia do miejsca względne (w ramach tego samego dokumentu):
<a href="#pb">Projekty Bazodanowe</a>
Identyfikacja miejsca:
<a id="pb">Projekty Bazodanowe</a>
albo:
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 41 / 134
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 42 / 134
I.Wojnicki, JiTW
Język (X)HTML (Hiper)Połączenia
Połączenia, sprawniejsza nawigacja
element a
rel – umożliwia nawigację: następna strona, poprzenia strona, spistreści etc.rel="first", rel="last" – link do pierwszego/ostatniegodokumenturel="next" – link do następnego dokumenturel="previous" – link do poprzedniego dokumenturel="contents" – link do spisu treścirel="innedowolne" – link o nazwie innedowolne, jeżeli wiecej niżjeden element z taką samą wartości rel, tworzona jest grupa, kolejneelementy oznaczone przez zawartość elementu a.
Link Widgets
Site Navigation Bar
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 43 / 134
I.Wojnicki, JiTW
Język (X)HTML (Hiper)Połączenia
Związaki między dokumentami
link, analogiczna funkcjonalność do elementu a
znacznik kończący niedozwolony,
może pojawić się jedynie w ramach head,
interpretacja zależy od przeglądarki: np. dodatkowe menu,
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 44 / 134
I.Wojnicki, JiTW
Język (X)HTML (Hiper)Połączenia
URI dokumentu
base
znacznik kończący niedozwolony,
tylko w head,
wpływa na wszystkie względne URI w ramach dokumentu.
atrubut: href
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 45 / 134
I.Wojnicki, JiTW
Język (X)HTML Obrazki, Obiekty
1 Język (X)HTMLWprowadzenie do HTMLXHTML 1.0Struktura DokumentuTekstWypunktowanie(Hiper)PołączeniaObrazki, ObiektyTabeleMapyGrupowanie ElementówCSSFormularzeDTDDodatki
2 O co tu chodziKrótka Historia WWW
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 46 / 134
I.Wojnicki, JiTW
Język (X)HTML Obrazki, Obiekty
Obiekty, Obrazki, Aplety
img – inkludowanie obrazów/rysunków,
object – funkcjonalność IMG, applet, umożliwia inkludowaniedowolnego typu obiektów.
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 47 / 134
I.Wojnicki, JiTW
Język (X)HTML Obrazki, Obiekty
Obrazki I
img
znaczik końca niedozwolony,atrybuty:src – URI obrazka,alt – tekst do wyświetlenia zamiast obrazka,longdesc – opis,height – wysokość (piksele albo % szerokości) (!fuj!),width – szerokość (j.w.) (!fuj!),usemap,ismap,często używany wewnątrz a.
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 48 / 134
I.Wojnicki, JiTW
Język (X)HTML Obrazki, Obiekty
Obiekty, pobieżnie
object
atrybuty:data – URI obiektu,type – typ obiektu (zgodnie z MIME),
Oto mój ulubiony obrazek:<object data="ulubiony.png"
type="image/png" />
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 49 / 134
I.Wojnicki, JiTW
Język (X)HTML Obrazki, Obiekty
Obiekty zagnieżdżone
Jeżeli klient nie potrafi renderować png, użyty zostanie gif.
<object data="navbar.png" type="image/png"><object data="navbar.gif" type="image/gif">text describing the image...</object></object>
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 50 / 134
I.Wojnicki, JiTW
Język (X)HTML Tabele
1 Język (X)HTMLWprowadzenie do HTMLXHTML 1.0Struktura DokumentuTekstWypunktowanie(Hiper)PołączeniaObrazki, ObiektyTabeleMapyGrupowanie ElementówCSSFormularzeDTDDodatki
2 O co tu chodziKrótka Historia WWW
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 51 / 134
I.Wojnicki, JiTW
Język (X)HTML Tabele
Tabele, możliwości
XHTML umożliwia tworzenie tabel.
Podpisy.
Opisy.
Nagłówek, Stopka, Zawartość.
Grupowanie wierszy, kolumn.
Nie powinny być używane do budowania struktury! – użyj stylów.
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 52 / 134
I.Wojnicki, JiTW
Język (X)HTML Tabele
Tabele
table
atrybuty:summary – opis nie-wizualny tabeli – nie jest wyświetlany,width – szerokość (piksele, % aktualnej szerokość, domyślnie:automatycznie)
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 53 / 134
I.Wojnicki, JiTW
Język (X)HTML Tabele
Elementy w tabeli
caption – podpis pod tabelą,
tfoot, thead, tbody – odpowiednio stopka, nagłówek, zawartośćtabeli – w takiej kolejności (aby stopka była renderowana w trakcierenderowania zawartości), uwaga: wiersze zdefiniowane w ramachobiektów.tr – wiersz,th – nagłówek (wyróżniony),td – zawartośćatrybuty: colspan, rowspan
Kolejne th td definiują kolejne kolumny.
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 54 / 134
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 60 / 134
I.Wojnicki, JiTW
Język (X)HTML Tabele
Tabele, wyświetlanie, wyrównywanie
Style do renderowania tabel dopiero w CSS2.
border – wartość numeryczna określa rodzaj/istnienie ramek,Wyrównywanie (zarówno dla całej tabeli jak i dla elementów):align – w poziomie: left, center, right, justify, charvalign – w pionie: top, middle, bottomchar – znak do jakiego wyrównywać w przypadku wyrównania char
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 61 / 134
I.Wojnicki, JiTW
Język (X)HTML Tabele
Tabele, wyrównywanie, przykład I
<table border="1"><colgroup><col/><col align="char" char="." /></colgroup><thead><tr><th>vegetable</th><th>cost per kilo</th></tr></thead><tbody><tr><td>lettuce</td><td>$1</td></tr><tr><td>silver carrots1</td><td>$10.501</td></tr><tr><td>golden turnips1</td><td>$100.301</td></tr></tbody></table>
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 62 / 134
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 63 / 134
I.Wojnicki, JiTW
Język (X)HTML Tabele
Tabele, marginesy
Atrybuty dla table:cellspacingcellpadding
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 64 / 134
I.Wojnicki, JiTW
Język (X)HTML Mapy
1 Język (X)HTMLWprowadzenie do HTMLXHTML 1.0Struktura DokumentuTekstWypunktowanie(Hiper)PołączeniaObrazki, ObiektyTabeleMapyGrupowanie ElementówCSSFormularzeDTDDodatki
2 O co tu chodziKrótka Historia WWW
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 65 / 134
I.Wojnicki, JiTW
Język (X)HTML Mapy
Mapy
Umożliwiają przyporządkowanie akcji fragmentom obrazka lubobiektu.
Po stronie klienta (preferowane) – klient decyduje jaki link zostałwybrany przy klinięciu na mapowanym obiekcie.
Po stronie serwera – koordynaty kliknięcia przesyłane do serwera.
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 66 / 134
1 Język (X)HTMLWprowadzenie do HTMLXHTML 1.0Struktura DokumentuTekstWypunktowanie(Hiper)PołączeniaObrazki, ObiektyTabeleMapyGrupowanie ElementówCSSFormularzeDTDDodatki
2 O co tu chodziKrótka Historia WWW
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 74 / 134
I.Wojnicki, JiTW
Język (X)HTML Grupowanie Elementów
Grupowanie elementów I
div – jako blok,
span – w linii (inline),
umożliwia “nazwanie”; przyporządkowanie elementów (grupyelementów) do klasy celem zastosowania stylu.
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 75 / 134
I.Wojnicki, JiTW
Język (X)HTML CSS
1 Język (X)HTMLWprowadzenie do HTMLXHTML 1.0Struktura DokumentuTekstWypunktowanie(Hiper)PołączeniaObrazki, ObiektyTabeleMapyGrupowanie ElementówCSSFormularzeDTDDodatki
2 O co tu chodziKrótka Historia WWW
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 76 / 134
Styl w osobnym pliku.Styl w jednym pliku z dokumentem XHTML.
w nagłówku.dla każdego elementu (niezalecane),
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 78 / 134
I.Wojnicki, JiTW
Język (X)HTML CSS
Styl w nagłówku HTML
element styleatrybuty:type – określa język stylu np. text/cssmedia – określa dla jakich typów wizualizacji (klienta) styl ma zostaćużyty; lista, elementy oddzielone przecinkami (screen, tty, tv,projection, handheld, print, braille, speech, all)
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 79 / 134
I.Wojnicki, JiTW
Język (X)HTML CSS
Styl w osobnym pliku I
Całkowita separacja stylu od dokumentu.Więcej niż jeden arkusz stylów dla pojedynczego dokumentu:
preferowany styl,alternatywne style,styl persistent – zostanie zastosowany zawsze, niezależnie od wyborustylu alternatywnego,Jeden lub więcej stylów o wspólnej nazwie – wszystkie zostanązastosowane do dokumentu,Przeglądarki muszą respektować typ wizualizacji iwłączenie/wyłączenie użycia stylów.
Użycie elementu link w head, atrybuty:href – URI stylu,type – język stylu np. text/css,rel, title – typ, nazwa stylu:
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 84 / 134
I.Wojnicki, JiTW
Język (X)HTML CSS
Selektory
Określają do czego zostanie zastosowany styl:
* każdy elementE {}E F - o ile F jest potomkiem przechodnim EE > F - o ile F jest potomkiem bezpośrednim EE:link - hiperłączeE:visited - hiperłącze odwiedzoneE:active - hiperłącze aktywowaneE:hover - hiperłącze wskazane (problem z int.dotykowym)E:focus - hiperłącze zaznaczoneE#jakisid - E z id="jakisid"E:first-line - pierwsza linia EE:first-letter - pierwsza litera EE:before - dodaj przed elementem EE:after - dodaj za elementem E
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 85 / 134
I.Wojnicki, JiTW
Język (X)HTML CSS
Kolory i tło
color
wartośći: nazwa koloru, rgb(r,g,b), #rrggbb (hex),
background – pełna funkcjonalność,
wartości: kolor (j.w.), obrazek: url("http://as.sd.d/ss.png") iinne jak poniżej
background-image, background-color
background-repeat – dla obrazków
wartości: repeat, repeat-x, repeat-y, no-repeat
background-attachment – czy przewijany?
wartości: scroll, fixed
background-position
wartości: posx posy, % % – przesunięcie względem lewego, górnegorogu, left, right, top, bottom, center
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 86 / 134
I.Wojnicki, JiTW
Język (X)HTML CSS
background, przykład
body {background: white url("kreska-na-srodek.png");background-repeat: repeat-y;background-position: center;}
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 87 / 134
I.Wojnicki, JiTW
Język (X)HTML CSS
Czcionki
font-family
wartość: lista nazw oddzielona przecinkami, serif, sans-serif,cursive, fantasy, monospace albo nazwy czcionek,
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 92 / 134
I.Wojnicki, JiTW
Język (X)HTML CSS
Środek!
img.displayed {display: block;margin-left: auto;margin-right: auto }
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 93 / 134
I.Wojnicki, JiTW
Język (X)HTML CSS
Model Formatowania Wizualnego
Każdy element generuje zero lub więcej ramek (box – Box Model),MFM dba o:
rozmiar i typ ramek (box),rozmieszczenie ramek (box),związki przestrzenne między elementami w dokumencie,
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 94 / 134
I.Wojnicki, JiTW
Język (X)HTML CSS
Rodzaj elementu
display
wartości:inline – element liniowy,block – element blokowy.none – ukryty (domyślnie ukryty np. <tr>).
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 95 / 134
I.Wojnicki, JiTW
Język (X)HTML CSS
Pozycja
position
wartości:staticrelative – pozycja obliczana w odniesieniu do pozycji domyślnej:własności: top, right, bottom, left,absolute – j.w. w odniesieniu do bloku zawierającego,fixed – j.w. w odniesieniu do viewport (widocznego obszaru),zawartość nie jest przewijana!
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 99 / 134
I.Wojnicki, JiTW
Język (X)HTML CSS
Szerokość/Wysokość
width, wartość: długość,
min-width
max-width
height, wartość: szerokość,
max-height
min-height
przydatne gdy prezentacja strony jest uzależniona od fizycznychrozmiarów np. obrazka, a obrazek jest nieosiągalny/nieistnieje/wyłączone wyświetlanie obrazków.
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 100 / 134
I.Wojnicki, JiTW
Język (X)HTML CSS
Efekty wizualne
overflow – co się stanie jak element “wystaje” poza blok,wartości:visible,hidden,scroll,auto – zależy od przeglądarki, zwykle scroll
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 101 / 134
Strona WWW jest medium ciągłym przewijanym pionowo.
Jedynie w sytuacjach absolutnie koniecznych dopuszczane jestprzewijanie poziome.
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 106 / 134
I.Wojnicki, JiTW
Język (X)HTML Formularze
1 Język (X)HTMLWprowadzenie do HTMLXHTML 1.0Struktura DokumentuTekstWypunktowanie(Hiper)PołączeniaObrazki, ObiektyTabeleMapyGrupowanie ElementówCSSFormularzeDTDDodatki
2 O co tu chodziKrótka Historia WWW
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 107 / 134
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 113 / 134
I.Wojnicki, JiTW
Język (X)HTML Formularze
Menu/Lista
select
atrybuty:namesize – ilość wierszy wyświetlanych na raz,multiple – jeżeli obecny, pozwala na zaznaczanie wiecej niż jednejpozycji,
option – opisuje elementy wewnątrz SELECTatrybuty:selected – jeżeli obecny, element wybrany,value – wartość wysyłana,label – zamiast value przy renderowaniu, nie używane, zastąpioneprzez zawartość elementu OPTION
optgroup – grupowanie, dodatkowy opis na liście.
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 114 / 134
I.Wojnicki, JiTW
Język (X)HTML Formularze
Menu/Lista, Przykład
<form action="http://somesite.com/p/s"method="post"><p><select name="ComOS"><option selected label="none" value="none">None</option><optgroup label="PortMaster 3"><option label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1</option><option label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7</option>
</optgroup><optgroup label="IRX"><option label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R</option><option label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R</option>
</optgroup></select></p></form>
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 115 / 134
I.Wojnicki, JiTW
Język (X)HTML Formularze
Pole Tekstowe
textarea
atrybuty:namerows – kolumnycols – wiersze
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 116 / 134
I.Wojnicki, JiTW
Język (X)HTML Formularze
Pole Tekstowe, Przykład
<form action="http://gdzies.edu/p/czytaj"method="post"><p><textarea name="tekst" rows="20" cols="60">Pierwsza linia tekstuDruga linia tekstu.</textarea><input type="submit" /><input type="reset" /></p>
</FORM>
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 117 / 134
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 119 / 134
I.Wojnicki, JiTW
Język (X)HTML Formularze
Inne możliwości formularzy
Etykiety,
nawigacja,
skróty klawiszowe,
disabled – pole nieaktywne, dane nie są wysyłane,
readonly – pole tylko do odczytu.
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 120 / 134
I.Wojnicki, JiTW
Język (X)HTML DTD
1 Język (X)HTMLWprowadzenie do HTMLXHTML 1.0Struktura DokumentuTekstWypunktowanie(Hiper)PołączeniaObrazki, ObiektyTabeleMapyGrupowanie ElementówCSSFormularzeDTDDodatki
2 O co tu chodziKrótka Historia WWW
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 121 / 134
1 Język (X)HTMLWprowadzenie do HTMLXHTML 1.0Struktura DokumentuTekstWypunktowanie(Hiper)PołączeniaObrazki, ObiektyTabeleMapyGrupowanie ElementówCSSFormularzeDTDDodatki
2 O co tu chodziKrótka Historia WWW
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 123 / 134
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 125 / 134
I.Wojnicki, JiTW
O co tu chodzi Krótka Historia WWW
1 Język (X)HTMLWprowadzenie do HTMLXHTML 1.0Struktura DokumentuTekstWypunktowanie(Hiper)PołączeniaObrazki, ObiektyTabeleMapyGrupowanie ElementówCSSFormularzeDTDDodatki
2 O co tu chodziKrótka Historia WWW
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 126 / 134
I.Wojnicki, JiTW
O co tu chodzi Krótka Historia WWW
Historia WWW
1965 Ted Nelson, pierwsza wzmianka o hipertekscie, projektXanadu
1980 Tim Berners-Lee, Enquire, koncepcja „WWW”
1984 Paul Mockapetris, DNS
1989 Tim Berners-Lee, propozycja WWW dla CERN
1990 Tim Berners-Lee, 1. implementacja WWW dla CERN(httpd/c) (NeXTstep!)
1992 1. HTTPD poza Europą (Stanford)
1993 Marc Andreessen, NCSA Mosaic (National Center forSupercomputing Applications)
1994 1.10.1994, W3C
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 127 / 134
I.Wojnicki, JiTW
O co tu chodzi Krótka Historia WWW
Wersje i rozwój HTML
1993 HTML 1.0 (nie istnieje!)
1994 HTML 2.0 (podstawowy)http://www.ietf.org/rfc/rfc1866.txt
1995 HTML 3.0http://www.w3.org/MarkUp/html3/CoverPage
1997 HTML 3.2 (ramki, font)http://www.w3.org/TR/REC-html32
1998 HTML 4.0 (nowa filozofia, style)
1999 HTML 4.01 (wersja finalna (ostatnia!))
Igor Wojnicki (AGH, KIS) Języki i Technologie Webowe 23 października 2013 128 / 134