Tagi details oraz meter w HTML5

HTML5 ikonka

HTML5 ikonkaCoraz większa liczba projektantów stron będzie używać HTML5, gdyż stawać się on będzie standardem w tworzeniu stron internetowych. Jest znacznie uproszczony względem swojej poprzedniej wersji, ale przede wszystkim daje dużo większe możliwości.

Dziś opisać chciałbym działanie nowych tagów – details oraz meter.

Details z angielskiego znaczy szczegóły, jest to tag, dzięki któremu możemy ukryć interesujące nas informacje i wyświetlić jest po kliknięciu w wyżej wymieniony wyraz, tzn.  szczegóły. Jest to bardzo przydatne, wcześniej podobny efekt nie był możliwy do wykonania w czystym HTML, musielibyśmy skorzystać z kombinacji JavaScript i CSS. Poniżej pokażę kod odpowiedzialny za taki właśnie efekt:

<section class="webdesign_details">
<h1>Tworzenie stron w HTML5</h1>
<details>
- najnowsze rozwiązania
- efektywniejsze pozycjonowanie
- wysoka wartość semantyczna strony
</details>
</section>

Ten kod wyświetli nam nagłówek stopnia a pod spodem trójkąt z napisem szczegóły, po którego kliknięciu wyświetli się nam lista zalet tworzenia stron w HTML5.

Drugim tagiem, na który chciałbym zwrócić uwagę to meter. Jest to nic innego jak pasek ładowania, tyle, że statyczny. Wyświetla on progres, stan „załadowania” jakiegoś komponentu, skryptu…  Oto jak wygląda jest kod:

<p>Strona załadowana:</p>
połowie: <meter min=0 max=20 value=10 style='width: 200px;'></meter><br>
w 25%: <meter min=0 max=20 value=5></meter>

Powyższy kod wyświetli nam taki rezultat:

meter w html5

Więcej o tworzeniu stron w HTML5 dowiedzieć się możecie na http://grzegorzbielak.pl/

You can leave a response, or trackback from your own site.

Leave a Reply

Powered by WordPress | Designed by: NewWpThemes | Thanks to Free WordPress Themes