wst p do baz danych j zyk html
Download
Skip this Video
Download Presentation
Wstęp do baz danych - język HTML

Loading in 2 Seconds...

play fullscreen
1 / 58

Wstęp do baz danych - język HTML - PowerPoint PPT Presentation


  • 241 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Wstęp do baz danych - język HTML' - rashad


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
cele zaj program
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
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
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
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
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
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
Przykładowe edytory HTML
  • Pajączek
  • Macromedia Dreamweaver
  • Microsoft FrontPage
  • Dowolny edytor tekstowy np. Notatnik
komentarz html
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
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
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.
slide12
<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
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> pozioma linia
  • <HR> może zawierać parametry

<HR COLOR=blue ALIGN=center SIZE=4 WIDTH=300>

ewentualnie

COLOR=#0000ff

podstawowe kolory
Podstawowe kolory

navybluetealaqua

blacksilvergraywhite

greenlimeoliveyellow

maroonredpurplefuchsia

czcionki
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
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
Obramowanie tekstu

<FIELDSET><LEGEND>tytuł ramki zwierzęta:</LEGEND>

lew <BR>

kornik <BR>

dżdżownica <BR>

żaba <BR>

</FIELDSET>

wstawianie obiekt w graficznych
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
Lista nienumerowana

<UL>

<LI>pierwszy element listy</LI>

<LI>drugi wypunktowany element</LI>

<LI>trzeci element listy</LI>

</UL>

<!--koniec listy wypunktowanej-->

lista numerowana
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
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
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
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 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 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 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
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
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
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
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
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
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
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
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
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 <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
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
Proste pole tekstowe

Wpisz w ramkę imię i nazwisko

<BR><!--oznacza przejście do nowej linii-->

<INPUT NAME="nazwisko">

<BR>

pola do zaznaczania opcji
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
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
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
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
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
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
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
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
Wiersze tabeli

<TABLE>

<TR> wiersz pierwszy </TR>

<TR> wiersz drugi </TR>

<TR>wiersz trzeci </TR>

</TABLE>

kom rki tabeli w wierszach
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
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
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
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
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
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
Edytory HTML, które posiadają edytory stylów CSS
  • Home Site
  • Pajączek 2000
  • Tiger 98
  • Dreamweaver
  • FrontPage
og lna posta polecenia stylu
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
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; font-weight: 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
Wywoływanie arkuszy stylów z pliku lub z danego url

<style><[email protected] url("http://www.mojastrona.pl/folder/style/nazwast.css");H1 {font-size: 30pt; font-family: Helvetica}-->

</style>

ad