HTML/Pierwsza strona: Różnice pomiędzy wersjami

Usunięta treść Dodana treść
Nie podano opisu zmian
MTM (dyskusja | edycje)
WP:SK, usunięcie drugiego akapitu gdyż nie jest potrzebny na pierwszą stronę, poprawa wcięć, wyjaśnienie czym są znaczniki (i ujednolicenie ich nazewnictwa)
Linia 4:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title> Pierwsza Strona </title>
</head>
<body>
<p>Przykładowy tekst.</p>
<span style="color: red"> Moja strona </span><br>
Witaj!
</body>
</html>
Linia 16 ⟶ 14:
Nie przejmuj się na razie, że nic z tego nie rozumiesz. Zaraz wszystko się wyjaśni. Zapisz teraz swoją stronę pod nazwą <code>index.html</code>. Teraz możemy otworzyć stronę w przeglądarce by zobaczyć rezultat. Brawo, stworzyłeś swoją pierwszą stronę. Na razie nikt prócz ciebie jej nie zobaczy, ponieważ jest ona tylko na twoim komputerze. Zajmijmy się teraz analizą stworzonej strony.
 
Przedstawiony powyżej kod zawiera w większości tzw. '''tagiznaczniki''', czyli tekst w nawiasach ukośnych, których używa się do budowy strony WWW. Prawie wszystkie znaczniki otwiera się i zamyka, umieszczając przykładowo <code><nowiki><html></nowiki></code> i <code><nowiki></html></nowiki></code>. Istnieją jednak wyjątki, takie jak tag <code><nowiki><img></nowiki></code>, służący do wstawiania obrazków na stronie, ale omówimy go później. Przestrzenie pomiędzy znacznikami otwierającym i zamykającym nazywamy '''sekcjami'''. W sekcjach można umieszczać inne znaczniki i tekst.
 
# Pierwsza linijka powyższego kodu (zwanego '''kodem HTML''') przedstawia informację o dokumencie. Mówi ona o tym jaką wersje HTML-a zastosowaliśmy. Jest to potrzebne do dalszej interpretacji dokumentu.
# Następnie widzimy znacznik otwierający <code><nowiki><html></nowiki></code>. Sygnalizuje on rozpoczęcie kodu HTML w dokumencie. W tej sekcji umieszczamy całą resztę kodu HTML. Na końcu dokumentu znajdziemy tagznacznik zamykający <code><nowiki></html></nowiki></code>.
# Kolejną rzeczą jest sekcja <code><nowiki><head></head></nowiki></code>. W niej zawieramy informacje o dokumencie &ndash; w tym przypadku o kodowaniu znaków i tytule dokumentu, który zawsze zobaczymy na pasku przeglądarki. W sekcji ''head'' możemy umieścić także informacje o autorze dokumentu (czyli strony HTML), opis dokumentu czy słowa kluczowe. Dokładniej sekcję ''head'' omówimy w dalszej części podręcznika.
# Po tym przychodzi sekcja <code><nowiki><body></body></nowiki></code>. Obejmuje ona to, co chcemy umieścić na naszej stronie - czyli informacje o tekście, wstawianych grafikach itp.
# W sekcji body utworzyliśmy paragrafakapit za pomocą tagówznaczników <code><nowiki><p></p></nowiki></code>, w którego sekcji umieściliśmy nasz tekst.
#Znacznik <code><nowiki><br></nowiki></code> ('''''br'''eak-line'') oznacza przejście do następnej linii.
#<code><nowiki><span style="color: red">Słowo </span></nowiki></code> określa kolor czcionki w danym tekście. Tag <code><nowiki><span></nowiki></code> używany jest do zaznaczania fragmentu tekstu, w którym obowiązują określone wartości stylów [[CSS]] (zawarte w tym wypadku w atrybucie ''style''). CSS służy do określania wyglądu tekstu, jak i niekiedy całych stron, ale o nim później.
To wszystko. W dalszych rozdziałach będziemy rozbudowywać nasz dokument i poznawać nowe elementy.