HTML 5
Kilka miesięcy temu napisałem krótki tekst HTML 5 – czy to już?. Kilka osób wyraziło w komentarzach do tego tekstu swoje zainteresowanie tym językiem. Wydawało mi się wówczas, że na robienie stron w HTML 5 jest jeszcze za wcześnie. Argumentem, który przytaczałem wówczas, była zbyt duża popularność IE7. Internet Explorer w tej wersji trzymał się przez kilka miesięcy na poziomie 7%, ale w końcu spadł i to o ponad połowę w przeciągu jednego, czy dwóch tygodni. Oznacza to, że kurs z HTML-a 5 pojawi się jeszcze przed świętami.
Dziś na zachętę pokażę jak wygląda podstawowa struktura strony w HTML 5
<!DOCTYPE html> <html> <head> <meta charset=”utf-8” /> <title>Strona testowa</title> </head> <body> <div> <header></header> <nav> </nav> <h1>Strona testowa</h1> <article> <section></section> </article> <aside></aside> <footer></footer> </div> </body> </html> |
Już na pierwszy rzut oka widać znaczne uproszczenie w stosunku do wcześniejszych wersji. Pojawiły się też nowe znaczniki. W większości są to znaczniki blokowe odpowiadające elementowi div, ale są wzbogacone semantycznie. Można więc powiedzieć, że header to taki div ale przeznaczony na umieszczenie elementów nagłówka strony, nav to system nawigacyjny, footer to stopka strony, article – główna zawartość, section – logicznie wyodrębnione części, a aside to treści poboczne, uzupełniające
Dodanie znaczeń do elementów htmla jest dużym ułatwieniem. Dzięki temu kod strony jest bardziej zwięzły; eliminujemy potrzebę stosowania wielu dodatkowych klas i identyfikatorów. Prostsze jest też odwołanie się do konkretnych elementów w stylach CSS i w JavaScript.
HTML 5 może być zapisywany jako format html lub xml. W pierwszym przypadku możemy uprościć niektóre zapisy. Wartości atrybutów mogą pozostać niecytowane, jeśli nie zawierają spacji ani „”", „‘”, „=”, „<", i ">„. W przeciwnym wypadku musi być podawany przy pojedyncze lub podwójne cudzysłowy.
<input name=imie maxlength=200> <input name='imie' maxlength='200'> <input name="imie" maxlength="200"> <!-- Ale już w przypadku pola formularza "drugie imie" mamy tylko dwa warianty --> <input name='drugie imie' maxlength='200'> <input name="drugie imie" maxlength="200"> |
Wartość atrybutu wraz z „=” można pominąć całkowicie, jeśli jest pusty.
<input name=address disabled> <input name=address disabled=""> |
Czekam na kurs
Krótko i konkretnie…
jak będzie cały ten kurs z konkretami, to też będzie krótki, a to się wiąże, że szybko się przerobi i będzie nam łatwiej pisać w HTML 5…
Czekamy na kurs