XHTML (1) - Wprowadzenie

Założenie konta FTP

Na przykładzie portalu yoyo.pl (zaleta - brak reklam):

  1. Na stronie http://www.yoyo.pl/rejestracja/ zakładamy konto
  2. Odbieramy maila i aktywujemy konto
  3. Po zalogowaniu zakładamy nową stronę
    1. Wpisujemy nazwę strony
    2. Podajemy nowe hasło dostępu do kontra FTP
    3. 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

Zadanie 1

  1. Należy założyć konto FTP na serwerze (yoyo.pl lub dowolny inny - najlepiej niedoklejający reklam)
  2. 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
  3. 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

Strona na licencji Creative Commons Attribution-ShareAlike 3.0. Autorzy: A. Czoska, M. Komosiński, B. Kowalczyk, A. Kupś, M. Lubawy