Podstawowe polecenia serwisu FTP. Usługi sieciowe Tworzenie stron WWW: Podstawowe polecenia serwisu FTP. Usługi sieciowe

Transkrypt

1 Podstawowe polecenia serwisu FTP ftp adres połącz z odległym komputerem Usługi sieciowe Tworzenie stron WWW: Język HTML ftp theta.uj.edu.pl open adres połącz z odległym komputerem open theta.uj.edu.pl user nazwa zaloguj jako użytkownik nazwa user zp quit zakończ sesję Usługi sieciowe File Transfer Protocol FTP Telnet Zdalny pulpit Serwisy pogawędkowe - chat Podstawowe polecenia serwisu FTP dir wylistuj zawartość aktualnej kartoteki odległego komputera ldir wylistuj zawartość aktualnej kartoteki swojego komputera cd ścieżka zmień kartotekę na odległym komputerze lcd ścieżka zmień kartotekę na lokalnym komputerze lub wypisz ścieżkę do aktualnej kartoteki na lokalnym komputerze ascii przesyłanie zbiorów tekstowych bin przesyłanie zbiorów binarnych FTP File Transfer Protocol Protokół Transmisji Zbiorów System przesyłania plików pomiędzy klientem a serwerem Klienci FTP, np: Internet Explorer Cute FTP FTP Explorer Windows Commander Podstawowe polecenia serwisu FTP put nazwa prześlij zbiór o nazwie nazwa na odległy komputer mput nazwa prześlij zbiory nazwa (nazwa może być łączona z * lub?) prompt przełącz mod interaktywny wł/wył get nazwa ściągnij zbiór nazwa na lokalny komputer mget nazwa ściągnij zbiory nazwa na lokalny komputer Korzystanie z serwisu FTP Do zalogowania się do systemu potrzebna jest znajomość adresu komputera, nazwy użytkownika oraz hasła Wiele ogólnodostępnych serwerów udostępnia publiczne konto o nazwie anonymous, do korzystania z którego nie jest wymagane hasło. Do celów statystycznych, serwery anonimowego FTP proszą o podanie adresu użytkownika. Serwis SFTP Secure File Transfer Protocol System szyfrowanego przesyłania plików pomiędzy klientem a serwerem Wywołanie: sftp adres sftp theta.if.uj.edu.pl lub sftp uzytkownik@theta.uj.edu.pl:/katalog/ Obsługa: jak ftp (nie ma poleceń mget, mput, ascii, bin)

2 Telnet Protokół umożliwiający zdalną pracę na innej maszynie Używa portu 23 Uruchamianie usługi Pulpit zdalny Na komputerze, do którego mamy się dołączyć uruchomić serwer usługi Terminal TCP Zdalny komputer TCP Kliknij Start, następnie prawym klawiszem myszy Mój komputer W menu podręcznym kliknij Właściwości Na karcie Zdalny zaznacz pole wyboru Zezwalaj użytkownikom na zdalne łączenie się z tym komputerem Rozpoczęcie sesji telnet adres telnet theta.if.uj.edu.pl Wpisać nazwę użytkownika (login: zp123) Obsługa klienta usługi Pulpit zdalny Start ->Wszystkie programy ->Akcesoria -> Komunikacja -> Pulpit Zdalny Wpisać hasło: xxxxx exit Zakończenie sesji SSH (Secure Shell) Następca telnetu SSH różni się od telnetu tym, że transfer wszelkich danych jest zaszyfrowany, oraz możliwe jest rozpoznawanie użytkownika na wiele różnych sposobów. Tworzenie witryn WWW Jak to zrobić? Język HTML Używany przez wszystkie systemy superkomputerowe Pulpit zdalny Usługa systemu Windows pozwalająca na uzyskanie pełnego dostępu do komputera, na którym uruchomiono serwer Zdalnego Pulpitu Tworzymy strony WWW Najpierw należy zastanowić się nad strukturą i organizacją strony Ułatwia administrowanie siecią Umożliwia pełny dostęp do komputera w pracy z dowolnego miejsca, np. z domu

3 Zasady tworzenia dobrej strony WWW Wydajność Układ strony powinien umożliwiać szybkie dotarcie do wymaganej informacji Strony powinny się szybko ładować Zasady tworzenia dobrej strony WWW Ważne drobiazgi Wpisz datę ostatniej aktualizacji Zamieść swój adres Jeżeli oferujesz swoim gościom pliki do ściągnięcia, skompresuj je, zawsze zaznaczając ich wielkość w kilobajtach oraz ich format Przygotuj zawartość swojej strony w wersji gotowej do wydruku Zasady tworzenia dobrej strony WWW Prosta i zrozumiała struktura logiczna Typowe błędy Teksturowe, nieczytelne tła Może wygląda to ładnie, ale... Zasady tworzenia dobrej strony WWW Grafika Obrazki o małej liczbie kolorów, np. napisy, proste elementy graficzne, schematy itp. zapiszemy w formacie gif; Zdjęcia, pejzaże i ilustracje prawdopodobnie najlepiej będzie zapisać w formacie jpg lub png Używaj obrazków o rozmiarach < 50 kb Migające napisy (blink) Typowe błędy Jeżeli chcesz przyciągnąć uwagę, użyj pogrubienia, zwiększ wielkość czcionki (ale nie za bardzo!) lub zmień kolor tekstu na bardziej wyróżniający się Przejeżdżające napisy (scrolling) - męczące Under construction jak nie jesteś gotowy ze swoją stroną, to jej nie pokazuj Animacje duże pliki, spowalnia ładowanie strony Zasady tworzenia dobrej strony WWW Używaj tabel, aby uzyskać precyzyjne ustawienie elementów na stronie Typowe błędy Mapy graficzne (imagemaps): przedłużają ładowanie strony, często dezorientują gości, którzy nie wiedzą w które miejsce należy kliknąć, odnośniki do odwiedzonych miejsc nie są zaznaczane innym kolorem, nie działają pod niektórymi przeglądarkami, ich modyfikacja jest wyjątkowo czasochłonna. Dużo efektywniejszą metodą jest pocięcie obrazka na kawałki używając programu graficznego i umieszczenie go w tabelce. Jeżeli już koniecznie potrzebujesz zastosować mapę, to bezwzględnie zamieść dodatkowe menu tekstowe.

4 Dodatkowe okienka Typowe błędy Czasami nie da się ich pominąć, bo sponsor wymaga, żeby słowo od niego zamieścić właśnie w ten sposób. Nie rób jeżeli nie musisz. Dźwięki Niewielki odsetek internautów ma włączone odgrywanie dźwięku. Zmuszasz innych, aby czekali na załadowanie zbędnego pliku Geneza języka HTML Konieczność stworzenia języka służącego do porozumiewania się w Internecie oraz tworzenia zasobów internetowych - stron WWW (World Wide Web) Język HTML (HyperText Markup Language) został stworzony w Szwajcarii (cztery języki urzędowe) przez programistów pracujących w laboratoriach badawczych CERN-u. HTML ma pełnić rolę języka Esperanto. Typowe błędy Połączenia (linki) ogólnie znane Wpisuj tylko połączenia tematyczne Popup windows Popup windows Bannery Denerwujący sposób reklamowania. Popup windows Może jeszcze bardziej denerwujące Popup windows są wyskakujące okienka (popup windows) Jak to działa? Informacja jest zapisywana przy pomocy rozkazów zwanych znacznikami (tagami) umieszczanych w nawiasach kątowych < >. Jeśli dotyczą fragmentu tekstu to występują w postaci pary obejmującej ten tekst, np.: <B> ten tekst będzie widać jako wytłuszczony </B> Uruchomienie serwera WWW na komputerze domowym Załadować IIS z krążka instalacyjnego Windows Start -> Panel sterowania ->Dodaj lub usuń programy -> Dodaj/Usuń składniki systemu Windows. Pojawi się okno kreatora składników systemu Windows. Zaznacz Microsoft Internet Information Server Uruchomić serwer (Uruchom->inetmgr) Stworzyć stronę startową o nazwie index.htm i umieścić w katalogu c:/inetpub/wwwroot Potrzebna narzędzia Edytor tekstu: (notepad, notatnik, Word, Word Perfect, Lotus AmiPro etc.,) może być wykorzystany jako edytor języka HTML (zalety małe rozmiary plików, możliwość kontroli składni), Specjalistyczne programy: Home Site 5.0, 1st Page 2000 (2.0), Hot Dog Pro 6.6, Zajączek (2.2), Ace HTML 5.05, Kicia 4.0, ezhtml 2.0, FrontPage, Front Page Express, Webmajster, Pajączek 2000 (4.8.1) (Power Chip Tip 2002) HTML co to jest? Język HTML czyli Hyper Text Markup Language Język do tworzenia dokumentów, które po umieszczeniu na serwerze WWW będą dostępne dla użytkowników Internetu na całym świecie jako strony (witryny) WWW Potrzebne narzędzia, cd Dodatki do istniejącego oprogramowania, np. Word może zapisywać w formacie HTML. Dowolna przeglądarka Internetu, np.: Internet Explorer Netscape Navigator Opera Mozilla Firefox

5 Możliwości języka HTML HTML umożliwia formatowanie tekstu, kreślenie linii, dołączanie grafiki, dźwięków i filmów video. Nie jest to dużo Tworzenie dokumentu HTML UWAGA: do pisania znaczników używajmy dużych liter -> dokument HTML jest bardziej czytelny. Między znacznikami <HEAD> powinien się znaleźć znacznik <TITLE> Tytuł strony</title> Rozszerzenia (DHTML, CSS, języki skryptowe) Znaczniki (tagi) Znaczniki HTML rozkazy pisane pomiędzy znakami mniejszości (<) i większości (>). Większość znaczników istnieje w dwóch odmianach: otwierającej: <słowo kluczowe> i zamykającej </słowo kluczowe> Tworzenie dokumentu HTML Bardzo ważnym elementem strony WWW jest informacja o stronie kodowej dokumentu. Zalecana strona kodowa to ISO czyli ISO Latin 2. Informacja umieszczona jest w ramach znaczników <HEAD> i wygląda następująco: <META http-equiv="content-type" content="text/html; charset=iso "> Znaczniki (tagi) cd. Wiele znaczników posiada dodatkowe atrybuty (parametry). Atrybuty wpisywane są pomiędzy słowo kluczowe, a kończący znak większości <IMG SRC= gory.gif ALIGN=right > Atrybut Często można wpisać kilka atrybutów do jednego znacznika, pisząc je jeden po drugim i oddzielając spacją strony <HTML> <HEAD> <meta http-equiv="content-type" content="text/html; charset=iso "> <TITLE> Tytuł, który pojawi się w pasku u góry </TITLE> </HEAD> <BODY> Treść dokumentu </BODY> </HTML> Struktura dokumentu HTML <HTML> <HEAD> Informacje nagłówkowe </HEAD> <BODY> Treść dokumentu </BODY> </HTML> Formatowanie nagłówków <H1> Nagłówek główny (największy) </H1> <H2> Nagłówek drugiego poziomu </H2> <H3> Nagłówek trzeciego poziomu </H3> <H1> Nagłówek 1</H1> <H2> Nagłówek 2</H2>

6 Podstawowe elementy - tekst Akapit (tekstu odsunięty od innych akapitów): <P> Akapit pierwszy</p> <P> Akapit drugi</p> <P> tekst </P> Znak złamania linii (CR) jest ignorowany Style czcionki Powiększenie czcionki o dwa punkty: <BIG></BIG>, Pomniejszenie czcionki o dwa punkty: <SMALL></SMALL> Indeks górny: <SUP></SUP>, Indeks dolny: <SUB></SUB>. Tekst<BR> <BIG>Tekst</BIG><BR> <SMALL>Tekst</SMALL><BR> Tekst<SUB>2</SUB><SUP>7</SUP> Podstawowe elementy - tekst Zmiana linii wewnątrz akapitu: tekst <BR> nowa linia tekstu <P> Akapit <BR> pierwszy</p> <P> Akapit drugi</p> Rozmiar czcionki Znacznik: <FONT SIZE=n>... </FONT>, gdzie n jest liczbą z zakresu od 1 do 7. <font size=1>size1</font><br> <font size=2>size2</font><br> <font size=3>size3</font><br> <font size=4>size4</font><br> <font size=5>size5</font><br> <font size=6>size6</font><br> <font size=7>size7</font> Podstawowe elementy - tekst Formatowanie cech czcionki tekstu <B> ten tekst będzie wytłuszczony </B> <I> ten tekst będzie pochylony </I> <U> ten tekst będzie podkreślony </U> Kolor czcionki Znacznik: <FONT COLOR=" ">...</FONT> Znacznik: <BODY BGCOLOR=" " > </BODY> <font color=red>czerwony</font><br> <font color=blue>niebieski</font> Wyrównywanie tekstu Parametr ALIGN w znacznikach <P>, <Head>. Standardowy zestaw kolorów <P ALIGN=CENTER> </P> Wartościami tego parametru są słowa kluczowe: LEFT, CENTER, RIGHT, JUSTIFY <P ALIGN=CENTER> Akapit pierwszy</p> <P ALIGN=CENTER> Akapit drugi</p> Znacznik <CENTER> tekst </CENTER>

7 Punktowanie i numerowanie Lista wypunktowana: <UL> <LI> temat 1 <LI> temat 2 <LI>.... </UL> Lista numerowana: <OL> <LI> punkt 1 <LI> punkt 2 <LI>.... </OL> Wstawianie grafiki <IMG SRC= nazwa_pliku_z_grafiką"> IMG jest skrótem od Image (obraz), SRC jest skrótem od Source (źródło). Na przykład: <IMG SRC= kwiatek.gif"> Odsyłacze (linki) Odsyłacz do dokumentu istniejącego w tym samym folderze: <A HREF= nazwa_pliku > Tekst odsyłacza </A> Wstawianie grafiki wyrównanie Atrybut ALIGN z parametrami: TOP, MIDDLE, LEFT, RIGHT: <IMG SRC= gory.gif ALIGN=RIGHT> <A HREF= ala.htm > Ala Masłowska</A> Ala Masłowska Odsyłacze dokumentów na innych komputerach (serwerach): <A HREF= >Tekst</A> Odsyłacz do dokumentu ala.htm na serwerze uoks.uj.edu.pl: <A HREF= > Skocz tutaj </A> Wstawianie grafiki rozmiar Parametry: WIDTH i HEIGHT: <IMG SRC= obrazek.gif WIDTH="piksele lub procenty" HEIGHT="piksele lub procenty"> Jeżeli podajemy w procentach, to przeglądarka sama przeskaluje obrazek zachowując proporcje Skocz tutaj Specjalne odsyłacze Adres poczty elektronicznej: znacznik <A HREF=mailto:zp@castor.if.uj.edu.pl> wyślij do mnie wiadomość </A> Wstawianie grafiki krawędzie Parametr BORDER (w pikselach) Znacznik: <IMG SRC= kwiatek.jpg BORDER=25> Odsyłacz typu: FILE: znacznik: <A HREF=FILE://nazwa_katalogu/dzwiek.wav>nazwa</A>

8 Wstawianie grafiki odstępy od tekstu Parametr HSPACE i VSPACE (w pikselach). Znacznik: <IMG SRC= kwiatek.jpg HSPACE=30 VSPACE=40> Tabele krawędzie i wyrównanie Krawędzie - parametr BORDER. Znacznik: <TABLE BORDER=2> Opis tabeli: <CAPTION> opis </CAPTION>. Opis jest wyśrodkowany i umieszczony nad tabelą. Znacznik w formie: <CAPTION ALIGN=bottom> wyświetla opis pod tabelą. Grafika - odsyłacze Grafika może być odsyłaczem. Znacznik: <A HREF= plik.htm ><IMG SRC= kwiatek.jpg > </A>. Obrazek jako odsyłacz zostaje wyróżniony obwódką, którą można usunąć, korzystając z opcji BORDER=0. Tabela <Table border="1" width="30%" > <Caption>Podpis tabeli</caption> <tr> </tr> <tr> </tr> </Table> Grafika w tle <BODY BACKGROUND= nazwa_zbioru_z_grafiką >. Jeśli obrazek nie pokrywa całej strony, to zostanie on powielony tak, aby pokrył całą stronę Tabele formatowanie Parametry znacznika <TABLE>: WIDTH (szerokość w pikselach lub procent szerokości okna), ALIGN (wyrównywanie do środka, do prawa tak samo jak dla grafiki), BGCOLOR (kolor tła tabeli). Tabele Definicja tabeli zawarta jest między znacznikami: <TABLE border = n >... </TABLE> gdzie n -szerokość linii siatki opis wiersza (ang. row ): <TR>... </TR> opis komórki danych w wierszu: <TD>... </TD> Tabele formatowanie, cd. Parametry znacznika <TABLE> : BACKGROUND (grafika zamiast koloru tła), CELLSPACING (odległość między kolejnymi wierszami i kolumnami obramowania), CELLPADDING (odległość w pikselach między zawartością a jej krawędziami)

9 Cellspacing a cellpading <Table border="0" width="86%" cellspacing="1" cellpadding="5"> Dopełnienie komórek = 5 Brak obwiedni i linii rozdzielających komórki Cellpadding Cellspacing Tabele nagłówki Komórka nagłówkowa: znacznik: <TH> tekst </TH>, Wiersz nagłówkowy: <TR><TH>Tekst1</TH><TH> Tekst2</TH>...</TR> Kolumna nagłówkowa: <TR><TD> Tekst1 </TD> <TH> Tekst2</TH>...,</TR> <TR><TH> Tekst3</TH><TD> Dane </TD>..., </TR> <tr> <td align="right" width="141"> </td> <td align="left" width="257"> <a href= "mailto:zp@castor.if.uj.edu.pl"> zp@castor.if.uj.edu.pl</a></td> </tr> Tabele przykład kodu <TABLE BORDER="1" WIDTH="35%"> <CAPTION ALIGN=bottom> <B><font color="#0000ff">lista ocen</font><font color="#ff00ff"></font></b> </CAPTION>. <TR><TH><P ALIGN="right">Nazwisko</TH><TH>Ocena</TH></TR> <TR> <TD align="right">zbigniew Postawa</TD> <TD align="center">5</td> </TR> <TR> <TD align="right">marek Safian</TD> <TD align="center">5</td> </TR> <TR> <TD align="right">mariola Zebra</TD> <TD align="center">5</td> </TR> </TABLE> <tr> <td align="right" width="141">strona www:</td> <td align="left" width="257"> <a title="strona www" target="_blank href=" </td> </tr> Tabela (obiekt) centrowana na stronie <DIV ALIGN="center"> <Table border="1" width="35%" id= Tabela1"> </Table> </DIV> Ramki Rozmiary ramek <frameset onload="" rows="57,*"> <frame name="naglowek" scrolling="no" src="header.htm" marginwidth="12" marginheight="10"> <frameset cols="186,*"> <frame name="contents" target="main" src="contents.htm"> <frame name="main" src="group_page_main.htm" target="_self"> </frameset> </frameset> Nazwy ramek Zbiory ze stronami

10 Rozmiary ramek Liczba i rozmiar kolumn w ramce <FRAMESET cols="33%,33%,33%"> Rozmiar: - w procentach 33% - w pikselach w udziale pozostałym obszarze: cols = <*,2*> 1/3 obszaru 2/3 obszaru Liczba i rozmiar wierszy w ramce <FRAMESET rows="33%,33%,33%"> Opcje parametru TARGET Opcje parametru TARGET =: _self ładuje dokument do tej samej ramki _top zastępuje całą stronę nową stroną wszystkie ramki zostaną usunięte _parent ładuje dokument do dokumentu nadrzędnego danej ramki _blank powoduje otwarcie nowego okna przeglądarki i wyświetlenie w nim strony Rozmiary ramek <HTML> <HEAD> <TITLE>A frameset document </TITLE> </HEAD> <FRAMESET cols="33%,33%,33%"> <FRAMESET rows="*,200"> <FRAME src="contents_of_frame1.html"> <FRAME src="contents_of_frame2.gif"> </FRAMESET> <FRAME src="contents_of_frame3.html"> <FRAME src="contents_of_frame4.html"> </FRAMESET> </HTML> Inne Komentarz <! ---Komentarz--- > Spacja &nbsp Ramki - otwieranie stron Program WebMajster <frame name="contents" target="main" src="contents.htm"> <frame name="main" src="group_page_main.htm" target="_self"> Wybranie połączenia w ramce contents otwiera strony w ramce main Wybranie połączenia w ramce main otwiera strony w ramce main Odsyłacze i ramki docelowe Aby wyświetlać zawartość odsyłaczy w poszczególnych ramkach, należy to zadeklarować w znaczniku <A HREF> używając parametru TARGET: <A HREF="nazwa.htm" TARGET="nazwa_ramki"> <A HREF="czlonkowie.htm" TARGET="main" Członkowie grupy> Co za tydzień? Język skryptowy Java CSS Bezpieczeństwo w sieci Szyfrowanie transmisji Wirusy Trojany Członkowie grupy Otworzy w ramce o nazwie main