Wstęp do baz danych — język HTML Dr

Cele zajęć, program. Celem zajęć jest zaprezentowanie narzędzi do tworzenia oraz dostępu do baz

Internet i WWW n Wcześniejsza wersja sieci komputerów głównie placówek naukowych, rządowych - BITNET

Po co te informacje w Internecie? n n n Nauka i wymiana informacji naukowej

Przeglądarki Internetowe n n Programy, które mogą interpretować zakodowane strony WWW (język opisu strony

Co to jest HTML? n HTML ------ Hyper. Text Markup Language ------dosłownie język znaczników

Przykładowe edytory HTML n n Pajączek Macromedia Dreamweaver Microsoft Front. Page Dowolny edytor tekstowy

Komentarz HTML n <!-- pomiędzy tymi znakami możemy wstawić sobie dowolny komentarz, który nie

Tytuł mojej pierwszej strony" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-10.jpg" alt="Prosta strona internetowa <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250"> <TITLE> Tytuł mojej pierwszej strony" /></div> <div class="item"><img class="lazyOwl imgdescription" title="Polecenie <META. . . > <HEAD> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> </HEAD> lub <HEAD> <meta" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-11.jpg" alt="Polecenie <META. . . > <HEAD> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> </HEAD> lub <HEAD> <meta" /></div> <div class="item"><img class="lazyOwl imgdescription" title="<META. . . > <META NAME="Language" CONTENT="pl"> n informacja, jakiego języka używa się na" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-12.jpg" alt="<META. . . > <META NAME="Language" CONTENT="pl"> n informacja, jakiego języka używa się na" /></div> <div class="item"><img class="lazyOwl imgdescription" title="Formatowanie tekstu - PODSTAWY n <CENTER>umieszczenie tekstu na środku strony</CENTER> n <P ALIGN=justify>nowy akapit</P>" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-13.jpg" alt="Formatowanie tekstu - PODSTAWY n <CENTER>umieszczenie tekstu na środku strony</CENTER> n <P ALIGN=justify>nowy akapit</P>" /></div> <div class="item"><img class="lazyOwl imgdescription" title="<HR> pozioma linia n <HR> może zawierać parametry <HR COLOR=blue ALIGN=center SIZE=4 WIDTH=300> ewentualnie" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-14.jpg" alt="<HR> pozioma linia n <HR> może zawierać parametry <HR COLOR=blue ALIGN=center SIZE=4 WIDTH=300> ewentualnie" /></div> <div class="item"><img class="lazyOwl imgdescription" title="Podstawowe kolory navy blue teal aqua black silver gray white green lime olive yellow" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-15.jpg" alt="Podstawowe kolory navy blue teal aqua black silver gray white green lime olive yellow" /></div> <div class="item"><img class="lazyOwl imgdescription" title="Czcionki n Wybór rozmiaru czcionki dla nagłówka <Hn>nagłówek</Hn> n=1. . 6 n Wybór rozmiaru," src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-16.jpg" alt="Czcionki n Wybór rozmiaru czcionki dla nagłówka <Hn>nagłówek</Hn> n=1. . 6 n Wybór rozmiaru," /></div> <div class="item"><img class="lazyOwl imgdescription" title="Atrybuty czcionek n n n n n <B>pogrubiona</B> <I>Italiki pochylone</I> <U>tekst podkreślony</U> <BLINK>migające litery</BLINK>" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-17.jpg" alt="Atrybuty czcionek n n n n n <B>pogrubiona</B> <I>Italiki pochylone</I> <U>tekst podkreślony</U> <BLINK>migające litery</BLINK>" /></div> <div class="item"><img class="lazyOwl imgdescription" title="Obramowanie tekstu <FIELDSET> <LEGEND>tytuł ramki zwierzęta: </LEGEND> lew <BR> kornik <BR> dżdżownica <BR> żaba" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-18.jpg" alt="Obramowanie tekstu <FIELDSET> <LEGEND>tytuł ramki zwierzęta: </LEGEND> lew <BR> kornik <BR> dżdżownica <BR> żaba" /></div> <div class="item"><img class="lazyOwl imgdescription" title="Wstawianie obiektów graficznych <IMG SRC=„. . /images/andrzej. jpg” WIDTH=120 HEIGHT=160 BORDER=5 HSPACE=20 VSPACE=10> najprostsza" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-19.jpg" alt="Wstawianie obiektów graficznych <IMG SRC=„. . /images/andrzej. jpg” WIDTH=120 HEIGHT=160 BORDER=5 HSPACE=20 VSPACE=10> najprostsza" /></div> <div class="item"><img class="lazyOwl imgdescription" title="Lista nienumerowana <UL> <LI>pierwszy element listy</LI> <LI>drugi wypunktowany element</LI> <LI>trzeci element listy</LI> </UL> <!--koniec" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-20.jpg" alt="Lista nienumerowana <UL> <LI>pierwszy element listy</LI> <LI>drugi wypunktowany element</LI> <LI>trzeci element listy</LI> </UL> <!--koniec" /></div> <div class="item"><img class="lazyOwl imgdescription" title="Lista numerowana <OL> <LI>pierwszy element listy</LI> <LI>drugi wypunktowany element</LI> <LI>trzeci element listy</LI> </OL> <!--koniec" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-21.jpg" alt="Lista numerowana <OL> <LI>pierwszy element listy</LI> <LI>drugi wypunktowany element</LI> <LI>trzeci element listy</LI> </OL> <!--koniec" /></div> <div class="item"><img class="lazyOwl imgdescription" title="Opcje numerowania i wypunktowania Numerowanie a) b) c). . . . A) B) C)" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-22.jpg" alt="Opcje numerowania i wypunktowania Numerowanie a) b) c). . . . A) B) C)" /></div> <div class="item"><img class="lazyOwl imgdescription" title="Listy - Parametr START umożliwia rozpoczęcie numeracji listy uporządkowanej od określonego przez parametr numeru." src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-23.jpg" alt="Listy - Parametr START umożliwia rozpoczęcie numeracji listy uporządkowanej od określonego przez parametr numeru." /></div> <div class="item"><img class="lazyOwl imgdescription" title="Cytaty w tekście z wcięciem <BLOCKQUOTE> tu wpisujemy cytat, który chcemy aby był wyświetlany" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-24.jpg" alt="Cytaty w tekście z wcięciem <BLOCKQUOTE> tu wpisujemy cytat, który chcemy aby był wyświetlany" /></div> <div class="item"><img class="lazyOwl imgdescription" title="Odsyłacze czyli „linki” n n Odsyłacze zwane hiperłączami lub w slangu komputerowym linkami są" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-25.jpg" alt="Odsyłacze czyli „linki” n n Odsyłacze zwane hiperłączami lub w slangu komputerowym linkami są" /></div> <div class="item"><img class="lazyOwl imgdescription" title="Link na tej samej stronie Link do wyróżnionego miejsca na stronie link <a href="#andrzej">tekst</a>" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-26.jpg" alt="Link na tej samej stronie Link do wyróżnionego miejsca na stronie link <a href="#andrzej">tekst</a>" /></div> <div class="item"><img class="lazyOwl imgdescription" title="Link do innej strony lub n Link do dokumentu, lub innej strony internetowej (PRZ)" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-27.jpg" alt="Link do innej strony lub n Link do dokumentu, lub innej strony internetowej (PRZ)" /></div> <div class="item"><img class="lazyOwl imgdescription" title="Link wysyłający e-mail n Aby wysłać e-mail ze strony internetowej np. z komentarzem (mailto:" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-28.jpg" alt="Link wysyłający e-mail n Aby wysłać e-mail ze strony internetowej np. z komentarzem (mailto:" /></div> <div class="item"><img class="lazyOwl imgdescription" title="Link pod obrazkiem (banerem) n Aby umieścić link pod banerem, lub pod obrazkiem, należy" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-29.jpg" alt="Link pod obrazkiem (banerem) n Aby umieścić link pod banerem, lub pod obrazkiem, należy" /></div> <div class="item"><img class="lazyOwl imgdescription" title="Kilka linków na jednym obrazku n Należy podzielić obszar obrazka i podać współrzędne obszarów" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-30.jpg" alt="Kilka linków na jednym obrazku n Należy podzielić obszar obrazka i podać współrzędne obszarów" /></div> <div class="item"><img class="lazyOwl imgdescription" title="Ruchomy tekst <MARQUEE> n Do prostego animowania tekstu na stronie WWW służy polecenie <MARQUEE>" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-31.jpg" alt="Ruchomy tekst <MARQUEE> n Do prostego animowania tekstu na stronie WWW służy polecenie <MARQUEE>" /></div> <div class="item"><img class="lazyOwl imgdescription" title="Parametry polecenia <MARQUEE> n n n n behavior=[alternate, scroll] - sposób przesuwania tekstu bgcolor=[nazwa_koloru," src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-32.jpg" alt="Parametry polecenia <MARQUEE> n n n n behavior=[alternate, scroll] - sposób przesuwania tekstu bgcolor=[nazwa_koloru," /></div> <div class="item"><img class="lazyOwl imgdescription" title="Umieszczanie plików multimedialnych na stronie WWW n n n <EMBED src=”watermk. mid" border=0 width=100" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-33.jpg" alt="Umieszczanie plików multimedialnych na stronie WWW n n n <EMBED src=”watermk. mid" border=0 width=100" /></div> <div class="item"><img class="lazyOwl imgdescription" title="NOEMBED dla starszych typów przeglądarek n <EMBED SRC=”watermk. mid"> <NOEMBED>Potrzebujesz Netscape Navigator lub Internet" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-34.jpg" alt="NOEMBED dla starszych typów przeglądarek n <EMBED SRC=”watermk. mid"> <NOEMBED>Potrzebujesz Netscape Navigator lub Internet" /></div> <div class="item"><img class="lazyOwl imgdescription" title="Ramki (FRAMES) <HTML> <TITLE>Edytory HTML " src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-35.jpg" alt="Ramki (FRAMES) Edytory HTML " />

Tekst" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-36.jpg" alt="Ramki w okienkach Edytory HTML

Formularz <FORM> n n Formularz zawiera pola, które są wypełniane informacjami - np. imię Formularz

Przykład użycia formularza <FORM ACTION= <--tutaj" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-38.jpg" alt="Przykład użycia formularza <--tutaj" /> Przykład użycia formularza <--tutaj znajdują się pola opisane na następnych slajdach->

Proste pole tekstowe Wpisz w ramkę imię i nazwisko

angielski angielski Pola do zaznaczania opcji Jakie znasz języki? angielski francuski

Pola wyboru Podaj swoją płeć <INPUT TYPE= Kobieta Kobieta Pola wyboru Podaj swoją płeć Kobieta Mężczyzna

" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-42.jpg" alt="Menu z możliwością wyboru tylko jednej pozycji Co chcesz na obiad dzisiaj?

" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-43.jpg" alt="Menu z możliwością wyboru wielu pozycji Co chcesz na deser dzisiaj?

Pole na komentarz <TEXTAREA NAME=„osobisty komentarz”> to co ma pojawić się w polu tekstowym Pole na komentarz to co ma pojawić się w polu tekstowym określa pole o 40 kolumnach i 4 wierszach

ta" src="http://present5.com/presentation/39d1b2acb90f94db2ed81cec2ea5f276/image-45.jpg" alt="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?

Przycisk do wysłania formularza n 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ę

Tabele Tabela zawarta jest pomiędzy

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> Wiersze tabeli

wiersz pierwszy wiersz drugi wiersz trzeci

Komórki tabeli w wierszach <TD> komórka </TD> przykład: (elementy macierzy 3 x 3) <TABLE> Komórki tabeli w wierszach komórka przykład: (elementy macierzy 3 x 3)

a 11	a 12	a 13
a 21	a 22	a 23
a 31	a 32	a 33

Obramowanie tabeli n n 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:

tabelka

Szerokość Tabeli n n Parametr WIDTH= w % - wtedy rozmiar tabeli dostosuje się do rozdzielczości ekranu w pikselach np. 400 pikseli odpowiada wartości 50% przy rozdzielczości 800 x 600 Przykład:

tabela

Szerokość komórki n n n 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: zawartość komórki

Parametr tabeli ALIGN n n n 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:

tabelka na środku

Arkusze stylów n n 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 CSS 2 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 n n n Home Site Pajączek 2000 Tiger 98 Dreamweaver Front. Page

Ogólna postać polecenia stylu selektor {cecha: wartość} 1 -lub też 2 selektor - jedno z poleceń np.

itp. n {cecha: wartość} to na przykład: font-family: Times; color: blue; {. . }; font-size: 40 pt przykład wywołania postaci 2

Przykład wywołania postaci 1 gdzieś dalej na stronie WWW

ten akapit przyjmie format specjalny

Wywoływanie arkuszy stylów z pliku lub z danego url