Kierunek: Przedmiot: Forma zajęć: Temat: Informatyka i Ekonometria Informatyka ekonomiczna Ćwiczenia Usługi sieciowe. Tworzenie serwisów internetowych. KORZYSTANIE Z USŁUG SIECIOWYCH Przesyłanie plików Protokół FTP Zasady przesyłania plików określone są przez protokół transferu plików (protokół FTP File Transfer Protocol). Protokół ten jest stosowany powszechnie w sieci Internet. Komunikacja pomiędzy dwoma komputerami odbywa się na zasadzie Klient-Serwer. Serwer FTP to komputer posiadający oprogramowanie zdolne rozpoznawać i realizować polecenia zdefiniowane w protokole. Użytkownik łączy się z serwerem FTP za pomocą specjalnego oprogramowania nazywanego klientem FTP. Transmisja danych (łącznie z hasłami) nie jest szyfrowana. Przykładowe operacje: open - otwarcie połączenia z serwerem, dir, ls - wyświetlenie zawartości bieżącego katalogu, get, recv - przesłanie pliku z serwera do komputera lokalnego, put, send - przesłanie pliku z komputera lokalnego do serwera, help,? - lista wszystkich dostępnych poleceń, close - zakończenie sesji FTP. 1
WS_FTP przykład programu pracującego jako klient FTP Określamy wartości w polach: Host Name - nazwa komputera, z którym chcemy się połączyć User ID - nazwa użytkownika. podajemy hasło użytkownika podanego w polu User ID (poprzednie okno) 2
Realizacja operacji przesyłania plików Komputery uczestniczące w operacji przesyłania plików Local System - system lokalny, Remote System - system odległy (system zdalny). Tryby przesyłania plików: ASCII - dla plików tekstowych, Binary - dla plików różnych od tekstowych (programy, pliki graficzne, *.doc, *.xls). Po przesłaniu pliku (plików) należy zamknąć sesję połączeniową (przycisk CLOSE). 3
POCZTA ELEKTRONICZNA - PROGRAM PINE pine = Program for Internet News and Email $ pine Menu główne:? HELP - Get help using Pine C COMPOSE MESSAGE- Compose and send a message I FOLDER INDEX - View messages in current folder L FOLDER LIST - Select a folder to view A ADDRESS BOOK - Update address book S SETUP - Configure or update Pine Q QUIT - Exit the Pine program wysyłanie poczty - Compose Message To: adres odbiorcy Cc: adresy osób otrzymujących kopię listu Attchment: pliki dołączone do wiadomości Subject: temat wiadomości ----- MESAGE TEXT ----- tekst wiadomości struktura adresu: nowakj@wizard.uek.krakow.pl odbiór poczty - Folder List INBOX - zawartość skrzynki pocztowej sent-mail - poczta wysłana saved-mesages - poczta zapamiętana 4
POCZTA ELEKTRONICZNA - PROGRAM MAIL wysyłanie poczty $ mail nowakj Subject: Zadanie z matematyki Janek, Jak zrobic zadanie z matematyki? ^D $ wysyłanie poczty do większej liczby odbiorców $ mail janek gosia krysia wysyłanie listu zapisanego w pliku $ mail krysia < list.txt 5
SERWISY INTERNETOWE - STRONY WWW (WORLD WIDE WEB - OGÓLNOŚWIATOWA PAJĘCZYNA) Strony WWW pozwalają na udostępnianie informacji różnego typu (tekstu, grafiki, dźwięku, animacji itd.). Informacje zamieszczone w systemie WWW mają postać hipertekstu (tekst zawierający odnośniki do innych zasobów sieci), Do korzystania z zasobów sieci niezbędne jest odpowiednie oprogramowanie - przeglądarki stron WWW (Internet Explorer, Opera, Netscape Navigator, Mozilla Firefox itd.). Udostępnianie serwisów internetowych odbywa się w trybie klient - serwer: serwer WWW program udostępniający strony WWW, klient - program wyświetlający pobrane strony (przeglądarka). Zasady określające sposób przesyłania strony zdefiniowane są w protokole HTTP (Hyper Text Transfer Protocol). 6
TWORZENIE STRON WWW Strony WWW definiowane są za pomocą języków opisu stron. Najpopularniejszym językiem tego typu jest język HTML (Hyper Text Markup Language). Zasady opisu stron w języku HTML: opis strony ma postać pliku tekstowego i zawiera: informacje tekstowe wyświetlane na stronie, instrukcje określające sposób wyświetlenie elementów strony WWW (tzw. znaczniki - ang. tags), odwołania do obiektów, które mają być umieszczone na stronie (grafika, aplety), odnośniki do innych zasobów. przeglądarka stron WWW interpretuje i wyświetla plik zawierający opis strony. Metody tworzenia stron WWW: poprzez bezpośrednią edycję plików w języku HTML, poprzez użycie edytorów stron WWW. 7
UDOSTĘPNIANIE STRONY HTML 1. określenie praw dostępu drwx--x--x (711) dla katalogu domowego użytkownika (np. nowakj), np. $ cd ~ $ chmod 711. 2. utworzenie w katalogu domowym użytkownika katalogu o nazwie public_html, np. $ mkdir public_html 3. określenie praw dostępu drwxr-xr-x (755) dla katalogu public_html, np. $ cd public_html $ chmod 755. 4. umieszczenie (skopiowanie lub przesłanie protokołem FTP) w katalogu public_html pliku (plików) strony. Plik, który ma być wyświetlany jako pierwszy powinien mieć nazwę index.html. 5. określenie praw dostępu -rwxr-xr-x (755) dla plików znajdujących się w katalogu public_html, np. $ cd ~ $ cd public_html $ chmod 755 * 6. przeglądanie utworzonej strony jest możliwe po wpisaniu adresu w postaci http://nazwa_serwera/~login_użytkownika/, np. http://ie.uek.krakow.pl/~nowakj/ 8
PODSTAWY JĘZYKA HTML Przykładowa strona w języku HTML (1) <!doctype html public "-//w3c//dtd html 4.01 transitional//en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <meta name="description" content="jest to strona testowa"> <title>formatowanie tekstu</title> </head> <body> <h1>nagłówek 1</h1> <h2>nagłówek 2</h2> <h3>nagłówek 3</h3> <h4>nagłówek 4</h4> <h5>nagłówek 5</h5> <h6>nagłówek 6</h6> Tekst normalny<br> <b>tekst pogrubiony</b><br> <i>tekst pochyły</i><br> <u>tekst podkreślony</u><br> <hr width="100%"> Poniżej znajduje się lista: <ul> <li>opcja 1</li> <li>opcja 2</li> <li>opcja 3</li> </ul> <hr width="100%"> Poniżej znajduje się lista numerowana: <ol> <li>element 1</li> <li>element 2</li> <li>element 3</li> </ol> <hr width="100%"> Wyrównanie do lewej strony <center>centrowanie</center> <div align= right >Wyrównanie do prawej strony</div> <hr width="100%"> </body> </html> 9
Przykładowa strona w języku HTML (2) 10
Znaczniki Identyfikacja poszczególnych elementów strony odbywa się na podstawie specjalnych znaczników. znacznik składa się z samej nazwy lub nazwy i listy odpowiednich atrybutów, znaczniki ujęte są w nawiasy trójkątne, większość elementów HTML posiada znacznik otwierający i zamykający, rozróżniamy znaczniki: o strukturalne, o informacyjne, o tekstowe, o listy, o tabel, o formularzy o pozostałe struktura znaczników: <znacznik atrybut1= wartość1 atrybut2= wartość2 > Zawartość </znacznik> np. <font color="green">to jest zielony tekst</font> 11
Deklaracja typu dokumentu Deklaracja typu dokumentu (ang. Document Type Definition) określa standard użytego na stronie języka opisowego. deklaracja typu musi się pojawić na samym początku strony, możliwe jest podanie adresu URL do zastosowanego DTD. Dla języka HTML w wersji 4.01 istnieją trzy różne wersje deklaracji DTD: <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> Strict DTD (ścisły), dla stron napisanych zgodnie z deklarowanym standardem i nie dopuszczający innych znaczników niż opisane w standardzie. <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> Transitional DTD (przejściowy), dla stron napisanych zgodnie z deklarowanym standardem 4.01 i dopuszczający inne znaczniki, np. niezalecane przez organizację W3C. <!doctype html public "-//w3c//dtd html 4.01 frameset//en" "http://www.w3.org/tr/html4/frameset.dtd"> Frames DTD (dla ramek), dla stron napisanych zgodnie z deklarowanym standardem i dopuszczający inne znaczniki - stosowany gdy strona zawiera ramki. 12
Znaczniki strukturalne budowa strony znacznik otwierający i zamykający dokument HTML: <html>... </html> znacznik otwierający i zamykający nagłówek strony: <head>... </head> znacznik otwierający i zamykający zawartość strony: <body>... </body> Przykładowo: <html> <head> <title>tytuł strony</title> </head> <body> To jest moja strona </body> </html> 13
Znaczniki informacyjne w nagłówku strony Znacznik meta - szczegółowa informacja o zawartości dokumentu. Atrybuty: http-equiv zmienne systemowe name zmienne użytkownika content zawartość zmiennej <meta http-equiv= content-type content=... > - rodzaj dokumentu i strona kodowa <meta name= author content=... > - autor dokumentu <meta name= keywords content=... > - słowa kluczowe reprezentujące treści zawarte w dokumencie <meta name= description content=... > - krótki opis zawartości dokumentu <title>...</title> - tytuł dokumentu np. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <meta name="keywords" content="koty, psy, porady, hodowla"> <meta name="author" content="jan Nowak"> <title>strona domowa Jana Nowaka</title> 14
Podstawowe znaczniki tekstowe - formatowanie tekstu <b>...</b> - pogrubienie tekstu, np. <b>tekst pogubiony</b> <i>...</i> - pochylenie tekstu, np. <i>tekst pochylony</i> <u>...</u> - podkreślenie tekstu, np. <u>tekst podkreślony</u> <center>...</center> - wyśrodkowanie tekstu, np. <center>tekst na środku strony</center> <p>...</p> - nowy akapit (paragraf) tekstu, np. <p>to jest oddzielny paragraf tekstu</p> <font face= nazwa czcionki >... </font> - określenie rodzaju wyświetlanej czcionki (np. Times New Roman, Courier, Arial, Verdana, Tahoma) <font face= Arial >Tekst pisany Arialem</font> Dodatkowe atrybuty znacznika <font>: color=... kolor czcionki size=... rozmiar czcionki (od 1 do 7) 15
Przykładowo: <font face= Arial color= red size= 5 > Duży czerwony napis pisany czcionką Arial </font> <h1>...</h1> - nagłówek tekstu pierwszego poziomu, np. <h1>rozdział 1</h1>... <h1>rozdział 2</h1> <h2>...</h2> - nagłówek tekstu drugiego poziomu, np. <h2>rozdział 1.1</h2>... <h2>rozdział 1.2</h2> <!--... --> - komentarz nie wyświetlany na stronie, np. <!-- to nie będzie widoczne podczas wyświetlenia strony--> <br> - znacznik końca wiersza <hr> - pozioma linia (używana najczęściej jako element rozdzielający fragmenty tekstu), np. <hr width= 80% > Łączenie znaczników Przykładowo kod: <p><b><u>adam</u></b> <font face= Arial > dziś ma </font><i>urodziny</i></p> 16
będzie wyglądać: Adam dziś ma urodziny Znaczniki list Lista wypunktowana: <ul> <li>punkt pierwszy</li> <li>punkt drugi</li> <li>punkt trzeci</li> </ul> dodatkowy atrybut znacznika <ul>: type=... kształt znaku wypunktowania (disc, circle, square) Lista ponumerowana: <ol> <li>element pierwszy</li> <li>element drugi</li> <li>element trzeci</li> </ol> dodatkowy atrybut znacznika <ol>: type=... styl numeracji listy (1 cyfry arabskie, A duże litery, a małe litery, I duże cyfry rzymskie, i małe cyfry rzymskie) 17
Odsyłacze do innych zasobów (HREF) Podstawowe pojęcia: Odsyłacz (odnośnik) - HREF - Hypertext Reference Hipertekst - tekst zawierający odsyłacze do innych zasobów Adres URL (Uniform Resource Locator) - Uniwersalny identyfikator zasobów Budowa adresu URL: protokół:// adres_serwera/katalog/plik protokół - metoda dostępu do zasobu (ftp, http, https, file) Przykłady adresów URL: http://ie.uek.krakow.pl/test/programy.html ftp://kinga.cyf-kr.edu.pl/mirror/spis.txt Znaczniki odsyłaczy <a href= http://.../plik.html >...</a> - odsyłacz do adresów absolutnych (np. http://ie.ae.krakow.pl/lista.html ), np. <a href= http://wizard.ae.krakow.pl/index.html >Wizard</a> <a href=...plik.html >...</a> - odsyłacz do adresów relatywnych (adres relatywny określa położenie pliku względem bieżącej strony, np. wydzialy.html,../biblioteka/opis.html ), np. <a href=../zadania.html >Zadania do zrobienia</a> 18
<a href="#nazwa">...</a> - odsyłacz do innych miejsc na tej samej stronie, np. <a href="#poczatek">początek strony</a> Uwaga ten odsyłacz wymaga zdefiniowania w dokumencie etykiety w postaci: <a name="poczatek"></a> <a href="mailto:adres_mailowy">...</a> - odsyłacz uruchamiający program pocztowy, np. <a href= mailto:nowakj@wp.pl >Napisz do mnie</a> odsyłacz w formie obrazu (pliku graficznego), np. <a href= http://www.uek.krakow.pl > <img src= images/uczelnia.jpg > </a> <a href="adres URL" target= _blank >...</a> - odsyłacz uruchamiający podany adres w nowym oknie przeglądarki, np. <a href= http://onet.pl target= _blank >Onet</a> Pliki graficzne (obrazy) w dokumentach HTML <img src= adres URL > - znacznik wstawiający na stronę plik graficzny (standardowe formaty plików to: gif, jpg, bmp, png) ze wskazanego miejsca, np. <img src="grafika/zdjecie1.jpg"> 19
dodatkowe atrybuty znacznika <img>: alt= tekst tekst pojawiający się zamiast obrazka jeżeli brak możliwości jego wyświetlenia (również tekst w dymku ), align=... - umiejscowienie grafiki (np. left, right,top itd.), width=... szerokość grafiki (w pikselach), height=... wysokość grafiki (w pikselach), vspace=... odległość grafiki od innych elementów (pionowa), hspace=... - odległość grafiki od innych elementów (pozioma), border=... wielkość otaczającej grafikę ramki (obramowania). Przykładowo: <img src="aparat.jpg" alt="zdjęcie - Kyocera Finecam S3R" align="left" width="90" height="75" vspace="5" hspace="30" border="3"> 20
Znaczniki tabel <table>... </table> - znaczniki definiujące tabelę <tr>... </tr> - znacznik definiujący wiersz <td>... </td> - znacznik definiujący komórkę (kolumnę) w wierszu dodatkowe atrybuty znacznika <table>: border=... wielkość obramowania tabeli, width=... szerokość tabeli (piksele lub procenty), height=... wysokość tabeli (piksele lub procenty), cellspacing=... odległość między komórkami, cellpadding=... marginesy dla komórek, align=... - wyrównanie tabeli, bgcolor=... - kolor tła tabeli. dodatkowe atrybuty znacznika <td>: align=... poziome wyrównanie danych w komórkach, valign=... pionowe wyrównanie danych w komórkach, width=... szerokość komórki, bgcolor=... kolor tła komórki, rowspan=... łączenie kilku komórek (pionowe), colspan=... łączenie kilku komórek (poziome). 21
Przykładowa tabela: <table border= 1 width="100%" align= center cellpadding= 5 height= 200 > <tr> <td align= right > Ala </td> <td align= center > Ewa </td> </tr> <tr> <td valign= top > Adam </td> <td valign= bottom > Jurek </td> </tr> <tr> <td colspan= 2 bgcolor= gray align= center > Roman </td> </tr> </table> 22
Kursy HTML dostępne w sieci http://webmaster.helion.pl/kurshtml/ http://algorytmy.pl/doc/xhtml/ http://www.kurshtml.boo.pl/ 23
Programy do tworzenia stron WWW Notatnik vi 24
Pajączek - http://www.pajaczek.pl Macromedia Dreamweaver - http://www.macromedia.com 25