it14 strony www

background image

Technologie informacyjne

Tadeusz Lesiak

Wykład 14

y

Tworzenie stron internetowych

(HTML PHP)

(HTML, PHP)

background image

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

background image

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

background image

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

background image

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

background image

Nagłówek dokumentu HTML

Ogólnie w nagłówku mogą wystąpić elementy

Title

Meta

St l

Style

T.Lesiak Technologie informacyjne

6

background image

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.

background image

(Śród)Tytuły

HTML

w HTML

Znaczniki

<hx> i </hx>,

x = 1,2, …,6.

Znak

h

oznacza heading

T.Lesiak Technologie informacyjne

8

background image

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

background image

HTML: atrybuty czcionki

Linia pozioma

<hr>

(pojedyncze !!!) - horizontal line

T.Lesiak Technologie informacyjne

10

background image

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

background image

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

background image

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

background image

HTML: listy

Zmiana sposobu znakowania listy:

T.Lesiak Technologie informacyjne

14

background image

HTML: listy

Zmiana sposobu numerowania listy:

T.Lesiak Technologie informacyjne

15

background image

HTML: listy zagnieżdżone

Zagnieżdżanie list nieuporządkowanych:

T.Lesiak Technologie informacyjne

16

background image

HTML: listy zagnieżdżone

Zagnieżdżanie list uporządkowanych:

T.Lesiak Technologie informacyjne

17

background image

HTML: tabele

Tworzenie ram tabeli:

np.

Wprowadzanie wierszy tabeli:

Wprowadzanie

komórek w

np.

wierszu tabeli:

np.

T.Lesiak Technologie informacyjne

18

background image

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

background image

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

background image

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

background image

HTML: multimedia na kilku przykładach

Przykład z plikiem mpeg

Przykład z

liki fl h

plikiem flash

T.Lesiak Technologie informacyjne

22

background image

HTML: multimedia na kilku przykładach

Wstawianie pliku RealMedia (rozszerzenie .ra)

Wstawianie apletu (przekompilowanego programu napisanego w Javie):

T.Lesiak Technologie informacyjne

23

background image

PHP na prostym przykładzie

T.Lesiak Technologie informacyjne

24

background image

PHP na prostym przykładzie

Przykład skryptu

T.Lesiak Technologie informacyjne

25

background image

Zakładamy własną stronę www

Na przykładzie http://miasto.interia.pl/

T.Lesiak Technologie informacyjne

26

background image

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


Wyszukiwarka

Podobne podstrony:
Powtórka strony WWW
Jak wysłać ze strony WWW e-mail z dowolnym załącznikiem, PHP Skrypty
Gwara na podstawie opisu tematycznej strony www w serwisie facebook
bd2 07 strony WWW
Jak pobrać zawartość strony WWW korzystając z biblioteki CURL, PHP Skrypty
PHP i MySQL Dynamiczne strony WWW Szybki start Wydanie II
7 rzeczy ktore musisz wiedziec 7 rzeczy ktore musisz wiedziec tworzenie strony www
umowa o wykonanie strony www OLWTIT5S72WGNR3IMIAPTLGL7QFIYVS76LNDUXI
Jak zablokować dostęp do danej strony WWW, INTERNET
Jak pobrać i zapisać na dysk wskazane strony WWW, PHP Skrypty
174 Strony WWW i katalogi bibliotek w Internecie
Tworzenie strony WWW
Ciekawe portale, namiary i strony www 2011
Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

więcej podobnych podstron