Podstawowy szkielet strony internetowej oparty o HTML 5
HTML 5 został już oficjalnie uznany przez W3C za standard, którym webmasterzy mogą bez żadnych obaw posługiwać się przy budowie stron internetowych. W stosunku do poprzednich wersji zmieniło się kilka rzeczy z korzyścią dla web developerów. Przyjrzyjmy się więc, jak poprawnie zbudować podstawowy szkielet naszej strony internetowej, który potem będziemy rozbudowywać wraz z rozwojem serwisu…
W naszym kodzie wykorzystamy podstawowe znaczniki HTML 5, między innymi:
<!doctype html>– prolog,<meta charset="UTF-8" />– ustalenie kodowania znaków,<header> </header>– nagłówek,<nav> </nav>– menu,<article> </article>– artykuł (zawiera nagłówki, tekst itd.),<section> </section>– główna część witryny (główna kolumna),<aside> </aside>– elementy uzupełniające (np. boczna kolumna z widgetami),<footer> </footer>– stopka.
Podstawowa struktura dokumentu HTML
Jak pewnie większość osób wie, strona internetowa ma swój ściśle określony szkielet. Nie chodzi mi tutaj o nagłówek czy stopkę oraz inne elementy widoczne dla internauty ale o „głowę” (ang. head) oraz „ciało” (ang. body) budowanej witryny WWW. Te dwa elementy nie są widoczne „gołym okiem” dla przeciętnej osoby ale są bardzo ważne w tworzeniu stron internetowych.
To właśnie w sekcji head umieszczamy informacje między innymi o kodowaniu znaków, tytule, słowach kluczowych czy informacje o dołączonych arkuszach stylów. Natomiast w sekcji body zapisujemy wszystko to co ma być widoczne dla internauty czyli nagłówek, menu główne, stopkę itd.. Nasz podstawowy kod z dodanym oczywiście prologiem (informacją o języku jaki używamy czyli HTML’u 5) wygląda następująco:
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>W poprzedniej wersji HTML’a musieli byśmy się trochę bardziej rozpisać, ale nie ma sensu obecnie wracać do przestarzałych technologii.
Kodowanie znaków
Pewnie każdy z was spotkał się kiedyś z tak zwanymi „krzakami” zastępującymi polskie litery (ą, ę, ł, ń, ó, ż, ź itd.) błąd ten jest spowodowany złym kodowaniem dokumentu, które ustala się właśnie w sekcji head. Najlepiej jest po prostu zadeklarować kodwanie UTF-8, które właśnie obsługuje język Polski. W HTML 5 robi się to naprawdę całkiem przyjemnie (w przeciwieństwie do poprzedniej wersji) wpisując w znaczniki HEAD taki kod:
<meta charset="UTF-8" />
Cały szkielet strony napisany do tej pory:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
</body>
</html>Teraz możemy bez przeszkód używać polskich znaków w witrynie WWW.
Tytuł strony
Dodanie tytułu strony wyświetlającego się na górnym pasku przeglądarki internetowej jest bardzo proste i analogiczne do wcześniejszych wersji HTML’a. Musimy po prostu użyć znacznika <title> </title> w sekcji head:
<title>Tytuł strony...</title>
Cały kod:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Tytuł strony...</title>
</head>
<body>
</body>
</html>Nasz kod możemy zapisać już w jakimś pliku z rozszerzeniem .html i uruchomić go w przeglądarce (klikając dwa razy na ikonę). Do zapisu naszego kodu, możemy użyć dowolny edytor tekstowy jak notatnik (odradzam użycie notatnika, ze względu na problemy z kodowaniem znaków) bądź Notepad++ albo coś bardziej rozbudowanego na przykład Sublime Text.
Efekt naszego kodu po uruchomieniu w przeglądarce Google Chrome:
Na tą chwilę, nie będziemy wracać już do głowy dokumentu HTML, w dalszej części tego artykułu zajmiemy się elementami wizualnymi.
Ciało dokumentu HTML
Jak już wspomniałem w sekcji body umieszcza się elementy widoczne dla internauty. Nie będziemy się tu rozdrabniać nad szczegółami i od razu napiszmy pełny kod z wykorzystaniem znaczników wspomnianych na początku tego artykułu:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Tytuł strony...</title>
</head>
<body>
<header>
Nagłówek
</header>
<nav>
Menu główne
</nav>
<section>
<article>
Zawartość artykułu
</article>
</section>
<aside>
Kolumna boczna
</aside>
<footer>
Stopka
</footer>
</body>
</html>Jak widać na początku mamy oczywiście nagłówek (header), poniżej menu główne (nav) dalej kolumnę główną (section) w której jest artykuł (article) oraz kolumnę boczną (aside) i na samym dole stopkę (footer). W ten sposób zbudowana jest większość stron internetowych (przykładem jest ten blog).
Po uruchomieniu powyższego kodu w przeglądarce WWW otrzymamy taki efekt:
Na razie nie mamy nic specjalnego (kod ten trzeba jeszcze ostylować) ale już pierwsze rzeczy możemy zauważyć. Jak widać wszystko zostało ułożone jedno pod drugim, stało się tak gdyż elementy: header, nav, section, article, aside oraz footer są blokowe czyli układają się jeden na drugim. Można oczywiście „zaburzyć” taki układ poszczególnych bloków stosując style CSS 3.
Tym sposobem zbudowaliśmy podstawowy szkielet witryny WWW, który na dalszych etapach prac można rozbudowywać o nowe elementy (o ile zajdzie taka potrzeba) czy dodawać do poszczególnych bloków przeróżną treść.
Wszystko ślicznie ładnie. Może coś w temacie snippetów? Jak sobie z nimi radzić?
Wszystko będzie w kolejnych częściach ;) Obecnie chcę opisać parę rzeczy z SQL i potem będę opisywał kolejne rzeczy z HTML 5 ;)
Jak wstawić obrazek leniwca?
< img src="adresObrazka" / >
Najlepiej otworzyć za pomocą danej przeglądarki plik jpg i skopiować w górnym pasku przeglądarki ścieżkę pliku z dysku tak jak ja to zrobiłem i po kłopocie :-D
Tylko pamiętajcie, że po załadowaniu strony na serwer, taki adres nie będzie poprawny.
Ale Panie. Trzeba było napisać, że nazwa strony to index.html
siemaneczkoooo