Technologie informacyjne
Tadeusz Lesiak
Wykład 14
y
Tworzenie stron internetowych
(HTML PHP)
(HTML, PHP)
Technologie informacyjne
Tadeusz Lesiak
Wykład 14
y
Tworzenie stron internetowych
(HTML PHP)
(HTML, PHP)
Co to jest (X)HTML, i PHP ?
HTML –
HyperText Markup Language
– język przeznaczony do publikacji w sieci
WWW (World Wide Web) tj. do tworzenia stron internetowych
HTML jest tak naprawdę aplikacją
SGML
(
Standard Generalized Markup Language
) –
ogólnego języka znaczników służącego do ujednolicania struktury i formatu
wszelkiego typu informacji (danych). SGML umożliwia zapisanie danych w postaci
dokumentu tekstowego stają się one łatwe do przenoszenia wyświetlania
dokumentu tekstowego stają się one łatwe do przenoszenia, wyświetlania
i drukowania w ramach różnych systemów elektronicznego przekazu danych.
Od wersji 4.01 HTML przerodził się w
XHTML
(
E
X
tensible HTML
) przygotowany przez
organizację W3C
XHTML nie jest odrębnym językiem, a jedynie przedstawieniem HTML4.01 w wersji XML
XML
(
Extensible Markup Language
) - uniwersalny język służący do przeznaczony do
przedstawiania różnych danych w ustrukturalizowany sposób. Cechuje go
niezależność od platformy systemowej; XML stanowi podzbiór SGML.
PHP
(
Personal Home Page
) – obiektowy, skryptowy język programowania zaprojektowany
do generowania dynamicznych stron internetowych
T.Lesiak Technologie informacyjne
2
do generowania dynamicznych stron internetowych
Do pisania w HTML potrzebujemy edytora...
Pajączek (5 NxG) – polski b.dobry
CoreEditor - polski, komercyjny edytor, porównywalny z Pajączkiem,
b ł
j
t kż XHTML
t
b
ł t
dHTML
obsługujący także XHTML - następca bezpłatnego edHTML.
kED - polski, darmowy edytor, szybki i konfigurowalny, obsługujący XHTML
HateML Pro - polski, darmowy edytor z obsługą (X)HTML.
HateML ro polsk , darmowy edytor z obsługą (X)H ML.
edHTML - polski, darmowy edytor; jego następcą jest CoreEditor.
Website Pro - polski, darmowy edytor;
Zajączek PHP - polski, darmowy edytor, z dobrą obsługą PHP.
Ager Web Edytor - polski, darmowy edytor ze wsparciem dla PHP i JavaScript.
HTML-Kit - bardzo silny amerykański edytor, z ogromną liczbą pluginów, darmowy
.
1'st Page 2000 - jeden z najpotężniejszych programów webmasterskich, darmowy.
ACE HTML F
d m
n l j
n d t bsł
st n k d
h
ACE HTML Freeware - darmowy, anglojęzyczny edytor, z obsługą stron kodowych.
HotDog - silny amerykański edytor, komercyjny.
CoffeeCup HTML Editor - silny, amerykański edytor, komercyjny.
T.Lesiak Technologie informacyjne
3
p
y,
y
y
,
yj y
Z czego składa się dokument HTML ?
Dokument HTML zawiera się między ZNACZNIKAMI
<html>
a
</html>
Składa się on z trzech części:
Składa się on z trzech części:
1. Informacja o wersji języka HTML
2
Nagłówek: jego elementy są zawarte
2. Nagłówek: jego elementy są zawarte
między
<HEAD>
a
</HEAD>
3. Część główna, zawierająca treść
g
j
dokumentu; jej elementy są zawarte
między
<BODY>
i
</BODY>
Znaczniki w przeglądarce
WWW nie są wyświetlane.
Są one jedynie interpretowane
Są one jedynie interpretowane,
tzn. pozwalają "w locie"
formatować tekst.
T.Lesiak Technologie informacyjne
4
Nagłówek dokumentu HTML
Między znacznikami
<head> i </head>
powinno
się znaleźć polecenie
<title> </title>.
Title
nie oznacza jednak wcale tytułu wyświetlanego na stronie. Zawarta między tymi
znacznikami treść ukaże się w pasku tytułowym przeglądarki, a nie w dokumencie
W nagłówku, między znacznikami
<head> i </head>
powinna się także znaleźć
informacja o zastosowanej stronie kodowej dokumentu np
informacja o zastosowanej stronie kodowej dokumentu np.
T.Lesiak Technologie informacyjne
5
Nagłówek dokumentu HTML
Ogólnie w nagłówku mogą wystąpić elementy
Title
Meta
St l
Style
T.Lesiak Technologie informacyjne
6
Przykład standardowej struktury
Przykład standardowej struktury
(nagłówka) dokumentu HTML
Polskie czcionki
– ogromna większość edytorów nie wymaga już stosowania
odrębnych klawiatur i czcionek ekranowych, gdyż same automatycznie
konwertują one polskie znaki do wybranej przez nas strony kodowej
T.Lesiak Technologie informacyjne
7
konwertują one polskie znaki do wybranej przez nas strony kodowej.
(Śród)Tytuły
HTML
w HTML
Znaczniki
<hx> i </hx>,
x = 1,2, …,6.
Znak
h
oznacza heading
T.Lesiak Technologie informacyjne
8
HTML: akapity i wiersze
W d i
k d k k ó i j
bj
j l
iki
W zasadzie każdy tekst, który nie jest objęty specjalnym znacznikiem,
jest interpretowany poprawnie i wyświetlany na stronie internetowej
Przy próbie rozdzielenia akapitów w edytorze za pomocą klawisza Enter przeglądarka
Przy próbie rozdzielenia akapitów w edytorze za pomocą klawisza Enter, przeglądarka
zignoruje znaki końca wierszy i akapitów w edytorze i wyświetli jednolity blok tekstu.
Poprawne rozdzielenie akapitów wymaga użycia pary znaczników
<p> i </p>
Polecenie
<br>
(pojedyncze !!!)
służy do złamania tekstu bez wprowadzania przy tym znaku końca akapitu.
k d
dó h ć
d d d k
l
Przenosi ono tekst o jeden wiersz w dół, choć nie wprowadza dodatkowej interlinii.
T.Lesiak Technologie informacyjne
9
HTML: atrybuty czcionki
Linia pozioma
<hr>
(pojedyncze !!!) - horizontal line
T.Lesiak Technologie informacyjne
10
HTML: wielkość i kolor czcionki
W wersjach starszych niż HTML 4.01 istniały specjalne polecenia
definiujące wielkość i kolor czcionki np.
T.Lesiak Technologie informacyjne
11
HTML: wielkość i kolor czcionki
W HTML 4.01 atrybuty te zostały przeniesione do stylów, za pomocą
których można uzyskać znacznie bogatsze efekty
T.Lesiak Technologie informacyjne
12
HTML: listy
Tworzenie szkieletu listy:
polecenie
<ul> </ul>
p
(
unordered list
).
W ramach szkieletu znajdą
się poszczególne punkty listy
się poszczególne punkty listy,
które wprowadzamy za
pomocą polecenia
<li> </li>.
Lista numerowana
cyframi arabskimi:
polecenia
<ol> i </ol>
(
ordered list
).
T.Lesiak Technologie informacyjne
13
HTML: listy
Zmiana sposobu znakowania listy:
T.Lesiak Technologie informacyjne
14
HTML: listy
Zmiana sposobu numerowania listy:
T.Lesiak Technologie informacyjne
15
HTML: listy zagnieżdżone
Zagnieżdżanie list nieuporządkowanych:
T.Lesiak Technologie informacyjne
16
HTML: listy zagnieżdżone
Zagnieżdżanie list uporządkowanych:
T.Lesiak Technologie informacyjne
17
HTML: tabele
Tworzenie ram tabeli:
np.
Wprowadzanie wierszy tabeli:
Wprowadzanie
komórek w
np.
wierszu tabeli:
np.
T.Lesiak Technologie informacyjne
18
HTML: tabele
Obramowanie tabeli
– artybut
border
w jej definicji
np.
w jej definicji
Określenie
szerokości
obramowania
(w pikselach)
np.
Określenie odległości
między komórkami
np.
T.Lesiak Technologie informacyjne
19
HTML: odsyłacze
Dwa najważniejsze i najczęściej używane odsyłacze:
do innych stron WWW
do innych stron WWW
uruchamiający pocztę elektroniczną.
ją y p
ę
ą
T.Lesiak Technologie informacyjne
20
HTML: grafika na stronie
Grafika powinna być stosowana z umiarem i formatach o wysokiej kompresji:
GIF, JPG (JPEG) i PNG
T.Lesiak Technologie informacyjne
21
HTML: multimedia na kilku przykładach
Przykład z plikiem mpeg
Przykład z
liki fl h
plikiem flash
T.Lesiak Technologie informacyjne
22
HTML: multimedia na kilku przykładach
Wstawianie pliku RealMedia (rozszerzenie .ra)
Wstawianie apletu (przekompilowanego programu napisanego w Javie):
T.Lesiak Technologie informacyjne
23
PHP na prostym przykładzie
T.Lesiak Technologie informacyjne
24
PHP na prostym przykładzie
Przykład skryptu
T.Lesiak Technologie informacyjne
25
Zakładamy własną stronę www
Na przykładzie http://miasto.interia.pl/
T.Lesiak Technologie informacyjne
26
Praca domowa
Załóż na jakimś darmowym serwerze własną stronę www i podaj jej adres.
Powinna ona zawierać:
•
Kolorowe różne czcionki
•
Kolorowe, różne czcionki
•
Listę,
•
Tabelę
•
Rysunek
Rysunek
•
Applet javy (link do appletu)
•
Adres e-mail autora(-rki)
T.Lesiak Technologie informacyjne
27