HTML5 – rewolucja czy ewolucja? cz. 1 - lukasz

Transkrypt

Plik pobrano z www.lukasz-socha.pl
Tytuł: HTML5 – rewolucja czy ewolucja? cz. 1
Ostatnia aktualizacja: 3.09.2011
HTML5 – rewolucja czy ewolucja? cz. 1
Wstęp
Od kilku lat trwają intensywne prace nad nową wersją HTML. Najnowsze przeglądarki już teraz
pozwalają wykorzystywać niektóre możliwości HTML5. Mimo że nowy standard jest dopiero w
fazie opracowywania sądzę, że warto zapoznać się z nowościami.
Usprawnienia
Nowa wersja HTML upraszcza użycie niektórych znaczników. Poniżej prezentuję kilka z nich.
Na początku każdego dokumentu HTML4 wstawiamy DOCTYPE w stylu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Długie i trudne do zapamiętania, prawda? W dokumencie w wersji 5 wystarczy tylko:
<!DOCTYPE HTML>
Podobnie sprawa ma się z ustawieniem kodowania strony. W HTML4 piszemy:
<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
Natomiast od wersji 5 znacznik będzie wyglądać następująco:
<meta charset="UTF-8"/>
Obecnie gdy chcemy dołączyć plik CSS piszemy:
<link rel="stylesheet" type="text/css" href="style.css">
W nowej wersji nie musimy już dodawać atrybutu type:
<link rel="stylesheet" href="style.css" />
Podobne usprawnienie występuje przy dołączaniu plików JavaScript:
<script type="text/javascript" src="file.js"></script> //HTML4
<script src="file.js"></script> //HTML5
Może są to tylko kosmetyczne zmiany, ale z pewnością ułatwią życie każdemu twórcy stron www.
Warstwa semantyczna
HTML w wersji 5 dostarcza grupę nowych znaczników, które pozwolą usystematyzować treść
dokumentu. Jest to niewątpliwie duży krok w kierunku stworzenia semantycznej sieci. Umożliwi to
lepsze indeksowanie stron przez roboty wyszukiwarek, a więc wyniki wyszukiwań staną się
trafniejsze.
Materiał przeznaczony tylko do własnego użytku. Publikacja na innych stronach wyłącznie za zgodą autora.
[email protected]
1/6
Lista nowych znaczników:
• <header> - kontener na informacje wprowadzające (np. tytuł, logo, wyszukiwarka,
nawigacja)
• <footer> - kontener na informacje o kontenerze nadrzędnym (np. autor, prawa autorskie)
• <nav> - zawiera linki nawigacyjne (menu)
• <section> - grupuje tematycznie powiązaną zawartość
• <article> - zawiera główną treść przeznaczoną do syndykacji (np. przez kanał RSS). Treścią
mogą być na przykład: artykuły, posty na blogu lub forum
• <aside> - kontener na mniej znaczące treści (np. panel boczny – ang. sidebar). Przykładem
mogą być reklamy, widgety
• <dialog> - służy do wyróżnienia rozmowy:
<dialog>
<dt>Hej, co tam?</dt>
<dd>Hej, a piszę artykuł na bloga. A u ciebie co tam?</dd>
<dt>Aa czytam sobie</dt>
<dd>A to super :)</dd>
</dialog>
• <figure> - służy do powiązania podpisu z obiektem:
<figure>
<img src="obrazek.jpg" alt="" />
<legend>podpis</legend>
</figure>
• <hsgroup> - kontener dla kilku nagłówków, np dla tytułu i podtytułu
Znacznik <section> służy do ogólnego grupowania treści, <article> zawiera już ściśle określone
elementy, które są główną zawartością strony. Natomiast <header>, <footer>, <aside>, <nav> są
kontenerami dla specyficznych treści, takich jak: wprowadzenie, nawigacja, stopka.
Warto mieć na uwadze to, że nowe znaczniki semantyczne nie formatują wyglądu – do tego służy
CSS.
Tak może wyglądać przykładowy wpis na blogu w HTML5:
<!DOCTYPE HTML>
<html>
<head>
<title>Przykład strony w HTML5</title>
</head>
<body>
<header>
<h1><a href="#">Jakiś tam blog :)</a></h1>
<nav>
<ul>
<li><a href="#">Kategoria 1</a></li>
[email protected]
2/6
<li><a href="#">Kategoria 2</a></li>
</ul>
</nav>
</header>
<section>
<h1><a href="#">HTML5 - rewolucja czy ewolucja?</a></h1>
<article>
<p>HTML5 ułatwi życie twórcom stron, zgadzacie się?
</p>
<figure>
<img src="ilustracja.jpg" alt="" />
<legend>Fajny obrazek</legend>
</figure>
</article>
<dialog>
<dt>zgadzam się!</dt>
<dd>A ja nie</dd>
</dialog>
<nav><a href="">poprzedni wpis</a> <a href="">następny
wpis</a></nav>
</section>
<footer>
<p>Copyright all resrved.</p>
</foter>
</body>
</html>
Powyżej omówiłem znaczniki służące jako kontenery. HTML5 wprowadza również kilka innych
znaczników, np:
• <marks> - podświetlenie, np. wyszukiwanej frazy w tekście
• <time> - oznaczenie czasu:
<time datetime="2010-09-01">1 września 2010</time>
• <meter> - wartość numeryczna:
<meter min="0" max="100" value="55">55</meter>
• <progress> - pasek postępu:
<progress min="0" max="100" value="55%">55%</progress>
HTML w wersji 5 wprowadza wiele nowych znaczników. W tym wpisie przedstawiłem tylko te,
które wydają się najbardziej istotne. Pełna lista z opisem znajduje się na tej stronie.
Web Forms 2.0
Liczne zmiany nastąpią w tworzeniu formularzy. Wiele rzeczy (np. walidacja danych), które były
robione za pomocą JavaScriptu, teraz będzie można zrobić bezpośrednio w HTML. Ponadto
HTML5 udostępnia wiele nowych typów pól. W końcu tworzenie formularzy stanie się łatwiejsze i
przyjemniejsze – do tej pory były prawdziwym utrapieniem.
[email protected]
3/6
Autofocus
Gdy chcemy ustawić wskaźnik na konkretnym polu formularza nie musimy już używać JavaScriptu
– wystarczy atrybut autofocus:
<input name="field" type="text" autofocus="autofocus" />
Walidacja danych
Jest to zupełna nowość w HTML. Do tej pory walidację pól formularzy musieliśmy wykonywać za
pomocą PHP lub JS – teraz wystarczy sam HTML.
Dodając atrybut required wymagamy wypełnienie danego pola (w przeciwnym wypadku nie będzie
reakcji po kliknięciu na przycisk):
<input name="field" type="text" required="required" />
Istnieje także nowy typ pola number, który wymaga wpisania liczby w określonym zakresie:
<input name="number" type="number" min="0" max="99"
required="required" />
Dodano również dwa typy pól do wpisywania adresów stron oraz adresów e-mail. W końcu nie
trzeba będzie tworzyć do tego wyrażeń regularnych...
<input name="url" type="url" />
<input name="email" type="email" />
Dodatkowo istnieje możliwość stworzenia własnego wyrażenia regularnego. W tym celu dodajemy
atrybut pattern:
<input name="phone" pattern="\(\d\d\d\)-\d\d-\d" title="Should
match: (000)-00-0" type="text" />
Data i czas
Web Forms 2.0 wprowadza także nowe typy pól dla daty i czasu. Nie trzeba będzie już pisać
kalendarzy za pomocą JS.
<input name="date" type="date" />
Powoduje wyświetlenie kalendarza do wybrania daty.
[email protected]
4/6
<input name="datetime" type="datetime-local" />
Wyświetla kalendarz oraz pole do wpisania czasu w formacie hh:mm.
<input name="datetime" type="datetime" />
Działa tak samo, tylko że strefą czasową jest UTC.
<input name="time" type="time" />
Pole do wpisania czasu w formacie hh:mm.
<input value="2010-W42" type="week" />
Służy do wybrania całego tygodnia.
Suwak
Suwaki są bardzo dobrze znane programistom piszącym w C++ czy JAVA. Niestety w świecie
technologi www pojawią się dopiero wraz z HTML5:
<form>
<input type="range" name="range" />
Value: <output onformchange="this.value =
form.range.value"></output>
</form>
Kalkulator
Nowa wersja HTML umożliwia również wykonanie obliczeń matematycznych:
<form>
(a)<input name="a" step="any" value="0" type="number" /> *
(b)<input name="b" step="any" value="0" type="number" />
<br>a+b = <output name="c" onformchange="value = a.value *
b.value">0</output> (c)
<br>c * 2 = <output name="d" onformchange="value = c.value *
2">0</output> (d)
<br>d - a = <output name="result" onformchange="value = d.value
– a.value">0</output>
</form>
Więcej przykładów na tej stronie.
[email protected]
5/6
Listy rozwijane – datalist
W nowej wersji listy rozwijane nie będziemy tworzyć za pomocą <select>, tylko używając nowego
znacznika <datalist>:
<input list="browsers" />
<datalist id="browsers">
<option value="Safari">Safari</option>
<option value="Internet Explorer">Internet
Explorer</option>
<option value="Opera">Opera</option>
<option value="Firefox">Firefox</option>
</datalist>
HTML5 wprowadza wręcz rewolucję w tworzeniu formularzy. Ułatwi to z pewnością pracę i
pozwoli stworzyć bardziej interakcyjne strony www. A jak to wygląda w praktyce można zobaczyć
tu.
Zakończenie
HTML5 wprowadza wiele nowości. W tej części zaprezentowałem elementy dotyczące
semantycznej warstwy oraz tworzenia formularzy. W Kolejnej omówię aspekty multimedialne.
[email protected]
6/6

HTML5 – rewolucja czy ewolucja? cz. 1 - lukasz

Transkrypt

Podobne dokumenty

Technologie internetowe

html> html> Ramy dokumentu html Nagłówek

JS - obsługa formularzy

Ćw.1. Przykładowa walidacja formularza PoniŜsza strona wyświetla

Liczby Pierwsze

Struktura semantyczna i formularze

Kurs css - formularze - zmiana wyglądu css input

1 mySql i php – łączenie materiały dydaktyczne dla uczniów