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: 

 <?xml version="1.0" encoding="utf-8"?>
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/2002/08/xhtml/xhtml1-strict.dtd" xml:lang="pl">
 <head>
 <title>Moja pierwsza strona w XHTML</title>
 </head>
 <body>
 <div>
 Witaj Internecie!
 Oto moja pierwsza strona WWW
 </div>
 </body>
 </html>

Zapisz z rozszerzeniem *.xhtml, a nie *.html!

Otwórz go w wybranej przeglądarce (oczywiście nie w IE!). Zauważysz, że wyświetla ona tytuł zdefiniowany w znaczniku <title/> na pasku tytułu, a cały tekst w jednej linii (poniżej jest przykład z *.html):

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>
 Oto moja pierwsza strona WWW

Znaczniki „obejmują” fragment tekstu i definiują jego rodzaj. Zatem tekst zawarty pomiędzy <h1> a </h1> jest nagłówkiem 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. (patrz CSS)

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 dwóch liniach podałeś do informacji, że używasz języka XHTML 1.0 i Twoja strona napisana jest uniwersalnym kodowaniem UTF-8 (jeśli nie jest, to zmień wartość atrybutu encoding w znaczniku <?xml?> 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>.

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

| Pierwszy arkusz stylów
Zmodyfikowano: 31.08.2011, 18:51
submit