front end blog dla początkujących, pytania i odpowiedzi - strony www
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.
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.
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.
O rodzajach <!DOCTYPE html> przeczytacie tutaj.
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ę.
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!
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.
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)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!
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="...">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.
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.
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.
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…