Lsokolowski: /* Grupy elementów HTML5 */

2020-03-02T07:06:28Z

Grupy elementów HTML5

New page

{{Cat|HTML5}}

[[File:HTML5-logo.svg|thumb|200px|right|Officall HTML5 logo]]

== Gdzie zaczniemy? ==
Zanim zaczniemy poznawać możliwości HTML5, potrzebne będzie nam kilka przeglądarek zanistalowanych na komputerze, najlepiej po jednej z danego silnika.

W naszym przypadku na starcie wystarczy zainstalowany zestaw (Chrome, Firefox).

* http://www.google.pl/chrome
* http://www.mozilla.org/

Lista silników wyświetlania stron internetowych

* [http://pl.wikipedia.org/wiki/Gecko Gecko (Mozilla Firefox)]
* [http://pl.wikipedia.org/wiki/WebKit WebKit (Google Chrome, Safari)]
* [http://pl.wikipedia.org/wiki/Presto_%28silnik_przegl%C4%85darki%29 Presto (Opera)]
* [http://pl.wikipedia.org/wiki/Trident_%28silnik_przegl%C4%85darki%29 Trident (Internet Explorer)]

== Czy HTML5 jest gotowy? ==
* Pierwsze pytanie jakie się nasuwa, to czy możemy już korzystać z Kodu HTML5?
* Możemy przetestować każdą przeglądarkę pod względem jej możliwości rozumienia kodu HTML5, wpisując w danej przeglądarce stronę:

http://html5test.com/

[[File:Test5html.jpg|300px]]

* można odczytać i rozwinąć dokładnie jakie tag-i są obsługiwane przez daną przeglądarkę.
* od razu można zobaczyć z list poniżej, że jest wiele elementów, których przeglądarki jeszcze nie obsługują.
* Można również podglądnąć, które przeglądarki przodują w rozwoju, itp.

[[File:Test5html-timeline.jpg|600px]]

== Elementy CSS3 ==
* Jeżeli chcielibyśmy sprawdzić jakie nowe elementy CSS-owe są obsługiwane przez daną przeglądarkę, w tym pomoże nam strona:

http://fmbip.com/

[[File:Findmebyip.jpg|400px]]

* Jeżeli nie lubimy testować kodu a wolimy wyszukać na liście, z pomocą najbardziej przychodzi nam wikipedia:

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29

http://caniuse.com/

* Sprawdzenie w wersjach przegladarek czy działa wybrany element i na ile procentach przegladarek działa wybrany element HTML, css i inne.

== Prezentacja znaczników ==

Podglądniemy stronę www.nobleprog.pl, zobaczymy jak wyglądają elementy, używając nowych możliwości WebGL.

* wczytujemy stronę www.nobleprog.pl w przeglądarce Firefox.
* klikamy prawym myszy gdziekolwiek i wybieramy '''"Inspect Element (Q)"'''
* z dolnej rozwiniętej listwy wybieramy '''3D view'''
* jeżeli pojawi się błąd:

:'''"Could not initialise Tilt, please check the
:troubleshooting information available at http://get.webgl.org/troubleshooting"'''
:
:wpisujemy w pasku adresu '''about:config'''
:zatwierdzamy, że będziemy ostrożni
:w pozycji '''search:''' nad listą wpisujemy '''webgl'''
: zmieniamy 3 pozycję ''' webgl.disable ''' z '''true''' na '''false'''
:: webgl.force-enable ''' z '''true''' na '''false'''
:: webgl.osmesa ''' z '''true''' na '''false'''

: Zdarza się też, że nie można danej strony wyświetlić w WebGL. Jest wiele czynników: rodzaj karty graficznej, za stare sterowniki, sprzęt, itp.
* jeżeli wyświetli się, możemy '''przytrzymujac lewym myszy obracać ekran''' a '''przytrzymując prawym myszy przesuwać ekran'''

poniżej przykład.

[[File:Firefox-webgl.jpg|700px]]

== Lista znaczników z opisami ==

* Nie musimy "przegryzać sie" przez specyfikację '''W3C www.w3.org''' na stronie https://www.w3.org/TR/html5/
* powstały serwisy, na których znajdziemy opisy do czego służą nowe elementy HTML5 i jak je możemy wykorzystywać, jest też lista przykładowego kodu na stronie.

http://www.w3schools.com/

http://www.kurshtml.edu.pl/

http://html5doctor.com/

https://www.html5rocks.com/en/ (replaced by google web developers)

== Testowanie kodu ==
Można testować kod nawet bezpośrednio, np. na stronie:

http://liveweave.com/

https://codegeekz.com/best-code-playgrounds-for-developers/

http://www.colorzilla.com/

Tworzenie gradientów i wybieranie kolorów na stronie www

== Grupy elementów HTML5 ==
http://www.w3.org/html/logo/badge/html5-badge-h-connectivity-css3-device-graphics-multimedia-performance-semantics-storage.png

Nowe elementy TAG występujące w HTML5:
* [[HTML5_Introduction#DOCTYPE|Nagłówek]]
* [[HTML5_Introduction#SECTION|Sekcje]]
* [[HTML5_Introduction#ARTICLE|Artykuł]]
* [[HTML5_Introduction#Obrazki grupowanie i podpisy|Grupowanie]]
* [[HTML5_Introduction#TABELE|Tabelki]]
* [[HTML5_Introduction#FORMULARZE|Formularze]]
* [[HTML5_Introduction#INTERAKTYWNE_ELEMENTY|Interaktywne elementy]]
* [[HTML5_Introduction#Tekst edycja|Edycja]]
* [[HTML5_Introduction#ZA.C5.81.C4.84CZANE_ELMENTY|Załączane elementy]]
* [[HTML5_Introduction#TEKSTY|Teksty]]

== Elementy znaczników HTML5 ==
==== DOCTYPE ====

<syntaxhighlight lang="html4strict" >
<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
...
</body>
</html>
</syntaxhighlight>

==== Czytelna struktura dokumentu ====
==== HEADER, NAV, ASIDE, FOOTER ====
Jak widzimy mamy możliwość szybszego odnalezienia sie w kodzie.

[[File:Flexbox-holygrail.svg|300px]]

==== SECTION ====
W bloku sekcji mozemy zauważyć że przeglądarki mimo że użyty jest nagłówek 1 '''h1''' to w podglądzie jest różnej wielkości zwracajac uwage na paragraf '''P''' zostaje on tej samej wielkości nie zależnie gdzie sie znajduje w strukturze sekcji.
[[File:Html5-section.jpg|frame]]

<syntaxhighlight lang="html5" >
<section>
<h1>Level 1</h1>
<p>Text text text</p>

<section>
<h1>Level 2</h1>
<p>Text text text</p>

<section>
<h1>Level 3</h1>
<p>Text text text</p>
</section>

</section>

</section>
</syntaxhighlight>

==== ARTICLE ====
Przydatne Tagi w przypadku budowy powatarzajacych się części kodu takich jak komentarze lub forum

<syntaxhighlight lang="html5" >
<article>

<section>
<h1>Tytuł 1</h1>
<h2>Podtytuł 1</h2>
<p>Tekst 1</p>
<time datetime="2007-08-01T12:00Z">August 01st, 2007 at 12:00</time>
<h3><a href="#comment" >Comment</a></h3>
</section>

<section>
<h1>Tytuł 2</h1>
<h2>Podtytuł 2</h2>
<p>Tekst 2</p>
<time datetime="2007-08-01T12:00Z">August 01st, 2007 at 12:00</time>
<h3><a href="#comment" >Comment</a></h3>
</section>

</article>
</syntaxhighlight>

=== Obrazki grupowanie i podpisy ===
==== FIGURE, FIGCAPTION ====
Opisy obrazka mozna wykożystywać na różne sposoby w poniższy uzyskamy obrazek oraz pod nim podpis możemy również stwprzyć grupe 3 obrazków koło siebie z podpisem rozsciągnietym pod wszystkimi obrazkami podpisem oraz mueszczac tez możemy skróty do stron itp. Jeżeli nasze obrazki bedą za dłuże to obrazek przeskakuje do kolejnej linii.
[[File:Html5-figure-figcaption.jpg|frame]]

<syntaxhighlight lang="html5" >
<figure>

<img src="image.jpg" alt="Alternative text">
<figcaption>Caption for images</figcaption>

</figure>
</syntaxhighlight>

<syntaxhighlight lang="html5" >
<figure>

<img src="image.jpg" alt="Alternative text">
<img src="image01.jpg" alt="Alternative text 01">
<img src="image02.jpg" alt="Alternative text 02">

<figcaption>Caption for all images in one row</figcaption>

</figure>
</syntaxhighlight>

== TABELE ==
==== THEAD, TBODY, TFOOT ====
Elementy umieszczane automatycznie na swoim miejscu '''thead''' jako pierwszy wiersz, '''tfoot''' jako ostatni nie zależnie gdzie są umieszczone w tabelce.
[[File:html5-table-clean.jpg|frame|right]]

<syntaxhighlight lang="html5" >
<table>

<thead>
<tr>
<th>Imię</th>
<th>Nazwisko</th>
<th>Telefon</th>
</tr>
</thead>

<tbody>
<tr>
<td>Jan</td>
<td>Kowalski</td>
<td>123-456-789</td>
</tr>
<tr>
<td>Andrzej</td>
<td>Kowal</td>
<td>456-789-123</td>
</tr>
<tr>
<td>Marcin</td>
<td>Kowalczyk</td>
<td>789-123-456</td>
</tr>
</tbody>

<tfoot>
<tr>
<td>12</td>
<td>23</td>
<td>34</td>
</tr>
</tfoot>

</table>

<style>
table, th, td { border: 1px solid black; }
</style>
</syntaxhighlight>

==== COL, COLGROUP ====
Grupowanie kolumn np w celu nadania jakiejs własciwości.
[[File:html5-table-formated-css.jpg|frame]]

<syntaxhighlight lang="html5" >
<table>
<colgroup>
<col id="first_col"></col>
<col id="second_col" span="2" ></col>
</colgroup>
<thead>
<tr>
<th>Imię</th>
<th>Nazwisko</th>
<th>Telefon</th>
</tr>
</thead>

<tbody>
<tr>
<td>Jan</td>
<td>Kowalski</td>
<td>123-456-789</td>
</tr>
<tr>
<td>Andrzej</td>
<td>Kowal</td>
<td>456-789-123</td>
</tr>
<tr>
<td>Marcin</td>
<td>Kowalczyk</td>
<td>789-123-456</td>
</tr>
</tbody>

<tfoot>
<tr>
<td>12</td>
<td>23</td>
<td>34</td>
</tr>
</tfoot>

</table>

<style>
table, th, td { color: white; padding: 5px 10px; }
thead th {color: #FFFF00;}
tfoot td {color: #FFA500; text-align: center;}
#first_col { background-color: #800080; }
#second_col { background-color:#C000C0; }
</style>

</syntaxhighlight >

== FORMULARZE ==
=== Znaczniki formularzy ===
Nowe nieznane elementy formularzy są traktowane przez starsze przegladarki jako wprowadzanie tekstowe.

==== CYFRY ====
<syntaxhighlight lang="html5" >
<form>
Podaj otrzymaną ocenę (1 do 6):
<input type="number" name="ocena" min="1" max="6">
</form>
</syntaxhighlight>

==== DATA i CZAS ====

Datę nie obsługują jeszcze przeglądarki Internet Expolorer oraz Firefox.

<syntaxhighlight lang="html5">
<form>
data urodzenia:
<input type="date" name="data_urodzenia">
</form>
</syntaxhighlight>

Ograniczanie zakresu wprowadzania.

<syntaxhighlight lang="html5">
<form>
sprawdz datę przed 2000-01-01:
<input type="date" name="data_urodzenia" min="1999-12-31" value="2000-12-01"><br>
Sprawdz datę po 2020-01-01:
<input type="date" name="data_urodzenia" max="2020-01-02" value="2019-01-01"><br>
</form>
</syntaxhighlight>

Wprowadzanie miesiąca oraz roku.

<syntaxhighlight lang="html5">
<form>
Podaj miesiąc i rok urodzenia:
<input type="month" name="miesiąc_urodzenia">
</form>
</syntaxhighlight>

Wprowadzanie miesiąca oraz roku.

<syntaxhighlight lang="html5">
<form>
Wybierz tydzień roku:
<input type="week" name="tydzien_roku">
</form>
</syntaxhighlight>

Wprowadzanie miesiąca oraz roku.

<syntaxhighlight lang="html5">
<form>
Wprowadz czas:
<input type="time" name="wprowadzany_czas">
</form>
</syntaxhighlight>

Wprowadzanie daty i czasu w jednym polu.

<syntaxhighlight lang="html5">
<form>
Wprowadz datę i czas:
<input type="datetime-local" name="wprowadzany_czas_i_data">
</form>
</syntaxhighlight>

==== KOLOR ====
<syntaxhighlight lang="html5">
<form>
Podaj swój ulubiony kolor:
<input type="color" name="ulubiony_kolor" value="#FF00AA">
</form>
</syntaxhighlight>

==== E-MAIL ====
Pole podaje juz wczesniej wprowadzane adresy email oraz w przegladarkach mobilnych zamienia na klawiaturę ze znakiem "@" oraz przyciskiem ".com".

<syntaxhighlight lang="html5">
<form>
E-mail:
<input type="email" name="email">
</form>
</syntaxhighlight>

==== URL ====
Pozwala na wprowadzanie adresów URL z uruchomieniem klawiatury na urzadzeniach mobilnych z dodatkowymi klawiszami jak .com.

<syntaxhighlight lang="html5">
<form>
Adres web:
<input type="url" name="straona_web">
</form>
</syntaxhighlight>

==== SEARCH ====
Pole działa dokładnie jak pole tekstowe, dodatkowo można właczyć atrybut autofocus prezentowany poniższym rozdziale.

<syntaxhighlight lang="html5">
<form>
Wyszukaj:
<input type="search" name="wyszukaj" autofocus>
</form>
</syntaxhighlight>

==== OPTGROUP, OPTION ====
[[File:Html5-optgroup-option.jpg|frame]]

<syntaxhighlight lang="html5" >
<label for="country">Country</label>

<select name="country" id="country">
<optgroup label="Europe">
<option value="UK">UK</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</optgroup>

<optgroup label="North America">
<option value="">USA</option>
<option value="">Canada</option>
</optgroup>
</select>

</syntaxhighlight>

==== DATALIST ====
Lista danych odnosi się po '''ID-> LIST''' dwukrotne klikniecie w oknie input rozwija liste lub zaczecie wpisywania zawęża liste.
[[File:Html5-datalist.jpg|frame|Datalist]]

<syntaxhighlight lang="html5">

<form>
<input list="cars"/>
<datalist id="cars">
<option value="BMW"/>
<option value="Ford"/>
<option value="Volvo"/>
<option value="Skoda"/>
<option value="Toyota"/>
<option value="Tata"/>
</datalist>
</form>

</syntaxhighlight>

==== TEXTAREA elastyczny ====
Textarea ma nowe możliwości rozciągania okna trzeba kliknąć w dolnym prawym narożniku aby można było powiekszyć obszar.
[[File:html5-flexible-textarea.jpg|frame]]

<syntaxhighlight lang="html5">

<form>
<fieldset>
<legend>Napisz do nas</legend>

<label for="name">Nazwisko:</label>
<input name="name" type="text" required>
<br />

<label for="email">E-mail:</label>
<input name="email" type="email" required>
<br />

<label for="message">Wiadomość:</label>
<textarea cols="50" rows="10"></textarea>
<br />

<input name="send" type="submit" value="Wyślij">
</fieldset>
</form>
</form>
</syntaxhighlight>

==== Restrykcje wprowadzania danych ====

HTML
* '''disable''' - zablokowany element przed wprowadzaniem danych.
* '''maxlength''' - maksymalna ilość.
* '''readonly''' - wartość tylko do odczytu.
* '''size''' - rozmiar pola.
* '''value''' - domyślna wartość wprowadzona w pole

HTML5
* '''max''' - maxymala wartość wprowadzania.
* '''min''' - minimalna wartość wprowadzania.
* '''pattern''' - wprowadzanie według zasad "regular expression" zgodności ze wzorem.
* '''required''' - to pole musi być wypełnione.
* '''step''' - interwał skoku wprowadzania.

<syntaxhighlight lang="html5" >
<form>
Punkty:
<input type="number" name="punkty_otrzymane" min="0" max="100" step="10" value="50">
</form>
</syntaxhighlight>

==== LABEL, FIELDSET, LEGEND ====
Pozwala na ładne opisanie kodu i formatowanie formularza.

<syntaxhighlight lang="html5" >
<form>
<fieldset>
<legend>Dane logowania</legend>
<label>Login:</label>
<input type="email" name="login">
<br />
<label>Hasło:</label>
<input type="password" name="password">
<br />
<input name="login" type="submit" value="Zaloguj">
</fieldset>
</form>
</syntaxhighlight>

==== PROGRESS BAR ====
[[File:Html5-progress-bar.jpg|frame]]

<syntaxhighlight lang="html5">

<form>
<label>Postęp:</label>
<progress></progress>
</form>

</syntaxhighlight>

<syntaxhighlight lang="html5">

<form>
<label>Do końca:</label>
<progress value="75" max="100">3/4 gotowe</progress>
</form>

</syntaxhighlight>

==== METER ====
Sprawdza i wyświetla daną, tekst lub wartość w zależności od przedziału w którym sie znajduje.

<syntaxhighlight lang="html5">
<form>
<meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>
</form>
</syntaxhighlight>

=== Atrybuty formularzy ===

==== AUTOFOCUS, REQUIRED, PLACEHOLDER ====
Widzimy odrazu możliwość ładnego pogrupowania elementów formularza obrazek poniżej, dodatkowo ułatwiaja nam prace nowe atrybuty takie jak:
* '''autofocus''' - automatycznie wstawia kursor w daną rubryke po wczytaniu formularza
* '''required''' - parametr wymagandy do wprowadzenia w przeglądarkach po zatwierdzeniu formularza i nie wpisanie zadnej wartości podświetla się na czerowno do przetestowania w '''playgraund'''
* '''placeholder''' - automatyczna podpowiedź w tle sama znika gdy zaczynamy wpisywać oraz sama sie pojawia po usunięciu wszystkich wpisanych znaków.
[[File:html5-legend-fieldset-reqired-autofocus-placeholder.jpg|frame]]

<syntaxhighlight lang="html5">
<form>
<fieldset>
<legend>Dane logowania</legend>
<label>Login:</label>
<input type="email" name="login"
placeholder="Wprowadz swój login lub e-mail" required autofocus>
<br />
<label>Hasło:</label>
<input type="password" name="password"
placeholder="Wprowadzone hasło przy rejestracji" required>
<br />
<input name="login" type="submit" value="Zaloguj">
</fieldset>
</form>
</syntaxhighlight>

== INTERAKTYWNE ELEMENTY ==
=== DETAILS, SUMMARY ===
Testować należy w przeglądarce '''Chrome''' nie działa w firefox.
[[File:html5-details.jpg|frame]]

<syntaxhighlight lang="html5">
<details>
<summary>Nazwa pliku</summary>
<input name="nazwa_pliku" value="video.mov" type="text">
<br />
<input name="inny_plik" checked="" type="checkbox">
<label>Podaj inny plik muzyczny </label>
</details>

<details>
<summary>Informacje dodatkowe</summary>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting ...</p>
</details>

</syntaxhighlight>

== Tekst edycja ==
=== INS, DEL ===
[[File:Html5-del-ins.jpg|frame]]

<syntaxhighlight lang="html5" >
<p>My favourite colour is
<del datetime="2010-10-11T01:25-07:00">blue</del>
<ins datetime="2010-10-11T01:25-07:01">red</ins>
, but I also like green and yellow.</p>
</syntaxhighlight>

== Dodatki ==

Ramka kolumny

HTML5 Introduction - Revision history

Lsokolowski: /* Grupy elementów HTML5 */