Tworzenie stron WWW:

Język HTML

Usługi sieciowe

• File Transfer Protocol – FTP
• P2P
• Telnet
• Zdalny pulpit
• Serwisy pogawędkowe - chat

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

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

Do zalogowania się do systemu potrzebna jest

znajomość adresu komputera, nazwy użytkownika oraz

hasła

Z. Postawa, "Podstawy Informatyki II", 2009

Strona 1 z 21

Podstawowe polecenia serwisu FTP

ftp adres –

połącz z odległym komputerem

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

quit

– zakończ sesję

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

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 uzytkownik@theta.uj.edu.pl:/katalog/

Obsługa:

jak ftp (nie ma poleceń mget, mput, ascii, bin)

Z. Postawa, "Podstawy Informatyki II", 2009

Strona 2 z 21

P2P

Pier-to-pier – model komunikacji, w którym

obydwaj uczestniczy mają równe prawa służący do

wymiany plików w Internecie

1999 - Napster

P2P

Telnet

Protokół umożliwiający zdalną pracę na innej maszynie

Używa portu 23

Terminal

Zdalny

komputer

TCP

Rozpoczęcie sesji

telnet adres

telnet theta.if.uj.edu.pl

Wpisać nazwę użytkownika (login: zp123)

Wpisać hasło: xxxxx

exit

Zakończenie sesji

Z. Postawa, "Podstawy Informatyki II", 2009

Strona 3 z 21

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.

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

Ułatwia administrowanie siecią

Umożliwia pełny dostęp do komputera w pracy z

dowolnego miejsca, np. z domu

Uruchamianie usługi

Pulpit zdalny

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

Na komputerze, do którego mamy się dołączyć uruchomić

serwer usługi

Obsługa klienta usługi

Pulpit zdalny

Start

Wszystkie programy

Akcesoria

Komunikacja

Pulpit Zdalny

Z. Postawa, "Podstawy Informatyki II", 2009

Strona 4 z 21

Zasady tworzenia dobrej strony WWW

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

Grafika

Zasady tworzenia dobrej strony WWW

Używaj tabel, aby uzyskać precyzyjne ustawienie elementów

na stronie

Zasady tworzenia dobrej strony WWW

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

Ważne drobiazgi

Może wygląda to ładnie, ale ....

Typowe błędy

Teksturowe, nieczytelne tła

Z. Postawa, "Podstawy Informatyki II", 2009

Strona 6 z 21

Typowe błędy

Migające napisy (blink)

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

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.

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

Typowe błędy

Połączenia (linki) ogólnie znane

Wpisuj tylko połączenia tematyczne

Bannery

Denerwujący sposób reklamowania.

Może jeszcze bardziej denerwujące są wyskakujące

okienka (popup windows)

Popup windows

Z. Postawa, "Podstawy Informatyki II", 2009

Strona 7 z 21

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

umieścić w katalogu

c:/inetpub/wwwroot

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

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

(

yper

ext

arkup

anguage

) 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

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>

Z. Postawa, "Podstawy Informatyki II", 2009

Strona 8 z 21

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.

Dowolna przeglądarka Internetu, np.:

Internet Explorer
Netscape Navigator
Opera
Mozilla Firefox

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

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>

Z. Postawa, "Podstawy Informatyki II", 2009

Strona 9 z 21

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

Często można wpisać kilka atrybutów do jednego

znacznika, pisząc je jeden po drugim i oddzielając

spacją

<IMG SRC

=„gory.gif”

ALIGN=right >

Atrybut

Struktura dokumentu HTML

<HTML>

<HEAD>

Informacje nagłówkowe

</HEAD>

<BODY>

Treść dokumentu

. . . . . . . . . . . . . .

</BODY>

</HTML>

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>

Tworzenie dokumentu HTML

Bardzo ważnym elementem strony WWW jest

informacja o stronie kodowej dokumentu.

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:

<META http-equiv="content-type"

content="text/html; charset=iso-8859-2">

Z. Postawa, "Podstawy Informatyki II", 2009

Strona 10 z 21

Przykład strony

<HTML>

<HEAD>

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>

. . . . . . . . . .

<H1>

Nagłówek 1

</H1>

<H2>

Nagłówek 2

</H2>

Przykład

Podstawowe elementy - tekst

Akapit (tekstu odsunięty od innych akapitów):

<P>

tekst

</P>

<P>

Akapit

pierwszy

</P>

<P>

Akapit drugi

</P>

Przykład

Znak złamania linii (CR) jest ignorowany

Podstawowe elementy - tekst

Zmiana linii wewnątrz akapitu:

tekst

<BR>

nowa linia tekstu

<P> Akapit

<BR>

pierwszy</P>

<P> Akapit drugi</P>

Przykład

Z. Postawa, "Podstawy Informatyki II", 2009

Strona 11 z 21

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>

Wyrównywanie tekstu

Parametr

ALIGN

w znacznikach

<P>

<Head>

Wartościami tego parametru są słowa kluczowe:

LEFT

CENTER

RIGHT

JUSTIFY

Znacznik

tekst

</CENTER>

Akapit pierwszy

</P>

Akapit drugi

</P>

Style czcionki

Powiększenie czcionki o dwa punkty:

Pomniejszenie czcionki o dwa punkty:

Indeks górny:

Indeks dolny:

Tekst

<BR>

<BIG>

Tekst

</BIG><BR>

<SMALL>

Tekst

</SMALL><BR>

Tekst

<SUB>

</SUB><SUP>

</SUP>

Przykład

Rozmiar czcionki

Znacznik:

...

</FONT>

, gdzie

jest liczbą z zakresu od 1 do 7.

Size1

</font><br>

Size2

</font><br>

Size3

</font><br>

Size4

</font><br>

Size5

</font><br>

Size6

</font><br>

Size7

</font>

Przykład

Z. Postawa, "Podstawy Informatyki II", 2009

Strona 12 z 21

Kolor czcionki

Znacznik:

Znacznik:

Czerwony

</font><br>

Niebieski

</font>

Przykład

Standardowy zestaw kolorów

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>

Odsyłacze (linki)

Odsyłacz do dokumentu istniejącego w tym samym folderze:

<A HREF=”

nazwa_pliku

”>

Tekst odsyłacza

</A>

<A HREF=”

ala.htm

”>

Ala Masłowska

</A>

Ala Masłowska

Przykład

Z. Postawa, "Podstawy Informatyki II", 2009

Strona 13 z 21

Odsyłacze dokumentów na innych komputerach

(serwerach):

<A HREF=”

http://nazwa_komputera/dokument

” >

Tekst

</A>

Odsyłacz do dokumentu ala.htm na serwerze uoks.uj.edu.pl:

<A HREF=”

http://uoks.uj.edu.pl/ala.htm

”>

Skocz tutaj

</A>

Skocz tutaj

Przykład

Specjalne odsyłacze

Adres poczty elektronicznej: znacznik

<A HREF=mailto:

zp@castor.if.uj.edu.pl>

wyślij do mnie

wiadomość

</A>

Odsyłacz typu:

FILE:

znacznik:

<A HREF=FILE:

//nazwa_katalogu/dzwiek.wav>

nazwa

</A>

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

Wstawianie grafiki – wyrównanie

Atrybut

ALIGN

z parametrami:

TOP, MIDDLE, LEFT, RIGHT

<IMG SRC

=„gory.gif”

ALIGN=RIGHT>

Z. Postawa, "Podstawy Informatyki II", 2009

Strona 14 z 21

Wstawianie grafiki – rozmiar

Parametry:

WIDTH

HEIGHT

<IMG SRC

=„obrazek.gif”

WIDTH

="piksele lub procenty"

HEIGHT

="piksele lub procenty">

Jeżeli podjemy w procentach to przeglądarka sama

przeskaluje obrazek zachowując proporcje

Wstawianie grafiki – krawędzie

Parametr

BORDER

(w pikselach)

Znacznik:

<IMG SRC

=„kwiatek.jpg”

BORDER=25>

Wstawianie grafiki – odstępy od tekstu

Parametr

HSPACE

VSPACE

(w pikselach).

Znacznik:

<IMG SRC

=„kwiatek.jpg”

HSPACE=30 VSPACE=40>

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.

Z. Postawa, "Podstawy Informatyki II", 2009

Strona 15 z 21

Grafika w tle

Jeśli obrazek nie pokrywa całej strony, to zostanie

on powielony tak, aby pokrył całą stronę

Tabele

Definicja tabeli zawarta jest między znacznikami:

<TABLE border =

...

</TABLE>

gdzie

- szerokość linii siatki

opis wiersza (ang.”row”):

<TR> ... </TR>

opis komórki danych w wierszu:

<TD> ... </TD>

Tabele – krawędzie i wyrównanie

Krawędzie - parametr

BORDER

Znacznik:

Opis tabeli:

opis

</CAPTION>

. Opis jest

wyśrodkowany i umieszczony nad tabelą.

Znacznik w formie:

wyświetla opis pod tabelą.

Tabela

Podpis tabeli

</Caption>

<tr>

</tr>

<tr>

</tr>

</Table>

Z. Postawa, "Podstawy Informatyki II", 2009

Strona 16 z 21

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 – 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)

Cellspacing a cellpading

Cellpadding

Cellspacing

Tabele – nagłówki

Komórka nagłówkowa: znacznik:

<TH>

tekst

</TH>

Wiersz nagłówkowy:

Tekst1

</TH><TH>

Tekst2

</TH> ...</TR>

Kolumna nagłówkowa:

Tekst1

</TD>

<TH>

Tekst2

</TH>...,</TR> <TR><TH>

Tekst3

</TH><TD>

Dane

</TD>..., </TR>

Z. Postawa, "Podstawy Informatyki II", 2009

Strona 17 z 21

Tabele – przykład kodu

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

</TR>

<TR>

<TD align="right">Marek Safian</TD>

</TR>

<TR>

<TD align="right">Mariola Zebra</TD>

</TR>

</TABLE>

Tabela (obiekt) centrowana na stronie

…………

</Table>

</DIV>

Przykład

<Table border="0" width="86%"

cellspacing="1" cellpadding="5">

Dopełnienie komórek = 5

Brak obwiedni i linii rozdzielających komórki

Przykład

<tr>

<td align="right" width="141">Email:</td>

zp@castor.if.uj.edu.pl</a>

</td>

</tr>

Z. Postawa, "Podstawy Informatyki II", 2009

Strona 18 z 21

Przykład

<tr>

<td align="right" width="141">Strona www:</td>

<a title="Strona www" target="_blank„

href="http://users.uj.edu.pl/~ufpostaw/">

http://users.uj.edu.pl/~ufpostaw/</a>

</td>

</tr>

Ramki

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

Rozmiary ramek

Nazwy ramek

Zbiory ze stronami

Rozmiary ramek

<FRAMESET cols="

33%,33%,33%

Liczba i rozmiar kolumn w ramce

Rozmiar:

- w procentach – 33%

- w pikselach – 200

- w udziale pozostałym obszarze:

cols

= <*,2*>

1/3 obszaru

2/3 obszaru

<FRAMESET rows="

33%,33%,33%"

Liczba i rozmiar wierszy w ramce

Rozmiary ramek

<HTML> <HEAD> <TITLE>A frameset document </TITLE> </HEAD>

</FRAMESET>

</FRAMESET>

</HTML>

Z. Postawa, "Podstawy Informatyki II", 2009

Strona 19 z 21

Ramki - otwieranie stron

<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

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

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

Opcje parametru

TARGET =

Inne

Komentarz

---Komentarz---

&nbsp

Spacja

Z. Postawa, "Podstawy Informatyki II", 2009

Strona 20 z 21