From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- .../css_basics/index.html | 273 ++++++++++++++ .../dealing_with_files/index.html | 101 ++++++ .../how_the_web_works/index.html | 94 +++++ .../html_basics/index.html | 214 +++++++++++ .../learn/getting_started_with_the_web/index.html | 64 ++++ .../installing_basic_software/index.html | 63 ++++ .../javascript_basics/index.html | 401 +++++++++++++++++++++ .../publishing_your_website/index.html | 111 ++++++ .../what_will_your_website_look_like/index.html | 118 ++++++ .../index.html" | 164 +++++++++ 10 files changed, 1603 insertions(+) create mode 100644 files/uk/learn/getting_started_with_the_web/css_basics/index.html create mode 100644 files/uk/learn/getting_started_with_the_web/dealing_with_files/index.html create mode 100644 files/uk/learn/getting_started_with_the_web/how_the_web_works/index.html create mode 100644 files/uk/learn/getting_started_with_the_web/html_basics/index.html create mode 100644 files/uk/learn/getting_started_with_the_web/index.html create mode 100644 files/uk/learn/getting_started_with_the_web/installing_basic_software/index.html create mode 100644 files/uk/learn/getting_started_with_the_web/javascript_basics/index.html create mode 100644 files/uk/learn/getting_started_with_the_web/publishing_your_website/index.html create mode 100644 files/uk/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html create mode 100644 "files/uk/learn/getting_started_with_the_web/\321\226\320\275\321\202\320\265\321\200\320\275\320\265\321\202_\321\202\320\260_\320\262\320\265\320\261-\321\201\321\202\320\260\320\275\320\264\320\260\321\200\321\202\320\270/index.html" (limited to 'files/uk/learn/getting_started_with_the_web') diff --git a/files/uk/learn/getting_started_with_the_web/css_basics/index.html b/files/uk/learn/getting_started_with_the_web/css_basics/index.html new file mode 100644 index 0000000000..61069ad322 --- /dev/null +++ b/files/uk/learn/getting_started_with_the_web/css_basics/index.html @@ -0,0 +1,273 @@ +--- +title: Основи CSS +slug: Learn/Getting_started_with_the_web/CSS_basics +tags: + - CSS + - Веб + - Навчання + - Початківцям + - Стилізація +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")}}
+ +
+

Cascading Stylesheets (CSS, каскадні таблиці стилів) — це код, що використовується для стилізації сайту. В Основах CSS надається інформація про стилізацію для початківців. Ми відповімо на такі питання: яким чином зробити текст чорним або червоним? Як розмістити контент саме у тому місці, де ми хочемо його бачити на сторінці? Як задавати фонові кольори та зображення?

+
+ +

Що таке CSS насправді?

+ +

Як і HTML, CSS не є справжньою мовою програмування. Це лише мова таблиць стилів, яка дозволяє задавати стилі обраним елементам у HTML документах. Наприклад, для того, щоб вибрати усі параграфи на HTML сторінці та зробити колір їхнього тексту червоним, потрібно написати такий CSS:

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

Давайте спробуємо: вставте ці три рядки CSS у новий файл у вашому редакторі коду, та збережіть файл як style.css у вашій теці styles.

+ +

Окрім того, нам необхідно приєднати CSS до вашого HTML документу, інакше стилі CSS не вплинуть на те, як браузер відобразить HTML документ. (Якщо ви щойно приєдналися до нашого проекту, прочитайте Роботу з файлами та Основи HTML щоб дізнатися, що необхідно зробити на початку.) Відкрийте ваш файл index.html та вставте наступний рядок кудись у head, між тегами <head> і </head>:

+ +
    +
  1. + 
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    +
    2. +
  2. Збережіть index.html та відкрийте його у вашому браузері. Ви побачите щось на зразок наведеного зображення:
    3. +
+ +

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Якщо текст ваших параграфів став червоним, вітаємо! Ви щойно написали ваш перший CSS!

+ +

Анатомія правила CSS

+ +

Подивимось на попередній CSS більш детально:

+ +

+ +

Вся структура називається "rule set" — "набір правил" (частіше, скорочено, "правило"). Його частини також мають свої назви:

+ +
+
Selector — Селектор
+
Назва елементу HTML на початку правила. Селектор вибирає елемент чи елементи, які будуть стилізовані (у нашому випадку, елементи p). Для стилізації інших елементів просто змініть селектор.
+
Declaration — Визначення (декларація)
+
Одне правило на зразок color: red; вказує, яку властивість елементу ви бажаєте стилізувати.
+
Properties — Властивості
+
Шляхи, якими ви можете стилізувати даний HTML елемент. (У цьому випадку, color — це властивість елементів p). У CSS ви обираєте властивості, які хочете змінити у вашому правилі.
+
Property value — Значення властивості
+
Праворуч від властивості, після двокрапки, ми вказуємо значення властивості, обираючи з багатьох можливих значень для наданої властивості (є багато інших значень властивості color окрім red).
+
+ +

Зверніть увагу на інші важливі частини синтаксису:

+ + + +

Отже, для того, щоб змінити декілька значень властивостей одночасно, їх достатньо записати, розділяючи крапкою з комою, наприклад:

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

Вибір багатьох елементів одночасно

+ +

Ви також можете вибрати декілька типів елементів та застосувати один набір правил для них усіх. Додайте декілька селекторів, розділяючи їх комою, наприклад:

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

Різні типи селекторів

+ +

Є велика кількість різних типів селекторів. Вище ми розглянули лише селектори елементів, які вибирають всі елементи заданого типу у наданих HTML документах. Але ми можемо застосовувати більш специфічні селектори. Подивіться на найбільш розповсюджені типи селекторів:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Назва селекторуЩо він вибираєПриклад
Селектор елементу (іноді називають селектором тегу)Всі HTML елементи даного типуp
+ Вибирає <p>
Селектор по IDЕлемент на сторінці, який має заданий ID (на HTML сторінці не може бути декілька елементів з однаковими ID).#my-id
+ Вибирає <p id="my-id"> чи <a id="my-id">
Селектор по класуЕлементи на сторінці, які мають задані класи (на сторінці можуть бути елементи з однаковими класами)..my-class
+ Вибирає <p class="my-class"> та <a class="my-class">
Селектор по атрибутуЕлементи на сторінці із вказаним атрибутомimg[src]
+ Вибирає <img src="myimage.png"> але не <img>
Селектори псевдокласівВказані елементи, але тільки тоді, коли вони знаходяться у вказаному стані, наприклад, коли на них наводять курсор миші.a:hover
+ Вибирає <a>, але тільки коли курсор миші вказує на посилання.
+ +

Інші селектори ви можете побачити на сторінці Selectors guide.

+ +

Шрифти та текст

+ +

Дослідивши деякі основи CSS, давайте додамо більше правил та інформації в файл style.css, щоб зробити наш приклад більш привабливим. Для початку покращимо вигляд наших шрифтів та тексту.

+ +
    +
  1. В першу чергу, знайдіть збережений вами вивід з сайту Google Fonts, який ви зберегли раніше. Додайте елемент <link ... > у head файлу index.html (будь-куди між тегами <head> та </head>). Елемент буде виглядати приблизно так: + + 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    +
    2. +
  2. Видаліть правило, яке зараз знаходиться у вашому файлі style.css. Це був гарний приклад, але червоний текст виглядає не дуже гарно.
    3. +
  3. Додайте наступні строки до вашого файлу стилей, замінивши placeholder на рядок font-family, який ви отримали з сайту Google Fonts. (font-family означає шрифти, які ви застосуєте для вашого тексту). Це правило встановить глобальний базовий шрифт і його розмір для всієї сторінки (так як <html> — це батьківський елемент всієї сторінки, всі елементи у ньому успадкують однаковий font-size та font-family): + 
    html {
+  font-size: 10px; /* px означає 'пікселі': базовий розмір шрифта встановлюється рівним 10 пікселів заввишки  */
+  font-family: placeholder: замініть цей плейсхолдер на строку із сайту Google fonts
+}
    + +
    +

    Примітка: Я додав коментар із поясненням, що означає "px". Все у CSS документі, що знаходиться  між /* та */ — це коментар CSS, який ігнорується браузером. Коментарі застосовують для приміток та пояснень, що допоможуть вам в роботі.

    +
    +
    4. +
  4. Встановимо розміри шрифта для елементів, що містять у собі текст всередині HTML body ({{htmlelement("h1")}}, {{htmlelement("li")}}, та {{htmlelement("p")}}). Також відцентруємо текст нашого заголовку та встановимо висоту строки і проміжок між літерами нашого контенту, щоб зробити його зручнішим для читання. + 
    h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}
    +
    5. +
+ +

Ви можете змінювати числа як завгодно, щоб ваш дизайн виглядав так, як ви хочете. Загалом він буде виглядати так:

+ +

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

+ +

Блоки, блоки, і ще раз про блоки

+ +

Одна річ, яку ви помітите при написанні CSS, полягає в тому, що багато використовуються блоки - встановлення їх розміру, кольору, позиції тощо. Більшість HTML-елементів на вашій сторінці можуть розглядатися як блоки, які розташовані один на одному.

+ +

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

+ +

Не дивно, що макет CSS заснований переважно на блочній моделі (box model). Кожен із блоків, що займає простір на вашій сторінці, має такі властивості:

+ + + +

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

+ +

В цьому розділі ми також використовуємо:

+ + + +

Отже, давайте почнемо та додамо ще кілька CSS на нашу сторінку! Додайте ці нові правила до нижньої частини сторінки, і не бійтеся експериментувати зі зміною значень, щоб побачити, як це працює.

+ +

Зміна кольору сторінки

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

Це правило встановлює фоновий колір для всієї сторінки . Змініть код кольору на будь-який інший, що ви обрали при плануванні свого сайту.

+ +

Задання стилів для body

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

Тепер стилі для елемента body. Тут багато параметрів, тому давайте розглянемо по-одному:

+ + + +

Позиціонування та стиль заголовка головної сторінки

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

Ви, мабуть, помітили, що у верхній частині body є чималенький розрив. Це відбувається тому, що браузери застосовують деякий стиль за умовчанням до елемента {{htmlelement("h1")}} (серед інших), навіть якщо ви не застосували жодного CSS! Це може здаватись поганою ідеєю, але ми хочемо, щоб навіть незавершена веб-сторінка мала базову читабельність. Щоб позбутися розриву, ми перекриваємо стандартний стиль за замовчуванням, встановлюючи margin: 0;.

+ +

Далі ми встановили верхній та нижній відступи (padding) заголовку до 20 пікселів і зробили заголовок текстом того ж кольору, що і колір фону (background) всієї сторінки html.

+ +

Одна досить цікава властивість, яку ми використовували тут, це - text-shadow, яка застосовує текстову тінь до текстового вмісту елемента. Її чотири значення означають наступне:

+ + + +

Знову ж таки, спробуйте експериментувати з різними значеннями, щоб побачити, що ви можете придумати.

+ +

Центрування зображення

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

Нарешті, ми будемо центрувати зображення, щоб воно виглядало краще. Ми могли б використати margin: 0 auto як і раніше для body, але ми також можемо зробити дещо інше. Елемент body є блочним рівнем, тобто він займає місце на сторінці, і до нього можуть бути додані поля та інші значення відступів. Зображення, з іншого боку, є вбудованими елементами (inline), тобто вони не можуть мати відступів. Таким чином, щоб застосувати поля до зображення, ми повинні надати поведінку блочного рівня зображенню за допомогою display: block;.

+ +
+

Примітка: Не хвилюйтесь, якщо ще не зрозуміли display: block; і відміну між блочним рівнем / вбудованим (inline) елементом. Далі ви будете вивчати CSS більш глибоко. Ви можете дізнатись більше про різні доступні значення відображення на нашому сайті display reference page.

+
+ +

Висновок

+ +

Якщо ви дотримувалися всіх інструкцій у цій статті, ви повинні отримати сторінку, яка виглядає приблизно так (ви можете також переглянути нашу версію тут):

+ +

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.

+ +

Якщо ви застрягли, ви можете завжди  порівняти свою роботу з нашим закінченим прикладом коду на Github.

+ +

Тут ми, дійсно, лише зачепили поверхневі знання із CSS. Щоб дізнатись більше, перейдіть до Вивчення теми CSS.

+ +

{{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/uk/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/uk/learn/getting_started_with_the_web/dealing_with_files/index.html new file mode 100644 index 0000000000..1cd1fa24d6 --- /dev/null +++ b/files/uk/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -0,0 +1,101 @@ +--- +title: Робота з файлами +slug: Learn/Getting_started_with_the_web/Dealing_with_files +tags: + - HTML + - Веб-сайт + - Початківцям + - Теорія + - Файли +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")}}
+ +
+

Веб-сайт складається з багатьох файлів: текстового наповнення, коду, стилів, медіаконтенту тощо. Коли ви будуєте веб-сайт, ви маєте поєднати ці файли у єдину змістову структуру на своєму локальному комп'ютері, переконатися, що всі файли можуть "спілкуватися" один з одним і правильно відображати весь контент, до того, як ви завантажите їх на сервер. У статті Робота з файлами ми розглядаємо кілька питань, які допоможуть правильно налаштувати структуру файлів для вашого сайту. 

+
+ +

Де саме має зберігатися сайт на вашому комп'ютері?

+ +

Коли ви працюєте над своїм сайтом локально на комп'ютері, вам слід зберігати всі файли сайту в одній папці, структура якої має повністю відповідати структурі папки живого сайту, яка зберігається на сервері. Ваша локальна папка може зберігатися де завгодно, але найкраще тримати її там, де ви зможете її легко знайти, наприклад, на робочому столі чи в корені диска. 

+ +
    +
  1. Виберіть місце для зберігання ваший веб-сайтів. Створіть нову папку і назвіть її web-projects (або схожим чином). У цій папці житимуть всі ваші веб-проекти. 
    2. +
  2. Всередині папки, створіть ще одну папку для вашого першого веб-сайту. Назвіть її test-site (або більш вигадливо).
    3. +
+ +

Примітка про великі й малі літери і пробіли

+ +

Читаючи цю статтю, ви помітите, що ми просимо вас називати папки і файли малими літерами і без пробілів. Це тому що:

+ +
    +
  1. Багато комп'ютерів, особливо веб-серверів, є чутливими до регістрів літер. Наприклад, якщо ви покладете зображення MyImage.jpg у ваш веб-проект  test-site, а потім у якомусь файлі спробуєте вставити це зображення, вказавши шлях як test-site/myimage.jpg, це може не спрацювати.
    2. +
  2. Браузери, веб-сервери і мови програмування не завжди правильно опрацьовують пробіли. Наприклад, якщо ви використовуєте пробіли в назві файлу, деякі системи можуть вважати, що це дві окремі назви файлів. Деякі сервери замінять пробіли в назві файлів символом "%20" (код символу пробіл в URI), поламаючи при цьому ваші посилання. Краще розділяти слова дефісом, ніж нижнім підкресленням: my-file.html замість my_file.html.
    3. +
+ +

Коротко кажучи, вам слід використовувати дефіс у назвах файлів. Google розуміє дефіс як спосіб розділення слів, але на нижнє підкреслення це не поширюється. З цих міркувань, найкраще звикати до написання назв папок і файлів малими літерами без пробілів, розділяючи слова дефісом, принаймні допоки у вас немає достатніх знань. Так ви матимете менше проблем згодом. 

+ +

Яку структуру вибрати для вашого сайту?

+ +

Давайте поглянемо, яку структуру повинен мати ваш сайт. Найбільш поширені компоненти, які мають практично всі проекти, які ми створюємо, — це HTML-файл з назвою index, а також кілька папок: із зображеннями, стилями і скриптами. Давайте створимо їх зараз:

+ +
    +
  1. index.html: цей файл буде містити практично весь контент вашої головної сторінки — текст і зображення, які користувачі бачать, коли відвідують ваш сайт. У своєму текстовому редакторі створіть файл з назвою index.html і збережіть його в папці test-site.
    2. +
  2. Папка images: у цій папці будуть зібрані всі зображення, які ви будете використовувати на сайті. Створіть папку з назвою images всередині папки test-site.
    3. +
  3. Папка styles: у цій папці зберігатимуться всі CSS-файли зі стилями, якими ви будете змінювати зовнішній вигляд вашого контенту (наприклад, шрифт тексту чи колір бекграунду). Створіть папку styles всередині папки test-site.
    4. +
  4. Папка scripts: у цій папці будуть зберігатися всі файли з JavaScript-кодом, яким ви додасте інтерактивності вашому сайту (наприклад, щоб кнопки при кліку відображали якісь дані). Створіть папку scripts всередині папки test-site.
    5. +
+ +
+

Примітка: на комп'ютерах Windows ви не завжди можете бачити повну назву файлу із розширенням, оскільки Windows за замовчанням приховує розширення файлів. Ви можете змінити налаштування так: у File Explorer вибрати вкладку View і поставити "галочку" в пункті File name extensions. Більш детальну інформацію про те, як змінити налаштування на вашій версії Windows, можна легко знайти в інтернеті.

+
+ +

Шляхи файлів

+ +

Щоб змусити файли "спілкуватися" між собою, ви маєте вказати їм шлях один до одного — по суті, маршрут, за яким один файл буде знати, де лежить інший файл. Щоб показати, як це працює, ми додамо трохи HTML у наш файл index.html, щоб вкласти на сторінку зображення, яке ви вибрали в статті "What will your website look like?".

+ +
    +
  1. Скопіюйте вибране раніше зображення в папку images.
    2. +
  2. Відкрийте файл index.html і вставте туди цей код, точно так, як він поданий тут. Поки що не переймайтеся, що він означає, — пізніше ми розглянемо його в деталях. + 
    <!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. Рядок <img src="" alt="My test image"> є кодом HTML, який вставить зображення на нашу сторінку. Ми маємо сказати цьому коду, де саме шукати картинку, тобто вказати шлях файлу. Наше зображення зберігається в папці images, яка, в свою чергу, зберігається на тому ж рівні (в тій самій директорії), що і файл index.html. Щоб файл index.html зміг дістатися до нашого зображення, нам потрібно спочатку вказати назву папки із зображеннями, а потім ім'я конкретного зображення, отак: images/ім'я-вашого-файлу. Наприклад, якщо наше зображення називається firefox-icon.png, то наш шлях виглядатиме так: images/firefox-icon.png.
    4. +
  4. Вставте цей шлях у ваш код HTML між лапками коду src="".
    5. +
  5. Збережіть файл HTML, потім відкрийте його в браузері (подвійний клік на файлі). Ви маєте побачити вашу нову веб-сторінку із зображенням! 
    6. +
+ +

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

+ +

Загальні правила шляху файлу:

+ + + +

Поки що це все, що вам потрібно знати.

+ +
+

Примітка: файлова система Windows у своїх шляхах зазвичай використовує обернену скісну риску замість звичайної, наприклад, C:\windows. На ваш код HTML це не впливає— навіть якщо ви пишете сайт на Windows, вам все одно слід використовувати звичайну скісну риску. 

+
+ +

Що ще потрібно зробити?

+ +

Поки що це все. Структура вашої папки має виглядати приблизно так: 

+ +

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/uk/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/uk/learn/getting_started_with_the_web/how_the_web_works/index.html new file mode 100644 index 0000000000..d736cf3913 --- /dev/null +++ b/files/uk/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -0,0 +1,94 @@ +--- +title: Як працює мережа +slug: Learn/Getting_started_with_the_web/How_the_Web_works +tags: + - IP-адреса + - Клієнт + - Початківцям + - Сервер + - протокол +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")}}
+ +
+

Стаття Як працює мережа спрощено пояснює, що саме відбувається, коли ви переглядаєте веб-сторінку у браузері на комп'ютері чи телефоні. 

+
+ +

Ця теорія не є обов'язковою на початку веб-розробки, але чим далі ви просуватиметеся, тим більш очевидними будуть переваги розуміння того, що саме відбувається за лаштунками. 

+ +

Клієнти та сервери

+ +

Комп'ютери, приєднані до мережі, називаються клієнтами та серверами. Цей малюнок спрощено показує, як відбувається їхня взаємодія: 

+ +

+ + + +

Інші гравці на полі

+ +

Клієнт та сервер, про які йшлося вище, не єдині учасники процесу. Існує багато інших складових, про які ми зараз розкажемо. 

+ +

Для початку, уявимо мережу як дорогу. На одному кінці дороги — ваш будинок. Це наш клієнт. На протилежному кінці дороги — крамниця, у якій ви хочете щось придбати. Це наш сервер. 

+ +

+ +

На додачу до сервера і клієнта, ми також маємо: 

+ + + +

То що, власне, відбувається?

+ +

Коли ви вписуєте адресу в браузер, то:

+ +
    +
  1. Браузер іде на DNS-сервер і знаходить там справжню адресу серверу, на якому зберігається потрібний вам сайт (ви знаходите адресу магазину).
    2. +
  2. Браузер надсилає HTTP-запит до сервера з проханням вислати копію сайту на клієнт (ви йдете в магазин і замовляєте товар). Цей запит і всі інші дані, які пересилаються між клієнтом і сервером, передаються в мережі за допомогою TCP/IP.
    3. +
  3. Якщо сервер вирішує задовольнити запит, він відсилає клієнту повідомлення "200 OK", що означає "Звісно, ви можете подивитися цей веб-сайт! Ось він", і потім починає відсилати файли веб-сайту в браузер по шматочках, погрупованих в маленькі набори, які називаються пакетами даних (магазин видає вам ваш товар і ви несете його додому).
    4. +
  4. Браузер збирає докупи всі шматочки і показує їх вам у вигляді готової веб-сторінки (ваш товар вже вдома!).
    5. +
+ +

Пояснення DNS

+ +

Усі адреси ваших улюблених сайтів насправді є зовсім не такими, якими виглядають. Вони є спеціальними наборами цифр, як, наприклад, оцей: 63.245.215.20.

+ +

Це {{Glossary("IP Address", "IP-адреса")}} сайту, вона представляє унікальне місце зберігання сайту в мережі. Її непросто запам'ятати, чи не так? Саме тому бути винайдені сервери доменних імен (Domain Name Servers), або DNS-сервери. Це спеціальні сервери, які зіставляють веб-адресу, яку ви вводите в браузер (наприклад, "mozilla.org") зі справжньою (IP) адресою сайту.

+ +

Веб-сайти можна знайти напряму через їхні IP-адреси. Спробуйте зайти на сайт Mozilla website, увівши 63.245.215.20 в адресний рядок браузера.

+ +

A domain name is just another form of an IP address

+ +

Пояснення пакетів

+ +

Вище ми вживали термін "пакет", щоб описати формат, у якому дані пересилаються з сервера на клієнт. Що це означає? Дані пересилаються по мережі у вигляді серій пакетів, кожен з яких містить маленьких шматок інформації. Це робиться для того, щоб багато різних користувачів могли завантажувати одну й ту саму сторінку одночасно. Якщо б веб-сайти надсилалися одним великим шматком, тільки один користувач міг би завантажувати її в певний час, що значно ускладнило б користування мережею. 

+ +

Також дивися

+ + + +

Автор фото

+ +

Street photo: Street composing, by Kevin D.

+ +

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

diff --git a/files/uk/learn/getting_started_with_the_web/html_basics/index.html b/files/uk/learn/getting_started_with_the_web/html_basics/index.html new file mode 100644 index 0000000000..71e66f6f1e --- /dev/null +++ b/files/uk/learn/getting_started_with_the_web/html_basics/index.html @@ -0,0 +1,214 @@ +--- +title: Основи HTML +slug: Learn/Getting_started_with_the_web/HTML_basics +tags: + - HTML + - Початківець +translation_of: Learn/Getting_started_with_the_web/HTML_basics +--- +
{{LearnSidebar}}
+ +
{{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 (мова гіпертекстової розмітки) — це код, який використовується для структурування і відображення веб-сторінки та її контенту. Наприклад, контент може бути розбитий на параграфи (абзаци), містити список, зображення чи таблицю. Ця стаття має дати базове розуміння мови HTML та її призначення. 

+
+ +

Що таке HTML?

+ +

HTML — це не мова програмування, це мова розмітки, яка каже вашому браузеру, як відображати вміст веб-сторінки, яку ви переглядаєте. Вона може бути простою чи складною, залежно від бажання веб-дизайнера, який її створює. HTML складається з серії ({{Glossary("element", "елементів")}}), які використовуються для вміщення, або "загортання" в них різних частин контенту, щоб вони відображалися чи діяли в певний спосіб. Ці елементи за допомогою початкових і кінцевих ({{Glossary("tag", "тегів")}}) можуть зробити слово чи зображення посиланням на будь-яку іншу сторінку, можуть відображати текст курсивом, збільшити чи зменшити шрифт тощо. Для прикладу, візьмемо такий контент: 

+ +
Мій кіт дуже сумний.
+ +

Якщо ми хочемо, щоб цей рядок був сам по собі, ми можемо вказати, що це параграф (абзац), додавши до нього відповідні теги:

+ +
<p>Мій кіт дуже сумний.</p>
+ +

Анатомія елементу HTML

+ +

Погляньмо на елемент "параграф" детальніше. 

+ +

+ +

Основні частини елементу такі:

+ +
    +
  1. Початковий тег: містить назву елементу (в даному випадку, p), загорнену в кутові дужки. Цей тег позначає початок елементу, або місце, де елемент починає діяти. У даному випадку — це місце, де починається параграф. 
    2. +
  2. Кінцевий тег: такий самий тег, як і початковий, тільки тепер він містить скісну риску перед назвою елементу. Цей тег позначає місце закінчення елементу — у даному випадку, місце, де закінчується параграф. Одна з найпоширеніших помилок початківців — це забути поставити кінцевий тег, що може призвести до несподіваних результатів. 
    3. +
  3. Вміст: вміст елементу, у даному випадку — просто текст. 
    4. +
  4. Елемент: початковий тег плюс кінцевий тег плюс вміст між ними — дорівнює елемент.
    5. +
+ +

Елементи також можуть мати атрибути, які виглядають так: 

+ +

+ +

Атрибути містять додаткову інформацію про елемент, яка не відображається в самому контенті. У прикладі вище class це ім'я атрибута, а editor-note — це значення атрибута. Атрибут class дозволяє дати елементу певний ідентифікатор, який пізніше можна використати для того, щоб доступитися до цього елемента і змінити його стиль. 

+ +

Атрибут завжди повинен мати:

+ +
    +
  1. Пробіл між ім'ям атрибута і назвою елементу (або попереднім атрибутом, якщо такий є).
    2. +
  2. Ім'я атрибута, за яким іде знак дорівнює.
    3. +
  3. Значення атрибута, загорнене в прямі лапки.
    4. +
+ +

Вкладені елементи

+ +

Ви можете додати елемент всередину іншого елементу. Це називається вкладенням. Якщо ми хочемо наголосити, що наш кіт дуже сумний, ми можемо загорнути слово "дуже" в елемент {{htmlelement("strong")}}, який означає, що слово особливо сильно наголошене:

+ +
<p>Мій кіт <strong>дуже</strong> сумний.</p>
+ +

Важливо пам'ятати правильне вкладення елементів: у прикладі вище ми спершу відкрили елемент {{htmlelement("p")}}, а потім елемент <strong>, що означає, що першим ми маємо закрити внутрішній елемент {{htmlelement("strong")}}, а потім зовнішній {{htmlelement("p")}}. Приклад нижче неправильний:

+ +
<p>Мій кіт <strong>дуже сумний.</p></strong>
+ +

Елемент має закриватися або всередині, або ззовні іншого елемента. Якщо кінцевий тег зовнішнього елемента іде перед кінцевим тегом внутрішнього елемента, ваш браузер спробує здогадатися, що ви хотіли цим всім сказати, і результати цього можуть бути неочікуваними. Тому не робіть так!

+ +

Порожні елементи

+ +

Деякі елементи не містять жодного вмісту. Вони називаються порожніми елементами. Для прикладу візьмемо елемент {{htmlelement("img")}}:

+ +
<img src="images/firefox-icon.png" alt="Моє тестове зображення">
+ +

Цей елемент має два атрибути, при цьому не має кінцевого тегу і жодного внутрішнього вмісту. Елементу image не потрібно загортати контент, його мета — вставити зображення на певне місце на веб-сторінці.

+ +

Анатомія HTML-документу

+ +

Все зазначене вище є основами HTML-елементів, але окремо взяті елементи самі по собі мало на що здатні. Тепер ми поглянемо на те, як окремі елементи формують цілу веб-сторінку. Візьмемо для прикладу код з файлу index.html (який використовується в статті Робота з файлами):

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Моя тестова сторінка</title>
+  </head>
+  <body>
+    <img src="images/firefox-icon.png" alt="Моє тестове зображення">
+  </body>
+</html>
+ +

Тут ми маємо:

+ + + +

Зображення

+ +

Повернемося до елементу {{htmlelement("img")}}:

+ +
<img src="images/firefox-icon.png" alt="Моє тестове зображення">
+ +

Як ми вже з'ясували раніше, цей елемент вставляє зображення на сторінку в тому місці, де воно має з'явитися.  Це відбувається за допомогою атрибута src (source — джерело), який містить шлях до зображення.

+ +

Також ми додали атрибут alt (alternative). У цьому атрибуті потрібно вказувати альтернативний текст-опис зображення для тих випадків, коли користувачі не зможуть побачити картинку, наприклад, через те, що:

+ +
    +
  1. Мають порушення зору. Користувачі з порушенням зору часто використовують скрін-рідери, які читають описи зображень.
    2. +
  2. Щось пішло не так при завантаженні зображення. Спробуйте навмисно змінити шлях до зображення в атрибуті src, щоб він став неправильним. Якщо ви тепер перезавантажите сторінку, ви побачите, що на місці зображення буде текст:
    3. +
+ +

+ +

Основним при створенні атрибута alt має бути описовість тексту. Цей атрибут має дати користувачу достатньо інформації, щоб скласти уявлення про те, що є на зображенні. У нашому випадку, текст "Моє тестове зображення" нікуди не годиться. Набагато кращий варіант для логотипу Firefox був би "Логотип Firefox: палаюча лисиця навколо Земної кулі."

+ +

Спробуйте придумати кращий альтернативний текст для свого зображення. 

+ +
+

Примітка: дізнайтеся більше про доступність на сторінці MDN's Accessibility.

+
+ +

Розмітка тексту

+ +

У цьому розділі ми розглянемо базові HTML-елементи, які використовуються для розмітки тексту.

+ +

Заголовки

+ +

Елементи "Heading" дозволяють вам вказати, що певні частини контенту вашої сторінки є заголовками або підзаголовками. Так само, як у книжці є назва книги, назви розділів і підзаголовки, у HTML-документі це також є. HTML має заголовки шістьох рівнів, {{htmlelement("h1")}}–{{htmlelement("h6")}}, хоча зазвичай використовуються перші 3-4.

+ +
<h1>Мій головний заголовок</h1>
+<h2>Мій важливий заголовок</h2>
+<h3>Мій підзаголовок</h3>
+<h4>Мій менш важливий підзаголовок</h4>
+ +

Спробуйте додати підзаголовки до вашої HTML-сторінки перед елементом {{htmlelement("img")}}.

+ +

Параграфи

+ +

Як пояснювалося вище, елемент {{htmlelement("p")}} містить частину тексту, яка становить один абзац. Параграфи використовуються дуже часто, особливо при розмітці звичайного текстового контенту:

+ +
<p>Це один параграф.</p>
+ +

Додайте зразок тексту (він має бути готовий зі статті Як виглядатиме ваш сайт?) в один чи два параграфи і розмістіть їх прямо під елементом {{htmlelement("img")}}.

+ +

Списки

+ +

Чимало контенту на веб-сторінках є списками, і в HTML є спеціальні елементи для них. Розмітка списків завжди має принаймні два елементи. Найпоширеніші типи списків - це нумерований і ненумерований списки:

+ +
    +
  1. Ненумерований список — це перелік, у якому порядок пунктів не суттєвий, наприклад, список покупок. Такий список загортається в елемент {{htmlelement("ul")}}.
    2. +
  2. Нумерований список — це перелік, у якому порядок пунктів має значення, наприклад, рецепт приготування. Такий список загортається в елемент {{htmlelement("ol")}}.
    3. +
+ +

Кожен пункт всередині списку загортається в свій окремий елемент {{htmlelement("li")}} (list item).

+ +

Наприклад, якщо ми хочемо перетворити такий параграф у список: 

+ +
<p>Mozilla — це глобальна спільнота технологів, мислителів і творців, які працюють разом...</p>
+ +

Ми можемо так змінити розмітку:

+ +
<p>Mozilla — це глобальна спільнота</p>
+
+<ul>
+  <li>технологів</li>
+  <li>мислителів</li>
+  <li>творців</li>
+</ul>
+
+<p>які працюють разом... </p>
+ +

Спробуйте додати нумерований чи ненумерований список до вашої сторінки.

+ +

Посилання

+ +

Посилання дуже важливі — це те, що робить мережу мережею! Щоб додати посилання, потрібно використовувати елемент {{htmlelement("a")}} ("a" скорочено від "anchor" — якір). Щоб перетворити параграф на посилання, робіть так:

+ +
    +
  1. Виберіть текст. Ми вибрали "Mozilla Manifesto".
    2. +
  2. Загорніть цей текст в елемент {{htmlelement("a")}}, отак: + 
    <a>Mozilla Manifesto</a>
    +
    3. +
  3. Додайте до елементу {{htmlelement("a")}} атрибут href, отак: + 
    <a href="">Mozilla Manifesto</a>
    +
    4. +
  4. Додайте значення цьому атрибута — адресу посилання: + 
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
    +
    5. +
+ +

Не пропускайте частину https:// чи http:// на початку адреси, так званий протокол, інакше результати можуть бути неочікуваними. Після того, як елемент доданий, клікніть на посилання і переконайтеся, що вас відправило туди, куди ви хотіли.

+ +
+

href може видаватися дивним ім'ям для атрибута, який складно запам'ятати. Він означає hypertext reference — гіпертекстове посилання.

+
+ +

Тепер додайте посилання до своєї сторінки.

+ +

Висновок

+ +

Якщо ви слідували інструкціям у цій статті, у вас мала вийти сторінка, яка виглядає приблизно так (також можна переглянути тут):
+
+ A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

+ +

Якщо ви застрягли, ви завжди можете порівняти свій код із завершеним прикладом коду на GitHub.

+ +

У цій статті ми розглянули тільки базові поняття HTML. Щоб дізнатися більше, зайдіть на сторінку HTML Learning topic.

+ +

{{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/uk/learn/getting_started_with_the_web/index.html b/files/uk/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..af137773c8 --- /dev/null +++ b/files/uk/learn/getting_started_with_the_web/index.html @@ -0,0 +1,64 @@ +--- +title: Початок роботи з Інтернетом +slug: Learn/Getting_started_with_the_web +tags: + - CSS + - HTML + - 'l10n: пріоритет' + - Покажчик + - Посібник + - Початківцям + - Розробка + - Теорія +translation_of: Learn/Getting_started_with_the_web +--- +
{{LearnSidebar}}
+ +
+

«Початок роботи з Інтернетом» — це серія стислих статей, що знайомить з практичними питаннями веб-розробки. Ви налаштуєте інструменти, необхідні для створення простої веб-сторінки та публікації власного коду.

+
+ +

Історія вашого першого сайту

+ +

Розробка професійного сайту - це кропітка робота. Радимо не поспішати, якщо ви початківець у веб-програмуванні. Ви не отримаєте відразу новий Facebook, але легко побудуєте свій перший сайт.

+ +

Опрацьовуючи статті послідовно, ви розташуєте створену веб-сторінку в інтернеті. Почнемо!

+ +

Встановлення необхідних програм

+ +

Є чимало інструментів для побудови сайтів. Початківець може розгубитись, при виборі редакторів коду, фреймворків  та засобів для тестів. Встановлення необхідних програм поступово допоможе встановити все, що потрібно для простої веб-розробки.

+ +

Який вигляд матиме ваш сайт?

+ +

Перед тим, як почати писати код для сайту, треба мати план. Яку інформацію відобразити? Які кольори та шрифти використати? Який вигляд матиме ваш сайт? Пропонуємо вам простий спосіб планування змісту та зовнішнього вигляду вашого сайту.

+ +

Робота з файлами

+ +

Сайт складається з багатьох файлів: текстів, коду, таблиць стилів, медіа-контенту тощо. Коли створюється сайт, потрібно об'єднати ці файли в логічну структуру та впевнитися, що вони доступні одне одному. Робота з файлами пояснює, як створити логічну структуру файлів для сайту й уникнути типових проблем.

+ +

Основи HTML

+ +

Hypertext Markup Language (HTML, мова розмітки гіпертексту) — це код, що структурує зміст веб-сторінок та надання йому значення і мети. Наприклад, чи є контент набором параграфів, чи списком із маркерами? Чи є на сторінці зображення, таблиці з даними? В Основах HTML достатньо інформації для знайомства з HTML.

+ +

Основи CSS

+ +

Cascading Stylesheets (CSS, каскадні таблиці стилів) — це код для стилізації сайту. Наприклад, який колір тексту, де розміщенно контент на екрані? Які фонові зображення та кольори взято для оздоблення сайту? З Основ CSS ви дізнаєтесь про стилізацію для початківців.

+ +

Основи JavaScript

+ +

JavaScript — це мова програмування, яку використовують для можливості взаємодії з веб-сайтами. А саме: ігри, дії, що відбудутся після натиску на кнопоку або введення даних до форми, створення динамічних стилей, анімацій тощо. Основи JavaScript описують можливості цієї захоплючої мови програмування та як почати нею користовуватись.

+ +

Публікація вашого сайту

+ +

Після написання коду та організації файлів вашого сайту, необхідно розмістити його в інтернеті, щоб люди могли побачити результати вашої праці. Публікація вашого коду допоможе як найлегше розмістити ваш код в інтернеті.

+ +

Як працює Інтернет 

+ +

Коли ви заходите на улюблений сайт, виконується безліч фонових завдань, можливо непомітних для вас. Як працює Інтернет описує процеси, які відбуваються, коли ви переглядаєте веб-сторінку на компьютері.

+ +

Дивіться також

+ + diff --git a/files/uk/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/uk/learn/getting_started_with_the_web/installing_basic_software/index.html new file mode 100644 index 0000000000..22e6bfadf6 --- /dev/null +++ b/files/uk/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,63 @@ +--- +title: Встановлення необхідних програм +slug: Learn/Getting_started_with_the_web/Installing_basic_software +tags: + - Браузер + - Початківцям + - текстовий редактор + - інструменти +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")}}
+ +
+

В статті "Встановлення необхідних програм" ми з'ясуємо, які інструменти потрібні для веб-розробки та як їх правильно встановити.

+
+ +

Які інструменти використовують професіонали?

+ + + +

Які інструменти мені потрібні зараз?

+ +

Список виглядає страшно, але на щастя ви можете починати веб-розробку без знань більшості з них. У статті розглянемо базовий мінімум — текстовий редактор і кілька сучасних браузерів. 

+ +

Встановлення текстового редактора

+ +

Напевно, у вас вже є простий текстовий редактор на комп'ютері. Windows зазвичай має Notepad, а macOS — TextEdit. Linux пропонує різні варіанти, зокрема Ubuntu має gedit.

+ +

Для веб-розробки доступні кращі редактори, ніж Notepad чи TextEdit. Пропонуємо Brackets —безкоштовний редактор з підказками та попереднім переглядом. 

+ +

Встановлення сучасного браузера

+ +

Встановимо кілька браузерів, щоб тестувати наш код. Оберіть операційну систему, клацніть відповідне посилання та завантажте улюблені браузери:

+ + + +

Перед тим, як продовжити, встановіть принаймні два з цих браузерів і запустіть їх.

+ +
+

Internet Explorer не сумісний з деякими сучасними функціями вебу та, вірогідно, не зможе запустити ваш проект. Зазвичай вам не потрібно турбуватися про те, щоб зробити свої веб-проекти сумісними з ним, оскільки дуже мало людей все ще користуються ним - тож, не надто переймайтеся про це, поки ви навчаєтесь. Іноді ви можете зіткнутися з проектом, який потребує його підтримки.

+
+ +

Встановлення локального веб-сервера

+ +

Деякі приклади потрібно буде тестувати на локальному веб-сервері. Ви можете дізнатися, як його встановити, у статті Як ти налаштуєш локальний тестовий сервер?

+ +

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

diff --git a/files/uk/learn/getting_started_with_the_web/javascript_basics/index.html b/files/uk/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..50ffb7a580 --- /dev/null +++ b/files/uk/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,401 @@ +--- +title: Основи JavaScript +slug: Learn/Getting_started_with_the_web/JavaScript_basics +tags: + - Інтернет + - Мова + - Основи + - Українська + - вивчення +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 — це мова програмування, яка приносить інтерактивність до вашого веб-сайту (наприклад: ігри, реакція на натиски кнопок, введеня даних через форми, динамічна зміна стилів, анімація). Ця стаття допоможе розпочати вивчення цієї захоплюючої мови і дасть вам уяву про її можливості.

+
+ +

Що ж являє собою JavaScript насправді?

+ +

{{Glossary("JavaScript")}} ("JS" скорочено) це повноцінна {{Glossary("Динамічна мова програмування", "динамічна мова програмування")}}, яка, у застосуванні до {{Glossary("HTML")}} документу, може надати динамічну інтерактивність на веб-сайтах. Вона була винайдена Бренданом Eйхом, співзасновником проекту Mozilla, the Mozilla Foundation, та Mozilla Corporation.

+ +

JavaScript має надзвичайно багато застосувань. Ви можете розпочати з малого: створити "каруселі", галереї зображень, динамічні макети сторінок, відповіді на натиски кнопок, тощо. Із досвідом, ви зможете створювати ігри, 2D та 3D графіку, складні застосунки з використанням баз даних та багато іншого!

+ +

JavaScript доволі компактна та гнучка мова. Розробники забезпечили велике розмаїття інструментів, що доповнюють основу мови JavaScript, які відкривають величезну кількість додаткового функціоналу з мінімальними зусиллями. Серед них:

+ + + +

Тому що ця стаття повинна бути легким введенням до JavaScript, на цьому етапі ми не будемо займати вашу увагу детальними розмовами про різницю основної мови JavaScript та різними інструментами, що наведені вище. Ви можете вивчити це у деталях пізніше, у нашій JavaScript learning area, та решті MDN.

+ +

Нижче ми представимо вам деякі аспекти основної мови, а також ви ознайомитесь з деякими можливостями API браузера. Розважайтесь!

+ +

Приклад "hello world"

+ +

Попередній розділ звучить неймовірно, і це дійсно так — JavaScript є одним із найперспекнивніших Веб-технологій, і коли ви проникнитесь та почнете використовувати його, ваші веб-сайти перейдуть у нові виміри продуктивності та креативності.

+ +

Тим не менш,  відчувати себе комфортно з  JavaScript складніше ніж з HTML та CSS. Вам потрібно починати з малого та продовжувати працювати малими послідовними кроками. Для початку, ми розглянемо як додати деякі прості JS-елементи на вашу сторінку,  створюючи "hello world!" зразок (стандартний приклад з програмування).

+ +
+

Важливо: Якщо ви не проходили пепередні частини курсу, завантажте цей зразок коду(архів) і використовуйте його як точку початку.

+
+ +
    +
  1. Перш за все, перейдіть до вашого тестового сайту та створіть нову папку з іменем "scripts"(без лапок). Тоді, всередині нової папки для скриптів, що ви щойно створили, створіть новий файл з назвою main.js. Збережіть його в папці scripts .
    2. +
  2. Далі, у вашому файлі index.html введіть наступний елемент в новому рядку просто перед закриваючим тегом </body> : + 
    <script src="scripts/main.js"></script>
    +
    3. +
  3. Загалом,  це те ж саме, що і {{htmlelement("link")}} елемент для CSS — він додає JavaScript до сторінки, тож це може впливати на HTML (також на CSS, та будь що інше на сторінці).
    4. +
  4. Тепер додайте цей код до файлу main.js : + 
    var myHeading = document.querySelector('h1');
+myHeading.textContent = 'Hello world!';
    +
    5. +
  5. Наприкінці,  переконайтесь, що файли HTML та JavaScript збережені та приєднані до  index.html в браузері. Ви маєте побачити щось на кшталт цього:
    6. +
+ +
+

Зауважте: Причиною, чому ми ставимо {{htmlelement("script")}} елемент ближче до низу HTML файлу, є те, що HTML завантажується браузером в порядку того, як він прописаний в файлі. Якщо JavaScript завантажено першим, а очікується, що він має впливати на HTML під ним, він може не працювати, якщо JavaScript завантажується раніше, ніж HTML, над яким він має здійснювати якісь маніпуляції. Тож, писати підключення JavaScript наприкінці коду HTML це, зачасту, найкраща стратегія.

+
+ +

Що сталось?

+ +

Текст вашого заголовка було замінено на "Hello world!", використовуючи JavaScript.  Ви зробили це за допомогою першої функції яку використали, яка має назву {{domxref("Document.querySelector", "querySelector()")}} щоб отримати посилання на ваш заголовок та зберегти його у змінній myHeading. Дуже схоже до того, що ми робили, використовуючи CSS селектори. Коли є потреба щось зробити з елементом, ви маєте спочатку його вибрати.

+ +

Після цього, ви присвоюєте значення змінної myHeading властивості {{domxref("Node.textContent", "textContent")}} (яка містить контекст заголовка), а саме "Hello world!".

+ +
+

Зауважте: Обидві можливості, що ви використовували перед цим, є частиною Document Object Model (DOM) API, що дозволяє вам маніпулювати документами.

+
+ +

Прискорений курс основ

+ +

Розгляньмо кілька основних можливостей мови JavaScript, щоб дати вам краще розуміння того, як це все працює. Варто зазначити, що ці речі притаманні всім мовам програмування, тож якщо ви засвоїте цей базис, ви на шляху до того, щоб могти програмувати будь-що!

+ +
+

Важливо:  У цій статті, намагайтесь перевіряти приклади коду на своєму ПК у JavaScript консолі. Детальніша інформація про JS-консоль та інші засоби розробника у браузері.

+
+ +

Змінні

+ +

{{Glossary("Змінна", "Змінні")}} - контейнери, у яких ви можете зберігати значення. Ви можете розпочати з оголошення змінної за допомогою ключового слова var , після якого вказавши ім'я, яким ви хочете назвати змінну:

+ +
var myVariable;
+ +
+

Зауважте: Крапка з комою(англ. semicolon) в кінці рядка вказує на кінець виразу; ставити крапку з комою обов'язково, коли вам потрібно розділити вирази в одному рядку. Однак, деякі люди вважають гарною практикою ставити в кінці кожного виразу. Є інші правила, коли ви маєте чи не маєте ставити крапку з комою - дивіться Your Guide to Semicolons in JavaScript, щоб дізнатись більше.

+
+ +
+

Зауважте: Ви можете називати змінні майже будь-як, проте є певні обмеження (читайте статтю про правила іменування змінних.) Якщо вагаєтесь, можна перевірити ім'я вашої змінної, щоб дізнатись, чи є воно коректним.

+
+ +
+

Зауважте: JavaScript це мова чутлива до регістру — myVariable , це не те саме, що myvariable чи MYvariable. Якщо ви маєте проблеми з кодом, можливо, варто перевірити регістр.

+
+ +

Після оголошення змінної, ви можете просвоїти їй значення:

+ +
myVariable = 'Bob';
+ +

Ви можете виконувати обидві операції в одному рядку:

+ +
var myVariable = 'Bob';
+ +

Ви можете звертатись до змінної, просто вказавши її ім'я:

+ +
myVariable;
+ +

Після надання змінній значення, ви можете пізніше змінити його:

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

Зауважте, що змінні можуть містити значення різних типів:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ТипПоясненняПриклад
{{Glossary("String")}}Послідовність символів, відома як рядок. Щоб визначити, що значенням є рядок, ви мусите занести його в лапки.var myVariable = 'Bob';
{{Glossary("Number")}}Число. Без лапок.var myVariable = 10;
{{Glossary("Boolean")}}Значення True/False. Слова true та false є спеціальними словами в JS, та не потребують лапок.var myVariable = true;
{{Glossary("Array")}}Масив. Дозволяє зберігати багато значень за одним посиланням.var myVariable = [1,'Bob','Steve',10];
+ Виклик значень елементів здійснюється так:
+ myVariable[0], myVariable[1], і т. д.
{{Glossary("Object")}}Загалом, будь-що. Все у JS є об'єктом і може міститись у змінній. Пам'ятайте це.var myVariable = document.querySelector('h1');
+ Всі попередні приклади теж.
+ +

То навіщо нам потрібні змінні? Щож, змінні потрібні для всіх цікавих у програмуванні речей. Якби змінні не могли змінюватись, то ви не могли б робити ніяких динамічних речей, як то персоналізовані вітальні повідомлення чи зміна відображуваних в галереї зображень.

+ +

Коментарі

+ +

Ви можете залишати коментарі у JavaScript коді, так само як у CSS:

+ +
/*
+Все, що всередині, є коментарем.
+*/
+ +

Якщо коментар однорядковий, то простіше виділити його двома слешами:

+ +
// Це коментар. Малозмістовний, та все ж.
+
+ +

Оператори

+ +

{{Glossary("Оператор")}} , це математичний символ, що видає результат,  оснований на двох значення(чи змінних). В таблиці нижче ви можете побачити деякі з напростіших операторів з деякими прикладами, які можете перевірити у JavaScript консолі.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОператорПоясненняСимволПриклад
Додавання/конкатинаціяВживається для додавання двох чисел чи злиття двох рядків разом.+6 + 9;
+ "Hello " + "world!";
Віднімання, множення, діленняТе ж, що і в простій математиці.-, *, / +

9 - 3;
+ 8 * 2;  //Множення у JS позначається зірочкою
+ 9 / 3;

+
ПрисвоєнняВи вже це бачили; присвоєння змінній значення.=var myVariable = 'Bob';
ПорівнянняПеревіряє чи дві змінні рівні та повертає true/false (Boolean) .===var myVariable = 3;
+ myVariable === 4;//false
Заперечення (обернений до порівняння)Повертає логічний вираз, протилежний значенню операнда; true стає false і т.п. Повертає true, якщо значення не рівні.!, !== +

Початковий вираз true, але повертається false , оскільки це заперечене порівняння :

+ +

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

+ +

Ми перевіряємо "чи myVariable НЕ рівне 3". Повертає false, оскільки myVariable РІВНЕ 3.

+ +

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

+
+ +

Існує ще багато операторів, які ви можете використовувати, та цих поки достатньо. Відвідайте Expressions and operators, щоб побачити повний список.

+ +
+

Зауважте: Змішування типів даних може привести до дивних результатів при виконанні обрахунків, тож будьте обережні. Наприклад, введіть "35" + "25" в своїй консолі. Чому ви отримали не той результат, на який ви очікували? Тому, що лапки перетворили числа в рядки, тож виконалось не додавання, а злиття рядків. Якщо ввести 35 + 25 , то результат буде таким, який ви, можливо, очікували у попередньому випадку.

+
+ +

Умови

+ +

Умовами називають структури коду, що дозволяють вам перевіряти, повертає вираз true, чи ні, виконуючи певні частини коду, залежно від результату. Поширеною формою умовної конструкції є if ... else.  Наприклад:

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

Вираз всередині if ( ... ), це порівняння — використовує оператор порівняння щоб співставити значення змінної iceCream з рядком 'chocolate',щоб визначити, чи рівні вони. Якщо true, то запускається перший блок коду. Якщо порівняння не повертає true, то перший блок пропускається, а  другий блок, після виразу else, запускається замість нього.

+ +

Функції

+ +

{{Glossary("Функція", "Функції")}}, це шлях до збереження функціоналу, який ви плануєте використовувати знову. В такому разі, коли вам потрібна певна процедура, ви можете просто викликати відповідну функцію. Ви вже бачили деякі використання функцій, наприклад:

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

Ці функції, document.querySelector та alert, є вбудованими у браузер, тож ви можете викликати їх коли вам заманеться.

+ +

Якщо ви бачите щось, що виглядає, як ім'я змінної, проте має дужки до — () — та після, це функція. Функції зазвичай приймають {{Glossary("Арґумент", "аргументи")}} — дані, що необхідні їм для роботи. Їх записують між дужками, розділяючи комами, якщо є більше одного.

+ +

Наприклад, функція alert() створює випадаюче вікно в вікні браузера, але ми маємо задати аргументом рядок, щоб повідомити функції, що саме потрібно написати у випадаючому вікні.

+ +

Звісно ж, ви можете описувати власні функції — у цьому прикладі ми напишемо просту функцію, що приймає два числа аргументами та множить їх:

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

Спробуйте запустити функцію в консолі та протестувати з різними аргументами. Наприклад:

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

Зауважте: Вираз return вказує браузеру, що потрібно повернути змінну result наприкінці роботи функції, щоб вона була доступна до використання. Це необхідно, тому що змінні, що визначені всередині функції, видимі лише в цій же функції. Це називається {{Glossary("Scope", "зоною видимості")}} змінної. (more on variable scoping.)

+
+ +

Події

+ +

Справжня інтерактивність на сайті вимагає подій. Це структури коду, що стежать за тим, що стається у браузері та запускають певні блоки коду у відповідь. Найпоширеніша подія, це click, що виконується браузером, коли ви клікаєте на щось своєю мишкою. Щоб побачити це, пропишіть наступний код у консолі а потім клацніть на цій сторінці:

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

Є багато шляхів прив'язати подію до елемента. Тут ми обираємо {{htmlelement("HTML")}} елемент, виставляючи для події onclick на виконання безіменну функцію, яку ми хочемо запустити при натисканні.

+ +

Зауважте, що це:

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

еквівалентне цьому:

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

Просто коротше.

+ +

Прокачаємо наш зразок сайту

+ +

Тепер, коли ми розглянули кілька принципів JavaScript, давайте додамо трохи нових крутих фішок до нашого сайту, щоб подивитись, що ми можемо з ним робити.

+ +

Додамо зміну картинок

+ +

У цій частині, ми додамо ще зображень засобами DOM API, викорстовуючи JavaScript, щоб переключатись між ними, коли хтось клікне на зображення.

+ +
    +
  1. Перш за все, знайдіть ще одне зображення, яке б ви хотіли бачити на своєму сайті. Переконайтесь, що воно має такий же розмір, як і попереднє, або максимально близько до нього за розміром.
    2. +
  2. Збережіть його у папку images .
    3. +
  3. Перейменуйте його на 'firefox2.png' (без лапок, звичайно).
    4. +
  4. Перейдіть до файлу main.js, та введіть цей шматок коду JavaScript. (Якщо ваш  зразок "hello world" досі там, видаліть його.) + 
    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. Збережіть всі файли та відкрийте index.html у браузері. Тепер, коли ви клікатимете на зображення, воно буде замінюватись іншим.
    6. +
+ +

Ви зберігаєте посилання на ваше зображення у змінній myImage. Далі, ви прив'язуєте подію onclick для цієї змінної до функції, що не має імені(анонімної). Зараз, щоразу, коли ви клікнете на цей елемент:

+ +
    +
  1. Ви поновлюєте значення атрубуту зображення src .
    2. +
  2. Використовуєте умову для перевірки, чи значення src рівне шляху до першого зображення: +
      +
    1. Якщо так, ви змінюєте значення src на шлях до другого зображення, змушуючи вже друге зображення завантажитись до елемента {{htmlelement("image")}}.
      2. +
    2. Якщо ні (значить зміни вже відбувались), значення src замінюється назад до оригінального зображення, в первинний стан.
      3. +
    +
    3. +
+ +

Персоналізоване привітання

+ +

Далі ми допишемо шматок коду, що змінить заголовок сторінки на особисте привітання, коли користувач вперше відвідує сторінку. Це повідомлення залишиться, якщо користувач покине сайт та повернеться знову - ми збережемо його засобами Web Storage API. Ми також додамо можливість змінити користувача і, відповідно, привітання, як тільки буде потрібно.

+ +
    +
  1. До index.html додамо наступний код, прямо перед елементом {{htmlelement("script")}}: + + 
    <button>Change user</button>
    +
    2. +
  2. У файлі main.js, в  кінці вставте наступний код . Він отримує посилання на нову кнопку та заголовок і зберігає їх до нових відповідних змінних: + 
    var myButton = document.querySelector('button');
+var myHeading = document.querySelector('h1');
    +
    3. +
  3. Тепер додамо наступні функції, щоб налаштувати персоналізоване привітання - воно в такому стані не працюватиме, та скоро ми це виправимо: + 
    function setUserName() {
+  var myName = prompt('Please enter your name.');
+  localStorage.setItem('name', myName);
+  myHeading.textContent = 'Mozilla is cool, ' + myName;
+}
    + Ця функція містить функцію prompt(), яка викликає діалогове вікно, подібно до alert(). Функція prompt(), однак, запитує в користувача дані, зберігаючи їх у відповідній змінній одразу після того як буде натиснута кнопка OK. В цьому випадку, ми питаємо в користувача його ім'я. Далі, ми звертаємось до API, що має назву localStorage, що дозволяє нам зберігати дані у браузері, а потім звертатись до них. Ми використовуємо з localStorage функцію setItem(), щоб створити та зберегти дані в 'name', та присвоїти це значення змінній myName, що міститиме дані, введені користувачем. Наприкінці, присвоюємо textContent заголовка рядок, додаючи щойно збережене користувачем ім'я.
    4. +
  4. Після цього, допишемо цей блок if ... else — ми можемо назвати його ініціалізацією, оскільки він структуруватиме логіку сторінки при запуску: + 
    if(!localStorage.getItem('name')) {
+  setUserName();
+} else {
+  var storedName = localStorage.getItem('name');
+  myHeading.textContent = 'Mozilla is cool, ' + storedName;
+}
    + Блок спочатку використовує оператор заперечення (логічне NOT, представлене "!") щоб перевірити, чи існують дані name. Якщо ні, функція setUserName() запуститься, щоб створити їх. Якщо існують (означає, що вони були створені, коли користувач минулого разу відвідував сайт), ми поновлюємо збережене ім'я за допомогою getItem() та присвоюємо заголовку textContent рядок, додаючи ім'я користувача, так само, як і у setUserName().
    5. +
  5. Для завершення, прив'яжемо подію onclick до кнопки. Коли відбудеться клік, функція setUserName() запуститься. Це дозволить змінювати ім'я користувача, коли виникне в цьому потреба, натиснувши на кнопку: + 
    myButton.onclick = function() {
+  setUserName();
+}
+
    +
    6. +
+ +

Тепер при, першому відвідуванні сайту, він запитає ваше ім'я, а потім відобразить персоналізоване привітання. Ви в будь-який момент можете змінити ім'я, натиснувши на кнопку. Як бонус, через те, що ім'я зберігається у localStorage, воно залишиться навіть, якщо закрити сторінку, зберігаючи персоналізоване привітання з вашим іменем!

+ +

Висновок

+ +

Якщо ви слідували всім інструкціям, під кінець у вас мало б вийти щось накшталт цього (якщо ні, то можете подивитись нашу версію тут):

+ +

+ +

Якщо ви десь застрягли, можете порівняти свою роботу з нашим завершеним зразком коду на Github.

+ +

Тут ми ледь пошкрябали велику глибу можливостей JavaScript. Якщо вам сподобалось і ви бажаєте продовжити, перейдіть на наш план вивчення 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/uk/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/uk/learn/getting_started_with_the_web/publishing_your_website/index.html new file mode 100644 index 0000000000..a0d1a5e00f --- /dev/null +++ b/files/uk/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -0,0 +1,111 @@ +--- +title: Публікація вашого сайту +slug: Learn/Getting_started_with_the_web/Publishing_your_website +tags: + - Веб-сервер + - Доменне ім'я + - Мова + - Початківцям + - Публікація + - Українська + - Хостинг +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")}}
+ +
+

Коли ви закінчили писати код і організували всі файли, які складають ваш проект, ви маєте викласти все це онлайн, щоб ваш веб-сайт можна було побачити. У цій статті пояснюється, як без особливих зусиль викласти простий веб-сайт онлайн. 

+
+ +

Які варіанти?

+ +

Публікація сайту є складною темою, переважно тому, що існує дуже багато шляхів як це зробити. У цій статті ми не ставимо за мету розказати про всі можливі варіанти. Натомість ми поговоримо про "плюси" і "мінуси" трьох найбільш популярних стратегій виходу в онлайн з точки зору початківців, а потім розкажемо про один із способів, який нам найбільше підходить на даному етапі. 

+ +

Хостинг і доменне ім'я

+ +

Якщо ви хочете повністю контролювати ваш опублікований веб-сайт, то вам потрібно купити:

+ + + +

Багато професійних веб-сайтів виходять онлайн таким способом. 

+ +

На додачу, вам знадобиться програма {{Glossary("FTP", "File Transfer Protocol (FTP)")}} (див. How much does it cost: software), щоб передавати ваші файли на сервер. Є багато різних програм FTP, але загалом для користування вам потрібно залогінитися на ваш веб-сервер (реєстраційні данні, наприклад, ім'я користувача, пароль, ім'я хоста, надаються хостинговою компанією). Потім програма покаже ваші локальні файли і файли на веб-сервері у двох вікнах, так що ви зможете переносити файли туди і назад:

+ +

+ +

Поради з пошуку хостингу і доменів

+ + + +

Онлайн-інструменти GitHub і Google App Engine

+ +

Деякі інструменти дозволяють вам публікувати ваш сайт онлайн:

+ + + +

На відміну від більшості хостингів, такі інструменти переважно безкоштовні, але з обмеженою кількістю функцій. 

+ +

Веб-середовища розробки (IDE), такі як Thimble

+ +

Є кілька веб-додатків, які відтворюють середовище веб-розробки онлайн, дозволяючи писати HTML, CSS і JavaScript і відображаючи оброблений результат — і все це у вкладці браузера. Ці інструменти прості у користуванні, чудово підходять для навчання і є безкоштовними (принаймні базові функції), крім того, вони хостять вашу сторінку за її унікальною адресою. Однак, базові функції доволі обмежені, і такі сервіси зазвичай не надають місця для зберігання матеріалів сайту (наприклад, зображень).

+ +

Спробуйте покористуватися сервісами нижче і виберіть, який підходить вам найбільше:

+ + + +

+ +

Публікація через GitHub

+ +

Тепер поговоримо про те, як легко опублікувати ваш сайт за допомогою GitHub Pages.

+ +
    +
  1. По-перше, зареєструйтеся на GitHub і підтвердіть вашу електронну адресу.
    2. +
  2. Далі, створіть репозиторій, у якому будуть зберігатися фаші файли.
    3. +
  3. На цій сторінці, у полі Repository name введіть username.github.io, де username це ваше ім'я користувача. Наприклад, наш друг bobsmith ввів би bobsmith.github.io.
    + Також поставте "галочку" в полі Initialize this repository with a README і потім клікніть Create repository.
    4. +
  4. Після цього, перетягніть файли вашого сайту в репозиторій і клікніть Commit changes.
    + +
    +

    Примітка: переконайтеся, що ваша папка має файл index.html.

    +
    +
    5. +
  5. +

    Тепер у браузері перейдіть за адресою username.github.io, щоб побачити ваш сайт онлайн. Наприклад, користувач з іменем chrisdavidmills має перейти на chrisdavidmills.github.io.

    + +
    +

    Примітка: публікація вашого сайту онлайн може зайняти кілька хвилин. Якщо ви не побачите його відразу, почекайте кілька хвилин і спробуйте знову. 

    +
    +
    6. +
+ +

Щоб дізнатися більше, дивіться GitHub Pages Help.

+ +

Додаткові матеріали

+ + + +

{{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")}}

diff --git a/files/uk/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/uk/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html new file mode 100644 index 0000000000..3a64823681 --- /dev/null +++ b/files/uk/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -0,0 +1,118 @@ +--- +title: Який вигляд матиме ваш сайт? +slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like +tags: + - Вміст + - Дизайн + - Навчання + - Початківець + - матеріали + - планування + - шрифти +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")}}
+ +
+

В Який вигляд матиме ваш сайт? ми розглянемо, яку попередню планувальну та дизайнерську роботу потрібно зробити до того, як ви почнете писати код. Яку інформацію надаватиме сайт, які шрифти та кольори використати та що фактично робитиме веб-сторінка. 

+
+ +

Спершу планування

+ +

Перш, ніж щось робити, потрібні ідеї. Що саме ваш сайт має робити? Він може що завгодно, але для першого разу краще обрати щось простіше. Почнемо з простої веб-сторінки зі заголовком, зображенням і кількома абзацами. 

+ +

Для початку дайте відповідь на запитання:

+ +
    +
  1. Про що ваш сайт? Ви любите собак, Нью-Йорк, Пекмена?
    2. +
  2. Яку інформацію по темі ви маєте надати? Напишіть заголовок і кілька абзаців і подумайте щодо зображення для них. 
    3. +
  3. Який вигляд матиме ваш сайт у загальних простих термінах? Який колір тла? Які шрифти підійдуть: ділові, коміксні, грубі та крикливі, прості?
    4. +
+ +
+

Примітка: складні проекти вимагають детальної документації, включно з вказаними конкретно кольорами, шрифтами, відстанями між частинами контенту, стилем тексту тощо. Іноді це називається посібником зі стилю чи бренд-буком.

+
+ +

Ескіз вашого дизайну

+ +

Візьміть олівець і папір та приблизно замалюйте  вигляд вашого сайту. Для простої сторінки не варто малювати багато, але вам потрібно виробити звичку це робити. Це справді допомагає — вам не потрібно бути Ван Гогом!

+ +

+ +
+

Примітка: навіть у випадку справжніх складних сайтів команда дизайнерів починає з попередніх ескізів на папері, а вже потім робить цифрові макети у графічному редакторі чи онлайн-сервісах. 

+ +

Команди веб-розробників зазвичають мають графічного дизайнера і дизайнера по {{Glossary("ДК", "досвіду користування")}}. Графічні дизайнери відповідають за візуальну складову сайту. Дизайнери по досвіду користування — за те, як відвідувачі будуть користовуватись сайтом та взаємодіяти з ним. 

+
+ +

Вибір матеріалів

+ +

На цьому етапі починіть працювати над вмістом, який потім з'явиться на вашій веб-сторінці.

+ +

Текст

+ +

Попередньо ви вже маєте свої тексти та назви. Тримайте їх напоготові. 

+ +

Кольорова тема

+ +

Щоб вибрати колір, який вам подобається, скористайтеся Color Picker. Коли ви клацнете по кольору, ви побачите незвичну комбінацію з шести символів, на зразок #660066. Це — hex-код (від hexadecimal — шістнадцяткова системи числення), що відповідає вибраному кольору. Збережіть десь.

+ +

+ +

Зображення

+ +

Щоб вибрати зображення, пошукайте щось на Google Images.

+ +
    +
  1. Коли ви знайдете потрібне, то кляцніть по зображенню. 
    2. +
  2. Натисніть кнопку «Переглянути зображення».
    3. +
  3. На наступній сторінці, правою кнопкою миші кляцніть по зображенню, виберіть «Зберегти як...» і  десь його збережіть. Або скопіюйте веб-адресу зображення, щоб скористатись потім.
    4. +
+ +

+ +

+ +
+

Примітка: більшість зображень у мережі, включно з Google Images, захищені авторським правом. Щоб не порушити його, скористайтеся фільтром прав: 1) клацніть по Інструменти, а потім по 2) Права на використання:

+ +

+
+ +

Шрифт

+ +

Вибір шрифту:

+ +
    +
  1. Щоб знайти шрифт, який вам подобається, зайдіть на Google Fonts і погортайте сторінку. Також можете скористатися фільтром справа.
    2. +
  2. Натисніть значок "плюс" (Select this font) поруч із потрібним шрифтом.
    3. +
  3. Натисніть кнопку «* Family Selected» на панелі в низу сторінки («*» залежить від кількості вибраних шрифтів).
    4. +
  4. У спливаючому вікні побачите рядки коду. Можете скопіювати їх, щоб зберегти на потім. 
    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")}}

+ +

 

+ +

У цьому розділі

+ + + +

 

diff --git "a/files/uk/learn/getting_started_with_the_web/\321\226\320\275\321\202\320\265\321\200\320\275\320\265\321\202_\321\202\320\260_\320\262\320\265\320\261-\321\201\321\202\320\260\320\275\320\264\320\260\321\200\321\202\320\270/index.html" "b/files/uk/learn/getting_started_with_the_web/\321\226\320\275\321\202\320\265\321\200\320\275\320\265\321\202_\321\202\320\260_\320\262\320\265\320\261-\321\201\321\202\320\260\320\275\320\264\320\260\321\200\321\202\320\270/index.html" new file mode 100644 index 0000000000..c25cffdea8 --- /dev/null +++ "b/files/uk/learn/getting_started_with_the_web/\321\226\320\275\321\202\320\265\321\200\320\275\320\265\321\202_\321\202\320\260_\320\262\320\265\320\261-\321\201\321\202\320\260\320\275\320\264\320\260\321\200\321\202\320\270/index.html" @@ -0,0 +1,164 @@ +--- +title: Інтернет та веб-стандарти +slug: Learn/Getting_started_with_the_web/Інтернет_та_веб-стандарти +translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards +--- +

{{learnsidebar}}

+ +

This article provides some useful background on the Web — how it came about, what web standard technologies are, how they work together, why "web developer" is a great career to choose, and what kinds of best practices you'll learn about through the course.

+ +

Brief history of the web

+ +

We'll keep this very brief, as there are many (more) detailed accounts of the web's history out there, which we'll link to later on (also try searching for "history of the web" in your favorite search engine and see what you get, if you are interested in more detail.)

+ +

In the late 1960s, the US military developed a communication network called ARPANET. This can be considered a forerunner of the Web, as it worked on packet switching, and featured the first implementation of the TCP/IP protocol suite. These two technologies form the basis of the infrastructure that the internet is built on.

+ +

In 1980, Tim Berners-Lee (often referred to as TimBL) wrote a notebook program called ENQUIRE, which featured the concept of links between different nodes. Sound familiar?

+ +

Fast forward to 1989, and TimBL wrote Information Management: A Proposal and HyperText and CERN; these two publications together provided the background for how the web would work. They received a fair amount of interest, enough to convince TimBL's bosses to allow him to go ahead and create a global hypertext system.

+ +

By late 1990, TimBL had created all the things needed to run the first version of the web — HTTP, HTML, the first web browser, which was called WorldWideWeb, an HTTP server, and some web pages to look at.

+ +

In the next few years that followed, the web exploded, with multiple browsers being released, thousands of web servers being set up, and millions of web pages being created. OK, that's a very simple summary of what happened, but I did promise you a brief summary.

+ +

One last significant data point to share is that in 1994, TimBL founded the World Wide Web Consortium (W3C), an organization that brings together representatives from many different technology companies to work together on the creation of web technology specifications. After that other technologies followed such as CSS and JavaScript, and the web started to look more like the web we know today.

+ +

Web standards

+ +

Web standards are the technologies we use to build web sites. These standards exist as long technical documents called specifications, which detail exactly how the technology should work. These documents are not very useful for learning how to use the technologies they describe (this is why we have sites like MDN Web Docs), but instead are intended to be used by software engineers to implement these technologies (usually in web browsers).

+ +

For example, the HTML Living Standard describes exactly how HTML (all the HTML elements, and their associated APIs, and other surrounding technologies) should be implemented.

+ +

Web standards are created by standards bodies — institutions that invite groups of people from different technology companies to come together and agree on how the technologies should work in the best way to fulfill all of their use cases. The W3C is the best known web standards body, but there are others such as the WHATWG (who were responsible for the modernization of the HTML language), ECMA (who publish the standard for ECMAScript, which JavaScript is based on), Khronos (who publish technologies for 3D graphics, such as WebGL), and others.

+ +

"Open" standards

+ +

One of the key aspects of web standards, which TimBL and the W3C agreed on from the start, is that the web (and web technologies) should be free to both contribute and use, and not encumbered by patents/licensing. Therefore anyone can write the code to build a website for free, and anyone can contribute to the standards creation process, where the specs are written.

+ +

Because web technologies are created openly, in collaboration between many different companies, it means that no one company gets to control them, which is a really good thing. You wouldn't want a single company suddenly deciding to put the entire web behind a paywall, or releasing a new version of HTML that everyone has to buy to continue making web sites, or worse still, just deciding they aren't interested any more and just turning it off.

+ +

This allows the web to remain a freely-available public resource.

+ +

Don't break the web

+ +

Another phrase you'll hear around open web standards is "don't break the web" — the idea is that any new web technology that is introduced should be backwards compatible with what went before it (i.e. old web sites will still continue to work), and forwards compatible (future technologies in turn will be compatible with what we currently have). As you go through the learning material presented here, you'll start to learn how this is made possible with some very clever design and implementation work.

+ +

Being a web developer is good

+ +

The web industry is a very attractive market to enter if you are looking for a job. Recent published figures say that there are currently around 19 million web developers in the world, and that figure is set more than double in the next decade. And at the same time, there is a skill shortage in the industry — so what better time to learn web development?

+ +

It isn't all fun and games however — building web sites is a more complicated proposition than it used to be, and you'll have to put some time in to studying all the different technologies you need to use, all the techniques and best practices you need to know, and all the typical patterns you'll be called upon to implement. It'll take you a few months to really start to get into it, and then you'll need to keep learning so that your knowledge stays up-to-date with all the new tools and features that appear on the web platform, and keep practicing and refining your craft.

+ +

The only constant is change.

+ +

Does this sound hard? Don't worry — we aim to give you everything you need to know to get started, and things will get easier. Once you embrace the constant change and uncertainty of the web, you'll start to enjoy yourself. As a part of the web community, you'll have an entire web of contacts and useful material to help you, and you'll start to enjoy the creative possibilities it brings.

+ +

You're a digital creative now. Enjoy the experience, and the potential for earning a living.

+ +

Overview of modern web technologies

+ +

There are a number of technologies to learn if you want to be a front-end web developer. In this section we will describe them briefly. For a more detailed explanation of how some of them work together, read our article How the web works.

+ +

Browsers

+ +

You are probably reading these words inside a web browser in this very moment (unless you've printed it out, or are using assistive technology, such as a screenreader to read it out to you). Web browsers are the software programs people use to consume the web, and include Firefox, Chrome, Opera, Safari, and Edge.

+ +

HTTP

+ +

Hypertext Transfer Protocol, or HTTP, is a messaging protocol that allows web browsers to communicate with web servers (where web sites are stored). A typical conversation goes something like

+ +
"Hello web server. Can you give me the files I need to render bbc.co.uk"?
+
+"Sure thing web browser — here you go"
+
+[Downloads files and renders web page]
+ +

The actual syntax for HTTP messages (called requests and responses) is not that human-readable, but this gives you the basic idea.

+ +

HTML, CSS, and JavaScript

+ +

HTML, CSS, and JavaScript are the main three technologies you'll use to build a website:

+ + + +

Tooling

+ +

Once you've learned the "raw" technologies that can be used to build web pages (such as HTML, CSS, and JavaScript), you'll soon start to come across various tools that can be used to make your work easier or more efficient. Examples include:

+ + + +

Server-side languages and frameworks

+ +

HTML, CSS, and JavaScript are front-end (or client-side) languages, which means they are run by the browser to produce a website front-end that your users can use.

+ +

There are another class of languages called back-end (or server-side) languages, meaning that they are run on the server before the result is then sent to the browser to be displayed. A typical use for a server-side language is to get some data out of a database and generate some HTML to contain the data, before then sending the HTML over to the browser to display it to the user.

+ +

Example server-side languages include ASP.NET, Python, PHP, and NodeJS.

+ +

Web best practices

+ +

We have briefly talked about the technologies that you'll use to build websites. Now let's discuss the best practices you should employ to make sure you are using those technologies in the best way that you can.

+ +

When doing web development, the main cause of uncertainty comes from the fact that you don't know what combination of technology each user will use to view your web site:

+ + + +

Because you don't know exactly what your users will use, you need to design defensively — make your web site as flexible as possible, so that all of the above users can make use of it, even if they might not all get the same experience. In short, we are trying to make the web work for all, as much as possible.

+ +

You'll come across the below concepts at some point in your studies.

+ + + +

See also

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