Pierwsze kroki w html

HTML język znaczników który prezentuje treść witryny, obecnie nie skupia się na jej wyglądzie.

Struktura pliku (szablon) HTML przedstawia się następująco:

---------------------------------------------
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="description" content="Opis strony....">
   <meta name="keywords" content="słowa, kluczowe, jak, opis, strony, nauka, www">
   <title>Tytuł strony</title>
   <link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
</body>
</html> 

--------------------------------------
W strefie <head></head> znajduje się zawsze konfiguracja strony, czyli to co nie jest widoczne bezpośrednio na stronie, natomiast w sekcji <body></body>znajduje się treść witryny.



Przykład
Należy na stronie uzyskać poniższy efekt:




















Wklejamy do pliku html poniższy tekst.


------------------------------------
<!DOCTYPE html>
<html lang="pl">
<head>
   <meta charset="utf-8">
   <title> Tytuł strony </title>
   <meta name="description" content="Strona o tworzeniu www i nie tylko">
   <meta name="keywords" content="nauka, www, programowanie, php, mysql">
</head>
<body>
   <h1>Tworzenie stron</h1>
    Niniejszy blog zawiera informacje dotyczące sposobu tworzenia stron www z wykorzystaniem   
    różnych narzędzi tj. html, php, css, mysql i kto wie czy jeszcze czegoś...</br>
    Mam nadzieję, że niniejszy kurs będzie się rozwijać. <br/><br/>

    Serwis Onet
    <a href="http://www.onet.pl" target="_blank" title="Wejdź do Onet">Onet.pl</a> <br/>
    <a href="http://www.onet.pl" target="_blank" title="Wejdź do Onet"><img src="img/onet.png"/>
    </a>
    <br/><br/>

    Serwis WP
    <a href="http://www.wp.pl" target="_blank" title="Wejdź do WP">Onet.pl</a> <br/>
    <a href="http://www.wp.pl" target="_blank" title="Wejdź do WP"><img src="img/wp.png"/></a></body>
</html>
----------------------------


Komentarz:
  • <!DOCTYPE html> - określa standard HTML5
  • <html lang="pl"> - informuje przeglądarkę, że strona jest w j.polskim. Tego typu informacja jest potrzebna dla robota google'a, który później może przetłumaczyć stronę na np. j. angielski,
  • <meta charset="utf-8"> - dotyczy kodowania polskich znaków,
  • <meta name="description"...> - związane z pozycjonowaniem strony, tutaj dot. opisu strony
  • <meta name="keywords"...> - związane z pozycjonowaniem strony, tu dot. słów kluczowych
  • <br/><img.../> znaczniki, które nie mają znaczników zamykających dlatego "/" wpisujemy na końcu znacznika,
  • target="_blank" atrybut znacznika <a>, strona będzie otwarta w nowej karcie
  • title="dymek" atrybut znacznika <a>, najazd myszką na link spowoduje wyświetlenie "dymek"


Etykiety: