initial commit

2 files changed, 237 insertions, 0 deletions

diff --git a/files/pl/learn/html/howto/index.html b/files/pl/learn/html/howto/index.html
new file mode 100644
index 0000000000..5343bdbaad
--- /dev/null
+++ b/files/pl/learn/html/howto/index.html
@@ -0,0 +1,155 @@
+---
+title: Use HTML to solve common problems
+slug: Learn/HTML/Howto
+tags:
+  - CodingScripting
+  - HTML
+  - NeedsTranslation
+  - TopicStub
+translation_of: Learn/HTML/Howto
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">The following links point to solutions to common everyday problems you'll need to solve with HTML.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Basic_structure">Basic structure</h3>
+
+<p>The most basic application of HTML is document structure. If you're new to HTML you should start with this.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">How to create a basic HTML document</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">How to divide a webpage into logical sections</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">How to set up a proper structure of headings and paragraphs</a></li>
+</ul>
+
+<h3 id="Basic_text-level_semantics">Basic text-level semantics</h3>
+
+<p>HTML specializes in providing semantic information for a document, so HTML answers many questions you might have about how to get your message across best in your document.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">How to create list of items with HTML</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">How to stress or emphasize content</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">How to indicate that text is important</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code">How to display computer code with HTML</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions">How to annotate images and graphics</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">How to mark abbreviations and make them understandable</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations">How to add quotations and citations to webpages</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">How to define terms with HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Hyperlinks">Hyperlinks</h3>
+
+<p>One of the main reasons for HTML is make navigation easy with {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">How to create a hyperlink</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">How to create a table of contents with HTML</a></li>
+</ul>
+
+<h3 id="Images_multimedia">Images &amp; multimedia</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">How to add images to a webpage</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">How to add video content to a webpage</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">How to add audio content to a webpage</a></li>
+</ul>
+
+<h3 id="Scripting_styling">Scripting &amp; styling</h3>
+
+<p>HTML only sets up document structure. To solve presentation issues, use {{glossary("CSS")}}, or use scripting to make your page interactive.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">How to use CSS within a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">How to use JavaScript within a webpage</a></li>
+</ul>
+
+<h3 id="Embedded_content">Embedded content</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">How to embed a webpage within another webpage</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements">How to add Flash content within a webpage</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Uncommon_or_advanced_problems">Uncommon or advanced problems</h2>
+
+<p>Beyond the basics, HTML is very rich and offers advanced features for solving complex problems. These articles help you tackle the less common use cases you may face:</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Forms">Forms</h3>
+
+<p>Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our <a href="/en-US/docs/Web/Guide/HTML/Forms">full dedicated guide</a>. Here is where you should start:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">How to create a simple Web form</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">How to structure a Web form</a></li>
+</ul>
+
+<h3 id="Tabular_information">Tabular information</h3>
+
+<p>Some information, called tabular data, needs to be organized into tables with columns and rows. It's one of the most complex HTML structures, and mastering it is not easy:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">How to create a data spreadsheet</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">How to make HTML tables accessible</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">How to optimize HTML table rendering</a></li>
+</ul>
+
+<h3 id="Data_representation">Data representation</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">How to represent numeric values with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">How to use data attributes</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">How to associate human readable content with arbitrary computer data structures</a></li>
+</ul>
+
+<h3 id="Interactivity">Interactivity</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">How to create collapsible content with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">How to add context menus to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">How to create dialog boxes with HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Advanced_text_semantics">Advanced text semantics</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">How to take control of HTML line breaking</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">How to mark changes (added and removed text)</a></li>
+</ul>
+
+<h3 id="Advanced_images_multimedia">Advanced images &amp; multimedia</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">How to add responsive image to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">How to add vector image to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">How to add a hit map on top of an image</a></li>
+</ul>
+
+<h3 id="Internationalization">Internationalization</h3>
+
+<p>HTML is not monolingual. It provides tools to handle common internationalization issues.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">How to add multiple languages into a single webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">How to handle Japanese ruby characters</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">How to display time and date with HTML</a></li>
+</ul>
+
+<h3 id="Performance">Performance</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages">How to author fast-loading HTML pages</a></li>
+</ul>
+</div>
+</div>
+
+<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> </p>
diff --git a/files/pl/learn/html/howto/use_data_attributes/index.html b/files/pl/learn/html/howto/use_data_attributes/index.html
new file mode 100644
index 0000000000..9cd0b47a1c
--- /dev/null
+++ b/files/pl/learn/html/howto/use_data_attributes/index.html
@@ -0,0 +1,82 @@
+---
+title: Używanie atrybutów danych
+slug: Learn/HTML/Howto/Use_data_attributes
+tags:
+  - Atrybuty data
+  - HTML5
+  - Web
+translation_of: Learn/HTML/Howto/Use_data_attributes
+---
+<div>
+
+
+<p>{{LearnSidebar}}<br>
+ <a href="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> został zaprojektowany z myślą o rozszerzalności dla danych, które powinny być powiązane z konkretnym elementem, ale nie muszą mieć określonego znaczenia. <a href="/en-US/docs/Web/HTML/Global_attributes#attr-dataset">Atrybuty <code>data-*</code></a> pozwalają nam przechowywać dodatkowe informacje w standardowych, semantycznych elementach HTML bez zbędnych obejść takich jak niestandardowe atrybuty, dodatkowe właściwości w DOMie, lub używanie {{domxref("Node.setUserData()")}}.</p>
+</div>
+
+<h2 id="Składnia_HTML">Składnia HTML</h2>
+
+<p>Składnia jest prosta. Jakikolwiek atrybut, którego nazwa zaczyna się od <code>data-</code> jest atrybutem danych. Powiedzmy, że masz element taki jak <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">article</span></font>, w którym chcesz przechowywać dodatkowe dane. W tym celu możesz użyć atrybutu <code>data</code> :</p>
+
+<pre class="brush: html">&lt;article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars"&gt;
+...
+&lt;/article&gt;</pre>
+
+<h2 id="Dostęp_w_JavaScript">Dostęp w JavaScript</h2>
+
+<p>Odczytanie wartości tych atrybutów w <a href="/en-US/docs/Web/JavaScript">JavaScript</a> jest także bardzo proste. Mógłbyś użyć {{domxref("Element.getAttribute", "getAttribute()")}} podając pełną nazwę HTML atrybutów by je odczytać, jednakże standard wskazuje na łatwiejszą metodę: {{domxref("DOMStringMap")}} można odczytać przez właściwość {{domxref("HTMLElement.dataset", "dataset")}}.</p>
+
+<p>By odczytać atrybut <code>data</code> przez obiekt <code>dataset</code>, użyj części nazwy atrybutu zaraz po <code>data-</code> (pauzy zamieniane są na camelCase).</p>
+
+<pre class="brush: js">var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"</pre>
+
+<p>Każda wartość jest łańcuchem znaków i może zostać odczytania i zapisana. W powyższym przykładzie, użycie <code>article.dataset.columns = 5</code> zamieni wartość tego atrybutu na <code>"5"</code>.</p>
+
+<h2 id="Dostęp_w_CSS">Dostęp w CSS</h2>
+
+<p>Warto zwrócić uwagę, że atrybuty danych to zwyczajne atrybuty HTML, więc można się do nich dostać w <a href="/en-US/docs/Web/CSS">CSS-ie</a>. By np. pokazać zawartość takiego atrybutu można użyć <a href="/en-US/docs/Web/CSS/content">content</a> w CSS z funkcją {{cssxref("attr")}}:</p>
+
+<pre class="brush: css">article::before {
+  content: attr(data-parent);
+}</pre>
+
+<p>Możesz też użyć <a href="/en-US/docs/Web/CSS/Attribute_selectors">selektorów atrybutu</a> w CSS by zmienić styl głównego elementu w zależności od wartości atrybutów danych:</p>
+
+<pre class="brush: css">article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}</pre>
+
+<p>Możesz zobaczyć jak to działa <a href="http://jsbin.com/ujiday/2/edit">w tym przykładzie na JSBin</a>.</p>
+
+<p>Atrybuty danych można także używać do przechowywania danych, które stale się zmieniają, jak np. wyniki w grze. Używając selektorów CSS oraz JavaScript pozwala uzyskać fajne efekty bez pisania żmudnych procedur wyświetlania. Zobacz <a href="http://www.youtube.com/watch?v=On_WyUB1gOk">to nagranie</a> dla przykładu użycia wygenerowanej treści i przejść w CSS-ie (<a href="http://jsbin.com/atawaz/3/edit">przykład na JSBin</a>).</p>
+
+<p>Wartości tych atrybutów to łańcuchy znakow. Wartości numeryczne należy opakować w cudzysłów w selektorze by zostały one uwzględnione.</p>
+
+<h2 id="Problemy">Problemy</h2>
+
+<p>Nie należy przechowywać w atrybutach danych treści, które powinny być widoczne dla użytkownika, ponieważ programy ułatwiające dostęp nie będą mogły się do nich dostać. Ponadto wyszukiwarki mogą nie indeksować wartości atrybutów danych.</p>
+
+<p>Najważniejszym problemem jaki należy wziąć pod uwagę to wydajność i wsparcie w  przeglądarce Internet Explorer. Internet Explorer 11+ wspiera standard atrybutu danych, ale wcześniejsze wersje <a href="http://caniuse.com/#feat=dataset">nie wspierają obiektu <code>dataset</code></a>. By wykorzystywać atrybuty danych w IE 10 i wcześniejszych wersach, musisz użyć {{domxref("Element.getAttribute", "getAttribute()")}}. Dodatkowo <a href="http://jsperf.com/data-dataset">wydajność czytania atrybutów danych</a> jest gorsza od trzymania danych w zwyczajnych obiektach JS.</p>
+
+<p>Pomimo to, atrybuty danych są świetnym rozwiązaniem dla obsługi meta danych powiązanych z elementami HTML.</p>
+
+<p>W Firefox 49.0.2 (i być może w nowszych lub starszych wersjach), atrybuty danych które przekraczają 1022 znaków nie zostaną odczytane przez Javascript (EcmaScript 4).</p>
+
+<h2 id="Zobacz_też">Zobacz też</h2>
+
+<ul>
+ <li>Ten artykuł jest oparty na <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/" title="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Using data attributes in JavaScript and CSS pochodzącego z hacks.mozilla.org</a>.</li>
+ <li>Atrybuty są także wspierane w SVG 2; zobacz {{domxref("SVGElement.dataset")}} i {{SVGAttr("data-*")}}.</li>
+ <li><a href="http://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a> (Sitepoint)</li>
+</ul>