Wst p do baz danych j zyk html
Download
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
Wst p do baz danych j zyk html

Wstęp do baz danych- język HTML

Dr Andrzej Bąk


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.


Wst p do baz danych j zyk html
<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: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
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: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
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><!--@import url("http://www.mojastrona.pl/folder/style/nazwast.css");H1 {font-size: 30pt; font-family: Helvetica}-->

</style>