HTML - MCE 24

Transkrypt

HTML - MCE 24

Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego
Materiały szkoleniowe opracowane przez:
World Wide Web
Centrum Szkoleń Informatycznych
VEDIUS
Spis treści
Wybierz blok tematyczny
Wprowadzenie
Style CSS
HTML
Grafika na www
XHTML
Formularze
Projektowanie strony
Koniec
2
Od czego by tu zacząć...



Kluczowe pojęcia
Informacja w sieci
Podstawy języka HTML
▪
▪
▪
▪
▪
▪
▪


Edytor HTML
Struktura strony WWW
Podstawowe polecenia języka HTML
Hiperłącza
Tworzenie tabel
Formularze
Ramki
Tworzenie stylu CSS
Tryb WYSIWYG
4
Co dalej ...

Zaprojektowanie i zbudowanie prostej strony


Przygotowanie grafiki na stronę Publikowanie strony WWW w internecie
Podstawy języka PHP
Podstawy JavaScript

Egzamin Webstarter


5
Jakie języki poznamy...






HTML
XHTML
CSS
JavaScript
JAVA
PHP
6

Internet – (łac. inter między, ang. net sieć, dosłownie międzysieć)
7
Trochę historii
1. Początki Internetu wiążą się z powstaniem internetu ARPANET i sięgają końca lat 60. XX
wieku, gdy amerykańska firma RAND Corporation prowadziła badania studyjne nad możliwościami dowodzenia i łączności w warunkach wojny nuklearnej.
8
Troche historii

1989:
 Fizyk Tim Berners-Lee przedstawił projekt prezentacji informacji przy użyciu hypertext.

1990:
 pierwsza strona pod adresem:
http://info.cern.ch/hypertext/WWW/TheProject.html

1991:
 naukowcy z CERN-u opracowali standard WWW;

20 grudnia 1991 - Polska zostaje przyłączona do Internetu
9
Troche historii

1993:
 luty - powstaje pierwsza przeglądarka WWW umożliwiająca oglądanie graficznych stron - Mosaic (dostępna dla PC i Apple Macintosh).

1994:
 kwiecień - powstaje portal Yahoo!.
 Premiera przeglądarki Netscape Navigator.

1995:
 Powstaje pierwszy polski portal: Wirtualna Polska,
 23 sierpnia 1995 prezentacja nowej przeglądarki internetowej na bazie kodu Mosaica - Internet Explorer.
10
Czym właściwie jest www?

World Wide Web - globalny, interaktywny,
dynamiczny, wieloplatformowy, rozproszony,
graficzny, hipertekstowy system
informacyjny, działający na bazie Internetu.
11
Internet a www

Internet i World Wide Web (WWW) nie są synonimami.
 Internet to sieć komputerowa – wiele połączonych ze sobą komputerów.  WWW jest jednym z dóbr dostępnych przy pomocy Internetu. Innymi bardzo popularnymi są poczta
elektroniczna i wymiana plików w sieciach P2P. WWW jest
zbiorem dokumentów i innych zasobów połączonych hiperłączami i URL-ami.

http://pl.wikipedia.org/wiki/Internet
12
HIPERTEXT

Hipertekst - umożliwia czytanie i poruszanie się po tekście lub innym rodzaju informacji wizualnej w sposób nieliniowy, zależny od tego, czego chcesz się dowiedzieć w dalszej kolejności.
13
Hipertekstowy System Informacyjny
Pomoc
1. Temat 1
2. Temat 2
3. Temat 3
Pomoc do tematu 2
1. Podtemat 1
2. Podtemat 2
3. Podtemat 3
Pomoc do podtematu 3
1. Szczegóły tematu 3
2. Wiecej szczegółów
3. Zobacz też
14
Hipertekstowy System Informacyjny
15
www



WWW jest systemem graficznym i łatwym w nawigacji
WWW jest siecią wieloplatformową
WWW jest siecią rozproszoną
 Każda witryna, każda strona, każda najmniejsza nawet porcja informacji ma swój unikalny adres. Adres ten zwany jest w języku angielskim Uniform Resource Locator (co można przetłumaczyć na uniwersalny identyfikator zasobów), w skrócie URL.
 Kiedy ktoś mówi, abyś zajrzał pod adres http://www.fajnastrona.com/, podaje właśnie URL.

WWW jest siecią dynamiczną
16
Przeglądarki sieciowe





Mozilla Firefox
Netscape
Opera
Internet Explorer
Safari
17
Serwer WWW

Serwer WWW to program działający na komputerze w sieci Internet, który odpowiada na żądania przeglądarki i wysyła do niej odpowiednie pliki. Jest on niezbędny do publikowania dokumentów w sieci. 18
Grunt to organizacja

zapamiętanie różnic pomiędzy serwerem WWW, witryną WWW, stroną WWW i stroną główną,

wybieranie informacji, które chciałbyś umieścić w Internecie,

wyznaczenie celu, któremu witryna ma służyć.

podzielenie zawartości na główne tematy,

organizację ogólnej struktury stron i ich tematów.
19
Anatomia witryn WWW

Witryna WWW — zbiór składający się z jednej lub kilku stron WWW (The Web Site).

Serwer WWW — komputer podłączony do Internetu lub intranetu, na którym przechowywana jest jedna lub kilka witryn WWW.

Strona WWW (Page) — pojedynczy element witryny,
zapisany na dysku w formie pliku.

Strona główna — „wejściowa” strona witryny, która może zawierać połączenia do innych stron tej samej witryny.
20
Do czego właściwie chcesz wykorzystać WWW? 
Informacje osobiste — możesz tworzyć strony, opisujące wszystkie sprawy związane z Twoją osobą, które mogłyby okazać się interesujące dla innych: zainteresowania, życiorys, zdjęcia, osiągnięcia. 
Hobby i zainteresowania — strona WWW może zawierać informacje na konkretny temat, może być to hobby lub inna rzecz leżąca w kręgu Twoich zainteresowań, na przykład muzyka, „Star Trek”, motocykle, kultowe filmy, grzyby halucynogenne, antyczne kałamarze lub terminy najbliższych koncertów jazzowych w okolicy.

Publikacje — gazety, magazyny ilustrowane i inne media
publikacyjne bardzo dobrze sprawdzają się w sieci WWW, gdzie nawet zyskują przewagę nad swoimi drukowanymi odpowiednikami; mogą być łatwiej i szybciej aktualizowane. 21
A może do...

Witryny firm — na stronie WWW możesz umieścić informacje o tym, czym firma się zajmuje, gdzie znajduje się jej siedziba, oferty pracy, wyniki finansowe, informacje marketingowe, prezentacje produktów i dane osób, z którymi należy się kontaktować w różnych sprawach. 
Dokumentacja elektroniczna — pojęcie dokumentacji elektronicznej może odnosić się do wszystkiego, od krótkich przewodników do pełnej, szczegółowej dokumentacji, interakcyjnych przewodników czy też modułów szkoleniowych. Wszystko, co opisuje jakąś czynność (zmiana oleju w samochodzie, przygotowanie omletu, malowanie krajobrazów, nauka języka HTML) może być traktowane jako dokumentacja elektroniczna.

Katalogi towarów — jeżeli firma oferuje towary na sprzedaż, nie ma lepszego i szybszego sposobu na powiadomienie klientów o cenach i oferowanych produktach niż lista, dostępna w sieci WWW. Przy każdej zmianie cen, wystarczy korekta plików i publikowane informacje stają się aktualne.
22
A może jednak do...

Wirtualne sklepy — WWW może być wykorzystana do prowadzenia sprzedaży. W tego typu witrynach znajdują się „koszyki”, do których użytkownicy mogą „wrzucać” towary w trakcie przeglądania katalogu.
Na koniec podają tylko numer karty kredytowej oraz informację o miejscu dostawy towaru i zamówienie jest już gotowe. 
Sondaże opinii publicznej i głosowania — interakcyjność i formularze w sieci WWW pozwalają na zbieranie opinii czytelników na każdy temat, mogą to być sondaże, sugestie na temat zawartości stron, produktów itp.

Edukacja — interakcyjność i niski koszt przekazywania informacji w sieci WWW decydują o tym, że jest ona bardzo atrakcyjnym nośnikiem informacji w procesie edukacji na odległość. Wiele uniwersytetów o wiekowej tradycji, jak również mnóstwo nowo powstałych szkół „internetowych” oferuje obecnie różnorakie formy kształcenia na odległość za pośrednictwem WWW. 
Wszystko, co tylko zdołasz wymyślić — hipertekstowa fikcja, wirtualne
zabawy, archiwa, warsztaty artystyczne... dosłownie wszystko.
23
Podziel treść na główne tematy
JULIAN TUWIM DZIECIOM
1. Biografia i twórczość Juliana Tuwima 2.Najważniejsze dzieła,
Nagrody i wyróżnienia oraz
Miejsca w Łodzi związane z Tuwimem
3. Podobizny poety
4. Kilka wierszy
5. oraz kilka cytatów. 24
Inny przyklad
Strona firmowa
1. O firmie
a) Histroria
b) Czasy obecne
c) Czym sie zajmujemy
2.
3.
4.
Oferta
Nasz cel
Kontakt
a. Dane kontaktowe
b. Mapka dojazdu
25
26
Pierwsza strona w HTML-u
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Mój pierwszy dokument</TITLE>
</HEAD>
<BODY>
<H1>To jest dokument HTML</H1>
</BODY>
</HTML>
27
HTML

Co jest potrzebne, żeby napisać stronę internetową? 
Teoretycznie może to być dowolny edytor tekstu, no i oczywiście dobre chęci.
28
(X)HTML
(X)HTML
(Extensible) Hypertext Markup Language
(Rozszerzalny) Hipertekstowy Język Oznaczania
29
Polskie znaki
ąćęłńóśźżĄĆĘŁŃÓŚŹŻ
30
TRYB WYSIWYG
Programy do tworzenia stron WWW
 MS FrontPage
 Dreamweaver
 NVU
31
Ramy dokumentu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-2" />
<meta name="Description" content="Tu wpisz opis zawartości strony" />
<meta name="Keywords" content="Tu wpisz wyrazy kluczowe
rozdzielone przecinkami />
<title>Tu wpisz tytuł strony</title>
</head>
<body> Tu wpisuje się treść strony </body>
</html>
32
Zwykły tekst
“Zwykły tekst ...
Normalny tekst...
Normalny tekst...”
“Zwykły tekst ...Normalny tekst... Normalny tekst...”
33
Znaczniki
Poza zwykłym tekstem, na stronę możesz wprowadzić znaczniki (tzw. tagi).
Znacznik jest to specjalny tekst, umieszczony
w nawiasach ostrych, np.: <p>. Jest on częścią składni języka HTML i pozwala sterować wyglądem strony.
Znacznik nie jest widoczny przy wyświetlaniu
strony.
34
Znaki specjalne

Ponieważ znaki: "<" (znak mniejszości) oraz ">" (znak większości) są zarezerwowane dla znaczników, nie powinny się one pojawić w normalnej treści strony. 
Jeżeli musimy ich użyć, należy wpisywać zamiast nich odpowiednio: < oraz >.
Ponadto znak "&" (ampersand - angielskie
"and" - Shift+7) należy zastępować przez: &
35
Znaczniki
Otwarty znacznik musi zostać zamknięty.
Np. <b> ma znacznik zamykający </b>
Błednie zapisany bedzie znacznik
<b> tu jest tekst wytłuszczony <\b>
36
XHTML

UWAGA!
W języku XHTML wszystkie znaczniki muszą być pisane obowiązkowo małymi literami. Dlatego zalecane jest już od początku uczyć się właśnie tej zasady!

Oraz wszystkie znaczniki powinny mieć swoje
odpowiedniki zamykające.
37
Koniec linii
<br /> - enter w języku HTML
Znacznik <br /> w języku HTML nie ma znacznika zamykającego (to jest właśnie jeden z nielicznych wyjątków)!
<meta />
<img />
38
Akapit – podstawowe formatowanie tekstu

p>Tu wpisz treść akapitu
▪ Akapit w pewnych warunkach nazywany jest
paragrafem
▪ Następujące po sobie akapity, są rozdzielone linijką przerwy
▪ Przyjęło się, że praktycznie każdy zwykły tekst na stronie WWW umieszcza się w akapitach
39
Podstawowe formatowanie tekstu
Wyrównanie tekstu do lewej strony (domyślnie) <p align="left">Treść akapitu</p> lub po prostu <p>Treść akapitu</p>
Wyrównanie tekstu do prawej
<p align="right">Treść akapitu</p>
Wyśrodkowanie tekstu
<p align="center">Treść akapitu</p>
Justowanie tekstu (wyrównanie do obu marginesów jednocześnie)
<p align="justify">Treść akapitu</p>
40
Tekst pochylony, Tekst podkreślony
<i>Tu wpisz tekst</i> - tekst pochylony, kursywa
(italic),
<u>Tu wpisz tekst</u> - podkreślenie
(underline).
41
Wielkość czcionki
<font size="n">Tu wpisz tekst</font>
Czcionka o rozmiarze 1
Czcionka o rozmiarze 3 (domyślna)
42
Kolorki
<font color="kolor">Tu wpisz tekst</font>
http://www.kurshtml.boo.pl/html/wykaz_kolorow,kolory.html
43
Czcionki
<font face="rodzaj">Tu wpisz tekst</font>
lub
<font face="rodzaj1, rodzaj2, rodzaj3...">Tu wpisz tekst</font>
gdzie zamiast rodzaj, rodzaj1, rodzaj2, rodzaj3... należy wpisać rodzaje czcionek (np.: Arial, 'Courier New', 'Times New Roman',
Verdana i inne).
Jeżeli nazwa czcionki składa się z kilku wyrazów, to w przypadku drugiego polecenia należy ją objąć w znaki apostrofu (np.: <font face="Verdana, 'Times New Roman', Arial">Tekst</font>).
44
Łączenie argumentów
<p align="center">
<font size="5" color=“blue“ face=“Arial"><b><i><u>
To jest jakiś tekst
</u></i></b></font></p>
Jak bedzie wyglądał tekst po wyświetleniu w
przeglądarce??
45
Kolor tła oraz tekstu

<body bgcolor="kolor tła" text="kolor tekstu">
Tu jest właściwa treść strony </body>
46
Wstawienie obrazka
<img src=“Względna ścieżka dostępu do obrazka" alt="tekst
alternatywny" />
Względna ścieżka dostepu do pliku:
katalog/moj.gif
lub
../katalog/moj.gif
Bez względana ścieżka dostępu do pliku:
C:\apache\www\moj.gif
UWAGA!
Znacznik <img /> nie posiada w jezyku HTML znacznika
zamykającego!
47
Ten sam folder

Poprawnie: plik.gif
Niepoprawnie: C:\www\plik.gif, plik.GIF, plik

Przykład zaczerpnięty z: http://www.kurshtml.boo.pl/html/wstawienie_obrazka,zielony.html
48
Poprawnie: katalog/plik.gif
Niepoprawnie: C:\www\katalog\plik.gif, katalog\plik.gif, katalog/plik.GIF, katalog/plik
W podrzędnym katalogu

Poprawnie: katalog/plik.gif
Niepoprawnie: C:\www\katalog\plik.gif,
katalog\plik.gif, katalog/plik.GIF, katalog/plik

49
Strona odwołująca się do zewnętrznego pliku

Poprawnie: ../katalog2/plik.gif
Niepoprawnie: C:\www\katalog2\plik.gif,
katalog2/plik.gif, ..\katalog2\plik.gif,
../katalog2/plik.GIF, ../katalog2/plik

50
W katalogach nadrzędnych

Poprawnie: ../../katalog2/katalog2a/plik.gif
Niepoprawnie: C:\www\katalog2\katalog2a\plik.gif,
katalog2/katalog2a/plik.gif, ../katalog2/katalog2a/plik.gif

51
Obrazki a objętość strony
GIF - dla rysunków składających się z mniej niż 256 kolorów, np. przyciski menu i inne "ręcznie" rysowane ozdobniki. Format ten obsługuje przezroczystość.
 JPG - dla zdjęć wielokolorowych. Nie obsługuje przezroczystości.
 PNG - pozwala zapisywać z bardzo dobrą jakością zarówno ręcznie rysowane grafiki jak i zdjęcia. Obsługuje kompresję oraz zarówno pełną przezroczystość jak i półprzezroczystość. Niestety zwłaszcza ta ostatnia własność może nie być interpretowana przez starsze przeglądarki (np. MSIE 6.0).
 BMP – bitmapa (bardzo rzadko stosowany format )

52
Ustawienie obrazka

<img src=“Względna ścieżka dostępu do obrazka" alt=“Tekst
alternatywny" align="ustawienie" />

Ustawienie może przyjmować wartości:
▪ Left
▪ Right

<center><img src=“Względna ścieżka dostępu " alt=“Tekstalt" /></center>
53
Odsyłacz do podstrony
Prawie najważniejszy znacznik w HTML-u
<a href="względna ścieżka dostępu do podstrony">opis odsyłacza</a>
<a href =“plik.html”> Odsyłacz do tematu 1</a>
podstrona.html - kliknij mnie
54
Odsyłacz do adresu internetowego

<a href=“http://adres internetowy">opis
odsyłacza</a>
Adres musi zaczynać się od http://
kliknij mnie
55
Odsyłacz pocztowy

<a href="mailto:adres poczty e-mail">opis
odsyłacza</a>

Zamiast: "adres poczty e-mail" należy wpisać adres poczty elektronicznej (np.: jan_kowa[email protected]).

Należy z rozwagą używać tego znacznika, ponieważ ten
sposób wykorzystuje spam.
56
Odsyłacz obrazkowy

<a href="adres"><img src=„Względna ścieżka
dostępu do obrazka" alt=„Tekst alter"
border=" " /></a>
Przycisk
gdzie jako "adres" można podać:  względną ścieżkę dostępu do dowolnej podstrony Twojego serwisu (np.: index.html),
 adres internetowy poprzedzony przez "http://" (np.:
http://www.onet.pl),
 adres poczty elektronicznej poprzedzony przez
"mailto:" (np.: mailto:[email protected]).
57
Darmowe szablony








SiteQL.net
Tymex.org
Webdiary.pl
Webinside
Webmade.org
Webmaster.Mocny.Com
WebPL.org
Xklonos
58
Generator szablonu

http://www.kurshtml.boo.pl/generatory/auto
szablon.html

http://www.nucode.vel.pl/site.php?id=gensza
59
60
Budujemy stronę

Rozszerzymy wiadomości na temat
 <head> <meta /> </head>
 <body> </body>

Rozwiniemy temat formatowania tekstu o:
 Dodatkowe formatowanie
 Listy, wypunktowania
 <hr />
 Komentarze
 Połączenia, odsyłacze, <a>



Tabele
Ramki
Ćwiczenia
61
Co do Head’a jeszcze dodamy...
<head>
<title>Tytuł strony</title>
//Tytuł strony jest znacznikiem obowiązkowym. Pominięcie go stanowi błąd!
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta name="Description" content="Tu podaj opis twojej strony" />
// nie zapomnieć o "  “ “
<meta name="Keywords" content="wyraz1, wyraz2, wyraz3..." />
<meta http-equiv="Content-Language" content="język" />
<meta name="Author" content="Tu wpisz swoje imię i nazwisko" />
<meta http-equiv="Reply-To" content="twój adres e-mail" />
</head>
62
Dodatkowe atrybuty
<meta http-equiv="Creation-Date" content="data" />
//np. "Tue, 20 Aug 1996 14:25:27 GMT".
<meta http-equiv="Last-Modified" content="data" />
<meta http-equiv="Refresh" content="s" />
<link rel="Shortcut icon" href="adres ikony" />
// favicon.ico
63
Nieco więcej o nich
64
Wyświetlanie 
Język HTML przewiduje dwa podstawowe modele wyświetlania treści znaczników: ▪ w bloku
▪ w linii
65
Jeszcze o formatowaniu
Akapit <p>...</p>
Nagłowek <hn>...</hn>
//<hn title="Tu podaj opis">Opis w IE</hn>,
Blok <div>...</div>
Wyśrodkowanie <center>...</center>
Czcionka <font>...</font>
Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów. Jak również: SIZE, COLOR, FACE
66
Jeszcze o formatowaniu
<nobr>...</nobr>
<u>...</u>
<strike>...</strike>  zalecany <del>...
</del>
<blink>...</blink>
Znaczniki NOBR oraz WBR nie wchodzą w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.
67
O formatowaniu
Indeks górny
<sup>...</sup>
Indeks dolny
<sub>...</sub>
68
Tekst preformatowany
<pre>...</pre>




teskt napisany czcionką monotypiczną (o
stałej szerokości znaku), uwzględnia dodatkowe spacje, tabulację i znaki końca linii (bez <br />)
nie jest automatycznie zawijany
Należy jednak przy tym pamiętać, aby tekst nie zawierał znaków: "<" oraz ">" (w zamian używaj: < i >).
69
Tekst preformatowany
<PRE>
()
Muu (oo)
\/------- \
||
|\
||---W || *
||
||
</PRE>
70
Kod komputerowy, Dalekopis

Kod komputerowy
<code>...</code>
Pozwala wprowadzić fragment kodu komputerowego


Nie uwzględnia on jednak dodatkowych spacji, tabulacji ani znaków końca linii (trzeba używać <br />)
jest automatycznie zawijany
Łatwiej użyc tekstu preformatowanego.

Dalekopis
<tt>...</tt>
71
Zmienna, cytaty


Zmienne
<var>...</var> -
 Czcionka pochylona dla równań y = ax2 + bx + c


Cytat <cite>...</cite>
Krótki cytat<q>...</q>
<cite>Albert Einstein</cite> powiedział: <q>Dwie rzeczy nie mają granic: wszechświat i ludzka głupota.</q>

Wynik:
Albert Einstein powiedział: ”Dwie rzeczy nie mają granic: wszechświat i ludzka głupota”.


Blok cytowany
<blockquote>...</blockquote>
72
I inne
 EM(emfaza),
 KBD (klawiatura),
 SAMP (przykład),
 INS i DEL (zmiany),
 ABBR (skrót),
 ACRONYM(akronim),
 DFN (definicja).
73
Po co ich aż tyle??


Znaczniki formatujące - mają za zadanie tylko i wyłącznie zmienić wygląd tekstu, który obejmują, bez żadnego odniesienia do znaczenia tego tekstu. Są to
np.: CENTER, B, I , U, S, STRIKE , FONT , BASEF
ONT, BIG, SMALL.
Znaczniki semantyczne - określają charakter (znaczenie) tekstu, który obejmują, jak również czasem odpowiednio formatuje. Są to np.: Hn, STRONG, EM, CODE,
KBD, SAMP , VAR, Q, CITE, BLOCKQUOTE, ADD
RESS, INS i DEL, ABBR, ACRONYM, DFN.
74
Ze znaków semantycznych korzystają:

Z informacji niesionej przez znaczniki
semantyczne korzystają zwykłe przeglądarki internetowe, wyróżniając je w specjalny, właściwy sobie sposób

Osoby niewidome

Roboty wyszukiwarek internetowych
75
76
Wykazy ponumerowane, nieuporzadkowane
Wszystkie
znaczniki
list
posiadają
następujące, wspólne elementy:
▪ cała lista jest objęta przez znaczniki początkowe
i końcowe, odpowiednie dla danego rodzaju listy (na
przykład <UL> i </UL>, <OL> i </OL>),
▪ każdy element listy posiada swój własny znacznik:
<DT> i <DD> dla listy pojęć oraz <LI> dla pozostałych
list.
77
Lista wypunktowana
<ul>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ul>
<ol>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>
78
Atrybuty

<ol type="rodzaj numeracji">
gdzie jako "rodzaj numeracji" należy podać:"1" (domyślny) numeracja według liczb arabskich
"I" - według dużych liczb rzymskich
"i" - według małych liczb rzymskich
"a" - według małych liter
"A" - według dużych liter


<ol start="n">
//zaczynamy od n-tej liczby
<li value="n">Punkt drugi</li> //zmieniona wartość punktu, n – zawsze liczbą musi być
Atrybut TYPE,START,VALUE, jest zdeprecjo
nowany przez specyfikację HTML 4.01 zaleca się stosowanie stylów.
79
Triki
<ul style="color: red">
<li><span style="color: blue">Punkt pierwszy</span></li>
<li><span style="color: black">Punkt drugi</span></li>
<li><span style="color: green">Punkt trzeci</span></li>
</ul>
80
Pozioma linia
<hr>
<hr />
<hr noshade="noshade" />
<hr size="2" />
<hr width="75%" />
<hr align="center" size="4" width="200" />
<hr width=“10%" />
<hr color=“red" />
81
Komentarze


 Tekst nie widoczny wiec po co się je stosuje?
1. Dla informacji co się poniżej/powyżej znajduje
2. Dla wyłaczenia części kodu
 Nie zagnieżdzamy komentarzy
82
83
Odsyłacz <a> </a> coś szerzej o nim

<a>...</a> - kreator hiperpołączeń na stronach HTML

<a href= “index.html”>Główna  strona</a>

<a href= “http://onet.pl”>Odwiedź Onet.pl</a>



<a href="../index.html" title="Do strony głównej">Strona główna</a>
//dymek do podpisu strony
<a href="../index.html" onmouseover="window.status='Do strony głównej'; return true" onmouseout="window.status=''; return
true">Strona główna</a> //IE
84
Tworzenie połączeń i odnośników do określonych miejsc w dokumencie (etykiety)
<A NAME="Czesc4">Część czwarta: opis hiperłączy</A>
Aby sie odwołać do tego miejsca na stronie wystarczy:
<A HREF=“#Czesc4”>Powrót do opisu hiperłaczy</A>
Aby się odwołać na inną stronę w dane miejsce z atrybutem NAME należy
zastosować konstrukcje:
<a href=“strona.html#czesc4">Idź do Części Czwartej</a>
85
Podlinkowanie




<center>
<img
src="http://publikacja.cba.pl/url_a_href/liscie.
jpg"
alt="liscie " width="306" height="407"
align="middle" />
</center>
86
Odsyłacz FTP

<a href="ftp://ftp.adres">pliki ftp</a>
Protokół FTP - File Transfer Protocol
(Protokół Transmisji Plików)
http://support.acer-euro.com/drivers/ftp/ftp.html
ftp://sunsite.icm.edu.pl/pub/
ftp://ftp.freebsd.org/pub/FreeBSD/releases/i386/7.
0-RELEASE/
87
Własny folder download

http://login.moj.pl/home/www/download/


Przykładowy serwer http:
http://ftp.tpnet.pl/vol/d1/

Aby udostepnić jeden plik do ściągnięcia piszemy:

<a href= "plik.zip">Plik plik.zip do pobrania</a>
88
Anatomia URL
Protokół
Ścieżka dostępu i nazwa pliku
http://login.mojserwer.pl/home/www/index.html
Nazwa
serwera
89
Komunikatory internetowe
Gadu-Gadu
<a href="gg:numer">opis</a>Status użytkownika
<img src="http://status.gadugadu.pl/users/status.asp?id=numer&styl=styl" alt="Gadu-Gadu" />
gdzie jako styl należy podać liczbę 1. Jeżeli podamy 2, zamiast obrazka
zostanie zwrócona liczba odzwierciedlająca status użytkownika: 1 "niedostępny", 2 - "dostępny", 3 - "zaraz wracam".
Tlen
<a href="tlen://chat|użytkownik|">opis</a>Status użytkownika
<img src="http://status.tlen.pl/?u=użytkownik&t=styl" alt="Tlen" />
gdzie jako styl należy podać liczbę 1, 2 lub 3.
http://www.kurshtml.boo.pl/html/komunikatory_internetowe,odsylacze.ht
ml
90
Komunikatory internetowe
Skype
<a href="skype:użytkownik">opis</a> <a
href="skype:użytkownik?akcja">opis</a>akcjacall - rozmowa głosowa
chat - rozmowa tekstowa
add - dodaj do kontaktów
userinfo - profil użytkownika
voicemail - poczta głosowa
sendfile - wyślij plik
Status użytkownika
<img src="http://mystatus.skype.com/ikony/użytkownik" alt="Skype" />gdzie
jako ikony należy podać zestaw ikon: smallicon, mediumicon,smallclassic, bigclassic, balloon.
Aby status wyświetlał się poprawnie, należy w ustawieniach komunikatora zaznaczyć opcję:
Narzędzia/Opcje/Prywatność/Pozwól na wyświetlanie mojego statusu.
http://www.kurshtml.boo.pl/html/komunikatory_internetowe,odsylacze.html
91
92
Części tabeli 
Podpis — informuje o zawartości tabeli, na przykład, „Liczba
elektronów na powłokach w zależności od pierwiastka” Podpisy są opcjonalne.

Nagłówki tabeli — to etykiety wierszy i (lub) kolumn. Wyświetlane
są zazwyczaj czcionką większą lub w pewien sposób wyróżnioną w stosunku do reszty tekstu tabeli. Są opcjonalne. 
Komórki tabeli — to najmniejsze jej elementy. Komórka może zawierać dane lub nagłówek. 
Dane tabeli — to wartości wpisane w samą tabelę. Nagłówki i dane to tabela.
93
Podstawowa struktura tabeli
<table>
<tr>
<td>...</td> <td>...</td>
</tr>
<tr>
<td>...</td> <td>...</td>
</tr>
</table>
94
Wiersza i komórki


<table> - znaczk rozpoczęcia tabeli </table>
<tr> - znacznik rozpoczęcia wiersza </tr>
▪ <th> - znacznik rozpoczęcia nagłówka w wierszu </th>

<td> - znaczik rozpoczęcia kolumny <td> (inaczej komórki danych)
Liczba wierszy jest nieograniczona
Natomiast musimy zadbać o to aby liczba komórek była taka sama.
95
Podpisy

Ustawienie podpisu tabeli
<caption align=“top” > Domyślne
ustawienie</caption>
Inne wartości:
▪ "bottom" - tytuł dolny
▪ "left" - ustawienie przy lewej krawędzi tabeli
▪ "right" - przy prawej krawędzi
▪ "center" - na środku
Element CAPTION musi się znajdować zaraz po znaczniku TABLE!
96
Małe warsztaty

Stwórz własną tabele
97
Marginesy w komórkach 
Szerokość marginesu w komórkach (x –
pikselach)
▪ <table border=“1” cellpadding="x">...</table>
▪ Np. <table border=“4" cellpadding=“15">

Szerokość odstępu (x w pikselach) między sąsiednimi komórkami
▪ <table cellspacing="x">...</table>
▪ Np. <table border=“4" cellspacing=“5">
98
Różnice miedzy nimi:
99
Wymiary tabel (wiecej miejsca w komórkach)
Wymiary całej tabeli
<table width="x" height="y">...</table>
Lub
<table width="x%" height="y%">...</table>
100
Wymiary pojedynczej komórki
<table>
<tr>
<td width="x" height="y">...</td>
</tr>
</table>
Lub
<table>
<tr>
<td width="x%" height="y%">...</td>
</tr>
</table>
101
Wyrównanie tabeli Wyrównanie tabeli
<table align=“right“>...</table>
1.

Wyrównanie zawartości tabeli
Tu dochodzi dodatkowy znacznik: valign
Wyrównanie zawartości całego wiersza
<table>
<tr align="rodzaj" valign="ustawienie">...</tr>
</table>
2.
102
Wyrównanie zawartości pojedynczej komórki
Wyrównanie zawartości pojedynczej komórki
<table>
<tr>
<td align="rodzaj" valign="ustawienie">...</td>
</tr>
</table>
3.
"left" - wyrównanie zawartości (wiersza lub komórki) do lewej (domyślnie)
"right" - wyrównanie zawartości do prawej
"center" - wyśrodkowanie zawartości
ustawienie"top" - ustawienie zawartości (wiersza lub komórki) na górze
"bottom" - ustawienie zawartości na dole
"middle" - ustawienie zawartości po środku (domyślnie)
103
Kolor tła

W całej tabeli
<table bgcolor="red">...</table>

W jednym wierszu
<table>
<tr bgcolor="blue">...</tr>
</table>

W pojedynczej komórce
<table>
<tr>
<td bgcolor="green">...</td>
</tr>
</table>
104
Tło obrazkowe
W całej tabeli
<table background="ścieżka dostępu">...</table>
W pojedynczej komórce
<table>
<tr>
<td background="ścieżka dostępu">...</td>
</tr>
</table>
105
Ćwiczenia
<table border="5">
<tr>
<td>komórka1</td> <td>komórka2</td>
</tr>
<tr>
</tr>
</table>
106
Łączenie komórek Poziome łączenie komórek
<table>
<tr>
<td colspan="x">...</td>
</tr>
</table>
gdzie "x" oznacza liczbę komórek do połączenia w poziomie.
107
Łączenie komórek Pionowe łączenie komórek
<table>
<tr>
<td rowspan="y">...</td>
</tr>
</table>
gdzie "y" oznacza liczbę komórek do połączenia w pionie.
108
<table border="1">
<tr>
<td colspan="2">komórki1,2</td>
</tr>
<tr>
</tr>
</table>
109
Bardziej zaawansowane możliwości ulepszania tabel 
Grupowanie i określanie wyrównania kolumn

Grupowanie i określanie wyrównania wierszy

Atrybuty FRAME oraz RULES
110
Pływające Ramki 111
Przykład  index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>Przykladowa strona z ramkami</title>
</head>
<frameset cols="*,*" frameborder="no" border="0" framespacing="0">
<frame src="menu.html" name="lewa" title="lewa" />
<frame src="prawa.html" name="prawa" title="prawa" />
</frameset>
<noframes><body>
</body>
</noframes></html>
//Zapisujemy pod nazwa index.html
112
menu.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Przykladowa strona z ramkami</title>
</head>
<body style="background:#993333">
<h1 align="center" > Menu </h1>
<ul>
<li><a href= " prawa.html" target="prawa" >Strona główna</a></li>
<li><a href="strona1.html" target="prawa" >Strona1</a></li>
<li><a href="strona2.html" target="prawa" >Strona2</a></li>
<li><a href="links.html" target="prawa" >Linki</a></li>
</ul>
</body>
</html>
113
prawa.html
<head>
<Przykladowa strona z ramkami</title>
</head>
<body style="background:#999933">
<h1>Moja pierwsza strona w Ramkach</h1>
<p>Witam na mojej stronie!</p>
<p>Bedziemy sobie tutaj edytowali nasza pierwsza strone.</p>
<p>Powinno znaleść się tutaj więcej informacji ale je szcze nie teraz...</p>

<address class="podkreslenie">
Wykonana 10 grudzien, 2008
</address>
</body>
</html>
114
strona1.html










<head>
<title>Untitled Document</title>
<style type="text/css"><!-.styl1 {
font-size: 10px
}-->
</style>
</head>







<body bgcolor="#6633FF">
<hr />
<center><h1> Strona test 1</h1></center>
<hr /> <p> </p><p> </p><p> </p><p> </p><p> </p>
<p class="styl1"><a href="prawa.html">powrót</a></p>
</body>
</html>

115
links.html
<head>
<title>Untitled Document</title>
<style type="text/css"><!-.styl1 {
font-size: 10px
}-->
</style>
</head>
<body bgcolor="#0000FF">
<hr />
<center><h1> LINKI</h1></center>
<hr /> <p> </p><p> </p><p> </p><p> </p><p> </p>
<p class="styl1"><a href="prawa.html">powrót</a></p>
</body>
</html>
116
Ramki pływające
iframe
<head>
<title>Ramki pływające</title>
</head>
<body>
<h1 align="center">Pływające ramki</h1>
<center><iframe width="650" height="650" name="messier"
src="m42.html"></iframe>
<div><a href="m41.html" target="messier">M41</a>
<a href="m42.html" target="messier" >M42</a>
<a href="m57.html" target="messier">M57</a>
<a href="m101.html" target="messier">M101</a>
</div></center>
</body>
</html>
117
(Extensible HyperText Markup Language).
119
Język znaczników
HTML jest językiem znacznikowym, które mają
zadanie opisać strukture strony, a nie jej wygląd.
 HTML nigdy nie został zaprojektowany w celu określania wyglądu strony (wyboru czcionek, kolorów czy też odległości pomiędzy wyrazami bądź literami),  został on stworzony w celu opisu elementów tworzących stronę (nagłówków, teksu, obrazów, itp.)  Rozszerzenia standardowych znaczników HTML (<font>, <color>) udostępniły autorom stron WWW możliwości wykraczające poza początkowe zamierzenia twórców języka HTML. 
120
Po co CSS I XHTML?

W celu przywrócenia początkowej struktury języka HTML i zapewnienia autorom stron WWW tak
poszukiwanej możliwości kontroli ich układu i wyglądu World Wide Web Consortium wprowadziło kaskadowe arkusze stylów (ang: Cascading Style
Sheets, w skrócie: CSS) oraz XHTML 121
Czym jest XHTML i dlaczego należy go używać? Jakie korzyści z tego płyną?
Dokumenty XHTML są zgodne ze składnią XML, więc mogą być łatwo przeglądane, edytowane i walidowane (sprawdzane) przez standardowe narzędzia XML.
 Dokumenty XHTML mogą być napisane tak, aby działały równie dobrze lub nawet lepiej zarówno w przeglądarkach obsługujących HTML 4 jak i XHTML.
 Dokumenty XHTML mogą zawierać skrypty i applety, które bazują na językuDOM (Document Object Model) zgodnym z HTML jak i
XHTML.

122
Jakie korzyści
Podczas gdy rodzina języków XHTML będzie ewoluować, dokumenty zgodne z XHTML będą bardziej przyjazne do działania wewnątrz i pomiędzy różnymi środowiskami XHTML.
 W języku XML stosunkowo łatwo można wprowadzać nowe elementy i atrybuty. Rodzina języków XHTML została zaprojektowana tak, aby przystosować te rozszerzenia do modułów XHTML. Moduły pozwalają tworzyć kombinacje istniejących i nowych cech podczas budowania serwisów oraz projektowania nowych przeglądarek.
 Serwery, proxy i przeglądarki będą zdolne do przeprowadzania lepszej transformacji treści. Dokumenty zgodne z XHTML będą poprawnie interpretowane w każdej przeglądarce zgodnej z tym językiem.

123
Identyfikator <DOCTYPE>

Jakie są wymagania, aby naszą strone można było nazwać,
że jest napisana w XHTML-u?
Każdy znacznik ma swój odpowiednik zamykający
Znaczniki pisane małymi literami
A także:
 wartości atrybutów zapisuj wewnątrz cudzysłowów
 poprawnie zagnieżdżaj znaczniki i nie dopuszczaj, aby
„zachodziły” na siebie




XHTML dodaje jeszcze jeden wymagany element:
<DOCTYPE>
http://www.w3.org/TR/xhtml1/
124
<DOCTYPE>

Znacznik ten określa typ tworzonego dokumenty HTML, który może:
▪ Transitional (pośredni), ▪ Strict (ścisły)
▪ Frameset (układ ramek). 125
Wymagania stawiane dokumentom XHTML
Strict (ścisła)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 Transitional (przejściowa)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
 Frameset (ramkowa)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">

126
Wpowadzenie do Kaskadowych Arkuszy Stylów
127
Kaskadowe Arkusze Stylów CSS




128
Idea arkuszy stylów 


129
Idea arkuszy stylów <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
<title>Zastosowanie arkuszy stylów</title></head>
<body>
<h1>Zastosowanie arkuszy stylów</h1>
<p> Chcemy aby nagłówek został wyświetlony na czerwono, a tekst akapitu będzie miał inną czcionkę i
kolor niebieski.</p></body>
</html>
130
Idea arkuszy stylów 


h1 { color: red }
p { font-family: Arial, Helvetica, sans-serif; color: blue }
131
Jak zbudować...

▪
▪
▪
▪
▪
▪

132
Gdzie to wstawić???
<head>
<title>Zastosowanie arkuszy stylów</title>
<style type="text/css">
<!-h1 { color: red }
p { font-family: Arial, Helvetica, sans-serif; color: blue }
-->
</style>
</head>
<body>
<h1>Zastosowanie arkuszy stylów</h1> <p>Chcemy aby nagłowek został wyświetlony na czerwono, a tekst akapitu będzie miał inną czcionkę.</p>
</html>
133
Trzy sposoby wstawiania:

Styl lokalny

Wewnetrzny arkusz stylów

Zewnerzny arkusz stylów
134
Styl lokalny
<selektor style="cecha: wartość; cecha2: wartość2...">
</selektor>
135
Zalety stylu lokalnego


inline


<span style="color:#CC00CC; text-align:center">...</span>
▪ Span nadaję się tylko do elementów pisanych w linii
136
DIV a SPAN

<div style="background-color:#333333; textdecoration:blink”>...</div>

▪
▪

137
Wewnętrzny arkusz stylów
<head>
<title>Zastosowanie arkuszy stylów</title>
<!-h1 { color: red }
p { font-family: Arial, Helvetica, sans-serif; color:
blue }
-->
</style>
</head>
<body>
.......
138
Osadzone arkusze stylów


<!–/* Ten tekst zostanie zignorowany przez przeglądarkę, ale może zawierać informacje cenne dla projektanta arkusza CSS */
-->
</style>
139
Zewnętrzny arkusz stylów






140
141
<head>
(...)
<link rel="Stylesheet" type="text/css" href="style.css" />
(...)
</head>

142
body {
font-family: Verdana, Arial, Helvetica,
sans-serif;
font-size: 10pt;
color: #003868;
background-color: #80B8E8;
margin: 6mm;
}
p{
text-align: justify;
}
pre, code {
font-size: 8pt; }
143
Ciekawostki


:
▪ Narzędzia/Opcje internetowe/generalne/Dostępność/Formatuj
dokumenty używając mojego arkusza stylów
144
Kaskada stylów

CSS - (ang. Cascading Style Sheets) Kaskadowe Arkusze
Stylów.
145

Gdy na jednej stronie WWW
zostaną zastosowane wszystkie trzy typy arkuszy stylów to:
 reguły zdefiniowane w arkuszu późniejszym mają wyższy priorytet, niż reguły zdefiniowane w arkuszach wcześniejszych,
 Najmniejszy priorytet mają
zewnętrzne, osadzone, a nawyższy
lokalne.
146
Reguły kaskadowości



147
Innymi słowy kolejność
1.
2.
3.
4.
5.
6.
7.
Styl lokalny (inline)
Rozciąganie stylu (SPAN)
Wydzielone bloki (DIV)
Wewnętrzny arkusz stylów
Import stylów do wewnętrznego arkusza
Import stylów do zewnętrznego arkusza
148
UWAGI


!important”
149
Najczęściej stosowane właściwości stylów oraz ich wartości Do pełnego poznania wszystkich właściwości stylów
brakło by czasu.

Dlatego pełna specyfikacja wszystkich rzeczy
z CSS w wersji pierwszej jest pod adresem:
http://www.w3.org/TR/CSS1/

Specyfikacja CSS w wersji 2
http://www.w3.org/TR/CSS21/

Specyfikacja w wersji 3
http://www.w3.org/Style/CSS/current-work#CSS3
150
Nasza przyszłość...





151
Najczęściej stosowane właściwości stylów oraz ich wartości 
marginesy oraz wypełnienie strony Tło, kolory i obrazy Określanie wyglądu obramowań Określanie czcionek i stylów wyrównanie tekstu Atrybut CLASS
152
Jednoski długosci

▪
▪


153
Jednoski długosci



154
Właściwość 
margin-top

Margin
Opis
Konfiguruje obszar pomiędzy elementem a jego sąsiadami (górny margines elementu). Można go definiować w jednostkach absolutnych, w procentach względem szerokości tekstu lub automatycznie (wartość auto).
 margin-right Konfiguruje obszar pomiędzy elementem a jego sąsiadami (prawy margines elementu).  margin-bottom
Konfiguruje obszar pomiędzy elementem a jego sąsiadami (dolny margines elementu).  margin-left
Konfiguruje obszar pomiędzy elementem a jego sąsiadami (lewy margines elementu). Właściwość skrótowa dająca możliwość łatwiejszego określenia właściwości margin-top, margin-right, marginbottom oraz margin-left. Akceptowane wartości tej właściwości to długości wyrażone liczbowo, wartości procentowe lub wartość auto. 155
Właściwość Opis

Padding-top Określa odległość pomiędzy górną granicą obszaru a elementami zawartymi w tym obszarze.
Odległość może być podawana w dowolnych stosowanych jednostkach miary, w procentach lub
automatycznie (wartość auto). 
Padding-right Określa odległość pomiędzy granicą obszaru z prawej strony a elementami zawartymi w
tym obszarze.

Padding-bottom Określa odległość pomiędzy dolną granicą obszaru a elementami zawartymi w tym obszarze.

Padding-left Określa odległość pomiędzy granicą obszaru z lewej strony a elementami zawartymi w tym obszarze.

Padding
Określa odległości pomiędzy granicą obszaru a elementami zawartymi w tym obszarze. Odległość może być podawana w dowolnych stosowanych jednostkach miary, w procentach lub
automatycznie (wartość auto). 156
http://www.kurshtml.boo.pl/css/model_pudelkowy,marginesy.html
157
Wartości MARGIN i PADDING



158
Background-color Określa kolor tła dla elementu. Możliwymi wartościami są nazwy kolorów (lub odpowiadający im heksadecymalny „tryplet” rgb) lub słowo transparent.
 Background-image Definiuje obraz jako tło elementu. Wartością powinien być adres URL pliku obrazu lub słowo none.
 Background-repeat Jeśli konieczne jest złożenie tła z identycznych obrazów, ten atrybut umożliwi określenie sposobu wyświetlania tła. Wartości atrybutu to repeat, repeat-x i repeaty. Wartość repeat wskazuje, że obraz powinien być powielany w sposób normalny. Zastosowanie wartości repeat-x spowoduje
powtórzenie obrazu w pojedynczej linii poziomej, a zastosowanie wartości repeat-y — w linii pionowej.

159
Określa kolor elementu (w większości przypadków dotyczy to koloru tekstu wyświetlanego wewnątrz elementu strony WWW). Kolor można określić, podając jedną z 16 nazw lub używając kilku różnych sposobów zapisu wartości RGB.  Background-attachment Określa czy obraz tła jest stały (dołączony do dokumentu), czy też będzie przewijany wraz z nim. Dostępne wartości tej właściwości to: scroll oraz fixed.
 Background-position
Określa początkowe położenie obrazu tła.  Background
Właściwość skrótowa umożliwiająca określenie jednej lub kilku powyższych właściwości w jednym miejscu arkusza stylów. 
Color
160
Przykład nieporuszającego sie obrazku na środku strony
body {
background-attachment:fixed;
background-image: url(../../przyklad.png);
background-position: center center;
background-repeat: no-repeat;
}
161
Wygląd obramowań

border-style
Określa styl wszystkich czterech obramowań
elementu. Wartości tej właściwości są identyczne jak wartości właściwości
border-bottom-style. Styl poszczególnych obramowań można także określać
niezależnie, posługując się właściwościami:
a)
border-bottom-style,
b)
border-left-style,
c)
border-top-style
d)
border-right-style.
Dostępne wartości, które można przypisać tej właściwości to: none, dotted, dashed,
solid, double, grove, ridge, inset oraz outset.

border-color Określa kolor wszystkich czterech obramowań elementu. Kolor
poszczególnych obramowań można także określać niezależnie, posługując się
właściwościami:
a)
border-bottom-color,
b)
border-left-color,
c)
border-top-color
d)
border-right-color.
Wartością tych właściwości może być jedna z 16 nazw kolorów, wartość RGB zapisana w jednej z kilku dostępnych postaci lub też wartość transparent. 162
Określanie czcionek i stylów 
font-family Określa krój czcionki. Pozwala na podanie nazwy czcionki (na przykład: Arail, Times lub Palatino),bądź jednej z pięciu ogólnych nazw czcionek: serif, sans-serif,
cursive, fantasy lub monospace.

font-size Określa wielkość czcionki, wyrażoną w wielkościach bezwzględnych, względnych lub jako wartość procentową. 
font-style Określa styl czcionki, może to być jedna z wartości: oblique, italic lub normal.

font-weight Określa grubość (wagę) czcionki, można ją ustalić przy użyciu wartości normal, bold, bolder, lub lighter.

font-variant Określa modyfikację czcionki, może to być wartość small-caps lub normal.

Font
Właściwość skrótowa umożliwiająca określenie wartości właściwości font-weight, font-size, fontstyle, font-family oraz line-height w jednym
arkusza stylów. miejscu
163
Wygląd obramowań
border-width Określa grubość wszystkich czterech obramowań elementu. Grubość p szczególnych obramowań można także określać niezależnie, posługując się właściwościami:

a)
b)
c)
d)
border-bottom-width,
border-left-width,
border-top-width
border-right-width.
Dostępne wartości to: thin, medium, thick lub też wartość określająca długość. Border
Właściwość skrótowa umożliwiająca jednoczesne określenie grubości, stylu oraz koloru wszystkich czterech obramowań elementu. Wygląd poszczególnych obramowań elementu (jego grubość, kolor oraz styl) można także określa niezależnie, przy użyciu właściwości:

a)
b)
c)
d)
border-bottom,
border-left,
border-top,
border-right.
164
Pismo szerywowe i bezszeryfowe

pismo bezszeryfowe

pismo szeryfowe


serif
Sans serif
▪ "Sans" to po francusku – "bez", w tym przypadku – "bez
szeryfów".
165
Właściwości CSS określające wyrównanie tekstu word-spacing
Umożliwia zwiększenie domyślnych odstępów pomiędzy wyrazami. Odstępy są podawane w jednostkach absolutnych. Wartość domyślna to normal.
 letter-spacing
Umożliwia zwiększenie domyślnych odstępów pomiędzy literami. Odstępy są podawane w jednostkach absolutnych. Wartość domyślna to normal.
 line-height
Określa odległość pomiędzy liniami bazowymi dwóch kolejnych linii. Wartość liczbowa określa, że wysokość linii będzie wielkością czcionki pomnożoną przez podaną liczbę, na przykład:

a)
b)
line-height: 2 tworzy linię o wysokości równej dwukrotnej wielkości czcionki. Właściwości line-height można także przypisać wartość bezwzględną. line-height: 15px oznacza, że wysokość linii będzie wynosiła 15 pikseli. W przypadku podania wartości procentowej, wysokość linii jest obliczana na podstawie wysokości elementu. Na przykład:
a)
line-height: 200% jest równoważne podaniu wartości liczbowej: line-height: 2.
b)
wartość normal -- linia będzie miała domyślną wysokość.
166
Wyrównanie tekstu
vertical-align Określa absolutną pozycję tekstu w pionie lub jego pozycję względem elementu nadrzędnego. Oto lista jego wartości: 
a)
b)
c)
d)
e)
f)
g)
h)
baseline,
middle,
sub,
super,
text-top
text-bottom (określają pozycję względem elementu nadrzędnego) top
bottom (określają pozycję względem wiersza). Stosując procentowe wartości ujemne lub dodatnie, obniżamy lub podnosimy element ponad linię bazową elementu nadrzędnego.

text-align
Umożliwia to, co standardowe wyrównanie HTML (wartości left, right, center,justify).

Text-decoration
Umożliwia wprowadzanie dodatkowych ozdobników, takich jak podkreślenie, przekreślenie i miganie. Może przyjmować cztery wartości: a)
b)
c)
d)
none,
overline,
line-through
blink.
167
Wyrównanie tekstu

text-indent Określa wcięcie pierwszej linii sformatowanego
tekstu w elemencie. Wartość ta może być wartością
bezwzględną lub wartością procentową, bazującą na
szerokości elementu. Wartości procentowe określane są na
podstawie szerokości elementu i w przeważającej większości
przypadków działają najlepiej.
white-space
Atrybut określa odstępy i złamania wiersza w obrębie elementu. Wartości są następujące:
a) normal — w tym przypadku dodatkowe odstępy są ignorowane, tak jak w przypadku zwykłego HTML, b) pre — jak w formatowanym wstępnie za pomocą znacznika <PRE> tekście HTML c) nowrap — wiersze są łamane tylko za pomocą znacznika <BR />.

168
Atrybut CLASS
<title>Stosowanie klas</title>
<!-p { font-family Arial, Helvetica, sans-serif; color:
green }
p.wiekszy { font-family: Arial, Helvetica, sans-serif;
font-size: larger}
p.maly {font-family:Geneva, Arial, Helvetica, sansserif; font-size:smaller}
.podkreslenie {text-decoration:line-through}
-->
</style>
169
A w tekscie:

<p class="wiekszy">Witam na mojej stronie!</p>

<p class="maly">Bedziemy sobie tutaj edytowali
nasza pierwsza strone.</p>

<p>Powinno znaleźć się tutaj więcej informacji ale jeszcze nie teraz...</p>
<address class="podkreslenie">Wykonana 10
grudzien, 2008</address>

170
Do dzieła...
171
<head>
<title>Moja strona z arkuszami stylów</title>
</head><body>

<ul >
<li><a href="index.html">Strona główna</a></li>
<li><a href="strona1.html">Strona1</a></li>
<li><a href="strona2.html">Strona2</a></li>
<li><a href="links.html">Linki</a></li>
</ul>

<h1>Moja pierwsza strona ze stylami</h1>
<p >Witam na mojej stronie!</p>
<p >Bedziemy sobie tutaj edytowali nasza pierwsza strone.</p>
<p>Powinno znaleźć się tutaj więcej informacji ale jeszcze nie teraz...</p>
<address>
Wykonana 10 grudzien, 2008
</address></body></html>
172
DODAWANIE KOLORU
<!-body
{
color:#993333;
background-color: #9933FF;
}
-- >
</style>
173
DODANIE CZCIONKI
body {
font-family: Georgia, "Times New Roman", Times,
serif;
color:#993333;
}
h1
{
font-family: Helvetica, Geneva, Arial, SunSansRegular, sans-serif
}
</style>
174
DODANIE PASKA NAWIGACJI
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman", Times, serif;
color:#993333;
}
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em
}
h1
{ font-family: Helvetica, Geneva, Arial, SunSans-Regular, sansserif }
</style>
Wstaw <ul class="navbar“>
175
STYLOWANIE LINKÓW
body {
padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif;
color:#993333; background-color: #9933FF; }
ul.navbar { list-style-type: none;
padding: 0;
margin: 0;
position: absolute; top: 2em; left: 1em; width: 9em }
h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a { text-decoration: none }
a:link { color: blue }
a:visited { color: purple }
</style>
176
DODANIE LINI POZIOMEJ
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted
}
177
Nieruchome tło
Body {
…
background-attachment:fixed;
background-image: url(../../przyklad.png);
background-position: center center;
background-repeat: no-repeat;
}
178
Używanie class
p{
font-family Arial, Helvetica, sans-serif;
color: green }
p.wiekszy {
font-family Arial, Helvetica, sans-serif;
font-size: larger }
p.maly {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:smaller}
.podkreslenie {text-decoration:line-through}
<p class="wiekszy">Witam na mojej stronie!</p>
179
HTML Vademecum Profesjonalisty
HTML 4 - Czarna księga WebMastera
http://webmaster.helion.pl/kurshtml/
http://www.kurshtml.boo.pl
www.google.pl
http://algorytmy.pl/
http://www.tlumaczenia-angielski.info/
180
Wstawianie obrazka

Standardowe wstawianie obrazka:

<img src="obrazek.png" width="150" height="150"
alt="tekst alternatywny" />

Połaczenie obrazka oraz łacza hipertekstowego:
<a href="strona.html" title="tytyl tego hiperlacza"
target="_blank">
 <img src="obrazek.jpg" alt="alter" /></a>

182
Wzajemne położenie tekstu i obrazu
ALIGN="TOP" Wyrównuje górną krawędź obrazu względem górnej krawędzi linii (może to być górna krawędź tekstu lub innego obrazu).
 ALIGN="MIDDLE" Wyrównuje obraz w taki sposób, że jego środek leży dokładnie pośrodku linii.
 ALIGN="BOTTOM" Wyrównuje dolną krawędź obrazu względem dolnej krawędzi linii.

ALIGN="TEXTTOP" Wyrównuje górną krawędź obrazu względem górnej krawędzi najwyższej litery w linii (ALIGN="TOP" wyrównuje obraz względem najwyższego elementu linii, czyli nie tylko liter, ale innych obrazów).
 ALIGN="ABSMIDDLE" Wyrównuje obraz w taki sposób, że jego środek leży pośrodku największego elementu linii (ALIGN="MIDDLE" działa tak, że środek obrazu znajduje się pośrodku samego tekstu).
 ALIGN="BASELINE" Wyrównuje dolną krawędź obrazu względem dolnej krawędzi tekstu.
 ALIGN="ABSBOTTOM"Wyrównuje dolną krawędź obrazu względem dolnej krawędzi największego elementu w linii.

również 183
Grafika i CSS













<img src="zdjecia/zd1.jpg" alt="alter tekst" />
<hr align="center">
<img src="zdjecia/zd1.jpg" alt="Opis zdjecia" style="border: 5px red
solid; ">
<hr align="center">
<img src="zdjecia/zd1.jpg" alt="Zdjecie w lecie" style="outline: 5px
green double; ">
<hr align="center">
tekst przy obrazku
<img src="zdjecia/zd1.jpg" alt="przesuniety o 50px" style="margin-left:
50px; margin-right: 50px; ">
tekt po obrazku oddalony o 50 px
<hr align="center">
<p>Ten akapit jest napisany u góry</p>
<img src="zdjecia/zd1.jpg" alt="gorne marginesy" style="margin-top:
50px; margin-bottom: 50px">
<p>dolny akapit napis</p>
184
ELEMENT BLOKOWY DIV
 Chcąc umieścić grafikę jako samodzielny element w wierszu, można by ją umieścić w elemencie blokowym div, ustawionym po lewej czy
prawej stronie lub na środku wiersza.



<div style="text-align:center; ">
<p><img src="zdjecia/przyklad.png" alt="w bloku" /></p>
</div>
 Jeśli nie zapewnisz osobnego miejsca grafice, sąsiadująca z nią inna grafika zostanie ustawiona w tym samym wierszu.

Możesz też nadać grafice blokowy charakter, jawnie zmieniając domyślny sposób jej wyświetlania, korzystając z polecenia stylów display:block;
185
Pozycjonowanie poziome
Aby umieścić ilustrację przy prawym marginesie, należy jej
nadać styl style="float: right; ".
 <img
src="zdjecia/przyklad.png"
alt="stop"
style="float:right" />

Analogicznie, aby umieścić ilustrację przy lewym
marginesie, należy jej nadać styl style="float: left; ".
<p style="text-align:justify"><img
src="zdjecia/przyklad.png" alt="stop" style="float:left" />
186
Pozycjonowanie pionowe

Do dyspozycji mamy jeszcze technikę pionowego pozycjonowania elementów względem siebie - wykorzystujemy w nim polecenie
stylów vertical-align, które zastąpiło przestarzały atrybut align
(top, middle, bottom).

<p style="text-align:justify"><img src="zdjecia/przyklad.png"
alt="stop"; style="vertical-align:top"/>

alt="stop"; style="vertical-align:middle"/>

alt="stop"; style="vertical-align:bottom"/>
187
Mapy odsyłaczy na obrazkach






A oto pełna treść polecenia:
<img src="odsylacz.gif " usemap="#mapa1">
<map name ="mapa1">
<area shape="rect" coords="1, 1, 50, 50" href="1.html" alt="strona 1">
</map>
Pierwszy wiersz polecenia przywołuje obrazek. USEMAP informuje przeglądarkę, że obrazek
"odsylacz.gif" jest mapowany, i że mapa nosi nazwę "mapa1".
Drugi wiersz zapoczątkowuje definicję mapy.
Wiersze 3-6 wprowadzają cztery kolejne fragmenty mapy odsyłaczy, odpowiadające prostokątom na
rysunku. SHAPE=RECT mówi, że chodzi tutaj o prostokąty (RECT=rectangle). COORDS informuje o
współrzędnych, przy czym pierwsze dwie liczby w wierszu podają lewy górny róg prostokąta, a
następne dwa - prawy dolny. Warto unikać nakładania na siebie obszarów map, choć przeglądarka
akceptuje nakładanie. HREF= stanowi przywołanie jakiegoś dokumentu HTML.
Ostatni wiersz stanowi zakończenie definicji mapy.
188
Przykład

<div align="center"><img src="zdjecia/zacmienie.jpg"
alt="zacmienie ksiezyca" width="640" height="480" border="0"
align="top" usemap="#Map" />

<map name="Map" id="Map">




<area shape="rect" coords="40,61,194,203" href="strona1.html" />
<area shape="rect" coords="460,307,557,381" href="#" />
<area shape="circle" coords="307,132,61" href="strona2.html" />
<area shape="poly" coords="469,76,588,92,563,189,486,226,438,157"
href="strona3.html" />

</map>

</div>
189
Cięcie grafiki

Znana z wielu programów ułatwiających pracę webmasterom firma Coffee Cup Software ma w
swojej ofercie niewielki programik do cięcia grafiki na fragmenty. Różne są powody dokonywania tej
operacji przez tworzących strony WWW. Część webmasterów uważa, że grafika przygotowana w tej
formie przyczynia się do szybszego ładowania obrazka na stronie, inni zaś wykorzystają tą funkcję do
przypisania konkretnym fragmentom obrazka odpowiedniego odnośnika. Ustalenie przydatności
pocięcia na części obrazka pozostawmy samym zainteresowanym a zajmijmy się możliwościami
programu Coffee Cup Image Slicer, który tą czynność powinien nam ułatwić.
190
Cięcie grafiki

http://board.counter-strike.pl/viewtopic.php?t=27745
191
Stosowanie rozszerzeń HTML 
znaczniki HTML 2.0,

opcje HTML 3.2 i HTML 4.0, takie jak tabele, wycinki, tła i kolor, które są obsługiwane przez większość przeglądarek, ale nie przez wszystkie,

HTML 4.0 i związane z nim możliwości, takie jak kaskadowe arkusze stylów, Dynamiczny HTML i układy ramek, 
XHTML 1.0, proponowane rozszerzenie języka HTML 4.0 stwarzające możliwość rozbudowy znaczników HTML i przygotowujące dokumenty HTML na przyszłe wymagania WWW, 193
Stosowanie rozszerzeń HTML 
pluginy i inne obiekty osadzone wykorzystujące pliki i dane zewnętrzne (względem przeglądarki), 
znaczniki specyficzne dla danego typu przeglądarek (np. dla Netscape czy Internet Explorera), które mogą, ale wcale nie muszą, zostać uwzględnione w oficjalnej specyfikacji HTML — w tym przypadku obsługa tych znaczników również zależy od typu przeglądarki, 
inne technologie (takie jak SMIL Boston,
synchronizowany język multimedialny), które w przyszłości mogą się stać specyfikacjami W3C, a które na razie nie są w ogóle obsługiwane lub są obsługiwane tylko przez nieliczne przeglądarki. 194
Jakich mamy projektantów
Konserwatywny projektant
Projektant eksperymentator
Projektant mieszany
195
Jakich mamy projektantów
Konserwatywny projektant
Projektant eksperymentator
Projektant mieszany
196
Aby obsłużyć te różne podejścia
HTML 4.1 lub XHTML 1.0 Transitional
HTML 4.1 lub XHTML 1.0 Frameset
HTML 4.1 lub XHTML 1.0 Strict
197
Projekt witryny i strony

Nie można właściwie rozpocząć projektowania strony
WWW, dopóki nie zaprojektujemy układu całej witryny.
Zaczynamy od kartku papieru i ołówka/długopisu.
Rozrysowujemy cały układ witryny, tworzymy szablon, na
którym będą oparte wszystkie strony w witrynie
3. Ustalamy kolory (zasada 3k)
4. Styl tekstu
5. Nawigacje
1.
2.

Najlepszym sposobem jest tutaj użycie Kaskadowych
Akuszy Stylów.
199
Projektowanie
1.
Ustal kolory witryny i stosuj te kolory konsekwentnie (komplementarność, kontrast, kordynacja)
2.
Ustal styl tekstu, zachowaj jednolity sposób formatowania tekstu (np. Paragrafy zawsze mają ten sam rodzaj czcionki).
3.
Spójny schemat nawigacji w obrebie witryny przyczynia się również do jednorodnego charakteru witryny
4.
Pisz jasno i zwięźle
5.
Organizuj strony w sposób przejrzysty
6.
Ostrożnie stosuj wyróżnienia 7.
Im mniej skomplikowana strona tym lepsza
200
Kolory
1.
Kolory komplementarne – czyli wzajemnie się uzupełniające, wywołujące miłe dla oka wrażenie
2.
Kolory kontrastowe wyróżniają poszczególne elementy strony
3.
Koordynacja, harmonia kolorów na kolejnych stronach witryny wzmacnia dobre wrażenie, użytkownik oglądając Twoja witryne,
wie, że jest to dzieło a nie bezładnie połączone strony. 
Kolory niosą ładunek emocjonalny - ciepło, chłód, surowość, łagodność, itp.
201
Ważne

Korzystaj z nagłówków. Zwróć uwagę na sposób, w jaki w tej książce stosowane są nagłówki. Dzięki nim możesz szybko znaleźć interesujący Cię temat. Ta sama zasada stosuje się do stron WWW; 
Stosuj listy. Wspaniale nadają się do podsumowania odnoszących się do siebie pozycji. Ilekroć masz powiedzieć coś w rodzaju „każdy kij ma dwa końce” lub „zastosuj następującą procedurę”, skojarz to z listą numerowaną lub wypunktowaną; 
Nie zapominaj o menu zawierającym połączenia. Forma listy sprawia, że menu zawierające połączenia ma wszystkie zalety listy, będąc ponadto więcej niż doskonałym narzędziem nawigacji; 
Nie ukrywaj ważnych informacji w tekście. Jeśli chcesz poczynić istotną uwagę, niech pojawi się ona u góry strony lub na początku akapitu. Długie akapity czyta się gorzej, a ich skuteczność w przekazywaniu informacji jest mniejsza. Im głębiej w treści akapitu umieścisz swoją uwagę, tym mniej prawdopodobne, że ktokolwiek ją przeczyta. 202
Twórz strony, będące samodzielnymi całościami 
Niech Twoje tytuły będą opisowe. Tytuł powinien informować nie tylko o temacie strony, ale także o jej pozycji względem innych stron prezentacji, której jest częścią; 
Umieść na stronie połączenia nawigacyjne. Jeśli strona jest tematycznie związana ze stroną poprzednią, to umieść na niej połączenie, które pozwoli wrócić na tę stronę (być może należy także umieścić na niej połączenie do strony nadrzędnej); 
Unikaj jako zdań otwierających zdań typu: „Możesz rozwiązać ten problem poprzez…”, „Po wykonaniu tego zrób…” i „Korzyści tej metody to…”, 203
Nie stosuj terminologii typowej dla danego typu przeglądarek 
„kliknij tutaj” — cóż bowiem mają począć użytkownicy przeglądarek, które nie są obsługiwane za pomocą myszy? Bardziej stosowne będzie ogólne wyrażenie: „Wybierz to połączenie” (oczywiście powinieneś przede wszystkim unikać określenia „tutaj”); 
„by zapisać stronę, rozwiń menu File i wybierz Save” — każda przeglądarka ma swoje specyficzne menu i inne sposoby osiągania tego samego celu. Jeśli to możliwe, unikaj odwoływania się do specyfiki działania danej przeglądarki; 
„skorzystaj z przycisku Back, by powrócić do poprzedniej strony” — poprzednia uwaga jest słuszna także i w tym wypadku. Zestawy przycisków w różnych przeglądarkach mogą się różnić, podobnie jak metody przemieszczania się wstecz. Jeśli zależy Ci, by czytelnicy byli w stanie powrócić do poprzedniej lub jakiejkolwiek innej strony, stosuj połączenia. 204
Sprawdzaj ortografię i składnię 1.

Używaj znaków interpunkcyjnych, a zwłaszcza przecinków! Stawia się je prawie zawsze przed: "że", "iż" (wyjątki: "..., chyba że...",
"..., dlatego że...", "..., (po)mimo że/iż..."), a najczęściej również przed: "a",
"ale", "lecz", "aby", "żeby", "ponieważ", "bo", jak również przed wyrażeniami zawierającymi "który" (np.: "z którym", "w którym", "po którym", "wewnątrz którego" itd.). Nie stawiamy przecinków przed ani za spójnikami: "i", "oraz",
"lub", "albo", "bądź", "ani", "czy" ( jeśli pełni rolę spójnika).
2.
Kropki używamy - poza zakończeniem zdania - również po skrótach (np.: "prof.", "inż."). Wyjątkiem są skróty, kończące się na ostatnią literę pełnego wyrazu (np.: "mgr", "nr", ale "dyr."). Ponadto często stosuje się nawiasy, dla przedstawienia jakiejś uwagi pobocznej (w ich miejsce można również użyć myślników).
3.
Oddzielaj nowymi akapitami fragmenty tekstu, które nieco różnią się od siebie tematycznie. Bardzo długi "czysty" tekst niezbyt dobrze się czyta.
205
Projektowanie i układ strony Naczelną zasadą, którą należy się kierować przy projektowaniu stron WWW, jest zasada maksymalnej prostoty.
a)
Zredukuj liczbę elementów, b)
obrazów, c)
nagłówków, d)
linii poziomych
i postaraj się, by wzrok czytelnika padał w pierwszej kolejności na najistotniejsze części strony. 

206
Projektowanie i układ strony 1)
2)
Stosuj nagłówki jako nagłówki Grupuj informacje wiążące się ze sobą 3)
Stosuj spójny układ
 Czytając książkę można zauważyć:
a)
Każda strona ma ten sam układ
b)
Kazdy rozdział ma ten sam układ
c)
Numery stron zawsze są w tych samych miejscach
d)
Akapity tak samo wygladają
 POWTARZALNOŚĆ
207
Cechy zwartego układu strony.

konsekwentne stosowanie elementów strony — jeśli na jednej ze stron skorzystałeś z nagłówka <H2>, by przedstawić główne tematy, w ten sam sposób postępuj na pozostałych stronach. Jeśli strona rozpoczyna się nagłówkiem podkreślonym linią poziomą, taki sam układ powinien pojawić się na reszcie stron;

konsekwentne formy nawigacji — na kolejnych stronach umieszczaj menu
nawigacyjne zawsze w tym samym miejscu (zazwyczaj u dołu lub u góry strony) i staraj się nie zmieniać ich liczby. Jeśli masz zamiar korzystać z ikon nawigacyjnych, pamiętaj, by na każdej stronie były to te same ikony, ułożone w tym samym porządku; 
zewnętrzne arkusze stylów — jeśli chcesz postępować zgodnie z zaleceniami HTML 4.1 lub XHTML 1.0 to możesz stworzyć główny arkusz stylów definiujący właściwości tła, kolory tekstu i połączeń, stosowane kroje czcionek i ich rozmiar, wielkość marginesów, itd. Stosując ten arkusz stylów, uzyskasz to, że wszystkie strony wchodzące w skład witryny zachowają spójny wygląd. 208
Stosowanie połączeń 3.
Dbaj o to, by tekst prezentacyjny połączeń zawartych w menu był opisowy Umieszczaj połączenia w tekście Unikaj używania słowa „tutaj” ▪
Zamiast połączenia w takiej formie: ▪
Tutaj znajdziesz informacje na temat oswajania strusi.
▪
▪
Może:
Palo Alto Zoo udzieli Ci informacji na temat oswajania strusi.
4.
Połączenia — tworzyć czy nie tworzyć (Czy połączenie będzie użyteczne? )
1.
2.
209
Obrazy
1.
2.
3.
4.
Nie przesadź z liczbą obrazów Stosuj tekst alternatywny
Stosuj małe obrazy Ostrożnie z założeniami
 Nie należy zakładać, że u każdego użytkownika wymiary okna przeglądarki są takie same, jak u Ciebie.
 Nie należy zakładać, że wszyscy korzystają z monitorów które wyświetlają 16 mln kolorów. 5.
Nie przesadzaj z kolorami tła i połączeń 6.
7.
 Zadbaj o to, by kolory pierwszego planu (tekstu) kontrastowały z kolorami tła.  Jeśli stosujesz wzorzyste tło, sprawdź, czy wzór nie pokrywa się z tekstem. Umieszczaj połączenie do strony głównej Nie rozdzielaj tematu między strony 210
Wyważ właściwie liczbę stron (duże strony) 
Zalety:

obsługa jednego pliku jest prostsza, a połączenia w nim zawarte nie zostaną zerwane, nawet jeśli poprzesuwasz elementy lub zmienisz nazwę pliku, 
pojedynczy plik jest najbliższy pod względem struktury dokumentowi spoza sieci, jeśli więc rozprowadzasz dokumenty zarówno w postaci wydruku, jak i w sieci, operowanie pojedynczym plikiem ułatwi zadanie. 
Wady:

załadowanie dużego pliku zabiera mnóstwo czasu, szczególnie w przypadku wolnych łączy sieciowych, a trwa wieki, gdy strona zawiera wiele elementów graficznych, 
czytelnicy muszą przewijać stronę, by znaleźć interesujący ich materiał, odszukanie właściwych informacji staje się nużące, nawigacja do punktów innych niż początek i koniec strony graniczy z niemożliwością, 
struktura takiej strony jest nazbyt sztywna i liniowa, choć czytelnicy mogą przeskakiwać między sekcjami strony, struktura całości przypomina dokument drukowany, brak tu elastyczności układu małych stron powiązanych ze sobą nieliniowymi połączeniami. 211
Wyważ właściwie liczbę stron (małe strony) 

Zalety:
małe strony ładują się szybko, 
często całkowicie mieszczą się na ekranie, a więc prezentowane informacje są widoczne na pierwszy rzut oka. 
Wady:

zmorą takiego rozwiązania jest obsługa połączeń, niewielkie zmiany w strukturze nawigacyjnej mogą spowodować jej załamanie się, 
zbyt wielka liczba połączeń może irytować, śledzenie podstawowego wątku jest utrudnione, jeśli czytelnik większość czasu spędza na skakaniu między stronami. 212
Jeszcze kilka uwag
1.
Unikaj ślepych zaułków (strona nie posiadająca zadnych łaczy
hipertekstowych)
2.
Twórz łacza do zasobów o podobne tematyce
3.
Ułatwiaj odnalezienie różnych informacji (mapa witryny)
4.
Podpisuj swoje strony
5.
Uwzględnienie poziomu doświadczenia użytkownika 6.
Podaj listę stron zawierających opis witryny (np. O witrynie)
7.
Jeżeli Twoja strona jest eksperymentem i potrzebujesz do tego okreslonych plików, apletów, pluginów, powiadom użytownika
skąd je mogą pobrać, aby poprawnie wyświetlić stronę. 213
Kluczem do sukcesu jest jednak zawartość witryny
1.
2.
3.
4.
5.
6.
7.
Zadecyduj jakiego rodzaju informacje bedziesz publikował na łamach
witryny
Zaplanuj jak efektywnie z nich korzystać
Przeanalizuj treść strony pod względem przydatności, stopnia
zainteresowania
Zastanów się nad forma prezentacji (czasem zbyt “wybajerowana” strona jest nie czytelna).
Dostosowuj kolory witryny do tematu prezentowanych informacji.
Dbaj o “świeżość” informacji (częste aktualizowanie)
Stosuj dynamiczną forme prezentacji a nie statyczną
214
A tour of new features
215
Projektowanie za pomocą tabel


Za pomocą table możemy pozycjonować
elemnty na stronie
Tabele zbudowane są z wierszy,
reprezentowanych przez znacznik ,
wiersze skłądają się w końcu z kolumn


217
Projektowanie za pomocą tabel




Wyrównanie komórek i wyrówanie określa
układ tabeli
Komórki mogą obejmować więcej niż jeden
wiersz lub kolumnę
Tabele można zagnieżdzać
Tabele to najprosztrzy sposób budowy układu
strony
218
Formatowanie czcionki
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<head>
<title>Strona zbudowana na tabelach</title>

</style>
</head>
<body>
<center><table width="1024" border="0">
<tr>
<td height="87" colspan="3" bgcolor="#FF3333">
<center>Miejsce na banner</center></td>
</tr>
<tr>
<td width="215" height="500" valign="top" bgcolor="#9933FF"><p align="center"> </p>
219
Formatowanie czcionki
<p align="center"> </p>
<p align="center"><strong>MENU 1</strong></p>
<ol>
<li><h5>link1</h5></li>
<li> <h5>link3</h5></li>
<li><h5>...</h5></li></ol>
<p>  </p></td>
<td width="677" align="left" valign="top" bgcolor="#CC6633"><span class="style1">Wlaściwe miejsce na
strone </span></td>
<td width="110" valign="top" bgcolor="#9933FF"> "><p align="center"> </p>
<p align="center"> </p>
<p align="center"><strong>MENU 1</strong></p>
<ol>
<li> <h5>link3</h5></li>
<li><h5>...</h5></li></ol>
<p>  </p> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#CC99CC"><div align="center">Miejsce na stopke</div></td>
</tr>
</table></center>
</body>
</html>
220
221
Zalety stosowania ramek
Wygoda nawigacji,
Prostota tworzenia struktury serwisu bez korzystania
ze skryptów PHP,
 Oszczędność wczytywania danych przy przechodzeniu na podstrony (menu wczytuje się tylko raz),
 Microsoft Internet Explorer 7.0 nie potrafi stopniowo
wczytywać tabelek, dlatego jeżeli struktura strony została zbudowana w oparciu o tabele, przy obszernych dokumentach najpierw czekamy dość długo przed białym ekranem, by potem zobaczyć od razu całą stronę. Problem ten nie występuje w "czystych" ramkach.


223
Wady:




Niektórzy uważają, że mają mniej profesjonalny wygląd.
Zwykle dodanie do zakładek (ulubione) podstron serwisu z
ramkami jest utrudnione lub nawet niemożliwe. Analogiczny problem występuje w przypadku chęci skopiowania adresu konkretnej podstrony, np. aby przekazać go znajomemu.
Odświeżenie serwisu w ramkach, np. w przypadku problemów w transferem, zawsze powoduje powrót na stronę główną.
Ramki są przeznaczone do budowy raczej prostszych struktur serwisu. Jeśli wstawimy na stronie dużo ramek - szczególnie w mniejszych rozdzielczościach ekranu - "okienko" z właściwą treścią strony może okazać się stanowczo za małe.
224
PHP -- "PHP: Hypertext Preprocessor"


powszechnie używany język skryptowy ogólnego przeznaczenia, który jest szczególnie przystosowany do tworzenia aplikacji
Webowych, także poprzez zagnieżdżenie wewnątrz języka HTML. Składnia, wywodząca się z języków C, Java i Perl, jest łatwa do nauczenia się. Głównym celem języka jest umożliwienie programistom szybkiego tworzenia stron internetowych, ale
PHP umożliwia znacznie więcej. 226
test.php
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<?php
echo '<p>Hello World</p>';
?>
</body>
</html>
227
PHP -- sprawdzenie możliwości

<?php

Phpinfo();
echo 'Current PHP version: ' . phpversion();
?>


228
Formularze +PHP



Składnia formularza jest zawsze taka sama, zaczynamy od znacznika <FORM> a
kończymy na </FORM>. Wewnątrz znaczników wprowadzamy pola tekstowe, pola wyboru radio, przyciski itp..
Na samym początku musimy określić właściwości naszego formularza, robimy to poprzez ustawienie właściwości action oraz
method.
229
Właściwość ACTION

określamy tutaj do jakiej strony będziemy przekazywać nasze dane (zmienne). Może to być dowolna strona ze skryptem. Właściwość ustawiana jest za pomocą adresu URI.
Np. <form action=“cosik.php" method="GET">
230
Właściwość METHOD
Możemy tu okteślić w jaki sposób będziemy przekazywać informacje, a mamy do dyspozycji dwie metody:
 POST – Jest to metoda poufnego przekazywania
danych. Informacje przekazywane są ze strony na stronę w zmiennych zadeklarowanych w odpowiednich polach formularza.
 GET – Jeśli zdecydujemy że naszą metodą przekazywania danych będzie metoda GET to dane jakie będziemy chcieli przekazać do kolejnej strony będą znajdowały się w adresie URI np.:
http://publikacja.cba.pl/formularz/cosik.php?f0=e
mail.gif&f1=jakis%40jakis&f2=zaq1&f3=1&f4=1&f5
=duza
231

Wnętrze <FORM>

Wewnątrz formlularza mogą pojawić się pola,
do których wprowadzimy intersyjące nas
informacje.

Każde z tych pól wprowadzamy do naszego formularza za pomocą elementu <INPUT>, a typy naszych inputów mamy następujące:
232
Wlaściowści <INPUT>



Text – pole tekstowe
Check box – pole wyboru, kwadracik, który
jak jest zaznaczony przyjmuje wartość
“tak”, nie zaznaczenie tego pola oznacza
“nie”.
Tego pola można skorzystać w dowolnej
ilości.
Radio – Okrągły przycisk wyboru. Spośród
grupy przycisków możemy wybrać tylko
jeden.
233
Wlaściowści <INPUT>







Button – indywidualnie definiowany przycisk.
File – Specjalne pole tekstowe, w którym
wprowadzana jest nazwa pliku.
Submit – przycisk, do wysyłania danych z
formularza.
Image – to samo co wyżej, z tymże jest to
obrazek.
Password- pole text, o ukrytych znakach.
Reset – przycisk usuwający wszytskie dane z
formularza
Hidden – informacja ukryta ale przesylana z
innymi.
234
form.html
<form action="cosik.php" method="GET" class="style1">
plik:
<input type=file name=f0><br/><br/>
e-mail: <input type=text name=f1><br/><br/>
hasło: <input type=password name=f2><br/><br/><br/>
<input type=checkbox name=f3 value=1>Projektuje strony w
XHTMLU<br/><br/>
<input type=checkbox name=f4 value=1>Projektuje strony w CSS<br/><br/>
<p>W stopiniu: </p>
<input type=radio name=f5 value="mala">Małym<br/>
<input type=radio name=f5 value="duza">Dużym<br/>
<input type=radio name=f5 value="srednia">Średnim<br/><br/><br/>
<p align="center"><input type=submit value="Wyślij">
<input type=reset></p>
</form>
235
Cosik.php
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso8859-2" />
<title>Skrypt PHP</title>
</head>
<body>
<table><tr><td width="300"></td>
<td>
<?php
print "twoje dane:<br/><br/>\n\n\t";
//pobieranie pierwszej zmiennej
print $_GET['f0'];
print "<br/>\n\t";
//pobieranie drugiej zmiennej
print $_GET['f1'];
print "<br/>\n\t";
print $_GET['f4'];
print "<br>\n\t";
//pobieranie szóstej zmiennej
print $_GET['f5'];
print "<br/>\n\t";
print "<br/><br/>zostały wysłane...\n\n\t";
?></td></tr></table>
</body>
</html>
//pobieranie trzeciej zmiennej
print $_GET['f2'];
print "<br>\n\t";
//pobieranie czwartej zmiennej
print $_GET['f3'];
236
Cosik.php
<head>
<title>Skrypt PHP</title>
</head>
<body>
<table><tr><td width="300"></td>
<td>
<?php
print "twoje dane:<br/><br/>\n\n\t";
//pobieranie pierwszej zmiennej
print $_GET['f0'];
print "<br/>\n\t";
//pobieranie drugiej zmiennej
print $_GET['f1'];
print "<br/>\n\t";
//pobieranie trzeciej zmiennej
print $_GET['f2'];
print "<br>\n\t";
//pobieranie czwartej zmiennej
print $_GET['f3'];
print "<br/>\n\t";
//pobieranie piątej zmiennej
237
Cosik.php – ciąg dalszy
print $_GET['f4'];
print "<br>\n\t";
//pobieranie szóstej zmiennej
print $_GET['f5'];
print "<br/>\n\t";
print "<br/><br/>zostały wysłane...\n\n\t";
?>
</td></tr></table>
</body>
</html>
238
<form>
<SELECT> <OPTION>
<select name="menu">
<option> polski (pl)</option>
<option> czeski (cz)</option>
<option> rosyjski (ru)</option>
<option> irlandzki (ie)</option>
<option> holenderski (nl)</option>
</select>
</form>
239
Podsumowanie



Formularze służą do pobierania informacji od
użytkownika w efektywny sposób
Każdy element formularza powinien posiadać
unikatową nazwę
Z formularzami możemy używać JavaScript
240
Zabezpieczenie maila przed SPAMem
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>JavaScript</title>
<script type="text/javascript">
<!-function wyslijMaila(uzytkownik, serwer){
location.href = "mailto:" + uzytkownik + "@" + serwer;
}
//-->
</script>
</head>
<body>
<a href="#" onclick="wyslijMaila('uzytkownik', 'jakisserwer.pl');
"><img src="email.gif" alt="" /></a>
</body>
</html>
241
„Tworzenie stron WWW-Biblia” David A. Crowder Andrew Bailey
http://webmaster.helion.pl/kurshtml/beginner/beginner.htm
http://www.kurshtml.boo.pl/html/zielony.html
242
www.google.pl
243
www.google.pl
http://algorytmy.pl/
http://www.tlumaczenia-angielski.info/
http://pl.php.net/manual/pl/tutorial.php
244

HTML - MCE 24

Transkrypt

Podobne dokumenty

raport z kursu obsługi komputera dla dzieci ze

MS Outlook

skrypt dla nauczyciela – matematyka, fizyka, chemia

GK.271.01.2014 Gmina i Miasto Koziegłowy Plac Moniuszki 14 42