Podstawowe elementy, z których składa się strona w HTML

Czas czytania: 3 minut

Zdecydowałam się napisać ten wpis ponieważ prosiło go mnie o niego kilka osób. Wiem, że dla większości są to zapewne czyste podstawy ale widać powtórka z materiału każdemu czasem jest potrzebna.

Budowa prostej strony internetowej

Podstawowy schemat strony internetowej w HTML jest zwykle taki sam:

<!DOCTYPE html>
<html>
  <head>
   <!-- Nagłówek strony -->
  </head>
   <body>
     <!-- ciało strony -->
   </body>
</html>

Powyżej zamieściłam prosty schemat strony internetowej w języku HTML. Oczywiście w praktyce raczej aż tak prostej strony nigdzie nie spotkacie. No chyba że w jakiś kursie online.

W związku z tym, że to wpis dla początkujących poniżej opiszę co oznacza dany znacznik oraz pokażę kilka ciekawych elementów, które mogę się znaleźć na stronie.

<!DOCTYPE html> – W jakim języku programowania piszemy stronę!

Z pomocą tego znacznika deklarujemy pisanie kodu w języku HTML. A dokładniej to w HTML5.

We wcześniejszych wersjach HTML deklaracja ta wyglądała inaczej! Obecna wersja jest zdecydowanie krótsza od wcześniejszych. To jest aktualny standard więc nie omówię tutaj wcześniejszej wersji znacznika.

<html></html> – Rozpoczęcie strony

Znacznik <html> stanowi swoistą klamrę zamykającą cały kod strony. Znajduje się on bezpośrednio pod deklaracją języka programowania w jakim piszemy stronę.

Nie oszukujemy się on praktycznie w takiej formie nigdy nie występuje. Bezpośrednio w znaczniku znaleźć można kilka istotnych dla strony zmiennych jak np. lang.

Do czego służy zmienna lang

Z pomocą lang możemy informować przeglądarkę jak i roboty odwiedzające naszą witrynę w jakim języku będzie dana strona (np. w Polskim, Angielskim, Francuskim). W brew pozorom znacznik ten jest dość istotny. O ile język Polski urzędowo używany jest tylko w Polsce to z innymi językami bywa inaczej.

Język Angielki czy Francuski stosowany jest w wielu krajach. W zależności od kraju stylistyka jak i znaczenie słów ulega zmianie. Dlatego znacznik ten w zależności od kraju deklarujemy inaczej:

<html lang="en"> // angielski
<html lang="en-GB"> // angielski, Wielka Brytania
<html lang="en-US"> // angielski, Stany Zjednoczone
<html lang="fr"> // francuski
<html lang="fr-FR"> // francuski, Francja
<html lang="fr-CA"> // francuski, Kanada (kanadyjski francuski)
<html lang="fr-BE"> // francuski, Belgia (belgijski francuski)

monitor kod php css programowanie

<head></head> – Nagłówek strony

Ten znacznik z kolei pełni funkcje „nagłówka strony”. Pomiędzy tym znacznikiem umieszczamy informacje takie jak: tytuł naszej strony, opis strony, podłączenie skryptów do strony (np. styli CSS) czy kodowanie znaków.

<head>
   <meta charset="UTF-8">
   <title></title>
   <meta name="description" content="...">
   <meta name="keywords" content="...">
   <link rel="stylesheet" href="...">
   <link rel="icon" href="..." type="image/x-icon">
</head>

Trochę tego jest!

<meta charset=”UTF-8″> – kodowanie znaków w języku polskim

Zapewne już zauważyliście, że litery takie jak ą, ę, ć, ż nie występują w każdym języku. Są to litery topowe dla języka Polskiego. Podobnie sytuacja występuje w innych językach jak np. w Niemieckim.

Teraz zapewne zastanawiacie się do czego zmierzam. O tuż internet domyślnie ustawiony jest na Angielski – czyli w praktyce na alfabet łaciński. Jednak jak zauważyliście bez problemu na tej stronie jak i innych pokazują się specyficzne dla danego kraju litery!

Meta znaczniki – <title>, <meta>

znacznikach meta pisałam już kiedyś na moim blogu w kwestii pozycjonowania. Dlatego aby specjalnie nie przedłużać odsyłam do tamtego wpisu aby nie przeładować tej strony. A w tym miejscu jedynie chce wspomnieć o tym, że do najpopularniejszych należą:

<!-- Tytuł strony, na której się aktualnie znajdujemy -->
<title>Tytuł strony</title> 

<!-- Opis strony -->
<meta name="description" content="..."> 

<!-- słowa kluczowe -->
<meta name="keywords" content="...">
Znacznik <link rel=””>

Z pomocą tego znacznika możemy wiązać różne elementy ze stroną np.

/* style CSS */
<link rel="stylesheet" href="..."> 


/* favicon */
<link rel="icon" href="..." type="image/x-icon">

Pierwszy z rel=”stylesheet”  przeznaczony jest do dodawania styli CSS do naszej witryny.

Drugi rel=”icon” służy do dodawania do strony Favicon. Czyli małego obrazka widocznego na karcie przeglądarki.

Dodawanie dodatkowych styli -<style>

Innym ciekawym elementem jaki można spotkać na stronie w <head></head> są <style></style>

Znacznik ten umożliwia nam dodawanie kaskadowych styli (CSS) w kodzie strony HTML. Pomijając tym samym dodatkowy plik CSS.

<body></body> – Ciało strony

Pomiędzy tymi znacznikami umieszczamy praktycznie wszystkie pozostałe elementy witryny.

Budowa strony w HTML 5

Budujemy prostą stronę z Bootstrap

Oznacza to, że to co się tutaj znajduje zależy tylko i wyłącznie od nas.