Pierwsza strona w XHTML
Rozgrzewka
Czego potrzebujesz
- Edytor programistyczny, najlepiej obsługujący kodowanie UTF-8
- 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:
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:

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