Базовий інструментарій веб-розробника

Мета роботи. Ознайомитися з набором базовим інструментарієм для веб-розробника: з безкоштовними майданчиками для хостингу веб-проектів. Набути навичок з користування панеллю керування, налаштування параметрів хоста та вибору доменного імені. Розміщення веб-документів на хостингу за допомогою FTP-клієнтів.

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

Перед початком роботи над створенням сайту потрібно здійснити ряд підготовчих етапів:

  1. Зареєструвати хостинговий майданчик, для фізичного розміщення сайту в Інтернеті.
  2. Зареєструвати доменну адресу, за якої сайт буде відомий для користувачів та пошукових систем.
  3. Встановити на комп'ютері відповідні програми – базовий інструментарій веб-розробника:
    • Редактори для написання коду.
    • Графічні редактори для створення та оброблення зображень.
    • Поширені браузери для наочного перегляду результатів кодування.
    • Програми з FTP-клієнтом для перенесення документів сайту на хостинг.
  4. Широкосмугове під'єднання до Інтернету

Реєстрація хостингу

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

  • Не потрібно платити. Розробник початківець тільки починає робити перші кроки і мало обізнаний в нюансах розміщення, показниках якості хостинга, налаштуваннях панелі та акаунту. Тому, варто, безкоштовно опанувати прийоми і зауважити ті критерії, які важливі для ефективної роботи: простота налаштувань, зручність адміністративної панелі, наявність вбудованих редакторів та файлових менеджерів.
  • Безкоштовний тариф пропонує послуги аналогічні до платних. Надаються всі основні можливості (з певними функціональними обмеженнями), що потрібні для розміщення сайту: дисковий простір, підтримка мов програмування, під'єднання до баз даних, встановлення поширеної CMS - системи управління контентом, створення поштового акаунту та інше.
  • Технічна підтримка. Користувачам надаються конструктори та інші інструменти, що полегшують створення, підтримку та просування сайту. Повсюдно присутня довідкова система, яка охоплює багато загальних та специфічних проблем, з якими стикаються початківці. Наявність спільнот так само містить багато форумів та обговорень, де можна завжди з'ясувати шляхи вирішення най поширених проблем.
  • Можливість отримання безкоштовної доменної адреси 3 рівня. Безкоштовні хостинги надають можливості для вибору будь якого під домену до основного домену хостингу. Початківець позбувається проблеми щодо реєстрації, оплати та підтримки доменної адреси.

Звісно, що безкоштовний хостинг має й обмеження:

  • Обмежений дисковий простір, але цілком достатній для розміщення нескладного сайту. На сьогодні цей показник складає від 1Гб і більше.
  • Не має гарантій щодо захисту та доступності сайту. На таких площадках не роблять резервні копії сайтів і тому, у разі збоїв серверів сайт може бути пошкоджений або знищений без можливості відновлення. Створення резервних копій є турботою власника сайту.
  • Деякі безкоштовні хостинги мають дохід за рахунок реклами: де, скільки і за якою тематикою буде реклама на сайті користувача вирішують власники сервісу. Як правило, заборонено розміщувати власну рекламу і будь-яку іншу комерційну інформацію.
  • Можуть бути присутні обмеження на тримання файлів певного формату (аудіо, відео, скрипти), а також на просте складування документів.
  • При явній популярності сайту власники хостингу можуть висунути умови перенесення ресурсу на платний тариф, погрожуючи знищенням сайту. Прикрий випадок, коли вкласти багато часу, сил і фінансових коштів в створення сайту, в його наповнення контентом і просування. Закрити сайт, коли він вже став популярним і має чималу аудиторію відвідувачів не завжди просто.

Абсолютно надійних безкоштовних хостингів не існує, але при виборі безкоштовного хостингу слід:

  • Віддавати перевагу більш популярним сервісам, бажано з давньою історією та хорошою репутацією.
  • Заздалегідь почитати відгуки про даний хостингу в Інтернеті: чи достатньо там функціональних можливостей, наскільки зручно користуватися цим сервісом (способи редагування файлів і завантаження на сервер, кількість і різноманітність готових шаблонів дизайну).

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

Безкоштовний хостинг в Україні

  • ZZZ. Найкращі безкоштовні хостингові послуги для веб-сайту та пошти, можливість зареєструвати домен або користуватись вже зареєстрованим у іншого реєстратора, автоматичне встановлення CMS (WordPress, Joomla та багатьох інших), широкий вибір версій РНР, бази даних MySQL і SQLite, безлімітна передача даних, інтегроване програмне забезпечення для веб-аналітики, швидка активація послуг.
  • 000webhost. Надає якісний безкоштовний хостинг без реклами. Гарантія роботи серверів - 99.9%. Підтримка останніх версій PHP і MySQL практично без обмежень. Повністю підтримуються Curl, GD2, Zend, XML, fopen (), PHP сокети, Ioncube Loader, htaccess і інші PHP функції. Для кожного акаунту виділяється практично необмежене місце на диску і трафік з необмеженим під'єднанням до серверів. Доступ до Авто-встановника понад 50 популярних CMS таких, як WordPress, Drupal, Joomla, OS Commerce, Photo Gallery та інших. Наявність безкоштовного Конструктора сайтів.
  • HO.UA. Надає безкоштовний хостинг для нескладних сайтів без розміщення реклами. Добре підходить для CMS без бази даних (Nano CMS, CMS Simple, Kandidat CMS, Zebrum Lite, Meruert). Хостинг пропонує 1 Гб дискового простору, 1 сайт і до 10 доменів для цього сайту. Підтримка PHP, MySQL, CGI, SSI, Perl, Python, crontab, htaccess. До недоліків можна віднести обмеження навантаження на базу даних, відсутність можливості створити поштову скриньку зі своїм доменом, необхідність хоча б раз на 30 днів відвідувати аккаунт.
  • Hostkoss. Безкоштовний тариф підійде для невеликого сайту без розміщення реклами. Надається розміщення сайту з доступом до всіх основних функцій управління і розвитку платформи. Доступне використання популярних CMS, зокрема, WordPress або Joomla. Достатньої уваги приділено до безпеки - захист від шкідливих програм та DDoS атак, перевірка файлів на віруси. Користувач може налаштувати систему резервного страхування, яка в автоматичному режимі буде створювати копії сайту.

Вибір доменного імені

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

  • Легко запам'ятовується. Користувачі все рідше вводять в адресний рядок назву сайту, частіше переходять просто по посиланнях або вводять назву сайту в рядок пошукової системи. Тому, добре дотримуватися і правила «чим коротше назва, тим його легше запам'ятати».
  • Легко вимовляється. Доменне ім'я має легко вимовлятися, так відвідувачам буде легше його запам'ятати. Варто уникати використання в імені дефісів та вживання неоднозначної транслітерації: х (h, kh), ц (ts, z), в (w, v), до (c, k, ck), ф (f, ph). Наприклад, доменні імена foto.ua і photo.ua звучать абсолютно однаково – фото, але написання літер є різним.
  • Має зрозумілий сенс. Ідеально, коли за назвою зрозуміло, яка тематика сайту. Якщо просувається бренд, то домен варто називати так само, якщо це особистий блог - то можна назвати сайт за іменем чи прізвищем автора.
  • Просте написання. Чим довше і складніше доменне ім'я - тим важче буде відвідувачам правильно його написати. Коректне введення довгого доменного імені може виявитися занадто складним. Наприклад, багаторазовий повтор складів як blablablablablabla, в якому кількість повторень запам'ятати просто нереально.

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

  • Підхід 1: створення веб-сайту з нуля. Знання HTML, CSS, JavaScript, мови серверного програмування та бази даних.
  • Підхід 2: створення сайту за допомогою CMS. (лабораторна робота №6).
  • Підхід 3: створення сайту за допомогою конструкторів (лабораторна робота №1).

Створення веб-сайту з нуля

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

Нижче запропоновано мінімальний перелік засобів, які повинні мати розробники в своєму розпорядженні перед тим, як братися за розробку Інтернет проекту. Дані програми розраховані на використання під управлінням операційної системи Windows.

Для повноцінної роботи веб-розробнику необхідно:

  • Редактори для написання коду або інтегровані середовища розробки IDE.
  • Графічний редактор (для растрової, векторної та анімованої графіки).
  • Інструменти для тестування та розміщення сайту: браузери та FTP-клієнти.

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

Програми для кодингу

Текстові HTML-редактори

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

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

Недоліки у текстових html-редакторів:

  • Відсутність можливості бачити результат безпосередньо під час написання коду сторінки. Потрібно відкривати браузер і в ньому дивитися, як виглядає сайт на даному етапі.
  • Обов'язкове знання мови HTML. Без попереднього вивчення HTML працювати буде врай складно.

Notepad ++

Текстовий html-редактор Notepad++Notepad ++ є швидким, легким та багатим на функціональні можливості. Один з кращих безкоштовних текстових редакторів для кодування в HTML, CSS, JavaScript і PHP. Редактор підтримує різні мови програмування і зокрема HTML-кодування. Додаток призначений для роботи в операційних системах Windows, Linux, Unix, Mac OS X, підтримує протокол FTP та зовнішні плагіни, включаючи макроси. Notepad ++ підтримує можливість виділення помилки і допомагає в написанні безпомилкового коду.

До недоліків можна віднести:

  1. Віддалене редагування файлів не підтримує HTTP, SSH або WebDav.
  2. Не підтримує великі файли.
  3. Для запуску додатка в Mac OS X потрібно стороння програма (Wine).

Інтегровані середовища розробки IDE

Sublime Text

Текстовий html-редактор SubLimeSublime text - компактний, але потужний редактор HTML і PHP. Він надає IDE-подібні функції з можливістю налаштування редактора і добре підходять для програмування на боці сервера. Пропонує крос-платформену підтримку, інтеграцію Haxe і OpenFL через підтримку плагіна. Має зручний для початківців інтерфейс, чорний фон, підтримку тем оформлення TextMate і Windows, виділення синтаксичних помилок.

До недоліків можна віднести:

  1. Погана підтримка для Linux.
  2. Відкривання великих файлів займає час, часто бувають збої.
  3. Безкоштовно для пробних / $ 70 для безперервного використання.

Visual Studio

Visual Studio CodeVisual Studio Code - це платформа від Microsoft з відкритим вихідним кодом і може використовуватися на будь-яких основних платформах, таких як Windows, Mac OS X і Linux.

Програма дуже легка і не споживає більшу частину ОЗУ і сприяє швидкому доступу та реалізації. Підтримує більше 30 мов програмування, включаючи основну мову Microsoft ASP.NET, C #. Дозволяє управляти GitHub і пропонує функції налагодження. До недоліків можна віднести постійне оновлення.


Adobe Dreamweaver

Визуальний html-редактор Adobe DreamweaverAdobe Dreamweaver є визнаним лідером, завдяки дружньому інтерфейсу, формування мінімально надлишкового коду, автоматичній генерації скриптів і багатьох зручностей.

Adobe Dreamweaver - потужне програмне середовище для створення веб- проектів. Adobe Dreamweaver надає інструменти для написання коду в різних мовах: HTML, CSS, JavaScript, PHP та інших. Підтримуються останні версії та стандарти. До програми приєднано jQuery, отже користувач з легкістю може використовувати Java-скрипти при створенні веб-сторінки. Adobe Dreamweaver має панель «багатоекранного перегляду» адаптивних проектів для різних пристроїв: комп'ютерів, планшетів, телефонів.

Для початківців Dreamweaver - просто знахідка! При створенні перших сайтів він здатний значно полегшити навчання. Є сервіс підказок і пристойну кількість шаблонів, елементів оформлення, скриптів - за допомогою цього початківець легше і швидше опанує кодування.

Графічні редактори

Растровий редактор Web Pixlr Editor

Растровий редактор Web Pixlr EditorPixlr Editor - популярний графічний онлайн-редактор, що є безкоштовною полегшеною версією Photoshop, яка не вимагає встановлення на комп'ютер. Редактор має велику кількість інструментів, фільтрів, ефектів, які допоможуть створити/редагувати зображення.

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

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

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

Векторний редактор Method Draw

Векторний редактор Method Draw

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

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

Векторні ілюстрації можна створювати з нуля, вибирати потрібні розміри полотна, використати лише одне перо. Додатково редактор спроможний перетворити зображення в контур, а також надати можливість перегляду «вихідного коду» SVG.

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

Інструменти для тестування та розміщення сайту

Браузери

Основним призначенням браузера є відображення веб-ресурсів. За виведення вмісту сторінки у вікно браузера відповідає важливий елемент - модуль відображення. За замовченням модуль відображення здатний відображати HTML-документи, зображення, а також багато об‘єктів в різних форматах: PDF-файли, мультимедійні файли, динамічні об'єкти.

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

internet-explorer Trident. Розроблено компанією Microsoft. Використовується в багатьох браузерах: Internet Explorer, Windows Mobile, AOL Browsers
EdgeHTML. Браузерний модуль від Microsoft, який втілено в Microsoft Edge. Є гілкою від Trident з видаленням застарілого коду і заміною його на більш сучасний.
Gecko. Модуль з відкритим вихідним кодом, який розроблено ще за часів браузера Netscape, але почав використовуватися тільки з браузера Mozilla Firefox.
WebKit. Модуль з відкритим кодом, що розроблено компаніями Google, Apple, Nokia та іншими. Спочатку було розроблено для платформи Linux і адаптовано компанією Apple для Mac OS і Windows. Використовується в браузері Safari від Apple і в багатьох браузерах мобільних пристроїв.
Chrome
opera
Blink. Заснований на WebKit, що розробляється Google. Використовується в браузері Google Chrome, Opera і браузерах для мобільних пристроїв на Android.

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

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

FTP-клієнт для доступ до хостингу

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

  • Доступ за допомогою веб-інтерфейсу. Це наочний зручний інструмент, який надається хостинг-компанією для розробників.
  • Доступ за допомогою програм з вбудованим FTP-клієнтом.

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

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

Звичайні файлові менеджери

Total Commander

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

Інтерфейс вибору команд для FTP-з'єднання у Total Commander
Інтерфейс вибору команд для FTP-з'єднання у Total Commander

Спеціалізовані FTP-клієнти

SmartFTP, FileZilla

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

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

Інтерфейс вибору команд для FTP-з'єднання у FileZilla
Інтерфейс вибору команд для FTP-з'єднання у FileZilla

Основні веб-мови

  • HTML (Hyper Text Markup Language). Основна структурна мова для веб-сторінок і веб-додатків, яка робить контент зрозумілим для веб-браузера.
  • CSS (каскадні таблиці стилів). Стилі, які використовуються для оформлення розмітки HTML на веб-сторінці.
  • JavaScript (клієнтська мова). Використовується для додавання динаміки елементів на сторінці. Цю мову розуміє будь-який браузер і вона використовується як для динамічних так і для статичних сайтів
  • PHP, Python, Ruby та інші (мови серверного програмування). Мови написання різноманітних сценаріїв для складних, динамічних сайтів. Файли сценаріїв задають систему поведінки сайту, реакції на дії користувача, формування сторінок, відповідно до запиту і подібне
  • MySQL, MongoDB, PostgreSQL та інші (системи управління базами даних). Великі таблиці інформації, що використовуються для зберігання, управління і доступу до користувцьких даних на веб-сайті розглядається, яка називається базою даних. Система управління базами даних використовується на стороні сервера для ефективного виконання завдань, що прописані в сценаріях.

Покроковий процес створення простої веб-сторінки

1. Дизайн сайту за допомогою графічного редактора

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

Відеоурок по Photoshop
Відеоурок по Photoshop

2. Створення HTML і CSS коду сторінки

На підставі створеного макету сторінки починають створювати HTML-код. Секрет швидкого навчання полягає в тому, що немає необхідності вивчати весь HTML. Щоб створити достатньо функціональний сайт, не треба знати весь HTML - там багато нюансів, які ускладнюють життя і їх можна опустити. Якщо знати хоча б 20% зі всього HTML, то можна використовувати його, як використовують 80% розробників сайтів. Решта 20% можна залишити програмістам і професіоналам.

Відеоурок по HTML
Відеоурок по HTML

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

Відеоурок по CSS
Відеоурок по CSS

3. Розміщення сторінки на хостингу

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

Відеоурок по FileZilla
Відеоурок по FileZilla

4. Перегляд сторінки в браузері

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

Пошук потрібної сторінки здійснюється в певній директорії, яку відведено на сервері для сайту. Зазвичай, назва директорії збігається з назвою доменної адреси сайту. У разі звернення до сайту в цілому (наприклад, site.ua), веб-сервер автоматично надсилає «стартову сторінку» з назвою index.* (index.html) або в деяких випадках — default.* (default.html).

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

  • Деякі веб-сервери на відміну від комп'ютерів користувачів є чутливими до регістру літер, в якому представлено імена директорій і файлів, тому назви «documents», «DOCUMENTS» або «Documents» будуть позначати різні директорії. Варто назви всіх об'єктів сайту писати рядковими (маленькими) літерами.
  • Щоб уникнути помилок, які пов'язані з відмінностями в обробці кодувань кириличної мови різними серверами, назви варто зазначати латиницею.

Для безпомилкового отримання потрібної інформації і в потрібному форматі використовується універсальний покажчик ресурсу URL (Universal Resource Locator), який однозначно ідентифікує будь-який ресурс в мережі Інтернет. Саме такий рядок відображається в адресному полі браузера.

http://www.site.lviv.ua/documents/page.html або http://213.82.46.1/documents/page.html

Універсальний покажчик ресурсу відображає:

http:// www. site.lviv.ua/ documents/ page.html
протокол служба доменна адреса шлях файл
  • Протокол відповідної служби. В даному прикладі використано протокол http:// – протокол передачі гіпертексту.
  • Назву служби. В даному прикладі це служба Веб - www
  • Доменну або IP-адресу, яка однозначно ідентифікує веб-сервер в мережі Інтернет, на якому розміщено потрібний сайт чи інший ресурс.
  • Шлях, що складається з імен директорій, розділених символом «/» (слеш), послідовно відкриваючи які, можна «дістатися» до потрібної інформації. У даному прикладі інформація знаходиться в директорії «documents».
  • Ім'я файлу, який містить потрібну інформацію. В цьому прикладі інформація знаходиться у файлі page.html.

Якщо браузер використовують для служби Веб, то в адресному полі можна не вказувати назву протоколу і назву служби. Хоча іноді, залежно від налаштувань, веб-сервер скеровує запити www.site.lviv.ua та site.lviv.ua в різні директорії.

Отже, для доступу до створеної сторінки за доменною адресою сайту, потрібно, щоб її назва була якщо сторінка має назву index.html, в противному випадку для доступу буде потрібно вказувати повний шлях до файлу http://yourdomenadress/page.html.

Порядок роботи

  1. Ознайомитися з інформацією стосовно базового інструментарію та початкових знань розробника. Встановити потрібні для роботи програми.
  2. Обрати відповідну безкоштовну хостингову площадку та доменне ім'я. Отримати ідентифікатори для FTP-доступу. Встановити та налаштувати програму FTP-клієнт.
  3. Згідно наведених відео уроків створити код простої сторінку та додати основні стилі. Перевірити роботу в браузері, за необхідності внести зміни та доповнення.
  4. Відкрити FTP-доступ до сервера в різний спосіб: через спеціалізований FTP-клієнт або файловий менеджер від хостингу. Завантажити тестову сторінку на сервер та відкрити її через браузер. Передивитися завантажену на сервер сторінку в різних браузерах і відмітити можливу різницю у відображенні.

Зміст звіту

  1. Назва та мета виконання лабораторної роботи.
  2. Зазначити обраний хостинг та зареєстровану доменну адресу.
  3. Скріншоти послідовності роботи з коротким описом кожного з етапів.
  4. У висновку оцінити зручність обраного хостингу, адміністративної панелі і наявних сервісів. Оцінити зручність використання та можливості різних FTP-клієнтів. Зазначити відмінності у різних браузерах. Зазначити можливості використаних редакторів для макетування та кодування сторінки.

Контрольні питання

  1. Які види хостингу пропонують провайдери?
  2. Які особливості притаманні для віртуального хостинга?
  3. Які особливості притаманні для хмарного хостинга?
  4. Назвіть основні параметри хостингу.
  5. Які критерії вибору хостингу та тарифного плану є вагомими?
  6. З яких причин хостингові компанії надають безкоштовний тариф?
  7. Які причини сприяють вибору безкоштовного хостингу? Які існують застереження щодо використання безкоштовного хостингу?
  8. Яким чином можна доступитися до віддаленого сервера, де зберігаються файли сайту?
  9. Назвіть програми, які містять утиліту для FTP-доступу.
  10. Який модуль у структурі браузерів є визначальним, його основне призначення?