Podstawowe elementy, z których składa się strona w HTML
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.
Co znajdziesz w tym wpisie
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)
<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>
O 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.
Budujemy prostą stronę z Bootstrap
Oznacza to, że to co się tutaj znajduje zależy tylko i wyłącznie od nas.