Ćwiczenie 2. Edukacja na odległość Obsługa konta WWW na serwerze Linuksowym Tworzenie portalu edukacyjnego o określonej, wybranej przez studenta tematyce naukowej. Cel ćwiczenia: Projektowanie strony czołowej portalu edukacyjnego. Poznanie zasad pracy z kontem na serwerze linuksowym oraz zdobycie umiejętności potrzebnych podczas uruchamiania strony WWW na serwerze. 1 Informacje wprowadzające Celem ćwiczenia jest przygotowanie głównej strony WWW, której zadaniem będzie poinformowanie zainteresowanych osób o treściowym charakterze portalu edukacyjnego. Będzie to pierwsza strona, którą ujrzy użytkownik zainteresowany portalem edukacyjnym. Powinna zawierać treści informacyjne i być zaopatrzona w stosowne odsyłacze w celu osiągnięcia maksymalnego uproszczenia w nawigacji. Uwaga: Strona nie powinna zawierać treści edukacyjnych, które zawarte będą w portalu edukacyjnym. Strona powinna być wykonana w języku HTML. 2 Zasady umieszczania stron internetowych na serwerze Apache Istnieję dwie metody pracy z plikami stron internetowych oraz z serwerem WWW. 1. Pliki stron internetowych tworzone są w stacji roboczej użytkownika, następnie przesyłane do serwera. Zaletą tej metody jest to, że użytkownik pracuje w znanym sobie systemie operacyjnym i może dowolnie korzystać z narzędzi tego systemu. Wadą metody jest każdorazowa konieczność wysłania pliku strony www po zmianie jego zawartości. W systemie Windows strony internetowe na potrzeby przedmiotu Edukacja na odległość tworzyć można w tym przypadku w programie Notatnik. Umieszczenia stron na serwerze dokonać można za pomocą różnych programów, z których najbardziej intuicyjny i bezpiecznym jest WinSCP. Program ten dostępny jest na stronie głównej serwera pracowni. 2. Druga metoda polega na pracy bezpośrednio na serwerze w powłoce BASH, korzystając z jej narzędzi do edycji plików, np. Edytor plików programu MC, systemowego edytora edit albo VIM. Zaletą tej metody jest to, że po kożdej zmianie zawartości pliku ze stroną www, nie ma konieczności wysyłania jej na serwer.
3 Repetytorium z języka HTML 3.1 Podstawowe elementy HTML - Szablon dokumentu <HTML> <HEAD>informacje nagłówkowe</head> <BODY> właściwa treść (ciało) dokumentu </BODY> </HTML> Pomiędzy znacznikami <HEAD></HEAD> powinny znajdować się informacje: <TITLE> tytuł strony </TITLE>, <META http-equiv="content-type" CONTENT='text/html; charset= iso-8859-2"> - strona kodowa, <META NAME="Keywords" CONTENT="słowa kluczowe > - słowa, które będą stanowiły informacje na temat treściowej zawartości strony, <META NAME="Language" CONTENT="pl"> - język strony, 3.2 Ciało dokumentu HTML 3.2.1 Tekst <Hn></Hn> - tytuł stopnia n <P></P> - znaczniki akapitu <BR> - przeniesienie do następnej linii <HR> - (ang. horizontal rule) linia pozioma Wypunktowania <UL> </UL>
Numerowanie <OL> </OL> Atrybuty czcionki <B> tekst do pogrubienia(bold) </B> <I> tekst do pochylenia (italic, kursywa) </I> <U> tekst do podkreślenia (underlined) </U> Odsyłacze <A HREF="adres internetowy">nazwa strony widoczny tekst</a> - odsyłacz do strony internetowej bądź jakiegoś zasobu <A HREF="mailto:autor@jego.adres">Imię i nazwisko</a> - odsyłacz do adresu email. Po kliknięciu zostanie uruchomiony program pocztowy. Wielkość czcionki <FONT SIZE="x">Tekst objęty definicją</font> - x =<1... 7> im większa cyfra, tym większy tekst. Czcionka nie objęta tym znacznikiem ma wielkość 3. NIE MYLIC Z WARTOŚCIAMI WIELKOŚCI CZCIONEK W PROGRAMACH EDYTORSKICH. Wielkość czcionki można także zmieniać w sposób względny, poprzez dodanie do wielkości czcionki podstawowej (3) określonej wartości lub jej odjęcie np. <FONT SIZE="+2">Tekst objęty definicją</font> oznacza czcionkę 5 (3+2) Kolor czcionki <FONT COLOR="x">Tekst objęty definicją</font> - x = black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua bądź szestnastkowy zapis kolorów w formacie RRGGBB czyli RR red, GG green, BB blue. Rodzaj wyrównania ALIGN="left" - wyrównanie do lewej strony ALIGN="right" - wyrównanie do prawej strony ALIGN= center - wyśrodkowanie ALIGN="justify" wyjustowanie Przykład zastosowania - <P Align= center > Tekst </P> - umieszcza Tekst w środku
3.2.2.Grafika <img src="zdjecie.jpg" alt="zdjęcie"> - umieszczenie obrazu na stronie, alt tekst, który pojawi się po umieszczeniu kursora nad odsyłaczem <BODY BACKGROUND="URL albo ścieżka/nazwa_pliku.gif"> - obraz gif jako tło dla strony <BODY BGCOLOR="x"> - jednolity kolor tła strony x kod koloru j.w. <BODY TEXT="x"> - kolor tekstu na stronie globalny <BODY LINK="kolor1" VLINK="kolor2" ALINK="kolor3"> - kolor linków: LINK nie użyty odsyłacz, VLINK użyty odsyłacz, ALINK aktywny (ładujący się) odsyłacz <BODY LEFTMARGIN="xx">, <BODY TOPMARGIN="xx"> - marginesy strony, xx ilość pikseli odstępu 3.2.3.Tabele <TABLE> </TABLE> Znaczniki <TABLE></TABLE> oznaczają początek i koniec tabeli Znaczniki <TR></TR> - oznaczają kolejne wiersze tabeli Znaczniki <TD></TD> - oznaczają komórki w wierszu tabeli Przykład ilustruje tabelę o trzech wierszach i trzech kolumnach. 3.2.4.Ramki <HTML> <HEAD> <TITLE>Edytory HTML</TITLE> - tytuł strony j.w. </HEAD> <FRAMESET COLS="25%,*%"> - definicja ramek, (COLS kolumny), o 2 kolumnach, pierwsza od lewej 25% ekranu <FRAME SCROLLING="auto" NAME="nn" SRC="nn.html"> - ramka o nazwie nn, wyświetla strone nn.html <FRAME SCROLLING="yes" NAME="cc" SRC="cc.html"> - ramka o nazwie cc wyświetla strone cc.html
<NOFRAMES> - tekst wyświetlany przez przeglądarki nie obsługujące ramek <BODY> Zawartość strony dla przeglądarek nie obsługujących ramek </BODY> </NOFRAMES> </FRAMESET> </HTML> To krótkie repetytorium ma na celu jedynie sygnalizację najczęściej używanych poleceń w języku HTML. Stanowić ma ono przypomnienie wiadomości nabytych w czasie studiów. Dużo informacji i kursów HTML dostępne są w Internecie, z którego może skorzystać student w czasie wykonywania tego ćwiczenia. Np. http://webmaster.helion.pl/kurshtml/ 4 Przebieg ćwiczenia 4.1 Opracowanie zakresu treściowego projektowanego portalu. Należy określić tematykę portalu edukacyjnego 4.2 Temat projektu należy zgłosić prowadzącemu 4.3 Administrator utworzy w katalogu domowym konta serwera edukacji na odległość stronę główną, w której będą umieszczone informację wprowadzające do tematyki portalu. 4.4 Zgłosić prowadzącemu wykonanie ćwiczenia