W celu przeprowadzenia pierwszego testu w wybranym przez siebie edytorze, utwórz nowy plik. Jeśli używasz edytora Windows, uruchom go poprzez Start > Wszystkie programy > Akcesoria > Edytor.
Następnie wybierz Plik > Zapisz jako. Ważne jest pole Typ pliku.
W tym polu koniecznie musisz wybrać opcję Wszystkie pliki. W polu Nazwa pliku wpisz następnie index.htm. Teraz możesz zapisać plik w wybranym miejscu. To teraz będzie plik, na którym będziesz pracować. Jest to więc Twoja pierwsza strona HTML, która jednak na razie jest jeszcze pusta. To się niebawem zmieni.
Jeśli używasz Dreamweavera, najlepiej jest ustawić na początku programu, że chcesz utworzyć plik HTML.
Struktura podstawowa HTML
Przed przejściem do struktury podstawowej HTML, ważna uwaga dotycząca semantyki używanej w tej serii - oraz w świecie HTML. Terminy „tag” i „element” będą ci się regularnie pojawiać i niestety często są błędnie interpretowane. Przykład:
<a href="news.htm">Do nowości</a>
Ta składnia przedstawia element a, mianowicie <a href="news.htm">Do nowości</a>. Ten element składa się z otwierającego tagu a, czyli <a> lub pełny <a href="news.htm">, treści elementu Do nowości oraz zamykającego tagu a </a>. Ponadto element a posiada atrybut href z wartością atrybutu news.htm.
Poprzedni przykład pokazuje definicję hiperłącza w HTML za pomocą elementu a. Ten element a jest oznaczany przez otwierający tag <a> oraz zamykający tag </a>. Widzisz, że nie jest tak trudno poprawnie używać terminów element i tag.
Teraz jednak zaczynamy. Otwórz wcześniej zapisany plik HTML w swoim edytorze. Każdy dokument HTML ma określoną strukturę podstawową.
Najpierw oto pełna struktura w całej swej piękności:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> </body> </html>
Co oznaczają poszczególne wpisy? Zaczynamy od deklaracji typu dokumentu.
<!DOCTYPE html>
Poprzez taką deklarację typu dokumentu informujesz przeglądarkę, w której zostanie wyświetlona Twoja witryna, jaki standard HTML używasz. W tym przypadku jest to HTML5. Gdybyś korzystał z HTML 4.01, deklaracja DOCTYPE wyglądałaby następująco:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Temat deklaracji typu dokumentu często wprowadza początkujących w HTML w zakłopotanie, ponieważ istnieje wiele różnych wariantów. Tak naprawdę jest to jednak dość proste: postrzegaj deklarację typu dokumentu jako rodzaj instrukcji budowlanej, w której opisane jest, jakie elementy mogą znajdować się w dokumencie.
Z zasady zalecam krótki zapis HTML5.
<!DOCTYPE html>
Nowoczesne przeglądarki ją rozpoznają i wyświetlają strony, w których jest używana, w trybie standardowym. Niemniej jednak powinieneś faktycznie definiować tylko te elementy HTML, które są dozwolone w HTML5. O tym jednak więcej później.
Kolejny element to html.
<html lang="de"> … </html>
Ten element opakowuje dokument. Coś, co przykuwa uwagę, to atrybut lang. Za jego pośrednictwem jest określany język używany w dokumencie. Oto niektóre skróty lang dla obszaru niemieckojęzycznego.
• de – niemiecki (Standard)
• de-ch – niemiecki (Szwajcaria)
• de-at – niemiecki (Austria)
• de-lu – niemiecki (Luksemburg)
• de-li – niemiecki (Liechtenstein)
Jest jeszcze wiele innych skrótów lang dla języka angielskiego.
• en-us – angielski (USA)
• en-gb – angielski (Wielka Brytania)
• en-au – angielski (Australia)
• en-ca – angielski (Kanada)
• en-nz – angielski (Nowa Zelandia)
• en-ie – angielski (Irlandia)
• en-z – angielski (Republika Południowej Afryki)
• en-jm – angielski (Jamajka)
• en – angielski (Karaiby)
<head> … </head>
Dane nagłówka brzmi nieco niezgrabnie, ale jest łatwe do wyjaśnienia. Umieszcza się tu m.in. informacje, które bliżej opisują dokument. Są to na przykład tytuł i używany zestaw znaków. Tutaj można również dołączać skrypty i arkusze stylów oraz definiować ogólne metadane. Nieco więcej na ten temat później.
Ważny jest przede wszystkim element title.
<title>Poradniki dot. obróbki obrazów w Photoshopie, webdesign & fotografii - PSD-Tutorials.de </title>
To definiuje tytuł, który jest potrzebny na różnych miejscach.
• W pasku tytułowym przeglądarki.
• Gdy zostanie dodane zakładka do zakładek przeglądarki.
• Oczywiście tytuł odgrywa istotną rolę w optymalizacji pod kątem wyszukiwarek.
Widzicie więc, jak ważny jest tytuł. Wybierzcie tytuł możliwie krótki i zwięzły.
Dla szczegółowego opisu strony można użyć metadanych. Więcej informacji na ten temat zostanie podane później.
Następnym punktem jest używany zestaw znaków.
<meta charset="UTF-8" />
To ważne dla przeglądarek. Pozwala im to na poprawne kodowanie znaków, aby były one wyświetlane poprawnie. Tylko poprzez podanie właściwego zestawu znaków np. znaki diakrytyczne i specjalne będą poprawnie wyświetlane. Zazwyczaj podaje się tutaj UTF-8.
Teraz przechodzimy do właściwej treści strony, czyli tego, co faktycznie widzą odwiedzający. Wszystko to jest określone w elemencie body.
<body> … </body>
W celach demonstracyjnych dodajcie coś między otwierającym i zamykającym tagiem <body>:
<h1>PSD-Tutorials.de</h1>
Dokument powinien teraz wyglądać następująco:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Przykładowy podstawowy szkielet HTML5 - www.html-seminar.de</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>PSD-Tutorials.de</h1>
</body>
</html>Zachowajcie dokonane zmiany i otwórzcie plik w przeglądarce.
Widzicie, jak PSD-Tutorials.de jest teraz faktycznie wyświetlane. Udało wam się więc stworzyć swój pierwszy własny dokument HTML.
