HTML/Pierwsza strona: Różnice pomiędzy wersjami
Usunięta treść Dodana treść
Kompowiec2 (dyskusja | edycje) m dr. red. |
Kompowiec2 (dyskusja | edycje) analiza kodu |
||
Linia 1:
Najprościej będzie jak zaczniemy naszą naukę od stworzenia swojej pierwszej strony. W tym celu w swoim edytorze stwórz nowy plik i przepisz lub skopiuj kod przedstawiony poniżej:
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <!-- Deklaracja typu dokumentu -->▼
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <!-- standard w3c -->▼
▲<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
▲<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-2" /> <!-- Kod kodowania Polskich znaków -->
<meta name="Description" content="
<meta name="Keywords" content="
<meta name="Author" content="
<title>
<link rel="stylesheet" href="
</head>
<body>
Linia 25 ⟶ 24:
Przedstawiony powyżej kod zawiera w większości tzw. '''znaczniki''', 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.
==Analiza==
* ''Deklaracja typu dokumentu'' - definiuje formalną strukturę dokumentów. Absolutna Podstawa, ale o nich pomówimy później.
* ''Standard w3c''' - To co pisze, informuje że jest zgodny z standardem zatwierdzonym przez World Wide Web Consortium.
* znacznik '''<head>''' - Pozwala wstawić w niej podstawowe informacje o dokumencie strony z których korzystają wyszukiwarki internetowe.
# to o czym nam mówi ''[nazwa_arkusza_stylow.css]'' to osobny plik, o którym dowiemy się więcej w książce [[CSS]] - pozwala na zdefiniowanie układu strony, np. menu bo lewej stronie, na górze banner na dopiero na środku właściwa treść.▼
* W miejscu znaczników: <code><title</code> <code></title></code> wpisujemy tytuł strony. Jest wykorzystywany w belce tytułowej przeglądarki internetowej oraz jako nazwa odnośnika w wyszukiwarce (w Google odznacza się niebieskimi napisami)
# 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 miejscu tekstu: ''wstaw tu opis strony'' krótko opisujemy naszą witrynę. Z tej funkcji korzystają wyszukiwarki internetowe - tekst który tutaj wpiszesz, pojawi się w wyszukiwarce, poniżej odnośnika do twojej strony. Jeśli pozostawimy pole puste, pojawi się kilka pierwszych linijek które znajdują się na stronie.
# W sekcji body utworzyliśmy akapit za pomocą znaczników <code><nowiki><p></p></nowiki></code>, w którego sekcji umieściliśmy nasz tekst.▼
* W miejscu tekstu: ''wstaw tu słowa kluczowe'' - Tu wpisujemy słowa kluczowe, z których również korzysta wyszukiwarka by odnaleźć twoją stronę. Trzeba tam wpisać tagi tak dopasowane, by najwierniej odzwierciedlały zawartość strony. Jest to jedna z podstaw [[w:SEO|SEO]] których nie będziemy omawiać, ze względu na przeznaczenie książki. Zainteresowanych odsyłamy [http://www.web-marketing.pl/pozycjonowanie-stron/ tutaj]
▲
▲
▲# W sekcji body utworzyliśmy akapit za pomocą znaczników <code><nowiki><p></p></nowiki></code>, w którego sekcji umieściliśmy nasz tekst. Nie jest to konieczne, ale zwiększa czytelność strony.
To wszystko. W dalszych rozdziałach będziemy rozbudowywać nasz dokument i poznawać nowe elementy.
| |||