Pierwsza strona w XHTML

Rozgrzewka

Czego potrzebujesz

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

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

 Witaj Internecie!
 Oto moja pierwsza strona WWW

„index.html” jest ogólnie przyjętą nazwą dla strony głównej

Zapisz go (najłatwiej używając skrótu klawiszowego CTRL+S) pod nazwą index.html.

index.xhtml nie zadziała — no root element error!

Otwórz go w wybranej przeglądarce. Zauważysz, że wyświetla ona 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 definują jego rodzaj. Zatem tekst zawarty pomiędzy <h1></h1> jest nagłówkiem najwyższego rzędu, a tekst pomiędzy <p></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 tesktem:

 <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.

Tworzenie pliku XHTML

Zmień nazwę pliku z index.html na index.xhtml. To włączy w przeglądarkach prawdziwą obsługę XHTML i zaczną sprawdzać poprawność składni.

poprawić tekst

Prosty dokument, który przed chwilą stworzyłeś, nie powinien być publikowany w internecie, gdyż brakuje w nim informacji dla przeglądarek, które muszą wiedzieć chociażby o tym jakiego języka używa Twoja strona i jak prawidłowo wyświetlić jej polskie znaki.

Wróć zatem do edytora i od pierwszej linii dodaj:

 <?xml version="1.0" encoding="UTF-8" ?>
 <!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>Pierwsza strona internetowa</title>
 </head>
 <body>

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).

Tytuł strony jest używany w wielu miejscach: na belce okna przeglądarki, jako nazwa dla zakładki, w wynikach wyszukiwania stron internetowych.

Linie zaczynające się od znacznika <head> definują na razie tytuł strony i jej opis, ale w następnej sekcji zdefiniujemy w niej wygląd wszystkich elementów Twojej strony.

Element <body> rozpoczyna treść strony, czyli to, co napisaleś na początku.

Przeskocz teraz na sam koniec Twojego dokumentu i dopisz:

 </body>
 </html>

style przenosze dalej

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


Zmodyfikowano: 07.04.2007, 14:46