Pierwsza strona w XHTML

Rozgrzewka

Czego potrzebujesz

  1. Edytor programistyczny, najlepiej obsługujący kodowanie UTF-8
  2. Przeglądarkę obsługującą XHTML i CSS2, np. Opera lub Firefox

Otwórz wybrany przez siebie edytor tekstu i utwórz nowy dokument o przykładowej treści: 

 <!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" lang="pl">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Moja pierwsza strona w XHTML</title>
 </head>
 <body>
 <p>
 Witaj Internecie!
 Oto moja pierwsza strona WWW
 </p>
 </body>
 </html>

„index.html” jest ogólnie przyjętą nazwą dla strony głównej w języku HTML. Dla XHTML można stosować nazwę „index.xhtml”.

Otwórz go w wybranej przeglądarce. Zauważysz, że wyświetla ona tytuł zdefiniowany w znaczniku <title/> na pasku tytułu, a cały tekst w jednej linii:

Witaj Internecie! Oto moja pierwsza strona WWW

Tak się dzieje, ponieważ układ tekstu w pliku nie ma bezpośrednio wpływu na układ strony w przeglądarce. Trzeba tekst wzbogacić o znaczniki XHTML: 

 <h1>Witaj Internecie!</h1>
 <p>Oto moja pierwsza strona WWW</p>

Znaczniki „obejmują” fragment tekstu i definiują jego rodzaj. Zatem tekst zawarty pomiędzy <h1> a </h1> jest nagłówkiem najwyższego rzędu, a tekst pomiędzy <p> a </p> jest akapitem.

Dodanie stronie kolorów, zmiana kroju pisma, odstępów i innych rzeczy związanych z jej wyglądem wymaga użycia pomocniczego dla XHTML języka CSS.

Dodaj przed tekstem: 

 <style type="text/css">h1 {color:red;}</style>

Znacznik <style type="text/css"> oznacza, że zostanie użyty język CSS. h1 {color:red;} to reguła języka CSS nadająca czerwony kolor elementowi h1 (w CSS nazwy znaczników zawsze piszę się bez <>), czyli zadziała na <h1>Witaj Internecie!</h1> w XHTML.

Omówienie pliku XHTML (nie trzeba wszystkiego doskonale rozumieć)

Ten przykład zawiera w sobie najważniejsze i najbardziej niezbędne rzeczy, które muszą znajdować się w dokumencie.

W pierwszych czterech liniach podałeś do informacji, że używasz języka XHTML i Twoja strona napisana jest uniwersalnym kodowaniem UTF-8 (jeśli nie jest, to zmień wartość atrybutu encoding na odpowiednią, np. ISO-8859-2). Deklaracja systemu kodowania znaków jest bardzo ważna ponieważ informuje przeglądarkę jak poprawnie wyświetlić wszystkie znaki, zwłaszcza polskie znaki diakrytyczne, np. ż, ź, ć, itp.

Element <head> zawiera nagłówek strony. W nagłówku tym definiujemy dodatkowe informacje. Na razie tylko tytuł strony (element <title/>.

Właściwa treść dokumentu zawarta jest w elemencie <body>.

style przeniesione dalej

Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.

| Pierwszy arkusz stylów
Zmodyfikowano: 07.04.2010, 11:46
submit