Zakładanie konta internetowego
Pierwszym krokiem przy zakładaniu domeny jest wybór serwera na którym chcielibyśmy mieć założone konto.
Serwery charakteryzują się następującymi parametrami:
- pojemnością
- rodzajem i ilością obsługiwanych języków programowania
- rodzajem i ilością obsługiwanych baz danych
- transferem
W prowadzonych kursach wybrałem serwer znajdujący się na stronie WWW.prv.pl
Zakładanie strony internetowej
Uruchamiamy stronę WWW.prv.pl. Następnie wpisujemy adres serwera w przeglądarce internetowej i naciskamy klawisz „enter”.
Następnie wybieramy interesującą nas ofertę klikając na niej lewym przyciskiem myszy.
Po wybraniu oferty pojawi nam się następująca strona na której znajduje się przycisk zarejestruj się na który klikamy.
Zostanie wyświetlony formularz który należy wypełnić i nacisnąć lewym klawiszem myszy przycisk „Wyślij”. Po naciśnięciu powyższego przycisku powinno zostać wyświetlone następujące okno.
Wypełniony formularz zostanie wysłany na serwer i jeśli poprawnie wpisaliśmy swój adres mailowy w przeciągu kilku minut powinniśmy dostać wiadomość potwierdzającą poprawne wypełnienie formularza na skrzynkę mailową.
Otwieramy naszą skrzynkę mailową którą podaliśmy do formularza. W wiadomościach odebranych powinna zostać wyświetlona następująca wiadomość.
Otwieramy tą wiadomość a następnie spisujemy hasło i klikamy na poniższy link.
Zostanie wyświetlona następująca strona na której klikamy na ikonę załóż stronę.
W następnym oknie wybieramy ikonę „domena + hosting”. Pozwoli nam to na założenie oraz administrowanie własną stroną internetową.
Po kliknięciu na ikonie lewym przyciskiem myszy zostanie wyświetlony formularz który należy wypełnić i kliknąć lewym przyciskiem myszy na przycisku „rejestruj konto”.
Jeśli formularz zostanie prawidłowo wypełniony wówczas wyświetli nam się następujące okno z którego należy spisać domenę czyli nazwę naszej strony internetowej, adres serwera FTP, użytkownik.
Po uruchomieniu naszej strony internetowej powinien zostać wyświetlone następujące okno.
Total commander jako program do obsługi plików między klientem a serwerem
Total Commander to popularny, zaawansowany menadżer plików pod Windows. Program pozwala na wydajne operacje na plikach i drzewach katalogów; posiada 2-okienkowy interfejs. Posiada wbudowanego klienta ftp – tej funkcji użyjemy do kopiowania plików z naszego komputera na serwer oraz z serwera na nasz komputer.
Nawiązanie połączenia z naszą stroną przy użyciu programu „Total commander”
Uruchamiamy program Total commander. Powinno zostać wyświetlone następujące okno.
Klikamy na przycisku wyświetlającym tą samą cyfrę jaka jest wyświetlona w informacji powyżej.
Z górnego paska menu wybieramy net a następnie klikamy lewym przyciskiem myszy na pozycji o nazwie „Ftp connect”.
Zostanie wyświetlone następujące okno gdzie wybieramy „New connection”.
W oknie poniżej wpisujemy kolejno Session – dowolną nazwę, Host name – zapisany przez nas adres serwera FTP, user name – zapisaną przez nas nazwę użytkownika, password – zapisane przez nas hasło, zaznaczamy opcję „Use passive mode for transfers (like a WWW browser). Następnie klikamy lewym przyciskiem myszy na przycisku „ok.”.
Zostanie wyświetlone okno poniżej gdzie należy nacisnąć na przycisk „connect” żeby nawiązać połączenie.
Po nawiązaniu połączenia w lewym oknie pojawi się utworzone przez nas konto na serwerze które powinno zawierać plik „index.html” który jest uruchamiany jako strona główna naszej witryny internetowej natomiast w prawym oknie wyświetlana jest zawartość naszego komputera.
Uruchomienie naszej strony na serwerze lokalnym przy pomocy programu „krasnal”
Krasnal – program umożliwiający postawienie serwera na własnym – domowym komputerze.
Po uruchomieniu programu w lewym dolnym rogu ekranu powinna pojawić się ikona oznaczająca uruchomienie lokalnego serwera.
Przygotowanie dokumentu do pracy
Teraz w katalogu „C:\usr\apache\httpd\html” tworzymy nowy katalog o nazwie „WWW”, w tym katalogu tworzymy plik o nazwie „index.html”.
Następnie aby wyświetlić nasz plik „index.html” otwieramy przeglądarkę internetową i wpisujemy adres „localhost/www/index.html” dzięki czemu powinien zostać wyświetlony obraz naszej strony internetowej.
Żeby edytować nasz plik „index.html” należy otworzyć go przy pomocy notatnika. Zawartością tego pliku jest napisany kod, który będziemy modyfikować zgodnie z językiem html.
Język html
Język html - Dokumenty dostępne w sieci WWW, nazywane potocznie stronami internetowymi lub stronami WWW są zapisane w plikach tekstowych. Zawartość plików tekstowych możemy przeglądać i edytować niemal każdym edytorem, na przykład notatnikiem.
Znacznik
W skład języka html wchodzą znaczniki. Znacznik składa się z „<” „nazwy” oraz „>”.
Przykład znacznika otwierającego:
<body>
Razem ze znacznikiem otwierającym dokument musi również zawierać znacznik zamykający. Jego składnia jest następująca „<” „/” „nazwa” „>”.
Przykład znacznika zamykającego:
</body>
Struktura dokumentu html
Każdy dokument html posiada następującą strukturę.
<html>
<head>
</head>
</html>
Między znacznikami <head> i </head> należy umieszczać informacje o dokumencie, natomiast między znacznikami <body> i </body> umieszczamy treść dokumentu, zdjęcia, odsyłacze.
Uwaga.
Najważniejszym elementem (koniecznie go używaj!) jest tytuł strony, który ukazuje się w belce tytułowej przeglądarki. Aby wyświetlić tytuł należy użyć znaczników <TITLE></TITLE>
Przykład:
<title>Moja strona domowa</title>
Prolog
Często stosuje się w dokumentach WWW specjalny prolog, który identyfikuje poziom używanego języka HTML. Jest on wstawiany jako pierwszy element dokumentu, Jeszcze przed otwarciem szkieletu strony, czyli <HTML>. Prolog jest m.in. wykorzystywany jako oznaczenie poziomu w procesie weryfikacji poprawności składni za pomocą tzw. parserów.Jeśli dokument jest zgodny ze specyfikacją HTML 4.0, powinniśmy stosować prolog: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
Jeśli dokument jest zgodny z wcześniejszą specyfikacją HTML 3.2, powinniśmy stosować prolog: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
lub
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
Formatowanie czcionki
Następujące znaczniki wyświetlają czcionkę pogrubioną.
<B>jakas nazwa </B>
Następujące znaczniki wyświetlają czcionkę pochyloną.
<I>jakas nazwa </I>
Następujące znaczniki wyświetlają czcionkę migającą
<BLINK>jakas nazwa </BLINK>
Następujące znaczniki wyświetlają czcionkę podkreśloną
<U> jakas nazwa</U>
Następujące znaczniki wyświetlają czcionkę o stałej szerokości znaku
<TT>jakas nazwa</TT>
Następujące znaczniki wyświetlają czcionkę przekreśloną
<STRIKE>jakas nazwa</STRIKE>
Następujące znaczniki wyświetlają superskrypt (indeks górny)
<SUP>jakas nazwa</SUP>
Następujące znaczniki wyświetlają subskrypt (indeks dolny)
<SUB>jakas nazwa</SUB>
Następujące znaczniki wyświetlają dużą czcionkę (+1 punkt)
<BIG>jakas nazwa</BIG>
Następujące znaczniki wyświetlają małą czcionkę (-1 punkt)
<SMALL>jakas nazwa</SMALL>
Następujące znaczniki wyświetlają czcionkę mocno wyróżnioną
<STRONG>jakis tekst</STRONG>
Kolory czcionki
Dowolnemu fragmentowi tekstu można nadać kolor, obejmując go znacznikami koloru. Poniżej przedstawiamy listę 16 podstawowych barw stosowanych w dokumentach internetowych
<FONT COLOR="nazwa_koloru"> </FONT>
tekst próbny - black
tekst próbny - olive
tekst próbny - teal
tekst próbny - red
tekst próbny - blue
tekst próbny - maroon
tekst próbny - navy
tekst próbny - gray
tekst próbny - lime
tekst próbny - fuchsia
tekst próbny - green
tekst próbny - purple
tekst próbny – silver
tekst próbny - yellow
tekst próbny - aqua
Wielkość czcionki
Czcionka może mieć wielkość zależną od osoby redagującej dokument HTML. Wystarczy objąć fragment tekstu parą znaczników
<FONT SIZE="xx"> </FONT>.
Kolor tła
Parametr BGCOLOR="kolor" pozwala wybrać kolor tła dokumentu, który pokaże się w tle dokumentu w przeglądarce. Składnia wygląda następująco
<BODY BGCOLOR="yellow">
Tło jako obrazek
Parametr BACKGROUND="obrazek.gif" pozwala wybrać obrazek, który pokaże się w tle dokumentu w przeglądarce. (najlepiej, żeby się znajdował w tym samym katalogu co strona HTML) Ogólny wzór :
<BODY BACKGROUND="URL albo ścieżka/nazwa_pliku.gif">
...
kuciNEO