TS TworcaStron.pl.

Podstawy HTML5

To nie jest kurs ani poradnik HTMLa. Chciałem poruszyć tylko kilka kwestii, które być może nie zawsze są jasne.

Dzisiejszy wpis będzie raczej dla laików jeśli chodzi o HTML5. Mimo, że sama piąka htmla już trochę istnieje to do tej pory można bez problemu znaleźć strony, które źle z niej korzystają lub w dalszym ciągu mieszają z xHTML. Postaram się przedstawić podstawy składni, sktrukurę etc. Jeżeli nie wiesz dlaczego właśnie HTML5 a nie jego podobna wersja xHTML to zapraszam do wpisu „Czy HTML5 jet naprawdę taki fajny?”

Podstawowa struktura

[html]
<!DOCTYPE html> <!– linijka mówi o tym, że owy dokument jest dokumentem typu HTML–>
<html>
<head> <!– nagłówek –>
<meta charset="utf-8"> <!– kodowanie strony, w 90% przypadów będzie to UTF-8 –>
<title>Tytuł strony</title> <!– tytuł strony –>
</head> <!– koniec nagłówka nagłowka –>
<body>
zawartość strony…
</body>
</html>
[/html]

Strukturę pewnie zna każdy, ale żeby dopełnić formalności kilka linijek, które standardowo umieszcza się w sekcji nagłowka:

[html]<meta name="description" content="">[/html]

– opis strony (widoczny w Google), ma wpływ na pozycjonowanie

[html]<meta name="keywords" content="">[/html]

– słowa kluczowe, ma wpływ na pozycjonowanie

[html]<meta name="viewport" content="width=device-width, initial-scale=1">[/html]

– linijka dodawana gdy strona ma być responsywna (aby zwyczajnie nam się automatycznie nie zmniejszała na innych urządzeniach)

[html]<link rel="stylesheet" href="style.css">[/html]

– link do naszego pliku CSS

[html]<script src="main.js"></script>[/html]

– link do pliku JS

[html]<link href="img/favicon.png" type="image/x-icon" rel="shortcut icon">[/html]

– link do favicona (czyli ikonki wyświetlanej na kartach przeglądarki)

To są takie stałe, podstawowe elementy, które znajdują się praktycznie na każdej stronie. Tego jest w internetach bardzo dużo, więc żeby się nie powtarzać przejdźmy do czegoś konkretniejszego…

Domykać czy nie domykać?

Do tej pory istnieje pozostałość po języku xHTML czyli zamknięte tagi krótkie, np.  <br/> <img…./> <input /> również wszystkie meta tagi w nagłówkach były domykane, np. <meta charset=”utf-8″ …/>. HTML5 nie jest kontynuacją xHTMLa, ale jest z nim kompatybilny, dlatego zamykanie tagów nie jest wymagane (ale wciąż dozwolone). Oznacza to więc, że zarówno <br/> jak i <br> są poprawne.
Uwaga bo to nie wszystko, możemy nawet nie domykać kilku tagów DŁUGICH, np. tagu <p>. Taki kod będzie w dalszym ciągu poprawny:

[html]
<div>
<p>ala ma kota
</div>
[/html]

Kod jest poprawny jednak osobiście polecam takie tagi zamykać, ze względu na czytelnosć.

Do pewnego etapu większość osób i tak zamykała tagi KRÓTKIE ponieważ nie wszystkie przeglądarki wspierały HTML5. Jest to raczej przeszłość i jeżeli chcesz tworzyć strony w ładnych, czystym HTML5 to nie używaj zamkniętych tagów.

Duże czy małe litery

To jakie litery zastosoujemy w tagach to czysta formalność. Nie ma żadnego znaczenia na działanie kodu. Czyli wszystkie poniższe kombinajce będą działające:

[html]
<Section>…</SECTION>
<SECTION>…</section>
<section>…</section>
[/html]

Jednak dobrze trzymać się liter małych, z kilku powodów. Kod będzie czytelniejszy, łatwiejszy do pisania, domyślnie przyjęło się, że piszemy je małymi literami. To samo tyczy się atrybutów (class, id..).

Za dużo divów

Częstym błędem (który chyba opisałem w darmowym mini poradniku) jest nadużywanie divów. HTML5 wprowadził nam nowe tagi aby ten kod był bardziej logiczny. Dla tego dostaliśy takie znaczniki jak:

<header> nagłówek strony/sekcji
<section> jakaś sekcja, zbiór powiązanych ze sobą elementów
<article> jak się można domyśleć, jakaś treść, często obejmuje wpisy na blogach
<nav> nawigacja
<aside> treść niezwiązana ze stroną (mogą to być reklamy)
<footer> stopka strony/elementu
<main> główna treść na stronie
Ok. Skoro mamy tyle tagów to dlaczego tak wiele osób używa wyłącznie <div> <div> <div>?
Użyj tych znaczników raz, drugi, trzeci a będzie to już dla Ciebie normą. Przy ich stosowaniu nawet dla samego kodera jest to ułatwienie ponieważ dużo łatwiej rozeznać się w kodzie.

Strona bez html, body, head?

Na koniec mniej popularna ciekawostka. HTML5 pozwala nam na pominięcie tagów html, body i head. Czy taka konstrukcja będzie poprawna:

[html]
<!doctype html>
<title>Moja strona w HTML5</title>

<h1>Witaj na mojej stronie</h1>
<p>Lorem ipsum….</p>
[/html]

Piszę to jako ciekawostka, ponieważ o ile jest to teoretycznie dozwolone to póki co nie do końca zalecane.

Czy HTML5 jest naprawdę taki fajny?

Być może się ostatnio rozleniwiłem a może to długi weekend, ale dzisiaj będzie dosyć krótko:)

Temat wpisu może już trochę spóźniony, w końcu HTML5 działa już od kilku lat, ale do dzisiaj wiele osób nie do końca zdaje sobie sprawę dlaczego HTML5 znacząco wpłynęło na tworzenie stron, i że nie jest to tylko dodanie paru nowych tagów do poprzedniej wersji.

 

Geneza HTML

Żeby lepiej zrozumieć wspaniałość HTML5 dobrze będzie chociaż mniej więcej poznać historię tego języka. Początki języka sięgają aż 1989/1991 roku, kiedy to posiadał tylko 22 znaczniki. Przez następne lata język się rozwijał, nabierał nowych znaczników itd. W 1996 zaangażowała się dobrze znana organizacja World Wide Web Consortium (W3C)  a w roku 2000 stał się międzynarodowym standardem. Wtedy stało się też coś ciekawego…

Powstał całkowicie ODDZIELNY język znaczników o nazwie XHTML, który miał zostać następną HTML. Niestety albo i sety, losy potoczyły się inaczej i ze względu na problemy z Internet Explorerem (już wtedy był „super” kompatybilny :D) owym następną nie rozstał, ale także nie zniknął. Od tej pory obok siebie istniały 2 języki, które były jednocześnie stosowane (HTML i XHTML). Pomiędzy 2 językami istnieje wiele różnic, z których jestem pewien wiele osób nie zdaje sobie sprawy i w wielu przypadkach do dziś języki te są mieszane.

Ale wracając do rzeczy… Przez cały czas rozwoju pojawiało się wiele problemów z kompatybilnościami przeglądarek (dlatego kiedyś więcej wysiłku trzeba było włożyć w to, aby na każdej przeglądarce strona wyglądała tak samo). HTML w wersji 4.01 odegrał ważną rolę ponieważ utworzył dosyć spójną specyfikację, a XHTML wykorzystał go jako swój grunt dlatego wydawało się, że dobrze rokował. Z czasem jednak ta droga została uznana za złą i dalszy rozwój został porzucony na rzecz HTML 5.

Tak więc z dwóch oddzielnych języków HTML i XHTML powstał znany nam dzisiaj HTML5. Dzięki temu mamy dzisiaj praktycznie całkowite wsparcie wszystkich rozwijanych przeglądarek, mamy jedne standard i wielkie możliwości.

 

Zalety HTML5

Żeby zbytnio nie mieszać. Jakie są konkretne plusy z powstania HTML5:

Wady HTML5

Język sam w sobie nie ma szczególnych wad. Jeśli zależy nam na znalezieniu takowych to trzeba byłoby wziąć się za jego zastosowania w konkretnych sytuacjach:)

 

Przyszłość HTML5

Skoro wydaje się, że nasza piątka ma same zalety to jaka czego ją przyszłość w świecie dynamicznie rozwijających się technologii?

Najnowszy HTML wykorzystywany jest przede wszystkim do tworzenia stron i na chwile obecną nawet nie powstaje nic co mogłoby go zastąpić. Ale nie jest to jego jedyne zastosowanie. Możemy zobaczyć coraz więcej gier stworzonych za pomocą piątki, np:

https://www.cubeslam.com/mscdnb
https://missile-game.bwhmather.com

W tej chwili rozwijający się rynek nie jest zagrożeniem dla HTML5 ale wręcz sprzyja jego szybkiemu rozwojowi, dzięki nowych wspierającym go technologiom.

Odpowiadając więc na pytanie w tytule „Czy HTML5 jest naprawdę taki fajny?” – stanowczo odpowiadam TAK! 🙂