Wybrane Języki Programowania
Download
Report
Transcript Wybrane Języki Programowania
Wstęp do baz danych
- język HTML
Dr Andrzej Bąk
Cele zajęć, program.
Celem zajęć jest zaprezentowanie narzędzi do
tworzenia oraz dostępu do baz danych.
Wykorzystywane będą bezpłatne narzędzia.
Wykład będzie omawiał trzy zagadnienia:
Język HTML
Baza danych MySQL
Programowanie w PHP
Internet i WWW
Wcześniejsza wersja sieci komputerów głównie
placówek naukowych, rządowych - BITNET
Internet ogólnoświatowa i obecnie
ogólnodostępna sieć komputerowa.
W Polsce ~ od roku 1989
WWW (World Wide Web) - strony internetowe i
inne zasoby dostępne w Internecie na
komputerach zwanych serwerami (z uwagi na
zainstalowane na nich oprogramowanie).
Po co te informacje w Internecie?
Nauka i wymiana informacji naukowej
Wiadomości i polityka
Reklama i handel (strony firmowe, sklepy i
giełdy internetowe)
Rozrywka (muzyka, filmy, zdjęcia, gry, teksty,
„chat”)
Tematyczne bazy danych, biblioteki
Prywatne informacje dla przyjaciół i
znajomych (strony prywatne)...itp.
Co to właściwie jest Web?
Termin "Web" pochodzi od World Wide Web i oznacza
sieć, ale nie jest to sieć rozumiana jako infrastruktura,
tylko bardziej ogólnie jako sposób komunikowania się z
odległymi komputerami.
Web jest właściwie kombinacją:
protokołów komunikacyjnych np. TCP/IP, HTTP, FTP, POP3
kilku rodzajów programów: przeglądarki internetowe –
interpretatory HTML, serwery www, serwery ftp, serwery
pocztowe oraz,
Internetu rozumianego jako układ serwerów i łącz
umożliwiających wymianę informacji pomiędzy
komputerami.
Przeglądarki Internetowe
Programy, które mogą interpretować
zakodowane strony WWW (język opisu strony
HTML) i wyświetlać zawarte na nich informacje
(tekst, grafikę, multimedia).
Wybrane przeglądarki internetowe:
Internet Explorer
Mozilla Firefox
Opera
Netscape Communicator (1994-2007)
Przeglądarki wbudowane w programy (Word)
Co to jest HTML?
HTML ------ HyperText Markup Language ------dosłownie język znaczników hipertekstowych
używany do opisu stron Internetowych (stron
WWW). Pozycjonowanie elementów strony
odbywa się względem marginesów lub innych
elementów strony
Polecenia HTML zawarte są pomiędzy nawiasami
<>
<HTML> zawartość strony </HTML>
/ oznacza zakończenie polecenia, formatu.
Przykładowe edytory HTML
Pajączek
Macromedia Dreamweaver
Microsoft FrontPage
Dowolny edytor tekstowy np. Notatnik
Komentarz HTML
<!-- pomiędzy tymi znakami możemy wstawić
sobie dowolny komentarz, który nie będzie
wyświetlany przez przeglądarkę internetową -->
<!-- tra la la komentarz tra la la-->
Prosta strona internetowa
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=windows-1250">
<TITLE>
Tytuł mojej pierwszej strony
</TITLE>
</HEAD>
<BODY>
Tutaj umieszczam informacje,
</BODY>
</HTML>
Polecenie <META...>
<HEAD>
<meta http-equiv="content-type" content="text/html;
charset=windows-1250">
</HEAD>
lub
<HEAD>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-2">
</HEAD>
służy głownie do określenia sposobu kodowania znaków
(polskich liter) na stronie WWW, ale ma też inne funkcje.
<META...>
<META NAME="Language" CONTENT="pl">
informacja, jakiego języka używa się na stronie
<META NAME="Author" CONTENT=”Andrzej Bąk">
informacja o autorze strony
<META NAME="Generator" CONTENT="nazwa edytora">
informacja o używanym edytorze (zwykle wstawiana przez
producenta
<META HTTP-EQUIV="Refresh" CONTENT="x">
nakazanie odświeżania strony co x sekund (np. dla stron z
wiadomościami)
Formatowanie tekstu - PODSTAWY
<CENTER>umieszczenie tekstu na środku
strony</CENTER>
<P ALIGN=justify>nowy akapit</P>
nowa linia zaczyna się po <BR>
<HR>linia pozioma do oddzielenia tekstu i druga linia
pozioma<HR>
przykład …..
<HR> pozioma linia
<HR> może zawierać parametry
<HR COLOR=blue ALIGN=center SIZE=4 WIDTH=300>
ewentualnie
COLOR=#0000ff
Podstawowe kolory
navy blue teal aqua
black silver gray white
green lime olive yellow
maroon red purple fuchsia
Czcionki
Wybór rozmiaru czcionki dla nagłówka
<Hn>nagłówek</Hn>
n=1..6
Wybór rozmiaru, typu i koloru czcionki
<FONT SIZE=n FACE=„Arial” COLOR=white>
tekst napisany tą czcionką
</FONT>
n=1..7
COLOR= #FF0000
Może być podany (zmieniany) tylko jeden parametr.
Atrybuty czcionek
<B>pogrubiona</B>
<I>Italiki pochylone</I>
<U>tekst podkreślony</U>
<BLINK>migające litery</BLINK>
<STRIKE>przekreślona</STRIKE>
<SUP>indeks górny</SUP>
<SUB>indeks dolny</SUB>
<BIG>zwiększenie o +1</BIG>
<SMALL>zmniejszenie o -1</SMALL>
Obramowanie tekstu
<FIELDSET>
<LEGEND>tytuł ramki zwierzęta:</LEGEND>
lew <BR>
kornik <BR>
dżdżownica <BR>
żaba <BR>
</FIELDSET>
Wstawianie obiektów graficznych
<IMG SRC=„../images/andrzej.jpg” WIDTH=120
HEIGHT=160 BORDER=5 HSPACE=20
VSPACE=10>
najprostsza postać:
<IMG SRC=”nazwa.gif">
Lista nienumerowana
<UL>
<LI>pierwszy element listy</LI>
<LI>drugi wypunktowany element</LI>
<LI>trzeci element listy</LI>
</UL>
<!--koniec listy wypunktowanej-->
Lista numerowana
<OL>
<LI>pierwszy element listy</LI>
<LI>drugi wypunktowany element</LI>
<LI>trzeci element listy</LI>
</OL>
<!--koniec listy numerowanej-->
Opcje numerowania i wypunktowania
Numerowanie a) b) c).......A) B) C)
<OL type=a>..............</OL> type=A
Numerowanie I II III IV.....rzymskie...i ii iii
<OL type=I>..............</OL> type=i
kółeczka puste zamiast kropek
<UL type=circle>.......<UL>
(disc, circle, square - dysk, kółko, prostokąt)
Listy - Parametr START
Parametr START umożliwia rozpoczęcie
numeracji listy uporządkowanej od
określonego przez parametr numeru.
<OL start=5>
<LI>punkt jeden numerowany jako 5)
<LI>punkt dwa numerowany jako 6)
</OL>
Cytaty w tekście z wcięciem
<BLOCKQUOTE>
tu wpisujemy cytat, który chcemy aby był
wyświetlany z wcięciem (TAB) względem innego
tekstu
</BLOCKQUOTE>
Odsyłacze czyli „linki”
Odsyłacze zwane hiperłączami lub w slangu
komputerowym linkami są wskazaniem
innego miejsca do którego ma nas
zaprowadzić przeglądarka internetowa.
Link (hiperłącze), po kliknięciu, może
przenosić nas do innego miejsca na tej samej
stronie, lub do innej strony na zupełnie innym
serwerze, w innym kraju, a nawet na innym
kontynencie po drugiej stronie kuli ziemskiej.
Link na tej samej stronie
Link do wyróżnionego miejsca na stronie
link
<a href="#andrzej">tekst</a>
etykieta na stronie, do której prowadzi link
<a name=„andrzej">przeniesie mnie do tego
tekstu</a>
przykład
Link do innej strony lub
Link do dokumentu, lub innej strony internetowej
(PRZ)
<a href="http://www.prz.rzeszow.pl">Kliknij i odwiedź PRz</a>
Link do dokumentu tekstowego bądź do pliku
graficznego
<a href=„prz.jpg">link do obrazka</a>
<a href=”przykład.txt">link do pliku</a>
Link wysyłający e-mail
Aby wysłać e-mail ze strony internetowej np.
z komentarzem (mailto:)
<a href="mailto:[email protected]">kliknij i wyślij do mnie e-mail</a>
Można połączyć ze sobą kilka adresów
(znakiem? i &), a nawet wpisać Temat i
Początek wiadomości
<a href="mailto:[email protected][email protected]&
[email protected]&subject=e-mail z twojej strony
internetowej&body=Szanowny Panie,">kliknij i wyślij do mnie
więcej e-maili</a>
Link pod obrazkiem (banerem)
Aby umieścić link pod banerem, lub pod
obrazkiem, należy wpisać linię:
<a href="http://www.prz.rzeszow.pl">
<IMG src=prz.jpg></a>
Kilka linków na jednym obrazku
Należy podzielić obszar obrazka i podać
współrzędne obszarów dla
poszczególnych stron
<IMG SRC="odsylacz.gif " USEMAP="#mapa1">
<MAP NAME ="mapa1">
<AREA SHAPE=RECT COORDS="1, 1, 50, 50"
HREF="1.html">
<AREA SHAPE=RECT COORDS="51, 1, 100, 50"
HREF="2.html">
<AREA SHAPE=RECT COORDS="1, 51, 51, 100"
HREF="3.html">
<AREA SHAPE=RECT COORDS="51, 51, 100, 100"
HREF="4.html">
</MAP>
Ruchomy tekst <MARQUEE>
Do prostego animowania tekstu na stronie
WWW służy polecenie <MARQUEE>
<marquee behavior=alternate bgcolor=#cccccc
width=300> Tekst do animacji </marquee>
Parametry polecenia <MARQUEE>
behavior=[alternate, scroll] - sposób przesuwania tekstu
bgcolor=[nazwa_koloru, lub #ffff00 hex]
width=[300 - szerokość pola w pikselach - od lewej do prawej]
direction=[left, right - w lewo, w prawo - kierunek przesuwania
tekstu]
scrollamount=[5,20,80 - o ile pikseli ma skakać tekst przy
przesuwaniu (wolno, szybko)
scrolldelay=[1000 skok co 1 sekundę o (scrollamount)]
width=200 height=50 - wysokość i szerokość pola tekstowego
dla marquee
Umieszczanie plików multimedialnych na
stronie WWW
<EMBED src=”watermk.mid" border=0
width=100 height=50>
polecenie EMBED (osadź) można używać do
różnego typu plików multimedialnych: .avi, .mid,
.rm (audio), rmf, mp3, ...
Dźwięk w tle na stronie WWW:
<BGSOUND src=”watermk.mid" loop=infinite>
<!--gra ciągle w kółko-->
NOEMBED dla starszych typów
przeglądarek
<EMBED SRC=”watermk.mid">
<NOEMBED>Potrzebujesz Netscape Navigator
lub Internet Explorer aby to
usłyszeć</NOEMBED>
</EMBED>
Ramki (FRAMES)
<HTML>
<TITLE>Edytory HTML</TITLE>
<FRAMESET COLS="25%,*%">
<FRAME SCROLLING="auto" NAME=„ramka lewa"
SRC="spisedyt.htm">
<FRAME SCROLLING="yes" NAME=„ramka prawa" SRC="edyt.htm">
</FRAMESET>
<NOFRAMES>
<BODY>
gdy nie ma obsługi ramek pokaże się ten tekst
</BODY>
</NOFRAMES>
</HTML>
Ramki w okienkach
<HTML>
<TITLE>Edytory HTML</TITLE>
<BODY>
<IFRAME WIDTH=400 HEIGHT=400 NAME=„nazwa”
SRC=„ramki2.htm">Tekst dla przeglądarki, która nie
obsługuje takich ramek</IFRAME>
</BODY>
</HTML>
Formularz <FORM>
Formularz zawiera pola, które są wypełniane
informacjami - np. imię i nazwisko, zamawiany
towar, pola ankiety, test wyboru.
Polecenie <INPUT....>, z parametrami TYPE,
NAME i VALUE, służy do tworzenia pól, w które
czytelnik strony może wpisać informacje lub
wybrać opcje.
Przykład użycia formularza
<FORM
ACTION="mailto:[email protected]?subject=Ankieta na
temat wykładu"
METHOD="Post">
<--tutaj znajdują się pola opisane na następnych slajdach->
</FORM>
Proste pole tekstowe
Wpisz w ramkę imię i nazwisko
<BR><!--oznacza przejście do nowej linii-->
<INPUT NAME="nazwisko">
<BR>
Pola do zaznaczania opcji
Jakie znasz języki?<br>
<INPUT TYPE="checkbox" NAME="jezyk"
VALUE="angielski"> angielski
<br>
<INPUT TYPE="checkbox" NAME="jezyk"
VALUE="francuski"> francuski
<br>
Pola wyboru
Podaj swoją płeć<br>
<INPUT TYPE="radio" NAME="plec"
VALUE="kobieta"> Kobieta
<INPUT TYPE="radio" NAME="plec"
VALUE="mężczyzna" checked> Mężczyzna
<br><!--tylko jedno pole zwraca wartość-->
Menu z możliwością wyboru tylko jednej
pozycji
Co chcesz na obiad dzisiaj?<br>
<SELECT NAME="MENU">
<OPTION> frytki i kotlet
<OPTION> sałatka warzywna
<OPTION> ryba i ziemniaki
</SELECT>
<br>
Menu z możliwością wyboru wielu pozycji
Co chcesz na deser dzisiaj?
<SELECT NAME="DESER" MULTIPLE>
<OPTION>lody
<OPTION>ciastko
<OPTION>galaretka
<OPTION>kisiel
<OPTION>kawa
<OPTION SELECTED>herbata
</SELECT>
Pole na komentarz
<TEXTAREA NAME=„osobisty komentarz”> to co
ma pojawić się w polu tekstowym
</TEXTAREA>
określa pole o 40 kolumnach i 4 wierszach
Pole na komentarz z określoną liczbą
wierszy i kolumn
<TEXTAREA NAME="komentarz”
ROWS=20 COLS=40>
ta tabelka ma 20 wierszy i 40 kolumn
wpisz coś o sobie, co lubisz?
</TEXTAREA>
Przycisk do wysłania formularza
Aby przesłać wszystkie informacje zawarte w
wypełnionych polach należy zdefiniować
przycisk. Po uaktywnieniu tego przycisku
nastąpi wysłanie poczty z domyślnego klienta
poczty.
Naciśnij przycisk, aby wysłać ankietę<br>
<INPUT TYPE="submit" VALUE="Wyślij informacje zawarte w
ankiecie">
<br>
Tabele
Tabela zawarta jest pomiędzy
<TABLE> <!--tabelka--> </TABLE>
służy do graficznego przedstawiania wyników lub
do porządkowania obiektów na stronie
WWW (grafika)
Wiersze tabeli
<TABLE>
<TR> wiersz pierwszy </TR>
<TR> wiersz drugi
</TR>
<TR>wiersz trzeci
</TR>
</TABLE>
Komórki tabeli w wierszach
<TD> komórka </TD>
przykład: (elementy macierzy 3x3)
<TABLE>
<TR> <TD>a11</TD> <TD>a12</TD> <TD>a13</TD> </TR>
<TR> <TD>a21</TD> <TD>a22</TD> <TD>a23</TD> </TR>
<TR> <TD>a31</TD> <TD>a32</TD> <TD>a33</TD> </TR>
</TABLE>
Obramowanie tabeli
Parametr BORDER=n - obramowanie
zewnętrzne tabeli
Parametr CELLSPACING=n - obramowanie
komórek tabeli od wewnątrz
Parametr CELLPADDING=n - odstęp między
zawartością komórki, a obramowaniem
Przykład:
<TABLE border=5 cellspacing=10 cellpadding=30> tabelka </TABLE>
Szerokość Tabeli
Parametr WIDTH=
w % - wtedy rozmiar tabeli dostosuje się do
rozdzielczości ekranu
w pikselach np. 400 pikseli odpowiada wartości
50% przy rozdzielczości 800x600
Przykład:
<TABLE WIDTH=50%> tabela </TABLE>
Szerokość komórki
Można zmieniać też szerokość wnętrza
komórki, parametrem WIDTH=n, gdzie n to
ilość pikseli.
Wystarczy wpisać parametr tylko w jednym
wierszu, a szerokość komórek zmieni się dla
całej kolumny.
Przykład:
<TD width=100> zawartość komórki </TD>
Parametr tabeli ALIGN
Podobnie jak grafikę (zdjęcia) można
ustawiać tabelę względem krawędzi strony.
Parametr ALIGN może przyjmować znane
nam wartości right (wyrównanie do prawej
krawędzi strony), left (wyrównanie do lewej
krawędzi), center (wyrównanie do środka
strony całej tabeli)
Przykład:
<TABLE border align=center> tabelka na środku </TABLE>
Arkusze stylów
CSS - (Cascading Style Sheets) to
uzupełnienie języka HTML, ułatwiające
formatowanie dokumentów internetowych
Styl to zespół kodów formatujących tekst
W czerwcu 1998 po raz pierwszy
zaprezentowano specyfikację standardu
CSS2
Style mogą być wprowadzane ręcznie jak
polecenia HTML. Niektóre edytory HTML
zawierają narzędzia do tworzenia CSS
Edytory HTML, które posiadają edytory
stylów CSS
Home Site
Pajączek 2000
Tiger 98
Dreamweaver
FrontPage
Ogólna postać polecenia stylu
selektor {cecha: wartość}
1-lub też 2<selektor STYLE=„cecha:wartość;cecha: wartość”>
selektor - jedno z poleceń np. <P> <TD> <LI>
<BODY> <H1> itp.
{cecha:wartość} to na przykład:
font-family: Times; color: blue; {..........};
font-size: 40pt
przykład wywołania postaci 2
<OL style=„font-family: Times;color: red”>
Przykład wywołania postaci 1
<STYLE TYPE="text/css">
<!-BODY {margin-left: 1cm; margin-right: 1cm}
P {text-align:justify; font-size: 14pt; font-family:
Arial, Helvetica; font-weight: normal}
TD {font-size: 16pt; font-family: Arial, Helvetica; fontweight: normal}
H1 I {color:red}
P.zaznaczony {font-family: Times; font-size: 40pt; color:
red}
-->
</STYLE>
gdzieś dalej na stronie WWW
<P class=zaznaczony>ten akapit przyjmie format
specjalny</P>
Wywoływanie arkuszy stylów z pliku lub z
danego url
<style>
<!-@import
url("http://www.mojastrona.pl/folder/style/nazwast.css");
H1 {font-size: 30pt; font-family: Helvetica}
-->
</style>