diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
| commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
| tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pl/web/html | |
| parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
| download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip | |
initial commit
Diffstat (limited to 'files/pl/web/html')
64 files changed, 7904 insertions, 0 deletions
diff --git a/files/pl/web/html/canvas/index.html b/files/pl/web/html/canvas/index.html new file mode 100644 index 0000000000..e4bf56c5e7 --- /dev/null +++ b/files/pl/web/html/canvas/index.html @@ -0,0 +1,55 @@ +--- +title: Canvas +slug: Web/HTML/Canvas +translation_of: Web/API/Canvas_API +--- +<div> + {{outdated()}}</div> +<div> + <p><strong>Canvas</strong> (<code><canvas></code>) jest nowym elementem <a href="/pl/docs/HTML" title="pl/docs/HTML">HTML</a>, który może być użyty do rysowania grafik przy użyciu skryptów (zazwyczaj <a href="/pl/docs/JavaScript" title="pl/docs/JavaScript">JavaScript</a>). Na przykład może być użyty do rysowania wykresów, tworzenia kompozycji fotografii lub do prostych (i <a href="/pl/docs/Prosty_RayCaster" title="pl/docs/Prosty_RayCaster">nie tylko prostych</a>) animacji.</p> + <p>Po raz pierwszy <code><canvas></code> został przedstawiony przez Apple dla <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Mac OS X Dashboard</a> i później zaimplementowany w Safari. Przeglądarki oparte o silnik <a href="/pl/docs/Gecko" title="pl/docs/Gecko">Gecko</a> począwszy od wersji 1.8 (tj. <a href="/pl/docs/Firefox_1.5_dla_programistów" title="pl/docs/Firefox_1.5_dla_programistów">Firefox 1.5</a> oraz późniejsze) obsługują ten nowy element. Również Opera 9 go wspiera. Czynione są starania, aby <code><canvas></code> był obsługiwany przez Internet Explorera (zobacz ).</p> + <p>Element <code><canvas></code> jest częścią specyfikacji <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> znanej także jako HTML 5.</p> +</div> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Dokumentacja" name="Dokumentacja">Dokumentacja</h2> + <dl> + <dt> + <a href="/pl/docs/Rysowanie_grafik_za_pomocą_Canvas" title="pl/docs/Rysowanie_grafik_za_pomocą_Canvas">Rysowanie grafik za pomocą Canvas</a></dt> + <dd> + Wprowadzenie do <code><canvas></code>.</dd> + <dt> + <a href="/pl/docs/Przewodnik_po_canvas" title="pl/docs/Przewodnik_po_canvas">Przewodnik po canvas</a></dt> + <dd> + <code><canvas></code> jest nowym elementem <a href="/pl/docs/HTML" title="pl/docs/HTML">HTML</a>, który może być użyty do rysowania grafik przy użyciu skryptów (zazwyczaj <a href="/pl/docs/JavaScript" title="pl/docs/JavaScript">JavaScript</a>). Na przykład może być użyty do rysowania wykresów, tworzenia kompozycji fotografii lub do prostych (i <a href="/pl/docs/Prosty_RayCaster" title="pl/docs/Prosty_RayCaster">nie tylko prostych</a>) animacji.</dd> + <dt> + <a href="/pl/docs/Fragmenty_kodu/Canvas" title="pl/docs/Fragmenty_kodu/Canvas">Fragmenty kodu:Canvas</a></dt> + <dd> + Fragmenty kodu z użyciem <code><canvas></code>.</dd> + <dt> + <a href="/pl/docs/tag/Przykłady_Canvas" title="Special:Tags?tag=Przykłady_Canvas">Przykłady Canvas</a></dt> + <dd> + Lista różnych przykładów stosujących <code><canvas></code>.</dd> + <dt> + <a href="/pl/docs/Rysowanie_tekstu_za_pomocą_Canvas" title="pl/docs/Rysowanie_tekstu_za_pomocą_Canvas">Rysowanie tekstu za pomocą Canvas</a></dt> + <dd> + Dokumentacja nowych własności <code><canvas></code> dostępnych począwszy od Firefoksa 3</dd> + </dl> + </td> + <td> + <h2 class="Community" id="Spo.C5.82eczno.C5.9B.C4.87" name="Spo.C5.82eczno.C5.9B.C4.87">Społeczność</h2> + <ul> + <li>Zobacz fora Mozilli... {{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}</li> + <li><a class="external" href="http://groups.yahoo.com/group/canvas-developers/">Grupa Yahoo programistów Canvas</a></li> + </ul> + <h2 class="Related_Topics" id="Tematy_powi.C4.85zane" name="Tematy_powi.C4.85zane">Tematy powiązane</h2> + <ul> + <li><a href="/pl/docs/HTML" title="pl/docs/HTML">HTML</a>, <a href="/pl/docs/JavaScript" title="pl/docs/JavaScript">JavaScript</a>, <a href="/pl/docs/CSS" title="pl/docs/CSS">CSS</a>, <a href="/pl/docs/AJAX" title="pl/docs/AJAX">AJAX</a>, <a href="/pl/docs/DOM" title="pl/docs/DOM">DOM</a>, <a href="/pl/docs/SVG" title="pl/docs/SVG">SVG</a></li> + </ul> + </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/pl/web/html/element/a/index.html b/files/pl/web/html/element/a/index.html new file mode 100644 index 0000000000..fbf1e19205 --- /dev/null +++ b/files/pl/web/html/element/a/index.html @@ -0,0 +1,384 @@ +--- +title: '<a>: Element Kotwicy' +slug: Web/HTML/Element/a +tags: + - Element + - HTML + - HTML semantyka na poziomie tekstu + - Reference + - Treść + - Web +translation_of: Web/HTML/Element/a +--- +<p>{{HTMLRef}}</p> + +<p><span class="seoSummary"><strong>Element <code><a></code></strong> w <strong>HTML</strong> (lub element <em>kotwicy</em>) tworzy hiperłącze do innych stron internetowych, plików, miejsc na tej samej stronie, adresów e-mail lub innych adresów URL.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th> + <td><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Flow_content">Treść płynna</a>,<a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content"> Treść frazowania</a>, <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Interactive_content">Treść interaktywna</a>, zawartość zdzieralna.</td> + </tr> + <tr> + <th>Dozwolona zawartość</th> + <td><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Transparent_content_model">Transparent</a>, zawierający albo <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Flow_content">treści płynne</a> (z wyłączeniem <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Interactive_content">treści interaktywnych</a>), albo <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content">treści frazowania</a>.</td> + </tr> + <tr> + <th>Pominięcie znacznika</th> + <td>Brak, zarówno znacznik początkowy jak i końcowy są obowiązkowe.</td> + </tr> + <tr> + <th>Dozwoleni rodzice</th> + <td>Każdy element, który akceptuje <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content">zawartość frazowania</a>, lub każdy element, który akceptuje <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Flow_content">treści przepływu</a>, ale zawsze z wyłączeniem elementów <code><a></code> (zgodnie z logiczną zasadą symetrii, jeśli znacznik <code><a></code>, jako rodzic, nie może mieć <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Interactive_content">interaktywnej zawartości</a>, to ta sama zawartość <code><a></code> nie może mieć znacznika <code><a></code> jako rodzica).</td> + </tr> + <tr> + <th>Dozwolone role ARIA</th> + <td>{{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td> + </tr> + <tr> + <th>Interfejs DOM</th> + <td>{{DOMxRef("HTMLAnchorElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Ten element uwzględnia <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</p> + +<dl> + <dt>{{HTMLAttrDef("download")}}{{HTMLVersionInline(5)}}</dt> + <dd>Ten atrybut nakazuje przeglądarkom pobieranie adresu URL zamiast nawigowania do niego, więc użytkownik zostanie poproszony o zapisanie go w postaci pliku lokalnego. Jeśli atrybut ma wartość, jest używany jako wstępnie wypełniona nazwa pliku w oknie dialogowym Zapisz (użytkownik nadal może zmienić nazwę, jeśli chce). Nie ma ograniczeń co do dozwolonych wartości, choć <code>/</code> oraz <code>\</code> są konwertowane na podkreślenia. Większość systemów plików ogranicza interpunkcję w nazwach plików, a przeglądarki odpowiednio dostosują sugerowaną nazwę. + <div class="note"><strong>Uwagi:</strong> + <ul> + <li>Ten atrybut działa tylko dla <a href="https://developer.mozilla.org/pl/docs/Web/Security/Same-origin_policy">adresów URL tego samego pochodzenia</a>.</li> + <li>Chociaż adresy URL HTTP muszą być w tym samym miejscu pochodzenia, obiekt <a href="https://developer.mozilla.org/pl/docs/Web/API/URL/createObjectURL"><code>blob:</code> URLs</a> oraz <a href="https://developer.mozilla.org/pl/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URLs</a> są dozwolone, aby można było pobierać treści generowane przez JavaScript, takie jak obrazy utworzone w aplikacji internetowej do edycji obrazów.</li> + <li>Jeżeli nagłówek HTTP <a href="https://developer.mozilla.org/pl/docs/Web/HTTP/Headers/Content-Disposition"><code>Content-Disposition:</code></a> podaje inną nazwę pliku niż ten atrybut, nagłówek HTTP ma pierwszeństwo przed tym atrybutem.</li> + <li>Jeśli <code>Content-Disposition:</code> jest ustawione na <code>inline</code>, Firefox nadaje priorytet <code>Content-Disposition</code>, podobnie jak w przypadku nazwy pliku, podczas gdy Chrome nadaje priorytet atrybutowi <code>download</code>.</li> + </ul> + </div> + </dd> + <dt>{{HTMLAttrDef("href")}}</dt> + <dd>Zawiera URL lub fragment URL do którego wskazuje hiperłącze.</dd> + <dd>Fragment adresu URL jest nazwą poprzedzoną znakiem skrótu (<code>#</code>), który określa wewnętrzną lokalizację docelową ({{HTMLAttrxRef("id")}} elementu HTML) w bieżącym dokumencie. Adresy URL nie są ograniczone do dokumentów opartych na sieci Web, ale mogą korzystać z dowolnego protokołu obsługiwanego przez przeglądarkę. Na przykład, <a class="external" href="https://en.wikipedia.org/wiki/File_URI_scheme"><code>file:</code></a>, <code>ftp:</code>, oraz <code>mailto:</code> działają w większości przeglądarek. + <div class="note"> + <p><strong>Uwaga:</strong> Możesz użyć <code>href="#top"</code> lub pusty fragment <code>href="#"</code> aby przejść do górnej części biężącej strony. <a href="https://www.w3.org/TR/html5/single-page.html#scroll-to-fragid">Takie zachowanie jest określone przez HTML5</a>.</p> + </div> + </dd> + <dt>{{HTMLAttrDef("hreflang")}}</dt> + <dd>Ten atrybut wskazuje język ludzki powiązanego zasobu. Jest to atrybut czysto doradczy, bez wbudowanych funkcji. Dozwolone wartości są określane przez <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt" title="Tags for Identifying Languages">BCP47</a>.</dd> + <dt>{{HTMLAttrDef("ping")}}</dt> + <dd>Zawiera oddzieloną spacją listę adresów URL, do których, gdy następuje hiperłącze, żądania {{HTTPMethod("POST")}} z oznaczeniem <code>PING</code> będą wysyłane przez przeglądarkę (w tle). Najczęściej używane do śledzenia.</dd> + <dt>{{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}</dt> + <dd>Wskazuje który <a href="https://developer.mozilla.org/pl/docs/Web/HTTP/Headers/Referer">odsyłacz</a> należy wysłać podczas pobierania adresu URL: + <ul> + <li><code>'no-referrer'</code> oznacza, że <code>Referer:</code> nagłówek nie zostanie wysłany.</li> + <li><code>'no-referrer-when-downgrade'</code> oznacza, że <code>Referer:</code> nagłówek nie zostanie wysłany podczas nawigacji do miejsca pochodzenia bez HTTPS. Jest to zachowanie domyślne.</li> + <li><code>'origin'</code> oznacza, że odsyłającym będzie <a href="https://developer.mozilla.org/pl/docs/Glossary/Origin">pochodzenie</a> strony, nie włączając informacji po domenie.</li> + <li><code>'origin-when-cross-origin'</code> oznacza, że nawigacja do innych miejsc pochodzenia będzie ograniczona do schematu, hosta i portu, podczas gdy nawigacja w tym samym miejscu pochodzenia będzie obejmować ścieżkę strony odsyłającej.</li> + <li><code>'strict-origin-when-cross-origin'</code></li> + <li><code>'unsafe-url'</code> oznacza, że odsyłacz będzie zawierał pochodzenie i ścieżkę, ale nie fragment, hasło, lub nazwę użytkownika. Jest to niebezpieczne, ponieważ może spowodować przeciek danych z bezpiecznych adresów URL do niepewnych.</li> + </ul> + </dd> + <dt>{{HTMLAttrDef("rel")}}</dt> + <dd>Określa relację obiektu docelowego z obiektem łącza. Wartość jest oddzieloną spacjami listą <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Link_types">typów łączy</a>.</dd> + <dt>{{HTMLAttrDef("target")}}</dt> + <dd>Określa, gdzie ma być wyświetlany link URL. Jest to nazwa lub słowo kluczowe <em>kontekstu przeglądania</em>, zakładki, okna lub <code><iframe></code>. Następujące słowa kluczowe mają specjalne znaczenie: + <ul> + <li><code>_self</code>: Wczytuje adres URL do tego samego kontekstu przeglądania, co bieżący. Jest to zachowanie domyślne.</li> + <li><code>_blank</code>: Wczytuje adres URL w nowy kontekst przeglądania. Zazwyczaj jest to zakładka, ale użytkownicy mogą skonfigurować przeglądarkę tak, aby korzystała z nowych okien.</li> + <li><code>_parent</code>: Ładuje adres URL do nadrzędnego kontekstu przeglądania bieżącego. Jeśli nie ma rodzica, zachowuje się tak samo jak <code>_self</code>.</li> + <li><code>_top</code>: Wczytuje adres URL w kontekst przeglądania na najwyższym poziomie (czyli "najwyższy" kontekst przeglądania, który jest przodkiem obecnego i nie ma rodzica). Jeśli nie ma rodzica, zachowuje się tak samo jak <code>_self</code>.</li> + </ul> + + <div class="note"> + <p><strong>Uwaga:</strong> Podczas używania <code>target</code>, rozważ dodanie <code>rel="noreferrer"</code>, aby uniknąć wykorzystania API <code>window.opener</code>.</p> + </div> + + <div class="note"> + <p><strong>Uwaga:</strong> Linkowanie do innej strony przy użyciu <code>target="_blank"</code> uruchomi nową stronę na tym samym procesie co Twoja strona. Jeśli nowa strona wykonuje duże skrypty JS, wydajność Twojej strony może ucierpieć. Aby tego uniknąć, użyj <code>rel="noopener"</code>.</p> + </div> + </dd> + <dt>{{HTMLAttrDef("type")}}</dt> + <dd>Określa typ nośnika w postaci {{Glossary("typu MIME")}} dla połączonego adresu URL. Jest to czysto doradcze, bez wbudowanych funkcji.</dd> +</dl> + +<h3 id="Atrybuty_przestarzałe">Atrybuty przestarzałe</h3> + +<dl> + <dt>{{HTMLAttrDef("charset")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Ten atrybut definiuje <a href="https://developer.mozilla.org/pl/docs/Glossary/character_encoding">kodowanie znaków</a> dla powiązanego adresu URL. Wartość ta powinna być spacją i/lub przecinkiem z listy zbiorów znaków zdefiniowanych w <a class="external" href="https://tools.ietf.org/html/rfc2045">RFC 2045</a>. Domyślną wartością jest <code>ISO-8859-1</code>. + <div class="note"> + <p><strong>Uwaga dotycząca zastosowania:</strong> Ten atrybut jest przestarzały w HTML5 i <strong>nie powinien być używany przez twórców</strong>. Aby uzyskać jego efekt, użyj nagłówka HTTP <a href="https://developer.mozilla.org/pl/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type:</code></a> na linkowanym adresie URL.</p> + </div> + </dd> + <dt>{{HTMLAttrDef("coords")}} tylko{{HTMLVersionInline(4)}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Do wykorzystania z atrybutem <code>shape</code> opisanym niżej, atrybut ten używał oddzielonej przecinkami listy liczb w celu określenia współrzędnych odnośnika na stronie.</dd> + <dt>{{HTMLAttrDef("name")}} tylko{{HTMLVersionInline(4)}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Ten atrybut był wymagany w przypadku kotwic określających możliwą lokalizację docelową na stronie. W HTML 4.01, <code>id</code> oraz <code>name</code> mogą być używane jednocześnie w elemencie <code><a></code>, o ile mają identyczne wartości. + <div class="note"> + <p><strong>Uwaga dotycząca zastosowania:</strong> Ten atrybut jest przestarzały w HTML5, zamiast niego użyj globalnego atrybutu {{HTMLAttrxRef("id")}}.</p> + </div> + </dd> + <dt>{{HTMLAttrDef("rev")}} tylko{{HTMLVersionInline(4)}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Ten atrybut określa łącze odwrotne, odwrotną zależność atrybutu <strong>rel</strong>. Został wycofany ze względu na to, że był bardzo mylący. + <div class="note"><strong>Uwaga</strong>: Obecnie specyfikacja W3C HTML 5.2 stwierdza, że <code>rev</code> nie jest już przestarzałe, podczas gdy Living Standard od WHATWG nadal ma to oznaczone jako przestarzałe. Dopóki ta rozbieżność nie zostanie wyjaśniona, zalecane jest uznawać go jako atrybut przestarzały.</div> + </dd> + <dt>{{HTMLAttrDef("shape")}} tylko{{HTMLVersionInline(4)}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Atrybut ten został użyty do zdefiniowania regionu dla hiperłączy w celu utworzenia mapy obrazu. Wartości to <code>circle</code>, <code>default</code>, <code>polygon</code>, oraz <code>rect</code>. Format atrybutu <strong>coords</strong> zależy od wartości kształtu. Dla <code>circle</code> wartością jest <code>x,y,r</code> gdzie <code>x</code> oraz <code>y</code> są współrzędnymi pikseli dla środka okręgu, a <code>r</code> jest wartością promienia w pikselach. Dla <code>rect</code> atrybut <strong>coords</strong> powinien wynosić <code>x,y,w,h</code>. Wartości <code>x,y</code> definiują lewy górny narożnik prostokąta, natomiast <code>w</code> oraz <code>h</code> odpowiednio szerokość i wysokość. Wartość <code>polygon</code> dla <strong>kształtu</strong> wymaga wartości <code>x1,y1,x2,y2,...</code> dla <strong>coords</strong>. Każda z par <code>x,y</code> określa punkt wielokąta, z kolejnymi punktami połączonymi liniami prostymi i ostatnim punktem połączonym z pierwszym. Wartość <code>default</code> dla kształtu wymaga użycia całego zamkniętego obszaru, zazwyczaj obrazu. + <div class="note"><strong>Uwaga:</strong> Użyj atrybutu {{HTMLAttrxRef("usemap", "img")}} dla elementu {{HTMLElement("img")}} i powiązanego elementu {{HTMLElement("map")}} aby zdefiniować hotspoty zamiast atrybutu <code>shape</code>.</div> + </dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Odnośnik_do_lokalizacji_zewnętrznej">Odnośnik do lokalizacji zewnętrznej</h3> + +<pre class="brush: html"><!-- kotwica tworząca odnośnik do zewnętrznego pliku --> +<a href="<a class="linkification-ext" href="http://www.mozilla.com/" title="Linkification: http://www.mozilla.com/">http://www.mozilla.com/</a>"> +Odnośnik zewnętrzny +</a> +</pre> + +<h4 id="Rezultat" name="Rezultat">Rezultat</h4> + + +<p><a class="external" href="http://www.mozilla.com/">Odnośnik zewnętrzny</a></p> + +<h3 id="Odnośnik_do_innej_sekcji_na_tej_samej_stronie">Odnośnik do innej sekcji na tej samej stronie</h3> + +<pre class="brush: html"><!-- odnośniki do elementów na tej stonie z id="attr-href" --> +<a href="#attr-href"> +Opis łączy na tej samej stronie +</a></pre> + +<h4 id="Rezultat_2">Rezultat</h4> + +<p><a href="#attr-href">Opis łączy na tej samej stronie</a></p> + +<h3 id="Tworzenie_klikalnego_obrazu">Tworzenie klikalnego obrazu</h3> + +<p>W tym przykładzie jako odnośnika do strony głównej MDN użyto obrazu. Strona główna otworzy się w nowym kontekście przeglądania, czyli w nowej stronie lub nowej karcie.</p> + +<pre class="brush: html"><a href="https://developer.mozilla.org/pl/" target="_blank"> + <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" + alt="MDN logo" /> +</a> +</pre> + +<h4 id="Rezultat_3">Rezultat</h4> + +<p><a href="https://developer.mozilla.org/pl/"><img alt="MDN logo" src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"></a></p> + +<h3 id="Tworzenie_odnośnika_email">Tworzenie odnośnika email</h3> + +<p>Często tworzy się linki, które otwierają się w programie pocztowym użytkownika, aby umożliwić mu wysłanie nowej wiadomości. Odbywa się to za pomocą odnośnika <code>mailto:</code>. Oto prosty przykład:</p> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Wyślij email do nikąd</a></pre> + +<h4 id="Rezultat_4">Rezultat</h4> + +<p><a href="mailto:nowhere@mozilla.org">Wyślij email do nikąd</a></p> + +<p>Aby uzyskać dodatkowe informacje dotyczące schematu adresu URL <code>mailto</code>, takie jak temat, treść, lub inne z góry określone treści, zobacz <a href="https://developer.mozilla.org/pl/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#E-mail_links">Odnośniki email</a> lub {{RFC(6068)}}.</p> + +<h3 id="Tworzenie_łącza_telefonicznego">Tworzenie łącza telefonicznego</h3> + +<p>Oferowanie łącz telefonicznych jest pomocne dla użytkowników przeglądających dokumenty internetowe a ich urządzenie jest powiązane z telefonem.</p> + +<pre class="brush: html"><a href="tel:+491570156">+49 157 0156</a></pre> + +<p>Dodatkowe informację na temat schematu URL <code>tel</code> można znaleźć w {{RFC(3966)}}.</p> + +<h3 id="Użycie_atrybutu_download_do_zapisania_<canvas>_jako_PNG">Użycie atrybutu <code>download</code> do zapisania <code><canvas></code> jako PNG</h3> + +<p>Jeśli chcesz pozwolić użytkownikom na pobranie elementu HTML {{HTMLElement("canvas")}} jako obrazu, możesz utworzyć odnośnik z atrybutem <code>download</code> i danymi płótna jako URL pliku:</p> + +<pre class="brush: js">var link = document.createElement('a'); +link.textContent = 'download image'; + +link.addEventListener('click', function(ev) { + link.href = canvas.toDataURL(); + link.download = "mypainting.png"; +}, false); + +document.body.appendChild(link);</pre> + +<p>Można to zobaczyć w praktyce na stronie <a href="https://jsfiddle.net/codepo8/V6ufG/2/">jsfiddle.net/codepo8/V6ufG/2/</a>.</p> + +<h2 id="Uwagi">Uwagi</h2> + +<p>HTML 3.2 definiuje tylko atrybuty <code>name</code>, <code>href</code>, <code>rel</code>, <code>rev</code> oraz <code>title</code>.</p> + +<h2 id="Kwestie_dotyczące_bezpieczeństwa_i_prywatności">Kwestie dotyczące bezpieczeństwa i prywatności</h2> + +<p>Chociaż elementy <code><a></code> mają wiele niewinnych zastosowań, mogą mieć niepożądane konsekwencje dla bezpieczeństwa i prywatności użytkownika. Zobacz <a href="https://developer.mozilla.org/pl/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Nagłówek Referer: obawy dotyczące prywatności i bezpieczeństwa</a>, aby uzyskać więcej informacji i środków zaradczych.</p> + +<h2 id="Kwestie_dostępności">Kwestie dostępności</h2> + +<h3 id="wydarzenia_onclick">wydarzenia <code>onclick</code></h3> + +<p>Znaczniki Kotwicy są często nadużywane przez zdarzenie <code>onclick</code> do tworzenia pseudo-przycisków przez ustawienie <strong>href</strong> na <code>"#"</code> lub <code>"javascript:void(0)"</code>, aby zapobiec odświeżaniu strony.</p> + +<p>Wartości te powodują nieoczekiwane zachowanie podczas kopiowania/przenoszenia linków, otwierania odnośników w nowej zakładce/oknie, dodawaniu do zakładek i gdy JavaScript jest nadal pobierany, w stanie błędu, lub wyłączony. To również przekazuje nieprawidłową semantykę do technologii wspomagających (np. czytniki ekranu). W takich przypadkach zaleca się użycie przycisku {{HTMLElement("button")}} instead. Ogólnie rzecz biorąc, należy używać kotwicy tylko do nawigacji przy użyciu odpowiedniego adresu URL.</p> + +<h3 id="Linki_zewnętrzne_i_łącza_do_zasobów_nie-HTML">Linki zewnętrzne i łącza do zasobów nie-HTML</h3> + +<p>Oba odnośniki, które otwierają się w nowej zakładce lub oknie poprzez deklarację <code>target="_blank"</code> oraz linki do zasobów plików, których wartość <code>href</code> wskazuje na źródło pliku powinny zawierać wskaźnik zachowania, które wystąpi po aktywacji łącza.</p> + +<p>Osoby o słabym wzroku, które poruszają się za pomocą technologii odczytu ekranowego lub które mają problemy poznawcze mogą zostać zmylone, gdy nieoczekiwanie otworzy się nowa karta, okno lub aplikacja. Starsze wersje oprogramowania do czytania na ekranie mogą nawet nie ogłaszać zachowania.</p> + +<h4 id="Odnośnik_otwierający_nową_kartę_lub_okno">Odnośnik otwierający nową kartę lub okno</h4> + +<pre class="brush: html"><a target="_blank" href="https://www.wikipedia.org/">Wikipedia (otwiera się w nowym oknie)</a> +</pre> + +<h4 id="Odnośnik_do_zasobów_nie-HTML">Odnośnik do zasobów nie-HTML</h4> + +<pre class="brush: html"><a target="_blank" href="2017-annual-report.ppt">Raport Roczny 2017 (PowerPoint)</a> +</pre> + +<p>Jeśli zamiast tekstu używana jest ikona do oznaczenia tego rodzaju zachowania odnośników, upewnij się, że zawiera ona {{HTMLAttrxRef("alt", "img", "opis alternatywny", "true")}}.</p> + +<ul> + <li><a href="https://webaim.org/techniques/hypertext/hypertext_links">WebAIM: Links and Hypertext - Hypertext Links</a></li> + <li><a href="https://developer.mozilla.org/pl/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN Zrozumienie WCAG, Wytyczna 3.2 wyjaśnienie</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html">G200: Opening new windows and tabs from a link only when necessary | W3C Techniques for WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">G201: Giving users advanced warning when opening a new window | W3C Techniques for WCAG 2.0</a></li> +</ul> + +<h3 id="Odnośniki_pomijające">Odnośniki pomijające</h3> + +<p>Link pomijający, znany również jako skipnav, jest elementem <code>a</code> umieszczonym jak najbliżej elementu otwarcia {{HTMLElement("body")}}, który odsyła do początku głównej zawartości strony. Odnośnik ten umożliwia ominięcie treści powtarzanej na wielu stronach, takich jak nagłówek strony i podstawowa nawigacja.</p> + +<p>Łącza pomijające są szczególnie przydatne dla osób, które poruszają się za pomocą technologii wspomagających, takich jak przełączniki, komendy głosowe, ustne pałeczki/różdżki, gdzie poruszanie się przez powtarzające się łącza może być pracochłonnym zadaniem.</p> + +<ul> + <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></li> + <li><a href="https://a11yproject.com/posts/skip-nav-links/">How–to: Use Skip Navigation links - The A11Y Project</a></li> + <li><a href="https://developer.mozilla.org/pl/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Zrozumienie WCAG, Wytyczna 2.4 wyjaśnienie</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="Odległość">Odległość</h3> + +<p>Duża ilość interaktywnych treści—w tym kotwic—umieszczonych w bliskiej odległości od siebie powinna mieć miejsce na ich oddzielenie. Odstęp ten jest korzystny dla osób, które doświadczają problemów z układem ruchu, które mogą przypadkowo aktywować błędne treści interaktywne podczas nawigacji.</p> + +<p>Odstępy mogą być tworzone przy użyciu właściwości CSS, takich jak {{CSSxRef("margin")}}.</p> + +<ul> + <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem - Axess Lab</a></li> +</ul> + +<h3 id="Klikanie_i_focus">Klikanie i focus</h3> + +<p>To, czy kliknięcie na {{HTMLElement("a")}} powoduje, że przechodzi ono w tryb skupienia, zależy od przeglądarki i systemu operacyjnego.</p> + +<table class="standard-table"> + <caption>Czy kliknięcie na {{HTMLElement("a")}} spowoduje tryb skupienia?</caption> + <thead> + <tr> + <th scope="row">Przeglądarki stacjonarne</th> + <th scope="col">Windows 8.1</th> + <th scope="col">OS X 10.9</th> + </tr> + </thead> + <tbody> + <tr> + <td>Firefox 30.0</td> + <td style="background-color: LawnGreen;">Tak</td> + <td style="background-color: LawnGreen;">Tak</td> + </tr> + <tr> + <td>Chrome ≥39<br> + (<a href="https://code.google.com/p/chromium/issues/detail?id=388666" title="Issue 388666: Focus anchor (A) elements on mousedown">Chromium bug 388666</a>)</td> + <td style="background-color: LawnGreen;">Tak</td> + <td style="background-color: LawnGreen;">Tak</td> + </tr> + <tr> + <td>Safari 7.0.5</td> + <td style="background-color: silver;">Nie dotyczy</td> + <td style="background-color: yellow;">Tylko jeśli posiada <code>tabindex</code></td> + </tr> + <tr> + <td>Internet Explorer 11</td> + <td style="background-color: LawnGreen;">Tak</td> + <td style="background-color: silver;">Nie dotyczy</td> + </tr> + <tr> + <td>Presto (Opera 12)</td> + <td style="background-color: LawnGreen;">Tak</td> + <td style="background-color: LawnGreen;">Tak</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Czy stuknięcie w {{HTMLElement("a")}} spowoduje tryb skupienia?</caption> + <thead> + <tr> + <th scope="row">Przeglądarki mobilne</th> + <th scope="col">iOS 7.1.2</th> + <th scope="col">Android 4.4.4</th> + </tr> + </thead> + <tbody> + <tr> + <td>Safari Mobile</td> + <td style="background-color: yellow;">Tylko jeśli posiada <code>tabindex</code></td> + <td style="background-color: silver;">Nie dotyczy</td> + </tr> + <tr> + <td>Chrome 35</td> + <td>???</td> + <td style="background-color: yellow;">Tylko jeśli posiada <code>tabindex</code></td> + </tr> + </tbody> +</table> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}}</td> + <td>{{Spec2("Referrer Policy")}}</td> + <td>Dodano atrybut <code>referrer</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "text-level-semantics.html#the-a-element", "<a>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "text-level-semantics.html#the-a-element", "<a>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "struct/links.html#h-12.2", "<a>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2> + + + +<p>{{Compat("html.elements.a")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>Inne elementy zawierające <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Text_level_semantics_conveying_elements">semantykę na poziomie tekstu</a>: {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> +</ul> diff --git a/files/pl/web/html/element/abbr/index.html b/files/pl/web/html/element/abbr/index.html new file mode 100644 index 0000000000..0dfe90c52b --- /dev/null +++ b/files/pl/web/html/element/abbr/index.html @@ -0,0 +1,200 @@ +--- +title: '<abbr>: Element Skrótu' +slug: Web/HTML/Element/abbr +tags: + - Akronim + - Definicje + - Element + - HTML + - HTML semantyka na poziomie tekstu + - Reference + - Web + - semantyka + - skrót +translation_of: Web/HTML/Element/abbr +--- +<p>{{HTMLRef}}</p> + +<p><span class="seoSummary"><strong>Element skrótu HTML </strong>(<strong><code><abbr></code></strong>) reprezentuje skrót lub akronim; opcjonalny atrybut {{htmlattrxref("title")}} może stanowić rozwinięcie lub opis skrótu.</span> Jeśli występuje, <code>title</code> musi zawierać pełny opis i nic więcej.</p> + +<p>Artykuł <em><a href="https://developer.mozilla.org/pl/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Jak oznaczać skróty i uczynić je zrozumiałymi</a></em> jest przewodnikiem do nauki używania <code><abbr></code> i elementów pokrewnych.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th> + <td><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Flow_content">Treść płynna</a>, <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Treść frazowania</a>, zawartość zdzieralna.</td> + </tr> + <tr> + <th>Dozwolona zawartość</th> + <td><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Treść frazowania</a></td> + </tr> + <tr> + <th>Pominięcie znacznika</th> + <td>Brak, zarówno znacznik początkowy jak i końcowy są obowiązkowe.</td> + </tr> + <tr> + <th>Dozwoleni rodzice</th> + <td>Każdy element, który akceptuje <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content">zawartość frazowania</a></td> + </tr> + <tr> + <th>Dozwolone role ARIA</th> + <td>Każdy</td> + </tr> + <tr> + <th>Interfejs DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Ten element obsługuje tylko <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Global_attributes">atrybuty globalne</a>. Atrybut {{htmlattrxref("title")}} ma specyficzne znaczenie semantyczne, gdy jest używany z elementem <code><abbr></code>; <em>musi</em> zawierać pełny opis czytelny dla człowieka lub rozwinięcie skrótu. Tekst ten jest często prezentowany przez przeglądarki jako etykieta pomocnicza, gdy kursor myszy jest zawieszony nad elementem.</p> + +<p>Każdy element <code><abbr></code>, którego używasz jest niezależny od wszystkich innych; podanie <code>title</code> dla jednego elementu nie załącza automatycznie tego samego rozszerzenia tekstu do innych o tej samej treści.</p> + +<h2 id="Uwagi_dotyczące_użycia">Uwagi dotyczące użycia</h2> + +<h3 id="Typowe_zastosowania">Typowe zastosowania</h3> + +<p>Z pewnością nie jest wymagane, aby wszystkie skróty były oznaczane przy użyciu <code><abbr></code>. Jest jednak kilka przypadków, w których jest to pomocne:</p> + +<ul> + <li>Jeśli używany jest skrót i chcesz zapewnić rozszerzenie lub definicję poza obiegiem treści dokumentu, użyj <code><abbr></code> z odpowiednim atrybutem {{htmlattrxref("title")}}.</li> + <li>Aby zdefiniować skrót, który może być nieznany czytelnikowi, należy przedstawić termin używając <code><abbr></code> oraz atrybutu <code>title</code> lub tekstu liniowego podającego definicję.</li> + <li>W przypadku, gdy należy zwrócić uwagę semantycznie na obecność skrótu w tekście, przydatny jest element <code><abbr></code>. To z kolei może być użyte do celów stylizacyjnych lub skryptowych.</li> + <li>Możesz użyć <code><abbr></code> w porozumieniu z {{HTMLElement("dfn")}} aby ustalić definicje terminów, które są skrótami lub akronimami. Zobacz przykład {{anch("Definiowanie skrótu")}} poniżej.</li> +</ul> + +<h3 id="Uwagi_gramatyczne">Uwagi gramatyczne</h3> + +<p>W języka z {{interwiki("wikipedia", "grammatical number")}} (czyli w tych językach, w których liczba elementów wpływa na gramatykę zdania), użyj tej samej liczby gramatycznej w atrybucie <code>title</code>, co wewnątrz elementu <code><abbr></code>. Jest to szczególnie ważne w językach z więcej niż dwoma liczbami, takich jak Arabski, ale jest również istotne w języku angielskim.</p> + +<h2 id="Domyślna_stylizacja">Domyślna stylizacja</h2> + +<p>Celem tego znacznika jest jedynie wygoda dla autora i wszystkie przeglądarki domyślnie wyświetlają go w linii ({{cssxref('display')}}<code>: inline</code>), choć jego stylizacja różni się w zależności od przeglądarki:</p> + +<ul> + <li>Niektóre przeglądarki, takie jak Internet Explorer, nie stylizują go inaczej niż elementu {{HTMLElement("span")}}.</li> + <li>Opera, Firefox i inne dodają kropkowane podkreślenie zawartości elementu.</li> + <li>Kilka przeglądarek nie tylko dodaje kropkowane podkreślenie, ale także dodaje do nich wariant "small-caps"; aby uniknąć tej stylizacji, dodanie czegoś w rodzaju {{cssxref('font-variant')}}<code>: none</code> w CSS załatwia tę sprawę.</li> +</ul> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Oznaczanie_skrótu_semantycznie">Oznaczanie skrótu semantycznie</h3> + +<p>Aby oznaczyć skrót bez podania rozwinięcia lub opisu, po prostu użyj <code><abbr></code> bez żadnych atrybutów, jak widać w tym przykładzie.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>Używanie <abbr>HTML</abbr> jest fajne i proste!</p></pre> + +<h4 id="Rezultat">Rezultat</h4> + +<p>Używanie <abbr>HTML</abbr> jest fajne i proste!</p> + +<h3 id="Stylistyka_skrótów">Stylistyka skrótów</h3> + +<p>Możesz użyć CSS, aby ustawić własny styl skrótów, jak pokazano w tym prostym przykładzie.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>Używając <abbr>CSS</abbr>, możesz stylizować swoje skróty!</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">abbr { + font-variant: all-small-caps; +}</pre> + +<h4 id="Rezultat_2">Rezultat</h4> + +<p>Używając <abbr style="font-variant: all-small-caps;">CSS</abbr>, możesz stylizować swoje skróty!</p> + +<h3 id="Dostarczanie_rozszerzenia">Dostarczanie rozszerzenia</h3> + +<p>Dodanie atrybutu {{htmlattrxref("title")}} pozwala na rozwinięcie lub zdefiniowanie skrótu lub akronimu.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><p>Funkcję rejestru nazw internetowych w domenie .pl pełni <abbr title="Naukowa i Akademicka Śieć Komputerowa">NASK</abbr>.</p></pre> + +<h4 id="Rezultat_3">Rezultat</h4> + +<p>Funkcję rejestru nazw internetowych w domenie .pl pełni <abbr title="Naukowa i Akademicka Śieć Komputerowa">NASK</abbr>.</p> + +<h3 id="Definiowanie_skrótu">Definiowanie skrótu</h3> + +<p>Możesz użyć <code><abbr></code> w połączeniu z {{HTMLElement("dfn")}}, aby bardziej formalnie zdefiniować skrót, jak pokazano tutaj.</p> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html"><p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> +</dfn> jest językiem znaczników używanym do tworzenia semantyki i struktury strony internetowej.</p> + +<p><dfn id="spec">Specyfikacja</dfn> +(<abbr title="Specyfikacja">spec</abbr>) jest dokumentem, który przedstawia w szczegółach, jak technologia lub API ma funkcjonować i jak wygląda dostęp do nich.</p></pre> + +<h4 id="Rezultat_4">Rezultat</h4> + +<p><dfn><abbr title="HyperText Markup Language">HTML</abbr> </dfn> jest językiem znaczników używanym do tworzenia semantyki i struktury strony internetowej.</p> + +<p><dfn>Specyfikacja</dfn> (<abbr title="Specyfikacja">spec</abbr>) jest dokumentem, który przedstawia w szczegółach, jak technologia lub API ma funkcjonować i jak wygląda dostęp do nich.</p> + +<p>Zobacz bardziej szczegółowe przykłady w artykule <em><a href="https://developer.mozilla.org/pl/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">Jak oznaczyć skróty i uczynić je zrozumiałymi</a></em>.</p> + +<h2 id="Kwiestie_dostępności">Kwiestie dostępności</h2> + +<p>Wypisanie akronimu lub skrótu w całości za pierwszym razem, gdy jest on używany na stronie, jest korzystne, aby pomóc ludziom go zrozumieć, zwłaszcza jeśli treść jest żargonem technicznym lub branżowym.</p> + +<h4 id="Przykład">Przykład</h4> + +<pre class="brush: html"><p>JavaScript Object Notation (<abbr>JSON</abbr>) jest lekkim formatem wymiany danych.</p> +</pre> + +<p>Jest to szczególnie pomocne dla osób, które nie znają terminologii lub pojęć omawianych w treści, dla osób, które są nowe w języku oraz dla osób z problemami poznawczymi.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2> + + + +<p>{{Compat("html.elements.abbr")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li><a href="https://developer.mozilla.org/pl/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Używanie elementu <code><abbr></code></a></li> + <li>Inne elementy zawierające <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Text_level_semantics_conveying_elements">semantykę na poziomie tekstu</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> + <li>Przestarzały element {{HTMLElement("acronym")}}, którego obowiązki zostały przeniesione na <code><abbr></code></li> +</ul> diff --git a/files/pl/web/html/element/acronym/index.html b/files/pl/web/html/element/acronym/index.html new file mode 100644 index 0000000000..95c271a99f --- /dev/null +++ b/files/pl/web/html/element/acronym/index.html @@ -0,0 +1,81 @@ +--- +title: <acronym> +slug: Web/HTML/Element/acronym +tags: + - Element + - HTML + - 'HTML:Treść płynna' + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/acronym +--- +<p>{{obsolete_header}}</p> + +<h2 id="Summary" name="Summary">Podsumowanie</h2> + +<p>Element HTML Akronim (<code><acronym></code>) pozwala autorom wyraźnie wskazać ciąg znaków, które składają się na akronim lub skrót słowa. Element ten został usunięty w HTML5. Użyj elementu {{HTMLElement("abbr")}}.</p> + +<div class="note"> +<p><strong>Uwaga dotycząca użycia: </strong>Ten element został usunięty w HTML5 i nie powinien być już używany. Zamiast tego, programiści powinni używać elementu {{HTMLElement("abbr")}}.</p> +</div> + +<h2 id="Attributes" name="Attributes">Atrybuty</h2> + +<p>Ten element ma tylko <a class="new " href="https://developer.mozilla.org/pl/docs/Web/HTML/Global_attributes" rel="internal" title="HTML/global attributes">globalne atrybuty</a>, które są wspólne dla wszystkich elementów.</p> + +<h2 id="DOM_Interface" name="DOM_Interface">Interfejs DOM</h2> + +<p>Ten element implementuje interfejs {{domxref('HTMLElement')}}.</p> + +<div class="note"><strong>Uwaga dotycząca implementacji: </strong>Do Gecko 1.9.2 włącznie, Firefox implementuje interfejs {{domxref('HTMLSpanElement')}} dla tego elementu.</div> + +<h2 id="Example" name="Example">Przykład</h2> + +<pre class="brush:html"><p><acronym title="World Wide Web">WWW</acronym> jest tylko częścią składową Internetu.</p> +</pre> + +<h2 id="Default_styling" name="Default_styling">Domyślna stylizacja</h2> + +<p>Chociaż celem tego znacznika jest jedynie wygoda dla autora, jego domyślna stylizacja różni się w zależności od przeglądarki:</p> + +<ul> + <li>Niektóre przeglądarki, takie jak Internet Explorer, nie stylizowały go inaczej niż elementu {{HTMLElement("span")}}.</li> + <li>Opera, Firefox, Chrome i inne dodają kropkowane podkreślenie zawartości elementu.</li> + <li>Kilka przeglądarek nie tylko dodaje kropkowane podkreślenie, ale także dodaje do nich wariant "small-caps"; aby uniknąć tej stylizacji, dodanie czegoś w rodzaju {{cssxref('font-variant')}}<code>: none</code> w CSS załatwia tę sprawę.</li> +</ul> + +<p>Dlatego zaleca się, aby autorzy stron internetowych nie polegali całkowicie na domyślnej stylizacji.</p> + +<h2 id="Specifications" name="Specifications">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ACRONYM', '<acronym>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Kompatybilność z przeglądarką</h2> + + + +<p>{{Compat("html.elements.acronym")}}</p> + +<h2 id="See_also" name="See_also">Zobacz także</h2> + +<ul> + <li>Element {{HTMLElement("abbr")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/pl/web/html/element/address/index.html b/files/pl/web/html/element/address/index.html new file mode 100644 index 0000000000..3b3f050fbd --- /dev/null +++ b/files/pl/web/html/element/address/index.html @@ -0,0 +1,140 @@ +--- +title: '<address>: Element Adresu Kontaktowego' +slug: Web/HTML/Element/address +tags: + - Adres + - Adres Email + - Autor + - Element + - Email + - HTML + - Informacje Kontaktowe + - Kontakt + - Reference + - Sekcje HTML + - Web +translation_of: Web/HTML/Element/address +--- +<div>{{HTMLRef}}</div> + +<p id="Summary"><span class="seoSummary"><strong>Element HTML <code><address></code></strong> wskazuje, że dołączony HTML dostarcza informacji kontaktowych dla osoby lub osób, lub dla organizacji.</span></p> + +<p>Informacje kontaktowe dostarczane przez element <code><address></code> mogą przybierać dowolną formę odpowiednią dla danego kontekstu i mogą obejmować wszelkie potrzebne informacje kontaktowe, takie jak adres fizyczny, adres URL, adres email, numer telefonu, obsługa mediów społecznościowych, współrzędne geograficzne i tak dalej. Element <code><address></code> powinien zawierać imię i nazwisko osoby, osób lub nazwę organizacji, do której odnoszą się dane kontaktowe.</p> + +<p><code><address></code> może być używany w różnych kontekstach, takich jak podanie informacji kontaktowych firmy w nagłówku strony lub wskazanie autora artykułu poprzez włączenie elementu <code><address></code> do {{HTMLElement("article")}}.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th> + <td><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Flow_content">Treść płynna</a>, zawartość zdzieralna.</td> + </tr> + <tr> + <th>Dozwolona zawartość</th> + <td> + <p><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Flow_content">Zawartość przepływu</a>, ale bez zagnieżdżonego elementu <code><address></code>, bez zawartości nagłówka ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), bez zawartości sekcjonowania ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}) i bez elementu {{HTMLElement("header")}} ani {{HTMLElement("footer")}}.</p> + </td> + </tr> + <tr> + <th>Pominięcie znacznika</th> + <td>Brak, zarówno znacznik początkowy jak i końcowy są obowiązkowe.</td> + </tr> + <tr> + <th>Dozwoleni rodzice</th> + <td>Każdy element, który akceptuje zawartość przepływu, ale zawsze z wyłączeniem elementów <code><address></code> (zgodnie z logiczną zasadą symetrii, jeśli znacznik <code><address></code>, jako rodzic, nie może zagnieżdżać elementu <code><address></code>, to ta sama zawartość <code><address></code> nie może mieć znacznika <code><address></code> jako rodzica.</td> + </tr> + <tr> + <th>Dozwolone role ARIA</th> + <td>Brak</td> + </tr> + <tr> + <th>Interfejs DOM</th> + <td>{{domxref("HTMLElement")}} Przed Gecko 2.0 (Firefox 4), Gecko zaimplementowało ten element wykorzystując interfejs {{domxref("HTMLSpanElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Ten element uwzględnia tylko <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">atrybuty globalne</a>.</p> + +<h2 id="Uwagi_dotyczące_użycia">Uwagi dotyczące użycia</h2> + +<ul> + <li>Aby reprezentować dowolny adres, taki, który nie jest związany z danymi kontaktowymi, użyj elementu {{HTMLElement("p")}} zamiast elementu <code><address></code>.</li> + <li>Element ten nie powinien zawierać więcej informacji niż dane kontaktowe, np. data publikacji (która należy do elementu {{HTMLElement("time")}}).</li> + <li>Zazwyczaj element <code><address></code> może być umieszczony wewnątrz elementu {{HTMLElement("footer")}} bieżącej sekcji, jeśli taki istnieje.</li> +</ul> + +<h2 id="Przykład">Przykład</h2> + +<p>Ten przykład pokazuje wykorzystanie elementu <code><address></code> do wyznaczenia danych kontaktowych autora artykułu.</p> + +<pre class="brush: html"> <address> + Możesz skontaktować się z autorem na <a href="http://www.somedomain.com/contact"> + www.somedomain.com</a>.<br> + Jeśli widzisz jakieś błędy, proszę <a href="mailto:webmaster@somedomain.com"> + skontaktuj się z administratorem</a>.<br> + Możesz również chcieć nas odwiedzić:<br> + Mozilla Foundation<br> + 331 E Evelyn Ave<br> + Mountain View, CA 94041<br> + USA + </address> +</pre> + +<h3 id="Rezultat">Rezultat</h3> + +<address>Możesz skontaktować się z autorem na <a href="http://www.somedomain.com/contact"> www.somedomain.com</a>.<br> +Jeśli widzisz jakieś błędy, proszę <a href="mailto:webmaster@somedomain.com"> skontaktuj się z administratorem</a>.<br> +Możesz również chcieć nas odwiedzić:<br> +Mozilla Foundation<br> +331 E Evelyn Ave<br> +Mountain View, CA 94041<br> +USA</address> + +<p> </p> + +<p>Mimo, że renderuje tekst z taką samą domyślną stylistyką jak elementy {{HTMLElement("i")}} oraz {{HTMLElement("em")}}, bardziej odpowiednie jest użycie <code><address></code> w odniesieniu do informacji kontaktowych, ponieważ przekazuje on dodatkowe informacje semantyczne.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2> + + + +<p>{{Compat("html.elements.address")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>Inne elementy związane z sekcją: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}};</li> + <li class="last"><a class="deki-ns current" href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Sekcje_oraz_konspekt_dokumentu_HTML5" title="Sections and Outlines of an HTML5 document">Sekcje i zarys dokumentu HTML5</a>.</li> +</ul> diff --git a/files/pl/web/html/element/applet/index.html b/files/pl/web/html/element/applet/index.html new file mode 100644 index 0000000000..dc0e3f6945 --- /dev/null +++ b/files/pl/web/html/element/applet/index.html @@ -0,0 +1,74 @@ +--- +title: applet +slug: Web/HTML/Element/applet +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/applet +--- +<p> +</p><p><br> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><applet></code> (<code>Applet</code>) wyróżnia włączenie apletu Java. Definicja HTML 4.01 Strict nie zawiera tego elementu, został on wycofany na rzecz <code><object></code>. +</p> +<h3 id="Atrybuty" name="Atrybuty"> Atrybuty </h3> +<dl><dt>align +</dt><dd>Ten atrybut jest używany to umieszczenia apletu na stronie względem treści, która może opływać go wokół. Specyfikacja HTML 4.01 definiuje wartości <code>bottom</code>, <code>left</code>, <code>middle</code>, <code>right</code> i <code>top</code>, natomiast Microsoft i Netscape mogą wspierać również <code>absbottom</code>, <code>absmiddle</code>, <code>baseline</code>, <code>center</code> i <code>texttop</code>. +</dd></dl> +<dl><dt>alt +</dt><dd>Ten atrybut powoduje wyświetlenie opisowego alternatywnego tekstu w przeglądarkach, które nie wspierają Javy. Projektanci stron powinni również pamiętać, że zawartość zamknięta w elemencie <code><applet></code> również może być wyświetlona jako alternatywny tekst. +</dd></dl> +<dl><dt>archive +</dt><dd>Ten atrybut odsyła do zarchiwizowanej lub skompresowanej wersji apletu i powiązanych z nim plików klas, co może pomóc zredukować czas ładowania. +</dd></dl> +<dl><dt>code +</dt><dd>Ten atrybut określa URL pliku apletu z klasami do załadowania i wykonania. Nazwy plików apletu są identyfikowane przez rozszerzenie pliku <i>.class</i>. URL określony przez <code>code</code> może być relatywny do atrybutu <code>codebase</code>. +</dd></dl> +<dl><dt>codebase +</dt><dd>Ten atrybut daje bezwzględny lub względny URL katalogu, gdzie są przechowywane pliki <i>.class</i> apletu przywoływane przez atrybut <code>code</code> . +</dd></dl> +<dl><dt>datafld +</dt><dd>Ten atrybut, wspierany przez Internet Explorer 4 i wyższy, określa nazwę kolumny z obiektu źródła danych, który dostarcza powiązanych danych. Ten atrybut może być użyty do określenia różnych elementów <code><param></code> przekazywanych do apletu Javy. +</dd></dl> +<dl><dt>datasrc +</dt><dd>Podobnie jak <code>datafld</code> ten atrybut jest używany do wiązania danych w Internet Explorer 4. Określa <code>id</code> obiektu źródła danych, który dostarcza danych, które są powiązane z elementami <code><param></code>, związanymi z apletem. </dd></dl> +<dl><dt>height +</dt><dd>Ten atrybut określa wysokość w pikselach, której potrzebuje aplet. +</dd></dl> +<dl><dt>hspace +</dt><dd>Ten atrybut określa w pikselach dodatkową poziomą przestrzeń do zarezerwowania z dwóch stron apletu. +</dd></dl> +<dl><dt>mayscript +</dt><dd>W implementacji Netscape'a ten atrybut pozwala na dostęp do apletu przez programy w języku skryptowym, osadzone w dokumencie. +</dd></dl> +<dl><dt>name +</dt><dd>Ten atrybut przypisuje nazwę do apletu, zatem może być identyfikowany przez inne zasoby, szczególnie skrypty. +</dd></dl> +<dl><dt>object +</dt><dd>Ten atrybut określa URL serializowanej reprezentacji apletu. +</dd></dl> +<dl><dt>src +</dt><dd>Jako zdefiniowany dla Internet Explorer 4 i wyższego, ten atrybut określa URL dla pliku powiązanego z apletem. Znaczenie i użycie jest niejasne i nie jest częścią standardu HTML. +</dd></dl> +<dl><dt>vspace +</dt><dd>Ten atrybut określa w pikselach dodatkową pionową przestrzeń do zarezerwowania nad i pod apletem. +</dd></dl> +<dl><dt>width +</dt><dd>Ten atrybut określa w pikselach szerokość, której potrzebuje aplet. +</dd></dl> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<pre><applet code="game.class" align="left" archive="game.zip" height="250" width="350"> + +<param name="difficulty" value="easy"> + +<b>Przepraszamy, potrzebujesz Javy, by grać w tę grę</b> + +</applet> +</pre> <h3 id="Notatki" name="Notatki"> Notatki </h3> +<p>Specyfikacja W3C nie zachęca do używania <code><applet></code> i preferuje używanie znacznika <code><object></code>. W definicji HTML 4.01 Strict ten element jest wycofywany. +</p><p><br> +{{ HTML:Element_Navigation() }} +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/HTML/Element/applet" } ) }} diff --git a/files/pl/web/html/element/aside/index.html b/files/pl/web/html/element/aside/index.html new file mode 100644 index 0000000000..8bcb01e076 --- /dev/null +++ b/files/pl/web/html/element/aside/index.html @@ -0,0 +1,126 @@ +--- +title: <aside> +slug: Web/HTML/Element/aside +translation_of: Web/HTML/Element/aside +--- +<p>Element języka <em>HTML <code><aside></code></em> reprezentuje pewnego rodzaju poboczną sekcję strony, która mogłaby także być uważana za jej odrębny element, niemający związku z jej treścią. Takie sekcje są zwykle reprezentowane jako kolumny z boku artykułów lub wtrącenia. Często zawierają one różne typy informacji, takie jak powiązane reklamy, biografie autorów, aplikacje lub informacje o profilu i powiązane strony jak w przypadku blogów.</p> + +<div class="note"> +<p><em>Notki dotyczące użycia:</em></p> + +<ul> + <li>Nie używaj elementu <code><aside></code> by otagować lub odznaczyć wtrącany do artykułu tekst, gdyż tekst ten jest zwyke integralną częścią artykułu, a nie osobnym elementem. </li> +</ul> +</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, sectioning content, palpable content.</li> + <li><dfn>Permitted content</dfn><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>.</li> + <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">flow content</a>. Note that an <code><aside></code> element must not be a descendant of an {{HTMLElement("address")}} element.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p><span style="line-height: 21px;">Ten element zawiera tylko atrybuty globalne (</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a>)<span style="line-height: 21px;">.</span></p> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: html"><article> + <p> + The Disney movie <em>The Little Mermaid</em> was + first released to theatres in 1989. + </p> + <aside> + The movie earned $87 million during its initial release. + </aside> + <p> + More info about the movie... + </p> +</article></pre> + +<p>{{EmbedLiveSample("Examples")}}</p> + +<h2 id="Specifications" name="Specifications">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-aside-element', '<aside>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-aside-element', '<aside>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Obsługa_w_przeglądarkach">Obsługa w przeglądarkach</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>5</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0 (iOS 4.2)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>Others section-related elements: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pl/web/html/element/b/index.html b/files/pl/web/html/element/b/index.html new file mode 100644 index 0000000000..16276b25a5 --- /dev/null +++ b/files/pl/web/html/element/b/index.html @@ -0,0 +1,30 @@ +--- +title: b +slug: Web/HTML/Element/b +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/b +--- +<p> </p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Element <code><b>...</b></code> wyróżnia poszczególne fragmenty tekstu, jednak nie nadaje im ważności sematycznej (tak jak robi to znacznik <a href="/pl/HTML/Element/strong" title="pl/HTML/Element/strong"><code><strong><strong></strong></code></a>). Ze względu na zaszłość ze starymi wersjami HTMLa, znacznik nadaje <strong>pogrubienie</strong> dla tekstu, który ma wewnątrz.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval"><p> + To jest pierwsze wyrażenie. + <b>To wyrażenie jest pogrubione.</b> +</p> +</pre> + +<h4 id="Rezultat" name="Rezultat">Rezultat</h4> + +<p>To jest pierwsze wyrażenie. <strong>To wyrażenie jest pogrubione.</strong></p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p><a href="/pl/HTML/Element/strong" title="pl/HTML/Element/strong">Znacznik <code><strong><strong></strong></code></a></p> + +<p>{{ languages( { "en": "en/HTML/Element/b", "nl": "nl/HTML/Element/b", "de": "de/HTML/Element/b" } ) }}</p> diff --git a/files/pl/web/html/element/base/index.html b/files/pl/web/html/element/base/index.html new file mode 100644 index 0000000000..6ddf9b043a --- /dev/null +++ b/files/pl/web/html/element/base/index.html @@ -0,0 +1,129 @@ +--- +title: '<base>: Element Domyślnego URL Dokumentu' +slug: Web/HTML/Element/base +tags: + - Element + - HTML + - HTML metadane dokumentu + - 'HTML:Metadane zawartość' + - Reference +translation_of: Web/HTML/Element/base +--- +<p id="Summary">{{HTMLRef}}</p> + +<p><strong>Element HTML <code><base></code></strong> określa bazowy adres URL, którego należy użyć dla wszystkich względnych adresów URL w dokumencie. W dokumencie może znajdować się tylko jeden element <code><base></code>.</p> + +<p>Używany bazowy adres URL dokumentu jest dostępny z poziomu skryptów z {{domxref('document.baseURI')}}. Jeśli dokument nie zawiera żadnych elementów <code><base></code>, <code>baseURI</code> domyślnie jest ustawiony na {{domxref("location.href")}}.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th> + <td>Zawartość metadanych.</td> + </tr> + <tr> + <th scope="row">Dozwolona zawartość</th> + <td>Brak, jest to {{Glossary("empty element", "pusty element")}}.</td> + </tr> + <tr> + <th scope="row">Pominięcie znacznika</th> + <td>Nie może być tagu zamykającego.</td> + </tr> + <tr> + <th scope="row">Dozwoleni rodzice</th> + <td>Każdy {{HTMLElement("head")}}, który nie zawiera żadnego innego elementu {{HTMLElement("base")}}.</td> + </tr> + <tr> + <th scope="row">Dozwolone role ARIA</th> + <td>Brak</td> + </tr> + <tr> + <th scope="row">Interfejs DOM</th> + <td>{{domxref("HTMLBaseElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Atrybuty tego elementu obejmują <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</p> + +<p>Jeśli określono jeden z poniższych atrybutów, element ten <strong>musi</strong> występować przed innymi elementami, których wartości są URLami, takich jak atrybut <code>href</code> elementu {{HTMLElement("link")}}.</p> + +<dl> + <dt>{{htmlattrdef("href")}}</dt> + <dd>Podstawowy adres URL, który ma być używany w całym dokumencie dla względnych adresów URL. Bezwzględne i względne adresy URL są dozwolone.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd><strong>Słowo kluczowe</strong> lub <strong>zdefiniowana przez autora nazwa</strong> domyślnego kontekstu przeglądania, aby wyświetlić wynik, gdy linki lub formularze mają na celu nawigację, dla elementów {{HTMLElement("a")}} lub {{HTMLElement("form")}} bez określonego atrybutu <code>target</code>. Wartość atrybutu określa docelowy kontekst przeglądania (np. zakładka, okno lub {{HTMLElement("iframe")}}).</dd> + <dd>Poniższe słowa kluczowe mają szczególne znaczenie: + <ul> + <li><code>_self</code>: Załaduj wynik do tego samego kontekstu przeglądania, co bieżący. (Jest to wartość domyślna).</li> + <li><code>_blank</code>: Załaduj wynik do nowego, nienazwanego kontekstu przeglądania.</li> + <li><code>_parent</code>: Załaduj wynik do nadrzędnego kontekstu przeglądania bieżącego. (Jeśli aktualna strona znajduje się wewnątrz ramki.) Jeśli nie ma rodzica, zachowuje się tak samo jak <code>_self</code>.</li> + <li><code>_top</code>: Załaduj wynik do najwyższego konktekstu przeglądania (tzn. kontekstu przeglądania, który jest przodkiem obecnego i nie ma rodzica). Jeśli nie ma żadnego rodzica, zachowuje się tak samo jak <code>_self</code>.</li> + </ul> + </dd> +</dl> + +<h2 id="Uwagi_dotyczące_zastosowania">Uwagi dotyczące zastosowania</h2> + +<h3 id="Wiele_elementów_<base>">Wiele elementów <code><base></code></h3> + +<p>Jeśli użyto wiele elementów <code><base></code>, tylko pierwszy <code>href</code> i pierwszy <code>target</code> są przestrzegane - wszystkie inne są ignorowane.</p> + +<h3 id="Kotwice_w_obrębie_strony">Kotwice w obrębie strony</h3> + +<p>Linki wskazujące na fragment dokumentu - np. <code><a href="#some-id"></code> - rozwiązywane są za pomocą <code><base></code>, wywołującego żądanie HTTP na bazowy adres URL z załączonym fragmentem.<br> + <br> + Na przykład, podając <code><base href="https://example.com"></code><br> + <br> + ...i ten link: <code><a href="#anchor">Kotwica</a></code><br> + <br> + ...odsyłacz wskaże na <code>https://example.com/#anchor</code>.</p> + +<h3 id="Open_Graph">Open Graph</h3> + +<p>Znaczniki <a href="http://ogp.me/">Open Graph</a> nie uznają <code><base></code> i powinny zawsze mieć pełne bezwzględne adresy URL. Na przykład:</p> + +<pre class="brush: html"><meta property="og:image" content="https://example.com/thumbnail.jpg"></pre> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: html"><base href="https://www.example.com/"> +<base target="_blank"> +<base target="_top" href="https://example.com/"></pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Bez zmian w stosuku do najnowszej wersji.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Określono zachowanie <code>target</code></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '<base>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Dodano atrybut <code>target</code></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2> + + + +<p>{{Compat("html.elements.base")}}</p> diff --git a/files/pl/web/html/element/basefont/index.html b/files/pl/web/html/element/basefont/index.html new file mode 100644 index 0000000000..f012d79e2b --- /dev/null +++ b/files/pl/web/html/element/basefont/index.html @@ -0,0 +1,34 @@ +--- +title: basefont +slug: Web/HTML/Element/basefont +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/basefont +--- +<p> +</p><p><br> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><basefont></code> ustanawia domyślny rozmiar czcionki dla dokumentu. Rozmiar czcionki może być wtedy różnie odnoszony do czcionki bazowej przy użyciu elementu <code><font></code>. +</p> +<h3 id="Atrybuty" name="Atrybuty"> Atrybuty </h3> +<dl><dt>color +</dt><dd>Ten atrybut ustawia kolor tekstu przy użyciu nazwanego koloru lub koloru określonego w formacie szesnastkowym #RRGGBB. +</dd></dl> +<dl><dt>face +</dt><dd>Ten atrybut zawiera listę jednej lub wielu nazw czcionek. Tekst dokumentu w domyślnym stylu jest wyświetlany w pierwszym rodzaju czcionki, który wspiera przeglądarka użytkownika. Jeśli żadna z czcionek podanych w liście nie jest zainstalowana w lokalnym systemie, przeglądarka zwykle wybierze domyślną dla tego systemu czcionkę proporcjonalną lub o stałej szerokości. +</dd></dl> +<dl><dt>size +</dt><dd>Ten atrybut określa rozmiar czcionki w wartościach numerycznych lub względnych. Wartości numeryczne zawierają się w zakresie od 1 do 7, gdzie 1 jest wartością najmniejszą, zaś 3 domyślną. +</dd></dl> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<pre> <basefont color="#FF0000" face="Helvetica" size="+2" /> +</pre> +<h3 id="Notatki" name="Notatki"> Notatki </h3> +<p>HTML 3.2 wspiera <code>basefont</code>, ale jedynie z atrybutem <code>size</code>. +</p><p>Specyfikacje Strict HTML oraz XHTML nie wspierają tego elementu. +</p><p>Wbrew temu, że jest częścią standardu Transitional, część przeglądarek skupionych na standardach, jak Mozilla i Opera, nie wspiera tego elementu. +</p><p>Ten element może być naśladowany przez regułę CSS dla elementu <code>body</code>. +</p><p>XHTML 1.0 wymaga dla tego elementu zamykającego ukośnika: <code><basefont /></code>. +</p><p>{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/basefont" } ) }} diff --git a/files/pl/web/html/element/bdo/index.html b/files/pl/web/html/element/bdo/index.html new file mode 100644 index 0000000000..34e4b85ba0 --- /dev/null +++ b/files/pl/web/html/element/bdo/index.html @@ -0,0 +1,22 @@ +--- +title: bdo +slug: Web/HTML/Element/bdo +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/bdo +--- +<p> +</p><p><br> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><bdo></code> jest używany do unieważnienia aktualnego kierunku tekstu. Powoduje to zignorowanie kierunku znaków na rzecz zdefiniowanego kierunku. +</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<pre> <!-- Przełącz kierunek tekstu --> + <bdo dir="rtl">Ten tekst będzie biegł od prawej do lewej.</bdo> +</pre> +<h3 id="Notatki" name="Notatki"> Notatki </h3> +<p>Specyfikacja HTML 4 nie określa zdarzeń dla tego elementu; zostały one dodane w XHTML. Bardzo prawdopodobnie jest to przeoczenie. +</p><p><br> +{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/bdo" } ) }} diff --git a/files/pl/web/html/element/bgsound/index.html b/files/pl/web/html/element/bgsound/index.html new file mode 100644 index 0000000000..49c27eb45e --- /dev/null +++ b/files/pl/web/html/element/bgsound/index.html @@ -0,0 +1,45 @@ +--- +title: bgsound +slug: Web/HTML/Element/bgsound +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/bgsound +--- +<p> </p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Atrybut <code><bgsound></code> Internet Explorera wiąże dźwięk tła ze stroną</p> +<h3 id="Atrybuty" name="Atrybuty">Atrybuty</h3> +<dl> + <dt> + balance</dt> + <dd> + Ten atrybut definiuje liczbę między -10,000 a +10,000, która decyduje, jak natężenie dźwięku będzie dzielone między głośniki.</dd> +</dl> +<dl> + <dt> + loop</dt> + <dd> + Ten atrybut wskazuje liczbę powtórzeń dźwięku, który jest do odegrania i może mieć zarówno wartość liczbową, jak i słowo kluczowe <code>infinite</code> (nieskończony).</dd> +</dl> +<dl> + <dt> + src</dt> + <dd> + Ten atrybut określa URL pliku dźwiękowego do odegrania, który musi być jednym z podanych typów: .wav, .au, or .mid.</dd> +</dl> +<dl> + <dt> + volume</dt> + <dd> + Ten atrybut definiuje liczbę pomiędzy -10,000 a 0, która decyduje o głośności dźwięku w tle strony.</dd> +</dl> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> <bgsound src="sound1.mid"> + + <bgsound src="sound2.au" loop="infinite"> +</pre> +<h3 id="Notatki" name="Notatki">Notatki</h3> +<p>Podobną funkcjonalność można osiągnąć w niektórych wersjach Netscape, używając znacznika <code><embed></code> do wywołania odtwarzacza audio.</p> +<p>Możesz pisać <code>bgsound</code> z samozamykającym się znacznikiem <code><bgsound /></code>. Jednak, ponieważ ten element nie jest częścią standardu, robienie z niego znacznika w stylu XHTML, nie uczyni go walidowalnym.</p> +<p>{{ HTML:Element_Navigation() }}</p> +<p>{{ languages( { "en": "en/HTML/Element/bgsound" } ) }}</p> diff --git a/files/pl/web/html/element/big/index.html b/files/pl/web/html/element/big/index.html new file mode 100644 index 0000000000..b8848b77e0 --- /dev/null +++ b/files/pl/web/html/element/big/index.html @@ -0,0 +1,20 @@ +--- +title: big +slug: Web/HTML/Element/big +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/big +--- +<div> + {{ obsolete_header() }}</div> +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> +<p>Element <code><big>...</big></code> powiększa czcionkę w stosunku do użytej treści.</p> +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> +<pre class="brush:html"><p> + To jest pierwsze zdanie. <big>To zdanie jest napisane dużymi literami.</big> +</p></pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> +<p><a href="/pl/HTML/Element/font" title="pl/HTML/Element/font">Znacznik <code><font></code></a>, <a href="/pl/HTML/Element/small" title="pl/HTML/Element/small">Znacznik <code><small></code></a>, <a href="/pl/HTML/Element/style" title="pl/HTML/Element/style">Znacznik <code><style></code></a></p> +<div> + {{ HTML:Element_Navigation() }}</div> diff --git a/files/pl/web/html/element/blink/index.html b/files/pl/web/html/element/blink/index.html new file mode 100644 index 0000000000..21a13480d2 --- /dev/null +++ b/files/pl/web/html/element/blink/index.html @@ -0,0 +1,22 @@ +--- +title: blink +slug: Web/HTML/Element/blink +translation_of: Web/HTML/Element/blink +--- +<div> + {{Deprecated_header()}}</div> +<div> + {{Non-standard_header()}}</div> +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> +<p>Element <code><blink>...</blink></code> powoduje migotanie zawartego w nim tekstu (działa tylko w IE, Operze i przeglądarkach opartych na silniku <a href="/pl/Gecko" title="pl/Gecko">Gecko</a>).</p> +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> +<pre class="brush:html"><blink>Why would somebody use this?</blink> +</pre> +<h3 id="Rezultat" name="Rezultat">Rezultat</h3> +<p><img alt="Grafika:HTMLBlinkElement.gif" class="internal" src="/@api/deki/files/2316/=HTMLBlinkElement.gif"></p> +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> +<ul> + <li>{{cssxref("text-decoration")}}</li> + <li><a href="/pl/HTML/Element/marquee" title="pl/HTML/Element/marquee">Znacznik <code><marquee></code></a></li> +</ul> +<p>{{ HTML:Element_Navigation() }}</p> diff --git a/files/pl/web/html/element/blockquote/index.html b/files/pl/web/html/element/blockquote/index.html new file mode 100644 index 0000000000..66fa6100fe --- /dev/null +++ b/files/pl/web/html/element/blockquote/index.html @@ -0,0 +1,49 @@ +--- +title: blockquote +slug: Web/HTML/Element/blockquote +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/blockquote +--- +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> +<p><strong>Cytat blokowy</strong> oznacza, że dany tekst jest większym cytatem. Zazwyczaj pokazywane jest to jako wcięty tekst (zobacz w <a href="/pl/docs/HTML/Element/blockquote#Notatki" title="HTML/Element/blockquote#Notatki">notatkach</a> jak to zmienić). Źródło cytatu może być zaznaczone za pomocą <a href="/pl/docs/HTML/Element/cite" title="HTML/Element/cite">elementu <code><cite></code></a>.</p> + +<ul> + <li>Typ elementu: <a href="/pl/docs/HTML/Elementy_blokowe" title="HTML/Elementy_blokowe">blokowy</a></li> + <li>Dozwolona zawartość: <a href="/pl/docs/HTML/Elementy_blokowe" title="HTML/Elementy_blokowe">elementy blokowe</a></li> +</ul> + + +<h2 id="Atrybuty" name="Atrybuty">Atrybuty</h2> +<dl> + <dt> + cite</dt> + <dd> + Wartością tego atrybutu jest URL, który określa źródłowy dokument lub wiadomość dla cytowanej informacji. Ten atrybut jest przeznaczony do wskazywania informacji wyjaśniającej kontekst lub powiązanie cytatu.</dd> +</dl> + + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> +<pre class="brush:html"><blockquote cite="http://developer.mozilla.org"> + <p>To jest cytat z Mozilla Developer Center.</p> +</blockquote></pre> + +<p>Powyższy HTML da następujący efekt:</p> + +<blockquote cite="http://developer.mozilla.org"> + <p>To jest cytat z Mozilla Developer Center.</p> +</blockquote> + + +<h2 id="Notatki" name="Notatki">Notatki</h2> +<p>By zmienić wcięcie dla <code><blockquote></code>, użyj własności <a href="/pl/docs/CSS" title="CSS">CSS</a> <a href="/pl/docs/CSS/Margin" title="CSS/Margin"><code>margin</code></a>.</p> +<p>Dla krótkich cytatów użyj elementu <a href="/pl/docs/HTML/Element/q" title="HTML/Element/q"><code><q></code></a>.</p> + + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> +<ul> + <li><a href="/pl/docs/HTML/Element/p" title="HTML/Element/p">Akapit</a></li> + <li><a href="/pl/docs/HTML/Element/code" title="HTML/Element/code">Znacznik <code><code></code></a></li> +</ul> + +<div>{{ HTML:Element_Navigation() }}</div> diff --git a/files/pl/web/html/element/body/index.html b/files/pl/web/html/element/body/index.html new file mode 100644 index 0000000000..2fbec32b65 --- /dev/null +++ b/files/pl/web/html/element/body/index.html @@ -0,0 +1,166 @@ +--- +title: '<body>: Element Treści Dokumentu' +slug: Web/HTML/Element/body +tags: + - Element + - HTML + - Reference + - Sectioning Root Element + - Sections + - Web +translation_of: Web/HTML/Element/body +--- +<p>{{HTMLRef}}</p> + +<p><span class="seoSummary"><strong>Element <code><body></code> </strong>reprezentuje zawartość dokumentu HTML. W dokumencie może znajdować się tylko jeden element <code><body></code>.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Kategorie treści</th> + <td><a href="https://wiki.developer.mozilla.org/pl/docs/Web/Guide/HTML/Sekcje_oraz_konspekt_dokumentu_HTML5">Podział na sekcje</a>.</td> + </tr> + <tr> + <th scope="row">Dozwolona zawartość</th> + <td><a href="https://wiki.developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Flow_content">Zawartość przepływu</a>.</td> + </tr> + <tr> + <th scope="row">Pominięcie znacznika</th> + <td>Znacznik otwierający może zostać pominięty, jeśli pierwszą rzeczą wewnątrz niego nie jest znak spacji, komentarz, element {{HTMLElement("script")}} lub element {{HTMLElement("style")}}. Znacznik zamykający może zostać pominięty, jeśli element <body> ma zawartość lub ma znacznik startowy, a po nim nie następuje od razu komentarz.</td> + </tr> + <tr> + <th scope="row">Dozwoleni rodzice</th> + <td>To musi być drugi element elementu {{HTMLElement("html")}}.</td> + </tr> + <tr> + <th scope="row">Dozwolone role ARIA</th> + <td>Brak</td> + </tr> + <tr> + <th scope="row">Interfejs DOM</th> + <td>{{domxref("HTMLBodyElement")}} + <ul> + <li>Element <code><body></code> wyświetla interfejs {{domxref("HTMLBodyElement")}}.</li> + <li>Dostęp do elementu <code><body></code> można uzyskać poprzez właściwość {{domxref("document.body")}}.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Ten element uwzględnia <a href="https://wiki.developer.mozilla.org/pl/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</p> + +<dl> + <dt>{{htmlattrdef("alink")}} {{obsolete_inline}}</dt> + <dd>Kolor tekstu dla hiperłączy po zaznaczeniu. <em>Ta metoda jest nieprawidłowa, użyj właściwości CSS {{cssxref("color")}} w połączeniu z pseudo-klasą {{cssxref(":active")}}.</em></dd> + <dt>{{htmlattrdef("background")}} {{obsolete_inline}}</dt> + <dd>URI obrazu do wykorzystania jako tło. <em>Ta metoda jest nieprawidłowa, zamiast tego należy użyć właściwości CSS {{cssxref("background")}} na elemencie.</em></dd> + <dt>{{htmlattrdef("bgcolor")}} {{obsolete_inline}}</dt> + <dd>Kolor tła dokumentu. <em>Ta metoda jest nieprawidłowa, użyj zamiast tego właściwości CSS {{cssxref("background-color")}} na elemencie.</em></dd> + <dt>{{htmlattrdef("bottommargin")}} {{obsolete_inline}}</dt> + <dd>Margines dolnej części strony. <em>Ta metoda jest nieprawidłowa, zamiast tego użyj właściwości CSS {{cssxref("margin-bottom")}} na elemencie.</em></dd> + <dt>{{htmlattrdef("leftmargin")}} {{obsolete_inline}}</dt> + <dd>Margines lewej części strony. <em>Ta metoda jest nieprawidłowa, zamiast tego użyj właściwości CSS {{cssxref("margin-left")}} na elemencie.</em></dd> + <dt>{{htmlattrdef("link")}} {{obsolete_inline}}</dt> + <dd>Kolor tekstu dla nie odwiedzonych linków hipertekstowych. <em>Ta metoda jest nieprawidłowa, zamiast tego użyj właściwości CSS {{cssxref("color")}} w połączeniu z pseudo-klasą {{cssxref(":link")}}.</em></dd> + <dt>{{htmlattrdef("onafterprint")}}</dt> + <dd>Funkcja do wywołania po wydrukowaniu dokumentu przez użytkownika.</dd> + <dt>{{htmlattrdef("onbeforeprint")}}</dt> + <dd>Funkcja do wywołania, gdy użytkownik żąda wydrukowania dokumentu.</dd> + <dt>{{htmlattrdef("onbeforeunload")}}</dt> + <dd>Funkcja do wywołania, gdy dokument jest w trakcie ładowania.</dd> + <dt>{{htmlattrdef("onblur")}}</dt> + <dd>Funkcja do wywołania, gdy dokument straci ostrość.</dd> + <dt>{{htmlattrdef("onerror")}}</dt> + <dd>Funkcja do wywołania, gdy dokument nie zostanie załadowany prawidłowo.</dd> + <dt>{{htmlattrdef("onfocus")}}</dt> + <dd>Funkcja do wywołania, gdy dokument uzyska ostrość.</dd> + <dt>{{htmlattrdef("onhashchange")}}</dt> + <dd>Funkcja do wywołania w przypadku zmiany części identyfikatora fragmentu (rozpoczynającego się znakiem hash (<code>'#'</code>)) bieżącego adresu dokumentu.</dd> + <dt>{{htmlattrdef("onlanguagechange")}} {{experimental_inline}}</dt> + <dd>Funkcja do wywołania po zmianie preferowanych języków.</dd> + <dt>{{htmlattrdef("onload")}}</dt> + <dd>Funkcja do wywołania po zakończeniu ładowania dokumentu.</dd> + <dt>{{htmlattrdef("onmessage")}}</dt> + <dd>Funkcja do wywołania, gdy dokument otrzyma wiadomość.</dd> + <dt>{{htmlattrdef("onoffline")}}</dt> + <dd>Funkcja do wywołania, gdy zawiodła komunikacja sieciowa.</dd> + <dt>{{htmlattrdef("ononline")}}</dt> + <dd>Funkcja do wywołania po przywróceniu komunikacji sieciowej.</dd> + <dt>{{htmlattrdef("onpopstate")}}</dt> + <dd>Funkcja do wywołania po przejściu użytkownika do historii sesji.</dd> + <dt>{{htmlattrdef("onredo")}}</dt> + <dd>Funkcja do wywołania, gdy użytkownik przeszedł do przodu w historii operacji cofania.</dd> + <dt>{{htmlattrdef("onresize")}}</dt> + <dd>Funkcja do wywołania po zmianie rozmiaru dokumentu.</dd> + <dt>{{htmlattrdef("onstorage")}}</dt> + <dd>Funkcja do wywołania, gdy obszar pamięci masowej ulegnie zmianie.</dd> + <dt>{{htmlattrdef("onundo")}}</dt> + <dd>Funkcja do wywołania po cofnięciu się użytkownika w historii operacji.</dd> + <dt>{{htmlattrdef("onunload")}}</dt> + <dd>Funkcja do wywołania, gdy dokument wygasa.</dd> + <dt>{{htmlattrdef("rightmargin")}} {{obsolete_inline}}</dt> + <dd>Margines prawej części strony. <em>Ta metoda jest nieprawidłowa, zamiast tego należy użyć właściwości CSS {{cssxref("margin-right")}} na elemencie.</em></dd> + <dt>{{htmlattrdef("text")}} {{obsolete_inline}}</dt> + <dd>Kolor tekstu na pierwszym planie. <em>Ta metoda jest nieprawidłowa, należy użyć właściwości CSS {{cssxref("color")}} na elemencie.</em></dd> + <dt>{{htmlattrdef("topmargin")}} {{obsolete_inline}}</dt> + <dd>Margines górnej części strony. <em>Ta metoda jest nieprawidłowa, należy użyć właściwości CSS {{cssxref("margin-top")}} na elemencie.</em></dd> + <dt>{{htmlattrdef("vlink")}} {{obsolete_inline}}</dt> + <dd>Kolor tekstu dla odwiedzonych linków hipertekstowych. <em>Ta metoda jest nieprawidłowa, należy użyć właściwości CSS {{cssxref("color")}} w połączeniu z pseudo-klasą {{cssxref(":visited")}}.</em></dd> +</dl> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush: html"><html> + <head> + <title>Tytuł dokumentu</title> + </head> + <body> + <p>To jest akapit</p> + </body> +</html> +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Zmieniono listę funkcji niezgodnych z wymaganiami.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Przestarzałe, wcześniej wycofane atrybuty. Zdefiniowano zachowanie niezgodnych i nigdy nie znormalizowanych <code>margintop</code>, <code>marginleft</code>, <code>marginright</code> oraz <code>marginbottom</code>. Dodano atrybuty <code>on*</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '<body>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Wycofane atrybuty <code>alink</code>, <code>background</code>, <code>bgcolor</code>, <code>link</code>, <code>text</code> oraz <code>vlink</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2> + + + +<p>{{Compat("html.elements.body")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{HTMLElement("html")}}</li> + <li>{{HTMLElement("head")}}</li> +</ul> diff --git a/files/pl/web/html/element/br/index.html b/files/pl/web/html/element/br/index.html new file mode 100644 index 0000000000..37fcda5aa6 --- /dev/null +++ b/files/pl/web/html/element/br/index.html @@ -0,0 +1,41 @@ +--- +title: br +slug: Web/HTML/Element/br +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/br +--- +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Element tworzy w tekście przełamanie linii (powrót karetki). Jest to pusty element, zatem nie może mieć żadnej zawartości i zamykającego znacznika (<code><br></code>). Jest on użyteczny przy pisaniu wiersza lub adresu, gdzie ważne jest miejsce przełamania.</p> + +<ul> + <li>Dozwolona zawartość: brak</li> +</ul> + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> + +<pre class="brush:html">Mozilla Foundation<br> +1981 Landings Drive<br> +Building K<br> +Mountain View, CA 94043-0801<br> +USA +</pre> + +<p>Powyższy HTML daje w efekcie:</p> + +<p>Mozilla Foundation<br> + 1981 Landings Drive<br> + Building K<br> + Mountain View, CA 94043-0801<br> + USA</p> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p><a href="/pl/docs/HTML" title="HTML">HTML</a> nie wymaga domknięcia tego znacznika, natomiast już w <a href="/pl/docs/XHTML" title="XHTML">XHTML</a>-u każdy element musi być domknięty, zatem znacznik będzie wyglądał następująco: <strong><code><br></code></strong>.</p> + +<p><strong>Nie</strong> używaj <code><br></code> do zwiększania przerw pomiędzy tekstem, korzystaj w tym celu z właściwości CSS <code>margin</code>.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p><a href="/pl/docs/HTML/Element/p" title="HTML/Element/p">Znacznik <code><p></code></a></p> diff --git a/files/pl/web/html/element/center/index.html b/files/pl/web/html/element/center/index.html new file mode 100644 index 0000000000..4fce8b05ab --- /dev/null +++ b/files/pl/web/html/element/center/index.html @@ -0,0 +1,36 @@ +--- +title: center +slug: Web/HTML/Element/center +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/center +--- +<p> +</p> +<h3 id="Podsumowanie_Deprecated_inline" name="Podsumowanie_Deprecated_inline"> Podsumowanie {{ Deprecated_inline() }} </h3> +<p>Element <code><center>...</center></code> jest <a href="pl/HTML/Elementy_blokowe">elementem blokowym</a>, który może zawierać akapity i inne elementy blokowe oraz liniowe. Wewnętrzna zawartość tego elementu jest wyśrodkowana w poziomie względem zawierającego ją elementu (zazwyczaj <i>body</i>). Ten znacznik jest wycofywany w HTML 4 (oraz XHTML 1) na rzecz własności CSS <code>text-align</code>, która może być zastosowana do <a href="pl/HTML/Element/div">elementu <code>div</code></a> lub do pojedynczego <a href="pl/HTML/Element/p">akapitu</a>. +</p> +<h3 id="Przyk.C5.82ad_1" name="Przyk.C5.82ad_1"> Przykład 1 </h3> +<pre class="eval"> <center>Ten tekst będzie wyśrodkowany. + <p>Jak również ten akapit.</p></center> +</pre> +<h4 id="Rezultat" name="Rezultat"> Rezultat </h4> +<center>Ten tekst będzie wyśrodkowany. +<p>Jak również ten akapit.</p></center> +<h3 id="Przyk.C5.82ad_2_.28alternatywny_CSS.29" name="Przyk.C5.82ad_2_.28alternatywny_CSS.29"> Przykład 2 (alternatywny CSS) </h3> +<pre class="eval"> <div style="text-align:center">Ten tekst będzie wyśrodkowany. + <p>Jak również ten akapit.</p></div> +</pre> +<h4 id="Rezultat_2" name="Rezultat_2"> Rezultat </h4> +<div style="text-align: center;">Ten tekst będzie wyśrodkowany. +<p>Jak również ten akapit.</p></div> +<h3 id="Przyk.C5.82ad_3_.28alternatywny_CSS.29" name="Przyk.C5.82ad_3_.28alternatywny_CSS.29"> Przykład 3 (alternatywny CSS) </h3> +<pre class="eval"> <p style="text-align:center">Ta linia będzie wyśrodkowana.<br /> + I ta linia również.</p> +</pre> +<h4 id="Rezultat_3" name="Rezultat_3"> Rezultat </h4> +<p style="text-align: center;">Ta linia będzie wyśrodkowana.<br> +I ta linia również.</p> +<h3 id="Notatki" name="Notatki"> Notatki </h3> +<p>Zastosowanie <code>text-align:center</code> do elementu <code>div</code> lub elementu <code>p</code> centruje <em>zawartość</em> tych elementów, pozostawiając ich całkowite wymiary niezmienione. </p><p>{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/center" } ) }} diff --git a/files/pl/web/html/element/cite/index.html b/files/pl/web/html/element/cite/index.html new file mode 100644 index 0000000000..da04717a5b --- /dev/null +++ b/files/pl/web/html/element/cite/index.html @@ -0,0 +1,38 @@ +--- +title: cite +slug: Web/HTML/Element/cite +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/cite +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><cite></code> zawiera cytowanie lub odwołanie do innych zasobów. +</p> +<ul><li> Typ elementu: <a href="pl/HTML/Elementy_liniowe">inline</a> +</li><li> Dozwolona zawartość: <a href="pl/HTML/Elementy_liniowe">inline</a> +</li></ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<h4 id="Oznaczanie_autora_cytatu" name="Oznaczanie_autora_cytatu"> Oznaczanie autora cytatu </h4> +<pre> As <cite>Harry S. Truman</cite> said, <q>The buck stops here.</q> +</pre> +<p>Powyższy HTML daje w efekcie: +</p><p><img alt="Image:HTML-cite.png"> +</p> +<h4 id="Oznaczanie_.C5.BAr.C3.B3d.C5.82a" name="Oznaczanie_.C5.BAr.C3.B3d.C5.82a"> Oznaczanie źródła </h4> +<pre> Więcej informacji można znaleźć w <cite>[ISO-0000]</cite> +</pre> +<p>Powyższy HTML daje w efekcie: +</p><p>Więcej informacji można znaleźć w <cite>{{ mediawiki.external('ISO-0000') }}</cite> +</p> +<h3 id="Notatki" name="Notatki"> Notatki </h3> +<p>Aby usunąć kursywę z elementu <code><cite></code>, użyj własności <a href="pl/CSS">CSS</a> <a href="pl/CSS/font-style">font-style</a>. +</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<ul><li> <a href="pl/HTML/Element/q">Znacznik <code><q></code></a> +</li><li> <a href="pl/HTML/Element/blockquote">Znacznik <code><blockquote></code></a> +</li></ul> +<p><br> +{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/cite" } ) }} diff --git a/files/pl/web/html/element/code/index.html b/files/pl/web/html/element/code/index.html new file mode 100644 index 0000000000..de90a45916 --- /dev/null +++ b/files/pl/web/html/element/code/index.html @@ -0,0 +1,23 @@ +--- +title: code +slug: Web/HTML/Element/code +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/code +--- +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Element <code><code>...</code></code> służy do definiowania użytego kodu. Jest on elementem <code>inline</code> z przypisaną domyślnie czcionką <code>Lucida Console</code>.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval"> Zwykły tekst. <code>To jest kod.</code> Zwykły tekst. +</pre> +<h4 id="Rezultat" name="Rezultat">Rezultat</h4> +<p>Zwykły tekst. <code>To jest kod.</code> Zwykły tekst.</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> +<ul> + <li><a href="/pl/HTML/Element/blockquote" title="pl/HTML/Element/blockquote">Znacznik <code><blockquote></code></a></li> + <li>Specyfikacja HTML 4.01: <a class="external" href="http://www.w3.org/TR/html4/struct/text.html#h-9.2.1">Phrase Elements</a></li> +</ul> +<div> + {{ HTML:Element_Navigation() }}</div> +<div> + {{ languages({ "pl": "pl/HTML/Element/code", "fr": "fr/HTML/Element/code", "en": "en/HTML/Element/code", "ja": "ja/HTML/Element/code" }) }}</div> diff --git a/files/pl/web/html/element/comment/index.html b/files/pl/web/html/element/comment/index.html new file mode 100644 index 0000000000..6c7c3b7187 --- /dev/null +++ b/files/pl/web/html/element/comment/index.html @@ -0,0 +1,33 @@ +--- +title: comment +slug: Web/HTML/Element/comment +tags: + - 'HTML:Opis_elementów' +--- +<p> </p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Element HTML <code><!-- ... --></code> (komentarz) jest używany do oznaczania tekstu, który nie jest wyświetlany użytkownikowi. Znaczniki komentarza mogą otaczać tylko kilka słów lub całe fragmenty strony. W szczególności ciągi myślników (---) nie powinny się pojawiać wewnątrz znaczników komentarza.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval"> <p>Spędziliśmy miłe chwile podczas naszych letnich wakacji. <!-- Opowiedzieć tutaj + o Wielkim Kanionie. --> Lecz naprawdę wspaniale jest wrócić.</p> +</pre> + +<h4 id="Rezultat" name="Rezultat">Rezultat</h4> + +<p>Spędziliśmy miłe chwile podczas naszych letnich wakacji. Lecz naprawdę wspaniale jest wrócić.</p> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>Komentarze HTML są widziane przez końcowego użytkownika poprzez funkcję przeglądarki "Pokaż źródło", zatem nie powinny być używane do trzymania istotnych informacji.</p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>Specyfikacja HTML 4.01: <a class="external" href="http://www.w3.org/TR/html401/intro/sgmltut.html#h-3.2.4">Comments</a></p> + +<p>{{ HTML:Element_Navigation() }}</p> + +<p>{{ languages( { "en": "en/HTML/Element/comment" } ) }}</p> diff --git a/files/pl/web/html/element/dd/index.html b/files/pl/web/html/element/dd/index.html new file mode 100644 index 0000000000..198a509861 --- /dev/null +++ b/files/pl/web/html/element/dd/index.html @@ -0,0 +1,33 @@ +--- +title: dd +slug: Web/HTML/Element/dd +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/dd +--- +<p> </p><p><br> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <b>opis definicji</b> (<code><dd></code>) wskazuje wyjaśnienie definicji terminu znajdującego się wewnątrz <a href="pl/HTML/Element/dl">listy definicji (<code><dl></code>)</a>. Ten element może występować tylko jako dziecko <a href="pl/HTML/Element/dl">listy definicji</a> i powinien być poprzedzony przez element <a href="pl/HTML/Element/dt">termin definicji (<code><dt></code>)</a>. +</p> +<ul><li> Dozwolona zawartość: <a href="pl/HTML/Elementy_blokowe">blokowa</a>, <a href="pl/HTML/Elementy_liniowe">liniowa</a> +</li><li> Dozwolony w: <a href="pl/HTML/Element/dl"><code><dl></code></a> +</li></ul> +<h3 id="Atrybuty" name="Atrybuty"> Atrybuty </h3> +<dl><dt>nowrap {{ Non-standard_inline() }} +</dt><dd>Jeśli wartość tego atrybutu jest ustawiona na <code>yes</code>, tekst definicji nie będzie się zawijał. Domyślną wartością jest <code>no</code>. +</dd></dl> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<pre class="eval"> <dl> + <dt>wiki</dt> + <dd>Strona lub podobne źródło, które pozwala na dodawanie i edycję zawartości kolektywnie.</dd> + </dl> +</pre> +<h4 id="Rezultat" name="Rezultat"> Rezultat </h4> +<p></p><dl><dt>wiki</dt></dt><dd>Strona lub podobne źródło, które pozwala na dodawanie i edycję zawartości kolektywnie.</dd></dd></dl> <h3 id="Notatka" name="Notatka"> Notatka </h3> +<p>W <a href="pl/HTML">HTML</a> znacznik zamykający <code><b></dd></b></code> nie jest obowiązkowy. Wymagany jest natomiast w <a href="pl/XHTML">XHTML</a>. +</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p><a href="pl/HTML/Element/dl">Znacznik <code><dl></code></a>, <a href="pl/HTML/Element/dt">Znacznik <code><dt></code></a> +</p><p>{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/dd" } ) }} diff --git a/files/pl/web/html/element/details/index.html b/files/pl/web/html/element/details/index.html new file mode 100644 index 0000000000..9d69a5c0ae --- /dev/null +++ b/files/pl/web/html/element/details/index.html @@ -0,0 +1,195 @@ +--- +title: <details> +slug: Web/HTML/Element/details +tags: + - Element + - Elementy interaktywne HTML + - Referencja + - Web + - details +translation_of: Web/HTML/Element/details +--- +<div>{{HTMLRef}}</div> + +<p><strong><code><font face="Open Sans, arial, x-locale-body, sans-serif">Element </font><details></code></strong> w języku HTML<strong> </strong>jest używany jako widżet (określany często jako spoiler), z którego użytkownik może uzyskać dodatkowych informacji.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Kategoria treści</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, root sekcji, treść interaktywna, treść klikalna.</td> + </tr> + <tr> + <th scope="row">Dopuszczalna zawartość</th> + <td>Jeden element {{HTMLElement("summary")}} będący bezpośrednim pierwszym dzieckiem</td> + </tr> + <tr> + <th scope="row">Znaczniki pomijane</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Dopuszczalni rodzice</th> + <td>Dowolny element <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">Rola ARIA</th> + <td>Brak</td> + </tr> + <tr> + <th scope="row">Interfejs w DOM</th> + <td>{{domxref("HTMLDetailsElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Istnieje możliwość dopisania do elementu <a href="/en-US/docs/Web/HTML/Global_attributes">atrybutów globalnych</a>.</p> + +<dl> + <dt>{{htmlattrdef("open")}}</dt> + <dd>Boolean świadczący o tym, czy element ma być otwarty bądź zamknięty po załadowaniu strony. Domyślnie jest to wartość <code>false</code> mówiąca elementowi, aby był zamknięty.</dd> +</dl> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush: html"><details> + <summary>Szczypta detali</summary> + <p>Informacje szczegółowe na dany temat.</p> +</details> + +<details open> + <summary>Jeszcze wiecej szczegółów</summary> + <p>Tu jest jeszcze wiecej informacji szczegółowych</p> +</details> +</pre> + +<h3 id="Rezultat">Rezultat</h3> + +<p>{{EmbedLiveSample("Przykład")}}</p> + +<div class="note"> +<p><strong>Note:</strong> Jeżeli rezultat nie działa u Ciebie poprawnie, zobacz {{anch("kompatybilność z przeglądarkami")}}, aby sprawdzić, czy Twoja przegladarka wspiera ten element.</p> +</div> + +<h2 id="Przykład_z_ostylowaniem">Przykład z ostylowaniem</h2> + +<p>Zgodnie z najnowszą specyfikacją, Firefox generuje element summary jako <code>display: list-item</code> przez co może być stylowany tak jak elementy listy. Zgodnie ze starszą specyfikacją, Chrome oraz Safari posiadają <code>::-webkit-details-marker</code> pseudo element, który może być stylowany.</p> + +<p>Dla cross-browsingu, Firefox ukrywa znacznik summary poprzez <code>summary { display: block }</code>, a z kolei Chrome i Safari poprzez <code>::-webkit-details-marker {display: none;}</code>. Stylowanie może być wtedy odpowiednio przeprowadzone.<br> + Przykład poniżej używa CSSa umozliwiajacego powrót znacznika do punktu wyjścia</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><details> + <summary>Szczypta detali</summary> + <p>Informacje szczegółowe na dany temat.</p> +</details></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">summary { + display: block; +} + + summary::-webkit-details-marker { + display: none; +} + +summary::before { + content: '\25B6'; + padding-right: 0.5em; +} + +details[open] > summary::before { + content: '\25BC'; +} +</pre> + +<h3 id="Rezultat_2">Rezultat</h3> + +<p>{{ EmbedLiveSample('Przykład_z_ostylowaniem') }}</p> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-details-element', '<details>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'semantics.html#the-details-element', '<details>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Początkowa definicja</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>12</td> + <td><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary?filter=f3f0000bf&search=details">In Development</a></td> + <td>{{CompatGeckoDesktop("49.0")}}</td> + <td>{{CompatNo}}</td> + <td>15</td> + <td>6</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary?filter=f3f0000bf&search=details">In Development</a></td> + <td>{{CompatGeckoMobile("49.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>6.1</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>{{HTMLElement("summary")}}</li> +</ul> diff --git a/files/pl/web/html/element/div/index.html b/files/pl/web/html/element/div/index.html new file mode 100644 index 0000000000..d7edffc9c6 --- /dev/null +++ b/files/pl/web/html/element/div/index.html @@ -0,0 +1,131 @@ +--- +title: '<div>: The Content Division element' +slug: Web/HTML/Element/div +translation_of: Web/HTML/Element/div +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML Content Division element</strong> (<strong><code><div></code></strong>) jest rodzajem pojemnika na </span>treść<span class="seoSummary">. Nie ma on żadnego wpływu na treść ani układ graficzny, dopóki nie zostanie ostylizowany z użyciem CSS. </span> Element <code><div></code> jako "czysty" pojemnik niczego nie reprezentuje. Zamiast tego, jest on używany do grupowania zawartości, dzięki czemu można go łatwo stylizować za pomocą atrybutu {{htmlattrxref("class")}} lub {{htmlattrxref("id")}}, oznaczające część dokumentu jako napisaną w innym języku (używając atrybutu {{htmlattrxref("lang")}}), i tak dalej.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Kategorie zawartości</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Tekst lub treść osadzona</a>, namacalna zawartosć.</td> + </tr> + <tr> + <th scope="row">Dopuszczalna zawartość</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Tekst lub treść osadzona</a>.<br> + Lub (w <a href="/en-US/docs/Glossary/WHATWG">WHATWG</a> HTML): Jeżeli rodzic jest elementem {{HTMLElement("dl")}}: jednego lub więcej elementów {{HTMLElement("dt")}}, po których następuje jeden lub więcej elementów {{HTMLElement("dd")}}, opcjonalnie zmieszanych z elementami {{HTMLElement("script")}} i {{HTMLElement("template")}}.</td> + </tr> + <tr> + <th scope="row">Pominięcie znacznika</th> + <td>Brak, zarówno znacznik początku, jak i końca jest obowiązkowy.</td> + </tr> + <tr> + <th scope="row">Dozwoleni rodzice </th> + <td>Każdy element akceptujący <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">tekst lub treść osadzoną</a>.<br> + Lub (w <a href="/en-US/docs/Glossary/WHATWG">WHATWG</a> HTML): element {{HTMLElement("dl")}}.</td> + </tr> + <tr> + <th scope="row">Wsparcie <a href="/pl/docs/Web/Accessibility/ARIA">ARIA</a></th> + <td>Tak</td> + </tr> + <tr> + <th scope="row">Interfejs DOM</th> + <td>{{domxref("HTMLDivElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Element ten obejmuje <a href="/en-US/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</p> + +<p>Atrybut <code>align</code> jest przestarzały; nie używaj go już dłużej. Zamiast tego należy użyć właściwości lub technik CSS takich jak <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> lub <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">CSS Flexbox</a> do wyrównania i pozycjonowania elementów <code><div></code> na stronie.</p> + +<h2 id="Wskazówki_dot._użytkowania">Wskazówki dot. użytkowania</h2> + +<ul> + <li>Element <code><div></code> należy stosować tylko wtedy, gdy nie może go zastąpić żaden inny element semantyczny (np. {{HTMLElement("article")}} lub {{HTMLElement("nav")}}).</li> +</ul> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Prosty_przykład">Prosty przykład</h3> + +<pre class="brush: html"><div> + <p>Any kind of content here. Such as + &lt;p&gt;, &lt;table&gt;. You name it!</p> +</div> </pre> + +<p>Rezultat wygląda tak:</p> + +<p>{{EmbedLiveSample("A_simple_example", 650, 60)}}</p> + +<h3 id="Przykład_z_użyciem_stylów">Przykład z użyciem stylów</h3> + +<p>Ten przykład tworzy cieniowane pole, stosując styl dla <code><div></code> za pomocą CSS. Zwróć uwagę na użycie atrybutu {{htmlattrxref("class")}} na elemencie <code><div></code> aby zastosować styl o nazwie <code>"shadowbox"</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="shadowbox"> + <p>Here's a very interesting note displayed in a + lovely shadowed box.</p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.shadowbox { + width: 15em; + border: 1px solid #333; + box-shadow: 8px 8px 5px #444; + padding: 8px 12px; + background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); +}</pre> + +<h4 id="Rezultat">Rezultat</h4> + +<p>{{EmbedLiveSample("A_styled_example", 650, 120)}}</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No changes since the latest snapshot</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Obsoleted <strong>align</strong></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + + + +<p>{{Compat("html.elements.div")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>Semantic sectioning elements: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li> + <li>{{HTMLElement("span")}} element for styling of phrasing content</li> +</ul> diff --git a/files/pl/web/html/element/dl/index.html b/files/pl/web/html/element/dl/index.html new file mode 100644 index 0000000000..9a459ee324 --- /dev/null +++ b/files/pl/web/html/element/dl/index.html @@ -0,0 +1,112 @@ +--- +title: dl +slug: Web/HTML/Element/dl +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/dl +--- +<p> </p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Element <strong>lista definicji</strong> (<code><dl></code>) zawiera listę par terminów i ich definicji. Powszechnym zastosowaniem tego elementu jest tworzenie słownika.</p> + +<ul> + <li>Typ elementu: <a href="pl/HTML/Elementy_blokowe">blokowy</a></li> + <li>Dozwolona zawartość: <a href="pl/HTML/Element/dt"><code>dt</code></a>, <a href="pl/HTML/Element/dd"><code>dd</code></a></li> +</ul> + +<h3 id="Atrybuty" name="Atrybuty">Atrybuty</h3> + +<dl> + <dt>compact {{ Non-standard_inline() }}</dt> + <dd>Wymusza, by opis definicji pojawił się w tej samej linii, co termin definicji. Działa tylko w Internet Explorer.</dd> +</dl> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<h4 id="Pojedynczy_termin_i_definicja" name="Pojedynczy_termin_i_definicja">Pojedynczy termin i definicja</h4> + +<pre><dl> + <dt>Firefox</dt> + <dd>Wolna, o otwartym kodzie źródłowym, międzyplatformowa, + graficzna przeglądarka internetowa, + tworzona przez Mozilla Corporation i setki wolontariuszy.</dd> + + <!-- inne terminy i definicje --> +</dl> +</pre> + +<p>Rezultat:</p> + +<dl> + <dt>Firefox</dt> + <dd>Wolna, o otwartym kodzie źródłowym, międzyplatformowa, graficzna przeglądarka internetowa, tworzona przez Mozilla Corporation i setki wolontariuszy.</dd> +</dl> + +<h4 id="Wiele_termin.C3.B3w.2C_jedna_definicja" name="Wiele_termin.C3.B3w.2C_jedna_definicja">Wiele terminów, jedna definicja</h4> + +<pre><dl> + <dt>Firefox</dt> + <dt>Mozilla Firefox</dt> + <dt>Fx</dt> + <dd>Wolna, o otwartym kodzie źródłowym, międzyplatformowa, + graficzna przeglądarka internetowa, + tworzona przez Mozilla Corporation i setki wolontariuszy.</dd> + + <!-- inne terminy i definicje --> +</dl> +</pre> + +<p>Rezultat:</p> + +<dl> + <dt>Firefox</dt> + <dt>Mozilla Firefox</dt> + <dt>Fx</dt> + <dd>Wolna, o otwartym kodzie źródłowym, międzyplatformowa, graficzna przeglądarka internetowa, tworzona przez Mozilla Corporation i setki wolontariuszy.</dd> +</dl> + +<h4 id="Pojedynczy_termin.2C_wiele_definicji" name="Pojedynczy_termin.2C_wiele_definicji">Pojedynczy termin, wiele definicji</h4> + +<pre><dl> + <dt>Firefox</dt> + <dd>Wolna, o otwartym kodzie źródłowym, międzyplatformowa, + graficzna przeglądarka internetowa, + tworzona przez Mozilla Corporation i setki wolontariuszy.</dd> + <dd>Panda czerwona, znana też jako panda mniejsza, Wah, Bear Cat lub Firefox, + jest to przeważnie trawożerny ssak, nieco większy niż kot domowy + (60 cm długości).</dd> + + <!-- inne terminy i definicje --> +</dl> +</pre> + +<p>Rezultat:</p> + +<dl> + <dt>Firefox</dt> + <dd>Wolna, o otwartym kodzie źródłowym, międzyplatformowa, graficzna przeglądarka internetowa, tworzona przez Mozilla Corporation i setki wolontariuszy.</dd> + <dd>Panda czerwona, znana też jako panda mniejsza, Wah, Bear Cat lub Firefox, jest to przeważnie trawożerny ssak, nieco większy niż kot domowy (60 cm długości).</dd> +</dl> + +<h4 id="Wiele_termin.C3.B3w_i_definicji" name="Wiele_termin.C3.B3w_i_definicji">Wiele terminów i definicji</h4> + +<p>Możliwe jest również tworzenie wielokrotnych terminów i definicji, ale już wiesz, jak to zrobić.</p> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>Użycie <code><dl compact></code> jest poprawne w <a href="pl/HTML">HTML</a>, lecz, aby użyć tego atrybutu w <a href="pl/XHTML">XHTML</a>, musisz użyć zapisu <code><dl compact="compact"></code>.</p> + +<p>Nie zaleca się używania tego elementu, razem z <a href="pl/HTML/Element/ul">niesortowanymi listami</a>, żeby stworzyć tylko wcięcie na stronie. Mimo, iż to działa, jest to zła praktyka i pokazuje złe rozumienie znaczenia listy definicji.</p> + +<p>Aby zmienić wcięcie terminu definicji, użyj własności <a href="pl/CSS">CSS</a> <a href="pl/CSS/margin">margin</a>.</p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<ul> + <li><a href="pl/HTML/Element/dt">Znacznik <code><dt></code></a></li> + <li><a href="pl/HTML/Element/dd">Znacznik <code><dd></code></a></li> +</ul> + +<p>{{ languages( { "en": "en/HTML/Element/dl" } ) }}</p> diff --git a/files/pl/web/html/element/dt/index.html b/files/pl/web/html/element/dt/index.html new file mode 100644 index 0000000000..f6ac42b6db --- /dev/null +++ b/files/pl/web/html/element/dt/index.html @@ -0,0 +1,24 @@ +--- +title: dt +slug: Web/HTML/Element/dt +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/dt +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><dt></code> (definition term) określa termin definicji w <a href="pl/HTML/Element/dl">liście definicji</a> (<a href="pl/HTML/Element/dl"><dl></a>). Ten element może występować tylko jako <a href="pl/HTML/Child_element">dziecko</a> listy definicji i powinien następować po nim element <a href="pl/HTML/Element/dd">opis definicji</a> (<a href="pl/HTML/Element/dd"><code><dd></code></a>) element. +</p> +<ul><li> Dozwolona zawartość: <a href="pl/HTML/Elementy_liniowe">liniowa</a> +</li><li> Dozwolony w: <a href="pl/HTML/Element/dl"><dl></a> +</li></ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<p>Zobacz przykłady w <a href="pl/HTML/Element/dl#Przyk.C5.82ady">lista definicji</a>. +</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<ul><li> <a href="pl/HTML/Element/dl">Znacznik lista definicji <code>dl</code></a> +</li><li> <a href="pl/HTML/Element/dd">Znacznik opis definicji <code>dd</code></a> +</li></ul> +<p>{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/dt" } ) }} diff --git a/files/pl/web/html/element/em/index.html b/files/pl/web/html/element/em/index.html new file mode 100644 index 0000000000..fa9c2eac28 --- /dev/null +++ b/files/pl/web/html/element/em/index.html @@ -0,0 +1,31 @@ +--- +title: em +slug: Web/HTML/Element/em +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/em +--- +<p> +</p><p><br> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><em>...</em></code> nadaje tekstowi nacisk, zwykle jest on oznaczony kursywą. +</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<pre class="eval"> <p> + + Ważne jest, że <em>nie możesz</em> zalogować się zanim nie + zweryfikujesz swojego konta poprzez email, który został wysłany na adres, który podałeś. + + </p> +</pre> +<h4 id="Rezultat" name="Rezultat"> Rezultat </h4> <p> Ważne jest, że <em>nie możesz</em> zalogować się zanim nie zweryfikujesz swojego konta poprzez email, który został wysłany na adres, który podałeś. </p> +<h3 id="Kursywa_vs._Emfaza" name="Kursywa_vs._Emfaza"> Kursywa vs. Emfaza </h3> +<p>Jest to często trudne dla niedoświadczonych deweloperów, dlaczego jest tak dużo sposobów stworzenia tej samej rzeczy na stronie. Kursywa i nacisk są prawdopodobnie jednym z najczęstszych. Czy należy używać <code><em></em></code> czy <code><i></i></code>? Czy tworzy to dokładnie ten sam wynik? +</p><p>Nie do końca - emfaza jest stanem logicznym, a kursywa jest stanem fizycznym. Stany logiczne oddzielają prezentację od zawartości, dlatego mogą być wyrażone na różne sposoby, na przykład, zamiast wyświetlać fragment tekstu jako kursywę, możesz wyświetlić go na czerwono, w innym rozmiarze, podkreślone lub nawet wytłuszczone. Bardziej sensownym jest zmieniać właściwości prezentacyjne znacznika <code>em</code> niż robić to z kursywą. Dzieje się tak, ponieważ kursywa jest stanem fizycznym, nie ma tutaj rozdziału pomiędzy prezentacją i zawartością, zmuszanie kursywy do robienia czegokolwiek innego niż pochylania tekstu byłoby mylące i nielogiczne. +</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<ul><li> <a href="pl/HTML/Element/i">Znacznik <code><i></code></a> +</li></ul> +<p>{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/em" } ) }} diff --git a/files/pl/web/html/element/head/index.html b/files/pl/web/html/element/head/index.html new file mode 100644 index 0000000000..aa1c44454f --- /dev/null +++ b/files/pl/web/html/element/head/index.html @@ -0,0 +1,130 @@ +--- +title: '<head>: Element metadanych dokumentu (Nagłówek)' +slug: Web/HTML/Element/head +tags: + - Element + - HTML + - HTML metadane dokumentu + - 'HTML:Metadane zawartość' + - Reference + - Web +translation_of: Web/HTML/Element/head +--- +<div>{{HTMLRef}}</div> + +<p><strong>Element</strong> <strong>HTML <code><head></code></strong> zawiera maszynowo odczytywane informacje ({{glossary("metadata", "metadane")}}) o dokumencie, takie jak <a href="https://wiki.developer.mozilla.org/pl/docs/Web/HTML/Element/title">tytuł</a>, <a href="https://wiki.developer.mozilla.org/pl/docs/Web/HTML/Element/script">skrypty</a> i <a href="https://wiki.developer.mozilla.org/pl/docs/Web/HTML/Element/style">arkusze stylów</a>.</p> + +<div class="blockIndicator note"> +<p><strong>Uwaga:</strong> <code><head></code> posiada przede wszystkim informacje do przetwarzania maszynowego, a nie do odczytywania przez ludzi. Informacje widoczne dla człowieka, takie jak nagłówki najwyższego poziomu i wymienieni autorzy, znajdują się w elemencie {{HTMLElement("header")}}.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th> + <td>Brak.</td> + </tr> + <tr> + <th>Dozwolona zawartość</th> + <td> + <p>Jeśli dokument jest dokumentem {{htmlattrxref("srcdoc", "iframe")}} w {{HTMLElement("iframe")}}, lub jeśli informacja tytułowa jest dostępna z protokołu wyższego poziomu (np. temat w e-mailu HTML), zero lub więcej elementów zawartości metadanych.</p> + + <p><br> + W przeciwnym wypadku, jeden lub więcej elementów zawartości metadanych, gdzie dokładnie jeden jest elementem {{HTMLElement("title")}}.</p> + </td> + </tr> + <tr> + <th>Pominięcie znacznika</th> + <td>Znacznik startowy może zostać pominięty, jeśli pierwszą rzeczą wewnątrz elementu <code><head></code> jest element.<br> + Znacznik końcowy może zostać pominięty, jeśli pierwszą rzeczą następującą po elemencie <code><head></code> nie jest znak spacji lub komentarz.</td> + </tr> + <tr> + <th>Dozwoleni rodzice</th> + <td>Element {{HTMLElement("html")}}, jako jego pierwsze dziecko.</td> + </tr> + <tr> + <th>Dozwolone role ARIA</th> + <td>Brak</td> + </tr> + <tr> + <th>Interfejs DOM</th> + <td>{{domxref("HTMLHeadElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Ten element uwzględnia <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</p> + +<dl> + <dt>{{htmlattrdef("profile")}} {{obsolete_inline}}</dt> + <dd>URI jednego lub więcej profili metadanych, oddzielone białym znakiem.</dd> +</dl> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush: html"><!doctype html> +<html> + <head> + <title>Tytuł dokumentu</title> + </head> +</html> +</pre> + +<h2 id="Uwagi">Uwagi</h2> + +<p>Nowoczesne, zgodne z HTML5 przeglądarki automatycznie tworzą element <code><head></code>, jeśli tagi są pomijane w znaczniku. <a class="external" href="https://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/">Takie zachowanie nie może być zagwarantowane w starych przeglądarkach</a>.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Bez zmian w stosunku do najnowszej wersji</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Przestarzały <code>profile</code></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.1', '<head>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.head")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>Elementy, które mogą być używane wewnątrz <code><head></code>: + + <ul> + <li>{{HTMLElement("title")}}</li> + <li>{{HTMLElement("base")}}</li> + <li>{{HTMLElement("link")}}</li> + <li>{{HTMLElement("style")}}</li> + <li>{{HTMLElement("meta")}}</li> + <li>{{HTMLElement("script")}}</li> + <li>{{HTMLElement("noscript")}}</li> + <li>{{HTMLElement("template")}}</li> + </ul> + </li> +</ul> diff --git a/files/pl/web/html/element/heading_elements/index.html b/files/pl/web/html/element/heading_elements/index.html new file mode 100644 index 0000000000..c3eafe6774 --- /dev/null +++ b/files/pl/web/html/element/heading_elements/index.html @@ -0,0 +1,250 @@ +--- +title: '<h1>–<h6>: The HTML Section Heading elements' +slug: Web/HTML/Element/Heading_Elements +translation_of: Web/HTML/Element/Heading_Elements +--- +<div>{{HTMLRef}}</div> + +<p id="Summary"><span class="seoSummary">Element języka <strong>HTML <code><h1></code>–<code><h6></code> </strong>reprezentuje sześć poziomów zawartości nagłówka. Zawartość nagłówka <code><h1></code> jest prezentowana największą czcionką, a nagłówków <code><h6></code> najmniejszą.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, heading content, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>; don't use a heading element as a child of the {{HTMLElement("hgroup")}} element — it is now deprecated.</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role">heading</a></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}} or {{ARIARole("none")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLHeadingElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>These elements only include the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<div class="note"> +<p>The <code>align</code> attribute is obsolete; don't use it.</p> +</div> + +<h2 id="Usage_notes">Usage notes</h2> + +<ul> + <li>Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.</li> + <li>Avoid using heading tags to resize text. Instead, use the {{glossary("CSS")}} {{cssxref("font-size")}} property. Headings use size to indicate their relative importance, but CSS is preferred for general-purpose resizing.</li> + <li>Avoid skipping heading levels: always start from <code><h1></code>, next use <code><h2></code> and so on.</li> + <li>You should only use one <code><h1></code> per page. Using more than one will not result in an error, but using only one is seen as a best practice. It makes logical sense — <code><h1></code> is the most important heading, and tells you what the purpose of the overall page is. You wouldn't have a book with more than one title, or a movie with more than one name! Having a single top-level title is also arguably better for screenreader users, and {{glossary("SEO")}}.</li> +</ul> + +<h2 id="Examples">Examples</h2> + +<h3 id="All_headings">All headings</h3> + +<p>The following code shows all the heading levels, in use.</p> + +<pre class="brush: html notranslate"><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +<h5>Heading level 5</h5> +<h6>Heading level 6</h6> +</pre> + +<p>Here is the result of this code:</p> + +<p>{{ EmbedLiveSample('All_headings', '280', '300', '') }}</p> + +<h3 id="Example_page">Example page</h3> + +<p>The following code shows a few headings with some content under them.</p> + +<pre class="brush: html notranslate"><h1>Heading elements</h1> +<h2>Summary</h2> +<p>Some text here...</p> + +<h2>Examples</h2> +<h3>Example 1</h3> +<p>Some text here...</p> + +<h3>Example 2</h3> +<p>Some text here...</p> + +<h2>See also</h2> +<p>Some text here...</p> +</pre> + +<p>Here is the result of this code:</p> + +<p>{{ EmbedLiveSample('Example_page', '280', '480', '') }}</p> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<h3 id="Navigation">Navigation</h3> + +<p>A common navigation technique for users of screen reading software is jumping from heading to heading to quickly determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.</p> + +<h4 id="Dont">Don't</h4> + +<pre class="brush: html example-bad notranslate"><h1>Heading level 1</h1> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +</pre> + +<h4 id="Do">Do</h4> + +<pre class="brush: html example-good notranslate"><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +</pre> + +<h4 id="Nesting">Nesting</h4> + +<p>Headings may be nested as subsections to reflect the organization of the content of the page. Most screen readers can also generate an ordered list of all the headings on a page, which can help a person quickly determine the hierarchy of the content:</p> + +<ol> + <li><code>h1</code> Beetles + + <ol> + <li><code>h2</code> Etymology</li> + <li><code>h2</code> Distribution and Diversity</li> + <li><code>h2</code> Evolution + <ol> + <li><code>h3</code> Late Paleozoic</li> + <li><code>h3</code> Jurassic</li> + <li><code>h3</code> Cretaceous</li> + <li><code>h3</code> Cenozoic</li> + </ol> + </li> + <li><code>h2</code> External Morphology + <ol> + <li><code>h3</code> Head + <ol> + <li><code>h4</code> Mouthparts</li> + </ol> + </li> + <li><code>h3</code> Thorax + <ol> + <li><code>h4</code> Prothorax</li> + <li><code>h4</code> Pterothorax</li> + </ol> + </li> + <li><code>h3</code> Legs</li> + <li><code>h3</code> Wings</li> + <li><code>h3</code> Abdomen</li> + </ol> + </li> + </ol> + </li> +</ol> + +<p>When headings are nested, heading levels may be "skipped" when closing a subsection.</p> + +<ul> + <li><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/">Headings • Page Structure • WAI Web Accessibility Tutorials</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html">Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="Labeling_section_content">Labeling section content</h3> + +<p>Another common navigation technique for users of screen reading software is to generate a list of <a href="/en-US/docs/Web/HTML/Element#Content_sectioning">sectioning content</a> and use it to determine the page's layout.</p> + +<p>Sectioning content can be labeled using a combination of the <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> and {{htmlattrxref("id")}} attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.</p> + +<h4 id="Example">Example</h4> + +<pre class="brush: html notranslate"><header> + <nav aria-labelledby="primary-navigation"> + <h2 id="primary-navigation">Primary navigation</h2> + <!-- navigation items --> + </nav> +</header> + +<!-- page content --> + +<footer> + <nav aria-labelledby="footer-navigation"> + <h2 id="footer-navigation">Footer navigation</h2> + <!-- navigation items --> + </nav> +</footer> +</pre> + +<p>In this example, screen reading technology would announce that there are two {{HTMLElement("nav")}} sections, one called "Primary navigation" and one called "Footer navigation". If labels were not provided, the person using screen reading software may have to investigate each <code>nav</code> element's contents to determine their purpose.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Using the aria-labelledby attribute</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby">Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1-h2-h3-h4-h5-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.h1")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("p")}}</li> + <li>{{HTMLElement("div")}}</li> + <li>{{HTMLElement("section")}}</li> +</ul> diff --git a/files/pl/web/html/element/hr/index.html b/files/pl/web/html/element/hr/index.html new file mode 100644 index 0000000000..f7986c208c --- /dev/null +++ b/files/pl/web/html/element/hr/index.html @@ -0,0 +1,57 @@ +--- +title: hr +slug: Web/HTML/Element/hr +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/hr +--- +<p> </p> + +<p> </p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Element <code><strong><hr></strong></code> reprezentuje zmianę tematu pomiędzy akapitami, np. zmiana sceny w powieści lub przejście do innego tematu w sekcji. W poprzednich wersjach HTML znacznik <code><strong><hr></strong></code> reprezentował poziomą linię. Niektóre przeglądarki nadal mogą wyświetlać go jako wypukłą lub wklęsłą linię, jednak ma on ściśle zdefiniowane semantyczne znaczenie i nie służy względom prezentacyjnym.</p> + +<h3 id="Atrybuty" name="Atrybuty">Atrybuty</h3> + +<dl> + <dt>align {{ Deprecated_inline() }}</dt> + <dd>Ustawia położenie na stronie. Jeśli wartość nie jest zdefiniowana, to domyślną wartością jest <code>left</code>.</dd> + <dt>color {{ Non-standard_inline() }}</dt> + <dd>Ustawia kolor linii poprzez podanie jego wartości hexadecymalnej lub nazwy.</dd> + <dt>noshade {{ Deprecated_inline() }}</dt> + <dd>Ustawia brak cieniowania linii.</dd> + <dt>size {{ Deprecated_inline() }}</dt> + <dd>Ustawia wysokość, podaną w pikselach.</dd> + <dt>width {{ Deprecated_inline() }}</dt> + <dd>Ustawia długość linii na stronie, którą podajemy w pikselach lub procentach.</dd> +</dl> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre> <p>To jest pierwszy akapit tekstu. To jest pierwszy akapit tekstu. + To jest pierwszy akapit tekstu. To jest pierwszy akapit tekstu.</p> + + <hr> + + <p>To jest drugi akapit tekstu. To jest drugi akapit tekstu. + To jest drugi akapit tekstu. To jest drugi akapit tekstu.</p> +</pre> + +<p>Powyższy HTML daje w rezultacie:</p> + +<p>To jest pierwszy akapit tekstu. To jest pierwszy akapit tekstu. To jest pierwszy akapit tekstu. To jest pierwszy akapit tekstu.</p> + +<hr> +<p>To jest drugi akapit tekstu. To jest drugi akapit tekstu. To jest drugi akapit tekstu. To jest drugi akapit tekstu.</p> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>Nie jest to wymagane przez <a href="pl/HTML">HTML</a>, jednak w <a href="pl/XHTML">XHTML</a> linia pozioma musi mieć znacznik zamykający, więc znacznik tego elementu będzie wyglądał tak: <code><strong><hr /></strong></code>.</p> + +<p>Atrybut <code>color</code> zwykle działa w przeglądarkach, lecz nie jest on poprawny według specyfikacji HTML i XHTML. Autorzy stron, którzy troszczą się o poprawność ich stron, powinni użyć CSS do zdefiniowania koloru.</p> + +<p>{{ HTML:Element_Navigation() }}</p> + +<p>{{ languages( { "en": "en/HTML/Element/hr" } ) }}</p> diff --git a/files/pl/web/html/element/html/index.html b/files/pl/web/html/element/html/index.html new file mode 100644 index 0000000000..e6e932bdc1 --- /dev/null +++ b/files/pl/web/html/element/html/index.html @@ -0,0 +1,122 @@ +--- +title: '<html>: Dokument HTML / Element Nadrzędny' +slug: Web/HTML/Element/html +tags: + - Element + - HTML + - HTML Element Nadrzędny + - Reference + - Web +translation_of: Web/HTML/Element/html +--- +<p>{{HTMLRef}}</p> + +<p><strong>Element HTML <code><html></code></strong> reprezentuje główny (nadrzędny) element dokumentu HTML, więc jest on również określany jako <em>element nadrzędny</em>. Wszystkie pozostałe elementy muszą być potomkami tego elementu.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th> + <td>Brak.</td> + </tr> + <tr> + <th>Dozwolona zawartość</th> + <td>Jeden element {{HTMLElement("head")}}, po którym następuje jeden element {{HTMLElement("body")}}.</td> + </tr> + <tr> + <th>Pominięcie znacznika</th> + <td>Znacznik startowy może zostać pominięty, jeśli pierwszą rzeczą wewnątrz elementu <code><html></code> nie jest komentarz. Znacznik końcowy może zostać pominięty, jeżeli po elemencie <code><html></code> nie nastąpi od razu komentarz.</td> + </tr> + <tr> + <th>Dozwoleni rodzice</th> + <td>Brak. To jest główny element dokumentu.</td> + </tr> + <tr> + <th>Dozwolone role ARIA</th> + <td>Brak</td> + </tr> + <tr> + <th>Interfejs DOM</th> + <td>{{domxref("HTMLHtmlElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Ten element uwzględnia <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</p> + +<dl> + <dt>{{htmlattrdef("manifest")}} {{obsolete_inline}}</dt> + <dd>Określa URI manifestu zasobów, wskazując zasoby, które powinny być buforowane lokalnie. Zobacz sekcję <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Zasoby_offline_w_Firefoksie">Korzystanie z pamięci podręcznej aplikacji</a> w celu uzyskania szczegółowych informacji.</dd> + <dt>{{htmlattrdef("version")}} {{obsolete_inline}}</dt> + <dd>Określa wersję {{glossary("DTD", "Definicji Typu Dokumentu")}} HTML, która reguluje bieżący dokument. Ten atrybut nie jest potrzebny, ponieważ jest zbędny w stosunku do informacji o wersji w deklaracji typu dokumentu.</dd> + <dt>{{htmlattrdef("xmlns")}}</dt> + <dd>Określa Przestrzeń Nazw XML dokumentu. Domyślną wartością jest <code>"http://www.w3.org/1999/xhtml"</code>. Jest to wymagane w dokumentach przetwarzanych formatem XML oraz opcjonalnie w dokumentach text/html.</dd> +</dl> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="pl"> + <head>...</head> + <body>...</body> +</html> +</pre> + +<h2 id="Kwestie_dostępności">Kwestie dostępności</h2> + +<p>Nadanie atrybutu {{htmlattrxref("lang")}} z <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">poprawnym znacznikiem języka identyfikacyjnego IETF</a> w elemencie <code>html</code> pomoże w określeniu właściwego języka przez technologię odczytu ekranowego. Znacznik identyfikujący język powinien opisywać język używany przez większość treści strony. Bez niego, czytniki ekranu zazwyczaj domyślnie ustawiają język systemu operacyjnego, co może powodować błędne wymowy.</p> + +<p>Dołączenie poprawnej deklaracji <code>lang</code> w elemencie <code>html</code> zapewnia również, że ważne metadane zawarte w sekcji {{HTMLElement("head")}} strony, takie jak {{HTMLElement("title")}}, są również poprawnie ogłaszane.</p> + +<ul> + <li><a href="https://developer.mozilla.org/pl/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.1_—_Readable_Make_text_content_readable_and_understandable">MDN Zrozumienie WCAG, Wytyczna 3.1 wyjaśnienia</a></li> + <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/meaning-doc-lang-id.html">Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> + <p>Dodano obsługę atrybutu <code>manifest</code> (wycofano później).</p> + + <p>Przestarzały atrybut <code>version</code></p> + </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '<html>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Nieaktualny atrybut <code>version</code></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2> + + + +<p>{{Compat("html.elements.html")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>Element najwyższego poziomu MathML: {{MathMLElement("math")}}</li> + <li>Element najwyższego poziomu SVG: {{SVGElement("svg")}}</li> +</ul> diff --git a/files/pl/web/html/element/i/index.html b/files/pl/web/html/element/i/index.html new file mode 100644 index 0000000000..0eb0d9cc3b --- /dev/null +++ b/files/pl/web/html/element/i/index.html @@ -0,0 +1,19 @@ +--- +title: i +slug: Web/HTML/Element/i +tags: + - HTML + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/i +--- +<p> </p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><i>...</i></code> powoduje wyświetlenie tekstu pisanego kursywą. </p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="brush: html"><p>To jest pierwsze wyrażenie. <i>Całe to wyrażenie jest napisane kursywą..</i></p> +</pre> +<h4 id="Rezultat" name="Rezultat">Rezultat</h4> +<p>To jest pierwsze wyrażenie. <em>Całe to wyrażenie jest napisane kursywą.</em></p><h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p><a href="pl/HTML/Element/em">Znacznik <code><b><em></b></code></a> +</p><p>{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/i" } ) }} diff --git a/files/pl/web/html/element/iframe/index.html b/files/pl/web/html/element/iframe/index.html new file mode 100644 index 0000000000..19d9e9404e --- /dev/null +++ b/files/pl/web/html/element/iframe/index.html @@ -0,0 +1,292 @@ +--- +title: '<iframe>: Element ramki iframe' +slug: Web/HTML/Element/iframe +tags: + - Element + - Frames + - HTML + - Inline Frames + - Reference + - Web + - iframe + - osadzanie + - osadzony + - ramki + - treść osadzana HTML + - treść osadzona +translation_of: Web/HTML/Element/iframe +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>Element ramki Iframe HTML (<code><iframe></code>)</strong> reprezentuje zagnieżdżony {{Glossary("browsing context")}} poprzez osadzanie innej strony HTML w aktualnej.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/iframe.html", "tabbed-standard")}}</div> + +<div class="hidden">Źródło niniejszego przykładu interaktywnego znajduje się w repozytorium na GitHubie. Jeśli chcesz mieć swój udział w tworzeniu tego przykładu, sklonuj <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> i wyślij nam żądanie pull.</div> + +<p>Każdy osadzony, przeglądarkowy kontekst posiada własną <a href="/en-US/docs/Web/API/History">historię sesji</a> i interfejs <a href="/en-US/docs/Web/API/Document">document</a>. Kontekst przeglądarkowy, który umożliwia osadzanie innych stron nazywany jest <em>przeglądarkowym kontekstem-rodzicem </em>(<em><dfn>parent</dfn> browsing context</em>). <em>Najwyższy</em> kontekst przeglądarki — nieposiadający rodzica — to przeważnie okno przeglądarki reprezentowane przez objekt {{domxref("Window")}}.</p> + +<div class="blockIndicator warning"> +<p>Ponieważ każdy kontekt przeglądarkowy jest kompletnym środowiskiem dokumentu, każdy <code><iframe></code> na stronie wymaga zwiększenia pamięci i innych zasobów komputera. Teoretycznie możesz używać tyle <code><iframe></code>ów, ile sobie zamarzysz - sprawdź jednak, czy nie występują problemy z wydajnością.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Kategorie kontentu</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Treści płynne (flow content)</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">treści frazujące (phrasing content)</a>, treści osadzone, treści interaktywne, treści namacalne (palpable content).</td> + </tr> + <tr> + <th scope="row">Dozwolone treści</th> + <td>Brak.</td> + </tr> + <tr> + <th scope="row">Pominięcie tagu</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Dozwoleni rodzice</th> + <td>Każdy element, który akceptuje treści osadzone.</td> + </tr> + <tr> + <th scope="row">Dozwolone role ARIA</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}</td> + </tr> + <tr> + <th scope="row">Interfejs DOM</th> + <td>{{domxref("HTMLIFrameElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Ten element zawiera <a href="/en-US/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</p> + +<dl> + <dt>{{htmlattrdef("allow")}}</dt> + <dd>Określa <a href="/en-US/docs/Web/HTTP/Feature_Policy">reguły funkcji</a> dla <code><iframe></code>.</dd> + <dt>{{htmlattrdef("allowfullscreen")}}</dt> + <dd>Ustawiony na <code>true</code>, jeśli <code><iframe></code>może aktywować tryb na pełen ekran poprzez wywołanie metody {{domxref("Element.requestFullscreen", "requestFullscreen()")}}.</dd> + <dd> + <div class="note">Ten atrybut jest uznawany za przestarzały i przedefiniowany na <code>allow="fullscreen"</code>.</div> + </dd> + <dt>{{htmlattrdef("allowpaymentrequest")}}</dt> + <dd>Ustawiony na <code>true</code>, jeśli cross-originowy <code><iframe></code> powinien być dopuszczony do wywoływania <a href="/en-US/docs/Web/API/Payment_Request_API">Żądania Płatności (Payment Request) API</a>.</dd> + <dd> + <div class="note">Ten atrybut jest uznawany za przestarzały i przedefiniowany na <code>allow="payment"</code>.</div> + </dd> + <dt>{{htmlattrdef("csp")}} {{experimental_inline}}</dt> + <dd><a href="/en-US/docs/Web/HTTP/CSP">Content Security Policy</a> wymuszone dla zasobów osadzonych. Po więcej informacji sprawdź {{domxref("HTMLIFrameElement.csp")}}.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>Wysokość ramki w pikselach CSS. Domyślna wartość to <code>150</code>.</dd> + <dt id="name-attribute">{{htmlattrdef("importance")}} {{experimental_inline}}</dt> + <dd>Priorytet pobierania źródła w <code><iframe></code>'owym atrybucie <code>src</code>. Dopuszczone wartości: + <dl> + <dt><code>auto</code> (domyślna)</dt> + <dd>Bez preferencji. Przeglądarka używa własnych heurytystyk do decydowania o pierwszeństwie zasobu.</dd> + <dt><code>high</code></dt> + <dd>Zasób powinien zostać pobrany przed innymi zasobami stron o niższym priorytecie.</dd> + <dt><code>low</code></dt> + <dd>Zasób powinien zostać pobrany po innych zasobach stron o wyższym priorytecie.</dd> + </dl> + </dd> + <dt>{{htmlattrdef("loading")}} {{experimental_inline}}</dt> + <dd>Wskazuje, jak przeglądarka powinna ładować iframe: + <ul> + <li><code>eager</code>: Załaduj iframe niezwłocznie, niezależnie czy jest poza widocznym oknem podglądu (jest to wartość domyślna).</li> + <li><code><font face="consolas, Liberation Mono, courier, monospace">lazy</font></code>: Wstrzymaj ładowanie iframe póki nie osiągnie obliczonej odległości od okna podglądu, zgodnie z definicją przeglądarki.</li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Docelowa nazwa dla osadzonego kontektu przeglądarkowego. Może być używana w atrybucie <code>target</code> elementów {{HTMLElement("a")}}, {{HTMLElement("form")}} czy {{HTMLElement("base")}}; atrybut <code>formtarget</code> elementów {{HTMLElement("input")}} lub {{HTMLElement("button")}}; czy parametr <code>windowName</code> w metodzie {{domxref("Window.open()","window.open()")}}.</dd> + <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt> + <dd>Wskazuje, którego <a href="/en-US/docs/Web/API/Document/referrer">polecającego</a> wysłać podczas przechwytywania zasobów ramki: + <ul> + <li><code>no-referrer</code>: Nagłówek {{HTTPHeader("Referer")}} nie zostanie wysłany.</li> + <li><code>no-referrer-when-downgrade</code> (domyślny): Nagłówek {{HTTPHeader("Referer")}} nie zostanie wysłany do {{Glossary("origin")}}ów bez {{Glossary("TLS")}} ({{Glossary("HTTPS")}}).</li> + <li><code>origin</code>: Wysłany polecający zostanie ograniczony do originu strony odsyłającej: jej <a href="/en-US/docs/Archive/Mozilla/URIScheme">schematu</a>, {{Glossary("host")}}u, i {{Glossary("port")}}u.</li> + <li><code>origin-when-cross-origin</code>: Polecający wysłany do innych originów zostanie ograniczony do schematu, hostu i portu. Nawigacje o tym samym originie będą nadal zawierać ścieżkę.</li> + <li><code>same-origin</code>: Polecający zostanie wysłany przy {{Glossary("Same-origin policy", "same origin")}}, ale żądania cross-origin nie będą zawierać informacji polecającego.</li> + <li><code>strict-origin</code>: Wyśle origin dokumentu jako polecający tylko, gdy poziom bezpieczeństwa protokołu jest ten sam (HTTPS→HTTPS), nie wyśle do miejsca docelowego, jeśli jest mniej bezpieczne (HTTPS→HTTP).</li> + <li><code>strict-origin-when-cross-origin</code>: Wyśle pełen URL w przypadku żądania same-origin, wyśle origin tylko, jeśli poziom bezpieczeństwa protokołu jest ten sam (HTTPS→HTTPS) i nie wyśle nagłówka, jeśli miejsce docelowe jest mniej bezpieczne (HTTPS→HTTP).</li> + <li><code>unsafe-url</code>: Polecający będzie zawierać origin <em>oraz</em> ścieżkę (ale nie <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hash">fragment</a>u, <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/password">hasła</a> czy <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/username">nazwy użytkownika</a>). <strong>Ta wartość nie jest bezpieczna</strong>, ponieważ pozwala na wyciek originów i ścieżek z zasobów chronionych TLS do originów niebezpiecznych.</li> + </ul> + </dd> + <dt>{{htmlattrdef("sandbox")}}</dt> + <dd>Stosuje dodatkowe restrykcje wobec treści ramce. Wartość atrybutu może pozostać pusta (obowiązywać będą wszystkie restrykcje) lub tokeny odseprowane spacją, aby wymusić określone restrykcje: + <ul> + <li><code>allow-downloads-without-user-activation</code> {{experimental_inline}}: Zezwala na pobieranie bez zatwierdzenie przez użytkownika.</li> + <li><code>allow-forms</code>: Zezwala zasobom na zatwierdzanie formularzy. Jeśli niniejsze słowo kluczowe nie zostaje użyte, zatwierdzanie formularzy jest zablokowane.</li> + <li><code>allow-modals</code>: Pozwala zasobom na <a href="https://html.spec.whatwg.org/multipage/origin.html#sandboxed-modals-flag">otwieranie okienek modalnych</a>.</li> + <li><code>allow-orientation-lock</code>: Pozwala zasobom na <a href="/en-US/docs/Web/API/Screen/lockOrientation">zablokowanie orientacji wyświetlacza</a>.</li> + <li><code>allow-pointer-lock</code>: Pozwala zasobom na używanie <a href="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a>.</li> + <li><code>allow-popups</code>: Pozwala na wyskakujące okienka/otwieranie kart (jak np. <code>window.open()</code>, <code>target="_blank"</code> czy <code>showModalDialog()</code>). Jeśli niniejsze słowo kluczowe nie zostaje użyte, popupy nie zostaną otwarte.</li> + <li><code>allow-popups-to-escape-sandbox</code>: Pozwala dokumentowi w piaskownicy (sandbox) na otwieranie nowych okien bez dziedziczenia przez nie sandboxingu. Dzięki temu możliwe jest np. sandboxowanie reklamy bez wymuszania tej samej restrykcji na stronie, do której prowadzi link z tej reklamy.</li> + <li><code>allow-presentation</code>: Pozwala zasobom uruchomić <a href="/en-US/docs/Web/API/PresentationRequest">sesję prezentacji</a>.</li> + <li><code>allow-same-origin</code>: Jeśli ten token nie jest użyty, zasób jest traktowany jako pochodzący ze specjalnego źródła, które nie spełnia wymogów {{Glossary("same-origin policy")}}.</li> + <li><code>allow-scripts</code>: Pozwala zasobom na uruchomienie skryptów (ale nie na tworzenie wyskakujących okienek).</li> + <li><code>allow-storage-access-by-user-activation</code> {{experimental_inline}}: Pozwala zasobom na żądanie dostępu do pamięci masowej rodzica poprzez <a href="/en-US/docs/Web/API/Storage_Access_API">Storage Access API</a>.</li> + <li><code>allow-top-navigation</code>: Pozwala zasobom na nawigację kontekstu najwyższego poziomu przeglądarki (<code>_top</code>).</li> + <li><code>allow-top-navigation-by-user-activation</code>: Pozwala zasobom na nawigację kontekstu najwyższego poziomu przeglądarki, ale jedynie gdy akcja zainicjowana jest przez gest użytkownika.</li> + </ul> + + <div class="note"><strong>Notka o sandboxingu:</strong> + + <ul> + <li>Jeśli dokument osadzony jest tego samego pochodzenia, jak strona osadzająca <strong>mocno odradza się</strong> używania <code>allow-scripts</code> i <code>allow-same-origin</code>, ponieważ pozwala to osadzonemu dokumentowi na usunięcie atrybutu <code>sandbox</code>, sprawiając tym samym, że jest on tak samo niezabezpieczony, jak dokument nie używający w ogóle atrybutu <code>sandbox</code>.</li> + <li>Sandboxing jest bezużyteczny, jeśli atakujący może wyświetlać zawartość poza sandboxowanym <code>iframe</code> — np. jeśli przeglądarka otwiera ramkę na nowej karcie. Tego typu treść musi zatem być dostarczana z <em>oddzielnego źródła</em>, aby ograniczyć zasięg potencjalnych szkód.</li> + <li>Atrybut <code>sandbox</code> nie jest wspierany w Internet Explorer 9 i wcześniejszych wersjach.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>URL strony do osadzenia. Użyj wartości <code>about:blank</code> do osadzenia pustej strony, co jest zgodne z polityką <a href="/en-US/docs/Web/Security/Same-origin_policy#Inherited_origins">same-origin</a>. Wiedz, że programowo usuwanie atrybutu src <code><iframe></code>'u (np. poprzez {{domxref("Element.removeAttribute()")}}) powoduje załadowanie <code>about:blank</code> w ramce w Firefoxie (from version 65), przeglądarkach na Chromium i Safari/iOS.</dd> + <dt>{{htmlattrdef("srcdoc")}}</dt> + <dd>Osadzenie treści HTML poprzed nadpisanie atrybutu <code>src</code>. Jeśli przeglądarka nie wspiera atrybutu <code>srcdoc</code>, odwoła się do URL z atrybutu <code>src</code>.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Szerokość ramki w pikselach CSS. Domyślna wartość to <code>300</code>.</dd> +</dl> + +<h3 id="Nieużywane_atrybuty">Nieużywane atrybuty</h3> + +<p>Poniższe atrybuty są przestarzałe i mogą nie być już dłużej wspierane przez przeglądarki użytkowników. Nie powinno się ich używać przy tworzeniu nowych treści oraz powinno się możliwie usuwać z już istniejących treści.</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>Wyrównanie elementu z uwzględnieniem kontekstu.</dd> + <dt>{{htmlattrdef("frameborder")}} {{obsolete_inline("html5")}}</dt> + <dd>Wartość <code>1</code> (domyślna) rysuje krawędź wokół tej ramki. Wartość <code>0</code> usuwa krawędź wokół tej ramki, ale zamiast tego rozwiązania do kontroli krawędzi <code><iframe></code> powinno się używać własności CSS {{cssxref("border")}}.</dd> + <dt>{{htmlattrdef("longdesc")}} {{obsolete_inline("html5")}}</dt> + <dd>URL długiego opisu zawartości ramki. Z powodu częstego nadużywania nie jest przydatny w przypadku przeglądarek niewizualnych.</dd> + <dt>{{htmlattrdef("marginheight")}} {{obsolete_inline("html5")}}</dt> + <dd>Rozmiar obszaru mierzony w pikselach pomiędzy zawartością ramki oraz jej górną i dolną krawędzią.</dd> + <dt>{{htmlattrdef("marginwidth")}} {{obsolete_inline("html5")}}</dt> + <dd>Rozmiar obszaru mierzony w pikselach pomiędzy zawartością ramki oraz jej lewą i prawą krawędzią.</dd> + <dt>{{htmlattrdef("scrolling")}} {{obsolete_inline("html5")}}</dt> + <dd>Wskazuje, kiedy przeglądarka powinna zapewnić pasek przewijania dla ramki: + <ul> + <li><code>auto</code>: Tylko, jeśli zawartość ramki jest większa niż jej wymiary.</li> + <li><code>yes</code>: Zawsze pokazuj pasek przewijania.</li> + <li><code>no</code>: Nigdy nie pokazuj paska przewijania.</li> + </ul> + </dd> +</dl> + +<h3 id="Atrybuty_niestandardowe_non-standard_inline">Atrybuty niestandardowe {{non-standard_inline}}</h3> + +<dl> + <dt>{{htmlattrdef("mozbrowser")}} {{non-standard_inline}}</dt> + <dd> + <div class="note">Sprawdź podatności {{bug(1318532)}} WebExtensions w Firefox.</div> + Sprawia, że <code><iframe></code> zachowuje się jak okienko najwyższego poziomu przeglądarki. Sprawdź <a href="/en-US/docs/Mozilla/Gecko/Chrome/API/Browser_API">Browser API</a> by dowiedzieć się więcej informacji.<br> + <strong>Dostępne tylko dla <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd> +</dl> + +<h2 id="Skrypty">Skrypty</h2> + +<p>Ramki, jak elementy {{HTMLElement("frame")}} znajdują się w pseudo-tablicy {{domxref("window.frames")}}.</p> + +<p>Poprzez obiekt DOM {{domxref("HTMLIFrameElement")}}, skrypty zyskują dostęp do obiektu {{domxref("window")}} zasobu w ramce poprzez własność {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}}. Własność {{domxref("HTMLIFrameElement.contentDocument", "contentDocument")}} odnosi się do <code>document</code> wewnątrz <code><iframe></code>, podobnie jak <code>contentWindow.document</code>.</p> + +<p>Z wnętrzna ramki skrypt może uzyskać odsyłacz do jej okna-rodzica poprzez {{domxref("window.parent")}}.</p> + +<p>Dostęp skryptu do treści ramki stanowi temat {{Glossary("same-origin policy")}}. Skrypty nie mogą uzyskiwać dostępu do większości własności w innych obiektach <code>window</code>, jeśli skrypt został załadowany z innego źródła, w tym skrypty wewnątrz ramki mające dostęp do rodzica ramki. Komunikacja cross-origin może być osiągnięta poprzez użycie {{domxref("Window.postMessage()")}}.</p> + +<h2 id="Pozycjonowanie_i_skalowanie">Pozycjonowanie i skalowanie</h2> + +<p>Jako <a href="/en-US/docs/Web/CSS/Replaced_element">element zastąpiony</a>, pozycjonowanie, wyrównywanie i skalowanie osadzonego dokumentu wewnątrz okna elementu <code><iframe></code> może być określane poprzez właściwości {{cssxref("object-position")}} oraz {{cssxref("object-fit")}}.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Example1" name="Example1">Prosty <code><iframe></code></h3> + +<p><code><iframe></code> w akcji. Po utworzeniu ramki, kiedy użytkownik klika na przycisk jego tytuł jest wyświetlany w alercie.</p> + +<h4 id="HTML">HTML</h4> + +<div id="htmlOutputWrapper"> +<pre class="brush: html"><iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" title="iframe Example 1" width="400" height="300"></iframe></pre> +</div> + +<h4 id="Rezultat">Rezultat</h4> + +<p>{{ EmbedLiveSample('Example1', 640,400)}}</p> + +<h3 id="Example2" name="Example2">Otwórz link w <code><iframe></code> w innej karcie</h3> + +<p>W niniejszym przykładzie mapa Google jest wyświetlana w ramce;</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><iframe id="Example2" + title="iframe Example 2" + width="400" height="300" + style="border:none" + src="https://maps.google.com/maps?f=q&source=s_q&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&hnear=Buenos+Aires,+Argentina&z=11&ll=-34.603723,-58.381593&output=embed"> +</iframe> +</pre> + +<h4 id="Rezultat_2">Rezultat</h4> + +<p>{{ EmbedLiveSample('Example2', 640, 400)}}</p> + +<h2 id="Obawy_dot._dostępności">Obawy dot. dostępności</h2> + +<p>Osoby poruszające się poprzez technologię wspierającą, jak czytniki ekranowe mogą używać <a href="/en-US/docs/Web/HTML/Global_attributes/title">atrybutu</a> <a href="/en-US/docs/Web/HTML/Global_attributes/title"><code>title</code> </a>na <code>iframe</code>'ie do oznaczania jego treści. Wartość tytułu powinna w zwięzły sposób opisywać osadzoną treść:</p> + +<div id="htmlOutputWrapper"> +<pre class="brush: html"><iframe title="Wikipedia page for Avocados" src="https://en.wikipedia.org/wiki/Avocado"></iframe></pre> +</div> + +<p>Jeśli tytuł nie został określony, wspomniane osoby mogą wchodzić wewnątrz <code>iframe</code>, żeby dowiedzieć się czym dokładniej jest osadzona zawartość. Tego typu zmiana kontekstu może prowadzić do nieporozumień i niepotrzebnie zabierać czas, szczególnie w przypadku stron o wielu <code><iframe></code>'ach i/lub jeśli treść osadzona zawiera interaktywne zasoby, jak video czy audio.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Dodano atrybut <code>referrerpolicy</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'iframe-embed-object.html#the-iframe-element', '<iframe>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-iframe-element', '<iframe>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/frames.html#h-16.5', '<iframe>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Screen Orientation')}}</td> + <td>{{Spec2('Screen Orientation')}}</td> + <td>Dodaje <code>allow-orientation-lock</code> do atrybutu <code>sandbox</code>.</td> + </tr> + <tr> + <td>{{SpecName('Presentation','#sandboxing-and-the-allow-presentation-keyword','allow-presentation')}}</td> + <td>{{Spec2('Presentation')}}</td> + <td>Dodaje <code>allow-presentation</code> do atrybutu <code>sandbox</code></td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + +<div class="hidden">Tabela zgodności na tej stronie jest generowana z danych modelowanych. Jeśli chcesz mieć swój udział w tworzeniu, sprawdź <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i wyślij nam żądanie pull.</div> + +<p>{{Compat("html.elements.iframe", 3)}}</p> diff --git a/files/pl/web/html/element/index.html b/files/pl/web/html/element/index.html new file mode 100644 index 0000000000..074372e7d8 --- /dev/null +++ b/files/pl/web/html/element/index.html @@ -0,0 +1,131 @@ +--- +title: Element +slug: Web/HTML/Element +tags: + - HTML + - 'HTML:Opis_elementów' + - Obsolete + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/HTML/Element +--- +<div>{{HTMLSidebar("Elements")}}</div> + +<p class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 144px;">Na tej stronie znajduje się lista wszystkich elementów HTML,<span class="seoSummary"> które można utworzyć za pomocą znaczników (ang. <code>tags</code>). Są one pogrupowane według funkcjonalności, aby pomóc Ci łatwo znaleźć to, co masz na myśli. Alfabetyczna lista wszystkich elementów znajduje się na pasku bocznym na stronie każdego elementu, jak również na tej tutaj.</span></p> + +<div class="note"> +<p><span lang="pl">Aby uzyskać więcej informacji na temat podstaw elementów i atrybutów HTML, zobacz</span><a href="/en-US/docs/Web/Guide/HTML/Introduction#Elements_%E2%80%94_the_basic_building_blocks"> sekcje dotyczącą elementów w artykule wprowadzenia do HTML</a>.</p> +</div> + +<h2 id="Main_root">Main root</h2> + +<p>{{HTMLRefTable("HTML Root Element")}}</p> + +<h2 id="Dokument_metadata">Dokument metadata</h2> + +<p class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 96px;"><span lang="pl">Metadane zawierają informacje o stronie. Obejmują informacje o stylach, skryptach i danych, które pomagają oprogramowaniu</span> ({{Glossary("search engine", "search engines")}}, {{Glossary("Browser","browsers")}}, etc.) <span lang="pl">w renderowaniu strony. Metadane stylów i skryptów można zdefiniować na stronie lub w linku do innego pliku, który zawiera te informacje.</span></p> + +<p>{{HTMLRefTable("HTML Document Metadata")}}</p> + +<h2 id="Zmiana_roota">Zmiana roota</h2> + +<p>{{HTMLRefTable("Sectioning Root Element")}}</p> + +<h2 id="Sekcja_treści">Sekcja treści</h2> + +<p class="tw-data-text tw-ta tw-text-small" dir="ltr" style="text-align: left; height: 192px;"><span lang="pl">Elementy do dzielenia treści umożliwiają porządkowanie treści dokumentu na elementy logiczne. Użyj elementów przekroju, aby utworzyć ogólny zarys zawartości strony, w tym nawigację nagłówka i stopki oraz elementy nagłówka w celu identyfikacji sekcji treści.</span> {{HTMLRefTable("HTML Sections")}}</p> + +<h2 id="Treść_tekstowa">Treść tekstowa</h2> + +<p>Use HTML text content elements to organize blocks or sections of content placed between the opening {{HTMLElement("body")}} and closing <code></body></code> tags. Important for {{Glossary("accessibility")}} and {{Glossary("SEO")}}, these elements identify the purpose or structure of that content.</p> + +<p>{{HTMLRefTable("HTML Grouping Content")}}</p> + +<h2 id="Inline_text">Inline text</h2> + +<p>Używaj <code>HTML inline text</code>, aby zdefiniować znaczenie, strukturę lub style słowa, linii lub inną dowolną część tekstu.</p> + +<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p> + +<h2 id="Obrazy_i_multimedia">Obrazy i multimedia</h2> + +<p>HTML wspiera różnorodne multimedia jak obrazy, audio i video.</p> + +<p>{{HTMLRefTable("multimedia")}}</p> + +<h2 id="Zagnieżdżona_treść">Zagnieżdżona treść</h2> + +<p>Oprócz zwykłych multimediów, HTML może zawierać jeszcze różną treść, nawet jeżeli niełatwa jest praca z nią.</p> + +<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> + +<h2 id="Tworzenie_skryptów">Tworzenie skryptów</h2> + +<p>W celu tworzenia dynamicznej treści i aplikacji webowych, HTML wspiera użycie języków skryptowych, w szczególności JavaScript. Poniższe elementy umożliwiają tę właściwość.</p> + +<p>{{HTMLRefTable("HTML Scripting")}}</p> + +<h2 id="Zmiany_demarkacyjne">Zmiany demarkacyjne</h2> + +<p>Poniższe elementy pozwalają wskazać te części tekstu, które zostały zmienione.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Opis</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="https://developer.mozilla.org/pl/docs/Web/HTML/Element/del"><del> </a></code></td> + <td>Używany do określenia, która część tekstu została usunięta. </td> + </tr> + <tr> + <td><code><a href="https://developer.mozilla.org/pl/docs/Web/HTML/Element/ins"><ins> </a></code></td> + <td>Używany do określenia, która część tekstu została wstawiona</td> + </tr> + </tbody> +</table> + +<p><code><p><del>Goodbye</del> <ins>Hello</ins> world!</p></code><br> + </p> + +<h2 class="tw-data-text tw-ta tw-text-small" dir="ltr" id="Zawartość_tabel" style="text-align: left; height: 48px;">Zawartość tabel</h2> + +<p class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 48px;"><br> + <span lang="pl">Poniższe elementy służą do tworzenia i obsługi danych tabelarycznych.</span></p> + +<p>{{HTMLRefTable("HTML tabular data")}}</p> + +<h2 id="Formularze">Formularze</h2> + +<p><span lang="pl">HTML udostępnia wiele elementów, które mogą być używane razem do tworzenia formularzy, które użytkownik może wypełnić i przesłać do witryny sieci Web lub aplikacji. Istnieje wiele dalszych informacji na ten temat dostępnych w</span><a href="/en-US/docs/Web/Guide/HTML/Forms"> przewodnikach po formularzach HTML</a>.</p> + +<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p> + +<h2 id="Interaktywne_elementy">Interaktywne elementy</h2> + +<p class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 72px;"><span lang="pl">HTML oferuje wybór elementów, które pomagają tworzyć interaktywne obiekty interfejsu użytkownika.</span></p> + +<p>{{HTMLRefTable("HTML interactive elements")}}</p> + +<h2 id="Web_Components"><span lang="pl">Web Components</span></h2> + +<div class="oSioSc"> +<div id="tw-target"> +<div class="gsrt tw-ta-container tw-nfl" id="tw-target-text-container"> +<p class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 192px;"><span lang="pl">Web Components to technologia związana z HTML, która umożliwia tworzenie i używanie niestandardowych elementów tak, jakby były zwykłymi HTML-ami. Ponadto można tworzyć niestandardowe wersje standardowych elementów HTML.</span></p> +</div> +</div> +</div> + +<p>{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p> + +<h2 id="Przestarzałe_elementy">Przestarzałe elementy</h2> + +<div class="warning"> +<p class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 48px;"><strong>Ostrzeżenie: </strong><span lang="pl">Są to elementy HTML, które są przestarzałe i nie powinny być już dłużej używane.</span><strong> Nie należy ich używać w nowych projektach. W starszych projektach należy je jak najszybciej zastąpić nowszymi elementami.</strong> <span lang="pl">Przestarzałe elementy zostały wymienione tutaj wyłącznie w celach informacyjnych.</span></p> +</div> + +<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> diff --git a/files/pl/web/html/element/input/button/index.html b/files/pl/web/html/element/input/button/index.html new file mode 100644 index 0000000000..8c97a75321 --- /dev/null +++ b/files/pl/web/html/element/input/button/index.html @@ -0,0 +1,341 @@ +--- +title: <input type="button"> +slug: Web/HTML/Element/Input/button +translation_of: Web/HTML/Element/input/button +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} elements of type <strong><code>button</code></strong> are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the {{event("click")}} event).</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}</div> + + + +<div class="note"> +<p><strong>Note</strong>: While <code><input></code> elements of type <code>button</code> are still perfectly valid HTML, the newer {{HTMLElement("button")}} element is now the favored way to create buttons. Given that a {{HTMLElement("button")}}’s label text is inserted between the opening and closing tags, you can include HTML in the label, even images.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>A {{domxref("DOMString")}} used as the button's label</td> + </tr> + <tr> + <td><strong>Events</strong></td> + <td>{{event("click")}}</td> + </tr> + <tr> + <td><strong>Supported common attributes</strong></td> + <td>{{htmlattrxref("type", "input")}}, and {{htmlattrxref("value", "input")}}</td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Methods</strong></td> + <td>None</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<p>An <code><input type="button"></code> elements' {{htmlattrxref("value", "input")}} attribute contains a {{domxref("DOMString")}} that is used as the button's label.</p> + +<div id="summary-example3"> +<pre class="brush: html notranslate"><input type="button" value="Click Me"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> + +<p>If you don't specify a <code>value</code>, you get an empty button:</p> + +<div id="summary-example1"> +<pre class="brush: html notranslate"><input type="button"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> + +<h2 id="Using_buttons">Using buttons</h2> + +<p><code><input type="button"></code> elements have no default behavior (their cousins,<code> <a href="/en-US/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> and <code><a href="/en-US/docs/Web/HTML/Element/input/reset"><input type="reset"></a></code> are used to submit and reset forms, respectively). To make buttons do anything, you have to write JavaScript code to do the work.</p> + +<h3 id="A_simple_button">A simple button</h3> + +<p>We'll begin by creating a simple button with a {{event("click")}} event handler that starts our machine (well, it toggles the <code>value</code> of the button and the text content of the following paragraph):</p> + +<pre class="brush: html notranslate"><form> + <input type="button" value="Start machine"> +</form> +<p>The machine is stopped.</p></pre> + +<pre class="brush: js notranslate">const button = document.querySelector('input'); +const paragraph = document.querySelector('p'); + +button.addEventListener('click', updateButton); + +function updateButton() { + if (button.value === 'Start machine') { + button.value = 'Stop machine'; + paragraph.textContent = 'The machine has started!'; + } else { + button.value = 'Start machine'; + paragraph.textContent = 'The machine is stopped.'; + } +}</pre> + +<p>The script gets a reference to the {{domxref("HTMLInputElement")}} object representing the <code><input></code> in the DOM, saving this refence in the variable <code>button</code>. {{domxref("EventTarget.addEventListener", "addEventListener()")}} is then used to establish a function that will be run when {{event("click")}} events occur on the button.</p> + +<p>{{EmbedLiveSample("A_simple_button", 650, 100)}}</p> + +<h3 id="Adding_keyboard_shortcuts_to_buttons">Adding keyboard shortcuts to buttons</h3> + +<p>Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a button — just as you would with any {{HTMLElement("input")}} for which it makes sense — you use the {{htmlattrxref("accesskey")}} global attribute.</p> + +<p>In this example, <kbd>s</kbd> is specified as the access key (you'll need to press <kbd>s</kbd> plus the particular modifier keys for your browser/OS combination; see <a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">accesskey</a> for a useful list of those).</p> + +<div id="accesskey-example1"> +<pre class="brush: html notranslate"><form> + <input type="button" value="Start machine" accesskey="s"> +</form> +<p>The machine is stopped.</p> +</pre> +</div> + +<div class="hidden"> +<pre class="brush: js notranslate">const button = document.querySelector('input'); +const paragraph = document.querySelector('p'); + +button.addEventListener('click', updateButton); + +function updateButton() { + if (button.value === 'Start machine') { + button.value = 'Stop machine'; + paragraph.textContent = 'The machine has started!'; + } else { + button.value = 'Start machine'; + paragraph.textContent = 'The machine is stopped.'; + } +}</pre> +</div> + +<p>{{EmbedLiveSample("Adding_keyboard_shortcuts_to_buttons", 650, 100)}}</p> + +<div class="note"> +<p><strong>Note</strong>: The problem with the above example of course is that the user will not know what the access key is! In a real site, you'd have to provide this information in a way that doesn't intefere with the site design (for example by providing an easily accessible link that points to information on what the site accesskeys are).</p> +</div> + +<h3 id="Disabling_and_enabling_a_button">Disabling and enabling a button</h3> + +<p>To disable a button, simply specify the {{htmlattrxref("disabled")}} global attribute on it, like so:</p> + +<div id="disable-example1"> +<pre class="brush: html notranslate"><input type="button" value="Disable me" disabled></pre> +</div> + +<p>You can enable and disable buttons at run time by simply setting <code>disabled</code> to <code>true</code> or <code>false</code>. In this example our button starts off enabled, but if you press it, it is disabled using <code>button.disabled = true</code>. A {{domxref("WindowTimers.setTimeout","setTimeout()")}} function is then used to reset the button back to its enabled state after two seconds.</p> + +<div class="hidden"> +<h6 id="Hidden_code_1">Hidden code 1</h6> + +<pre class="brush: html notranslate"><input type="button" value="Enabled"></pre> + +<pre class="brush: js notranslate">const button = document.querySelector('input'); + +button.addEventListener('click', disableButton); + +function disableButton() { + button.disabled = true; + button.value = 'Disabled'; + window.setTimeout(function() { + button.disabled = false; + button.value = 'Enabled'; + }, 2000); +}</pre> +</div> + +<p>{{EmbedLiveSample("Hidden_code_1", 650, 60)}}</p> + +<p>If the <code>disabled</code> attribute isn't specified, the button inherits its <code>disabled</code> state from its parent element. This makes it possible to enable and disable groups of elements all at once by enclosing them in a container such as a {{HTMLElement("fieldset")}} element, and then setting <code>disabled</code> on the container.</p> + +<p>The example below shows this in action. This is very similar to the previous example, except that the <code>disabled</code> attribute is set on the <code><fieldset></code> when the first button is pressed — this causes all three buttons to be disabled until the two second timeout has passed.</p> + +<div class="hidden"> +<h6 id="Hidden_code_2">Hidden code 2</h6> + +<pre class="brush: html notranslate"><fieldset> + <legend>Button group</legend> + <input type="button" value="Button 1"> + <input type="button" value="Button 2"> + <input type="button" value="Button 3"> +</fieldset></pre> + +<pre class="brush: js notranslate">const button = document.querySelector('input'); +const fieldset = document.querySelector('fieldset'); + +button.addEventListener('click', disableButton); + +function disableButton() { + fieldset.disabled = true; + window.setTimeout(function() { + fieldset.disabled = false; + }, 2000); +}</pre> +</div> + +<p>{{EmbedLiveSample("Hidden_code_2", 650, 60)}}</p> + +<div class="note"> +<p><strong>Note</strong>: Firefox will, unlike other browsers, by default, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.</p> +</div> + +<h2 id="Validation">Validation</h2> + +<p>Buttons don't participate in constraint validation; they have no real value to be constrained.</p> + +<h2 id="Examples">Examples</h2> + +<p>The below example shows a very simple drawing app created using a {{htmlelement("canvas")}} element and some simple CSS and JavaScript (we'll hide the CSS for brevity). The top two controls allow you to choose the color and size of the drawing pen. The button, when clicked, invokes a function that clears the canvas.</p> + +<pre class="brush: html notranslate"><div class="toolbar"> + <input type="color" aria-label="select pen color"> + <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span class="output">30</span> + <input type="button" value="Clear canvas"> +</div> + +<canvas class="myCanvas"> + <p>Add suitable fallback here.</p> +</canvas></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">body { + background: #ccc; + margin: 0; + overflow: hidden; +} + +.toolbar { + background: #ccc; + width: 150px; + height: 75px; + padding: 5px; +} + +input[type="color"], input[type="button"] { + width: 90%; + margin: 0 auto; + display: block; +} + +input[type="range"] { + width: 70%; +} + +span { + position: relative; + bottom: 5px; +}</pre> +</div> + +<pre class="brush: js notranslate">var canvas = document.querySelector('.myCanvas'); +var width = canvas.width = window.innerWidth; +var height = canvas.height = window.innerHeight-85; +var ctx = canvas.getContext('2d'); + +ctx.fillStyle = 'rgb(0,0,0)'; +ctx.fillRect(0,0,width,height); + +var colorPicker = document.querySelector('input[type="color"]'); +var sizePicker = document.querySelector('input[type="range"]'); +var output = document.querySelector('.output'); +var clearBtn = document.querySelector('input[type="button"]'); + +// covert degrees to radians +function degToRad(degrees) { + return degrees * Math.PI / 180; +}; + +// update sizepicker output value + +sizePicker.oninput = function() { + output.textContent = sizePicker.value; +} + +// store mouse pointer coordinates, and whether the button is pressed +var curX; +var curY; +var pressed = false; + +// update mouse pointer coordinates +document.onmousemove = function(e) { + curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); + curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); +} + +canvas.onmousedown = function() { + pressed = true; +}; + +canvas.onmouseup = function() { + pressed = false; +} + +clearBtn.onclick = function() { + ctx.fillStyle = 'rgb(0,0,0)'; + ctx.fillRect(0,0,width,height); +} + +function draw() { + if(pressed) { + ctx.fillStyle = colorPicker.value; + ctx.beginPath(); + ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false); + ctx.fill(); + } + + requestAnimationFrame(draw); +} + +draw();</pre> + +<p>{{EmbedLiveSample("Examples", '100%', 600)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.input.input-button")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface which implements it.</li> + <li>The more modern {{HTMLElement("button")}} element.</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li> +</ul> diff --git a/files/pl/web/html/element/input/index.html b/files/pl/web/html/element/input/index.html new file mode 100644 index 0000000000..bbe073d4b4 --- /dev/null +++ b/files/pl/web/html/element/input/index.html @@ -0,0 +1,1376 @@ +--- +title: <input> +slug: Web/HTML/Element/Input +translation_of: Web/HTML/Element/input +--- +<p>The HTML <strong><code><input></code> element</strong> is used to create interactive controls for web-based forms in order to accept data from the user. The semantics of an <code><input></code> varies considerably depending on the value of its <code>type</code> attribute.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, listed, submittable, resettable, form-associated element, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.<br> + If the {{htmlattrxref("type", "input")}} has not the <code>hidden</code> value, labellable element, palpable content.</li> + <li><dfn>Permitted content</dfn> None, it is an {{Glossary("empty element")}}.</li> + <li><dfn>Tag omission</dfn> Must have a start tag and must not have an end tag.</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLInputElement")}}</li> +</ul> + +<h2 id="Attributes">Attributes</h2> + +<p>This element includes the <a href="/en-US/docs/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("type")}}</dt> + <dd>The type of control to display. The default type is text, if this attribute is not specified. Possible values are: + <ul> + <li><code>button</code>: A push button with no default behavior.</li> + <li><code>checkbox</code>: A check box. You must use the <strong>value</strong> attribute to define the value submitted by this item. Use the <strong>checked</strong> attribute to indicate whether this item is selected. You can also use the <strong>indeterminate</strong> attribute to indicate that the checkbox is in an indeterminate state (on most platforms, this draws a horizontal line across the checkbox).</li> + <li><code>color</code>: {{HTMLVersionInline("5")}} A control for specifying a color. A color picker's UI has no required features other than accepting simple colors as text (<a href="http://www.w3.org/TR/html5/forms.html#color-state-(type=color)">more info</a>).</li> + <li><code>date</code>: {{HTMLVersionInline("5")}} A control for entering a date (year, month, and day, with no time).</li> + <li><code>datetime</code>: {{HTMLVersionInline("5")}} A control for entering a date and time (hour, minute, second, and fraction of a second) based on UTC time zone.</li> + <li><code>datetime-local</code>: {{HTMLVersionInline("5")}} A control for entering a date and time, with no time zone.</li> + <li><code>email</code>: {{HTMLVersionInline("5")}} A field for editing an e-mail address. The input value is validated to contain either the empty string or a single valid e-mail address before submitting. The {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS pseudo-classes are applied as appropriate.</li> + <li><code>file</code>: A control that lets the user select a file. Use the <strong>accept</strong> attribute to define the types of files that the control can select.</li> + <li><code>hidden</code>: A control that is not displayed, but whose value is submitted to the server.</li> + <li><code>image</code>: A graphical submit button. You must use the <strong>src</strong> attribute to define the source of the image and the <strong>alt</strong> attribute to define alternative text. You can use the <strong>height</strong> and <strong>width</strong> attributes to define the size of the image in pixels.</li> + <li><code>month</code>: {{HTMLVersionInline("5")}} A control for entering a month and year, with no time zone.</li> + <li><code>number</code>: {{HTMLVersionInline("5")}} A control for entering a floating point number.</li> + <li><code>password</code>: A single-line text field whose value is obscured. Use the <strong>maxlength</strong> attribute to specify the maximum length of the value that can be entered.</li> + <li><code>radio</code>: A radio button. You must use the <strong>value</strong> attribute to define the value submitted by this item. Use the <strong>checked</strong> attribute to indicate whether this item is selected by default. Radio buttons that have the same value for the <strong>name</strong> attribute are in the same "radio button group"; only one radio button in a group can be selected at one time.</li> + <li><code>range</code>: {{HTMLVersionInline("5")}} A control for entering a number whose exact value is not important. This type control uses the following default values if the corresponding attributes are not specified: + <ul> + <li><code>min</code>: 0</li> + <li><code>max</code>: 100</li> + <li><code>value</code>: <code>min</code> + (<code>max</code>-<code>min</code>)/2, or <code>min</code> if <code>max</code> is less than <code>min</code></li> + <li><code>step</code>: 1</li> + </ul> + </li> + <li><code>reset</code>: A button that resets the contents of the form to default values.</li> + <li><code>search</code>: {{HTMLVersionInline("5")}} A single-line text field for entering search strings; line-breaks are automatically removed from the input value.</li> + <li><code>submit</code>: A button that submits the form.</li> + <li><code>tel</code>: {{HTMLVersionInline("5")}} A control for entering a telephone number; line-breaks are automatically removed from the input value, but no other syntax is enforced. You can use attributes such as <strong>pattern</strong> and <strong>maxlength</strong> to restrict values entered in the control. The {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS pseudo-classes are applied as appropriate.</li> + <li><code>text</code>: A single-line text field; line-breaks are automatically removed from the input value.</li> + <li><code>time</code>: {{HTMLVersionInline("5")}} A control for entering a time value with no time zone.</li> + <li><code>url</code>: {{HTMLVersionInline("5")}} A field for editing a URL. The input value is validated to contain either the empty string or a valid absolute URL before submitting. Line-breaks and leading or trailing whitespace are automatically removed from the input value. You can use attributes such as <strong>pattern</strong> and <strong>maxlength</strong> to restrict values entered in the control. The {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS pseudo-classes are applied as appropriate.</li> + <li><code>week</code>: {{HTMLVersionInline("5")}} A control for entering a date consisting of a week-year number and a week number with no time zone.</li> + </ul> + </dd> + <dt>{{htmlattrdef("accept")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>file</code>, this attribute indicates the types of files that the server accepts; otherwise it is ignored. The value must be a comma-separated list of unique content type specifiers: + <ul> + <li>A file extension starting with the STOP character (U+002E). (E.g.: ".jpg,.png,.doc")</li> + <li>A valid MIME type with no extensions</li> + <li><code>audio/*</code> representing sound files {{HTMLVersionInline("5")}}</li> + <li><code>video/*</code> representing video files {{HTMLVersionInline("5")}}</li> + <li><code>image/*</code> representing image files {{HTMLVersionInline("5")}}</li> + </ul> + </dd> + <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt> + <dd>A single-character that the user can press to switch input focus to the control. This attribute is global in HTML5.</dd> + <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt> + <dd>Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, and <code>send</code>; these automatically get mapped to the appropriate string (and are case-insensitive).</dd> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>This is a nonstandard attribute used by iOS Safari Mobile which controls whether and how the text value should be automatically capitalized as it is entered/edited by the user. The non-deprecated values are available in iOS 5 and later. Possible values are: + <ul> + <li><code>none</code>: Completely disables automatic capitalization</li> + <li><code>sentences</code>: Automatically capitalize the first letter of sentences.</li> + <li><code>words</code>: Automatically capitalize the first letter of words.</li> + <li><code>characters</code>: Automatically capitalize all characters.</li> + <li><code>on</code>: {{deprecated_inline()}} Deprecated since iOS 5.</li> + <li><code>off</code>: {{deprecated_inline()}} Deprecated since iOS 5.</li> + </ul> + </dd> + <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute indicates whether the value of the control can be automatically completed by the browser. This attribute is ignored if the value of the <strong>type</strong> attribute is <code>hidden, password,</code> <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type (<code>button</code>, <code>submit</code>, <code>reset</code>, <code>image</code>). Possible values are: + <ul> + <li><code>off</code>: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.</li> + <li><code>on</code>: The browser can automatically complete the value based on values that the user has entered during previous uses.</li> + </ul> + + <p>If the <strong>autocomplete</strong> attribute is not specified on an input element, then the browser uses the <strong>autocomplete</strong> attribute value of the <code><input></code> element's form owner. The form owner is either the <code>form</code> element that this <code><input></code> element is a descendant of or the form element whose <strong>id</strong> is specified by the <strong>form</strong> attribute of the input element. For more information, see the {{htmlattrxref("autocomplete", "form")}} attribute in {{HTMLElement("form")}}.</p> + + <p>The <strong>autocomplete</strong> attribute also controls whether Firefox will, unlike other browsers, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state and (if applicable) dynamic checkedness</a> of an {{HTMLElement("input")}} across page loads. The persistence feature is enabled by default. Setting the value of the <strong>autocomplete</strong> attribute to <code>off</code> disables this feature; this works even when the <strong>autocomplete</strong> attribute would normally not apply to the {{HTMLElement("input")}} by virtue of its <strong>type</strong>. See {{bug(654072)}}.</p> + </dd> + <dt>{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</dt> + <dd>This is a nonstandard attribute supported by Safari that is used to control whether autocorrection should be enabled when the user is entering/editing the text value of the {{HTMLElement("input")}}. Possible attribute values are: + <ul> + <li><code>on</code>: Enable autocorrection</li> + <li><code>off</code>: Disable autocorrection</li> + </ul> + </dd> + <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt> + <dd>This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the <strong>autofocus</strong> attribute, which is a Boolean. It cannot be applied if the <strong>type</strong> attribute is set to <code>hidden</code> (that is, you cannot automatically set focus to a hidden control).</dd> + <dt>{{htmlattrdef("autosave")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute should be defined as a unique value. If the value of the type attribute is <code>search</code>, previous search term values will persist in the dropdown across page load.</dd> + <dt>{{htmlattrdef("checked")}}</dt> + <dd> + <p>When the value of the <strong>type</strong> attribute is <code>radio</code> or <code>checkbox</code>, the presence of this Boolean attribute indicates that the control is selected by default; otherwise it is ignored.</p> + + <p>Firefox will, unlike other browsers, by default, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic checked state</a> of an {{HTMLElement("input")}} across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</p> + </dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>This Boolean attribute indicates that the form control is not available for interaction. In particular, the <code>click</code> event <a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute">will not be dispatched</a> on disabled controls. Also, a disabled control's value isn't submitted with the form.</p> + + <p>Firefox will, unlike other browsers, by default, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of an {{HTMLElement("input")}} across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</p> + </dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt> + <dd>The form element that the input element is associated with (its <em>form owner</em>). The value of the attribute must be an <strong>id</strong> of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this <code><input></code> element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place <code><input></code> elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.</dd> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt> + <dd>The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.</dd> + <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are: + <ul> + <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li> + <li><code>multipart/form-data</code>: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li> + <li><code>text/plain</code></li> + </ul> + + <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: + <ul> + <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li> + <li><code>get</code>: The data from the form are appended to the <strong>form</strong> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li> + </ul> + + <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.</dd> + <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the elements's form owner. The following keywords have special meanings: + <ul> + <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li> + <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li> + <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> + <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("height")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute defines the height of the image displayed for the button.</dd> + <dt>{{htmlattrdef("incremental")}} {{non-standard_inline}}</dt> + <dd>This is a nonstandard attribute supported by Safari that only applies when the <strong>type</strong> is <code>search</code>. If the attribute is present, regardless of what its value is, the {{HTMLElement("input")}} fires <a href="/en-US/docs/Web/Events/search"><code>search</code></a> events as the user edits the text value. The event is only fired after an implementation-defined timeout has elapsed since the most recent keystroke; new keystrokes reset the timeout. In other words, the event firing is debounced. If the attribute is absent, the <a href="/en-US/docs/Web/Events/search"><code>search</code></a> event is only fired when the user explicitly initiates a search (e.g. by pressing the Enter key while within field).</dd> + <dt>{{htmlattrdef("inputmode")}} {{HTMLVersionInline("5")}}</dt> + <dd>A hint to the browser for which keyboard to display. This attribute applies when the value of the <strong>type</strong> attribute is text, password, email, or url. Possible values are: + <ul> + <li><code>verbatim</code>: Alphanumeric, non-prose content such as usernames and passwords.</li> + <li><code>latin</code>: Latin-script input in the user's preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes.</li> + <li><code>latin-name</code>: As <em>latin</em>, but for human names.</li> + <li><code>latin-prose</code>: As <em>latin</em>, but with more aggressive typing aids. For human-to-human communication such as instant messaging for email.</li> + <li><code>full-width-latin</code>: As <em>latin-prose</em>, but for the user's secondary languages.</li> + <li><code>kana</code>: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li> + <li><code>katakana</code>: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li> + <li><code>numeric</code>: Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers. For actual numbers, prefer using <input type="number"></li> + <li><code>tel</code>: Telephone input, including asterisk and pound key. Use <input type="tel"> if possible instead.</li> + <li><code>email</code>: Email input. Use <input type="email"> if possible instead.</li> + <li><code>url</code>: URL input. Use <input type="url"> if possible instead.</li> + </ul> + </dd> + <dt>{{htmlattrdef("list")}} {{HTMLVersionInline("5")}}</dt> + <dd>Identifies a list of pre-defined options to suggest to the user. The value must be the <strong>id</strong> of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the <strong>type</strong> attribute's value is <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</dd> + <dt>{{htmlattrdef("max")}} {{HTMLVersionInline("5")}}</dt> + <dd>The maximum (numeric or date-time) value for this item, which must not be less than its minimum (<strong>min</strong> attribute) value.</dd> + <dt>{{htmlattrdef("maxlength")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the maximum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored. It can exceed the value of the <strong>size</strong> attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior; that is, the user can enter an unlimited number of characters. The constraint is evaluated only when the value of the attribute has been changed.</dd> + <dt>{{htmlattrdef("min")}} {{HTMLVersionInline("5")}}</dt> + <dd>The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (<strong>max</strong> attribute) value.</dd> + <dt>{{htmlattrdef("minlength")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored.</dd> + <dt>{{htmlattrdef("multiple")}} {{HTMLVersionInline("5")}}</dt> + <dd>This Boolean attribute indicates whether the user can enter more than one value. This attribute applies when the <strong>type</strong> attribute is set to <code>email</code> or <code>file</code>; otherwise it is ignored.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>The name of the control, which is submitted with the form data.</dd> + <dt>{{htmlattrdef("pattern")}} {{HTMLVersionInline("5")}}</dt> + <dd>A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the <strong>title</strong> attribute to describe the pattern to help the user. This attribute applies when the value of the <strong>type</strong> attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored. The regular expression language is the same as JavaScript's. The pattern is not surrounded by forward slashes.</dd> + <dt>{{htmlattrdef("placeholder")}} {{HTMLVersionInline("5")}}</dt> + <dd>A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the <strong>type</strong> attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored. + <div class="note"><strong>Note:</strong> Do not use the <code>placeholder</code> attribute instead of a {{HTMLElement("label")}} element. Their purposes are different: the {{HTMLElement("label")}} attribute describes the role of the form element; that is, it indicates what kind of information is expected, the <code>placeholder</code> attribute is a hint about the format the content should take. There are cases in which the <code>placeholder</code> attribute is never displayed to the user, so the form must be understandable without it.</div> + </dd> + <dt>{{htmlattrdef("readonly")}}</dt> + <dd>This Boolean attribute indicates that the user cannot modify the value of the control. + <p>{{HTMLVersionInline("5")}} This attribute is ignored if the value of the <strong>type</strong> attribute is <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</p> + </dd> + <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the <strong>type</strong> attribute is <code>hidden</code>, <code>image</code>, or a button type (<code>submit</code>, <code>reset</code>, or <code>button</code>). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.</dd> + <dt>{{htmlattrdef("results")}} {{non-standard_inline}}</dt> + <dd>This is a nonstandard attribute supported by Safari that only applies when the <strong>type</strong> is <code>search</code>. It is used to control the maximum number of entries that should be displayed in the {{HTMLElement("input")}}'s native dropdown list of past search queries. Its value should be a nonnegative decimal integer.</dd> + <dt>{{htmlattrdef("selectionDirection")}} {{HTMLVersionInline("5")}}</dt> + <dd>The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>The initial size of the control. This value is in pixels unless the value of the <strong>type</strong> attribute is <code>text</code> or <code>password</code>, in which case, it is an integer number of characters. Starting in HTML5, this attribute applies only when the <strong>type</strong> attribute is set to <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>; otherwise it is ignored. In addition, the size must be greater than zero. If you don't specify a size, a default value of 20 is used.</dd> + <dt>{{htmlattrdef("spellcheck")}} {{HTMLVersionInline("5")}}</dt> + <dd>Setting the value of this attribute to <code>true</code> indicates that the element needs to have its spelling and grammar checked. The value <code>default</code> indicates that the element is to act according to a default behavior, possibly based on the parent element's own <code>spellcheck</code> value. The value <code>false</code> indicates that the element should not be checked.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute specifies a URI for the location of an image to display on the graphical submit button; otherwise it is ignored.</dd> + <dt>{{htmlattrdef("step")}} {{HTMLVersionInline("5")}}</dt> + <dd>Works with the <strong>min</strong> and <strong>max</strong> attributes to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this attribute is not set to <code>any</code>, the control accepts only values at multiples of the step value greater than the minimum.</dd> + <dt>{{htmlattrdef("tabindex")}} element-specific in {{HTMLVersionInline(4)}}, global in {{HTMLVersionInline("5")}}</dt> + <dd>The position of the element in the tabbing navigation order for the current document.</dd> + <dt>{{htmlattrdef("usemap")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt> + <dd>The name of a {{HTMLElement("map")}} element to as an image map.</dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>The initial value of the control. This attribute is optional except when the value of the <strong>type</strong> attribute is <code>radio</code> or <code>checkbox</code>.<br> + Note that when reloading the page, Gecko and IE <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">will ignore the value specified in the HTML source</a>, if the value was changed before the reload.</dd> + <dt>{{htmlattrdef("width")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute defines the width of the image displayed for the button.</dd> + <dt>{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}</dt> + <dd>This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.</dd> +</dl> + +<h2 id="Notes">Notes</h2> + +<h3 id="File_inputs">File inputs</h3> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("2.0")}}, calling the <code>click()</code> method on an {{HTMLElement("input")}} element of type "file" opens the file picker and lets the user select files. See <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> for an example and more details.</p> +</div> + +<p>You can't set the value of a file picker from a script; doing something like the following has no effect:</p> + +<pre class="brush: js">var e = getElementById("someFileInputElement"); +e.value = "foo"; +</pre> + +<h3 id="Error_messages">Error messages</h3> + +<p>If you want Firefox to present a custom error message when a field fails to validate, you can use the <code>x-moz-errormessage</code> attribute to do so:</p> + +<pre class="brush: html"><input type="email" x-moz-errormessage="Please specify a valid email address."> +</pre> + +<p>Note, however, that this is not standard and will not have an effect on other browsers.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="A_simple_input_box">A simple input box</h3> + +<pre class="brush: html"><!-- A basic input --> +<input type="text" name="input" value="Type here"> +</pre> + +<p><input><img align="absmiddle" alt="" class="ife_marker" id="input_ife_marker_0" style="border: 0pt none; width: 14px; height: 19px; cursor: pointer; display: inline;" title="Max field length is unknown"></p> + +<h3 id="A_common_use-case_scenario">A common use-case scenario</h3> + +<pre class="brush: html"><!-- A common form that includes input tags --> +<form action="getform.php" method="get"> + <label>First name: <input type="text" name="first_name" /></label><br /> + <label>Last name: <input type="text" name="last_name" /></label><br /> + <label>E-mail: <input type="email" name="user_email" /></label><br /> +<input type="submit" value="Submit" /> +</form> +</pre> + +<h3 id="Using_mozactionhint_on_Firefox_mobile">Using mozactionhint on Firefox mobile</h3> + +<p>You can use the {{htmlattrxref("mozactionhint", "input")}} attribute to specify the text for the label of the enter key on the virtual keyboard when your form is rendered on Firefox mobile. For example, to have a "Next" label, you can do this:</p> + +<pre class="brush: html"><input type="text" mozactionhint="next" name="sometext" /> +</pre> + +<p>The result is:</p> + +<p><a href="/@api/deki/files/4970/=mozactionhint.png"><img alt="mozactionhint.png" class="internal default" src="/@api/deki/files/4970/=mozactionhint.png?size=webview" style="width: 210px; height: 350px; border: 1px solid black;"></a></p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-input-element.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2 or earlier</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=button</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>3</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=checkbox</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}<br> + {{CompatGeckoDesktop("1.9.2")}} for <code>indeterminate</code> value</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=color</td> + <td>21.0</td> + <td> + <p>{{CompatGeckoDesktop("29.0")}} (Not for Windows Touch yet)</p> + </td> + <td>{{CompatNo}}</td> + <td>11.01</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>type=date</td> + <td>5.0</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("825294")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td>type=datetime</td> + <td> + <p>{{CompatNo}}<br> + (recognized but no UI)</p> + </td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("825294")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=datetime-local</td> + <td>5.0</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("825294")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td>type=email</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=file</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>3.02</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=hidden</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=image</td> + <td>1.0</td> + <td>Gecko 2.0 only sends x and y coordinates when clicked, not longer the name/value of the element</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=month</td> + <td>5.0</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("446510")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td>type=number</td> + <td>6.0 (Localization in Chrome 11)</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>10<br> + (recognized but no UI)</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=password</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=radio</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}<br> + {{CompatGeckoDesktop("1.9.2")}} for <code>indeterminate</code> value</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=range</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("23.0")}}</td> + <td>10</td> + <td>10.62 (11.01 added support for a default value)</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=reset</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=search</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.01</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=submit</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=tel</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.01</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=text</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=time</td> + <td>5.0</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("825294")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td>type=url</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=week</td> + <td>5.0</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("825294")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (recognized but no UI)</td> + </tr> + <tr> + <td> + <p>accept=[file extension]</p> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td> + <p>accept=[MIME type]</p> + </td> + <td>8.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>10</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=audio/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<br> + Filters for the following audio file extensions: .aac, .aif, .flac, .iff, .m4a, .m4b, .mid, .midi, .mp3, .mpa, .mpc, .oga, .ogg, .ra, .ram, .snd, .wav, .wma</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=video/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<br> + Filters for the following video file extensions: .avi, .divx, .flv, .m4v, .mkv, .mov, .mp4, .mpeg, .mpg, .ogm, .ogv, .ogx, .rm, .rmvb, .smil, .webm, .wmv, .xvid</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=image/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<br> + Filters for the following image file extensions: .jpe, .jpg, .jpeg, .gif, .png, .bmp, .ico, .svg, .svgz, .tif, .tiff, .ai, .drw, .pct, .psp, .xcf, .psd, .raw</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=[. + ext]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accesskey</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>6</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>mozactionhint</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>autocomplete</td> + <td>17.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>5</td> + <td>9.6</td> + <td>5.2</td> + </tr> + <tr> + <td>autofocus</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>5.0</td> + </tr> + <tr> + <td>checked</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>disabled</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>6</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>form</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formaction</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>formenctype</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formmethod</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>formnovalidate</td> + <td>5.0 (in 6.0 only worked with HTML5 doctype, validation support in 7.0 was disabled and re-enabled in 10.0)</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formtarget</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>height</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>incremental</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>inputmode</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>list</td> + <td>20.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>max</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>maxlength</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>min</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>minlength</td> + <td>40.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>27.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>multiple</td> + <td>1.0 (supported for type=file and type=email as of 5.0)</td> + <td>{{CompatGeckoDesktop("1.9.2")}} for <strong>type</strong>=file<br> + {{CompatVersionUnknown}} for <strong>type</strong>=email</td> + <td>10</td> + <td>1.0 (10.62 support for type=file and as of 11.01 type=email)</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>name</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>pattern</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>placeholder</td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.00</td> + <td>5.0</td> + </tr> + <tr> + <td>readonly</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>6 (missing for <strong>type</strong> of <code>checkbox</code>, <code>radio</code>)</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>required</td> + <td>5.0 (support for select element as of 10)</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>size</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>spellcheck</td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>10</td> + <td>11.0</td> + <td>4.0</td> + </tr> + <tr> + <td>src</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>step</td> + <td>6.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>tabindex</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>6 (elements with tabindex > 0 are not navigated)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>width</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=button</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=checkbox</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=color</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=date</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>type=datetime</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=datetime-local</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=email</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.1 (no validation but gives a specific keyboard)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=file</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} [1]</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=hidden</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=image</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=month</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=number</td> + <td>2.3 (no validation but gives a specific keyboard)</td> + <td>{{CompatGeckoMobile("29.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0 (no validation but gives a specific keyboard)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=password</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=radio</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=range</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.0</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=reset</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=search</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>4.0</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=submit</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=tel</td> + <td>2.3</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>3.1</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=text</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=time</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=url</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>3.1 (no validation but gives a specific keyboard)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=week</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>accept=[MIME type]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=audio/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=image/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=video/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=[. + ext]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accesskey</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>autocomplete</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>autofocus</td> + <td>3.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>checked</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>disabled</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>form</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formaction</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>formenctype</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formmethod</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>formnovalidate</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formtarget</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>height</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>list</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>max</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}} (UI might remain unimplemented)</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>maxlength</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>min</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}} (UI might remain unimplemented)</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>minlength</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>multiple</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>name</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + </tr> + <tr> + <td>pattern</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>placeholder</td> + <td>2.3</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.10</td> + <td>4</td> + </tr> + <tr> + <td>readonly</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>required</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>size</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>spellcheck</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>src</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>step</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}} (UI might remain unimplemented)</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>tabindex</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>width</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1]: <a href="http://blog.uploadcare.com/post/97884147203/you-cannot-upload-files-to-a-server-using-mobile-safari">File uploads were broken</a> in Mobile Safari for iOS 8.0 and 8.0.1. The bug was fixed in iOs 8.0.2.</p> + +<p>Safari Mobile for iOS applies a default style of <code>{{cssxref("opacity")}}: 0.4</code> to disabled textual {{HTMLElement("input")}} elements. Other major browsers don't currently share this particular default style.</p> + +<p>On Safari Mobile for iOS, setting <code>{{cssxref("display")}}: block</code> on an {{HTMLElement("input")}} of <code>type="date"</code>, <code>type="time"</code>, <code>type="datetime-local"</code>, or <code>type="month"</code> causes the text within the {{HTMLElement("input")}} to become vertically misaligned. <a href="https://bugs.webkit.org/show_bug.cgi?id=139848">See WebKit bug #139848.</a></p> + +<p>As of Chrome v39, an <code><input type="date"></code> styled with <code>{{cssxref("display")}}: table-cell; {{cssxref("width")}}: 100%;</code> will have a {{cssxref("min-width")}} imposed by Chrome and it cannot become narrower than this minimum width. <a href="https://code.google.com/p/chromium/issues/detail?id=346051">See Chromium bug #346051.</a></p> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<p>Firefox will, unlike other browsers, by default, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state and (if applicable) dynamic checkedness</a> of an {{HTMLElement("input")}} across page loads. Setting the value of the {{htmlattrxref("autocomplete","input")}} attribute to <code>off</code> disables this feature; this works even when the {{htmlattrxref("autocomplete","input")}} attribute would normally not apply to the {{HTMLElement("input")}} by virtue of its {{htmlattrxref("type","input")}}. See {{bug(654072)}}.</p> + +<p>Starting in Gecko 9.0 {{geckoRelease("9.0")}}, Firefox for Android lets users capture images using their camera and upload them, without having to leave the browser. Web developers can implement this feature by simply specifying setting the <code>accept</code> attribute's value to "image/*" on their <code>file</code> input, like this:</p> + +<p><code><input type="file" accept="image/*"></code></p> + +<p>Firefox for Android sets a default {{ cssxref("background-image") }} gradient on all <code>type="text"</code>, <code>type="file"</code>, <code>type="button"</code>, and <code>type="submit"</code> inputs. This can be disabled using <code>background-image: none</code>.</p> + +<p>Firefox for Android also sets a default {{ cssxref("border") }} on all <code><input type="file"></code> elements.</p> + +<h4 id="Localization">Localization</h4> + +<p>The allowed inputs for certain <input> types depend on the locale. In some locales, 1,000.00 is a valid number, while in other locales the valid way to enter this number is 1.000,00.</p> + +<p>Firefox uses the following heuristics to determine the locale to validate the user's input (at least for type="number"):</p> + +<ul> + <li>Try the language specified by a 'lang'/'xml:lang' attribute on the element or any of its parents;</li> + <li>Try the language specified by any Content-Language HTTP header or</li> + <li>If none specified, use the browser's locale.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> + <li><a class="external" href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text">Cross-browser HTML5 placeholder text</a></li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/pl/web/html/element/kbd/index.html b/files/pl/web/html/element/kbd/index.html new file mode 100644 index 0000000000..c957ca7c32 --- /dev/null +++ b/files/pl/web/html/element/kbd/index.html @@ -0,0 +1,27 @@ +--- +title: kbd +slug: Web/HTML/Element/kbd +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/kbd +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><kbd>...</kbd></code> tworzy element liniowy wyświetlany domyślną dla przeglądarki czcionką o stałej szerokości (Lucida Console). Element jest przeznaczony do wskazywania użytkownikowi tekstu do wpisania, jednak jest powszechnie używany do ostylowania jakiegokolwiek tekstu czcionką o stałej szerokości. +</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<pre class="eval"> Wpisz w oknie dialogowym Uruchom <kbd>cmd</kbd><br /> Następnie kliknij przycisk OK. + +</pre> +<h4 id="Rezultat" name="Rezultat"> Rezultat </h4> <p>Wpisz w oknie dialogowym Uruchom <kbd>cmd</kbd><br>Następnie kliknij przycisk OK.</p> +<h3 id="Notatki" name="Notatki"> Notatki </h3> +<p>Reguła CSS może być definiowana dla selektora <code>kbd</code>, by nadpisać domyślną czcionkę przeglądarki. Ustawienia nadane przez użytkownika mogą wziąć pierwszeństwo przed określonymi w CSS. +</p><p><br> +</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<ul><li> <a href="pl/HTML/Element/code">Element HTML <code>code</code></a> +</li><li> Specyfikacja HTML 4.01: <a class="external" href="http://www.w3.org/TR/html4/struct/text.html#h-9.2.1">Phrase Elements</a> +</li></ul> +<p>{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/kbd" } ) }} diff --git a/files/pl/web/html/element/li/index.html b/files/pl/web/html/element/li/index.html new file mode 100644 index 0000000000..38adde90d0 --- /dev/null +++ b/files/pl/web/html/element/li/index.html @@ -0,0 +1,50 @@ +--- +title: li +slug: Web/HTML/Element/li +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/li +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><li></code> ("list item") jest używany do wskazywania punktu listy, zawartej w <a href="pl/HTML/Element/ol">liście uporządkowanej</a> lub <a href="pl/HTML/Element/ul">liście nieuporządkowanej</a>. Może on występować tylko jako <a href="pl/HTML/Child_element">dziecko</a> poprzednio wymienionych elementów. +</p> +<ul><li> Dozwolona zawartość: <a href="pl/HTML/Elementy_blokowe">blokowa</a>, <a href="pl/HTML/Elementy_liniowe">liniowa</a> +</li><li> Dozwolony w: <a href="pl/HTML/Element/ol"><ol></a>, <a href="pl/HTML/Element/ul"><ul></a> +</li></ul> +<h3 id="Atrybuty" name="Atrybuty"> Atrybuty </h3> +<dl><dt>value {{ Deprecated_inline() }} +</dt><dd>Wskazuje aktualny numer pozycji w liście uporządkowanej, zdefiniowanej przez element <a href="pl/HTML/Element/ol"><ol></a>. Bez względu na wartość <code>type</code>, używaną do ustawienia liczb rzymskich lub liter, jedyną dozwolona wartością tego atrybutu jest liczba. Pozycje listy, które następują dalej, kontynuują numerację od ustawionej wartości. Atrybut <code>value</code> nie ma znaczenia w listach nieuporządkowanych. +</dd></dl> +<dl><dt>type {{ Deprecated_inline() }} +</dt><dd>Wskazuje typ liczenia: <code>a</code> wskazuje małe litery, <code>A</code> wskazuje wielkie litery, <code>i</code> wskazuje małe cyfry rzymskie, <code>I</code> wskazuje wielkie cyfry rzymskie. Atrybut <code>type</code> ustawiony w elemencie <a href="pl/HTML/Element/ol"><ol></a> jest używany dla wewnętrznej listy, chyba że atrybut <code>type</code> jest użyty wewnątrz zamkniętego elementu <code><li></code>. Ten atrybut jest wycofywany, użyj zamiast niego własności <a href="pl/CSS">CSS</a> <a href="pl/CSS/list-style-type">list-style-type</a>. +</dd></dl> +<p><br> +</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<pre class="brush: html"><ol> + <li>pierwszy element</li> + <li>drugi element</li> + <li>trzeci element</li> +</ol> +</pre> +<p>Powyższy kod HTML zostanie wyświetlony:</p> +<ol> <li>pierwszy element</li> <li>drugi element</li> <li>trzeci element</li> +</ol> +<pre class="brush: html"><ul> + <li>pierwszy element</li> + <li>drugi element</li> + <li>trzeci element</li> +</ul></pre> +<ul> <li>pierwszy element</li> <li>drugi element</li> <li>trzeci element</li> +</ul> +<p>Zobacz przykłady w <a href="/pl/HTML/Element/ol#Przyk.C5.82ady" title="pl/HTML/Element/ol#Przyk.C5.82ady"><ol></a> i <a href="/pl/HTML/Element/ul#Przyk.C5.82ady" title="pl/HTML/Element/ul#Przyk.C5.82ady"><ul></a>.</p><h3 id="Notatki" name="Notatki"> Notatki </h3> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<ul><li> <a href="pl/HTML/Element/ol">Znacznik <code>ol</code> (lista uporządkowana)</a> +</li><li> <a href="pl/HTML/Element/ul">Znacznik <code>ul</code> (lista nieuporządkowana)</a> +</li><li> <a href="pl/CSS/list-style">Własność CSS <code>list-style</code></a> +</li><li> <a href="pl/Liczniki_CSS">Liczniki CSS</a> +</li></ul> +<p>{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/li" } ) }} diff --git a/files/pl/web/html/element/link/index.html b/files/pl/web/html/element/link/index.html new file mode 100644 index 0000000000..d853ed10c3 --- /dev/null +++ b/files/pl/web/html/element/link/index.html @@ -0,0 +1,412 @@ +--- +title: '<link>: Element Łącza Zasobów Zewnętrznych' +slug: Web/HTML/Element/link +tags: + - Element + - HTML + - HTML metadane dokumentu + - Link + - Reference + - Web + - Web Performance + - metadane +translation_of: Web/HTML/Element/link +--- +<div>{{HTMLRef}}</div> + +<p><strong>Element Łącza Zasobów Zewnętrznych (<code><link></code>)</strong> określa relacje między aktualnym dokumentem a zewnętrznym zasobem. Ten element jest najczęściej używany do linkowania do {{Glossary("CSS", "arkuszy stylów")}}, ale jest również używany między innymi do tworzenia ikon strony (zarówno ikony typu "favicon", jak i ikon dla ekranu głównego i aplikacji na urządzeniach mobilnych).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/link.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<p>Aby połączyć zewnętrzny arkusz stylów, umieść element <code><link></code> wewnątrz swojego {{HTMLElement("head")}} w ten sposób:</p> + +<pre class="brush: html no-line-numbers"><link href="main.css" rel="stylesheet"></pre> + +<p>Ten prosty przykład podaje ścieżkę do arkusza stylów wewnątrz atrybutu <code>href</code> oraz atrybut <code>rel</code> z wartością <code>stylesheet</code>. <code>rel</code> oznacza "relację" i jest prawdopodobnie jedną z kluczowych cech elementu <code><link></code> - wartość oznacza sposób, w jaki element, z którym jest powiązany, jest powiązany z dokumentem źródłowym. Jak zobaczysz z naszego odwołania do <a href="https://wiki.developer.mozilla.org/pl/docs/Web/HTML/Link_types">typów odnośników</a>, istnieje wiele różnych rodzajów relacji.</p> + +<p>Jest wiele innych popularnych typów, na które można się natknąć. Na przykład link do favicon na stronie:</p> + +<pre class="brush: html no-line-numbers"><link rel="icon" href="favicon.ico"></pre> + +<p>Istnieje szereg innych wartości <code>rel</code> ikon, używanych głównie do wskazywania specjalnych typów ikon do wykorzystania na różnych platformach mobilnych, np.:</p> + +<pre class="brush: html no-line-numbers"><link rel="apple-touch-icon-precomposed" sizes="114x114" + href="apple-icon-114.png" type="image/png"></pre> + +<p>Atrybut <code>sizes</code> oznacza rozmiar ikony, a <code>type</code> zawiera typ MIME łączonego zasobu. Dostarczają one użytecznych wskazówek, które pozwalają przeglądarce na wybór najbardziej odpowiedniej dostępnej ikony.</p> + +<p>Możesz również podać typ nośnika lub zapytanie wewnątrz atrybutu <code>media</code>; zasób ten zostanie załadowany tylko wtedy, gdy stan nośnika jest prawdziwy. Na przykład:</p> + +<pre class="brush: html no-line-numbers"><link href="print.css" rel="stylesheet" media="print"> +<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"></pre> + +<p>Do elementu <code><link></code> dodano również kilka interesujących nowych funkcji wydajności i zabezpieczeń. Weźmy ten przykład:</p> + +<pre class="brush: html no-line-numbers"><link rel="preload" href="myFont.woff2" as="font" + type="font/woff2" crossorigin="anonymous"></pre> + +<p>Wartość <code>rel</code> dla <code>preload</code> wskazuje, że przeglądarka powinna wstępnie załadować ten zasób (więcej szczegółów w sekcji <a href="https://wiki.developer.mozilla.org/pl/docs/Web/HTML/Preloading_content">Wstępne załadowanie zawartości z rel="preload"</a>), z atrybutem <code>as</code> wskazującym konkretną klasę pobieranej zawartości. Atrybut crossorigin wskazuje, czy zasób powinien być pobierany z żądaniem {{Glossary("CORS")}}.</p> + +<p>Pozostałe uwagi dotyczące zastosowania:</p> + +<ul> + <li>Element <code><link></code> może występować w elemencie {{HTMLElement("head")}} lub {{HTMLElement("body")}}, w zależności od tego, czy ma on <a href="https://html.spec.whatwg.org/multipage/links.html#body-ok">typ połączenia</a>, który jest <strong>body-ok</strong>. Na przykład, typ linku <code>stylesheet</code> jest body-ok, a zatem <code><link rel="stylesheet"></code> jest dozwolony w body. Jednakże nie jest to dobra praktyka do naśladowania; bardziej sensowne jest oddzielenie elementów <code><link></code> od zawartości, umieszczając je w <code><head></code>.</li> + <li>Kiedy używasz <code><link></code> do utworzenia favicon dla witryny, a Twoja strona używa Content Security Policy (CSP) w celu zwiększenia jej bezpieczeństwa, polityka ta ma zastosowanie do favicon. Jeśli napotkasz problemy z załadowaniem favicon, sprawdź, czy dyrektywa <a href="https://wiki.developer.mozilla.org/pl/docs/Web/HTTP/Headers/Content-Security-Policy/img-src">dyrektywa <code>img-src</code></a> nagłówka {{HTTPHeader("Content-Security-Policy")}} nie uniemożliwia dostępu do niego.</li> + <li>Specyfikacje HTML i XHTML definiują obsługę zdarzeń dla elementu <code><link></code>, ale nie jest jasne, jak miałyby być one wykorzystywane.</li> + <li>W XHTML 1.0 puste elementy, takie jak <code><link></code> wymagają ukośnika: <code><link /></code>.</li> + <li>WebTV wspiera użycie wartości <code>next</code> dla atrybutu <code>rel</code>, w celu wstępnego załadowania następnej strony w serii dokumentów.</li> +</ul> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Ten element uwzględnia <a href="/pl/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</p> + +<dl> + <dt>{{HTMLAttrDef("as")}}</dt> + <dd>Ten atrybut jest używany tylko wtedy, gdy na elemencie <code><link></code> ustawiono <code>rel="preload"</code> lub <code>rel="prefetch"</code>. Określa on typ zawartości załadowanej przez <code><link></code>, który jest niezbędny do dopasowania żądania, zastosowania poprawnej <a href="/pl/docs/Web/HTTP/CSP">polityki bezpieczeństwa zawartości</a>, oraz ustawienie poprawnego żądania nagłówka {{HTTPHeader("Accept")}}. Co więcej, <code>rel="preload"</code> wykorzystuje to jako sygnał do nadania priorytetu żądaniu. Poniższa tabela zawiera ważne wartości dla tego atrybutu oraz elementy lub zasoby, do których się odnoszą.</dd> + <dd> + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Wartość</th> + <th scope="col">Dotyczy</th> + </tr> + </thead> + <tbody> + <tr> + <td>audio</td> + <td>elementów <code><audio></code></td> + </tr> + <tr> + <td>document</td> + <td>elementów <code><iframe></code> oraz <code><frame></code></td> + </tr> + <tr> + <td>embed</td> + <td>elementów <code><embed></code></td> + </tr> + <tr> + <td>fetch</td> + <td> + <p>fetch, XHR</p> + + <div class="blockIndicator note"> + <p>Ta wartość wymaga również, aby <code><link></code> zawierał atrybut crossorigin.</p> + </div> + </td> + </tr> + <tr> + <td>font</td> + <td>CSS @font-face</td> + </tr> + <tr> + <td>image</td> + <td>elementy <code><img></code> oraz <code><picture></code> z atrybutami srcset lub imageset, elementy SVG <code><image></code>, reguły CSS <code>*-image</code></td> + </tr> + <tr> + <td>object</td> + <td>elementy <code><object></code></td> + </tr> + <tr> + <td>script</td> + <td>elementy <code><script></code>, Worker <code>importScripts</code></td> + </tr> + <tr> + <td>style</td> + <td>elementy <code><link rel=stylesheet></code>, CSS <code>@import</code></td> + </tr> + <tr> + <td>track</td> + <td>elementy <code><track></code></td> + </tr> + <tr> + <td>video</td> + <td>elementy <code><video></code></td> + </tr> + <tr> + <td>worker</td> + <td>Worker, SharedWorker</td> + </tr> + </tbody> + </table> + </dd> + <dt>{{HTMLAttrDef("crossorigin")}}</dt> + <dd>Ten wymieniony atrybut wskazuje, czy przy pobieraniu zasobów należy zastosować {{Glossary("CORS")}}. <a href="/pl/docs/Web/HTML/CORS_Enabled_Image">Obrazy wyposażone w CORS</a> mogą być ponownie użyte w elemencie {{HTMLElement("canvas")}} bez ich <em>skażenia</em>. Dozwolone są następujące wartości: + <dl> + <dt><code>anonymous</code></dt> + <dd>Wykonywane jest żądanie krzyżowe (tj. z nagłówkiem HTTP {{HTTPHeader("Origin")}}) ale nie jest wysyłane żadne poświadczenie (tj. nie jest wysyłany żaden plik cookie, certyfikat X.509 ani uwierzytelnienie HTTP Basic). Jeśli serwer nie przekaże danych uwierzytelniających do strony pochodzenia (nie ustawiając nagłówka HTTP {{HTTPHeader("Access-Control-Allow-Origin")}}) zasób zostanie skażony, a jego wykorzystanie ograniczone.</dd> + <dt><code>use-credentials</code></dt> + <dd>Wykonywane jest żądanie krzyżowe (tj. z nagłówkiem HTTP <code>Origin</code>) wraz z przesłanym poświadczeniem (tj. cookie, certyfikat, i/lub uwierzytelnienie HTTP Basic). Jeśli serwer nie przekaże danych uwierzytelniających do strony pochodzenia (poprzez nagłówek HTTP {{HTTPHeader("Access-Control-Allow-Credentials")}}), zasób zostanie skażony, a jego wykorzystanie ograniczone.</dd> + </dl> + Jeśli atrybut nie jest obecny, zasób jest pobierany bez żądania {{Glossary("CORS")}} (tj. bez wysyłania nagłówka HTTP <code>Origin</code>), co uniemożliwia jego bezpieczne użytkowanie. Jeśli jest nieprawidłowy, jest traktowany tak, jakby użyte zostało słowo kluczowe <strong>anonymous</strong>. Dodatkowe informacje znajdują się w części <a href="/pl/docs/Web/HTML/Attributes/crossorigin">atrybuty ustawień CORS</a>.</dd> + <dt>{{HTMLAttrDef("disabled")}}</dt> + <dd> + <p>Tylko w przypadku <code>rel="stylesheet"</code>, atrybut logiczny <code>disabled</code> wskazuje, czy opisany arkusz stylów powinien zostać załadowany i zastosowany w dokumencie. Jeśli atrybut <code>disabled</code> jest określony w HTML podczas ładowania, arkusz stylów nie zostanie wczytany podczas ładowania strony. Zamiast tego arkusz stylów zostanie załadowany na żądanie, jeśli i kiedy atrybut <code>disabled</code> zostanie zmieniony na <code>false</code> lub usunięty.</p> + + <p>Jednak po załadowaniu arkusza stylów zmiany wartości właściwości <code>disabled</code> nie mają już żadnego związku z wartością właściwości {{domxref("StyleSheet.disabled")}}. Zamiast tego zmiana wartości tej właściwości po prostu włącza i wyłącza formularz arkusza stylów zastosowany w dokumencie.</p> + + <p>Różni się ona od wartości <code>disabled</code> właściwości <code>StyleSheet</code>; zmiana jej na <code>true</code> powoduje usunięcie arkusza stylów z listy {{domxref("document.styleSheets")}} i nie powoduje automatycznego przeładowania aruksza stylów po ponownym przełączeniu go na <code>false</code>.</p> + </dd> + <dt>{{HTMLAttrDef("href")}}</dt> + <dd>Ten atrybut określa adres {{glossary("URL")}} powiązanego zasobu. Adres URL może być bezwzględny lub względny.</dd> + <dt>{{HTMLAttrDef("hreflang")}}</dt> + <dd>Ten atrybut określa język powiązanego zasobu. Ma on charakter wyłącznie doradczy. Dozwolone wartości są określone przez <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>. Tego atrybutu używa się tylko wtedy, gdy występuje atrybut {{HTMLAttrxRef("href", "a")}}.</dd> + <dt id="name-attribute">{{HTMLAttrDef("importance")}} {{Experimental_Inline}}</dt> + <dd>Wskazuje na względne znaczenie zasobu. Piorytetowe podpowiedzi są delegowane za pomocą wartości:</dd> + <dd> + <p><strong><code>auto</code></strong>: Oznacza <strong>brak preferencji</strong>. Przeglądarka może korzystać z własnej heurystyki, aby zdecydować o priorytecie zasobu.</p> + + <p><strong><code>high</code></strong>: Wskazuje przeglądarce, że zasób ma <strong>wysoki</strong> priorytet.</p> + + <p><strong><code>low</code></strong>: Wskazuje przeglądarce, że zasób ma <strong>niski</strong> priorytet.</p> + + <div class="blockIndicator note"> + <p><strong>Uwaga: </strong>Atrybut <code>importance</code> może być użyty dla elementu <code><link></code> tylko wtedy, gdy występuje <code>rel="preload"</code> lub <code>rel="prefetch"</code>.</p> + </div> + </dd> + <dt>{{HTMLAttrDef("integrity")}} {{Experimental_Inline}}</dt> + <dd>Zawiera liniowe metadane - kryptograficzny hash zasobów (plików), które każesz pobrać przeglądarce, zakodowany w base64. Przeglądarka może wykorzystać to do sprawdzenia, czy pobrany zasób został dostarczony bez nieoczekiwanych manipulacji. Zobacz rozdział <a href="/pl/docs/Web/Bezpiecze%C5%84stwo/Subresource_Integrity">Integralność Podzasobów</a>.</dd> + <dt>{{HTMLAttrDef("media")}}</dt> + <dd>Ten atrybut określa media, do których odnoszą się powiązane zasoby. Jego wartość musi mieć typ media / <a href="/pl/docs/Web/CSS/Media_Queries">żądania media</a>. Atrybut ten jest przydatny głównie przy łączeniu z zewnętrznymi arkuszami stylów — pozwala on agentowi użytkownika wybrać ten najlepiej dostosowany do urządzenia, na którym działa. + <div class="blockIndicator note"> + <p><strong>Uwagi:</strong></p> + + <ul> + <li>W HTML 4, może to być tylko prosta lista oddzielonych od siebie spacjami dosłownych opisów mediów, tj. <a href="/pl/docs/Web/CSS/@media">typów i grup mediów</a>, gdzie zdefiniowane i dozwolone są wartości tego atrybutu, takie jak <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>. HTML5 rozszerzył to na wszelkiego rodzaju <a href="/pl/docs/Web/CSS/Media_Queries">zapytania media</a>, które są uzupełnieniem dozwolonych wartości HTML 4.</li> + <li>Przeglądarki nie obsługujące <a href="/pl/docs/Web/CSS/Media_Queries">Żądań Media w CSS3</a> niekoniecznie rozpoznają odpowiedni link; nie należy zapominać o ustawieniu linków awaryjnych, ograniczonego zestawu zapytań media zdefiniowanych w HTML 4.</li> + </ul> + </div> + </dd> + <dt>{{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}</dt> + <dd>A string indicating which referrer to use when fetching the resource: + <ul> + <li><code>no-referrer</code> means that the {{HTTPHeader("Referer")}} header will not be sent.</li> + <li><code>no-referrer-when-downgrade</code> means that no {{HTTPHeader("Referer")}} header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.</li> + <li><code>origin</code> means that the referrer will be the origin of the page, which is roughly the scheme, the host, and the port.</li> + <li><code>origin-when-cross-origin</code> means that navigating to other origins will be limited to the scheme, the host, and the port, while navigating on the same origin will include the referrer's path.</li> + <li><code>unsafe-url</code> means that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.</li> + </ul> + </dd> + <dt>{{HTMLAttrDef("rel")}}</dt> + <dd>This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of <a href="/en-US/docs/Web/HTML/Link_types">link type values</a>.</dd> + <dt>{{HTMLAttrDef("sizes")}}</dt> + <dd>This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the {{HTMLAttrxRef("rel", "link")}} contains a value of <code>icon</code> or a non-standard type such as Apple's <code>apple-touch-icon</code>. It may have the following values: + <ul> + <li><code>any</code>, meaning that the icon can be scaled to any size as it is in a vector format, like <code>image/svg+xml</code>.</li> + <li>a white-space separated list of sizes, each in the format <code><em><width in pixels></em>x<em><height in pixels></em></code> or <code><em><width in pixels></em>X<em><height in pixels></em></code>. Each of these sizes must be contained in the resource.</li> + </ul> + + <div class="blockIndicator note"> + <p><strong>Note: </strong>Most icon formats are only able to store one single icon; therefore most of the time the {{HTMLAttrxRef("sizes")}} attribute contains only one entry. MS's ICO format does, as well as Apple's ICNS. ICO is more ubiquitous, so you should use this format if cross-browser support is a concern (especially for old IE versions).</p> + </div> + </dd> + <dt>{{HTMLAttrDef("title")}}</dt> + <dd>The <code>title</code> attribute has special semantics on the <code><link></code> element. When used on a <code><link rel="stylesheet"></code> it defines a <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">preferred or an alternate stylesheet</a>. Incorrectly using it may <a href="/en-US/docs/Correctly_Using_Titles_With_External_Stylesheets">cause the stylesheet to be ignored</a>.</dd> + <dt>{{HTMLAttrDef("type")}}</dt> + <dd>This attribute is used to define the type of the content linked to. The value of the attribute should be a MIME type such as <strong>text/html</strong>, <strong>text/css</strong>, and so on. The common use of this attribute is to define the type of stylesheet being referenced (such as <strong>text/css</strong>), but given that CSS is the only stylesheet language used on the web, not only is it possible to omit the <code>type</code> attribute, but is actually now recommended practice. It is also used on <code>rel="preload"</code> link types, to make sure the browser only downloads file types that it supports.</dd> +</dl> + +<h3 id="Non-standard_attributes">Non-standard attributes</h3> + +<dl> + <dt>{{HTMLAttrDef("methods")}} {{Non-standard_Inline}}</dt> + <dd>The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the <strong>title</strong> attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4.</dd> + <dt>{{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}</dt> + <dd>This attribute identifies a resource that might be required by the next navigation and that the user agent should retrieve it. This allows the user agent to respond faster when the resource is requested in the future.</dd> + <dt>{{HTMLAttrDef("target")}} {{Non-standard_Inline}}</dt> + <dd>Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.</dd> +</dl> + +<h3 id="Obsolete_attributes">Obsolete attributes</h3> + +<dl> + <dt>{{HTMLAttrDef("charset")}} {{Obsolete_Inline}}</dt> + <dd>This attribute defines the character encoding of the linked resource. The value is a space- and/or comma-delimited list of character sets as defined in {{rfc(2045)}}. The default value is <code>iso-8859-1</code>. + <div class="note"><strong>Usage note:</strong> To produce the same effect as this obsolete attribute, use the {{HTTPHeader("Content-Type")}} HTTP header on the linked resource.</div> + </dd> + <dt>{{HTMLAttrDef("rev")}} {{Obsolete_Inline}}</dt> + <dd>The value of this attribute shows the relationship of the current document to the linked document, as defined by the {{HTMLAttrxRef("href", "link")}} attribute. The attribute thus defines the reverse relationship compared to the value of the <code>rel</code> attribute. <a href="/en-US/docs/Web/HTML/Link_types">Link type values</a> for the attribute are similar to the possible values for {{HTMLAttrxRef("rel", "link")}}.</dd> + <dd> + <div class="blockIndicator note"> + <p><strong>Note:</strong> This attribute is considered obsolete by the WHATWG HTML living standard (which is the specification MDN treats as canonical). However, it's worth noting that <code>rev</code> is <em>not</em> considered obsolete in the W3C specification. That said, given the uncertainty, relying on <code>rev</code> is unwise.</p> + + <p>Instead, you should use the {{HTMLAttrxRef("rel", "link")}} attribute with the opposite <a href="/en-US/docs/Web/HTML/Link_types">link type value</a>. For example, to establish the reverse link for <code>made</code>, specify <code>author</code>. Also this attribute doesn't stand for "revision" and must not be used with a version number, even though many sites misuse it in this way.</p> + </div> + </dd> +</dl> + +<dl> + <dt>charset</dt> + <dd>Ten atrybut określa zestaw znaków używanych przez linkowany dokument. Dozwolonymi wartościami dla tego atrybutu są nazwy zestawu znaków, takie jak EUC-JP, zdefiniowane w <a class="external" href="http://tools.ietf.org/html/rfc2045" title="http://tools.ietf.org/html/rfc2045">RFC 2045</a>.</dd> +</dl> + +<dl> + <dt>media</dt> + <dd>Ten atrybut określa docelowe medium dla jakiś linkowanych informacji o stylach, które określono, kiedy atrybut <code>rel</code> jest ustawiony na <code>stylesheet</code>. Wartością tego atrybutu może być być pojedyncze określenie medium, jak <code>screen</code>, lub lista rozdzielona przecinkami. Możliwymi wartościami tego atrybutu <code>all</code>, <code>aural</code>, <code>braille</code>, <code>print</code>, <code>projection</code> oraz <code>screen</code>. Mogą być również zdefiniowane inne wartości, zależnie od przeglądarki. Internet Explorer wspiera <code>all</code>, <code>print</code> oraz <code>screen</code> jako wartości tego atrybutu.</dd> +</dl> + +<dl> + <dt>rel</dt> + <dd>Ten atrybut nazywa relacje między linkowanym dokumentem a dokumentem aktualnym. Możliwe wartości dla tego atrybutu zawierają <code>alternate</code>, <code>bookmark</code>, <code>chapter</code>, <code>contents</code>, <code>copyright</code>, <code>glossary</code>, <code>help</code>, <code>index</code>, <code>next</code>, <code>prev</code>, <code>section</code>, <code>start</code>, <code>stylesheet</code> oraz <code>subsection</code>. Najbardziej powszechnym użyciem tego atrybutu jest określanie linku do zewnętrznego arkusza stylów. Atrybut <code>rel</code> jest ustawiany na <code>stylesheet</code>, zaś atrybut <code>href</code> jest ustawiany na URL zewnętrznego arkusza stylów w celu formatowania strony. WebTV wspiera również użycie wartości <code>next</code> dla <code>rel</code> dla wstępnego załadowania następnej strony w serii dokumentów.</dd> +</dl> + +<dl> + <dt>rev</dt> + <dd>Wartość atrybutu <code>rev</code> pokazuje relację aktualnego dokumentu do dokumentu linkowanego, zdefiniowanego przez atrybut <code>href</code>. Atrybut w ten sposób definiuje odwróconą relację w porównaniu do wartości atrybutu <code>rel</code>. Wartości dla atrybutu <code>rev</code> są podobne do możliwych wartości atrybutu <code>rel</code>. Mogą zawierać <code>alternate</code>, <code>bookmark</code>, <code>chapter</code>, <code>contents</code>, <code>copyright</code>, <code>glossary</code>, <code>help</code>, <code>index</code>, <code>next</code>, <code>prev</code>, <code>section</code>, <code>start</code>, <code>stylesheet</code> oraz <code>subsection</code>.</dd> +</dl> + +<dl> + <dt>target</dt> + <dd>Wartość atrybutu <code>target</code> jest używana do definiowania nazwy ramki lub okna, które ma zdefiniowaną relację linkowania lub które pokaże wyświetlenie jakiegoś zlinkowanego zasobu.</dd> +</dl> + +<dl> + <dt>type</dt> + <dd>Ten atrybut jest używany do definiowania typu zawartości, do której prowadzi link. Wartość tego atrybutu powinna być typem <code>MIME</code> takim jak <code>text/html</code>, <code>text/css</code> i tak dalej. Powszechnym użyciem tego atrybutu jest definiowanie zlinkowanego arkusza stylów i najbardziej powszechną obecnie wartością jest <code>text/css</code>, która wskazuje format Kaskadowych Arkuszy Stylów.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Łączenie_z_arkuszem_stylów">Łączenie z arkuszem stylów</h3> + +<p>Aby dołączyć arkusz stylów do strony, użyj następującej składni:</p> + +<pre class="brush: html no-line-numbers"><link href="style.css" rel="stylesheet"> +</pre> + +<h3 id="Dostarczanie_alternatywnych_arkuszy_stylów">Dostarczanie alternatywnych arkuszy stylów</h3> + +<p>Można również określić <a href="/pl/docs/Web/CSS/Alternative_style_sheets">alternatywne arkusze stylów</a>.</p> + +<p>Użytkownik może wybrać, który arkusz stylów ma być użyty, wybierając go z menu Widok > Styl strony. Dzięki temu użytkownik może zobaczyć wiele wersji strony.</p> + +<pre class="brush: html no-line-numbers"><link href="default.css" rel="stylesheet" title="Domyślny Styl"> +<link href="fancy.css" rel="alternate stylesheet" title="Efektowny"> +<link href="basic.css" rel="alternate stylesheet" title="Podstawowy"> +</pre> + +<h3 id="Dostarczanie_ikon_dla_różnych_zastosowań">Dostarczanie ikon dla różnych zastosowań</h3> + +<p>Możesz umieścić linki do kilku różnych ikon na tej samej stronie, a przeglądarka wybierze, która z nich najlepiej pasuje do danego kontekstu, używając jako podpowiedzi wartości <code>rel</code> oraz <code>sizes</code>.</p> + +<pre class="brush: html no-line-numbers"><!-- iPad trzeciej generacji z wyświetlaczem Retina wysokiej rozdzielczości: --> +<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"> +<!-- iPhone z wyświetlaczem Retina wysokiej rozdzielczości: --> +<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> +<!-- iPad pierwszej i drugiej generacji: --> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"> +<!-- urządzenia iPhone bez wyświetlacza Retina, iPod Touch i Android 2.1+: --> +<link rel="apple-touch-icon-precomposed" href="favicon57.png"> +<!-- podstawowy favicon --> +<link rel="icon" href="favicon32.png"></pre> + +<h3 id="Warunkowe_ładowanie_zasobów_z_zapytaniami_media">Warunkowe ładowanie zasobów z zapytaniami media</h3> + +<p>Możesz podać typ nośnika lub zapytanie wewnątrz atrybutu <code>media</code>; zasób ten zostanie załadowany tylko wtedy, gdy stan nośnika jest prawdziwy. Na przykład:</p> + +<pre class="brush: html no-line-numbers"><link href="print.css" rel="stylesheet" media="print"> +<link href="mobile.css" rel="stylesheet" media="all"> +<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"> +<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)"> +</pre> + +<h3 id="Zdarzenia_z_udziałem_arkusza_stylów">Zdarzenia z udziałem arkusza stylów</h3> + +<p>Można określić kiedy arkusz stylów został załadowany, obserwując, czy wystąpiło na nim zdarzenie <code>load</code>; podobnie, można wykryć, czy podczas przetwarzania arkusza stylów wystąpił błąd, obserwując, czy wystąpiło zdarzenie <code>error</code>:</p> + +<pre class="brush: html"><script> +var myStylesheet = document.querySelector('#my-stylesheet'); + +myStylesheet.onload = function() { + // Zrób coś ciekawego; arkusz został załadowany +} + +myStylesheet.onerror = function() { + console.log("Wystąpił błąd podczas ładowania arkusza stylów!"); +} +</script> + +<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet"> +</pre> + +<div class="blockIndicator note"> +<p><strong>Uwaga:</strong> Zdarzenie <code>load</code> zostaje wywołane, gdy arkusz stylów i cała jego zaimportowana zawartość zostanie załadowana i przetworzona, a także bezpośrednio przed zastosowaniem stylów do zawartości.</p> +</div> + +<h3 id="Przykłady_wstępnego_ładowania">Przykłady wstępnego ładowania</h3> + +<p>Możesz znaleźć szereg przykładów z <code><link rel="preload"></code> w sekcji <a href="/pl/docs/Web/HTML/Preloading_content">Wstępne załadowanie zawartości z <code>rel="preload"</code></a>.</p> + +<h2 id="Podsumowanie_techniczne">Podsumowanie techniczne</h2> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th> + <td>Zawartość metadanych. Jeśli <code><a href="/pl/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code> jest obecny: <a href="/pl/docs/Web/Guide/HTML/Content_categories#Flow_content">Zawartość przepływu</a> i <a href="/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Zawartość frazowania</a>.</td> + </tr> + <tr> + <th>Dozwolona zawartość</th> + <td>Brak, to jest {{Glossary("empty element", "pusty element")}}.</td> + </tr> + <tr> + <th>Pominięcie znacznika</th> + <td>Ponieważ jest to pusty element, znacznik otwierający musi być obecny, a znacznik zamykający nie może być obecny.</td> + </tr> + <tr> + <th>Dozwoleni rodzice</th> + <td>Każdy element, który akceptuje elementy metadanych. Jeśli <a href="/pl/docs/Web/HTML/Global_attributes/itemprop">itemprop</a> jest obecny: każdy element, który akceptuje <a href="/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content">zawartość frazowania</a>.</td> + </tr> + <tr> + <th scope="row">Dozwolone role ARIA</th> + <td>Brak</td> + </tr> + <tr> + <th>Interfejs DOM</th> + <td>{{DOMxRef("HTMLLinkElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "semantics.html#the-link-element", "<link>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Brak zmian w stosunku do ostatniego wydania</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "document-metadata.html#the-link-element", "<link>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Dodano atrybuty <code>corssorigin</code> oraz <code>sizes</code>; rozszerzono wartość <code>media</code> do dowolnych zapytań media; dodano wiele nowych wartości dla <code>rel</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "struct/links.html#h-12.3", "<link>")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2> + + + +<p>{{Compat("html.elements.link", 3)}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>Nagłówek HTTP {{HTTPHeader("Link")}}</li> +</ul> diff --git a/files/pl/web/html/element/marquee/index.html b/files/pl/web/html/element/marquee/index.html new file mode 100644 index 0000000000..e26f2e3652 --- /dev/null +++ b/files/pl/web/html/element/marquee/index.html @@ -0,0 +1,112 @@ +--- +title: marquee +slug: Web/HTML/Element/marquee +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/marquee +--- +<div>{{ non-standard_header() }}</div> + + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> +<p>Element <code><marquee>...</marquee></code> wykorzystywany jest do przewijanego tekstu wewnątrz pola tekstowego.</p> + + +<h2 id="Atrybuty" name="Atrybuty">Atrybuty</h2> +<dl> + <dt> + behavior</dt> + <dd> + Ustawienia, w jaki sposób jest przewijany tekst w <code>marquee</code>. Możliwymi wartościami są <code>scroll</code>, <code>slide</code> i <code>alternate</code>. Jeśli wartość nie jest określona, to domyślnie jest ustawiona wartość <code>scroll</code>.</dd> + <dt> + bgcolor</dt> + <dd> + Ustawienia koloru tła, podane jako nazwa koloru lub wartości szesnastkowe.</dd> + <dt> + direction</dt> + <dd> + Ustawienia kierunku, w jakim przewijać ma się zawartość <code>marquee</code>. Możliwymi wartościami są <code>left</code> (w lewo), <code>right</code> (w prawo), <code>up</code> (do góry) i <code>down</code> (w dół). Jeśli wartość nie jest określona, to domyślnie jest ustawiona wartość <code>left</code> (w lewo).</dd> + <dt> + height</dt> + <dd> + Ustawienia wysokości. Wartości podajemy w pikselach lub procentach.</dd> + <dt> + hspace (1.9a)</dt> + <dd> + Ustawienia poziomego marginesu.</dd> + <dt> + loop (1.9a)</dt> + <dd> + Ustawienia, ile razy zostanie przewinięty znacznik <code>marquee</code>. Jeśli wartość nie jest określona, to domyślnie jest ustawiona wartość −1, która znaczy, że zawartość <code>marquee</code> będzie przewijana ciągle.</dd> + <dt> + scrollamount</dt> + <dd> + Ustawienia sumy przewinięć każdej przerwy, wyrażona w pikselach. Domyślnym ustawieniem jest 6.</dd> + <dt> + scrolldelay</dt> + <dd> + Ustawia przerwę pomiędzy każdym przesunięciem przewinięcia w milisekundach. Domyślną wartością jest 85. Uwaga, ta wartość nie może być mniejsza niż 60, bo mniejsze wartości są ignorowane i użyta jest wartość 60 zamiast wpisanej mniejszej wartości.</dd> + <dt> + truespeed (1.9a)</dt> + <dd> + Ustawia, czy czas przewijania nie jest mniejszy niż 60, bo mniejsze wartości będą ignorowane. Możliwe wartości to <code>true</code> lub <code>false</code>. Domyślną wartością jest <code>false</code></dd> + <dt> + vspace (1.9a)</dt> + <dd> + Ustawienia pionowego marginesu w pikselach lub procentach.</dd> + <dt> + width</dt> + <dd> + Ustawia wartość długości w pikselach lub procentach.</dd> +</dl> + + + +<h2 id="Zdarzenia" name="Zdarzenia">Zdarzenia</h2> +<dl> + <dt> + onbounce</dt> + <dd> + Zdarzenie jest wywołane, gdy tekst odbije się od końca jego pola. Może zdarzyć się tylko wtedy, gdy właściwość <code>behavior</code> jest ustawiona na <code>alternate</code>.</dd> + <dt> + onfinish</dt> + <dd> + Zdarzenie jest wywołane, kiedy tekst skończy się przewijać (przewijanie ustawiamy za pomocą atrybutu pętli). Może się zdarzyć tylko, gdy atrybut pętli jest większy niż 0.</dd> + <dt> + onstart</dt> + <dd> + Zdarza się, kiedy tekst zaczyna się przewijać.</dd> +</dl> + + +<h2 id="Metody" name="Metody">Metody</h2> +<dl> + <dt> + start</dt> + <dd> + Uruchamia przewijanie zawartości znacznika <code>marquee</code>.</dd> + <dt> + stop</dt> + <dd> + Zatrzymuje przewijanie zawartości znacznika <code>marquee</code>.</dd> +</dl> + + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> +<pre class="brush:html"><marquee>This text will scroll from right to left</marquee> +<marquee direction="up">Ten tekst będzie się przewijał do góry</marquee> +<marquee direction="down" width="250" height="200" + behavior="alternate" style="border:1px solid black"> + <marquee behavior="alternate"> + This text will bounce + </marquee> +</marquee> +</pre> + + +<h2 id="Notatka" name="Notatka">Notatka</h2> +<p>Znacznik <code>marquee</code> został wymyślony dla przeglądarki IE.</p> +<p>Znacznik <code>marquee</code> nie jest zgodny ze specyfikacją HTML lub XHTML. Autor strony, aby zachować zgodność ze standardami, nie powinien używać tego znacznika.</p> +<p>Znacznik <code>marquee</code> jest zaimplementowany w Mozilla przy użyciu <a href="/pl/XBL" title="pl/XBL">XBL</a>: <a class="external" href="http://lxr.mozilla.org/seamonkey/source/layout/style/xbl-marquee/xbl-marquee.xml" rel="freelink">http://lxr.mozilla.org/seamonkey/sou...bl-marquee.xml</a></p> + +<div>{{ HTML:Element_Navigation() }}</div> diff --git a/files/pl/web/html/element/meta/index.html b/files/pl/web/html/element/meta/index.html new file mode 100644 index 0000000000..8fbc0241f3 --- /dev/null +++ b/files/pl/web/html/element/meta/index.html @@ -0,0 +1,144 @@ +--- +title: '<meta>: Element metadanych na poziomie dokumentów' +slug: Web/HTML/Element/meta +translation_of: Web/HTML/Element/meta +--- +<div>{{HTMLRef}}</div> + +<p><strong>Element HTML <code><meta></code></strong> reprezentuje {{Glossary("Metadata","metadane")}}, które nie mogą być reprezentowane przez inne elementy związane z metadanymi w HTML, takie jak {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} lub {{HTMLElement("title")}}.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th> + <td>Metadata content. If the {{htmlattrxref("itemprop")}} attribute is present: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th>Dozwolona zawartość</th> + <td>None, it is an {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th>Pominięcie znacznika</th> + <td>As it is a void element, the start tag must be present and the end tag must not be present.</td> + </tr> + <tr> + <th>Dozwoleni rodzice</th> + <td><code><meta charset></code>, <code><meta http-equiv></code>: a {{HTMLElement("head")}} element. If the {{htmlattrxref("http-equiv", "meta")}} is not an encoding declaration, it can also be inside a {{HTMLElement("noscript")}} element, itself inside a {{HTMLElement("head")}} element.</td> + </tr> + <tr> + <th scope="row">Domniemane role ARIA</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td> + </tr> + <tr> + <th scope="row">Dozwolone role ARIA</th> + <td>No <code>role</code> permitted</td> + </tr> + <tr> + <th>Interfejs DOM</th> + <td>{{domxref("HTMLMetaElement")}}</td> + </tr> + </tbody> +</table> + +<p>The type of metadata provided by the <code>meta</code> element can be one of the following:</p> + +<ul> + <li>If the {{htmlattrxref("name", "meta")}} attribute is set, the <code>meta</code> element provides <em>document-level metadata</em>, applying to the whole page.</li> + <li>If the {{htmlattrxref("http-equiv", "meta")}} attribute is set, the <code>meta</code> element is a <em>pragma directive</em>, providing information equivalent to what can be given by a similarly-named HTTP header.</li> + <li>If the {{htmlattrxref("charset", "meta")}} attribute is set, the <code>meta</code> element is a <em>charset declaration</em>, giving the character encoding in which the document is encoded.</li> + <li>If the {{htmlattrxref("itemprop")}} attribute is set, the <code>meta</code> element provides <em>user-defined metadata</em>.</li> +</ul> + +<h2 id="Attributes">Attributes</h2> + +<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<div class="note"> +<p><strong>Note:</strong> the attribute {{htmlattrxref("name", "meta")}} has a specific meaning for the <code><meta></code> element, and the {{htmlattrxref("itemprop")}} attribute must not be set on the same <code><meta></code> element that has any existing {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} or {{htmlattrxref("charset", "meta")}} attributes.</p> +</div> + +<dl> + <dt>{{htmlattrdef("charset")}}</dt> + <dd>This attribute declares the document's character encoding. If the attribute is present, its value must be an ASCII case-insensitive match for the string "<code>utf-8</code>".</dd> + <dt>{{htmlattrdef("content")}}</dt> + <dd>This attribute contains the value for the {{htmlattrxref("http-equiv", "meta")}} or {{htmlattrxref("name", "meta")}} attribute, depending on which is used.</dd> + <dt>{{htmlattrdef("http-equiv")}}</dt> + <dd> + <p>Defines a pragma directive. The attribute is named <code><strong>http-equiv</strong>(alent)</code> because all the allowed values are names of particular HTTP headers:</p> + + <ul> + <li><code>content-security-policy</code> + + <p>Allows page authors to define a <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">content policy</a> for the current page. Content policies mostly specify allowed server origins and script endpoints which help guard against cross-site scripting attacks.</p> + </li> + <li><code>content-type</code> + <p>If specified, the <code>content</code> attribute must have the value "<code>text/html; charset=utf-8</code>". <strong>Note: </strong> Can only be used in documents served with a <code>text/html</code> <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a> — not in documents served with an XML MIME type.</p> + </li> + <li><code>default-style</code> + <p>Sets the name of the default <a href="/en-US/docs/Web/CSS">CSS style sheet</a> set.</p> + </li> + <li><code>x-ua-compatible</code> + <p>If specified, the <code>content</code> attribute must have the value "<code>IE=edge</code>". User agents are required to ignore this pragma.</p> + </li> + <li><code>refresh</code> + <div>This instruction specifies:</div> + + <ul> + <li>The number of seconds until the page should be reloaded - only if the {{htmlattrxref("content", "meta")}} attribute contains a positive integer.</li> + <li>The number of seconds until the page should redirect to another - only if the {{htmlattrxref("content", "meta")}} attribute contains a positive integer followed by the string '<code>;url=</code>', and a valid URL.</li> + </ul> + + <h5 id="Accessibility_concerns">Accessibility concerns</h5> + + <div>Pages set with a <code>refresh</code> value run the risk of having the time interval being too short. People navigating with the aid of assistive technology such as a screen reader may be unable to read through and understand the page's content before being automatically redirected. The abrupt, unannounced updating of the page content may also be disorienting for people experiencing low vision conditions.</div> + + <ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_—_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.1 explanations</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN Understanding WCAG, Guideline 3.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html">Understanding Success Criterion 2.2.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html">Understanding Success Criterion 2.2.4 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html">Understanding Success Criterion 3.2.5 | W3C Understanding WCAG 2.0</a></li> + </ul> + </li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd> + <p>The <code>name</code> and <code>content</code> attributes can be used together to provide document metadata in terms of name-value pairs, with the <code>name</code> attribute giving the metadata name, and the <code>content</code> attribute giving the value.</p> + + <p>See <a href="/en-US/docs/Web/HTML/Element/meta/name">standard metadata names</a> for details about the set of standard metadata names defined in the HTML specification.</p> + </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: html notranslate"><meta charset="utf-8"> + +<!-- Redirect page after 3 seconds --> +<meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '<meta>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<div>{{Compat("html.elements.meta")}}</div> diff --git a/files/pl/web/html/element/ol/index.html b/files/pl/web/html/element/ol/index.html new file mode 100644 index 0000000000..7ce2455796 --- /dev/null +++ b/files/pl/web/html/element/ol/index.html @@ -0,0 +1,123 @@ +--- +title: ol +slug: Web/HTML/Element/ol +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/ol +--- +<p> </p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Element <code><ol></code> (ordered list) jest używany do definiowania uporządkowanej lub numerowanej listy punktów. Styl numerowania pojawia się w różnych formach, włączając w to litery, cyfry rzymskie i normalne liczby. Poszczególne punkty w liście są określane przez elementy <a href="pl/HTML/Element/li">pozycja listy</a> (<a href="pl/HTML/Element/li"><li></a>), objęte elementem <code><ol></code>.</p> +<ul> + <li>Typ elementu: <a href="pl/HTML/Elementy_blokowe">blokowy</a></li> + <li>Dozwolona zawartość: <a href="pl/HTML/Element/li">li</a></li> +</ul> +<h3 id="Atrybuty" name="Atrybuty">Atrybuty</h3> +<dl> + <dt> + start {{ Deprecated_inline() }}</dt> + <dd> + Określa początkową wartość dla numerowania poszczególnych punktów listy. Chociaż typ porządkowania listy elementów może być cyframi rzymskimi, jak XXXI, lub literami, wartość <code>start</code> jest zawsze reprezentowana jako liczba. By rozpocząć numerowanie elementów od litery "C", użyj <code><ol type="A" start="3"></code>.</dd> +</dl> +<dl> + <dt> + type {{ Deprecated_inline() }}</dt> + <dd> + Wskazuje typ numerowania: <code>a</code> określa małe litery, <code>A</code> wskazuje duże litery, <code>i</code> określa małe cyfry rzymskie, <code>I</code> określa duże cyfry rzymskie, zaś <code>1</code> określa liczby. Atrybut <code>type</code> ustawiony w elemencie <code><ol></code> jest używany wewnątrz listy, chyba że atrybut <code>type</code> jest użyty w zamkniętym elemencie <a href="pl/HTML/Element/li"><li></a>. Ten atrybut jest wycofywany, użyj zamiast niego własności <a href="pl/CSS">CSS</a> <a href="pl/CSS/list-style-type">list-style-type</a>.</dd> +</dl> +<dl> + <dt> + compact {{ Deprecated_inline() }}</dt> + <dd> + Wskazuje, że lista powinna być wyświetlona w zwartej formie. Interpretacja tego atrybutu zależy od programu użytkownika. Nie działa on we wszystkich wiodących przeglądarkach.</dd> +</dl> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<h4 id="Prosty_przyk.C5.82ad" name="Prosty_przyk.C5.82ad">Prosty przykład</h4> +<pre> <ol> + <li>pierwsza pozycja</li> + <li>druga pozycja</li> + <li>trzecia pozycja</li> + </ol> +</pre> +<p>Powyższy HTML daje w efekcie:</p> +<ol> + <li>pierwsza pozycja</li> + <li>druga pozycja</li> + <li>trzecia pozycja</li> +</ol> +<h4 id="U.C5.BCycie_w.C5.82asno.C5.9Bci_start" name="U.C5.BCycie_w.C5.82asno.C5.9Bci_start">Użycie własności <code>start</code></h4> +<pre> <ol start="7"> + <li>pierwsza pozycja</li> + <li>druga pozycja</li> + <li>trzecia pozycja</li> + </ol> +</pre> +<p>Powyższy HTML daje w efekcie:</p> +<ol start="7"> + <li>pierwsza pozycja</li> + <li>druga pozycja</li> + <li>trzecia pozycja</li> +</ol> +<h4 id="Zagnie.C5.BCd.C5.BCona_lista" name="Zagnie.C5.BCd.C5.BCona_lista">Zagnieżdżona lista</h4> +<pre> <ol> + <li>pierwsza pozycja</li> + <li>druga pozycja <!-- Spójrz, zamykający znacznik </li> nie jest tutaj umieszczony --> + <ol> + <li>druga pozycja pierwszy podpunkt</li> + <li>druga pozycja drugi podpunkt</li> + <li>druga pozycja trzeci podpunkt</li> + </ol> + </li> <!-- Tutaj jest zamykający znacznik </li> --> + <li>trzecia pozycja</li> + </ol> +</pre> +<p>Powyższy HTML daje w efekcie:</p> +<ol> + <li>pierwsza pozycja</li> + <li>druga pozycja + <ol> + <li>druga pozycja pierwszy podpunkt</li> + <li>druga pozycja drugi podpunkt</li> + <li>druga pozycja trzeci podpunkt</li> + </ol> + </li> + <li>trzecia pozycja</li> +</ol> +<h4 id="Zagnie.C5.BCd.C5.BCanie_.3Col.3E_oraz_.3Cul.3E" name="Zagnie.C5.BCd.C5.BCanie_.3Col.3E_oraz_.3Cul.3E">Zagnieżdżanie <ol> oraz <ul></h4> +<pre> <ol> + <li>pierwsza pozycja</li> + <li>druga pozycja <!-- Spójrz, zamykający znacznik </li> nie jest tutaj umieszczony --> + <ul> + <li>druga pozycja pierwszy podpunkt</li> + <li>druga pozycja drugi podpunkt</li> + <li>druga pozycja trzeci podpunkt</li> + </ul> + </li> <!-- Tutaj jest zamykający znacznik </li> --> + <li>trzecia pozycja</li> + </ol> +</pre> +<p>Powyższy HTML daje w efekcie:</p> +<ol> + <li>pierwsza pozycja</li> + <li>druga pozycja + <ul> + <li style="list-style-type: square;">druga pozycja pierwszy podpunkt</li> + <li style="list-style-type: square;">druga pozycja drugi podpunkt</li> + <li style="list-style-type: square;">druga pozycja trzeci podpunkt</li> + </ul> + </li> + <li>trzecia pozycja</li> +</ol> +<h3 id="Notatki" name="Notatki">Notatki</h3> +<p>Możesz zagnieżdżać tak dużo list <code><ul></code> i <code><ol></code>, jak chcesz w dowolnej kolejności.</p> +<p>Aby zmienić wcięcie listy, użyj własności <a href="pl/CSS">CSS</a> <a href="pl/CSS/margin">margin</a>.</p> +<p> </p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> +<ul> + <li><a href="pl/HTML/Element/li">Znacznik li (pozycja listy)</a></li> + <li><a href="pl/HTML/Element/ul">Znacznik ul (lista nieuporządkowana)</a></li> + <li><a href="pl/CSS/list-style">Własność CSS list-style</a></li> + <li><a href="pl/Liczniki_CSS">Liczniki CSS</a></li> +</ul> +<p>{{ HTML:Element_Navigation() }}</p> +<p>{{ languages( { "en": "en/HTML/Element/ol" } ) }}</p> diff --git a/files/pl/web/html/element/p/index.html b/files/pl/web/html/element/p/index.html new file mode 100644 index 0000000000..192c45ee88 --- /dev/null +++ b/files/pl/web/html/element/p/index.html @@ -0,0 +1,45 @@ +--- +title: p +slug: Web/HTML/Element/p +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/p +--- +<p> </p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Element <code><p></code> (Paragraph) oznacza akapit. Jest on najpowszechniej używanym elementem.</p> + +<ul> + <li>Typ elementu: <a href="pl/HTML/Elementy_blokowe">blokowy</a></li> + <li>Dozwolona zawartość: <a href="pl/HTML/Elementy_liniowe">liniowa</a></li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre> <p>To jest pierwszy akapit tekstu. To jest pierwszy akapit tekstu. + To jest pierwszy akapit tekstu. To jest pierwszy akapit tekstu.</p> + + <p>To jest drugi akapit tekstu. To jest drugi akapit tekstu. + To jest drugi akapit tekstu. To jest drugi akapit tekstu.</p> +</pre> + +<p>Powyższy HTML daje w efekcie:</p> + +<p>To jest pierwszy akapit tekstu. To jest pierwszy akapit tekstu. To jest pierwszy akapit tekstu. To jest pierwszy akapit tekstu.</p> + +<p>To jest drugi akapit tekstu. To jest drugi akapit tekstu. To jest drugi akapit tekstu. To jest drugi akapit tekstu.</p> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>By zmienić przerwy między akapitami, użyj własności <a href="pl/CSS">CSS</a> <a href="pl/CSS/margin">margin</a>. <strong>Nie</strong> wstawiaj pomiędzy nie pustych akapitów ani elementów <a href="pl/HTML/Element/br">przełamanie linii</a> (<a href="pl/HTML/Element/br"><code><br></code></a>).</p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<ul> + <li><a href="pl/HTML/Element/hr">Element podział poziomy (<code><hr></code>)</a></li> + <li><a href="pl/HTML/Element/br">Element przełamanie linii (<code><br></code>)</a></li> +</ul> + +<p> </p> diff --git a/files/pl/web/html/element/q/index.html b/files/pl/web/html/element/q/index.html new file mode 100644 index 0000000000..9209d2c02f --- /dev/null +++ b/files/pl/web/html/element/q/index.html @@ -0,0 +1,36 @@ +--- +title: q +slug: Web/HTML/Element/q +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/q +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><q></code> (Quote) wskazuje, że zamknięty nim tekst jest krótkim liniowych cytatem. +</p> +<ul><li> Typ elementu: <a href="pl/HTML/Elementy_liniowe">liniowy</a> +</li><li> Dozwolona zawartość: <a href="pl/HTML/Elementy_liniowe">liniowa</a> +</li></ul> +<h3 id="Atrybuty" name="Atrybuty"> Atrybuty </h3> +<dl><dt>cite +</dt><dd>Wartością tego atrybutu jest URL, który określa źródłowy dokument lub wiadomość dla cytowanej informacji. Ten atrybut jest przeznaczony do wskazywania informacji objaśniającej kontekst lub odwołanie dla cytatu. +</dd></dl> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<pre> Everytime Kenny is killed, Stan will announce <q>Oh my God, you/they killed Kenny!</q>. +</pre> +<p>Powyższy HTML daje w efekcie: +</p><p><img alt="Image:HTML-q.png"> </p> +<h3 id="Notatki" name="Notatki"> Notatki </h3> +<p>Ten element jest przeznaczony dla krótkich cytatów, które nie wymagają podziału na akapity, dla długich cytatów użyj elementu <a href="pl/HTML/Element/blockquote"><code><blockquote></code></a>. +</p><p>Większość współczesnych przeglądarek, jak Mozilla Firefox, Opera i Safari, może dodać cudzysłowy wokół tekstu zamkniętego elementem <code><q></code>. +</p><p>Niektóre przeglądarki, jak Internet Explorer, mogą nie robić żadnej zmiany stylu dla cytatów, ale jest możliwe nadanie tego w regułach stylów. +</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<ul><li> <a href="pl/HTML/Element/blockquote">Element <code><blockquote></code></a> +</li><li> <a href="pl/HTML/Element/cite">Element <code><cite></code></a> +</li></ul> +<p><br> +{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/q" } ) }} diff --git a/files/pl/web/html/element/ruby/index.html b/files/pl/web/html/element/ruby/index.html new file mode 100644 index 0000000000..287fa1683b --- /dev/null +++ b/files/pl/web/html/element/ruby/index.html @@ -0,0 +1,103 @@ +--- +title: <ruby> +slug: Web/HTML/Element/ruby +translation_of: Web/HTML/Element/ruby +--- +<div>{{HTMLRef}}</div> + +<p>Znacznik <strong>HTML <code><ruby></code></strong> reprezentuje adnotację ruby. Adnotacje te są w celu wyświetlania wymowy znaków używanych w Azji Wschodniej.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/ruby.html", "tabbed-shorter")}}</div> + +<p class="hidden">Źródło tego interaktywnego przykładu jest przechowywane na repozytorium GitHub. Jeżeli chciałbyś przyczynić się do interaktywnych przykładowych projektów, sklonuj, proszę <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> i wyślij nam prośbę o dołączenie.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Kategorie zawartości</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Treść przepływu</a>, treść wyrażona, treść oczywista.</td> + </tr> + <tr> + <th scope="row">Dozwolona treść</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Treść wyrażona.</a></td> + </tr> + <tr> + <th scope="row">Pominięcie znacznika</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Dozwoleni rodzice</th> + <td>Każdy element akceptujący <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">treść wyrażoną.</a></td> + </tr> + <tr> + <th scope="row">Dozwolone role ARIA</th> + <td>Każda.</td> + </tr> + <tr> + <th scope="row">Interfejs DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Ten element zawiera tylko <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">globalne atrybuty</a>.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Przykład_1_Znak">Przykład 1: Znak</h3> + +<pre class="brush:html"><ruby> + 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> + 字 <rp>(</rp><rt>ji</rt><rp>)</rp> +</ruby></pre> + +<h3 id="Przykład_2_Wyraz">Przykład 2: Wyraz</h3> + +<pre class="brush:html"><ruby> + 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> +</ruby></pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Uwaga</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ruby-element', '<ruby>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-ruby-element', '<ruby>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + + + +<div class="hidden">Tabela kompatybilności na tej stronie jest wygenerowana z zbudowanych danych. Jeżeli chciałbyś przyczynić się do danych, sprawdź, proszę <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> i wyślij nam prośbę o dołączenie.</div> + +<p>{{Compat("html.elements.ruby")}}</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li>{{HTMLElement("rtc")}}</li> + <li>{{HTMLElement("rbc")}}</li> + <li>{{CSSxRef("text-transform")}}: full-size-kana</li> +</ul> diff --git a/files/pl/web/html/element/s/index.html b/files/pl/web/html/element/s/index.html new file mode 100644 index 0000000000..373204a4e5 --- /dev/null +++ b/files/pl/web/html/element/s/index.html @@ -0,0 +1,23 @@ +--- +title: s +slug: Web/HTML/Element/s +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/s +--- +<p> </p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><s>...</s></code> renderuje przekreślenie tekstu na całej linii występowania tekstu, objętego znacznikami tego elementu. </p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<pre class="eval"><s>Specjalnie dziś: łosoś</s> WYPRZEDANE +</pre> +<h4 id="Rezultat" name="Rezultat"> Rezultat </h4> +<p><s>Specjalnie dziś: łosoś</s> WYPRZEDANE +</p> +<h3 id="Notatka" name="Notatka"> Notatka </h3> +<p>Element ten renderuje tekst w identyczny sposób jak znacznik <a href="pl/HTML/Element/strike"><code><strike></code></a>. Żaden z nich nie jest bardziej akceptowalny niż drugi, więc można je zamieniać. +</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p><a href="pl/HTML/Element/strike">Znacznik <code><strike></code></a> +</p><p>{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/s" } ) }} diff --git a/files/pl/web/html/element/samp/index.html b/files/pl/web/html/element/samp/index.html new file mode 100644 index 0000000000..af7405144a --- /dev/null +++ b/files/pl/web/html/element/samp/index.html @@ -0,0 +1,25 @@ +--- +title: samp +slug: Web/HTML/Element/samp +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/samp +--- +<p> </p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Element <code><samp>...</samp></code> tworzy element liniowy wyświetlany domyślną dla przeglądarki czcionką o stałej szerokości (Lucida Console). Element jest przeznaczony do wskazywania przykładowego wyniku działania programu komputerowego.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval"> Zwykły tekst. <samp>To jest przykładowy tekst.</samp> Zwykły tekst. +</pre> +<h4 id="Rezultat" name="Rezultat">Rezultat</h4> +<p>Zwykły tekst. <samp>To jest przykładowy tekst.</samp> Zwykły tekst.</p> +<p>(Ten przykład nie ukazuje działania w związku w ograniczeniami w oprogramowaniu wiki, ale na na rzeczywistej stronie internetowej powinien działać dobrze.)</p> +<h3 id="Notatki" name="Notatki">Notatki</h3> +<p>Reguła CSS może być definiowana dla selektora <code>samp</code>, by nadpisać domyślną czcionkę przeglądarki. Ustawienia nadane przez użytkownika mogą wziąć pierwszeństwo przed określonymi w CSS.</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> +<ul> + <li><a href="pl/HTML/Element/code">Element HTML <code>code</code></a></li> + <li>Specyfikacja HTML 4.01: <a class="external" href="http://www.w3.org/TR/html4/struct/text.html#h-9.2.1">Phrase Elements</a></li> +</ul> +<p>{{ HTML:Element_Navigation() }}</p> +<p>{{ languages( { "en": "en/HTML/Element/samp" } ) }}</p> diff --git a/files/pl/web/html/element/section/index.html b/files/pl/web/html/element/section/index.html new file mode 100644 index 0000000000..4985fba6d6 --- /dev/null +++ b/files/pl/web/html/element/section/index.html @@ -0,0 +1,128 @@ +--- +title: <section> +slug: Web/HTML/Element/section +translation_of: Web/HTML/Element/section +--- +<p>{{HTMLRef}}</p> + +<p>Element <strong><code><section></code> </strong>stanowi samodzielną sekcję tworzącą dokument HTML, której nie można przedstawić za pomocą bardziej szczegółowej semantycznie sekcji. Element <section> zazwyczaj posiada nagłówek.</p> + +<p>Przykładowo, część nawigacyjna powinna być objęta elementem {{htmlelement("nav")}}, ale lista wyników wyszukiwania albo wyświetlana mapa i jej sterowanie nie mają dla siebie szczegółowego elementu, więc powinny zostać umieszczone w <code><section></code>.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Sectioning_content">Sectioning content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>. Note that a {{HTMLElement("section")}} element must not be a descendant of an {{HTMLElement("address")}} element.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("alert")}}, {{ARIARole("alertdialog")}}, {{ARIARole("application")}}, {{ARIARole("banner")}}, {{ARIARole("complementary")}}, {{ARIARole("contentinfo")}}, {{ARIARole("dialog")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("log")}}, {{ARIARole("main")}}, {{ARIARole("marquee")}}, {{ARIARole("navigation")}}, {{ARIARole("search")}}, {{ARIARole("status")}}, {{ARIARole("tabpanel")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Element zawiera tylko <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<h2 id="Użycie">Użycie</h2> + +<ul> + <li>Każdy element <code><section></code> powinien zazwyczaj zawierać nagłówek ({{HTMLElement('h1')}}-{{HTMLElement('h6')}}) jako element potomny <code><section></code>.</li> + <li>Jeśli jest konieczne oddzielić podgrupy w treści elementu {{HTMLElement("section")}}, używa się elementów{{HTMLElement("article")}}.</li> + <li>Nie używa się elementu {{HTMLElement("section")}} w celu stworzenia ogólnego kontenera; do tego służy element {{HTMLElement("div")}}, szczególnie nie robi się tego jesli ma to służyć tylko do nadania stylów. Praktyczną zasadą jest to, że wsytąpeinie elementu <section> powinną być logiczne w schemacie dokumentu.</li> +</ul> + +<h2 id="Przykład_1">Przykład 1</h2> + +<h3 id="Wcześniej">Wcześniej</h3> + +<pre class="brush: html"><div> + <h1>Heading</h1> + <p>Bunch of awesome content</p> +</div></pre> + +<h3 id="Teraz">Teraz</h3> + +<pre class="brush: html"><section> + <h1>Heading</h1> + <p>Bunch of awesome content</p> +</section> +</pre> + +<h2 id="Przykład_2">Przykład 2</h2> + +<h3 id="Wcześniej_2">Wcześniej</h3> + +<pre class="brush: html"><div> + <h2>Heading</h2> + <img src="bird.jpg" alt="bird"> +</div> +</pre> + +<h3 id="Teraz_2">Teraz</h3> + +<pre class="brush: html"><section> + <h2>Heading</h2> + <img src="bird.jpg" alt="bird"> +</section> +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + + + +<p>{{Compat("html.elements.section")}}</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>Inne elementy dotyczące sekcji: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document">Sections and outlines of an HTML5 document</a>.</li> +</ul> diff --git a/files/pl/web/html/element/small/index.html b/files/pl/web/html/element/small/index.html new file mode 100644 index 0000000000..8049addbb2 --- /dev/null +++ b/files/pl/web/html/element/small/index.html @@ -0,0 +1,26 @@ +--- +title: small +slug: Web/HTML/Element/small +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/small +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element <code><small>...</small></code> powoduje, że tekst normalnego rozmiaru jest wyświetlany jako mały (rozmiar czcionki). </p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<pre class="eval"> <p> + + To jest pierwsze zdanie. <small>To zdanie jest napisane małymi literami.</small> + + </p> +</pre> +<h4 id="Rezultat" name="Rezultat"> Rezultat </h4> <p> To jest pierwsze zdanie. <small>To zdanie jest napisane małymi literami.</small> </p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<ul><li> <a href="pl/HTML/Element/big">Znacznik <code><big></code></a> +</li><li> <a href="pl/HTML/Element/font">Znacznik <code><font></code></a> +</li><li> <a href="pl/HTML/Element/style">Znacznik <code><style></code></a> +</li></ul> +<p>{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/small" } ) }} diff --git a/files/pl/web/html/element/span/index.html b/files/pl/web/html/element/span/index.html new file mode 100644 index 0000000000..93b455274c --- /dev/null +++ b/files/pl/web/html/element/span/index.html @@ -0,0 +1,138 @@ +--- +title: <span> +slug: Web/HTML/Element/span +translation_of: Web/HTML/Element/span +--- +<h2 id="Summary" name="Summary">Streszczenie</h2> + +<p><strong>HTML <code><span></code> element</strong> <span lang="pl">jest podstawowym wbudowanym kontenerem dla frazowania treści, który z natury nie reprezentuje niczego. Może być używany do grupowania tekstu w celu stylizacji</span> (używa atrybutu <code>class</code> lub <code>id</code>), <span lang="pl">lub z powodu posiadania takich samych atrybutów, takich jak </span><code>lang</code>.<span lang="pl"> Powinien być używany tylko wtedy, gdy nie ma zastosowania żaden inny element semantyczny</span>. <code><span></code> <span lang="pl">jest bardzo podobny do elementu</span> <code><div></code>, lecz <code><div></code> jest <a href="/en-US/docs/HTML/Block-level_elements">elementem blokowym</a>, a <code><span></code><a href="/en-US/docs/HTML/Inline_elements"> - elementem liniowym</a>.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Kategorie treści</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>.</li> + <li><dfn>Dozwolone treści</dfn><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Phrasing content</a></li> + <li><dfn>Pomijanie tagów</dfn> {{no_tag_omission}}</li> + <li><dfn>Dozwolone elementy narzędne</dfn>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, or any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>.</li> + <li><dfn>Interfejs DOM</dfn> {{domxref("HTMLSpanElement")}} (before HTML 5, the interface was {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="Attributes" name="Attributes">Atrybuty</h2> + +<p><span style="line-height: 21px;">Ten element obejmuje tylko </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globalne atrybuty</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Example1" name="Example1">Przykład 1</h2> + +<pre class="brush:html;gutter:false"><p><span>tekst</span></p></pre> + +<h3 id="Result1" name="Result1">Wynik</h3> + +<p><span>tekst</span></p> + +<p> </p> + +<h2 id="Example2" name="Example2">Przykład 2</h2> + +<pre class="brush:html;gutter:false"><li><span> + <a href="profil.html" target="_blank">Zobacz mój profil</a> +</span></li> +</pre> + +<h3 id="CSS" name="CSS">CSS:</h3> + +<div class="note"> +<p>li span {<br> + background: gold;<br> + }</p> +</div> + +<h3 id="Result2" name="Result2">Wynik</h3> + +<ul> + <li><span style="background: gold;"> <a href="portfolio.html">Zobacz mój profil</a></span></li> +</ul> + +<h2 id="Dane_techniczne">Dane techniczne</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>The DOM interface is now {{domxref("HTMLSpanElement")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '<span>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">Zgodność przeglądarek</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Zobacz także</h2> + +<ul> + <li>HTML {{HTMLElement("div")}} element</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/pl/web/html/element/strong/index.html b/files/pl/web/html/element/strong/index.html new file mode 100644 index 0000000000..ed69903ce4 --- /dev/null +++ b/files/pl/web/html/element/strong/index.html @@ -0,0 +1,22 @@ +--- +title: strong +slug: Web/HTML/Element/strong +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/strong +--- +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> +<p>Element <code><strong>...</strong></code> daje mocny nacisk, zwykle jest on wyświetlany jako wytłuszczenie.</p> <h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> +<pre class="eval"> <p> + Kiedy robi się X, jest to <strong>wymagane</strong>, żeby najpierw zrobić Y. + </p> +</pre> <h3 id="Rezultat" name="Rezultat">Rezultat</h3> +<p>Kiedy robi się X, jest to <strong>wymagane</strong>, żeby najpierw zrobić Y.</p> <h2 id="Bold_vs._Strong" name="Bold_vs._Strong">Bold vs. Strong</h2> +<p>Jest to często trudne dla niedoświadczonych deweloperów, dlaczego jest tak dużo sposobów stworzenia tej samej rzeczy na stronie. Pogrubienie i silny nacisk jest prawdopodobnie jednym z najczęstszych. Czy należy używać <code><b></b></code> czy <code><strong></strong></code>? Czy tworzy to dokładnie ten sam wynik?</p> +<p>Nie do końca, silny nacisk jest stanem logicznym, a wytłuszczenie jest stanem fizycznym. Stany logiczne oddzielają prezentację od zawartości, dlatego może być to wyrażone na różne sposoby, na przykład zamiast wyświetlać kawałek tekstu jako pogrubienie, możesz wyświetlić to na czerwono, w innym rozmiarze, podkreślone lub jakkolwiek inaczej. Bardziej sensownym jest zmieniać właściwości prezentacyjne znacznika <code>strong</code> niż robić to z pogrubieniem. Jest tak, ponieważ pogrubienie jest stanem fizycznym, nie ma tutaj rozdziału pomiędzy prezentacją i zawartością, zmuszanie pogrubienia do robienia czegokolwiek innego niż wytłuszczania tekstu byłoby mylące i nielogiczne.</p> +<p>Zobacz także: <a href="/pl/HTML/Element/b" title="pl/HTML/Element/b">Znacznik <b></a></p> <p>{{ HTML:Element_Navigation() }}</p> +<p class="noinclude">{{ languages({ +"en": "en/HTML/Element/strong", +"de": "de/HTML/Element/strong", +"ja": "ja/HTML/Element/strong", +}) }}</p> diff --git a/files/pl/web/html/element/title/index.html b/files/pl/web/html/element/title/index.html new file mode 100644 index 0000000000..2f6f35f467 --- /dev/null +++ b/files/pl/web/html/element/title/index.html @@ -0,0 +1,122 @@ +--- +title: '<title>: Element Tytułu Dokumentu' +slug: Web/HTML/Element/title +tags: + - Element + - HTML + - HTML metadane dokumentu + - 'HTML:Metadane zawartość' + - Nazwa Okna + - Nazwa Strony + - Nazwa Zakładki + - Reference + - Tytuł + - Tytuł Okna + - Tytuł Strony + - Tytuł Zakładki + - Web +translation_of: Web/HTML/Element/title +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>Element tytułu HTML</strong> (<strong><code><title></code></strong>) określa tytuł dokumentu, który jest wyświetlany na pasku tytułu przeglądarki lub w zakładce strony. Zawiera on tylko tekst, a znaczniki wewnątrz elementu są ignorowane.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th> + <td><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Metadata_content">Zawartość metadanych</a>.</td> + </tr> + <tr> + <th scope="row">Dozwolona zawartość</th> + <td>Tekst, który nie jest przestrzenią białych znaków.</td> + </tr> + <tr> + <th scope="row">Pominięcie znacznika</th> + <td>Wymagane są zarówno znaczniki otwarcia jak i zamknięcia. Należy pamiętać, że pozostawienie <code></title></code> powinno spowodować, że przeglądarka będzie ignorować resztę strony.</td> + </tr> + <tr> + <th scope="row">Dozwoleni rodzice</th> + <td>Element {{ HTMLElement("head") }}, który nie zawiera żadnego innego elementu {{ HTMLElement("title") }}.</td> + </tr> + <tr> + <th scope="row">Dozwolone role ARIA</th> + <td>Brak.</td> + </tr> + <tr> + <th scope="row">Interfejs DOM</th> + <td>{{domxref("HTMLTitleElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atrybuty">Atrybuty</h2> + +<p>Ten element uwzględnia tylko <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</p> + +<h2 id="Uwagi_dotyczące_zastosowania">Uwagi dotyczące zastosowania</h2> + +<p>Element <code><title></code> jest zawsze używay w bloku {{HTMLElement("head")}} strony.</p> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush: html"><title>Wspaniały tytuł strony</title> +</pre> + +<h2 id="Kwestie_dostępności">Kwestie dostępności</h2> + +<p>Ważne jest, aby podać wartość <code>tytułu</code>, która opisuje przeznaczenie strony. </p> + +<p>Powszechną techniką nawigacji dla użytkowników technologii wspomagającej jest czytanie tytułu strony i wnioskowanie, jaką treść ona zawiera. Dzieje się tak, ponieważ nawigacja po stronie w celu określenia jej zawartości może być czasochłonnym i potencjalnie mylącym procesem.</p> + +<h4 id="Przykład_2">Przykład</h4> + +<pre><title>Menu - Kuchnia Chińska Blue House - FoodYum: Już dziś online!</title> +</pre> + +<p>Aby pomóc użytkownikowi, zaktualizuj wartość <code>tytułu</code> strony tak, aby odzwierciedlała istotne zmiany stanu strony (np. problemy z walidacją formularza).</p> + +<h4 id="Przykład_3">Przykład</h4> + +<pre><title>2 błędy - Twoje zamówienie - Kuchnia Chińska Blue House - FoodYum: Już dziś online!</title> +</pre> + +<ul> + <li><a href="https://developer.mozilla.org/pl/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Zrozumienie WCAG, Wytyczna 2.4 wyjaśnienie</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html">Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '<title>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.title")}}</p> diff --git a/files/pl/web/html/element/tt/index.html b/files/pl/web/html/element/tt/index.html new file mode 100644 index 0000000000..7e175b1d0c --- /dev/null +++ b/files/pl/web/html/element/tt/index.html @@ -0,0 +1,27 @@ +--- +title: tt +slug: Web/HTML/Element/tt +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/tt +--- +<p> +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Element HTML <code><tt>...</tt></code> tworzy element liniowy wyświetlany domyślną dla przeglądarki czcionką o stałej szerokości (Lucida Console). Ten element jest przeznaczony do stylizacji tekstu jakby był pokazywany na wyświetlaczu o stałej szerokości znaków, takim jak dalekopis. Prawdopodobnie do wyświetlania stałej szerokości znaków bardziej powszechne jest używanie elementu <code><code></code>. +</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h3> +<pre class="eval"> <p>Wpisz poniższy tekst w linii poleceń telnet: <kbd>set localecho</kbd><br /> + Klient telnet powinien wyświetlić: <tt>Local Echo is on</tt></p> +</pre> +<h4 id="Rezultat" name="Rezultat"> Rezultat </h4> <p>Wpisz poniższy tekst w linii poleceń telnet: <kbd>set localecho</kbd><br> Klient telnet powinien wyświetlić: <tt>Local Echo is on</tt></p> +<h3 id="Notatki" name="Notatki"> Notatki </h3> +<p>Reguły CSS mogą być definiowane dla selektora <code>tt</code>, aby nadpisać domyślną czcionkę przeglądarki. Ustawienia nadane przez użytkownika mogą wziąć pierwszeństwo przed określonymi w CSS. +</p><p>Chociaż element nie był wycofany w specyfikacji HTML 4.01, zaleca się rezygnację z jego używania na rzecz arkuszy stylów. +</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<ul><li> <a href="pl/HTML/Element/code">Znacznik <code>code</code></a> +</li><li> Specyfikacja HTML 4.01: <a class="external" href="http://www.w3.org/TR/html4/present/graphics.html#h-15.2">Font Styles</a> +</li></ul> +<p>{{ HTML:Element_Navigation() }} +</p>{{ languages( { "en": "en/HTML/Element/tt" } ) }} diff --git a/files/pl/web/html/element/ul/index.html b/files/pl/web/html/element/ul/index.html new file mode 100644 index 0000000000..8710984266 --- /dev/null +++ b/files/pl/web/html/element/ul/index.html @@ -0,0 +1,103 @@ +--- +title: ul +slug: Web/HTML/Element/ul +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/ul +--- +<p> </p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Element <code><ul></code> (Unordered list) jest używany do wskazania listy nieuporządkowanej, mianowicie zestawu punktów, które nie mają porządku liczbowego i ich kolejność w liście nie ma znaczenia. Poszczególne punkty w liście są definiowane poprzez element <a href="pl/HTML/Element/li">pozycja listy</a> (<a href="pl/HTML/Element/li"><li></a>), który jest jedynym dopuszczalnym elementem w znaczniku <code><ul></code>.</p> +<ul> + <li>Typ elementu: <a href="pl/HTML/Elementy_blokowe">blokowy</a></li> + <li>Dozwolona zawartość: <a href="pl/HTML/Element/li">li</a></li> +</ul> +<h3 id="Atrybuty" name="Atrybuty">Atrybuty</h3> +<dl> + <dt> + type {{ Deprecated_inline() }}</dt> + <dd> + Używany do ustawienia typu znaku wypunktowania dla listy. Wartościami zdefiniowanymi w <a href="pl/HTML3.2">HTML3.2</a> i wersji <a href="pl/HTML4.01">HTML 4.0/4.01</a> Transitional są <code>circle</code>, <code>disc</code> oraz <code>square</code>. Program użytkownika może zdecydować o wyborze innego wypunktowania, zależnie od poziomu zagnieżdżenia listy, chyba że jest użyty atrybut <code>type</code>. Interfejs WebTV wspiera również wypunktowanie <code>triangle</code>. Ten atrybut jest wycofywany, użyj zamiast niego własności <a href="pl/CSS">CSS</a> <a href="pl/CSS/list-style-type">list-style-type</a>.</dd> +</dl> +<dl> + <dt> + compact {{ Deprecated_inline() }}</dt> + <dd> + Określa, że lista powinna być wyświetlona w zwartej formie. Interpretacja tego atrybutu zależy od programu użytkownika.</dd> +</dl> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<h4 id="Prosty_przyk.C5.82ad" name="Prosty_przyk.C5.82ad">Prosty przykład</h4> +<pre> <ul> + <li>pierwsza pozycja</li> + <li>druga pozycja</li> + <li>trzecia pozycja</li> + </ul> +</pre> +<p>Powyższy HTML daje w efekcie:</p> +<ul> + <li>pierwsza pozycja</li> + <li>druga pozycja</li> + <li>trzecia pozycja</li> +</ul> +<h4 id="Zagnie.C5.BCd.C5.BCona_lista" name="Zagnie.C5.BCd.C5.BCona_lista">Zagnieżdżona lista</h4> +<pre> <ul> + <li>pierwsza pozycja</li> + <li>druga pozycja <!-- Spójrz, zamykający znacznik </li> nie jest tutaj umieszczony --> + <ul> + <li>druga pozycja pierwszy podpunkt</li> + <li>druga pozycja drugi podpunkt</li> + <li>druga pozycja trzeci podpunkt</li> + </ul> + </li> <!-- Tutaj jest zamykający znacznik </li> --> + <li>trzecia pozycja</li> + </ul> +</pre> +<p>Powyższy HTML daje w efekcie:</p> +<ul> + <li>pierwsza pozycja</li> + <li>druga pozycja + <ul> + <li>druga pozycja pierwszy podpunkt</li> + <li>druga pozycja drugi podpunkt</li> + <li>druga pozycja trzeci podpunkt</li> + </ul> + </li> + <li>trzecia pozycja</li> +</ul> +<h4 id="Zagnie.C5.BCd.C5.BCanie_.3Cul.3E_oraz_.3Col.3E" name="Zagnie.C5.BCd.C5.BCanie_.3Cul.3E_oraz_.3Col.3E">Zagnieżdżanie <ul> oraz <ol></h4> +<pre> <ul> + <li>pierwsza pozycja</li> + <li>druga pozycja <!-- Spójrz, zamykający znacznik </li> nie jest tutaj umieszczony --> + <ol> + <li>druga pozycja pierwszy podpunkt</li> + <li>druga pozycja drugi podpunkt</li> + <li>druga pozycja trzeci podpunkt</li> + </ol> + </li> <!-- Tutaj jest zamykający znacznik </li> --> + <li>trzecia pozycja</li> + </ul> +</pre> +<p>Powyższy HTML daje w efekcie:</p> +<ul> + <li>pierwsza pozycja</li> + <li>druga pozycja + <ol> + <li>druga pozycja pierwszy podpunkt</li> + <li>druga pozycja drugi podpunkt</li> + <li>druga pozycja trzeci podpunkt</li> + </ol> + </li> + <li>trzecia pozycja</li> +</ul> +<h3 id="Notatki" name="Notatki">Notatki</h3> +<p>Możesz zagnieżdżać tak dużo list <code><ul></code> i <code><ol></code>, jak chcesz w dowolnej kolejności.</p> +<p>Aby zmienić wcięcie listy, użyj własności <a href="pl/CSS">CSS</a> <a href="pl/CSS/margin">margin</a>.</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> +<ul> + <li><a href="pl/HTML/Element/li">Znacznik li (pozycja listy)</a></li> + <li><a href="pl/HTML/Element/ol">Znacznik ol (lista uporządkowana)</a></li> + <li><a href="pl/CSS/list-style">Własność CSS list-style</a></li> + <li><a href="pl/Liczniki_CSS">Liczniki CSS</a></li> +</ul> +<p>{{ HTML:Element_Navigation() }}</p> +<p>{{ languages( { "en": "en/HTML/Element/ul" } ) }}</p> diff --git a/files/pl/web/html/element/video/index.html b/files/pl/web/html/element/video/index.html new file mode 100644 index 0000000000..21d4ea9694 --- /dev/null +++ b/files/pl/web/html/element/video/index.html @@ -0,0 +1,355 @@ +--- +title: <video> +slug: Web/HTML/Element/video +translation_of: Web/HTML/Element/video +--- +<div> </div> + +<h2 id="Summary" name="Summary">W skrócie</h2> + +<p><strong>Element <code><video></code></strong> został stworzony do umieszczania treści wideo na stronie. Może zawierać wiele różnych źródeł z nagraniami, które określamy poprzez kolejne tagi {{HTMLElement("source")}} w nim zawarte albo poprzez atrybut <code>src</code>. Przeglądarka sama wybierze odpowiedni dla niej materiał.</p> + +<p>Jeżeli chcesz zobaczyć listę wspieranych formatów, zobacz koniecznie <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Formaty mediów wspieranych przez elementy audio i video</a>.</p> + +<h2 id="Usage_context" name="Usage_context">Kontekst użycia</h2> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, phrasing content, embedded content. If it has a {{htmlattrxref("controls", "video")}} attribute: interactive content and palpable content.</li> + <li><dfn>Permitted content</dfn>If the element has a {{htmlattrxref("src", "video")}} attribute: zero or more {{HTMLElement("track")}} element, followed by transparent content that contains no media elements, that is no {{HTMLElement("audio")}} or {{HTMLElement("video")}}<br> + Else: zero or more {{HTMLElement("source")}} element, followed by zero or more {{HTMLElement("track")}} element, followed by transparent content that contains no media elements, that is no {{HTMLElement("audio")}} or {{HTMLElement("video")}}.</li> + <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts embedded content.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLVideoElement")}}</li> +</ul> + +<h2 id="Attributes" name="Attributes">Atrybuty</h2> + +<p>Podobnie jak inne tagi HTML, ten element może mieć przypisane <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">atrybuty globalne</a>.</p> + +<dl> + <dt>{{htmlattrdef("autoplay")}}</dt> + <dd>Atrybut typu Boolean; jeżeli go określimy, wideo zostanie odtworzone najszybciej, jak to możliwe bez zatrzymywania na czas dalszego pobierania.</dd> + <dt>{{htmlattrdef("autobuffer")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Atrybut typu Boolean; jeżeli go określimy wideo zacznie się buforować nawet wtedy, gdy nie zostało włączone automatyczne odtwarzanie. This should be used for cases in which it is considered likely that the video will be played (for example, if the user navigated to the page specifically to play the video, not if there happens to be a video embedded along with other content). The video is buffered until the media cache is full. + <div class="note"><strong>Notka implementacyjna:</strong> początkowo jako część wstępnych szkiców HTML5, atrybut<code> autobuffer</code> nie pojawił się już w kolejnych ich wydaniach. Został usunięty w Gecko 2.0 i innych przeglądarkach. W specyfikacji umieszczono nowy atrybut, <code>preload</code>, aby zastąpić atrybut <code>autobuffer</code> z inną składnią. {{bug(548523)}}</div> + </dd> + <dt>{{htmlattrdef("buffered")}}</dt> + <dd>An attribute you can read to determine which time ranges of the media have been buffered. This attribute contains a {{domxref("TimeRanges")}} object.</dd> + <dt>{{htmlattrdef("controls")}}</dt> + <dd>If this attribute is present, Gecko will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.</dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>This enumerated attribute indicates if the fetching of the related image must be done using CORS or not. <a href="/en-US/docs/CORS_Enabled_Image" title="CORS_Enabled_Image">CORS-enabled resources</a> can be reused in the {{HTMLElement("canvas")}} element without being <em>tainted</em>. The allowed values are: + <dl> + <dt>anonymous</dt> + <dd>A cross-origin request (i.e. with <code>Origin:</code> HTTP header) is performed. But no credential is sent (i.e. no cookie, no X.509 certificate and no HTTP Basic authentication is sent). If the server does not give credentials to the origin site (by not setting the <code>Access-Control-Allow-Origin:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted..</dd> + <dt>use-credentials</dt> + <dd>A cross-origin request (i.e. with <code>Origin:</code> HTTP header) is performed with credential is sent (i.e. a cookie, a certificate and HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through <code>Access-Control-Allow-Credentials:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted.</dd> + </dl> + When not present, the resource is fetched without a CORS request (i.e. without sending the <code>Origin:</code> HTTP header), preventing its non-tainted used in {{HTMLElement('canvas')}} elements. If invalid, it is handled as if the enumerated keyword <strong>anonymous</strong> was used. See <a href="/en-US/docs/HTML/CORS_settings_attributes" title="CORS settings attributes">CORS settings attributes</a> for additional information.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>The height of the video's display area, in CSS pixels.</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>A Boolean attribute; if specified, we will, upon reaching the end of the video, automatically seek back to the start.</dd> + <dt>{{htmlattrdef("muted")}}</dt> + <dd>A Boolean attribute which indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is false, meaning that the audio will be played when the video is played.</dd> + <dt>{{htmlattrdef("played")}}</dt> + <dd>A {{domxref("TimeRanges")}} object indicating all the ranges of the video that have been played.</dd> + <dt>{{htmlattrdef("preload")}}</dt> + <dd>This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values: + <ul> + <li><span style="font-family: Courier New;">none: </span>hints that either the author thinks that the user won't need to consult that video or that the server wants to minimize its traffic; in others terms this hint indicates that the video should not be cached.</li> + <li><span style="font-family: Courier New;">metadata</span>: hints that though the author thinks that the user won't need to consult that video, fetching the metadata (e.g. length) is reasonable.</li> + <li><span style="font-family: Courier New;">auto</span>: hints that the user needs have priority; in others terms this hint indicated that, if needed, the whole video could be downloaded, even if the user is not expected to use it.</li> + <li>the <em>empty string</em>: which is a synonym of the <span style="font-family: Courier New;">auto </span>value.</li> + </ul> + + <p>If not set, its default value is browser-defined (i.e. each browser can choose its own default value), though the spec advises it to be set to <span style="font-family: Courier New;">metadata</span>.</p> + + <div class="note"><strong>Usage notes:</strong> + + <ul> + <li>The <code>autoplay</code> attribute has precedence over this one as if one wants to automatically play a video, the browser will obviously need to download it. Setting both the <code>autoplay</code> and the <code>preload</code> attributes is allowed by the specification.</li> + <li>The browser is not forced by the specification to follow the value of this attribute; it is a mere hint.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("poster")}}</dt> + <dd>Adres URL do zdjęcia ("plakatu"), które zostanie wyświetlone w miejscu elementu wideo dopóki użytkownik nie odtworzy go lub nie przewinie. Jeżeli atrybut niezostanie podany, nic niezostanie wyświetlone dopóki pierwsza klatka nagrania zostanie załadowana; wtedy ona stanie się "plakatem".</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Adres URL materiału wideo do użycia. Jest to opcjonalne; zamiast tego powinieneś używać elementów {{HTMLElement("source")}} wewnątrz elementu wideo do określenia materiału do odtworzenia.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Szerokość obszaru wyświetlania obrazu wideo, w pikselach.</dd> +</dl> + +<h2 id="Examples" name="Examples">Zdarzenia</h2> + +<p>Element <code><video></code> może wywoływać wiele <a href="/en-US/docs/Web/Guide/Events/Media_events">zdarzeń</a>.</p> + +<h2 id="Examples" name="Examples">Przykłady</h2> + +<pre class="brush: html" dir="rtl"><!-- Prosty przykład z elementem video --> +<video src="videofile.ogg" autoplay poster="posterimage.jpg"> + Przepraszamy ale Twoja przeglądarka nie potrafi odtwarzać filmów za pomocą HTML5. + Nie przejmuj się, bo <a href="videofile.ogg">możesz go stąd pobrać</a> + i oglądać za pomocą swojego ulubionego odtwarzacza! +</video> + +<!-- Wideo z napisami --> +<video src="foo.ogg"> + <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English"> + <track kind="subtitles" src="foo.pl.vtt" srclang="pl" label="Polski"> +</video> +</pre> + +<p>Pierwszy przykład polega na odtworzeniu nagrania od razu po tym, jak odpowiednio duża część materiału zostanie pobrana, aby nie pauzować odtwarzania. Zanim zawartość elementu wideo zostanie wyświetlona, obrazek "posterimage.jpg" zostanie umieszczony w jej miejsce.</p> + +<p>Drugi przykład pozwala użytkownikowi na wybór odpowiednich napisów.</p> + +<h2 id="Server_support" name="Server_support">Wsparcie serwera</h2> + +<p>Jeżeli typ MIME dla elementu wideo niezostanie poprawnie ustawiony na serwerze, może się on nie pojawić albo pojawić jako szary obszar z X (jeżeli JavaScript jest włączony).</p> + +<p>Korzystając z Ogg Theora i pracując na Apache Web Server możesz rozwiązać ten problem dodając rozszerzenia używane przez Twoje pliki wideo (".ogm", ".ogv" i ".ogg" są najpowszechniejsze) do typów MIME "video/ogg" w pliku "mime.types" w folderze "/etc/apache" albo poprzez komendę konfiguracyjną "AddType" w pliku httpd.conf.</p> + +<pre>AddType video/ogg .ogm +AddType video/ogg .ogv +AddType video/ogg .ogg +</pre> + +<p>Korzystając z WebM i pracując na Apache Web Server możesz rozwiązać ten problem dodając rozszerzenie używane przez Twoje pliki wideo (".webm" jest najpowszechniejszy) do typów MIME "video/webm" w pliku "mime.types" w folderze "/etc/apache" albo poprzez komendę konfiguracyjną "AddType" w pliku httpd.conf.</p> + +<pre>AddType video/webm .webm +</pre> + +<p>Pamiętaj, że Twój hosting internetowy może dostarczać łatwiejsze sposoby konfiguracji typów MIME, aby obsługiwać najnowsze technologie zanim globalnie zostaną wprowadzone w użycie.</p> + +<h2 id="DOM_interface" name="DOM_interface">Interfejs DOM</h2> + +<p>Ten element implementuje interfejs <code><a href="/en-US/docs/Web/API/HTMLVideoElement" title="DOM/HTMLVideoElementInterface">HTMLVideoElement</a></code>.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Kompatybilność z przeglądarkami</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Podstawowa obsługa</td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td>atrybut <code>autoplay</code></td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td>atrybut <code>buffered</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>Yes</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atrybut <code>controls</code></td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td>atrybut <code>crossorigin</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("12.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atrybut <code>loop</code></td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td>atrybut <code>muted</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>Yes</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>właściwość <code>played</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("15.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>Yes</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atrybut <code>poster</code></td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td>atrybut <code>preload</code></td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>Yes</td> + <td>3.1</td> + </tr> + <tr> + <td>atrybut <code>src</code></td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Podstawowa obsługa</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atrybut <code>autoplay</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>iOS 6.0 only</td> + </tr> + <tr> + <td>atrybut <code>buffered</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atrybut <code>controls</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atrybut <code>loop</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("11.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atrybut <code>muted</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("11.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>właściwość <code>played</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("15.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atrybut <code>poster</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atrybut <code>preload</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atrybut <code>src</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>atrybut <code>crossorigin</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("12.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also"> </h2> + +<h2 id="See_also" name="See_also">Zobacz także</h2> + +<ul> + <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Formaty mediów wspieranych przez elementy audio i video.</a></li> + <li>{{htmlelement("audio")}}</li> + <li><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using audio and video in Firefox">Używanie elementów audio i video HTML5.</a></li> + <li><a href="/en-US/docs/Manipulating_video_using_canvas" title="Manipulating video using canvas">Manipulowanie wideo korzystając z elementu canvas.</a></li> + <li><a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li> + <li><a class="external" href="http://tinyvid.tv/" title="http://tinyvid.tv/">TinyVid</a> - przykłady użycia plików ogg w HTML5.</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#video" title="http://www.whatwg.org/specs/web-apps/current-work/#video">Element video</a> (specyfikacja HTML5)</li> + <li><a href="/en-US/docs/Configuring_servers_for_Ogg_media" title="Configuring servers for Ogg media">Konfigurowanie serwerów pod kątem mediów Ogg.</a></li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/pl/web/html/elementy_blokowe/index.html b/files/pl/web/html/elementy_blokowe/index.html new file mode 100644 index 0000000000..392dc43954 --- /dev/null +++ b/files/pl/web/html/elementy_blokowe/index.html @@ -0,0 +1,38 @@ +--- +title: Elementy blokowe +slug: Web/HTML/Elementy_blokowe +tags: + - HTML + - 'HTML:Opis_elementów' + - Wszystkie_kategorie +translation_of: Web/HTML/Block-level_elements +--- +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Elementy blokowe mogą wystąpić tylko w <a href="pl/HTML/Element/body">body</a>. Od elementów liniowych odróżnia je: +</p> +<dl><dt>Zawartość elementu</dt><dd> Generalnie elementy blokowe mogą zawierać zarówno elementy liniowe jak i inne elementy blokowe. Elementy blokowe przeznaczone są do tworzenia większych struktur niż elementy liniowe. +</dd><dt>Formatowanie</dt><dd> Domyślnie elementy blokowe zaczynają się od nowej linii. +</dd></dl> +<h3 id="Elementy" name="Elementy"> Elementy </h3> +<p>Poniżej znajduje się lista elementów "blokowych": +</p> +<ul><li> <a href="pl/HTML/Element/p">p</a> +</li><li> <a href="pl/HTML/Element/h1%2ch2%2ch3%2ch4%2ch5%2ch6">h1, h2, h3, h4, h5, h6</a> +</li><li> <a href="pl/HTML/Element/ol">ol</a>, <a href="pl/HTML/Element/ul">ul</a> +</li><li> <a href="pl/HTML/Element/pre">pre</a> +</li><li> <a href="pl/HTML/Element/address">address</a> +</li><li> <a href="pl/HTML/Element/blockquote">blockquote</a> +</li><li> <a href="pl/HTML/Element/dl">dl</a> +</li><li> <a href="pl/HTML/Element/div">div</a> +</li><li> <a href="pl/HTML/Element/fieldset">fieldset</a> +</li><li> <a href="pl/HTML/Element/form">form</a> +</li><li> <a href="pl/HTML/Element/hr">hr</a> +</li><li> <a href="pl/HTML/Element/noscript">noscript</a> +</li><li> <a href="pl/HTML/Element/table">table</a> +</li></ul> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<ul><li> <a href="pl/HTML/Elementy_liniowe">Elementy liniowe</a> +</li></ul> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/HTML/Block-level_elements", "ja": "ja/HTML/Block-level_elements" } ) }} diff --git a/files/pl/web/html/elementy_liniowe/index.html b/files/pl/web/html/elementy_liniowe/index.html new file mode 100644 index 0000000000..f5cd417ec8 --- /dev/null +++ b/files/pl/web/html/elementy_liniowe/index.html @@ -0,0 +1,30 @@ +--- +title: Elementy liniowe +slug: Web/HTML/Elementy_liniowe +tags: + - HTML + - 'HTML:Element' + - 'HTML:Élément(2)' + - Wszystkie_kategorie +translation_of: Web/HTML/Inline_elements +--- +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Elementy liniowe są elementami, które mogą wystąpić tylko w <a href="pl/HTML/Elementy/body">body</a>. Od elementów blokowych odróżnia je: +</p> +<dl><dt>Zawartość elementu</dt><dd> Elementy liniowe mogą zawierać tylko tekst lub inne elementy liniowe. +</dd><dt>Formatowanie</dt><dd> Elementy liniowe nie tworzą nowego wiersza. +</dd></dl> +<h3 id="Elementy" name="Elementy"> Elementy </h3> +<p>Poniżej znajduje się lista elementów "liniowych": +</p> +<ul><li> <a href="pl/HTML/Element/b">b</a>, <a href="pl/HTML/Element/big">big</a>, <a href="pl/HTML/Element/i">i</a>, <a href="pl/HTML/Element/small">small</a>, <a href="pl/HTML/Element/tt">tt</a> +</li><li> <a href="pl/HTML/Element/abbr">abbr</a>, <a href="pl/HTML/Element/acronym">acronym</a>, <a href="pl/HTML/Element/cite">cite</a>, <a href="pl/HTML/Element/code">code</a>, <a href="pl/HTML/Element/dfn">dfn</a>, <a href="pl/HTML/Element/em">em</a>, <a href="pl/HTML/Element/kbd">kbd</a>, <a href="pl/HTML/Element/strong">strong</a>, <a href="pl/HTML/Element/samp">samp</a>, <a href="pl/HTML/Element/var">var</a> +</li><li> <a href="pl/HTML/Element/a">a</a>, <a href="pl/HTML/Element/bdo">bdo</a>, <a href="pl/HTML/Element/br">br</a>, <a href="pl/HTML/Element/img">img</a>, <a href="pl/HTML/Element/map">map</a>, <a href="pl/HTML/Element/object">object</a>, <a href="pl/HTML/Element/q">q</a>, <a href="pl/HTML/Element/script">script</a>, <a href="pl/HTML/Element/span">span</a>, <a href="pl/HTML/Element/sub">sub</a>, <a href="pl/HTML/Element/sup">sup</a> +</li><li> <a href="pl/HTML/Element/button">button</a>, <a href="pl/HTML/Element/input">input</a>, <a href="pl/HTML/Element/label">label</a>, <a href="pl/HTML/Element/select">select</a>, <a href="pl/HTML/Element/textarea">textarea</a> +</li></ul> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<ul><li> <a href="pl/HTML/Elementy_blokowe">Elementy blokowe</a> +</li></ul> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/HTML/Inline_elements", "ja": "ja/HTML/Inline_elements", "ko": "ko/HTML/Inline_elements" } ) }} diff --git a/files/pl/web/html/global_attributes/index.html b/files/pl/web/html/global_attributes/index.html new file mode 100644 index 0000000000..e692b37797 --- /dev/null +++ b/files/pl/web/html/global_attributes/index.html @@ -0,0 +1,480 @@ +--- +title: Global attributes +slug: Web/HTML/Global_attributes +tags: + - Attribute + - HTML + - NeedsBrowserCompatibility + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/HTML/Global_attributes +--- +<div class="summary"> +<p><strong>Global attributes</strong> are attributes common to all HTML elements; they can be used on all elements, though the attributes may have no effect on some elements.out</p> +</div> + +<p>Global attributes may be specified on all <a href="/en-US/docs/Web/HTML/Element">HTML elements</a>, <em>even those not specified in the standard</em>. That means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer HTML5-compliant. For example, HTML5-compliant browsers hide content marked as <code><foo hidden>...<foo></code><code>, </code>even though <code><foo></code> is not a valid HTML element.</p> + +<p>In addition to the basic HTML global attributes, the following global attributes also exist:</p> + +<ul> + <li><strong><code>xml:lang</code></strong> and <code><strong>xml:base</strong></code> — these are inherited from the XHTML specifications and deprecated, but kept for compatibility purposes.</li> + <li>The multiple <code><strong><a href="/en-US/docs/Web/Accessibility/ARIA">aria-*</a></strong></code> attributes, used for improving accessibility.</li> + <li>The event handler attributes: <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li> +</ul> + +<h2 id="Description">Description</h2> + +<dl> + <dt id="attr-accesskey"><code><a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">accesskey</a></code></dt> + <dd>Provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a space-separated list of characters. The browser should use the first one that exists on the computer keyboard layout.</dd> + <dt id="attr-class"><code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code></dt> + <dd>Is a space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the <a href="/en-US/docs/Web/CSS/Class_selectors">class selectors</a> or functions like the method {{domxref("Document.getElementsByClassName()")}}.</dd> + <dt id="attr-contenteditable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code></dt> + <dd>Is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values: + <ul> + <li><code>true</code> or the <em>empty string</em>, which indicates that the element must be editable;</li> + <li><code>false</code>, which indicates that the element must not be editable.</li> + </ul> + </dd> + <dt id="attr-contextmenu"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contextmenu">contextmenu</a></code></dt> + <dd>Is the <code><a href="#attr-id"><strong>id</strong></a></code> of an {{HTMLElement("menu")}} to use as the contextual menu for this element.</dd> + <dt id="attr-dataset"><code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*">data-*</a></code></dt> + <dd>Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the <a href="/en-US/docs/Web/HTML">HTML</a> and its <a href="/en-US/docs/Glossary/DOM">DOM</a> representation that may be used by scripts. All such custom data are available via the {{domxref("HTMLElement")}} interface of the element the attribute is set on. The {{domxref("HTMLElement.dataset")}} property gives access to them.</dd> + <dt id="attr-dir"><code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code></dt> + <dd>Is an enumerated attribute indicating the directionality of the element's text. It can have the following values: + <ul> + <li><code>ltr</code>, which means <em>left to right </em>and is to be used for languages that are written from the left to the right (like English);</li> + <li><code>rtl</code>, which means <em>right to left</em> and is to be used for languages that are written from the right to the left (like Arabic);</li> + <li><code>auto</code>, which let the user agent decides. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then apply that directionality to the whole element.</li> + </ul> + </dd> + <dt id="attr-draggable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/draggable">draggable</a></code> {{experimental_inline}}</dt> + <dd>Is an enumerated attribute indicating whether the element can be dragged, using the <a href="/en-us/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values: + <ul> + <li><code>true</code>, which indicates that the element may be dragged</li> + <li><code>false</code>, which indicates that the element may not be dragged.</li> + </ul> + </dd> + <dt id="attr-dropzone"><code><a href="/en-US/docs/Web/HTML/Global_attributes/dropzone">dropzone</a></code> {{experimental_inline}}</dt> + <dd>Is an enumerated attribute indicating what types of content can be dropped on an element, using the <a href="/en-US/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values: + <ul> + <li><code>copy</code>, which indicates that dropping will create a copy of the element that was dragged</li> + <li><code>move</code>, which indicates that the element that was dragged will be moved to this new location.</li> + <li><code>link</code>, will create a link to the dragged data.</li> + </ul> + </dd> + <dt id="attr-hidden"><code><a href="/en-US/docs/Web/HTML/Global_attributes/hidden">hidden</a></code></dt> + <dd>Is a Boolean attribute indicates that the element is not yet, or is no longer, <em>relevant</em>. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.</dd> + <dt id="attr-id"><code><a href="/en-US/docs/Web/HTML/Global_attributes/id">id</a></code></dt> + <dd>Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).</dd> +</dl> + +<div class="note"> +<p><strong>Note: </strong>The following 5 attributes are part of the <a class="external" href="https://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata">WHATWG HTML Microdata feature</a>.</p> +</div> + +<dl> + <dt id="attr-itemid"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemid">itemid</a></code> {{experimental_inline}}</dt> + <dd>The unique, global identifier of an item.</dd> + <dt id="attr-itemprop"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code> {{experimental_inline}}</dt> + <dd>Used to add properties to an item. Every HTML element may have an itemprop attribute specified, where an itemprop consists of a name and value pair.</dd> + <dt id="attr-itemref"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemref">itemref</a></code> {{experimental_inline}}</dt> + <dd>Properties that are not descendants of an element with the <code>itemscope</code> attribute can be associated with the item using an <strong>itemref</strong>. Itemref provides a list of element ids (not <code>itemid</code>s) with additional properties elsewhere in the document.</dd> + <dt id="attr-itemscope"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">itemscope</a> </code>{{experimental_inline}}</dt> + <dd>Itemscope (usually) works along with <a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype </a>to specify that the HTML contained in a block is about a particular item. itemscope creates the Item and defines the scope of the itemtype associated with it. itemtype is a valid URL of a vocabulary (such as <a class="external external-icon" href="https://schema.org/">schema.org</a>) that describes the item and its properties context.</dd> + <dt id="attr-itemtype"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> {{experimental_inline}}</dt> + <dd>Specifies the URL of the vocabulary that will be used to define itemprop's (item properties) in the data structure. <a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">Itemscope</a> is used to set the scope of where in the data structure the vocabulary set by itemtype will be active.</dd> + <dt id="attr-lang"><code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code></dt> + <dd>Participates in defining the language of the element, the language that non-editable elements are written in or the language that editable elements should be written in. The tag contains one single entry value in the format defines in the <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a> IETF document. <a href="#attr-xml:lang"><strong>xml:lang</strong></a> has priority over it.</dd> +</dl> + +<dl> + <dt id="attr-slot"><code><a href="/en-US/docs/Web/HTML/Global_attributes/slot">slot</a></code> {{experimental_inline}}</dt> + <dd>Assigns a slot in a <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> shadow tree to an element: An element with a <code>slot</code> attribute is assigned to the slot created by the {{HTMLElement("slot")}} element whose {{htmlattrxref("name", "slot")}} attribute's value matches that <code>slot</code> attribute's value.</dd> +</dl> + +<dl> + <dt id="attr-spellcheck"><code><a href="/en-US/docs/Web/HTML/Global_attributes/spellcheck">spellcheck</a></code> {{experimental_inline}}</dt> + <dd>Is an enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values: + <ul> + <li><code>true</code>, which indicates that the element should be, if possible, checked for spelling errors;</li> + <li><code>false</code>, which indicates that the element should not be checked for spelling errors.</li> + </ul> + </dd> + <dt id="attr-style"><code><a href="/en-US/docs/Web/HTML/Global_attributes/style">style</a></code></dt> + <dd>Contains <a href="/en-US/docs/Web/CSS">CSS</a> styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the {{HTMLElement("style")}} element have mainly the purpose of allowing for quick styling, for example for testing purposes.</dd> + <dt id="attr-tabindex"><code><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></code></dt> + <dd>Is an integer attribute indicates if the element can take input focus (is <em>focusable</em>), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values: + <ul> + <li>a <em>negative value</em> means that the element should be focusable, but should not be reachable via sequential keyboard navigation;</li> + <li><code>0</code> means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;</li> + <li>a <em>positive value</em> which means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the <a href="#attr-tabindex"><strong>tabindex</strong></a>. If several elements share the same tabindex, their relative order follows their relative position in the document).</li> + </ul> + </dd> + <dt id="attr-title"><code><a href="/en-US/docs/Web/HTML/Global_attributes/title">title</a></code></dt> + <dd>Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.</dd> + <dt id="attr-translate"><code><a href="/en-US/docs/Web/HTML/Global_attributes/translate">translate</a></code></dt> + <dd>Is an enumerated attribute that is used to specify whether an element's attribute values and the values of it<code>s</code> {{domxref("Text")}} node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values: + <ul> + <li>empty string and <code>"yes"</code>, which indicates that the element will be translated.</li> + <li><code>"no</code>", which indicates that the element will not be translated.</li> + </ul> + </dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>From latest snapshot, {{SpecName('HTML5.1')}}, <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, and <code>itemtype</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML5 W3C')}}, <code>spellcheck</code>, <code>draggable</code>, and <code>dropzone</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, and <code>title</code> are now true global attributes.<br> + <code>xml:lang</code> which was initially part of XHTML, is now also part of HTML.<br> + <code>hidden</code>, <code>data-*</code>, <code>contextmenu</code>, <code>contenteditable</code>, and <code>translate</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.<br> + <code>class</code> and <code>style</code> are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> + <code>dir</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> + <code>id</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> + <code>lang</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> + <code>tabindex</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.<br> + <code>accesskey</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}.<br> + <code>title</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td><code>accesskey</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>class</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>contenteditable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>contextmenu</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(9)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>data-*</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("6")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>dir</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>draggable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>dropzone</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hidden</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>id</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, <code>itemtype</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>lang</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>spellcheck</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>style</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>tabindex</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>title</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><code>accesskey</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>class</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>contenteditable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>contextmenu</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>data-*</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("6")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>dir</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>draggable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>dropzone</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hidden</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>id</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, <code>itemtype</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>lang</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>spellcheck</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>style</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>tabindex</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>title</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Element")}} and {{domxref("GlobalEventHandlers")}} interfaces that allow to query most global attributes.</li> +</ul> diff --git a/files/pl/web/html/global_attributes/pisownia/index.html b/files/pl/web/html/global_attributes/pisownia/index.html new file mode 100644 index 0000000000..ed230d2b07 --- /dev/null +++ b/files/pl/web/html/global_attributes/pisownia/index.html @@ -0,0 +1,63 @@ +--- +title: sprawdzanie pisowni +slug: Web/HTML/Global_attributes/pisownia +translation_of: Web/HTML/Global_attributes/spellcheck +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>The <code><strong>spellcheck</strong></code> <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a> is an enumerated attribute defines whether the element may be checked for spelling errors.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.html","tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<p>It may have the following values:</p> + +<ul> + <li><code>true</code>, which indicates that the element should be, if possible, checked for spelling errors;</li> + <li><code>false</code>, which indicates that the element should not be checked for spelling errors.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> The <code>spellcheck</code> attribute is an <em>enumerated</em> one and not a <em>Boolean</em> one. This means that the explicit usage of one of the values <code>true</code> or <code>false</code> is mandatory, and that a shorthand like <code><textarea spellcheck></textarea> </code>is not allowed. The correct usage is <code><textarea spellcheck="true"></textarea></code>.</p> +</div> + +<p>If this attribute is not set, its default value is element-type and browser-defined. This default value may also be <em>inherited</em>, which means that the element content will be checked for spelling errors only if its nearest ancestor has a <em>spellcheck</em> state of <code>true</code>.</p> + +<p>This attribute is merely a hint for the browser: browsers are not required to check for spelling errors. Typically non-editable elements are not checked for spelling errors, even if the <code>spellcheck</code> attribute is set to <code>true</code> and the browser supports spellchecking.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.global_attributes.spellcheck")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> +</ul> diff --git a/files/pl/web/html/global_attributes/tabindex/index.html b/files/pl/web/html/global_attributes/tabindex/index.html new file mode 100644 index 0000000000..4a53c0c203 --- /dev/null +++ b/files/pl/web/html/global_attributes/tabindex/index.html @@ -0,0 +1,114 @@ +--- +title: tabindex +slug: Web/HTML/Global_attributes/tabindex +translation_of: Web/HTML/Global_attributes/tabindex +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p><a href="/en-US/docs/Web/HTML/Global_attributes">Atrybut globalny</a> <strong>tabindex </strong>jest integerem wskazującym, czy dany element może zostać wyszczególniony (jest <em>fokusyjny</em>) oraz czy powinien być brany pod uwagę przy nawigacji sekwencyjnej klawiatury i jeśli tak to na jakiej pozycji. Może przyjąć kilka wartosci:</p> + +<ul> + <li>wartość negatywna (<em>negative value</em>) oznacza, że element powinien być fokusyjny, ale nie powininen być osiągalny poprzez nawigację sekwencyjną klawiatury;</li> + <li>0 oznacza, że element powinien być fokusyjny i zarazem osiągalny przez nawigację sekwencyjną klawiatury, ale jego kolejność względna jest definiowana przez konwencję danej platformy;</li> + <li>wartość pozytywna (<em>positive value</em>) oznacza, że element powinien być fokusyjny i osiągalny przez nawigację sekwencyjną klawiatury; jego kolejność względna jest definiowana poprzez wartość atrybutu: następstwo sekwencyjne zwiększającej się wartości tabindex. Jeśli niektóre elementy posiadają ten sam tabindex, ich kolejność względna zależy od ich pozycji relatywnej w dokumencie</li> +</ul> + +<p>Element o wartości 0, wartości niewłaściwej lub bez wartości <strong>tabindex </strong>powinien zostać umieszczony poniżej tych elementów nawigacji sekwencyjnej klawiatury, które posiadają <strong>tabindex</strong> pozytywny.</p> + +<p>Jeśli ustalimy atrybut <code>tabindex</code> na {{htmlelement("div")}}, wówczas jego zawartość dziedziczna nie będzie przewijalna przy użyciu klawiszy strzałek chyba, że ustawimy tabindex również na zawartość. <a href="https://jsfiddle.net/jainakshay/0b2q4Lgv/">Zobacz tego fiddle'a, by zrozumieć efekt przewijania w odniesieniu do tabindex.</a></p> + +<div class="note"> +<p><strong>Adnotacja</strong>: Maksymalna wartość tabIndexu nie powinna przekraczać 32767. Jeśli nie została zdefiniowana to przyjmuje domyślną wartość -1.</p> +</div> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Brak zmian od ostatniego snapshota, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot z {{SpecName('HTML WHATWG')}}, brak zmian od {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot z {{SpecName('HTML WHATWG')}}. Z {{SpecName("HTML4.01")}}, atrybut jest obecnie wspierany przez wszystkie elementy (atrybuty globalne).</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Wspierany jedynie na {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, oraz {{HTMLElement("textarea")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Wsparcie podstawowe</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Wsparcie podstawowe</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>Wszystkie <a href="/en-US/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</li> + <li>{{domxref("HTMLElement.tabIndex")}}, który odzwierciedla ten atrybut.</li> + <li>Problemy dostępu z tabindex: zobacz <a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html" id="id-22" style="font-size: inherit; line-height: inherit;" title="Don’t Use Tabindex Greater than 0 | Adrian Roselli">Don’t Use Tabindex Greater than 0 | Adrian Roselli</a>.</li> +</ul> diff --git a/files/pl/web/html/index.html b/files/pl/web/html/index.html new file mode 100644 index 0000000000..7d331badf6 --- /dev/null +++ b/files/pl/web/html/index.html @@ -0,0 +1,56 @@ +--- +title: HTML +slug: Web/HTML +translation_of: Web/HTML +--- +<div> +<p><strong>HTML (ang.<em>HyperText Markup Language</em> - hipertekstowy język znaczników)</strong> jest używany do tworzenia stron internetowych i innych typów dokumentów przeznaczonych do oglądania w przeglądarce. HTML jest międzynarodowym standardem, którego specyfikacja jest zarządzana przez <a class="external" href="http://www.w3.org/">World Wide Web Consortium</a>. Aktualna wersja specyfikacji HTML to <a class="external" href="https://www.w3.org/TR/2017/REC-html51-20171003/">HTML 5.1</a>.</p> +</div> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Dokumentacja" name="Dokumentacja">Dokumentacja</h2> + + <dl> + <dt><a class="external" href="https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html">Dlaczego układ oparty na tabelkach jest złym wyborem</a></dt> + <dd>Zobacz, skąd się bierze problem i poznaj metody przestawienia się częściowo lub całkowicie na układ pozbawiony (niewłaściwie użytych) tabel.</dd> + <dt><a href="/pl/docs/Obrazki%2c_tabele_i_tajemnicze_dziury">Obrazki, tabele i tajemnicze dziury</a></dt> + <dd>W wyniku powstawania przeglądarek zgodnych ze standardami, które układają strony WWW używając do tego HTML-a i CSS-u, każdy wygląd strony bazujący na dokładnym ułożeniu maleńkich obrazeczków w komórkach tabel zaczął być potencjalną katastrofą wizualną.</dd> + <dt><a href="/pl/docs/HTML/Znaczenie_poprawnego_komentowania">Znaczenie poprawnego komentowania</a></dt> + <dd>Podczas tworzenia HTML w <a class="external" href="http://www.mozilla.org/docs/web-developer/quirks/doctypes.html">trybie standardów</a>, niepoprawnie sformatowane komentarze mogą zepsuć Twoje strony, powodując wykomentowanie części lub całości ich treści. Podczas tworzenia XHTML lub XML, niepoprawne komentarze spowodują, że twoje dokumenty nie będą mogły w ogóle zostać wyświetlone.</dd> + <dt><a href="/pl/docs/Porady_odno%c5%9bnie_tworzenia_szybko_%c5%82aduj%c4%85cych_si%c4%99_stron_HTML">Porady odnośnie tworzenia szybko ładujących się stron HTML</a></dt> + <dd>Zoptymalizowana strona internetowa nie oznacza jedynie szybszej reakcji na odwiedzających twoją witrynę, ale także zmniejsza obciążenie twoich serwerów WWW i łącza internetowego. Może się to okazać kluczowe dla witryn o dużym natężeniu lub witryn, w których następuje nagły skok popularności z powodu niecodziennych okoliczności takich, jak sensacyjne historie podawane w mediach. Optymalizacja ładowania się strony nie służy tylko treściom, które zostaną obejrzane przez wąską grupę odwiedzających korzystających z modemu. Jest ona tak samo ważna dla treści szerokopasmowych i może zaowocować wielkimi usprawnieniami również dla odwiedzających z najszybszymi połączeniami.</dd> + </dl> + + <p><span class="alllinks"><a href="/pl/docs/tag/HTML">Pokaż wszystkie...</a></span></p> + </td> + <td> + <h2 class="Community" id="Spo.C5.82eczno.C5.9B.C4.87" name="Spo.C5.82eczno.C5.9B.C4.87">Społeczność</h2> + + <ul> + <li>Obejrzyj fora Mozilli... {{ DiscussionList("dev-tech-html", "mozilla.dev.tech.html") }}</li> + <li><a class="external" href="http://groups.yahoo.com/group/canvas-developers/">Grupa programistów w canvas - Yahoo</a></li> + </ul> + + <h2 class="Tools" id="Narz.C4.99dzia" name="Narz.C4.99dzia">Narzędzia</h2> + + <ul> + <li><a class="external" href="http://www.getfirebug.com/">Firebug</a></li> + <li><a class="external" href="http://validator.w3.org/">Walidatory HTML</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/extensions/moreinfo.php?id=60&application=firefox">Rozszerzenie Web Developer</a></li> + <li><a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a></li> + </ul> + + <p><span class="alllinks"><a href="/pl/docs/tag/HTML:Narzędzia">Pokaż wszystkie...</a></span></p> + + <h2 class="Related_Topics" id="Powi.C4.85zane_tematy" name="Powi.C4.85zane_tematy">Powiązane tematy</h2> + + <ul> + <li><a href="/pl/docs/CSS">CSS</a>, <a href="/pl/docs/DOM">DOM</a>, <a href="/pl/docs/XHTML">XHTML</a>, <a href="/pl/docs/XML">XML</a>, <a href="/pl/docs/HTML/Canvas">Canvas</a></li> + </ul> + </td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/html/kontrola_sprawdzania_pisowni_w_formularzach_html/index.html b/files/pl/web/html/kontrola_sprawdzania_pisowni_w_formularzach_html/index.html new file mode 100644 index 0000000000..aa5f4cd009 --- /dev/null +++ b/files/pl/web/html/kontrola_sprawdzania_pisowni_w_formularzach_html/index.html @@ -0,0 +1,28 @@ +--- +title: Kontrola sprawdzania pisowni w formularzach HTML +slug: Web/HTML/Kontrola_sprawdzania_pisowni_w_formularzach_HTML +translation_of: Web/HTML/Global_attributes/spellcheck +--- +<p> </p> +<p>Firefox 2 wprowadza wsparcie dla sprawdzania pisowni w polach i obszarach tekstowych w formularzach. Użytkownik może, używając interfejsu about:config, włączyć lub wyłączyć sprawdzanie pisowni oraz czy sprawdzać zawartość zarówno obszarów tekstowych jak również pól, czy tylko obszarów.</p> +<p>Domyślnie zwartość obszarów tekstowych jest sprawdzana, a pól - nie.</p> +<p>Jednakże, mogą zdarzyć się sytuacje kiedy takie zachowanie może nie być poprawne. Dla przykładu, jeśli obszar tekstowy służyć ma do wprowadzania lub edycji HTML lub podobnych danych, sprawdzanie pisowni stanowiłoby raczej przeszkodę aniżeli pomoc. Podobnie, mogą zdarzyć się sytuacje, kiedy strona sieci Web powinna rekomendować Firefoksowi by sprawdzanie pisowni było włączone dla określonego pola tekstowego.</p> +<p>Jeśli strona sieci Web wymaga włączenia lub wyłączenia sprawdzania pisowni dla danego elementu <code><input></code>, autor może zastosować atrybut <code>spellcheck</code>, podając wartość <code>true</code> jeśli sprawdzanie pisowni powinno być włączone lub <code>false</code> - jeśli powinno być wyłączone.</p> +<p>Proszę pamiętać, że rekomendacja strony może zostać zignorowana jeśli użytkownik wyłączył sprawdzanie pisowni globalnie, poprzez ustawienie wartości <code>layout.spellcheckDefault</code> na 0. Jeśli <code>layout.spellcheckDefault</code> ma jakąkolwiek inną wartość, rekomendacje są brane pod uwagę.</p> +<p>Możesz zakodować pole tekstowe by używało sprawdzania pisowni używając kodu HTML podobnego do poniższego:</p> +<pre class="eval"><span class="nowiki"><input type="text" size="50" spellcheck="true"></span> +</pre> +<p>Podobnie, możesz zakodować pole tekstowe z wyłączonym sprawdzaniem pisowni używając kodu HTML podobnego do poniższego:</p> +<pre class="eval"><span class="nowiki"><textarea spellcheck="false"></textarea></span> +</pre> +<p>Możesz również zastosować atrybut <code>spellcheck</code> do innych elementów, jak na przykład elementy <code><span></code> i <code><div></code>. W tym wypadku jakiekolwiek zawarte w nich elementy <code><input></code> zastosują to ustawienie; elementy nie posiadające atrybutu <code>spellcheck</code> odziedziczą ustawienie sprawdzania pisowni po ich rodzicach. Jeśli nie ma żadnych podanych ustawień, zastosowane zostaną domyślne ustawienia użytkownika.</p> +<p>Na przykład:</p> +<pre><div spellcheck="true"> + <label>Wpisz zdanie: </label><input type="text" size="50"> + <br /> + <label>Wpisz inne zdanie: </label><input type="text" size="50"> +</div> +<br /> +<label>Wpisz trzecie zdanie: </label><input type="text" size="50"> +</pre> +<p>W tym fragmencie kodu HTML, zawartość pierwszych dwóch pól tekstowych zostanie sprawdzona, za to trzeciego - nie.</p> diff --git a/files/pl/web/html/zarządzanie_fokusem_w_html/index.html b/files/pl/web/html/zarządzanie_fokusem_w_html/index.html new file mode 100644 index 0000000000..484fb119c6 --- /dev/null +++ b/files/pl/web/html/zarządzanie_fokusem_w_html/index.html @@ -0,0 +1,18 @@ +--- +title: Zarządzanie fokusem w HTML +slug: Web/HTML/Zarządzanie_fokusem_w_HTML +tags: + - DOM + - Firefox 3 + - HTML + - Wszystkie_kategorie +translation_of: Web/API/Document/hasFocus +--- +<p>{{ Fx_minversion_header(3) }} +{{ Draft() }} +</p><p>W programie Firefox 3 wprowadzono obsługę dwóch nowych atrybutów DOM, zdefiniowanych w roboczej wersji specyfikacji HTML 5: <code><a href="pl/DOM/document.activeElement">activeElement</a></code> i <code><a href="pl/DOM/document.hasFocus">hasFocus</a></code>. +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Focus_management_in_HTML", "es": "es/Gesti\u00f3n_del_foco_en_HTML", "fr": "fr/Gestion_du_focus_en_HTML", "ja": "ja/Focus_management_in_HTML" } ) }} diff --git a/files/pl/web/html/znaczenie_poprawnego_komentowania/index.html b/files/pl/web/html/znaczenie_poprawnego_komentowania/index.html new file mode 100644 index 0000000000..fe5b67106a --- /dev/null +++ b/files/pl/web/html/znaczenie_poprawnego_komentowania/index.html @@ -0,0 +1,64 @@ +--- +title: Znaczenie poprawnego komentowania +slug: Web/HTML/Znaczenie_poprawnego_komentowania +tags: + - HTML + - Wszystkie_kategorie +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started#HTML_comments +--- +<p> </p> +<h2 id="Znaczenie_poprawnego_komentowania" name="Znaczenie_poprawnego_komentowania">Znaczenie poprawnego komentowania</h2> +<p>Podczas tworzenia HTML w <a class="external" href="http://www.mozilla.org/docs/web-developer/quirks/doctypes.html">trybie standardów</a>, niepoprawnie sformatowane komentarze mogą zepsuć twe strony, powodując wykomentowanie części lub całości ich treści. Podczas tworzenia XHTML lub XML, niepoprawne komentarze spowodują, że twoje dokumenty nie będą mogły w ogóle zostać wyświetlone.</p> +<h3 id="HTML_4.01" name="HTML_4.01">HTML 4.01</h3> +<p> + <i> + Z <a class="external" href="http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.4">Rekomendacji W3C dla HTML 4.01, Sekcji 3.2.4 - Komentarze</a>:</i> +</p> +<p>Biała spacja nie jest dozwolona między otwierającym delimiterem deklaracji znacznika ("<!") a otwierającym delimiterem komentarza ("--"), ale jest dozwolona między zamykającym delimiterem komentarza ("--") i zamykającym delimiterem deklaracji znacznika (">"). Pospolitym błędem jest umieszczanie łańcucha kresek ("---") wewnątrz komentarza. Twórcy powinni unikać wstawiania wewnątrz komentarza dwóch lub więcej sąsiadujących kresek.</p> +<h4 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h4> +<p>Poniżej przedstawiono prawidłowe komentarze HTML.</p> +<pre class="eval"><!-- poprawny komentarz HTML --> +<!-- poprawny komentarz HTML -- > +</pre> +<p>Poniżej przedstawiono nieprawidłowy komentarz HTML.</p> +<pre class="eval"><!-- niepoprawny -- komentarz HTML --> +</pre> +<h3 id="XML" name="XML">XML</h3> +<p> + <i> + Z <a class="external" href="http://www.w3.org/TR/REC-xml#sec-comments">Rekomendacji W3C dla XML 1.0, Sekcji 2.5 - Komentarze</a>:</i> +</p> +<blockquote> + <b>Definicja:</b> Komentarze mogą pojawiać się w dokumencie gdziekolwiek poza innymi znacznikami; ponadto mogą pojawiać się wewnątrz deklaracji typu dokumentu w miejscach dozwolonych przez gramatykę. Nie wchodzą w skład danych znakowych dokumentu; procesor XML może, choć nie musi, umożliwić aplikacji wydobywać tekst komentarzy. W celu zapewnienia kompatybilności, łańcuch "--" (podwójna kreska) nie może występować wewnątrz komentarzy. Odwołania do parametrów encji nie mogą być rozpoznawane wewnątrz komentarzy. + <pre>[15] Comment ::= '<!--' ((Char - '-') | ('-' (Char - '-')))* '-->' +</pre> +</blockquote> +<p>Zgodnie z opisem gramatyki komentarzy w XML, komentarz ma postać</p> +<pre class="eval"><!-- znaki bez sąsiadujących kresek --> +</pre> +<h4 id="Przyk.C5.82ady_2" name="Przyk.C5.82ady_2">Przykłady</h4> +<p>Poniżej przedstawiono prawidłowy komentarz XML i XHTML.</p> +<pre class="eval"><!-- poprawny komentarz xml/xhtml --> +</pre> +<p>Poniżej przedstawiono nieprawidłowe komentarze XML i XHTML.</p> +<pre class="eval"><!-- nieprawidłowy -- komentarz xml --> +<!-- nieprawidłowy komentarz xml ---> +<!-- nieprawidłowy komentarz xml -- > +</pre> +<h3 id="Lektury_uzupe.C5.82niaj.C4.85ce" name="Lektury_uzupe.C5.82niaj.C4.85ce">Lektury uzupełniające</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.4">Rekomendacja HTML 4.01: 3.2.4 - Komentarze</a></li> + <li><a class="external" href="http://www.w3.org/TR/REC-xml#sec-comments">Rekomendacja XML: 2.5 - Komentarze</a></li> + <li><a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=144432">Błąd na Bugzilli nr 144432</a></li> + <li><a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=102127">Błąd na Bugzilli nr 102127</a></li> +</ul> +<div class="originaldocinfo"> + <h3 id="Informacje_o_dokumencie" name="Informacje_o_dokumencie">Informacje o dokumencie</h3> + <ul> + <li>Ostatnia aktualizacja: 19 maj 2003</li> + <li>Copyright © 2001-2003 Netscape. All rights reserved.</li> + <li>Tłumaczenie: Krzysztof Jurewicz</li> + </ul> +</div> +<div class="noinclude"> + </div> |