Wyklad10.ppt [tryb zgodności]

Podstawowe polecenia serwisu FTP
ftp adres – połącz z odległym komputerem
ftp theta.uj.edu.pl
Usługi sieciowe
open adres – połącz z odległym komputerem
Tworzenie stron WWW:
Język HTML
open theta.uj.edu.pl
user nazwa – zaloguj jako użytkownik nazwa
user zp
quit – zakończ sesję
Usługi sieciowe
Podstawowe polecenia serwisu FTP
dir – wylistuj zawartość aktualnej kartoteki odległego
komputera
• File Transfer Protocol – FTP
•Telnet
ldir – wylistuj zawartość aktualnej kartoteki swojego
komputera
• Zdalny pulpit
cd ścieżka– zmień kartotekę na odległym komputerze
• Serwisy pogawędkowe - chat
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
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 e-mail użytkownika.
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
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 [email protected]:/katalog/
Obsługa: jak ftp (nie ma poleceń mget, mput, ascii, bin)
Uruchamianie usługi Pulpit zdalny
Telnet
Protokół umożliwiający zdalną pracę na innej maszynie
Używa portu 23
Na komputerze, do którego mamy się dołączyć uruchomić
serwer usługi
Kliknij Start, następnie prawym klawiszem myszy
Mój komputer
Terminal
Zdalny
komputer
TCP
TCP
Rozpoczęcie sesji
telnet adres
telnet theta.if.uj.edu.pl
Wpisać nazwę użytkownika (login: zp123)
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
Obsługa klienta usługi Pulpit zdalny
Start ->Wszystkie programy ->Akcesoria ->
Komunikacja -> Pulpit Zdalny
Wpisać hasło: xxxxx
Zakończenie sesji
exit
SSH (Secure Shell)
Tworzenie witryn WWW
Następca telnetu
Jak to zrobić ?
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.
Język HTML
Używany przez wszystkie systemy superkomputerowe
Pulpit zdalny
Tworzymy strony WWW
Usługa systemu Windows pozwalająca na uzyskanie
pełnego dostępu do komputera, na którym uruchomiono
serwer Zdalnego Pulpitu
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
Zasady tworzenia dobrej strony WWW
Zasady tworzenia dobrej strony WWW
Wydajność
Układ strony powinien umożliwiać szybkie dotarcie do
wymaganej informacji
Strony powinny się szybko ładować
Ważne drobiazgi
Wpisz datę ostatniej aktualizacji
Zamieść swój adres e-mail
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
Typowe błędy
Migające napisy (blink)
Obrazki o małej liczbie kolorów, np. napisy, proste
elementy graficzne, schematy itp. zapiszemy w
formacie gif;
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ę
Zdjęcia, pejzaże i ilustracje prawdopodobnie
najlepiej będzie zapisać w formacie jpg lub png
Przejeżdżające napisy (scrolling) - męczące
Under construction – jak nie jesteś gotowy ze
swoją stroną, to jej nie pokazuj
Używaj obrazków o rozmiarach < 50 kB
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):
z
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,
z
ich modyfikacja jest wyjątkowo czasochłonna.
z
z
z
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.
Typowe błędy
Dodatkowe okienka
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
Jak to działa ?
Połączenia (linki) ogólnie znane
Wpisuj tylko połączenia tematyczne
Popup windows
Popup windows
Bannery
Denerwujący sposób reklamowania.
Popup windows
Popup windows
Może jeszcze bardziej denerwujące
są wyskakujące
okienka (popup windows)
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
z Start -> Panel sterowania ->Dodaj lub usuń
programy -> Dodaj/Usuń składniki
systemu Windows.
z 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
HTML – co to jest ?
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)
Potrzebne narzędzia, cd
Dodatki do istniejącego oprogramowania, np.
Word może zapisywać w formacie HTML.
Język HTML
czyli
Hyper Text Markup Language
Dowolna przeglądarka Internetu, np.:
Internet Explorer
Netscape Navigator
Opera
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
Mozilla Firefox
Możliwości języka HTML
Tworzenie dokumentu HTML
HTML umożliwia formatowanie tekstu, kreślenie
UWAGA: do pisania znaczników używajmy dużych
liter -> dokument HTML jest bardziej czytelny.
linii, dołączanie grafiki, dźwięków i filmów video.
Nie jest to dużo
Między znacznikami <HEAD> powinien się
znaleźć znacznik <TITLE> Tytuł strony</TITLE>
Rozszerzenia (DHTML, CSS, języki skryptowe)
Znaczniki (tagi)
Tworzenie dokumentu HTML
Znaczniki HTML – rozkazy pisane pomiędzy
znakami mniejszości (<) i większości (>).
Bardzo ważnym elementem strony WWW jest
informacja o stronie kodowej dokumentu.
Większość znaczników istnieje w dwóch
odmianach:
Zalecana strona kodowa to ISO-8859-2 czyli ISO
Latin 2. Informacja umieszczona jest w ramach
znaczników <HEAD> i wygląda następująco:
otwierającej: <słowo kluczowe>
i
zamykającej </słowo kluczowe>
<META http-equiv="content-type"
content="text/html; charset=iso-8859-2">
Znaczniki (tagi) – cd.
Przykład strony
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ą
Struktura dokumentu HTML
<HTML>
<HEAD>
Informacje nagłówkowe
</HEAD>
<BODY>
Treść dokumentu
..............
</BODY>
</HTML>
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-2">
<TITLE> Tytuł, który pojawi się w pasku u góry </TITLE>
</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>
..........
Przykład
<H1> Nagłówek 1</H1>
<H2> Nagłówek 2</H2>
Podstawowe elementy - tekst
Akapit (tekstu odsunięty od innych akapitów):
<P> tekst </P>
Przykład
<P> Akapit
pierwszy</P>
<P> Akapit drugi</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>.
Przykład
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
Rozmiar czcionki
Znacznik: <FONT SIZE=n> ... </FONT>, gdzie n
jest liczbą z zakresu od 1 do 7.
Przykład
Przykład
<P> Akapit <BR>
pierwszy</P>
<P> Akapit drugi</P>
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>
<font
<font
<font
<font
<font
<font
<font
size=1>Size1</font><br>
size=2>Size2</font><br>
size=3>Size3</font><br>
size=4>Size4</font><br>
size=5>Size5</font><br>
size=6>Size6</font><br>
size=7>Size7</font>
Kolor czcionki
Znacznik: <FONT COLOR=" ">...</FONT>
Znacznik: <BODY BGCOLOR=" " > </BODY>
Przykład
<font color=red>Czerwony</font><br>
<font color=blue>Niebieski</font>
Wyrównywanie tekstu
Parametr ALIGN w znacznikach <P>, <Head>.
<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>
Standardowy zestaw kolorów
Punktowanie i numerowanie
Lista wypunktowana:
Wstawianie grafiki
<IMG SRC=”nazwa_pliku_z_grafiką">
<UL>
<LI> temat 1
<LI> temat 2
<LI> . . . .
</UL>
IMG jest skrótem od Image (obraz),
SRC jest skrótem od Source (źródło).
Na przykład:
<IMG SRC=”kwiatek.gif">
Lista numerowana:
<OL>
<LI> punkt 1
<LI> punkt 2
<LI> . . . .
</OL>
Odsyłacze (linki)
Wstawianie grafiki – wyrównanie
Odsyłacz do dokumentu istniejącego w tym samym folderze:
Atrybut ALIGN
z parametrami: TOP, MIDDLE, LEFT, RIGHT:
<A HREF=”nazwa_pliku”> Tekst odsyłacza </A>
<IMG SRC=„gory.gif” ALIGN=RIGHT>
Przykład
<A HREF=”ala.htm”> Ala Masłowska</A>
Ala Masłowska
Odsyłacze dokumentów na innych komputerach
(serwerach):
Wstawianie grafiki – rozmiar
Parametry: WIDTH i HEIGHT:
<A HREF=”http://nazwa_komputera/dokument” >Tekst</A>
Przykład
<IMG SRC=„obrazek.gif” WIDTH="piksele lub procenty"
HEIGHT="piksele lub procenty">
Odsyłacz do dokumentu ala.htm na serwerze uoks.uj.edu.pl:
<A HREF=”http://uoks.uj.edu.pl/ala.htm”> Skocz tutaj </A>
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:[email protected]> wyślij do mnie
wiadomość </A>
Odsyłacz typu: FILE: znacznik:
<A HREF=FILE://nazwa_katalogu/dzwiek.wav>nazwa</A>
Wstawianie grafiki – krawędzie
Parametr BORDER (w pikselach)
Znacznik:
<IMG SRC=„kwiatek.jpg” BORDER=25>
Wstawianie grafiki – odstępy od tekstu
Tabele – krawędzie i wyrównanie
Krawędzie - parametr BORDER.
Parametr HSPACE i VSPACE (w pikselach).
Znacznik:
<IMG SRC=„kwiatek.jpg” HSPACE=30 VSPACE=40>
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>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</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>:
z WIDTH
(szerokość w pikselach lub procent
szerokości okna),
z ALIGN
(wyrównywanie do środka, do prawa – tak
samo jak dla grafiki),
z BGCOLOR
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>
(kolor tła tabeli).
Tabele – formatowanie, cd.
Parametry znacznika <TABLE> :
z BACKGROUND
(grafika zamiast koloru tła),
z CELLSPACING
(odległość między kolejnymi
wierszami i kolumnami – obramowania),
z CELLPADDING
(odległość w pikselach między
zawartością a jej krawędziami)
Przykład
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
Przykład
Tabele – nagłówki
Komórka nagłówkowa: znacznik: <TH> tekst </TH>,
Wiersz nagłówkowy: <TR><TH>Tekst1</TH><TH>
Tekst2</TH> ...</TR>
<tr>
<td align="right" width="141">Email:</td>
<td align="left" width="257">
<a href= "mailto:[email protected]">
[email protected]</a></td>
</tr>
Kolumna nagłówkowa: <TR><TD> Tekst1 </TD>
<TH> Tekst2</TH>...,</TR> <TR><TH>
Tekst3</TH><TD> Dane </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>
Przykład
<tr>
<td align="right" width="141">Strona www:</td>
<td align="left" width="257">
<a title="Strona www" target="_blank„
href="http://users.uj.edu.pl/~ufpostaw/">
http://users.uj.edu.pl/~ufpostaw/</a>
</td>
</tr>
Tabela (obiekt) centrowana na stronie
Ramki
Rozmiary ramek
<DIV ALIGN="center">
<Table border="1" width="35%" id=„Tabela1">
…………
</Table>
</DIV>
<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
Rozmiary ramek
Liczba i rozmiar kolumn w ramce
<FRAMESET cols="33%,33%,33%">
Rozmiar:
- w procentach – 33%
- w pikselach – 200
- w udziale pozostałym obszarze:
cols = <*,2*>
1/3 obszaru
2/3 obszaru
Liczba i rozmiar wierszy w ramce
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
<FRAMESET rows="33%,33%,33%">
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>
Ramki - otwieranie stron
Inne
Komentarz
<! ---Komentarz--- >
Spacja
&nbsp
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>
Członkowie grupy
Otworzy w ramce o nazwie main
Co za tydzień ?
Język skryptowy Java
CSS
Bezpieczeństwo w sieci
Szyfrowanie transmisji
Wirusy
Trojany