1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
---
title: Початок роботи з Інтернетом
slug: Learn/Getting_started_with_the_web
tags:
- CSS
- HTML
- 'l10n: пріоритет'
- Покажчик
- Посібник
- Початківцям
- Розробка
- Теорія
translation_of: Learn/Getting_started_with_the_web
---
<div>{{LearnSidebar}}</div>
<div class="summary">
<p><em>«</em><em>Початок роботи з Інтернетом»</em> — це серія стислих статей, що знайомить з практичними питаннями веб-розробки. Ви налаштуєте інструменти, необхідні для створення простої веб-сторінки та публікації власного коду.</p>
</div>
<h2 id="Історія_вашого_першого_сайту">Історія вашого першого сайту</h2>
<p>Розробка професійного сайту - це кропітка робота. Радимо не поспішати, якщо ви початківець у веб-програмуванні. Ви не отримаєте відразу новий Facebook, але легко побудуєте свій перший сайт.</p>
<p>Опрацьовуючи статті послідовно, ви розташуєте створену веб-сторінку в інтернеті. Почнемо!</p>
<h3 id="Встановлення_необхідних_програм"><a href="/uk/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення необхідних програм</a></h3>
<p>Є чимало інструментів для побудови сайтів. Початківець може розгубитись, при виборі редакторів коду, фреймворків та засобів для тестів. <a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення необхідних програм</a> поступово допоможе встановити все, що потрібно для простої веб-розробки.</p>
<h3 id="Який_вигляд_матиме_ваш_сайт"><a href="/uk/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Який вигляд матиме ваш сайт?</a></h3>
<p>Перед тим, як почати писати код для сайту, треба мати план. Яку інформацію відобразити? Які кольори та шрифти використати? <a href="/uk/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">Який вигляд матиме ваш сайт?</a> Пропонуємо вам простий спосіб планування змісту та зовнішнього вигляду вашого сайту.</p>
<h3 id="Робота_з_файлами"><a href="/uk/Learn/Getting_started_with_the_web/Dealing_with_files">Робота з файлами</a></h3>
<p>Сайт складається з багатьох файлів: текстів, коду, таблиць стилів, медіа-контенту тощо. Коли створюється сайт, потрібно об'єднати ці файли в логічну структуру та впевнитися, що вони доступні одне одному. <a href="/uk/Learn/Getting_started_with_the_web/Dealing_with_files">Робота з файлами</a> пояснює, як створити логічну структуру файлів для сайту й уникнути типових проблем.</p>
<h3 id="Основи_HTML"><a href="/uk/Learn/Getting_started_with_the_web/HTML_basics">Основи HTML</a></h3>
<p>Hypertext Markup Language (HTML, мова розмітки гіпертексту) — це код, що структурує зміст веб-сторінок та надання йому значення і мети. Наприклад, чи є контент набором параграфів, чи списком із маркерами? Чи є на сторінці зображення, таблиці з даними? В <a href="/uk/Learn/Getting_started_with_the_web/HTML_basics">Основах HTML </a>достатньо інформації для знайомства з HTML.</p>
<h3 id="Основи_CSS"><a href="/uk/docs/Learn/Getting_started_with_the_web/CSS_basics">Основи CSS</a></h3>
<p>Cascading Stylesheets (CSS, каскадні таблиці стилів) — це код для стилізації сайту. Наприклад, який колір тексту, де розміщенно контент на екрані? Які фонові зображення та кольори взято для оздоблення сайту? З <a href="/uk/docs/Learn/Getting_started_with_the_web/CSS_basics">Основ CSS</a> ви дізнаєтесь про стилізацію для початківців.</p>
<h3 id="Основи_JavaScript"><a href="/uk/Learn/Getting_started_with_the_web/JavaScript_basics">Основи JavaScript</a></h3>
<p>JavaScript — це мова програмування, яку використовують для можливості взаємодії з веб-сайтами. А саме: ігри, дії, що відбудутся після натиску на кнопоку або введення даних до форми, створення динамічних стилей, анімацій тощо. <a href="/uk/Learn/Getting_started_with_the_web/JavaScript_basics">Основи JavaScript</a> описують можливості цієї захоплючої мови програмування та як почати нею користовуватись.</p>
<h3 id="Публікація_вашого_сайту"><a href="/uk/Learn/Getting_started_with_the_web/Publishing_your_website">Публікація вашого сайту</a></h3>
<p>Після написання коду та організації файлів вашого сайту, необхідно розмістити його в інтернеті, щоб люди могли побачити результати вашої праці. <a href="/uk/Learn/Getting_started_with_the_web/Publishing_your_website">Публікація вашого коду</a> допоможе як найлегше розмістити ваш код в інтернеті.</p>
<h3 id="Як_працює_Інтернет"><a href="/uk/Learn/Getting_started_with_the_web/How_the_Web_works">Як працює Інтернет </a></h3>
<p>Коли ви заходите на улюблений сайт, виконується безліч фонових завдань, можливо непомітних для вас. <a href="/uk/Learn/Getting_started_with_the_web/How_the_Web_works">Як працює Інтернет</a> описує процеси, які відбуваються, коли ви переглядаєте веб-сторінку на компьютері.</p>
<h2 id="Дивіться_також">Дивіться також</h2>
<ul>
<li><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Веб Демістифікований</a>: Велика серія відеороликів, яка пояснює веб-основи, спрямована на початківця у веб-розробці. Створена <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</li>
<li><a href="/uk/docs/Learn/Getting_started_with_the_web/%D0%86%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82_%D1%82%D0%B0_%D0%B2%D0%B5%D0%B1-%D1%81%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%B8">Інтернет та веб-стандарти</a>: Ця стаття надає корисну загальну інофрмацію про Інтернет - як він виник, які існують веб-технології, як вони співпрацюють, чому стати веб-програмістом - хороший вибір кар'єри, які підходи до вивчення є найкращими в цьому курсі.</li>
</ul>
|
