From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pl/learn/html/howto/index.html | 155 +++++++++++++++++++++ .../html/howto/use_data_attributes/index.html | 82 +++++++++++ 2 files changed, 237 insertions(+) create mode 100644 files/pl/learn/html/howto/index.html create mode 100644 files/pl/learn/html/howto/use_data_attributes/index.html (limited to 'files/pl/learn/html/howto') 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 +--- +
{{LearnSidebar}}
+ +

The following links point to solutions to common everyday problems you'll need to solve with HTML.

+ +
+
+

Basic structure

+ +

The most basic application of HTML is document structure. If you're new to HTML you should start with this.

+ + + +

Basic text-level semantics

+ +

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.

+ + +
+ +
+ + +

One of the main reasons for HTML is make navigation easy with {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:

+ + + +

Images & multimedia

+ + + +

Scripting & styling

+ +

HTML only sets up document structure. To solve presentation issues, use {{glossary("CSS")}}, or use scripting to make your page interactive.

+ + + +

Embedded content

+ + +
+
+ +

Uncommon or advanced problems

+ +

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:

+ +
+
+

Forms

+ +

Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our full dedicated guide. Here is where you should start:

+ + + +

Tabular information

+ +

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:

+ + + +

Data representation

+ + + +

Interactivity

+ + +
+ +
+

Advanced text semantics

+ + + +

Advanced images & multimedia

+ + + +

Internationalization

+ +

HTML is not monolingual. It provides tools to handle common internationalization issues.

+ + + +

Performance

+ + +
+
+ +

     

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 +--- +
+ + +

{{LearnSidebar}}
+ HTML5 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. Atrybuty data-* 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()")}}.

+
+ +

Składnia HTML

+ +

Składnia jest prosta. Jakikolwiek atrybut, którego nazwa zaczyna się od data- jest atrybutem danych. Powiedzmy, że masz element taki jak article, w którym chcesz przechowywać dodatkowe dane. W tym celu możesz użyć atrybutu data :

+ +
<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+...
+</article>
+ +

Dostęp w JavaScript

+ +

Odczytanie wartości tych atrybutów w JavaScript 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")}}.

+ +

By odczytać atrybut data przez obiekt dataset, użyj części nazwy atrybutu zaraz po data- (pauzy zamieniane są na camelCase).

+ +
var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"
+ +

Każda wartość jest łańcuchem znaków i może zostać odczytania i zapisana. W powyższym przykładzie, użycie article.dataset.columns = 5 zamieni wartość tego atrybutu na "5".

+ +

Dostęp w CSS

+ +

Warto zwrócić uwagę, że atrybuty danych to zwyczajne atrybuty HTML, więc można się do nich dostać w CSS-ie. By np. pokazać zawartość takiego atrybutu można użyć content w CSS z funkcją {{cssxref("attr")}}:

+ +
article::before {
+  content: attr(data-parent);
+}
+ +

Możesz też użyć selektorów atrybutu w CSS by zmienić styl głównego elementu w zależności od wartości atrybutów danych:

+ +
article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}
+ +

Możesz zobaczyć jak to działa w tym przykładzie na JSBin.

+ +

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 to nagranie dla przykładu użycia wygenerowanej treści i przejść w CSS-ie (przykład na JSBin).

+ +

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.

+ +

Problemy

+ +

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.

+ +

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 nie wspierają obiektu dataset. By wykorzystywać atrybuty danych w IE 10 i wcześniejszych wersach, musisz użyć {{domxref("Element.getAttribute", "getAttribute()")}}. Dodatkowo wydajność czytania atrybutów danych jest gorsza od trzymania danych w zwyczajnych obiektach JS.

+ +

Pomimo to, atrybuty danych są świetnym rozwiązaniem dla obsługi meta danych powiązanych z elementami HTML.

+ +

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).

+ +

Zobacz też

+ + -- cgit v1.2.3-54-g00ecf