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

Kategoria wpisu Kurs HTML Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

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:

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:

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.

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żą:

Znacznik <link rel=””>

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

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><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.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *