Засоби розробки веб-сайтів

Основи створення веб-сайтів

Для розробки веб-сайтів використовують різні засоби та технології. Основою створення веб-сторінок є написання HTML-коду.

HTML (Hyper Text Markup Language) — мова розмітки гіпертексту, яка визначає структуру та оформлення веб-сторінки.

Редактори для створення HTML-коду

HTML-код можна створювати у звичайному текстовому редакторі та зберігати у файлі з розширенням .htm або .html.

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

• Блокнот (Windows)
• Notepad++
• Sublime Text
• Brackets
• NetBeans
• Візуальні HTML-редактори (WYSIWYG — “What You See Is What You Get”):
• MS FrontPage
• Adobe Dreamweaver

Такі редактори дозволяють одразу бачити вигляд сторінки без необхідності перегляду файлу в браузері.

Системи керування веб-вмістом (CMS / WCMS)

CMS (Content Management System) — система управління веб-вмістом, що дозволяє створювати й змінювати сайти без необхідності програмувати.

Переваги CMS:

• Можливість створювати сторінки та меню.
• Оформлення дизайну за допомогою шаблонів.
• Робота з файлами та медіа.
• Створення блогів, гостьових книг, форумів.
• Розміщення сторінок на веб-сервері.

Користувачі CMS:

Адміністратор — керує сайтом і налаштуваннями. Автори й редактори — створюють і публікують матеріали.

Популярні CMS:

• WordPress
• Joomla
• Drupal

Онлайн-сервіси для створення сайті

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

Приклади сервісів:

• Google Sites (sites.google.com)
• Weebly (weebly.com)
• Wix (wix.com)
• Ucoz (ucoz.ua)
• Webnode (webnode.com.ua)

Практична робота: Створення та редагування простої HTML-сторінки

1. Відкрийте програму «Блокнот» (Notepad).
2. Скопіюйте наведений нижче HTML-код у порожнє вікно Блокнота.
3. Збережіть файл під назвою:
   practice.html
4. Під час збереження виберіть:
   – Тип файлів: Усі файли (All files)
   – Кодування: UTF-8
5. Відкрийте збережений файл у браузері (наприклад, Chrome або Edge), щоб переглянути сторінку.

Початковий код для роботи 

<meta charset="UTF-8"> <title>Практична робота</title> <h1>Ласкаво просимо на мою сторінку!</h1> <p> Grand Theft Auto V (GTA 5) – це культова пригодницька гра в жанрі відкритого світу від Rockstar Games, де гравці перемикаються між трьома головними героями — Майклом, Франкліном та Тревором — у вигаданому штаті Лос-Сантос, виконуючи грабіжки та кримінальні місії в сатиричній симуляції сучасної Америки. Гра славиться своїм величезним, деталізованим світом, гумором, багатством контенту (особливо в онлайн-режимі GTA Online) та незмінним успіхом, залишаючись однією з найпродаваніших і найприбутковіших ігор в історії, яка вийшла ще у 2013 році. </p> <p> Відкрити корисний ресурс можна за посиланням: <a href="https://example.com" target="_blank">Натисни тут</a> </p> <p> Ось слово, яке має інший <span style="color: red;">колір</span>. </p>

Завдання для виконання

1. Замініть гіперпосилання https://example.com на будь-яке інше посилання.
2. Змініть колір слова, оформленого тегом <span style=”color: red;”>колір</span> на будь-який інший (наприклад,blue, green, orange).
3. Виділіть жирним одне з будь-яких слів у тексті про GTA 5, використовуючи тег <b>…</b>.

Додатково (необов’язково): змініть заголовок сторінки <h1> на свій варіант