From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../css_basics/index.html | 272 ++++++++++++++ .../dealing_with_files/index.html | 95 +++++ .../html_basics/index.html | 223 ++++++++++++ .../learn/getting_started_with_the_web/index.html | 59 +++ .../installing_basic_software/index.html | 80 +++++ .../jak_dziala_siec/index.html | 110 ++++++ .../javascript_basics/index.html | 395 +++++++++++++++++++++ .../publishing_your_website/index.html | 124 +++++++ .../what_will_your_website_look_like/index.html | 99 ++++++ 9 files changed, 1457 insertions(+) create mode 100644 files/pl/learn/getting_started_with_the_web/css_basics/index.html create mode 100644 files/pl/learn/getting_started_with_the_web/dealing_with_files/index.html create mode 100644 files/pl/learn/getting_started_with_the_web/html_basics/index.html create mode 100644 files/pl/learn/getting_started_with_the_web/index.html create mode 100644 files/pl/learn/getting_started_with_the_web/installing_basic_software/index.html create mode 100644 files/pl/learn/getting_started_with_the_web/jak_dziala_siec/index.html create mode 100644 files/pl/learn/getting_started_with_the_web/javascript_basics/index.html create mode 100644 files/pl/learn/getting_started_with_the_web/publishing_your_website/index.html create mode 100644 files/pl/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html (limited to 'files/pl/learn/getting_started_with_the_web') diff --git a/files/pl/learn/getting_started_with_the_web/css_basics/index.html b/files/pl/learn/getting_started_with_the_web/css_basics/index.html new file mode 100644 index 0000000000..44783a7f55 --- /dev/null +++ b/files/pl/learn/getting_started_with_the_web/css_basics/index.html @@ -0,0 +1,272 @@ +--- +title: CSS podstawy +slug: Learn/Getting_started_with_the_web/CSS_basics +translation_of: Learn/Getting_started_with_the_web/CSS_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

Kaskadowe arkusze stylów CSS (ang. Cascading Style Sheets) to kod służący do nadawania wyglądu strony. CSS Podstawy przeprowadzi cię przez bazowe zagadnienia, abyś mógł zacząć modyfikować wygląd swojej strony. Odpowiemy na takie pytania jak: Jak zrobić, żeby mój tekst był czarny albo czerwony? Jak wyświetlić poszczególną zawartość strony w wybranych miejscach ekranu? Jak dekorować stronę obrazami czy nadać kolor tła?

+
+ +

Czym właściwie jest CSS?

+ +

Podobnie jak HTML, CSS nie jest językiem programowania. Nie jest jednak też językiem znaczników — jest językiem arkuszy stylów (ang. style sheet language). Oznacza to, że pozwala on selektywnie stosować style do elementów w dokumentach HTML. Na przykład, aby zaznaczyć wszystkie paragrafy na stronie HTML i zmienić w nich kolor tekstu na czerwono, należy napisać ten kod CSS:

+ +
p {
+  color: red;
+}
+ +

Sprawdźmy: wklej te trzy linie kodu do nowego pliku. Plik nazwij style.css i umieść go w katalogu styles.

+ +

Wciąż jednak musimy powiązać ten kod CSS z twoim dokumentem HTML. W przeciwnym wypadku stworzony kod CSS nie będzie miał wpływu na wygląd twojej strony. (Jeśli nie śledzisz naszego projektu od poczatku, przeczytaj Struktura plików witryny oraz HTML podstawy, żeby dowiedzieć się co wpierw należy wykonać.)

+ +
    +
  1. Otwórz plik index.html i wklej poniższy kod gdzieś w sekcji nagłówka (czyli pomiędzy elementami <head> i </head>): + + 
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    +
    2. +
  2. Zapisz plik index.html a następnie otwórz go w przeglądarce. Powinieneś móc zobaczyć coś takiego:
    3. +
+ +

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Jeśli tekst twoich akapitów jest czerwony, gratulacje! Właśnie napisałeś swój pierwszy skuteczny kod CSS.

+ +

Anatomia reguł CSS

+ +

Przyjrzyjmy się nieco bardziej szczegółowo naszemu kodowi CSS:

+ +

+ +

Cała struktura jest nazywana listą dyrektyw - reguł. Oto nazwy poszczególnych części:

+ +
+
Selektor
+
Element HTML na początku reguły. Wybiera poszczególne elementy (bądź też tylko jeden) do wystylizowania - w tym wypadku wszystkie elementy p. Aby dodać styl do innego elementu, po prostu zmień selektor;
+
Deklaracja
+
Pojedyncza reguła, taka jak color: red;, która ustala jakie właściwości elementu chcesz wystylizować.
+
Właściwości
+
Sposoby stylizowania danego elementu HTML. (W powyższym przykładzie color jest właściwością selektrora p.) W CSS wybierasz, która właściwość ma być nadana w danej deklaracji.
+
Wartość właściwości
+
Po prawej stronie właściwości za dwukropkiem mamy wartość właściwości, która wybiera jeden z wielu możliwych wyglądów dla danej właściwości (istnieje wiele wartości color oprócz red).
+
+ +

Zauważ inne ważne części składni:

+ + + +

Aby zmodyfikować wiele wartości właściwości jednocześnie, wystarczy napisać je oddzielone średnikami, np.:

+ +
p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}
+ +

Wybieranie wielu elementów

+ +

Możesz również wybrać wiele typów elementów i zastosować dla nich jeden zestaw deklaracji. Wypisz kilka selektorów oddzielonych przecinkami. Na przykład:

+ +
p,li,h1 {
+  color: red;
+}
+ +

Inne typy selektorów

+ +

Istnieje wiele innych typów selektorów. Do tej pory używaliśmy tylko selektorów elementów, które wybierają wszystkie elementy danego typu z kodu HTML. Ale możemy stworzyć bardziej szczegółowe selektory. Oto kilka powszechnych typów selektorów:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nazwa selektoraCo wybiera?Przykład
Selektor elementu (czasem nazywany selektorem tagu lub typu)Element(y) HTML o podanym typie.p
+ Wybiera elementy <p>
Selektor IDElement na stronie o podanym ID (na jednej stronie HTML możesz użyć konkretnego ID tylko raz).#my-id
+ Wybiera <p id="my-id"> lub <a id="my-id">
Selektor klasyElement(y) na stronie o podanej klasie (Tej samej klasy możesz użyć wiele razy na stronie)..my-class
+ Wybiera <p class="my-class"> oraz <a class="my-class">
Selektor atrybutuElement(y) na stronie o podanym atrybucie.img[src]
+ wybiera <img src="myimage.png"> ale nie <img>
Selektor pseudo-klasyElement(y) o określonym stanie np. najechanie myszą na elementa:hover
+ Wybiera <a>, ale tylko gdy kursor znajduje się nad elementem.
+ +

Istnieje wiele innych typów selektorów, możesz je poznać w naszym Selectors guide.

+ +

Czcionki i tekst

+ +

Teraz, gdy poznaliśmy podstawy CSS, dodajmy więcej reguł i informacji do naszego pliku style.css żeby nasz przykład wyglądał lepiej. Zacznijmy od zmiany wyglądu czcionek i tekstu.

+ +
    +
  1. Na początek, cofnij się i znajdź output from Google Fonts, który przechowałeś w bezpiecznym miejscu. Dodaj element {{htmlelement("link")}} gdzieś wewnątrz sekcji head w pliku index.html (gdziekolwiek pomiędzy tagami <head> i </head>). Linijka będzie wyglądała podobnie do: + + 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    +
    2. +
  2. Następnie, usuń istniejące reguły w pliku style.css. To był dobry test, ale czerwony tekst nie wygląda najlepiej.
    3. +
  3. Dodaj poniższy kod, zastępując linie "placeholder" z font-family wygenerowanym w Google Fonts. (font-family oznacza czcionkę lub czcionki których chcesz używać). Pierwsza reguła ustala bazową wielkość tekstu i czcionkę dla całej strony (ponieważ <html> to element-rodzic całej strony i wszystkie elementy wewnątrz niego dziedziczą ten sam font-size i font-family): + 
    html {
+  font-size: 10px; /* px oznacz 'piksele': bazowy rozmiar tekstu to teraz 10 pikseli wysokości  */
+  font-family: placeholder; /* tu powinnien być font-family wygenerowany w Google fonts */
+}
    + +
    +

    Uwaga: Wszystko w dokumencie CSS pomiędzy /* i */ jest komentarzem CSS, który przyglądarka zignoruje podczas wyświetlania strony. To miejsce dla Ciebie na notatki dotyczące tego co dzieje się w danym miejscu.

    +
    +
    4. +
  4. Teraz ustawimy rozmiar czcionki dla elementów zawierających tekst wewnątrz ciała (body) HTML: ({{htmlelement("h1")}}, {{htmlelement("li")}}, i {{htmlelement("p")}}). Wycentrujemy również tekst naszego nagłówka i ustawimy wysokość linii tekstu i odstęp między znakami dla głównej treści aby uczynić ją bardziej czytelną: + 
    h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}
    +
    5. +
+ +

Możesz dostosować wartości px na jakiekolwiek chcesz, aby uzyskać wygląd jaki chcesz, ale generalnie twoja strona powinna wyglądać podobnie jak ta:

+ +

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

+ +

Pudełka, pudełka, wszędzie pudełka

+ +

Jedną z rzeczy którą zauważysz podczas pisania CSS to, że wiele z nich dotyczy pudełek (ang. boxes) — ustawianie ich rozmiaru, koloru, pozycji etc. O większości elementów na stronie możesz myśleć jak o pudełkach stawianych jedne na drugim.

+ +

a big stack of boxes or crates sat on top of one another

+ +

Nic dziwnego, że układ CSS opiera się głównie na modelu pudełkowym (ang. box model). Każdy z bloków zajmujących miejsce na Twojej stronie ma takie właściwości:

+ + + +

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

+ +

W tej sekcji możemy także użyć:

+ + + +

Dodajmy trochę więcej CSS do naszej strony! Dodawaj nowe reguły na dole pliku i nie bój się eksperymentować ze zmianą wartości, aby zobaczyć, jak działają.

+ +

Zmiana koloru strony

+ +
html {
+  background-color: #00539F;
+}
+ +

Ten zestaw reguł ustawi kolor tła dla całej strony. Zmień powyższy kod koloru na dowolny wybrany podczas planning your site.

+ +

Sortowanie elementów body

+ +
body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}
+ +

Teraz element {{htmlelement("body")}}. Jest tu kilka deklaracji, więc przejrzyjmy je wszystkie jedna po drugiej:

+ + + +

Ustawianie i stylowanie głównego nagłówka

+ +
h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}
+ +

Być może zauważysz paskudną szparę na górze ciała strony. Dzieje się tak dlatego, że przeglądarki stosują pewne domyślne style dla elementu {{htmlelement("h1")}} (oraz innych), nawet jeżeli nie użyjesz żadnego stylu CSS! To może brzmieć jak zła koncepcja, ale chcemy by nawet nieostylowana strona wyglądała czytelnie. Aby pozbyć się luki, zmieniliśmy domyślny styl, ustawiając margin: 0;.

+ +

Następnie ustawiliśmy górny i dolny margines nagłówka na 20 pikseli i nadaliśmy tekstowi nagłówka taki sam kolor, jak kolor tła dla html.

+ +

Ciekawą właściwością, którą tutaj wykorzystaliśmy, jest text-shadow, który nadaje cień dla tekstu wewnątrz elementu. Jego cztery wartości są następujące: 

+ + + +

Ponownie, eksperymentuj z innymi wartościami i zobacz co możesz zrobić!

+ +

Centrowanie obrazka

+ +
img {
+  display: block;
+  margin: 0 auto;
+}
+ +

Wreszcie wycentrujemy obrazek żeby wyglądał lepiej. Możemy użyć ponownie triku margin: 0 auto którego użyliśmy w przypadku body, ale dodatkowo musimy zrobić coś jeszcze. Element {{htmlelement("body")}} jest blokowy (ang. block), co oznacza, że zajmuje całą dostępną przestrzeń na stronie i możesz zastosować dla niego marginesy i inne ustawienia wielkości. Z drugiej strony, obrazki są elementali liniowymi (ang.inline) i nie posiadają takich właściwości. Dlatego żeby zastosować marginesy dla grafiki musimy zmienić jej sposób wyświetlania na blokowy używając display: block;.

+ +
+

Note: Powyższe instrukcje zakładają, że używasz obrazu o szerokości mniejszej niż szerokość ustawiona dla elementu body (600 pikseli). Jeśli obraz jest większy, spowoduje to przelanie treści i rozlanie jej na resztę strony. Aby temu zapobiec możesz 1) zmniejszyć wielkość obrazu za pomocą editora graficznego, lub 2) zmniejszyć obraz przy użyciu CSS ustawiając właściwość {{cssxref("width")}} dla elementu <img> na mniejszą wartość (np., 400 px;).

+
+ +
+

Uwaga: Nie przejmuj się jeżeli jeszcze nie rozumiesz display: block; i różnicy między elementami liniowymi a blokowymi. Zrozumiesz z czasem zgłębiania wiedzy o CSS. Więcej o różnych dostępnych sposobach wyświetlania możesz znaleźć w naszym display reference page.

+
+ +

Konkluzja

+ +

Jeżeli prześledziłeś instrukcje z tego artykułu powinieneś zakończyć ze stroną wyglądającą jak ta (możesz również zobaczyć naszą wersję tutaj):

+ +

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

+ +

Jeżeli utkniesz możesz zawsze porównać swój kod z naszym gotowym przykładem na GitHub.

+ +

To naprawdę podstawowe informacje o CSS. Aby dowiedzieć się więcej sprawdź nasz CSS Learning topic.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/pl/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/pl/learn/getting_started_with_the_web/dealing_with_files/index.html new file mode 100644 index 0000000000..fe33799b70 --- /dev/null +++ b/files/pl/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -0,0 +1,95 @@ +--- +title: Struktura plików witryny +slug: Learn/Getting_started_with_the_web/Dealing_with_files +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

Strona internetowa zawiera wiele plików: pliki z treścią, kod, arkusze stylów, media, i więcej. Kiedy budujesz stronę internetową, musisz zebrać je wszystkie razem i stworzyć z nich rozsądną strukturę na swoim komputerze oraz upewnić się, że mogą się one między sobą komunikować, zanim wyślesz je na serwer hostingowy. Sekcja Struktura plików witryny omawia podstawowe kwestie jakich powinieneś być świadomy, aby zbudować racjonalną strukturę plików dla twojej strony internetowej.

+
+ +

Gdzie na twoim komputerze powinna znajdować się twoja strona internetowa?

+ +

Kiedy pracujesz lokalnie na swoim komputerze, powinieneś wszystkie pliki zwiazane z daną stroną trzymać w pojedynczym folderze, który będzie odzwierciedlał folder na serwerze, na którym zamierzasz publikować stronę.  Ten folder może się znajdować gdzie tylko chcesz, na twoim komputerze, choć raczej powinieneś go przechowywać w miejscu, które łatwo odnajdziesz. Może to być twój Pulpit czy folder domowy linuxa, albo bezpośrednio na dysku twardym bez katalogów nadrzędnych.

+ +
    +
  1. Wybierz miejsce przechowywania projektu strony. Utwórz katalog o nazwie web-projects (lub podobnej). Tu będzie się znajdował projekt twojej strony.
    2. +
  2. Wewnątrz katalogu utwórz kolejny folder do przechowywania twojej pierwszej strony internetowej. Nazwij go test-site (lub w bardziej kreatywny sposób).
    3. +
+ +

Nazewnictwo folderów i plików

+ +

Jak zauważysz, w tym artykule poprosimy cię o nazywanie folderów i plików tylko małymi literami i bez spacji w nazwie. A to dlatego, że:

+ +
    +
  1. Wiele komputerów, a w szczególności serwerów sieciowych, jest wrażliwych na wielkość liter w nazwach. Tak więc na przykłąd, jeśli umieścisz obraz z twojej strony w test-site/MyImage.jpg, a następnie w innym pliku odwołasz się do niego jako test-site/myimage.jpg, to może nie zadziałać.
    2. +
  2. Przeglądarki, serwery sieciowe oraz języki programowania nie do końca radzą sobie ze spacjami w nazwach. Na przykład, jeśli użyjesz spacji w nazwie pliku, niektóre systemy potraktują tę nazwę jako dwie nazwy dwóch plików. Niektóre serwery zastąpią spacje w nazwie symbolem "%20" (kod znaku dla spacji w URIs), w rezultacie przestaną działać wszystkie twoje odnośniki do takiego pliku. Lepiej jest stosować myślniki niż podkreślenia: my-file.html vs. my_file.html.
    3. +
+ +

Krótko mówiąc powinieneś używać myślników w nazwach plików (oczywiście jeśli chcesz używać kilkuwyrazowych nazw). Wyszukiwarka Google traktuje myślnik jako separator słów, ale podkreślenie już nie. Z tego powodu najlepiej jest wyrobić sobie nawyk pisania nazw plików i folderów małymi literami i bez spacji, i raczej nie używać myślników czy podkreśleń, chyba że wiesz co robisz. W ten sposób unikniesz już części problemów jakie możesz napotkać.

+ +

Jaką strukturę powinna mieć twoja strona internetowa?

+ +

Następnie zobaczmy jaką strukturę powinna mieć twoja strona internetowa. Najczęściej rzeczy, które będziemy mieli w każdym projekcie strony internetowej, który tworzymy, to podstawowy plik HTML index.html i foldery zawierające obrazy, pliki stylów i pliki skryptów . Stwórzmy je teraz:

+ +
    +
  1. index.html: Ten plik zawiera podstawową treść strony głównej twojej witryny, czyli tekst i obrazy jakie ludzie widzą wchodząc na twoją stronę. Przy pomocy twojego edytora tekstowego stwórz plik o nazwie index.html i zapisz go w twoim folderze projektu test-site.
    2. +
  2. katalog images: Ten folder będzie zawierał obrazy jakie użyjesz na twojej stronie. Utwórz katalog images wewnątrz folderu test-site.
    3. +
  3. katalog styles: Ten folder będzie zawierał pliki CSS do nadania wyglądu twojej strony (np. ustawieni koloru tekstu i tła strony). Utwórz katalog styles wewnątrz folderu test-site.
    4. +
  4. katalog scripts: Ten folder będzie zawierał cały JavaScript użyty do uczynienia twojej strony interaktywną (np. przyciski wczytujące dane po kliknięciu). Utwórz folder o nazwie scripts wewnątrz katalogu test-site.
    5. +
+ +
+

Uwaga: W systemie Windows, możesz napotkać na problem z wyświetlaniem nazw plików, ponieważ domyślnie włączona jest opcja folderów zwana Ukryj rozszeżenia znanych typów plików. Możesz ją wyłączyć w prosty sposób. Otwórz Eksplorator Plików, kliknij opcję w menu Organizuj a następnie  Opcje folderów i wyszukiwania. W zakładce Widok odzdnacz opcję Ukryj rozszeżenia... Po bardziej szczegółowe informacje (w zależności od twojej wersji systemu Windows) sięgnij do strony Microsoft lub po prostu poszukaj w Internecie!

+
+ +

Ścieżki do plików

+ +

Aby pliki mogły się między sobą komunikować, musisz ustawić odpowiednie ścieżki między nimi — po prostu chodzi o takie ścieżki, żeby pliki wiedziały wzajemnie, gdzie który się znajduje. Pokażemy ci o co chodzi tworząc nieco kodu w naszym pliku index.html, tak aby wyświetlał obraz jaki wybrałeś zgodnie ze wskazówkami artykułu "Jak będzie wyglądała twoja strona internetowa?"

+ +
    +
  1. Skopiuj uprzednio wybrany obrazek do katalogu images.
    2. +
  2. Otwórz plik index.html i wklej do niego poniższy kod. Nie martw się na razie tym co on oznacza - przyjżymy się jego strukturze dalej. + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <img src="" alt="My test image">
+  </body>
+</html>
    +
    3. +
  3. W linii <img src="" alt="My test image"> znajduje się kod HTML, który odpowiada za umieszczenie obrazu na twojej stronie. Musimy mu tylko wskazać, gdzie znajduje się plik z obrazem. Obrazek jest w katalogu images, który z kolei jest w tym samym folderze co index.html. Aby przejść od pliku index.html do naszego obrazu, ścieżka jaką potrzebujemy wskazać to images/your-image-filename. Na przykład, jeśli plik z obrazkiem nazywa się firefox-icon.png, ścieżką do niego jest images/firefox-icon.png.
    4. +
  4. Wstaw sieżkę do pliku we wskazanej wcześniej linii w cudzysłowie atrybutu src="".
    5. +
  5. Zapisz plik HTML i otwórz go w przeglądarce (klikając na niego dwa razy). Powinieneś zobaczyć w oknie przeglądarki swój obrazek!
    6. +
+ +

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

+ +

Kilka ogólnych reguł tworzenia ścieżek:

+ + + +

Jak narazie to wszystko co powinieneś o tym wiedzieć.

+ +
+

Uwaga: W systemie Windows w ścieżkach do plików używa się znaku backslash a nie slash, enp. C:\windows. To jest nieistotne dla HTML — nawet jeśli tworzysz strony na Windowsie, nadal powinieneś używać w ścieżkach znaku slash.

+
+ +

Co jeszcze należy zrobić?

+ +

Na razie to tyle, a twoja struktura plików i folderów powinna wyglądać mniej więcej tak:

+ +

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/pl/learn/getting_started_with_the_web/html_basics/index.html b/files/pl/learn/getting_started_with_the_web/html_basics/index.html new file mode 100644 index 0000000000..1b7835d180 --- /dev/null +++ b/files/pl/learn/getting_started_with_the_web/html_basics/index.html @@ -0,0 +1,223 @@ +--- +title: HTML podstawy +slug: Learn/Getting_started_with_the_web/HTML_basics +translation_of: Learn/Getting_started_with_the_web/HTML_basics +--- +
    +
  1. +

    {{LearnSidebar}}

    +
    2. +
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

HTML (Hypertext Markup Language) jest to kod używany do tworzenia struktury strony i jej zawartości. Na przykład treść może być uporządkowana w obrębie zestawu akapitów, listy punktowanych punktów lub tabel obrazów i danych. Jak sugeruje tytuł, ten artykuł daje podstawy do zrozumienia HTML i jego funkcji.

+
+ +

Czym właściwie jest HTML?

+ +

HTML nie jest językiem programowania; jest językiem znaczników (ang. markup language). HTML składa się z serii znaczników (tagów), których używa się do zamknięcia, opakowania różnych części treści, tak aby wyglądały i/lub działały w określony sposób. Z pomocą tagów możesz ze słów czy obrazów zrobić linki do innych stron, sprawić by były napisane kursywą, większą czcionką, wytłuścić je itd. Na przykład weźmy poniższą treść:

+ +
My cat is very grumpy
+ +

Jeśli chcemy utworzyć z niej paragraf, wystarczy użyć odpowiednich tagów:

+ +
<p>My cat is very grumpy</p>
+ +

Anatomia elementu HTML

+ +

Przyjrzyjmy się nieco dokładniej jak tworzymy paragraf.

+ +

+ +

Główne składniki naszego elementu to:

+ +
    +
  1. Tag otwierający: Znacznik ten zawiera nazwę elementu (w tym wypadku "p") otoczony parą ostrych nawiasów (znak mniejszości i większości na klawiaturze - przyp. tłum.)
    2. +
  2. Tag zamykający: Jest w zasadzie taki sam jak tag otwierajacy z wyjątkiem tego, że obowiązkowo musi zawierać znak slash przed nazwą tagu. Oznacza to, że w tym miejscu kończy się dany element. Jeśli w kodzie nie umieścisz znaku końca elementu, co jest częstym błędem poczatkujących twórców stron, może to spowodować nieoczekiwane błędy podczas wyświetlania i działania strony.
    3. +
  3. Zawartość: Po prostu treść elementu, w tym wypadku jest to tekst.
    4. +
  4. Element: Element to całość tej konstrukcji: tag otwierający plus zawartość plus tag zamykajacy.
    5. +
+ +

Elementy mogą zawierać atrybuty, np:

+ +

+ +

Atrybuty zawierają dodatkowe informacje o elemencie, które nie są widoczne dla odwiedzających stronę. W tym przykładzie class jest nazwą atrybutu, a editor-note jest jego wartością. Atrybut class pozwala nadać elementowi indentyfikator, który potem może być użyty do nadania stylu elementowi przez CSS lub do innych celów.

+ +

Atrybut zawsze powinien mieć:

+ +
    +
  1. Spację między nazwą tagu a nazwą atrybutu (lub innego atrybutu, jeśli dany element ma więcej atrybutów).
    2. +
  2. Nazwę atrybutu oraz znak równości.
    3. +
  3. Wartość podaną w cudzysłowie.
    4. +
+ +
+

Uwaga: Proste wartości atrybutów, które nie zawierają białych znaków ASCII (ani żadnego ze znaków " ' ` = < > ) mogą pozostać bez cudzysłowów, ale zaleca się używać cudysłowów dla wszystkich wartości atrybutów, ponieważ czyni to kod bardziej spójnym i zrozumiałym.

+
+ +

Zagnieżdżanie elementów

+ +

Możesz elementy umieszczać wewnąrz innych elementów kodu HTML — nazywa się to zagnieżdżaniem. Jeśli chcemy podkreślić, że nasz kot jest bardzo gderliwy, możemy otoczyć slowo "bardzo" tagiem wytluszczającym {{htmlelement("strong")}}:

+ +
<p>My cat is <strong>very</strong> grumpy.</p>
+ +

Jednak musisz upewnić się, że elementy te są odpowiednio zagnieżdżone: w powyższym przykładzie najpierw otwieramy element {{htmlelement("p")}}, następnie element {{htmlelement("strong")}}, dalej musimy zamknąć element {{htmlelement("strong")}} a dopiero potem {{htmlelement("p")}}. Poniższy przykład jest błędny:

+ +
<p>My cat is <strong>very grumpy.</p></strong>
+ +

Elementy muszą zaczynać się i kończyć we właściwy sposób, tak aby jeden zawierał się w drugim. Jeśli elementy będą niewłaściwie domknięte, jak w przykładzie wyżej, przeglądarka będzie próbowała zgadnąć co miałeś na myśli, co może prowadzić do nieoczekiwanych rezultatów. Nie rób tak!

+ +

Elementy puste

+ +

Czasem elementy nie mają zawartości i nazwyamy je elementami pustymi. Weźmy element {{htmlelement("img")}}, który używaliśmy wcześniej w naszym kodzie HTML:

+ +
<img src="images/firefox-icon.png" alt="My test image">
+ +

Element ten zawiera dwa atrybuty, ale nie posiada tagu zamykającego </img>ani żadnej treści. To dlatego, że element ten nie opakowuje żadnej treści, której miałby nadawać wygląd. Jego zadaniem jest załączenie do strony obrazka, który pojawi się na stronie.

+ +

Anatomia dokumentu HTML

+ +

Na razie tyle podstaw poszczgólnych elementów. Teraz przyjrzymy się, w jaki sposób są one łączone, aby utworzyć całą stronę HTML. Powróćmy do kodu, który umieściliśmy w naszym przykładzie index.html (który poznaliśmy po raz pierwszy w artykule Struktura plików witryny):

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <img src="images/firefox-icon.png" alt="My test image">
+  </body>
+</html>
+ +

Mamy tutaj:

+ + + +

Obrazy

+ +

Zajmijmy się teraz ponownie elementem {{htmlelement("img")}}:

+ +
<img src="images/firefox-icon.png" alt="My test image">
+ +

Jak powiedzieliśmy wcześniej, ten element odpowiada za wyświetlanie obrazu na stronie. Atrybut src (źródło - ang. source) wskazuje ścieżkę do pliku z obrazem.

+ +

Mamy również załączony atrybut alt (ang. alternative). Ten atrybut określa jaki napis powinien pojawić się na stronie, jeśli użytkownikowi nie został z jakiegoś powodu wyświetlony obraz:

+ +
    +
  1. Użytkownicy niewidzący lub z poważnymi wadami wzroku często korzystają z narzędzi nazywanymi czytnikami ekranu, które pozwalają im odczytać tekst alternatywny.
    2. +
  2. Czasem coś pójdzie nie tak i obraz nie jest wyświetlany na stronie. Na przykład spróbuj zmienić ścieżkę wewnątrz atrybutu src na błędną. Jeśli zapiszesz i ponownie załadujesz stronę, powinieneś zobaczyć coś takiego zamiast obrazu:
    3. +
+ +

+ +

Kluczowe dla atrybutu alt jest użycie dobrego opisu obrazka. Piszący tekst alternatywny powinien zapewnić czytelnikowi wystarczającą ilość informacji, aby ten mógł dobrze zrozumieć co przekazuje obraz. W tym przykładzie nasz alternatywny tekst "Mój obraz testowy" wcale nie jest dobry. Znacznie lepiej dla naszego obrazka z logo Firefoxa będzie napisać "Logo Firefoxa: płonący lis otaczający Ziemię".

+ +

Teraz spróbuj wymyślić dobre teksty alternatywne dla swojego obrazka.

+ +
+

Uwaga: Dowiedz się więcej na temat dostępności na stronie MDN's Accessibility landing page.

+
+ +

Tagowanie tekstu

+ +

W tej sekcji omowimy podstawowe znaczniki HTML do tagowania tekstu strony.

+ +

Nagłówki

+ +

Elementy nagłówków pozwalają określić, że określone części treści są nagłówkami - lub podtytułami - treści. W taki sam sposób, w jaki książka ma tytuł główny, tytuły rozdziałów i napisy, może również wyglądać dokument HTML. HTML zawiera sześć poziomów nagłówków, {{htmlelement ("h1")}} - {{htmlelement ("h6")}}, chociaż najczęściej będziesz używać tylko co najwyżej 3-4 z nich:

+ +
<h1>My main title</h1>
+<h2>My top level heading</h2>
+<h3>My subheading</h3>
+<h4>My sub-subheading</h4>
+ +

Teraz spróbuj dodać odpowiedni nagłówej do twojej strony w pliku HTML, tuż nad elementem {{htmlelement("img")}}.

+ +
+

Note: Zobaczysz, że Twój nagłówek na poziomie 1 ma już ustawiony niejawny styl. Nie używaj elementów nagłówka po to, aby uzyskać tekst większy lub pogrubiony, ponieważ są one używane z powodów semantycznych i innych przyczyn, takich jak SEO. Spróbuj utworzyć znaczącą sekwencję nagłówków na swoich stronach, bez pomijania poziomów.

+
+ +

Paragrafy

+ +

Jak wyjaśniono wcześniej, elementy {{htmlelement("p")}} służą do formatowania parafrafów tekstu; będziesz ich często używać podczas oznaczania zwykłej treści tekstowej:

+ +
<p>This is a single paragraph</p>
+ +

Dodaj do swojego tekstu na stronie jeden lub więcej paragrafów (powinieneś go mieć po lekturze artykułu Jak powinna wyglądać twoja strona internetowa?). Paragrafy umieść bezpośrednio pod elementem {{htmlelement("img")}}.

+ +

Listy

+ +

Wiele stron internetowych posiada listy, a HTML ma odpowiedni element do ich utworzenia. Tworzenie listy zawsze wymaga przynajmniej dwóch elementów. Najpopularnieszymi typami list są lista numerowana i lista wypunktowana

+ +
    +
  1. Lista wypunktowana jest rodzajem listy, gdzie kolejność jej elementów nie ma znaczenia, np. lista zakupów. Aby ją utworzyć użyj znacznika {{htmlelement("ul")}} (ang. unordered list).
    2. +
  2. Lista numerowana jest rodzajem listy, gdzie kolejność jej elementów ma znaczenie, np. przepis na coś. Do tego rodzaju listy używany jest znacznik {{htmlelement("ol")}} (ang. ordered list).
    3. +
+ +

Każdy element listy musi być umieszczony w swoim znaczniku {{htmlelement("li")}} (ang. list item).

+ +

Na przykład, jeśli chcielibyśmy utworzyć listę z poniższego paragrafu:

+ +
<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>
+ +

Możemy to zrobić w następujący sposób:

+ +
<p>At Mozilla, we’re a global community of</p>
+
+<ul>
+  <li>technologists</li>
+  <li>thinkers</li>
+  <li>builders</li>
+</ul>
+
+<p>working together ... </p>
+ +

Spróbuj dodać oba rodzaje list do swojej przykładowej strony.

+ +

Linki (odnośniki)

+ +

Odnośniki są bardzo ważne — są tym co sprawia, że Sieć jest Siecią! Aby utworzyć odnośnik musimy użyć prostego elementu — {{htmlelement("a")}} — "a" jest skrótem od angielskiego "anchor", czyli kotwica. Aby zrobić z twojego teksu w paragrafie link, wykonaj następujące czynności:

+ +
    +
  1. Wybierz jakiś tekst. My wybraliśmy "Mozilla Manifesto".
    2. +
  2. Umieść go wewnątrz elementu {{htmlelement("a")}}: + 
    <a>Mozilla Manifesto</a>
    +
    3. +
  3. Nadaj elementowi {{htmlelement("a")}} atrybut href: + 
    <a href="">Mozilla Manifesto</a>
    +
    4. +
  4. Wypełnij atrybut href odpowiednią zawartością, tj. adresem strony do jakiej twoj odnośnik ma prowadzić: + 
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
    +
    5. +
+ +

Możesz otrzymać nieoczekiwany rezultat jeśli w adresie pominiesz część https:// lub http://, zwana  protokołem. Po dodaniu linku przetestuj stronę czy odnośnik prowadzi tam gdzie chciałeś.

+ +
+

href może się wydawać niejasnym wyborem dla nazwy atrybutu. Jeśli masz problem z zapamiętaniem go, pamietaj że oznacza on hipertekstową referencję (ang. hypertext reference)

+
+ +

Jeśli tego jeszcze nie zrobiłeś, dodaj odnośnik na twojej stronie.

+ +

Podsumowanie

+ +

Jeśli podążałeś za instrukcjami zawartymi w tym artykule, obecnie twoja strona powinna wyglądać podobnie do tej poniżej (możesz ją również zobaczyć tutaj):
+
+ A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

+ +

Jeśli gdzieś po drodze utknąłeś, zawsze możesz porównać swój kod z  GitHub ukończonymi przykładami na GitHubie.

+ +

Tutaj jedynie prześlizgnęliśmy się po powierzchni HTMLa. Aby dowiedzieć się więcej przejdź do strony Nauka HTMLa .

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/pl/learn/getting_started_with_the_web/index.html b/files/pl/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..622e465103 --- /dev/null +++ b/files/pl/learn/getting_started_with_the_web/index.html @@ -0,0 +1,59 @@ +--- +title: Rozpocznij pracę z Siecią +slug: Learn/Getting_started_with_the_web +tags: + - Beginner + - CSS + - Design + - Guide + - HTML + - Index + - NeedsTranslation + - TopicStub + - publishing + - theory +translation_of: Learn/Getting_started_with_the_web +--- +
{{LearnSidebar}}
+ +
+

Rozpocznij pracę z Siecią to zwięzła seria wprowadzająca w praktyczne aspekty tworzenia stron internetowych. Skonfigurujesz narzędzia potrzebne do zbudowania prostej strony internetowej i opublikowania własnego prostego kodu.

+
+ +

Historia twojej pierwszej strony internetowej

+ +

Stworzenie profesjonalnej strony internetowej to dużo pracy, więc jeśli dopiero zaczynasz tworzenie stron internetowych, zachęcamy do rozpoczęcia od czegoś małego. Nie zbudujesz od razu drugiego Facebooka, ale nie jest trudno zbudować własną, prostą stronę internetową, więc zaczniemy od tego.

+ +

Przeglądając poniższe artykuły w sugerowanej kolejności, przejdziesz od zera do pierwszej strony internetowej. Zacznijmy naszą podróż!

+ +

Instalacja podstawowego oprogramowania

+ +

Jeśli chodzi o narzędzia do budowy strony internetowej, jest wiele do wyboru. Jeżeli dopiero zaczynasz, możesz być zdezorientowany przez szereg edytorów kodu, frameworków i narzędzi do testowania. Instalując podstawowe oprogramowanie pokazujemy ci krok po kroku, jak zainstalować tylko takie oprogramowanie, które jest Ci potrzebne do rozpoczęcia podstawowego tworzenia stron internetowych.

+ +

Jak będzie wyglądała twoja strona internetowa?

+ +

Zanim zaczniesz pisanie kodu dla swojej strony internetowej, należy ją najpierw zaplanować. Jakie informacje prezentujesz? Jakich czcionek i kolorów używasz? Jak będzie wyglądać twoja strona internetowa? Przedstawiamy prostą metodę, którą możesz zastosować, aby zaplanować treść i wygląd witryny.

+ +

Radzenie sobie z plikami

+ +

Strona składa się z wielu plików: treści tekstowych, kodu, arkuszy stylów, treści multimedialnych itp. Kiedy budujesz stronę internetową, musisz zebrać te pliki w sensowną strukturę i upewnić się, że mogą się one między sobą komunikować. Sekcja Radzenie sobie z plikami wyjaśnia, jak utworzyć sensowną strukturę plików dla swojej strony internetowej i jakich zagadnień trzeba mieć świadomość.

+ +

Podstawy HTML

+ +

Hipertekstowy język znaczników (HTML) to kod, którego używasz do strukturyzowania treści internetowych i nadawania im znaczenia i celu. Na przykład, czy zawartość mojej strony to zestaw akapitów, czy wypunktowana lista? Czy na mojej stronie znajdują się obrazy? Czy mam tabelę danych? Nie przytłaczając cię, podstawy HTML zapewniają wystarczającą ilość informacji, aby zapoznać Cię z HTML.

+ +

Podstawy CSS

+ +

Kaskadowe arkusze stylów (CSS) to kod, którego używasz do stylizacji swojej strony internetowej. Na przykład, czy chcesz, aby tekst był czarny, czy czerwony? W którym miejscu na ekranie ma być wyświetlana dana zawartość strony? Jakie obrazy i kolory tła powinny być użyte do udekorowania twojej strony? Podstawy CSS przeprowadzą Cię przez to, czego potrzebujesz, aby zacząć.

+ +

Podstawy JavaScript

+ +

JavaScript to język programowania, którego używasz do dodawania interaktywnych funkcji do swojej strony internetowej. Przykładami mogą być gry, rzeczy, które zdarzają się po naciśnięciu przycisków lub wprowadzeniu danych w formularzach, dynamiczne efekty stylizacji, animacje i wiele innych. Podstawy JavaScript dają ci wyobrażenie o tym, co jest możliwe z tym ekscytującym językiem i jak zacząć.

+ +

Publikowanie swojej strony internetowej

+ +

Po zakończeniu pisania kodu i organizowania plików, które składają się na twoją stronę internetową, musisz umieścić to wszystko w Internecie, aby ludzie mogli ją znaleźć.Publikowanie swojej witryny opisuje, jak przy minimalnym wysiłku można uzyskać prosty przykładowy kod online.

+ +

Jak działa sieć

+ +

Kiedy wchodzisz na swoją ulubioną stronę internetową, w tle dzieje się wiele skomplikowanych rzeczy, o których możesz nie wiedzieć. Sposób działania sieci określa, co dzieje się podczas przeglądania strony internetowej na komputerze.

diff --git a/files/pl/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/pl/learn/getting_started_with_the_web/installing_basic_software/index.html new file mode 100644 index 0000000000..86fd252681 --- /dev/null +++ b/files/pl/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,80 @@ +--- +title: Instalacja podstawowego oprogramowania +slug: Learn/Getting_started_with_the_web/Installing_basic_software +tags: + - Beginner + - Browser + - Learn + - Setup + - Tools + - WebMechanics + - 'l10n:priority' + - text editor +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
+ +
+

W sekcji Instalacja podstawowego oprogramowania pokazujemy, jakie narzędzia są potrzebne do podstawowego tworzenia stron internetowych i jak je prawidłowo zainstalować.

+
+ +

Jakich narzędzi używają profesjonaliści?

+ + + +

Jakich właściwie narzędzi potrzebuję na teraz?

+ +

Wygląda to na przerażającą listę, ale na szczęście można zacząć tworzyć strony internetowe, nie wiedząc nic o większości z nich. W tym artykule przedstawimy Ci tylko minimum - edytor tekstu i kilka nowoczesnych przeglądarek internetowych.

+ +

Instalacja edytora tekstowego

+ +

Prawdopodobnie masz już podstawowy edytor tekstu na swoim komputerze. Domyślnie Windows zawiera Notatnik a macOS dostarczany jest z TextEdit. Dystrybucje Linuksa różnią się od siebie; na Ubuntu jest to gedit.

+ +

W przypadku tworzenia stron internetowych, przydałby ci się jednak lepszy edytor tekstowy. Polecamy zacząć od Visual Studio Code, który jest darmowym edytorem, oferującym podglądy na żywo i podpowiedzi do kodu.

+ +

Instalacja nowoczesnych przeglądarek internetowych

+ +

Na razie zainstalujemy kilka przeglądarek internetowych, aby przetestować nasz kod. Wybierz swój system operacyjny poniżej i kliknij odpowiednie linki aby pobrać instalatory swoich ulubionych przeglądarek:

+ + + +

Zanim przejdziesz dalej, należy zainstalować co najmniej dwie z tych przeglądarek i mieć je gotowe do testów.

+ +
+

Uwaga: Internet Explorer nie jest kompatybilny z niektórymi nowoczesnymi funkcjami sieciowymi i może nie być w stanie uruchomić twojego projektu. Zazwyczaj nie musisz się martwić o to, aby twoje projekty były z nim kompatybilne, ponieważ bardzo niewiele osób nadal z niego korzysta - na pewno nie martw się o niego zbytnio podczas nauki. Czasami możesz natknąć się na projekt, który wymaga wsparcia.

+
+ +

Instalacja lokalnego serwera sieciowego

+ +

Niektóre przykłady będą musiały być uruchamiane przez serwer sieciowy, aby działały poprawnie. Możesz dowiedzieć się jak to zrobić w Jak skonfigurować lokalny serwer testowy?

+ +

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

+ +

W tym module

+ + diff --git a/files/pl/learn/getting_started_with_the_web/jak_dziala_siec/index.html b/files/pl/learn/getting_started_with_the_web/jak_dziala_siec/index.html new file mode 100644 index 0000000000..6d1a97d33c --- /dev/null +++ b/files/pl/learn/getting_started_with_the_web/jak_dziala_siec/index.html @@ -0,0 +1,110 @@ +--- +title: Jak działa Sieć +slug: Learn/Getting_started_with_the_web/Jak_dziala_Siec +tags: + - Beginner + - Client + - DNS + - HTTP + - IP + - Infrastructure + - Learn + - Server + - TCP + - 'l10n:priority' +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
+ +
+

Jak działa Sieć zapewnia uproszczony wgląd w to, co dzieje się podczas przeglądania witryny w przeglądarce internetowej na komputerze lub telefonie.

+
+ +

Teoria ta nie jest niezbędna do pisania kodu, ale na dłuższą metę zrozumienie tego, co dzieje się w tle, przynosi korzyści.

+ +

Klienci i serwery

+ +

Komputery podłączone do sieci są nazywane klientami i serwerami. Uproszczony schemat ich interakcji może wyglądać w ten sposób:

+ +

Dwa kółka reprezentujące klienta i serwer. Strzałka oznaczona jako zapytanie przechodzi z klienta do serwera, a strzałka oznaczona jako odpowiedź przechodzi z serwera do klienta.

+ + + +

Pozostałe części składowe

+ +

Klient i serwer, o których pisaliśmy powyżej, nie opowiadają całej historii. Jest wiele innych części, które są związane z tym tematem, a my opiszemy je poniżej.

+ +

Na razie, wyobraźmy sobie, że sieć to droga. Na jednym końcu tej drogi jest klient, który jest jak twój dom. Na drugim końcu drogi jest serwer, który jest sklepem, w którym chcesz coś kupić.

+ +

+ +

Oprócz klienta i serwera, musimy się również przywitać z:

+ + + +

Więc co się dokładnie dzieje?

+ +

Po wpisaniu adresu strony internetowej w przeglądarce (dla naszej analogii jest to jak chodzenie do sklepu):

+ +
    +
  1. Przeglądarka przechodzi do serwera DNS i znajduje rzeczywisty adres serwera, na którym znajduje się strona internetowa (znajduje się adres sklepu).
    2. +
  2. Przeglądarka wysyła do serwera wiadomość z żądaniem HTTP, prosząc go o przesłanie kopii strony internetowej do klienta (wchodzisz do sklepu i zamawiasz towar). Ta wiadomość i wszystkie inne dane wysyłane pomiędzy klientem a serwerem są przesyłane przez twoje połączenie internetowe przy użyciu TCP/IP.
    3. +
  3. Jeśli serwer zaakceptuje prośbę klienta, serwer wysyła do niego wiadomość "200 OK", co oznacza "Oczywiście możesz zajrzeć na tę stronę! Tutaj jest", a następnie zaczyna wysyłać pliki strony do przeglądarki w postaci serii małych kawałków zwanych pakietami danych (sklep daje Ci towar, a Ty przynosisz go z powrotem do domu).
    4. +
  4. Przeglądarka składa małe kawałki w kompletną stronę internetową i wyświetla ją Tobie (towar dociera do Twoich drzwi - nowe błyszczące rzeczy, niesamowite!).
    5. +
+ +

Wyjaśnienie DNS

+ +

Prawdziwe adresy internetowe nie są miłymi, zapadającymi w pamięć słowami, które wpisujesz do paska adresu, aby znaleźć swoje ulubione strony. Są to specjalne numery, które wyglądają tak: 63.245.215.20.

+ +

Nazywa się to {{Glossary("IP Address", "adresem IP")}} i reprezentuje on unikalną lokalizację w sieci. Jednakże, nie jest to łatwe do zapamiętania, prawda? Właśnie dlatego wynaleziono system nazw domen. Są to specjalne serwery, które dopasowują adres internetowy, który wpisujesz do przeglądarki (np. "mozilla.org") do rzeczywistego adresu strony internetowej (IP).

+ +

Do stron internetowych można dotrzeć bezpośrednio poprzez ich adresy IP. Adres IP strony internetowej można znaleźć wpisując jej domenę do narzędzia takiego jak IP Checker.

+ +

Objaśnienie pakietów

+ +

Wcześniej używaliśmy terminu "pakiety" do określenia formatu, w jakim dane są wysyłane z serwera do klienta. Co mamy tu na myśli? Zasadniczo, gdy dane są wysyłane przez sieć, są one wysyłane w postaci tysięcy małych kawałków, dzięki czemu wielu różnych użytkowników sieci może pobrać tę samą stronę w tym samym czasie. Gdyby strony internetowe były wysyłane jako pojedyncze duże kawałki, tylko jeden użytkownik mógłby pobrać jeden na raz, co oczywiście uczyniłoby sieć bardzo nieefektywną i mało przyjemną w użyciu.

+ +

Zobacz także

+ + + +

Uznanie

+ +

Zdjęcie ulicy: Street composing, autorstwa Kevin D.

+ +

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

+ +

W tym module

+ + diff --git a/files/pl/learn/getting_started_with_the_web/javascript_basics/index.html b/files/pl/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..cf62e22bb7 --- /dev/null +++ b/files/pl/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,395 @@ +--- +title: Podstawy JavaScript +slug: Learn/Getting_started_with_the_web/JavaScript_basics +tags: + - Początkujący +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
+ +
+

JavaScript to język programowania, który dodaje interaktywność do Twojej witryny (na przykład: gry, odpowiedzi po naciśnięciu przycisków lub wprowadzeniu danych do formularza, dynamiczne stylowanie, animacja). Ten artykuł pomoże Ci rozpocząć przygodę z tym ekscytującym językiem oraz przedstawi przedsmak tego, co dzięki niemu jest możliwe.

+
+ +

Czym naprawdę jest JavaScript?

+ +

{{Glossary("JavaScript")}} (w skrócie "JS") jest pełnoprawnym {{Glossary("Dynamic programming language", "dynamicznym językiem programowania")}}, który po dodaniu do dokumentu {{Glossary("HTML")}}, może dostarczyć dynamiczną zawartość do stron internetowych. Został stworzony przez Brendan'a Eich, współtwórcę projektu Mozilla, Mozilla Foundation i Mozilla Corporation.

+ +

JavaScript jest niezwykle wszechstronny. Możesz zacząć z czymś małym, z karuzelami, galeriami obrazków, zmiennymi układami strony i odpowiedziami na kliknięcia przycisków. Z większym doświadczeniem, będziesz w stanie stworzyć gry, animowane grafiki 2D i 3D, kompleksowe aplikacje oparte na bazach danych i wiele więcej!

+ +

JavaScript jest dość zwarty, ale jednocześnie bardzo elastyczny. Programiści napisali wiele różnych narzędzi z wykorzystaniem rdzenia języka JavaScript, otwierając mnóstwo dodatkowych funkcjonalności przy minimalnym wysiłku. Obejmują one:

+ + + +

Ponieważ ten artykuł ma być jedynie lekkim wprowadzeniem do JavaScript, nie będziemy mieszać Ci na tym etapie mówiąc szczegółowo o tym, jaka jest różnica między jądrem języka JavaScript, a różnymi narzędziami wymienionymi powyżej. Możesz później nauczyć się tego wszystkiego szczegółowo, w naszym JavaScript learning area i w pozostałych artykułach MDN.

+ +

Poniżej przedstawimy kilka aspektów podstaw języka, będziesz miał także okazje pobawić się kilkoma funkcjonalnościami interfejsu API przeglądarki. Baw się dobrze!

+ +

Przykład "hello world"

+ +

Powyższa sekcja może brzmieć naprawdę ekscytująco i tak powinno być — JavaScript jest jedną z najbardziej żywych technologii internetowych i kiedy zaczniesz się nią dobrze posługiwać to twoje witryny internetowe wejdą w nowy wymiar mocy i kreatywności.

+ +

Jednak uzyskanie poczucia komfortu w używaniu JavaScript jest trudniejsze niż w przypadku korzystania z HTML i CSS. Być może lepiej będzie zacząć powoli i kontynuować pracę za pomocą małych konsekwentnych kroków. Na początek pokażemy, jak dodać podstawowy kod JavaScript do Twojej strony tworząc przykład "hello world!" (standard w podstawowych przykładach programowania).

+ +
+

Ważne: Jeśli nie podążałeś za wcześniejszą częścią naszego kursu, pobierz ten przykładowy kod i użyj go jako punktu wyjścia.

+
+ +
    +
  1. Po pierwsze, przejdź do swojej strony testowej i utwórz nowy folder o nazwie „scripts” (bez cudzysłowów). Następnie w nowym folderze skryptów utwórz nowy plik o nazwie main.js. Zapisz go w folrderze scripts.
    2. +
  2. Następnie w pliku index.html wprowadź następujący element w nowej linii, tuż przed zamknięciem tagu </body>: + 
    <script src="scripts/main.js"></script>
    +
    3. +
  3. W zasadzie, ten kod działa identycznie, jak element {{htmlelement("link")}} w CSS — dodaje JavaScript do strony, więc może mieć wpływ na HTML (wraz z CSS i czymkolwiek innym na stronie).
    4. +
  4. Teraz dodaj następujący kod do pliku main.js: + 
    var myHeading = document.querySelector('h1');
+myHeading.textContent = 'Hello world!';
    +
    5. +
  5. Na koniec upewnij się, że pliki HTML i JavaScript są zapisane, a następnie załaduj index.html w przeglądarce. Powinieneś zobaczyć coś takiego:
    6. +
+ +
+

Notatka: Powód, dla którego wstawiliśmy element {{htmlelement("script")}} w dolnej części pliku HTML jest to, że elementy w HTML są ładowane przez przeglądarkę w kolejności pojawienia się ich w pliku. Jeśli JavaScript jest ładowany jako pierwszy i ma wpływać na HTML poniżej, może to nie zadziałać, ponieważ JavaScript byłby ładowany przed HTML na którym ma pracować. Dlatego umieszczenie kodu JavaScript w dolnej części strony HTML jest często najlepszą strategią.

+
+ +

Co się wydarzyło?

+ +

Twój tekst nagłówka został zmieniony na "Hello world!" przy użyciu JavaScript. Zrobiłeś to najpierw, używając funkcji zwanej {{domxref("Document.querySelector", "querySelector()")}} by chwycić referencje do nagłówka i przechowywać ją w zmiennej o nazwie myHeading. Jest to bardzo podobne do tego, co zrobiliśmy przy użyciu selektorów CSS. Kiedy chcesz coś zrobić z elementem, najpierw musisz go wybrać.

+ +

Następnie ustawiłeś wartość właściwości{{domxref("Node.textContent", "textContent")}} zmiennej myHeading (która reprezentuje zawartość nagłówka) na "Hello world!".

+ +
+

Zanotuj: Obie funkcje, których używałeś powyżej, są częścią Document Object Model (DOM) API, który pozwala na manipulowanie treścią strony.

+
+ +

Podstawy języka

+ +

Wytłumaczmy niektóre podstawowe cechy języka JavaScript, aby lepiej zrozumieć, jak to wszystko działa. Warto zauważyć, że te cechy są wspólne dla wszystkich języków programowania, więc jeśli opanujesz te podstawy, jesteś na dobrej drodze aby móc programować w czymkolwiek!

+ +
+

Ważne: W tym artykule spróbuj wprowadzać przykładowe linie kodu do konsoli JavaScript, aby zobaczyć, co się zdarzy. Więcej informacji na temat konsoli JavaScript można znaleźć w sekcji Discover browser developer tools.

+
+ +

Zmienne

+ +

{{Glossary("Variable", "Zmienne")}} są kontenerami w których można zapisywać wartości. Zacznij od zadeklarowania zmiennej za pomocą słowa kluczowego var, a następnie dowolnej nazwy, której chcesz użyć:

+ +
var myVariable;
+ +
+

Zanotuj: Średnik na końcu wiersza wskazuje, gdzie kończy się instrukcja; jest to bezwzględnie wymagane tylko w przypadku, gdy musisz oddzielić poszczególne instrukcje w jednej linii. Jednak niektórzy uważają, że dobrą praktyką jest umieszczenie ich pod koniec każdej instrukcji. Istnieją inne zasady kiedy należy, a kiedy nie powinno się ich używać — po więcej szczegółów zobacz Your Guide to Semicolons in JavaScript.

+
+ +
+

Zanotuj: Możesz dowolnie nazwać zmienną, ale istnieją pewne zastrzeżone nazwy (zobacz w tym artykule o regułach nazewnictwa zmiennych). Jeśli nie jesteś pewien, możesz sprawdzić nazwę zmiennej, aby upewnić się, czy jest prawidłowa.

+
+ +
+

Zanotuj: JavaScript rozróżnia małe i duże litery — myVariablejest inną zmienną niż myvariable. Jeśli pojawiają się problemy w kodzie, sprawdź wielkość liter!

+
+ +

Po zadeklarowaniu zmiennej możesz nadać jej wartość:

+ +
myVariable = 'Bob';
+ +

Jeśli chcesz, możesz wykonać obydwie operacje w tej samej linii:

+ +
var myVariable = 'Bob';
+ +

Możesz pobrać wartość przez wywołanie zmiennej po nazwie:

+ +
myVariable;
+ +

Po podaniu wartości zmiennej można ją później zmienić:

+ +
var myVariable = 'Bob';
+myVariable = 'Steve';
+ +

Warto zauważyć, że zmienne mają różne typy danych:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypWyjaśnieniePrzykład
{{Glossary("String")}}Sekwencja tekstu znana jako ciąg znaków. Aby potwierdzić, że zmienna jest ciągiem, należy zamknąć jej wartość w apostrofach.var myVariable = 'Bob';
{{Glossary("Number")}}Liczba. Liczb nie zamyka się w apostrofach.var myVariable = 10;
{{Glossary("Boolean")}}Prawda / Fałsz. Słowa true i false to specjalne słowa kluczowe w JS i nie potrzebują apostrofów.var myVariable = true;
{{Glossary("Array")}}Konstrukcja, która pozwala na przechowywanie wielu wartości w jednym odniesieniu.var myVariable = [1,'Bob','Steve',10];
+ Odwołaj się do każdego elementu tej tablicy:
+ myVariable[0], myVariable[1], itd.
{{Glossary("Object")}}Zasadniczo cokolwiek. Wszystko w JavaScript jest obiektem i może być przechowywane w zmiennej. Pamiętaj o tym podczas nauki.var myVariable = document.querySelector('h1');
+ Również wszystkie powyższe przykłady.
+ +

Więc dlaczego potrzebujemy zmiennych? Cóż, zmienne są potrzebne, aby zrobić cokolwiek interesującego w programowaniu. Jeśli nie moglibyśmy zmieniać wartości, to nie możnaby zrobić nic dynamicznego, jak personalizacja powitania lub zmiana wyświetlanego obrazu w galerii.

+ +

Komentarze

+ +

Możesz umieścić komentarze w kodzie JavaScript, tak samo jak w CSS:

+ +
/*
+Wszystko pomiędzy to komentarz.
+*/
+ +

Jeśli Twój komentarz nie zawiera przerw między wierszami, często łatwiej jest umieścić go za dwoma ukośnikami:

+ +
// To jest komentarz
+
+ +

Operatory

+ +

{{Glossary("Operator")}} jest symbolem matematycznym, który generuje wynik w oparciu o dwie wartości (lub zmienne). W poniższej tabeli można zobaczyć niektóre z najprostszych operatorów oraz kilka przykładów, które można wypróbować w konsoli JavaScript.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperatorWyjaśnienieSymbolePrzykład
DodawanieSłuży do dodawania dwóch liczb lub sklejenia dwóch ciągów znaków.+6 + 9;
+ "Hello " + "world!";
Odejmowanie, Mnożenie, DzielenieRobią to, co można oczekiwać od nich w podstawowej matematyce.-, *, /9 - 3;
+ 8 * 2; // mnożenie w JS jest gwiazdką
+ 9 / 3;
Przypisanie wartościWidzieliście już to: przypisuje wartość zmiennej.=var myVariable = 'Bob';
Znak równościWykonuje test sprawdzający, czy dwie wartości są sobie równe i zwraca wynik true / false (Boolean).===var myVariable = 3;
+ myVariable === 4;
Zaprzeczenie, Nie równa sięZwraca logicznie odwrotną wartość tego, co poprzedza; zmienia true w false, itd. Kiedy jest używany wraz z operatorem równości, operator negacji sprawdza, czy dwie wartości nie są równe.!, !== +

Podstawowe wyrażenie jest true, ale porównanie zwraca false, ponieważ zostało ono zanegowane:

+ +

var myVariable = 3;
+ !(myVariable === 3);

+ +

Tu testujemy "czy myVariable NIE równa się 3". To zwraca wartość false ponieważ myVariable JEST równa 3.

+ +

var myVariable = 3;
+ myVariable !== 3;

+
+ +

Istnieje wiele więcej operatorów, ale to wystarczy na razie. Jeśli chcesz zobacz pełną listę sprawdź w Expressions and operators.

+ +
+

Zanotuj: Mieszanie typów danych może powodować dziwne efekty podczas wykonywania obliczeń, dlatego należy uważać, aby prawidłowo odwoływać się do zmiennych i uzyskać spodziewane wyniki. Na przykład wprowadź "35" + "25" do konsoli. Dlaczego nie dostaniesz oczekiwanego rezultatu? Ponieważ znaki cudzysłowów zmieniają liczby w ciągi znaków, więc skończyłeś na łączeniu łańcuchów zamiast dodawać liczby. Jeśli wpiszesz, 35 + 25 otrzymasz poprawny wynik.

+
+ +

Warunki

+ +

Warunkami są struktury kodu, które pozwalają na sprawdzenie, czy wyrażenie zwraca true, czy nie, i uruchamia inny kod ujawniony przez jego wynik. Bardzo popularną formą warunku są instrukcje if ... else. Na przykład:

+ +
var iceCream = 'chocolate';
+if (iceCream === 'chocolate') {
+  alert('Yay, I love chocolate ice cream!');
+} else {
+  alert('Awwww, but chocolate is my favorite...');
+}
+ +

Wyrażenie wewnątrz if (...) jest testem — który używa operatora tożsamości (opisanego powyżej) w celu porównania zmiennej iceCream z ciągiem znaków chocolate, aby sprawdzić, czy te dwa są równe. Jeśli to porównanie zwróci true, uruchomiony zostanie pierwszy blok kodu. Jeśli porównanie nie jest prawdziwe, pierwszy blok jest pomijany, a drugi blok kodu, po wywołaniu else, jest uruchamiany.

+ +

Funkcje

+ +

{{Glossary("Function", "Funkcje")}} są sposobem na zapakowanie funkcjonalności, które chcesz wykorzystać ponownie. Gdy potrzebujesz procedury, zamiast pisać cały kod za każdym razem, możesz wywołać funkcję z nazwą funkcji. Powyżej widzieliście już niektóre zastosowania funkcji, na przykład:

+ +
    +
  1. + 
    var myVariable = document.querySelector('h1');
    +
    2. +
  2. + 
    alert('hello!');
    +
    3. +
+ +

Funkcje te, document.querySelector i alert, są wbudowane w przeglądarkę, aby używać w dowolnym momencie.

+ +

Jeśli widzisz coś, co wygląda jak nazwa zmiennej, ale ma nawiasy — () — po niej, to prawdopodobnie jest to funkcja. Funkcje często biorą {{Glossary("Argument", "argumenty")}} — bity danych potrzebne do wykonywania ich pracy. Znajdują się one w nawiasach, oddzielone przecinkami jeśli jest więcej niż jeden argument.

+ +

Na przykład, funkcja alert () powoduje pojawienie się okna podręcznego wewnątrz okna przeglądarki, ale musimy dać mu ciąg znaków jako argument, aby powiedzieć użytkownikowi o tym, co należy wyświetlić w wyskakującym okienku.

+ +

Dobrą wiadomością jest możliwość zdefiniowania własnych funkcji — w następnym przykładzie napiszemy prostą funkcję, która przyjmuje dwie liczby jako argumenty i mnoży je:

+ +
function multiply(num1,num2) {
+  var result = num1 * num2;
+  return result;
+}
+ +

Spróbuj uruchomić powyższą funkcję w konsoli, a następnie przetestuj kilka argumentów. Na przykład:

+ +
multiply(4,7);
+multiply(20,20);
+multiply(0.5,3);
+ +
+

Zanotuj: return informuje przeglądarkę o zwróceniu zmiennej result z funkcji, dzięki czemu jest ona dostępna. Jest to konieczne, ponieważ zmienne zdefiniowane wewnątrz funkcji są dostępne tylko w tych funkcjach. Jest to tak zwany {{Glossary("Scope", "zakres")}} zmiennej. (Poczytaj więcej o zakresie zmiennej.)

+
+ +

Zdarzenia

+ +

Prawdziwa interaktywność na stronie internetowej potrzebuje zdarzeń. Są to struktury kodu nasłuchające rzeczy, które dzieją się w przeglądarce i uruchamiajace kod w odpowiedzi. Najbardziej oczywistym przykładem jest zdarzenie kliknięcia, które jest uruchamiane przez przeglądarkę po kliknięciu na coś za pomocą myszy. Aby to zademonstrować, wpisz następujący kod w konsoli, a następnie kliknij na bieżącej stronie internetowej:

+ +
document.querySelector('html').onclick = function() {
+    alert('Ouch! Stop poking me!');
+}
+ +

Istnieje wiele sposobów dołączania zdarzenia do elementu. Tutaj wybieramy element {{htmlelement("html")}} i ustawiamy obsługę jego właściwości onclick równą funkcji anonimowej (tj. bezimiennej), która zawiera kod, który ma być uruchamiany.

+ +

Zauważ że

+ +
document.querySelector('html').onclick = function() {};
+ +

jest równe temu

+ +
var myHTML = document.querySelector('html');
+myHTML.onclick = function() {};
+ +

To jest po prostu krócej.

+ +

Podrasowanie naszej przykładowej strony

+ +

Omówiliśmy kilka podstawowych zasad JavaScript, dodajmy kilka ciekawych funkcji do naszej przykładowej witryny, aby zobaczyć, co jest możliwe.

+ +

Dodawanie zmieniarki obrazu

+ +

W tej sekcji dodajemy dodatkowy obraz do naszej witryny, korzystając z kilku innych funkcji DOM API, używając JavaScript, aby przełączać się między nimi, gdy klikniesz obraz.

+ +
    +
  1. Na samym początku znajdź inne zdjęcie, które chciałbyś pokazać na stronie. Upewnij się, że jest tego samego rozmiaru, co pierwsze - albo przynajmniej jak najbliżej się da.
    2. +
  2. Zachowaj zdjęcie w swoim katalogu images.
    3. +
  3. Nazwij je 'firefox2.png' (bez apostrofów).
    4. +
  4. Otwórz swój plik main.js, następnie dopisz następujący kod (jeżeli nadal znajduje się tam skrypt "witaj, świecie" - usuń go). + 
    var myImage = document.querySelector('img');
+
+myImage.onclick = function() {
+    var mySrc = myImage.getAttribute('src');
+    if(mySrc === 'images/firefox-icon.png') {
+      myImage.setAttribute ('src','images/firefox2.png');
+    } else {
+      myImage.setAttribute ('src','images/firefox-icon.png');
+    }
+}
    +
    5. +
  5. Zapisz wszystko i otwórz index.html w przeglądarce. Teraz gdy klikniesz na obrazek, zmieni on się w inny!
    6. +
+ +

Przechowujesz odwołanie do elementu {{htmlelement("img")}} w zmiennej myImage. Następnie ustawiasz dla tej zmiennej obsługę zdarzenia onclick jako funkcję bez nazwy (finkcja anonimowa). Teraz za każdym razem, gdy kliknięty zostanie ten element:

+ +
    +
  1. Pobierasz wartość atrybutu src tego obrazu.
    2. +
  2. Za pomocą wyrażenia warunkowego sprawdzasz, czy wartość src jest równa ścieżce do oryginalnego obrazu: +
      +
    1. Jeśli tak, zmienisz wartość src na ścieżkę do drugiego obrazu, zmuszając drugi obraz do załadowania do elementu {{htmlelement("img")}}.
      2. +
    2. Jeśli nie (to oznacza, że ​​już musiała się zmienić), wartość src zmienia się z powrotem na ścieżkę oryginalnego obrazu, do stanu oryginalnego.
      3. +
    +
    3. +
+ +

Dodanie spersonalizowanej wiadomości powitalnej

+ +

Następnie dodamy kolejny fragment kodu, zmieniając tytuł strony na spersonalizowaną wiadomość powitalną, gdy użytkownik po raz pierwszy odwiedzi witrynę. Ta wiadomość powitalna będzie trwała, nawet jeśli użytkownik opuści witrynę, a później wróci - zapiszemy ją za pomocą interfejsu Web Storage API. Będzie również zawierać opcję zmiany użytkownika, a zatem będziemy mogli zmienić wiadomość powitalną w dowolnym momencie.

+ +
    +
  1. W pliku index.html, dodaj następujący wiersz tuż przed elementem {{htmlelement("script")}}: + + 
    <button>Change user</button>
    +
    2. +
  2. Na końcu pliku main.js, umieść następujący kod, dokładnie tak, jak napisano — pobiera on odwołania do nowego przycisku i nagłówka, przechowując je w zmiennych: + 
    var myButton = document.querySelector('button');
+var myHeading = document.querySelector('h1');
    +
    3. +
  3. Teraz dodaj następującą funkcję, aby ustawić spersonalizowane powitanie — to jeszcze nic nie zrobi, ale poprawimy to za chwilę: + 
    function setUserName() {
+  var myName = prompt('Please enter your name.');
+  localStorage.setItem('name', myName);
+  myHeading.textContent = 'Mozilla is cool, ' + myName;
+}
    + Ta funkcja zawiera funkcję prompt(), która wyświetla okno dialogowe, przypominające komunikat alert(). Jednak ten komunikat prompt(), prosi użytkownika o wprowadzenie danych i zapisanie ich w zmiennej po naciśnięciu przycisku OK. W takim przypadku prosimy użytkownika o podanie jego nazwy. Następnie wywołujemy interfejs API o nazwie localStorage, który pozwala nam przechowywać dane w przeglądarce, a następnie je odzyskać. Używamy funkcji setItem() dla localStorage, aby utworzyć i przechować element danych o nazwie 'name', ustawiając jego wartość jako wartość zmiennej myName która zawiera dane wprowadzone przez użytkownika. Na koniec ustawiamy textContent nagłówka jako string, oraz nowo zapisaną nazwę użytkownika.
    4. +
  4. Następnie dodaj poniższy blok if ... else, który możemy nazwać kodem inicjalizacji, ponieważ tworzy strukturę aplikacji podczas pierwszego ładowania: + 
    if(!localStorage.getItem('name')) {
+  setUserName();
+} else {
+  var storedName = localStorage.getItem('name');
+  myHeading.textContent = 'Mozilla is cool, ' + storedName;
+}
    + W tym bloku najpierw używamy operatora negacji (logiczne NIE, reprezentuje znak wykrzyknika !) aby sprawdzić, czy obiekt name istnieje. Jeśli nie, to uruchamiana jest funkcja setUserName(), aby go utworzyć. Jeśli on istnieje (to znaczy, że użytkownik ustawił go podczas poprzedniej wizyty), pobieramy zapisaną nazwę za pomocą getItem() i ustawiamy textContent nagłówka jako string oraz nazwę użytkownika, podobnie jak robiliśmy to w setUserName().
    5. +
  5. Na koniec poniższą funkcję przypisujemy do zdarzenia onclick przycisku. Kiedy zostanie on kliknięty, zostanie uruchomiona funkcja setUserName(). Dzięki temu użytkownik może ustawić nową nazwę, kiedy chce, naciskając przycisk: + 
    myButton.onclick = function() {
+  setUserName();
+}
+
    +
    6. +
+ +

Teraz, kiedy po raz pierwszy odwiedzisz witrynę, poprosi ona o podanie nazwy użytkownika, a następnie otrzymasz spersonalizowaną wiadomość. Możesz zmienić nazwę w dowolnym momencie, naciskając przycisk. Dodatkowym bonusem jest to, że nazwa utrzymuje się po zamknięciu strony, zachowując spersonalizowaną wiadomość przy następnym otwarciu strony! Dzieje się tak, ponieważ nazwa przechowywana jest w localStorage.

+ +

Wniosek

+ +

Jeśli wykonałeś wszystkie instrukcje zawarte w tym artykule, powinieneś otrzymać stronę, która wygląda mniej więcej tak (możesz również zobaczyć naszą wersję tutaj):

+ +

+ +

Jeśli utkniesz, możesz porównać swoją pracę z naszym gotowym przykładowym kodem na GitHub.

+ +

Ledwo zarysowaliśmy powierzchnię JavaScript. Jeśli lubisz grać i chcesz posunąć się jeszcze dalej, przejdź do naszego następnego tematu kursu JavaScript.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

diff --git a/files/pl/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/pl/learn/getting_started_with_the_web/publishing_your_website/index.html new file mode 100644 index 0000000000..ac173eef00 --- /dev/null +++ b/files/pl/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -0,0 +1,124 @@ +--- +title: Publikacja strony internetowej +slug: Learn/Getting_started_with_the_web/Publishing_your_website +tags: + - GitHub + - Początkujący + - Silnik Aplikacji Google + - Uczyć się + - serwer internetowy + - sieć +translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
+ +
+

Once you finish writing the code and organizing the files that make up your website, you need to put it all online so people can find it. This article explains how to get your simple sample code online with little effort.

+
+ +

Jakie są możliwości?

+ +

Opublikowanie strony internetowej jest tematem złożonym, ponieważ istnieje wiele sposobów, aby to osiągnąć. W tym artykule nie probujemy udokumentować wszystkie możliwe metody. Zamiast tego wyjaśniamy zalety i wady trzech podejść, które są praktyczne dla początkujących. Następnie przechodzimy przez jedną metodę, która może działać od razu dla wielu użytkowników.

+ +

Getting hosting and a domain name

+ +

To have more control over content and website appearance, most people choose to buy web hosting and a domain name:

+ + + +

Many professional websites go online this way.

+ +

In addition, you will need a {{Glossary("FTP", "File Transfer Protocol (FTP)")}} program (see How much does it cost: software for more details) to actually transfer the website files over to the server. FTP  programs vary widely, but generally, you have to connect to your web server using details provided by your hosting company (typically username, password, hostname). Then the program shows you your local files and the web server's files in two windows, and provides a way for you to transfer files back and forth.

+ +

+ +

Tips for finding hosting and domains

+ + + +

Using an online tool like GitHub or Google App Engine

+ +

Some tools let you publish your website online:

+ + + +

These options are usually free, but you may outgrow the limited feature-set.

+ +

Using a web-based IDE such as CodePen

+ +

There are a number of web apps that emulate a website development environment, allowing you to enter HTML, CSS and JavaScript, and then display the result of that code as a website — all in one browser tab. Generally speaking, these tools are relatively easy, great for learning, good for sharing code (for example, if you want to share a technique with or ask for debugging help from colleagues in a different office), and free (for basic features). They host your rendered page at a unique web address. However, the features are limited, and these apps usually don't provide hosting space for assets (like images).

+ +

Try playing with some of these examples to find out which one works best for you:

+ + + +

+ +

Publishing via GitHub

+ +

Now let's examine how to easily publish your site via GitHub Pages.

+ +
    +
  1. First of all, sign up for GitHub and verify your email address.
    2. +
  2. Next, you need to create a repository to store files.
    3. +
  3. On this page, in the Repository name box, enter username.github.io, where username is your username. For example, our friend Bob Smith would enter bobsmith.github.io.
    + Check the "Initialize this repository with a README" box. Then click Create repository.
    4. +
  4. Drag and drop the content of your website folder into your repository. Then click Commit changes.
    + +
    +

    Note: Make sure your folder has an index.html file.

    +
    +
    5. +
  5. +

    Navigate your browser to username.github.io to see your website online. For example, for the username chrisdavidmills, go to chrisdavidmills.github.io.

    + +
    +

    Note: It may take a few minutes for your website to go live. If your website does not display immediately, wait a few minutes. Try again.

    +
    +
    6. +
+ +

To learn more, see GitHub Pages Help.

+ +

Further reading

+ + + +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

+ +

W tym module

+ + diff --git a/files/pl/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/pl/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html new file mode 100644 index 0000000000..da94d8989d --- /dev/null +++ b/files/pl/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -0,0 +1,99 @@ +--- +title: Jak będzie wyglądała twoja strona internetowa? +slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like +tags: + - Assets + - Beginner + - Composing + - Content + - Deprecated + - Design + - Fonts + - Learn + - Simple + - 'l10n:priority' + - step by step +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
+ +

Jak będzie wyglądać twoja strona internetowa? Omawia prace planistyczne i projektowe, które trzeba wykonać przed rozpoczęciem pisania kodu, w tym "Jakie informacje zawiera moja strona internetowa?", "Jakich czcionek i kolorów chcę użyć?" oraz "Co robi moja strona?".

+ +
+

Pierwsza sprawa: planowanie

+ +

Zanim cokolwiek zrobisz, potrzebujesz kilku pomysłów. Co właściwie powinna robić twoja strona? Strona internetowa może robić w zasadzie wszystko, ale przy pierwszej próbie lepiej zachować prostotę. Zaczniemy od stworzenia prostej strony internetowej z nagłówkiem, obrazem i kilkoma akapitami.

+ +

Na początek, musisz odpowiedzieć sobie na te pytania:

+ +
    +
  1. O czym jest twoja strona internetowa? Lubisz psy, Nowy York albo Pac-Mana?
    2. +
  2. Jakie informacje prezentujesz na ten temat? Napisz tytuł i kilka akapitów i pomyśl o obrazku, który chcesz pokazać na swojej stronie.
    3. +
  3. Jak wygląda twoja strona internetowa, w prostych, ogólnych założeniach. Jaki jest kolor tła? Jaka czcionka jest odpowiednia: formalna, kreskówkowa, pogrubiona i donośna, subtelna?
    4. +
+ +
+

Uwaga: Złożone projekty wymagają dokładnych wytycznych, które zagłębiają się we wszystkie szczegóły dotyczące kolorów, czcionek, odstępów między elementami na stronie, odpowiedniego stylu pisania itd. Nazywa się to czasem przewodnikiem projektanta, systemem projektowania lub księgą marki, a przykład można zobaczyć w systemie projektowania Firefox Photon Design System.

+
+ +
+

Szkicowanie twojego projektu

+ +

Następnie złap za ołówek i papier i naszkicuj z grubsza, jak chcesz, aby twoja strona wyglądała. Na pierwszej prostej stronie internetowej, nie ma zbyt wiele do szkicowania, ale należy już teraz wyrobić sobie ten nawyk. To naprawdę pomaga — nie musisz być jak Van Gogh!

+ +

+ +
+

Uwaga: Nawet przy prawdziwych, skomplikowanych stronach internetowych, zespoły projektowe zazwyczaj rozpoczynają od szkiców wstępnych na papierze, a następnie budują cyfrowe makiety przy użyciu edytora graficznego lub technologii sieciowych.

+ +

W skład zespołów webowych często wchodzi zarówno grafik, jak i projektant {{Glossary("UX", "doświadczeń użytkownika")}} (UX). Graficy przygotowują wizualizacje strony internetowej. Projektanci UX mają nieco bardziej abstrakcyjną rolę w zajmowaniu się tym, jak użytkownicy będą doświadczać i wchodzić w interakcję ze stroną internetową.

+
+ +
+

Dobieranie zasobów

+ +

W tym momencie warto zacząć kompletować treść, która ma pojawić się na twojej stronie.

+ +

Tekst

+ +

Nadal powinieneś mieć te kilka paragrafów i tytuł przygotowany wcześniej. Miej je w zanadrzu.

+ +

Kolor motywu strony

+ +

Aby wybrać kolor, użyj tej strony, przygotowanej przez W3Schools i znajdź kolor, jaki ci się podoba. Kiedy klikniesz na wybrany kolor, zobaczysz dziwny, sześciocyfrowy kod, jak np. #660066. To jest tzw. kod hexadecymalny (ang. hex code), który reprezentuje twój kolor. Na razie skopiuj go w jakieś bezpieczne miejsce.

+ +

+ +

Obrazy

+ +

Aby wybrać jakiś obraz, odwiedź Grafikę Google i znajdź coś, co ci odpowiada.

+ +
    +
  1. Kiedy wybierzesz jakiś obraz, kliknij na niego aby zobaczyć go w większym rozmiarze.
    2. +
  2. Kliknij na obraz prawym klawiszem myszy (Ctrl + klik na Macu), wybierz Zapisz obraz jako... i wybierz miejsce na komputerze, gdzie chcesz go zapisać. Możesz też skopiować adres URL obrazu, z paska adresowego twojej przeglądarki, aby mieć go pod ręką i skorzystać z niego w przyszłości
    3. +
+ +

+ +

Pamiętaj jednak o tym, że większość obrazów w internecie, również tych w Grafice Google, jest chronione prawami autorskimi. Żeby zminimalizować prawdopodobieństwa naruszenia czyichś praw, możesz skorzystać z narzędzi filtrowania Google. Kliknij w przycisk Narzędzia, następnie w Prawa użytkowania i wybierz Oznaczone do ponownego wykorzystania

+ +

+ +

Czcionki

+ +

Aby wybrać czcionkę:

+ +
    +
  1. Odwiedź witrynę Google Fonts i poszukaj takiej czcionki, która ci odpowiada. Aby ułatwić sobie wyszukiwanie, możesz skorzystać z filtrów, które znajdują się po prawej stronie.
    2. +
  2. Kliknij znaczek plusa obok nazwy czcionki, która ci się podoba.
    3. +
  3. Kliknij na panel, który pojawi się na dole strony.
    4. +
  4. Skopiuj kod, który się pojawił i zapisz go dla późniejszego użycia
    5. +
+ +

+ +

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}

-- cgit v1.2.3-54-g00ecf