HTML Лабораторні роботи

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

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

Мета: Дізнатися основні етапи створення веб-сторінок. Основи всесвітньої мережі Інтернет. Дізнатися про особливості мови HTML 5,навчитися створювати примітивні веб-сторінки та редагувати тест.

Теоретичні відомості:

https://html5book.ru/osnovy-html/#part1

Завдання:

Частина 1:

1. Встановити JetBrainsWebStorm, використати ліцензію для студентів (потрібно сфотографувати і прикріпити студентський квиток при реєстрації програмного продукту).

Виконати завдання:

Створити папку “Lab01”, в якій будуть розміщуватися файли.

Відкрити JetBrainsWebStorm і новий проект, який буде розміщуватися у папці Lab01:

Створити файл index.html:

Частина 2: Хостинг, FTP-клієнти, браузери

Додаткові відомості:

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

• Hostinger.com.ua

• ZZZ.com.ua

• HO.ua

• Hyperhost.ua

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

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

Для здійсненнявіддаленогоуправліннявласними ресурсами в Інтернетііснує два типи доступу до хостингу:

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

•Доступ за допомогоюспеціального FTP-клієнта.

https://www.hostinger.com.ua/practicheskoe-rukovodstvo/kak-nastroit-ftp-klient

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

Ознайомитися з інформацієюстосовно хостингу і обрати відповідну площадку.

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

Частина 3: Створення сайтів за допомогою конструкторів сайтів

https://nethouse.ua/

https://www.ucoz.ua

https://www.webnode.com.ua/

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

1.             Ознайомитися з системою Wix.com. Для виконання роботи можна використати інший конструктор.
2.             Обрати відповідний до тематики шаблон і створити повноцінний сайт на 3-4 сторінки.
3.             Ознайомитися з адміністративною панеллю.
4.             Змінити тексти, картинки, заголовки, фон. Мова сайту - українська!
5.             Додати/забрати наявні сервіси до сайту.
6.             Опублікувати сайт в Інтернеті.

Частина 4. Основи мови HTML.

• Зареєструватися на https://htmlacademy.ru/ та увійти під власним профілем.
• Пройти курси:

https://htmlacademy.ru/courses/26

https://htmlacademy.ru/courses/38

https://htmlacademy.ru/courses/40

https://htmlacademy.ru/courses/39

https://htmlacademy.ru/courses/46

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

1. Створіть HTML-файл із заголовком "Прізвище 1", результат якого показаний на малюнку. Використовуйте відповідний тег заголовків (h1-h6), теги<br>, <p>, <em>, <strong>, <i>, <b>, <hr>, <small>(необов’язково всі перелічені). У html-код додайте коментарі: дату вирішення даного завдання та ПІБ. Зверніть увагу, що шрифт прізвища автора меншого розміру. Зауважимо, що тег в різних браузерах може відображатися по-різному. У HTML-код додайте умову даного завдання у вигляді коментарів.

2. Створіть HTML-файл із заголовком "Прізвище 2", результат якого показаний на малюнку:

Частина 5: Підготувати звіт та надіслати на перевірку