1
Technologie Internetu
wykład 1: Wprowadzenie.
Dokumenty statyczne WWW i
CSS
Piotr Habela
Polsko-Japońska Wyższa Szkoła
Technik Komputerowych
2
Plan wykładu
• Kilka dat
• WWW i rodzaje jego dokumentów
• Krótko o HTML
• Kaskadowe Arkusze Stylów
(CSS)
Wybrane daty
3
4
Wybrane ważne daty (1)
• 1945 – Vannevar Bush – artykuł „As We May
Think” (Atlantic Monthly) z ideami leżącymi u
podstaw hipertekstu;
• 1954 – Powstanie ARPA;
• 1965 – Paul Baran z RAND Corporation: „On
Distributed Communication Network” –
koncepcja zdecentralizowanej, odpornej na
awarie licznych węzłów sieci komputerowej.
• 1971 – Ray Tomilson: pierwszy program poczty
elektronicznej;
• 1972 – Telnet;
• 1 września 1969 – Pierwsze węzły sieci ARPA-
NET;
• 1973 – Pierwsze połączenia międzynarodowe
(do Wielkiej Brytanii i Norwegii).
• 1974 – Vinton Cerf i Bob Kahn: „A protocol for
Packet Intercommunication”: TCP, termin
“Internet”;
5
Wybrane ważne daty (2)
• 1975 – zmiana statusu ARPA-NET z
eksperymentalnej na użytkową;
• 1982 – ARPA-NET wprowadza protokół TCP/IP
• 1984 – powstaje DNS;
• 1990 – ARPA-NET kończy działalność;
• 1991 – Polska dołączona do Internetu;
• 1992 – Tim Berners Lee: podstawy WWW
• 1993 – Mosaic – pierwsza przeglądarka
• 1994 – Pierwszy SPAM: f-ma prawnicza Canter
i Siegel wysyła list do 6 tys. grup dyskusyjnych
(loteria pozwoleń na pracę w US);
• 1995 – prywatyzacja Internetu, Netscape, Java;
• 1995 – WWW wyprzedza FTP;
6
System WWW.
Rodzaje dokumentów WWW
HTML – w skrócie
7
8
Znaczniki – terminologia
<
p
lang=”pl”
>
Treść akapitu
</p
>
element
znacznik
otwierający
znacznik
zamykający
atrybut
zawartość elementu
<br />
9
Język HTML – rozwój
• Fundament języka HTML = SGML (Standard
Generalized Markup Language)
– 1969 r. w IBM dla formatowania dużych zbiorów
tekstowych
• 1989 (CERN): Tim Berners-Lee: koncepcja WWW
• Pierwotnie (v.1.0, 1993 r.) – tylko opis zawartości,
a nie formy prezentacji
• Kolejne uzupełnienia:
– Tabele;
– Odnośniki do różnego typu zasobów;
– Rozszerzone formatowanie tekstu;
• Ostatnia wersja – 4.01 (grudzień 1999)
• Dalszy rozwój: XHTML:
– Połączenie z XML, uwzględnienie nowych platform WWW;
– Język podzielony na części zwane modułami (np. dla tabel,
obrazów czy formularzy)
• HTML 5 – praca w toku
10
(prawie) Minimalny samodzielny dokument
HTML
<HTML>
<HEAD>
<TITLE>
To jest tytul strony
</TITLE>
</HEAD>
<BODY BGCOLOR=”blue”>
Ten tekst zostanie wyświetlony w oknie.
<BR>
… a ten w następnej linii.
<!--
Tak może wyglądać wiersz
komentarza
-->
</BODY>
</HTML>
11
Przykłady atrybutu oraz informacji w
nagłówku
• Atrybut precyzuje sposób traktowania treści
objętej danym tagiem. Np.
<BODY
BGCOLOR=”green”
> … </BODY>
Ustala barwę tła dla okna dokumentu.
• Nagłówek (head) może zawierać istotne
informacje dotyczące całości dokumentu, np.
<meta http-equiv="Content-type" content="text/html;
charset=iso-8859-2" />
<meta http-equiv="Creation-date" content="2003-03-
04T21:35:13Z" />
Określają sposób kodowania znaków oraz datę
utworzenia.
• Mogą tu również wystąpić specyfikacje słów
kluczowych opisujących treść dokumentu,
czy też kod procedur wywoływanych przez
elementy umieszczone w ciele dokumentu.
12
Zakres funkcjonalności tradycyjnego
HTML
• Oznaczanie struktury tekstu:
– Nagłówki (6 poziomów), paragrafy;
– Listy wypunktowane i numerowane;
– Wyróżnianie cytatów, przykładów kodu itp.
• Formatowanie tekstu:
– Wielkość i barwa tekstu;
– Podkreślanie, pogrubianie, pochylanie;
• Tabele, wielokolumnowy układ tekstu
• Hiperłącza (inne dokumenty, e-mail)
• Formularze
• Osadzanie grafiki i innych obiektów
13
HTML a porządkowanie problemu
prezentacji
• Stopniowo HTML rozrósł się o liczne
polecenia określające prezentację:
– Objętościowo większe, trudno zarządzalne i
nieprzenośnie dokumenty.
• Wprowadzono koncepcję zewnętrznych
definicji stylów:
– Identyfikują element po jego rodzaju, po „klasie”,
po identyfikatorze lub po kontekście.
– Specyfikują dla tak wytyczonych przedmiotów
liczne szczegóły ich wyświetlania (i nie tylko).
• Wsparcie od strony HTML = „punkty
zaczepienia”:
– Elementy DIV, SPAN, COL, COLGROUP
– Atrybuty CLASS, ID
– Wprowadzanie styli = element STYLE oraz ew.
atrybut STYLE
14
Kaskadowe arkusze stylów – CSS
15
Kaskadowe Arkusze Stylów (CSS)
• Style wprowadzono w HTML v. 4. Zwykle
przechowywane w arkuszach stylów:
Cascading Style Sheets.
• Motywacja:
– Umożliwienie separacji stylów od struktury i treści
dokumentu.
– Bardziej precyzyjna kontrola nad układami, fontami,
kolorami, tłem, efektami typograficznymi;
– Możliwość modyfikowania większego zbioru stron
poprzez edytowanie pojedynczego dokumentu; b.
ważne dla pielęgnacji!
– Zapewnienie zgodności pomiędzy przeglądarkami;
zapewnienie sprawnego ładowania stron.
• Źródło specyfikacji = WWW Consortium:
– CSS1 – rok 1996; CSS2 – rok 1998+: rozszerzenia
dla wydruków, i innych mediów (urządzenia
dźwiękowe); ładowalne fonty; pozycjonowane
elementy, formatowanie tabel; CSS3 – w
przygotowaniu;
16
CSS – podstawowe możliwości
• Definiowanie tła (własność background):
grafika w tle, barwa tła;
• Tekst (własność tekst): barwa, odstępy,
zmiana wielkości liter, ozdobniki, wcięcia,
wyrównianie;
• Font (własność font): rodzaj fontu, rozmiar
(procenty lub punkty), modyfikator
(pochylenie itp.), wariant (np. wersaliki),
rozciągnięcie tekstu;
• Rodzaje obramowań (właściwość border);
• Rozmiary marginesów elementu (właściwość
margin);
• Marginesy komórek (właściwość padding);
• Wypunktowanie i numeracja (właściwość list-
style);
17
CSS - składnia
• Uwaga! Definicje bardzo czułe na błędy
składniowe!
• Styl opisywanego elementu definiowany
następująco:
selektor {właściwość: wartość}
np.
body {
color: green
}
– Dwuwyrazowe wartości wymagają ujęcia w
cudzysłów;
– Pakiety kilku właściwości są rozdzielane
średnikami.
• Selektory – najczęściej oparte na nazwie
elementów:
– Grupowanie selektorów (np.
h1, h2, p
) = lista
rozdzielona przecinkami. Oznacza zastosowanie do
wymienionych elementów tego samego stylu.
– Definicje dla złożeń selektorów = lista rozdzielona
spacjami (np.
ul ol
to listy numerowane wewnątrz
wypunktowanych).
• Selektory oparte o klasy. Np.
<p
class=”
cytat_prasowy
”
>…</p>
opiszemy selektorem
p.
cytat_prasowy
{ … }
18
CSS - składnia
• Selektory – c.d.:
– Klasa stosowana do więcej niż jednego rodzaju
elementów:.nazwa_klasy
– Wskazanie pojedynczego elementu w dokumencie –
nazwa identyfikatora po symbolu „#”:
np. dla tagu
<h1 id=”bibliografia”>…</h1>
Możemy określić indywidualny styl selektorem
p#bibliografia
– Bezpośrednie zagnieżdżenie – np.
div > p
– Bezpośrednie sąsiedztwo elementów – np.
h1 + p
• Selektory pseudo-klas:
– :hover
– kursor myszy nad elementem
– :first-child
– pierwsze dziecko elementu
– :focus
– element ma focus (jest aktywny)
– :link
– nieodwiedzony link
– :visited
– odwiedzony link
– :active
– element aktywny
Pseudo-klasy a pseudo-elementy
• Pseudo-klasa -> elementy, których
klasyfikacja wynika z kontekstu
• Pseudo-element -> podobne, ale
dotyczy fragmentu treści niebędącego
osobnym elementem:
– :first-letter
– :first-line
– :before, :after
– np.
h1:before { content:url(icon1.gif); }
19
20
Style – sposoby umieszczania w
dokumencie
• Osadzenie w dokumencie (wewnątrz
nagłówka) – j.w.
• Odnośnik do zewnętrznej definicji stylu w
dokumencie:
<link rel="stylesheet" href="
naszeStyle.css
"
type="text/css">
• Import zewnętrznej definicji stylu do
dokumentu (umożliwia kombinowanie
deklaracji globalnych z lokalnymi):
<style type="text/css">
<!--
@import url(
naszArkusz.css
);
h1 { color: orange; font-family: impact }
-->
</style>
• Wpisywanie definicji stylu do poszczególnych
tagów:
<h1 style="
color: orange; font-family: impact
">Treść
nagłówka</h1>
Wyliczanie formatowań
• Każdy węzeł drzewa dokumentu –
konieczność ustalenia kompletu
właściwości
• Cztero-krokowa formuła obliczenia:
1. Wartości wyspecyfikowane – specified
2. Wartości wyliczone – computed
3. Wartość użyta – used (skonwertowanie na
wartość bezwzględną, jeśli potrzeba)
4. Wartość faktyczna – actual (uwzględnia
ograniczenia lokalnego środowiska)
21
cascade.html Ch.6
if ( kaskada określa wartość )
=> użyj jej
else if ( właściwość podlega
dziedziczeniu i istnieje rodzic )
=> użyj jego wartości wyliczonej
else => użyj wartości początkowej
tj. domyślnej zdefiniowanej dla
danej własności
• Określenie np. bezwzględnych
URI,
pixelowych rozmiarów jednostek
em i ex
• Wyliczanie właściwości
zdefiniowanych
jako dziedziczone "inherit"
• Wyliczenie odpowiedniej wartości
bezwzględnej z uwzględnieniem
zależności
• Może wymagać sformatowania
dokumentu
(np. wartości względne wobec bloku
nadrzędnego)
• Skorygowanie wartości w oparciu o
możliwości
platformy i przeglądarki
• np. zaokrąglenie rozmiarów, mniejsza
paleta barw
Wyliczanie formatowań – przykład
body { font-size: 10pt }
h1 { font-size: 130% }
1. Wyspecyfikowana: 130%
2. Dziedziczenie + wyliczenie: 13 pt
3. -
4. Faktyczna (brak wsparcia
nieparzystych przez UA): 12 pt
22
Import-y zależne od docelowego medium
@import url("fineprint.css") print;
@import url("bluish.css") projection,
tv;
23
24
CSS – właściwość „kaskadowości” w
uproszczeniu
•
Definicje stylów posiadają określone (dość
intuicyjne) priorytety. Przypominają nieco
przesłanianie definicji zmiennych w
lokalnych podprogramach:
1. Najwyższy priorytet – tyle specyfikowane
specjalnie dla danego tagu
2. Style osadzone w nagłówku i połączone
referencją – zależnie od kolejności
umieszczenia (przesłanianie)
3. Style zaimportowane – niższy priorytet od
osadzonych w nagłówku
4. Najniższy priorytet – style domyślne
przeglądarki
Kaskada
Trzy pochodzenia definicji stylów:
• Autor dokumentu
• Użytkownik
• Przeglądarka
25
Porządek określania kaskady
1. Skompletuj deklaracje zgodne co do selektorów i
typu medium
2. Sortowanie wg pochodzenia i flagi ważności
( !important )
1. Przeglądarka
2. Użytkownik – normalne
3. Autor – normalne
4. Autor – ważne
5. Użytkownik – ważne
3. Sortuj wewnątrz ww. grup według „specyficzności”
4. Sortuj równoważne według kolejności
zdefiniowania
26
Określanie „specyficzności” deklaracji
• Sortowanie konkatenacji 4 wartości A-B-C-D
(od najważniejszej) :
A. 1 gdy definicja z wartości atrybutu style;
inaczej => 0
B. Liczba atrybutów ID użytych (i związanych!)
w selektorze
C. Liczba innych związanych atrybutów i
pseudo-klas
D. Liczba nazw elementów i pseudo-elementów
związanych w selektorze
27
Pokazywanie elementów – właściwość
display
• Pozwala ukryć ( hidden ) albo
pominąć prezentację ( none )
– Różnica = zajmowane miejsce
• Ponadto – możliwość zmiany
charakteru prezentacyjnego
elementów
– inline vs. block
– Domyślnie m.in.: span, a => liniowe ;
div, p, h1, … => blokowe
28
Pozycjonowanie
Właściwość position
• fixed => względem okna przeglądarki
• relative => względem pozycji domyślnej
– Pozostawia zarezerwowaną pozycję w normalnym
układzie
– Stosowany przy kontenerach dla elementów absolute
• absolute => względem rodzica, który jest
pozycjonowany nie-statycznie
• static => domyślna
• inherited => odziedziczona
Właściwość z-index
– kolejność w stosie pokrywających się elementów
30
Elementy pływające: float
• Pozwala elementowi na otaczanie
go przez inne
• „Przyciągnięcie” do prawej lub
lewej strony
• Właściwość clear
– left | right | both | none | inherit
– strona otoczenia elementu, gdzie nie
dopuszcza on elementów pływających
31
32
Dynamic HTML
• Nie jest to wyodrębniona technologia jak np.
JavaScript czy ActiveX.
• Definicja: zawartość HTML mogąca
zmieniać swój wygląd już po załadowaniu
do przeglądarki.
• Umożliwia manipulację elementami
dokumentu WWW wcześniej traktowanymi
jako niezmienne. Na ogół pisane w
JavaScript lub VBScript. Wyróżnik – dostęp
skryptu do właściwości DHTML dostępnych
w przeglądarkach 4 generacji, choć wówczas
rozbieżności były frustrująco duże.
• Podział odpowiedzialności:
– HTML -> zawartość, kontekst, struktura;
– CSS -> sposób prezentacji treści;
– Za pośrednictwem DOM (zob. dalej) -> jednolity
model obiektowy i API dla interakcji z HTML i
CSS.
Document Outline
- Slide 1
- Plan wykładu
- Slide 3
- Wybrane ważne daty (1)
- Wybrane ważne daty (2)
- Slide 6
- Slide 7
- Znaczniki – terminologia
- Język HTML – rozwój
- (prawie) Minimalny samodzielny dokument HTML
- Przykłady atrybutu oraz informacji w nagłówku
- Zakres funkcjonalności tradycyjnego HTML
- HTML a porządkowanie problemu prezentacji
- Slide 14
- Kaskadowe Arkusze Stylów (CSS)
- CSS – podstawowe możliwości
- CSS - składnia
- CSS - składnia
- Pseudo-klasy a pseudo-elementy
- Style – sposoby umieszczania w dokumencie
- Wyliczanie formatowań
- Wyliczanie formatowań – przykład
- Import-y zależne od docelowego medium
- CSS – właściwość „kaskadowości” w uproszczeniu
- Kaskada
- Porządek określania kaskady
- Określanie „specyficzności” deklaracji
- Pokazywanie elementów – właściwość display
- Box Model
- Pozycjonowanie
- Elementy pływające: float
- Dynamic HTML
Wyszukiwarka
Podobne podstrony:
8 GDT Intro WWW
metalurgia kolokwium 01 2011 www przeklej pl
01.Intro, 834 kolumny płyną
01 Intro
01 intro 10
01 Intro Coding Programming
01 Intro to Passive Safety
chapter 01 intro
08 Data exodusu w ujęciu Świadków Jehowy, Drogi prowadzace do Boga, Zestaw o SJ (www dodane pl), Zes
28 Wielka kwestia sporna a Biblia, Drogi prowadzace do Boga, Zestaw o SJ (www dodane pl), Zestaw o Ś
14 Cechy gnostyckie w nauczaniu Świadków Jehowy, Drogi prowadzace do Boga, Zestaw o SJ (www dodane p
PL Linux+ 2005 01 (osiol NET) www!OSIOLEK!com
01 09 obiekty noclegowe 2012 www
24 Ja jestem czy Ja już byłem, Drogi prowadzace do Boga, Zestaw o SJ (www dodane pl), Zestaw o ŚJ, 0
więcej podobnych podstron