Założenie konta FTP
Na przykładzie portalu yoyo.pl (zaleta - brak reklam):
- Na stronie http://www.yoyo.pl/rejestracja/ zakładamy konto
- Odbieramy maila i aktywujemy konto
- Po zalogowaniu zakładamy nową stronę
- Wpisujemy nazwę strony
- Podajemy nowe hasło dostępu do kontra FTP
- Zapamiętujemy lub zapisujemy dane dostępu do konta FTP (adres serwera, nazwę użytkownika i hasło)
Przykładowe darmowe programy do połączeń FTP można znaleźć na stronie z przydatnymi programami.
Dla próby tworzymy w notatniku plik z napisem:
Ala ma kota.
zapisujemy pod nazwą index.html i umieszczamy go na serwerze.
Pliki o nazwie index.html lub index.htm są domyślnie traktowane przez serwery www, jako strona główna.
Dzięki temu wejście np. na adres http://bartoszopka.yoyo.pl domyślnie otwiera plik index.html znajdujący się również pod adresem http://bartoszopka.yoyo.pl/index.html
Podstawy XHTML
XHTML (EXtensible HyperText Markup Language) jest językiem opisu struktury zawartości strony internetowej.
Jest pochodną języków XML (uniwersalnego języka opisu danych) i HTML (języka opisu struktury i wyglądu stron internetowych).
XHTML jest bardziej restrykcyjny i czystszy niż HTML. Jest standardem wykorzystywanym we wszystkich nowoczesnych przeglądarkach internetowych, nie tylko na komputerach, ale i na urządzeniach przenośnych i telefonach komórkowych. Restrykcyjność XHTML nie jest ograniczeniem, lecz wymusza przejrzystość i jednoznaczność struktury dokumentu. XHTML uczy dobrych praktyk, które z powodzeniem można przenieść do języka HTML.
Jak wygląda HTML/XHTML?
XHTML tak samo jak HTML i XML jest formatem tekstowym, który może być czytany przez człowieka i edytowany prostymi narzędziami (patrz na stronie z przydatnymi programami).
Przeglądarki internetowe pozwalają na podgląd źródeł HTML/XHTML dowolnej otwartej w przeglądarce strony.
W przeglądarce Firefox służy do tego skrót Ctrl+U. W większości przeglądarek opcja ta dostępna jest w menu Widok/Źródło strony (View/Page source) lub podobnej.
Przykład prostego dokumentu XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Ala ma kota</title> </head> <body> <p>Ala ma kota.</p> </body> </html>
można skopiować i zapisać w pliku ala.html i otworzyć w przeglądarce.
Struktura XHTML
Preambuła
Każdy dokument XHTML rozpoczyna się preambułą określającą typ dokumentu:
<!DOCTYPE ... >
Dostępnych jest kilka typów dokumentów HTML i XHTML różniących się poziomem restrykcyjności (Strict, Transitional i inne).
W ramach tych ćwiczeń będziemy korzystali z najbardziej restrykcyjnej wersji XHTML 1.0 Strict, zatem każdy dokument będzie się zaczynał od preambuły:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Oczywiście nie uczymy się tego na pamięć. Wiedza o tym, gdzie to znaleźć i jak skopiować w zupełności wystarczy :)
Struktura dokumentu
Cała pozostała część dokumentu zapisana jest w następującej strukturze zbudowanej ze znaczników:
<html ... > <head> <title> ... </title> </head> <body> ... </body> </html>
Gdzie:
- <html> … </html> - określa ramy całego dokumentu; mówi przeglądarce (czy innemu programowi czytającemu dokument), gdzie się zaczyna, a gdzie kończy treść dokumentu XHTML
- <head> … </head> - określa ramy nagłówka dokumentu; dane zawarte w nagłówku nie są wyświetlane jako część dokumentu, ale mogą zawierać dodatkowe informacje o jego treści, wyglądzie itp…
- <title> … </title> - obowiązkowy element nagłówka definiujący tytuł dokumentu; tytuł ten jest np. wyświetlany w pasku tytułu przeglądarki lub w wynikach wyszukiwania np. przez Google
- <body> … </body> - obejmuje samą treść dokumentu; dane zawarte pomiędzy tymi znacznikami opisują treść strony, która jest wyświetlana w oknie przeglądarki
Znaczniki
Cały dokument XHTML opisany jest znacznikami, których strukturę można przedstawić na następujących przykładach:
<nazwa_znacznika> Treść wewnątrz znacznika </nazwa_znacznika> <nazwa_innego_znacznika atrybut="wartość atrybutu"> Treść tego innego znacznika </nazwa_innego_znacznika> <nazwa_znacznika_bez_tresci></nazwa_znacznika_bez_tresci> <nazwa_pojedynczego_znacznika atrybut="wartość" />
Znaczniki najczęściej występują w parach <znacznik> otwierający i </znacznik> zamykający. Pomiędzy nimi znajduje się treść znacznika.
Jeśli znacznik nie zawiera żadnej treści: <znacznik></znacznik> może zostać otwarty i zamknięty w pojedynczym zapisie: <znacznik />.
Każdy znacznik w dokumencie musi być zamknięty!
Znaczniki mogą być dodatkowo opisane atrybutami. Atrybuty zawierają dodatkowe informacje opisujące treść znacznika lub mówią przeglądarce w jaki sposób dany element ma zostać wyświetlony.
Przykładowo:
<html xmlns="http://www.w3.org/1999/xhtml"> ... </html>
obowiązkowy w XHTML atrybut xmlns informuje przeglądarkę z jaka grupy znaczników (tzw. przestrzeń nazw - namespace) wykorzystywana jest w dokumencie. W przypadku stron internetowych XHTML atrybut ten zawsze powinien mieć wartość "http://www.w3.org/1999/xhtml".
Podstawowe znaczniki
- nagłówki:
<h1>nagłówek podstawowy</h1> <h2>podtytuł</h2> ... itd. ... <h6>najmniej ważny nagłówek</h6>
- paragrafy:
<p>tekst tekst...</p>
- znak końca linii:
<br />
- podkreślenie znaczenia słów (znaczniki <b> i <i> nie powinny być używane, gdyż opisują wygląd tekstu, a nie jego znaczenie):
To jest <strong>coś ważnego</strong>. Dawniej było to <b>wytłuszczenie</b>. To jest <em>coś charakterystycznego</em>. Dawniej jako <i>kursywa</i>.
- komentarze:
<!-- Tekst lub dowolna treść dokumentu XHTML w komentarzach jest ignorowana -->
Wyświetlanie przez przeglądarkę
Przeglądarki internetowe nadają znacznikom określony wygląd adekwatny do ich znaczenia. Np. nagłówki wyświetlane są dużą pogrubioną czcionką, a każdy paragraf rozpoczyna się od nowej linii.
Wszelkie nowe linie niewynikające ze znaczników są ignorowane.
Białe znaki (np. spacje) nawet jeśli występują w większej liczbie obok siebie wyświetlane są jako pojedynczy odstęp.
Co zrobić, żeby wierszyk wyglądał jak wierszyk?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="pl" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>O wróbelku</title> </head> <body> <h1>O wróbelku</h1> <p>Wróbelek jest mała ptaszyna, wróbelek istotka niewielka, on brzydką stonogę pochłania, lecz nikt nie popiera wróbelka. Więc wołam: Czyż nikt nie pamięta, że wróbelek jest druh nasz szczery?! Kochajcie wróbelka, dziewczęta, kochajcie, do jasnej cholery!</p> </body> </html>
A polskie litery?
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> ... </head>
Więcej informacji o zapisywaniu plików w kodowaniu UTF-8 w systemie windows znajduje się na tej stronie.
Pomoce naukowe
- Samouczki: http://www.w3schools.com/
- XHTML: http://www.w3schools.com/xhtml/
- można też przejrzeć HTML: http://www.w3schools.com/html/
- Lista i opis znaczników XHTML:
Zadanie 1
- Należy założyć konto FTP na serwerze (yoyo.pl lub dowolny inny - najlepiej niedoklejający reklam)
- Wysłać maila do prowadzącego zajęcia o temacie "Zadanie 1" zawierającego: imię, nazwisko, numer indeksu, adres strony www z konta FTP (np. www.mojswietnyprojektzkck.yoyo.pl) i wybraną tematykę tworzonej strony
- Umieścić w głównym katalogu na swoim koncie FTP plik index.html zawierający szablon dokumentu XHTML i odrobinę jakiejś interesującej treści :)
termin: sobota godzina 0:00 (północ z piątku na sobotę)
punkty: 1