PowerPoint Presentation

Technologie Internetu

wykład 1: Wprowadzenie.

Dokumenty statyczne WWW i

CSS

Piotr Habela

Polsko-Japońska Wyższa Szkoła

Technik Komputerowych

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

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;

Znaczniki – terminologia

lang=”pl”

Treść akapitu

</p

element

znacznik
otwierający

znacznik
zamykający

atrybut

zawartość elementu

<br />

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

(prawie) Minimalny samodzielny dokument

HTML

<HTML>

<HEAD>

<TITLE>

To jest tytul strony

</TITLE>

</HEAD>

Ten tekst zostanie wyświetlony w oknie.

<BR>

… a ten w następnej linii.

<!--

Tak może wyglądać wiersz

komentarza

-->

</BODY>
</HTML>

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.

charset=iso-8859-2" />

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.

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

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

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;

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

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.

class=”

cytat_prasowy

”

>…</p>

opiszemy selektorem

cytat_prasowy

{ … }

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

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); }

Style – sposoby umieszczania w

dokumencie

• Osadzenie w dokumencie (wewnątrz

nagłówka) – j.w.

• Odnośnik do zewnętrznej definicji stylu w

dokumencie:

naszeStyle.css

type="text/css">

• Import zewnętrznej definicji stylu do

dokumentu (umożliwia kombinowanie

deklaracji globalnych z lokalnymi):

<!--
@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)

Na podstawie:

http://www.w3.org/TR/CSS2/

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

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

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

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

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

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

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

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