tworzenie stron internetowych

I. Wprowadzenie do tworzenia stron internetowych.

1. W jaki sposób utworzyć stronę internetową?

Istnieje kilka sposobów tworzenia stron internetowych:

a) przy pomocy odpowiednich programów (edytory HTML)

b) ręcznie - używając programów podobnych do notatnika

c) używając szablonów z określonymi uprawnieniami (systemy CMS).

Moja pierwsza strona internetowa:

- otwórz program notatnik

- wpisz tekst: „Nazywam się ..... To jest moja pierwsza strona internetowa.”

- zapisz plik pod nazwą: index.html

2. W jaki sposób przegrać stronę na serwer?

Przegraj pierwszą stronę na nasz serwer.

W celu przegrania strony ściągnij program umożliwiający przegranie plików po protokole ftp zamieszczony w systemie - CoreFTP.

Poniżej zamieszczam konfiguracje programu:

0x01 graphic

Site Name: wpisujemy swoje imie i nazwisko

Host / IP/ URL: naukaprzezinternet.pl

Username: wpisujemy tak jak się logujemy

Password: hasło, takie samo jak do poczty elektronicznej

Pozostałe opcje powinny być zaznaczone tak jak na rysunku. Należy zwrócić uwagę, czy mamy zaznaczoną pozycję: AUTH TLS.

Po wpisaniu wszystkich parametrów klikamy Connect.

Przegrywanie plików na serwer:

Po udanym połączeniu będziemy mieli podobny wygląd jak poniżej na rysunku:

0x01 graphic

Po jednej stronie będziemy mieli pliki na naszym dysku, po drugiej okienko z plikami na serwerze.

Wpierw musimy utworzyć katalog na serwerze o nazwie: „public_html” (w celu utworzenia katalogu klikamy na żółtą ikonkę)

Następnie przechodzimy do tego katalogu i kopiujemy nasz plik nowy plik o nazwie: index.html

Uwaga:

Przed zamknięciem programu należy zawsze wpierw wylogować się z serwera, klikając na Rozłączenie połączenia (Disconnect). Program może się zawieszać, jeśli nie rozłączymy się przed całkowitym zamknięciem go.

Jeśli wszystko przebiegło zgodnie z planem możemy oglądnąć już naszą stronę. W tym celu uruchamiamy przeglądarkę (np. Internet Explorer) i wpisujemy adres :

http://www.naukaprzezinternet.pl/~naszlogin (jeszcze raz objaśniam co trzeba wpisać - znaczek „falki” znajduje się po lewej stronie klawiatury - jeszcze przed „1”, po postawieniu tego znaczka aby się pojawił na ekranie należy wcisnąć spację; za znaczkiem wprowadzamy naszlogin, czyli np. ipiotrjezierski)

II. Tworzenie stron z wykorzystaniem notatnika.

W poprzednim rozdziale w ćwiczeniu wpisaliśmy zwykły tekst: „Nazywam się ..... To jest moja pierwsza strona internetowa.” Został on wyświetlony w przeglądarce internetowej. Okazało się, że jest to zwykły plik tekstowy.

Zapoznajmy się z językiem HTML, który służy do opisu stron internetowych. Dla osób, które chciałyby nauczyć się więcej polecam kurs HTMLa zamieszczony na stronie:

http://webmaster.helion.pl/kurshtml/

Dla naszych potrzeb wystarczy zapoznać się z podstawowymi informacjami zawartymi na stronie:

http://webmaster.helion.pl/kurshtml/beginner/beginner.htm

oraz http://www.kurshtml.boo.pl/html/zielony.html

Jak wygląda plik htmlowski?

Wystarczy wejść na dowolną stronę internetową, kliknąć w przeglądarce prawym przyciskiem myszy i dalej wybrać: „Pokaż źródło”. Pokaże nam się dokument w języku HTML.

Plik HTMLa zawiera polecenia (ang. tags) objęte ostrymi nawiasami, np. <B> <META> itp.

Każde z poleceń ma określone znaczenie.

Cały dokument powinien być objęty parą znaczników <HTML> </HTML>. Między nimi powinna zaś się znaleźć para znaczników <HEAD> </HEAD>, która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny być objęte z kolei znacznikami <BODY> </BODY>. Wygląda to następująco:

0x01 graphic

<HTML>

<HEAD>informacje nagłówkowe</HEAD>

<BODY>

właściwa treść (ciało) dokumentu

</BODY>

</HTML>

0x01 graphic

Czyli nasza strona powinna wyglądać w ten sposób:

0x01 graphic

<HTML>

<HEAD></HEAD>

<BODY>

Nazywam się ..... To jest moja pierwsza strona internetowa.

</BODY>

</HTML>

0x01 graphic

Możemy pogrubić jakiś fragment tekstu:

0x01 graphic

<HTML>

<HEAD></HEAD>

<BODY>

Nazywam się <B>Piotr Jezierski.</B> To jest moja pierwsza strona internetowa.

</BODY>

</HTML>

0x01 graphic

Imię i nazwisko jest ujęte w znaczniki <B>, dzięki czemu ten fragment jest pogrubiony.

Uwaga:

Zauważmy, że prawie każdy znacznik ma swój początek np. <B> i koniec np. </B>.

Są oczywiście wyjątki, jak np. znacznik <BR> - przejście do następnej linii.

Spróbujmy w naszym ćwiczeniu dopisać kolejne wiersze:

0x01 graphic

<HTML>

<HEAD></HEAD>

<BODY bgcolor=”silver”>

<H1 align=”center”> <FONT color=”blue”>Moja strona internetowa</FONT></H1>

Nazywam się <B>Piotr Jezierski.</B> To jest moja pierwsza strona internetowa. <BR>

Pragnę przedstawić .....

</BODY>

</HTML>

0x01 graphic

<BODY bgcolor=”silver”> - określa srebrny kolor tła

<H1 align=”center”> - H1 - tytuł strony, align - wyrównywanie, center - sposób wyrównywania - na środek

<FONT color=”blue”> - określa rodzaj i kolor czcionki

<BR> - przejście do następnej linii

Możemy wstawić hiperłącze w naszym dokumencie:

0x01 graphic

<HTML>

<HEAD></HEAD>

<BODY bgcolor=”silver”>

<H1 align=”center”> <FONT color=”blue”>Moja strona internetowa</FONT></H1>

Nazywam się <B>Piotr Jezierski.</B> To jest moja pierwsza strona internetowa. <BR>

Pragnę przedstawić .....

<A href=http://www.naukaprzezinternet.pl>To jest strona mojej Szkoły</A>

</BODY>

</HTML>

0x01 graphic

Na końcu możemy wstawić swoje zdjęcie (uwaga: plik ze zdjęciem najlepiej umieścić w tym samym katalogu co plik index.html) :

0x01 graphic

<HTML>

<HEAD></HEAD>

<BODY bgcolor=”silver”>

<H1 align=”center”> <FONT color=”blue”>Moja strona internetowa</FONT></H1>

Nazywam się <B>Piotr Jezierski.</B> To jest moja pierwsza strona internetowa. <BR>

Pragnę przedstawić .....

<A href=http://www.naukaprzezinternet.pl>To jest strona mojej Szkoły</A>

<IMG src=”mojezdjecie.jpg”>

</BODY>

</HTML>

0x01 graphic

Oczywiście zamiast nazwy „mojezdjecie” wpisujemy nazwę pliku.

Wszystkich, którzy chcieliby zdobyć większą wiedzę na temat języka HTML odsyłam do kursów, do których linki zamieściłem na początku.