Kiedy zaczniesz uczy\u0107 si\u0119 HTML i poznasz nowe techniki jakie oferuje dzi\u0119ki oferowanym znacznikom. Prawdopodobnie b\u0119dziesz chcia\u0142 samodzielnie zbudowa\u0107 sw\u00f3j pierwszy szablon, aby u\u017cywa\u0107 go jako gotowca w swoich przysz\u0142ych projektach. Na pocz\u0105tku zalecam w celu utrwalenia pisanie go z ka\u017cd\u0105 now\u0105 stron\u0105 od nowa. Utrwali to twoje wiadomo\u015bci z tego zakresu, dopiero z czasem kiedy b\u0119dziecie chcieli nauczy\u0107 si\u0119 czego\u015b bardziej zaawansowanego,
a wszystkie tagi b\u0119d\u0105 ju\u017c zapami\u0119tane w waszych g\u0142owach przyjdzie ten czas w kt\u00f3rym musimy przygotowa\u0107 w\u0142a\u015bnie taki szablon. Wi\u0119c zaczynajmy.<\/p>\n\n\n\n\n\n\n\n
W tym artykule przyjrzymy si\u0119, jak prawid\u0142owo stworzy\u0107 prawid\u0142ow\u0105 struktur\u0119 zgodn\u0105 ze standardem W3C zacz\u0105\u0107 od tego. Zacznijmy od prostej strony HTML5:<\/p>\n\n\n\n
<html lang=\"pl\">\n <head>\n <meta charset=\"utf-8\">\n <title>Tytu\u0142 naszego szablonu HTML5<\/title>\n <meta name=\"description\" content=\"Opis\">\n <meta name=\"author\" content=\"Autor\">\n <link rel=\"stylesheet\" href=\"css\/styles.css?v=1.0\">\n <\/head>\n <body>\n <script src=\"js\/scripts.js\"><\/script>\n <\/body>\n <\/html> <\/code><\/pre>\n\n\n\nPo stworzeniu naszego szablonu, przeanalizujmy jego najwa\u017cniejsze cz\u0119\u015bci\u0105 oraz znacznikom.<\/p>\n\n\n\n
Doctype<\/h5>\n\n\n\n
W pierwszej kolejno\u015bci mo\u017cemy zauwa\u017cy\u0107 deklaracj\u0119 typu dokumentu. Jest to po prostu spos\u00f3b na poinformowanie przegl\u0105darki lub innego interpretera o typie dokumentu, kt\u00f3ry przetwarza. W przypadku pliku HTML oznacza to konkretn\u0105 wersj\u0119 plus we wcze\u015bniejszych wersjach okre\u015blenie typu dokumentu kt\u00f3ry dzieli\u0142 si\u0119 na trzy tryby : strict, transitional oraz frameset. W nowszej wersji nie musimy si\u0119 ju\u017c przejmowa\u0107 okre\u015blaniem wcze\u015bniej wymienionych typ\u00f3w. Znacznik <!doctype><\/code> zawsze powinien znajdowa\u0107 si\u0119 na pocz\u0105tku dokumentu.<\/p>\n\n\n\nHTML4 – typu: frameset<\/h6>\n\n\n\n<!DOCTYPE HTML PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01 Frameset\/\/EN\"\n \"http:\/\/www.w3.org\/TR\/html4\/frameset.dtd\"><\/code><\/pre>\n\n\n\nJednak\u017ce ten d\u0142ugi ci\u0105g tekstu do\u0142\u0105czony do znacznika dokumentu tak naprawd\u0119 nie powoduje nic krzywdz\u0105cego dla u\u017cytkownika poza zmuszeniem przegl\u0105daj\u0105cych nasze witryny do pobrania kilku dodatkowych bajt\u00f3w. Obecnie wraz z nadej\u015bciem HTML 5 pozbyto si\u0119 tych wszystkich obrzydliwo\u015bci. Wszystkiego czego potrzebujemy to :<\/p>\n\n\n\n
HTML5<\/h6>\n\n\n\n<!DOCTYPE html><\/code><\/pre>\n\n\n\nProsto i na temat prawda. Znacznik doctype mo\u017ce by\u0107 zapisany za pomoc\u0105 wielkich, ma\u0142ych liter lub pomieszanie. Mo\u017cesz tak\u017ce zauwa\u017cy\u0107, \u017ce z deklaracji znikn\u0119\u0142o oznaczenie wersji w tym przypadku “5” . Chodzia\u017c obecna interpretacja znacznik\u00f3w internetowych znana jest jako “HTML 5”, to tak naprawd\u0119 jest to ewolucj\u0105 poprzednich standard\u00f3w HTML-a tak samo jak przysz\u0142e wersje b\u0119d\u0105 po prostu rozwini\u0119ciem tego co jest oferowane obecnie.<\/p>\n\n\n\n
Poniewa\u017c wsp\u00f3\u0142czesne przegl\u0105darki zazwyczaj musz\u0105 obs\u0142ugiwa\u0107 ca\u0142\u0105 wczytywan\u0105 przez nie tre\u015b\u0107 zawart\u0105 w sieci Web, w takim wypadku nie mog\u0105 polega\u0107 one tylko na typie dokumentu, kt\u00f3ry podpowiada\u0142 by im kt\u00f3re funkcje powinny by\u0107 obs\u0142ugiwane w danym dokumencie, a kt\u00f3re nie. Innymi s\u0142owy, samo okre\u015blenie typu dokumentu nie zapewni zgodno\u015bci napisanych przez Was stron w standardzie HTML 5, jest to tak naprawd\u0119 zale\u017cne od przegl\u0105darki. <\/p>\n\n\n\n
Tak naprawd\u0119 obecnie mo\u017cesz u\u017cy\u0107 jednego z dw\u00f3ch wcze\u015bniejszych zapis\u00f3w doctyp\u00f3w z nowymi elementami wprowadzonymi w HTML 5, a strona b\u0119dzie renderowana tak samo, jak w przypadku nowego typu dokumentu. Pewnie spytacie, ale jak to ? Dzieje si\u0119 tak dla zapewnienia wstecznej kompatybilno\u015bci. Wyobra\u017acie sobie, \u017ce po wprowadzenia nowego standardu HTML 5 oraz obs\u0142ugiwania tylko jego przez przegl\u0105darki nie mogliby\u015bcie otworzy\u0107 wi\u0119kszo\u015bci swoich ulubionych stron. Na pewno takie dzia\u0142ania by\u0142y by dosy\u0107 bolesne w skutkach :)<\/p>\n\n\n\n
Element html<\/code><\/h5>\n\n\n\nNast\u0119pnie w naszym szablonie znajdziemy element kt\u00f3ry nie zmieni\u0142 si\u0119 znacz\u0105co w HTML5. W naszym przyk\u0142adzie mo\u017cesz zauwa\u017cy\u0107, i\u017c zawarli\u015bmy atrybut lang<\/code> z warto\u015bci\u0105 pl<\/code>. Oznacza to i\u017c j\u0119zyk dokumentu b\u0119dzie odczytywany jako polski. W sk\u0142adni opartej na XHTML<\/code> nale\u017ca\u0142oby do\u0142\u0105czy\u0107 atrybut xmlns<\/code>. W HTML5 nie jest to ju\u017c wymagane, a nawet atrybut lang nie jest tak\u017ce niezb\u0119dny, aby dokument m\u00f3g\u0142 zosta\u0107 poprawnie zinterpretowany w celu prawid\u0142owego dzia\u0142ania.<\/p>\n\n\n\nWygl\u0105da to w spos\u00f3b nast\u0119puj\u0105cy, wraz z tagiem zamykaj\u0105cym :<\/p>\n\n\n\n
<!doctype html>\n <html lang=\"en\">\n ....\n <\/html> <\/code><\/pre>\n\n\n\nElement head<\/code><\/h5>\n\n\n\nKolejna cz\u0119\u015b\u0107 naszego szablonu to sekcja head[\/head] . Pierwsza linia wewn\u0105trz sekcji [code]head<\/code> to ta, kt\u00f3ra definiuje kodowanie znak\u00f3w w dokumencie. To kolejny element, kt\u00f3ry zosta\u0142 uproszczony od czasu XHTML<\/code> i HTML4 na ten moment jest opcjonalny, ale zalecany. Wcze\u015bniej zapis mo\u017cna by\u0142o wykona\u0107 w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n\n\n\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\"><\/code><\/pre>\n\n\n\nW HTML 5 zosta\u0142o uproszczone to do kompletnego minimum. Obecnie tak <\/p>\n\n\n\n
<meta charset=\"utf-8\"><\/code><\/pre>\n\n\n\nW prawie wszystkich przypadkach warto\u015bci\u0105 u\u017cywan\u0105 przez Was w swoich szablonach, b\u0119dzie utf-8<\/code> . Pe\u0142ne wyja\u015bnienie kodowania znak\u00f3w wykracza poza zakres tego artyku\u0142u i prawdopodobnie nie by\u0142o by dla Ciebie na ten moment interesuj\u0105ce. Niemniej jednak, je\u015bli chcecie zag\u0142\u0119bi\u0107 nieco bardziej w ten temat, mo\u017cecie poczyta\u0107 dokumentacje na W3C lub WHATWG.<\/p>\n\n\n\n\n<\/i>\nUwaga<\/h5>\n
aby mie\u0107 pewno\u015b\u0107, \u017ce wszystkie przegl\u0105darki poprawnie odczytuj\u0105 kodowanie zawartych na stronie znak\u00f3w, ca\u0142a deklaracja kodowania znak\u00f3w musi znajdowa\u0107 si\u0119 gdzie\u015b w obr\u0119bie pierwszych 512 znak\u00f3w dokumentu. Powinien r\u00f3wnie\u017c pojawi\u0107 si\u0119 przed jakimikolwiek elementami opartymi na tre\u015bci (takimi jak element <title><\/strong>, kt\u00f3ry nast\u0119puje po nim w naszej przyk\u0142adowej witrynie) <\/p>\n<\/div><\/p>\n\n\n\nMog\u0142abym napisa\u0107 wiele wi\u0119cej na ten temat, ale przecie\u017c nie chcemy, aby\u015b przypadkiem zasn\u0105\u0142 \ud83d\ude34 wi\u0119c oszcz\u0119dz\u0119 Wam tych szczeg\u00f3\u0142\u00f3w! Na razie b\u0105d\u017amy zadowoleni, \u017ce mo\u017cemy zaakceptowa\u0107 t\u0119 uproszczon\u0105 deklaracj\u0119 i przejd\u017amy do nast\u0119pnej cz\u0119\u015bci naszego szablonu:<\/p>\n\n\n\n
Nowe tagi w HTML 5<\/h5>\n\n\n\n
Kiedy wprowadzono HTML5, zawiera\u0142 szereg nowych element\u00f3w, takich jak <article><\/code> i <section><\/code>. Mo\u017cesz pomy\u015ble\u0107, \u017ce by\u0142by to powa\u017cny problem w przypadku obs\u0142ugi starszych przegl\u0105darek dla nowszych element\u00f3w, ale nie masz racji. Wi\u0119kszo\u015bci przegl\u0105darek tak naprawd\u0119 nie obchodzi, jakich tag\u00f3w u\u017cywasz. Gdyby\u015bmy mieli dokument HTML z tagiem <recipe><\/code> (lub nawet tagiem <ziggy><\/code>), a tw\u00f3j CSS posiada\u0142 do tego elementu jakie\u015b style, prawie ka\u017cda przegl\u0105darka rozpozna\u0142a by je bez zarzutu jako znaczniki, stosuj\u0105c przypisany styl bez zarzutu.<\/p>\n\n\n\nOczywi\u015bcie taki hipotetyczny opisany wy\u017cej dokument nie zosta\u0142by zweryfikowany poprawnie oraz mo\u017ce mie\u0107 problemy z dost\u0119pno\u015bci\u0105 niekt\u00f3rych zasob\u00f3w, ale renderowa\u0142by si\u0119 poprawnie w prawie wszystkich przegl\u0105darkach - wyj\u0105tkiem s\u0105 stare wersje Internet Explorera (IE). Przed wersj\u0105 9 IE zapobiega\u0142 stylowaniu nierozpoznawalnych element\u00f3w. Nierozpoznane elementy by\u0142y postrzegane przez silnik renderuj\u0105cy jako \u201enieznane elementy\u201d, dlatego nie mo\u017cna by\u0142o zmieni\u0107 ich wygl\u0105du ani zachowania. Obejmuje to nie tylko utworzone przez nas w\u0142asne tagi, ale tak\u017ce nowo wprowadzone elementy HTML 5 \ud83d\ude28 , kt\u00f3re nie zosta\u0142y jeszcze zdefiniowane dla tej przegl\u0105darki w czasie gdy by\u0142a ona wprowadzana \ud83d\ude2e.<\/p>\n\n\n\n
Reszta jest histori\u0105<\/h5>\n\n\n\n
Patrz\u0105c na reszt\u0119 naszego szablonu pocz\u0105tkowego, znajdziemy tam zwyk\u0142y element <body><\/code> wraz z jego zamykaj\u0105cym tagiem i zamykaj\u0105cym tagiem <\/html><\/code>. Mamy r\u00f3wnie\u017c odniesienie w postaci linku do pliku JavaScript wewn\u0105trz elementu <script><\/code>. <\/p>\n\n\n\nPodobnie jak w przypadku omawianego wcze\u015bniej tagu <link><\/code>, tag <script><\/code> nie wymaga deklarowania atrybutu <type><\/code><\/p>\n\n\n\n<script src=\"js\/scripts.js\" type=\"text\/javascript\"><\/script><\/code><\/pre>\n\n\n\nPoniewa\u017c JavaScript na ten moment jest jedynym j\u0119zykiem skryptowym u\u017cywanym w sieci, wszystkie przegl\u0105darki zak\u0142adaj\u0105, \u017ce u\u017cywasz w\u0142a\u015bnie jego, nawet je\u015bli nie deklarujesz tego wyra\u017anie, w atrybucie <type><\/code>.
W dokumentach HTML5 jest to po prostu opcjonalne :<\/p>\n\n\n\n<script src=\"js\/scripts.js\"><\/script><\/code><\/pre>\n\n\n\nNajlepsz\u0105 praktyk\u0105 jest umieszczanie tagu <script><\/code> na ko\u0144cu naszego szablonu, zgodnie z najlepszymi praktykami odno\u015bnie osadzania skrypt\u00f3w na stronie. Ma to zwi\u0105zek z prawid\u0142owym wczytaniem skrypt\u00f3w po za\u0142adowaniu dokumentu, posiada tak\u017ce zalety optymalizacyjne pozwalaj\u0105ce zwi\u0119kszy\u0107 szybko\u015b\u0107 wczytywania strony.<\/p>\n\n\n\nCo dalej<\/h5>\n\n\n\n
Po przyswojeniu sobie jak pisa\u0107 prawid\u0142owo szablon html, mo\u017cesz zaj\u0105\u0107 si\u0119 wykorzystaniem stworzonego szablonu na przysz\u0142e potrzeby do tworzenia prostych witryn internetowych. Je\u017celi czujesz g\u0142\u00f3d dalszej wiedzy, proponuje zapozna\u0107 si\u0119 z artyku\u0142em odno\u015bnie nowych tag\u00f3w wyst\u0119puj\u0105cych w HTML 5. Mo\u017cesz tak\u017ce przejrze\u0107 pozosta\u0142em artyku\u0142y na pewno znajdziesz co\u015b ciekawego dla siebie.<\/p>\n\n\n\n
\ud83d\udc47\ud83d\udc47\ud83d\udc47 Je\u017celi podoba\u0142 Ci si\u0119 ten artyku\u0142 zostaw po sobie \u015blad w komentarzach \ud83d\udc47\ud83d\udc47\ud83d\udc47<\/h6>\n","protected":false},"excerpt":{"rendered":"
Kiedy zaczniesz uczy\u0107 si\u0119 HTML i poznasz nowe techniki jakie oferuje dzi\u0119ki oferowanym znacznikom. Prawdopodobnie b\u0119dziesz chcia\u0142 samodzielnie zbudowa\u0107 sw\u00f3j pierwszy szablon, aby u\u017cywa\u0107 go jako gotowca w swoich przysz\u0142ych projektach. Na pocz\u0105tku zalecam w celu utrwalenia pisanie go z ka\u017cd\u0105 now\u0105 stron\u0105 od nowa. Utrwali to twoje wiadomo\u015bci z tego zakresu, dopiero z czasem […]<\/p>\n","protected":false},"author":1,"featured_media":305,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[19],"class_list":["post-295","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","tag-html"],"_links":{"self":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/comments?post=295"}],"version-history":[{"count":2,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/295\/revisions"}],"predecessor-version":[{"id":334,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/295\/revisions\/334"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/media\/305"}],"wp:attachment":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/media?parent=295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/categories?post=295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/tags?post=295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}