НУ"ЛП". Кафедра САПР
Викладач

Юрчак Ірина Юріївна

Доцент кафедри САПР
НУ "Львівська політехніка"
Інші контакти

#3. Створення простої сторінки

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

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

Онлайн сервіси, генератори, редактори

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

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

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

Переваги онлайн-сервісів:

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

Генератор структури HTML-сторінки CssTemplater.com

CssTemplater.com

Генератор HTML та CSS шаблонів (макетів) - це онлайн-сервіс, який генерує архів, що містить 2 файли: HTML і CSS, які мають базову розмітку (каркас) для майбутнього сайту.

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

У всіх макетах використовується тільки блокова верстка. Макети, що пропонуються Генератором HTML та CSS шаблонів, протестовано і вони коректно відображаються в сучасних браузерах.

Онлайн редактори HTML, CSS, JS

Практичні уроки

Довідники

Генератори CSS-кода

Безкоштовні шаблони дизайну

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

  1. За допомогою генератора структури створити початковий макет сторінки. Ознайомитися із згенерованими тегами та стилями.
  2. Створити сторінку наближену до наведених зразків
  3. Додати певні елементи: бічну панель, навігацію, таблицю тощо. Внести власні зміни щодо розмірів, кольорів, наповнення тощо.
  4. Додати до сторінки стилі основних елементів (h1-h6, p, table, td, ul,ol,li тощо) в різний спосіб
    • В самому елементі. Наприклад, <h1 style="color:red; text-align: center";>Заголовок</h1>
    • В елементі <style>, що знаходиться в елементі <head> або <body>. Наприклад,
      <style>
      h1 {color:red; text-align: center;}
      </style>
    • В окремому файлі style.css, що потрібно прив’язати до сторінки html (назви і кількість файлів зі стилями є довільними).
      <head>
      <link href="style.css" rel="stylesheet">
      </head>
  5. Додати до елементів html-коду різноманітні класи, що стосуються кольору, фону, розмірів, відступів. Поєднати в елементі кілька класів (через пробіл). Увага!!! Назви класів пишуться латинецею, не містять пробілів, не починаються з цифри.
  6. Побудувати правильну файлову структуру майбутнього проекту, створити папки для зображень (img або images), таблиць стилів (css) та скриптів (js). Перевірити написання назв файлів та папок латинецею.
  7. Тестову сторінку та супутні файли (стилі, зображення) розмістити на хостингу. Перевірити результат виконання через різні браузери. Результат виконання демонструвати в Інтернеті.

Зміст звіту

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

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

  1. Назвіть підходи, які застосовують для створення сторінок сайту.
  2. Які програмні засоби застосовують для створення сучасних сайтів.
  3. Який мінімальний набір засобів має бути для створення простого статистичного сайту.
  4. Що таке структура сторінки? Назвіть основні блоки.
  5. Які особливі семантичні елементи входять у склад мови HTML5, в чому їх особливості?
  6. Назвіть основні правила формування фізичної структури сайту? Які обов’язкові папки мають бути в структурі проекту?
  7. За якими принципами формуються назви файлів та папок проектів?
  8. В чому відмінності інформації, що вказана у тегах <head> та <body>?
  9. Скільки рівнів заголовків пропонує стандарт HTML5?
  10. В чому основне призначення стилів для HTML-розмітки? Яким чином можна під'єднати стилі до HTML-коду?