Kurs HTML – Podstawy :: Lekcja 2

Kurs HTML – Podstawy :: Lekcja 2
28 Apr 2013

Witam Cię w kolejnej lekcji kursu. W tej lekcji omówimy sobie podstawowy schemat strony w HTML’u oraz kilka znaczników, abyś wiedział z czym to się je.

Jeśli jesteś gotowy, to otwórz notepad ++ i zacznijmy najpierw od wpisania następującego kodu:

szablon www

 

Umieściłem obrazek, nie fragment kodu, abyś nie skopiował bezmyślnie tego kodu, tylko go przepisał. Więcej się w ten sposób nauczysz.

 

jezyk

Pewnie tobie po przepisaniu kodu nie koloruje tekstu, dzieje się tak, gdyż nie ustawiłeś języka, który ma kolorować. W tym celu z pozycji język wybierz HTML. Obrazek po lewej. ( Kliknij aby powiększyć )

 

 

 

 

 

Każdy znacznik w języku HTML zawarty jest w nawiasie ostrym, <>. Każdy znacznik musi zostać otwarty i zamknięty. Są wyjątki, np <!DOCTYPE HTML>, którego nie zamykamy. Większość znaczników ma formę np. <body>…</body>, jednak nie każdy znacznik da się, czy też trzeba w ten sposób zamykać, możemy też skorzystać z prostszej formy np, przy obrazku:

<img src="..." />

Możemy zastosować takie rozwiązanie. Nie jest to natomiast możliwe np. przy tytule strony. Tu musi być otwarcie i zamknięcie osobno.

 

Opiszmy sobie teraz po kolei linijki kodu:

Każdy, ale to każdy plik w html’u będziemy rozpoczynać od 2 pierwszych linii, więc wykuj je na pamięć.

Pierwsza linia jest to Znacznik <!DOCTYPE> służy do deklaracji typu dokumentu, i powinien być umieszczony jako pierwszy element w dokumencie HTML, w szczególności przed znacznikiem HTML Ten znacznik informuje przeglądarkę której wersji HTML lub XHTML używa wczytywana właśnie strona.

Ważne: ten znacznik nie posiada znacznika zamykającego, i musi być zawsze pisany dużymi literami!

Dawniej stosowano długie formy tego znacznika, np:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Teraz jest to krótka forma: <!DOCTYPE HTML>

Znacznik  <HTML> odpowiada za rozpoczęcie kodu w języku HTML. Oczywiście pamiętamy o </html> na końcu strony.

Gdy mamy już “wstęp”, możemy przejść do zdefiniowania kilku istotnych elementów, bez której strona co prawda zadziała, jednak nie tak, jakbyśmy tego chcieli.

między znacznikami <head> … </head> mamy następujący kod:

    <meta charset="UTF-8" />
	<title>Tytuł strony</title>
	<meta name="keywords" content="słowa kluczowe" />
    <meta name="description" content="opis strony">
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Nie trzeba tu wielkiej filozofii, jednak bez informacji nie wiedzielibyśmy czemu to służy i czy mamy to wpisać….

Pierwsza linia odpowiada za kodowanie, czyli zestaw znaków z których możemy skorzystać.

Domyślnie pliki są zapisywane w kodowaniu ASCII, który nie obsługuje polski znaków. Mimo, że dajemy informacje przeglądarce jaki typ znakowy chcemy użyć, musimy poprawnie zapisać stronę. Aby to zrobić w notatniku korzystamy z funkcji format -> koduj w UTF-8:

 

kodowanie

Jeśli już mamy coś, skorzystaj jak na screenie, z funkcji “Konwersuj na format UTF-8”, jeśli tworzysz nowy dokument, po prostu wybierz Koduj w UTF-8. Dlaczego to takie ważne?

Bez tego pojawią nam się dziwne znaczki i w edytorze i na stronie.

Aby nie zapomnieć czasem o tym, dobrym rozwiązaniem jest ustawienie kodowania UTF-8 jako domyślne przy tworzeniu dokumentów, w tym celu Klikamy w Ustawienia – >preferencje, a następnie zakładka nowy dokument i zaznaczamy UTF-8:

nowy dokument

 

Możemy też wybrać domyślny język jako HTML, jednak to już jak kto woli.

 

Kontynuując, przejdźmy teraz do kolejnego znacznika <title>, jest to nic innego, jak tytuł strony. Jednak możemy użyć nie mniej niż 70 znaków – jest to limit wyszukiwartki google, później po prostu ucina.

W kolejnych 2 liniach pojawia się nowy znacznik <meta>. Tag <meta>służy do nadania informacji przeglądarce na temat dokumentu. Elementy meta są używane do określenia tytułu strony, słów kluczowych, autora dokumentu, ostatnich modyfikacji i innych.

My zdefiniowaliśmy tagi meta z 2 atrybutami, pierwszy jest to keywords, czyli słowa kluczowe. Wypisujemy je po przecinku, czyli nawet wyrażenie “Ala ma kota”, jest widziane jako jedno słowo kluczowe. Dzięki nim wyszukiwarki indeksują naszą stronę.  Lepiej jednak stosować proste słowa, w liczbie pojedynczej i nie wypisywać “pustych słow”, zaimków, cyfr itd. Dobrym rozwiązaniem będzie tu “Ala, kot”. Wtedy jeśli mały Jasio wpisze w Google “Ala ma kota” to znajdzie naszą stronę. Jednak nie tylko, bo zgodnie z tym, co zdefiniowaliśmy może wpisać zarówno samo “Ala”, jaki i podobne wyrażenia, typu “Ala ma 2 siostry”, i też tu trafi. Nawet jeśli wpisze “Koty”, gdyż jest słowo kluczowe kot, a koty to liczba mnoga ( Google to wie, nie martw się 😉 )

Ostatnim znacznikiem jest tag <link> który służy nam do określenia związku między tym plikiem a innymi, możemy w ten sposób dodawać pliki do naszego kodu HTML, np. pliki stylu, skrypty itd..

My dodamy faviconę, czyli tą małą ikonkę obok paska adresu. Kod jest zawsze taki sam, więc po prostu go zapamiętaj

 

Po sekcji <head> … </head> możemy przystąpić do treści strony lub jak to w dosłownym tłumaczeniu, jego ciała.

Wszystko to, co jest nad <body> jest dla nas nie widoczne, cały ten kod jest dla przeglądarek. My widzimy tylko efekty, czyli tą ikonkę, tytuł strony. Nazwę w google itp, itd.

To co będzie w sekcji body będzie widoczne na stronie.

 

 

W następnej lekcji omówimy sobie komentarze w języku HTML i CSS. Serdecznie zapraszam 🙂