Wstęp do baz danych - język HTML

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 •  •

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 navybluetealaqua blacksilvergraywhite greenlimeoliveyellow maroonredpurplefuchsia

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>

Lista numerowana <OL> <LI>pierwszy element listy</LI> <LI>drugi wypunktowany element</LI> <LI>trzeci element listy</LI> </OL>

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:abak@op.pl">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:abak@op.pl?cc=abak@onebox.com& bcc=abak@wenus.prz.rzeszow.pl&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>

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:abak@prz.edu.pl?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> <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>

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>  </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>

Wstęp do baz danych - język HTML