Лабораторна робота 1

Тема: «Основи веб-розробки. Робота з текстом в HTML5»

Мета: Формування вмінь використання мови HTML для розмітки Web-
документів. Формування вмінь стильового оформлення тексту документа
засобами технології CSS.
Питання для вивчення:
1. Мова HTML. Основні поняття: теги, елементи, атрибути.
2. Структура HTML-документа.
3. Теги визначення головних структурних особливостей HTML-
документа.
4. Теги логічного та фізичного форматування тексту.
5. Специфікація HTML.
6. Декларація DOCTYPE, її компоненти.
7. Варіанти декларації DOCTYPE.
8. Поняття технології CSS.
9. Cпособи застосування стилів.
10. Структура правила CSS.
11. Основні параметри шрифту та тексту в CSS.
Теоретичні відомості:
Створення сайту - це трудомісткий і тривалий процес, який відбувається
в кілька етапів, в міру проходження яких ідеї перетворюються в реальний
функціонуючий сайт.
Для того, щоб розробник відчував себе максимально комфортно при
розробці нового проекту, окрім робочого місця і персонального комп'ютера
йому необхідно мати певний набір програмного забезпечення, базовий
інструментарій, без якого розробнику сайту просто не обійтися.
Досвідчені розробники користуються професійними програмами, що
розроблено відомими компаніями і за їх використання доводиться платити
чималу ціну. Для початківців популярною альтернативою є безкоштовні
редактори, які, можливо, і мають меншу функціональність, але є цілком
придатними для роботи над веб-проектом.
Після створення веб-хостингу і доменного імені можна приступати до
безпосередньої розробки сайту. Потрібно визначитися з підходами щодо
створення:
● Підхід 1: створення сайту за допомогою конструкторів
● Підхід 2: створення сайту за допомогою CMS.
● Підхід 3: створення веб-сайту з нуля. Знання HTML, CSS,
JavaScript, мови серверного програмування та бази даних.
o HTML (Hyper Text Markup Language). Основна структурна мова
для веб-сторінок і веб-додатків, яка робить контент зрозумілим для веб-
браузера.
o CSS (каскадні таблиці стилів). Стилі, які використовуються для
оформлення розмітки HTML на веб-сторінці.
 o JavaScript (клієнтська мова). Використовується для додавання
динаміки елементів на сторінці. Цю мову розуміє будь-який браузер і вона
використовується як для динамічних так і для статичних сайтів
o PHP, Java, Python, Ruby та інші (мови серверного
програмування). Мови написання різноманітних сценаріїв для складних,
динамічних сайтів. Файли сценаріїв задають систему поведінки сайту, реакції
на дії користувача, формування сторінок, відповідно до запиту і подібне
o MySQL, MongoDB, PostgreSQL та інші (системи управління
базами даних). Великі таблиці інформації, що використовуються для
зберігання, управління і доступу до користувцьких даних на веб-сайті
розглядається, яка називається базою даних. Система управління базами даних
використовується на стороні сервера для ефективного виконання завдань, що
прописані в сценаріях.
Онлайн сервіси, генератори, редактори
Секрет швидкого навчання полягає в тому, що немає необхідності
вивчати весь HTML. Щоб створити достатньо функціональний сайт, не треба
знати весь HTML - там багато нюансів, які ускладнюють життя і їх можна
опустити. Якщо знати хоча б 20% зі всього HTML, то можна використовувати
його, як використовують 80% розробників сайтів. Решта 20% можна залишити
програмістам і професіоналам.
Більшість книг по створенню сайтів своїми руками з гучними назвами і
об'ємними томами, де розписано весь курс HTML, більше годяться на роль
довідників, а не підручників. В даній роботі не будемо вчити весь курс,
обмежимося лише тією невеликою частиною, яка дозволить самостійно
створювати сайти, які будуть працювати. Решта знань набуваються під час
створення наступних, більш складних проектів.
Для допомоги розробникам-початківцям існує багато онлайн-сервісів, які
надають певні елементи (код, структуру, зображення, елементи), що в
кінцевому результаті мають пристойну якість.
Переваги онлайн-сервісів:
● Не потрібно встановлювати на комп'ютер дороге ліцензоване
програмне забезпечення, достатньо просто відкрити вікно браузера.
● Відпадає проблема сумісності між тією чи іншою програмою і
операційною системою на комп'ютері користувача.
● Немає необхідності відслідковувати оновлення, сервіс онлайн - це
завжди актуальна версія програми.
● Онлайн-сервіс доступний завжди і скрізь, він не прив'язаний до
конкретного комп'ютера.
Генератор структури HTML-сторінки CreateTemplater
 Генератор HTML та CSS шаблонів (макетів) - це онлайн-сервіс, який
генерує архів, що містить 2 файли: HTML і CSS, які мають базову розмітку
(каркас) для майбутнього сайту.
Сервіс може бути корисний для розробників, які мають деякі навички
роботи з технологіями HTML і CSS, але створення базової структури сторінки
(що складається з таких елементів, як "шапка", колонка з контентом, бічні
колонки (сайдбар) і "підвал") викликає певні труднощі.
У всіх макетах використовується тільки блокова верстка. Макети, що
пропонуються Генератором HTML та CSS шаблонів, протестовано і вони
коректно відображаються в сучасних браузерах.
Онлайн редактори HTML, CSS, JS

●
●

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

●
Учим HTML за 1 Час! #От Профессионала

●
Учим CSS за 1 Час! #От Профессионала
●
Верстка HTML + CSS За 2 Часа. Из PSD. С Нуля.

●
Cоздаем Сайт За 4 Часа. Photoshop/HTML/CSS. Мастер-Класс

Довідники

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

●
{CSS} Portal/

●
CSS3 Generator

●
CSS3 Maker

●
Gradient Generator
 Фізична структура статичних сайтів
Під фізичною структурою проекту розуміють порядок зберігання файлів
проекту в його директорії. Часто доводиться бачити, коли всі файли
знаходяться разом, назви файлів зазначено комбінацією малих та великих літер,
загальними назвами типу page1, page2, цифрами, кирилицею тощо.
Це неприпустимо, по-перше, це неповага до фахівців, які будуть
працювати з проектом в подальшому, по-друге, чим більше буде проект, тим
більше буде ставати файлів і, зрештою можна заплутатися, що до чого
відноситься і що потрібно, а що ні.
Зазвичай, в корені сайту розташовують html-документи, що відповідають
кожному розділу. Сторінки підрозділів на розсуд розробника можуть міститися
або в корені або рознесені до різних відповідних папок.
Всі зображення, що використовуються у сторінках, прийнято зберігати в
окремих папках.
● Зображення, що використовуються в оформленні зовнішнього
вигляду сторінок традиційно розміщують у папку з назвою images або img. Це
сприяє стрункій систематизації файлів і є зрозумілим для розробників, що
працюють над проектом. Аналогічно, для скриптів можна створити папку script,
а для стилів style.
● Зображення, що відносяться до контенту певних розділів,
наприклад, збірка фотографій за різні роки, то для них можна зробити окремі
папки, але із змістовними назвами, наприклад, photo/2017/summer/
Дотримуючись цих правил структура проекту буде чіткою і зрозумілою.
 Існують також правила щодо найменування файлів проекту. Найчастіше
застосовуються такі імена: головна сторінка - це index.html, стилі проекту
styles.css або *.css, скрипти scripts.js або *.js, мінімізовані версії файлів мають
префікс .min (scripts.min.js), картинки мають не розлогі назви або набори цифр,
а відображають те, що на них зображено, наприклад, button.png, download-
icon.png, logo.png і т.д.
У складі сайту мають бути присутні файли, які можна віднести до
обов’язкових та службових. Зазвичай, їх розміщуються в корені сайту. Це
файли, що призначені для виконання певних завдань і мають стандартну назву,
а також файли, назви яких є довільними і визначаються розробниками.
Обов'язкові файли зі стандартними іменами
● index.html (index.*) — за замовченням є файлом головної сторінки,
а також веб-сторінок, що розміщені в папках і повинні відкриватися при їх
вказуванні в адресі. Назву і розширення індексового файлу, можна змінити в
залежності від технології створення сторінок, типу веб-сервера та його
налаштувань.
● favicon.png (favicon.*) — іконка сайту у вигляді зображення
розміром 16 на 16 пікселів у форматі .png або .svg. Вона з'являється в браузері
біля адреси сайту в адресному рядку, у вкладці браузера біля назви сайту, у
сторінці пошукової системи біля короткого опису сайту.
Обов'язкові файли з довільними іменами
style.css чи **.css – файл з таблицею стилів. Жоден з сучасних сайтів не
обходиться без стилів, які зазвичай, розміщуються в окремому файлі. Таке
розміщення надає кілька переваг — можна легко змінити вигляд елементів на
всіх сторінках, за рахунок зміни параметрів лише в одному місці, файл
кешується і завантажується швидше, зменшується загальний об'єм всіх
документів. Файл зі стилями має розширення .css.
Поради
Для того, щоб всі посилання у сайті працювали коректно, документи
відкривалися правильно і браузер не видавав помилок при зверненні до певних
розділів ресурсу, при створенні його фізичної структури слід дотримуватися
кількох простих правил.
● Призначати назви папок, назви і розширення всіх файлів сайту з
використанням символів лише латинського алфавіту і лише в рядковому
регістрі. Такий підхід гарантує універсальність і працездатність на різних
платформах.
● Не використовувати в назвах файлів пробіли, це може викликати
помилки в деяких операційних системах. Для візуального розділення
змістовних частин назви краще використати дефіс або символ підкреслення,
наприклад, about-us.html, my_cat.jpg.
● При привласненні назв файлів прагнути, щоб вони були
змістовними. Це буде корисно і під час створення сайту і згодом, коли потрібно
буде внести певні зміни у сайт, а також для інших розробників, які працюють
над сайтом. Важко орієнтуватися серед сторінок, що позначаються як 1.htm,
2.htm, 3.htm тощо.
● На сьогоднішній день популярними стають назви - транслітерація
латинськими літерами, наприклад, rozklad-dlya-studentiv.html або
mij_kotyk_bavytsia.png. Це є додатковою інформацією для пошукових систем,
які навчилися інтерпретувати транслітерацію в національні символи і розуміти
сенс назви.
Безкоштовні шаблони дизайну

Відео лабораторної роботи

1. https://youtu.be/P_nEeKOeSuI
Файли до відео
2. https://youtu.be/jm8ZJpFydw8
Файли до відео
3. https://youtu.be/Uo70uE5HUmc
Файли до відео
4. https://youtu.be/pQZkh8oigBE
Файли до відео
 Частина 1:

Вказівки для ознайомлення із матеріалом та завдання до виконання

1. Ознайомитися із середовищами Notepad++ та Visual Code.
2. Ознайомитися зі списком елементів HTML5 на сторінці
https://w3schoolsua.github.io/html/html_elements.html
3. HTML Headings. З’ясувати особливості використання тегів <h1> -
<h6> та <hr>. Для цього перейти на сторінку
https://w3schoolsua.github.io/html/html_headings.html розглянути приклади,
виконати вправи 1-4.
4. HTML Paragraphs. З’ясувати особливості використання тегів <p>,
<br> та <pre>. Для цього перейти на сторінку
https://w3schoolsua.github.io/html/html_paragraphs.html розглянути приклади,
виконати вправи 1-4.
5. Text Formatting. З’ясувати особливості використання тегів
 <b> - Bold text
 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Small text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
Для цього перейти на сторінку
https://w3schoolsua.github.io/html/html_formatting.html розглянути приклади,
виконати вправи 1-5.
6. Quotation. З’ясувати особливості використання тегів
 <abbr> - an abbreviation or acronym
 <address> - contact information for the author/owner of a
document
 <bdo> - the text direction
 <blockquote> - a section that is quoted from another source
 <cite> - the title of a work
 <q> - a short inline quotation
Для цього перейти на сторінку
https://w3schoolsua.github.io/html/html_quotation_elements.html розглянути
приклади, виконати вправи 1-4.
7. HTML Styles. З’ясувати особливості застосування стилів
(використання атрибуту style). Для цього перейти на сторінку
https://w3schoolsua.github.io/html/html_styles.html
розглянути приклади, виконати вправи 1-6.
8. HTML Color Names. З’ясувати особливості застосування кольорів.
Для цього перейти на сторінку
 https://w3schoolsua.github.io/html/html_colors.html
розглянути приклади.
9. Styling HTML with CSS. З’ясувати особливості застосування стилів.
Для цього перейти на сторінку
https://w3schoolsua.github.io/html/html_css.html
розглянути приклади, наведені у розділах Inline CSS, Internal CSS,
External CSS, CSS Fonts. , виконати вправи 1-4.
10. CSS Fonts. З’ясувати особливості застосування стилів для шрифту.
Для цього перейти на сторінку
https://w3schoolsua.github.io/css/css_font.html
розглянути приклади, виконати вправи 1-5.
11. CSS Text. З’ясувати особливості застосування стилів для тексту. Для
цього перейти на сторінку
https://w3schoolsua.github.io/css/css_text.html
розглянути приклади, виконати вправи 1-2.
 Частина 2

Завдання 1
(задача на ознайомлення з тегами форматування: h1-h6, p, sup, sub, hr, i,
b , span, big,smal та атрибутом color)

1. Створити HTML-документ, в якому засобами структурного та

логічного форматування презентувати свою курсову роботу. Документ
обов’язково повинен містити:
 тему курсової роботи;
 зміст курсової роботи;
 мету написання курсової роботи;
 актуальність теми та завдання дослідження;
 список ключових слів;
 прізвище, ім’я та по-батькові автора роботи, номер групи.
2. Засобами технології CSS здійснити стильове оформлення шрифту і
тексту (використати властивості Font та Text).
Завдання 2
(задача на ознайомлення зі спецсимволами html, та атрибутами bgcolor та
color.)
Виберіть 5 будь-яких спецсимволів. Кожен з них потрібно пояснити, та
використати у прикладі. Вивести інформацію по шаблону
Шаблон:

Завдання 3
Створіть просту сторінку на будь-яку тему. За допомогою спецсимволів
виведіть код сторінки в html. За допомогою тега <pre> виведіть код у
зрозумілому форматі:
 Приклад:

Зміст звіту

1. Назва та мета виконання лабораторної роботи.

2. Скріншоти послідовності роботи з коротким описом кожного з етапів.
3. У висновку оцінити зручність використання редакторів та складність
створення простих сторінок.