2 грудня о 18:00Вебінар: Предмет «Захист України» у школі: теоретичні засади, цікаві ідеї, поради для дистанційного навчання

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

Про матеріал
Курс HTML CSS складається з 13 уроків, які максимально повно описують можливості мови розмітки і каскадних таблиць стилів, таких необхідних у житті будь-якого веб-розробника, на прикладі створення елементарних і не дуже html сторінок і css файлів. Курс насичений не тільки багатством матеріалу, необхідного, як початківцю, так і професійному верстальщику, але і багатьма фактами як з минулого веб технологій так і тим, які відбудуться незабаром.
Перегляд файлу

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

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

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

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

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

Завдання:

Частина 1:

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

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

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

https://lh4.googleusercontent.com/xkSGfB3BPU57nl4DsFEar1tNWU5GIIXVONVr0xKwBnNgtRaF4aEV10uNIxmfDNv2Ml23qY_Irpivu3Zm4YnKqwQIe3lz-gMCcWRanHpuH7QKdch-bbK0GQPSmKzSo-aDXry5-I8H

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

https://lh3.googleusercontent.com/MDN-VxXpJgrkD8_uvZN1TaU6v4XIgvlhumakplM_KS71VnzkM7naPT5wYI-vDuXTPCJ6Qx_uA4r9yXQXI6lluziXMot__fFdP13MCI14DDuJV1m4nW9-6VcTG1imnMPIjglBSzVs

https://lh6.googleusercontent.com/nXyDjmjgbuaVGRSJwNpUJIZ8JnxHHxY_d0b_24ax-F0YdCIMWl8TKLOxJWuqzuYNtV2dnppkW4tDWP4mTJLZxPxo8T8qSml84Hw2-ckOnbW0w36zhGyPFxXNMTBccFnx7KyQxkJS

 

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

 

https://lh6.googleusercontent.com/K7TqQdZXKCyizYqQ39psnNJLDun43BbncQCZN4Qh2X9pkb4mDsV54uu7ba_Ti2tCgGcnc-1RJGQyfu37TZkiKPCKjwe3zTFZ-ssyLppcwmf6fh0cbPXkGWUZYrLWULy79F555ZxA

https://lh5.googleusercontent.com/RXy8XE7hwlF04TYZM4Adnsef5Os18At6iQaYGJ-7rfBkzvZvZkwQI0u8k2DtvKqPSRqwilCchpHcJDN7rfF6b6q2LzXvXCRnrx6dBn8VUC6YJhCO9e8pbUhqm1zO90iE7BBL_LS8

 

Частина 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-код додайте умову даного завдання у вигляді коментарів.

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

 

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

 

docx
Додав(-ла)
Nechyporuk Ivan Mykolaiovych
До підручника
Інформатика (академічний, профільний рівень) 11 клас (Лисенко Т.І., Ривкінд Й.Я., Чернікова Л.А., Шакотько В.В.)
Додано
5 січня
Переглядів
780
Оцінка розробки
Відгуки відсутні
Безкоштовний сертифікат
про публікацію авторської розробки
Щоб отримати, додайте розробку

Додати розробку