11 клас

15.10.2019 Інструктаж з БЖД. Створення веб-сторінок.

Створення простої веб-сторінки на основі існуючої. Завдання. Створіть веб-сторінку своєї вулиці за допомогою редагування існуючої веб-сторінки Вулиця.htm, що зберігається у відповідному файлі. 1. Створіть папку Сайти у власній структурі папок: 2. Перегляньте у браузері веб-сторінку Вулиця.htm, що зберігається в папці Навчальне середовище. Виділіть основні змістові блоки даної веб-сторінки. Поміркуйте, чи маєте ви достатньо відомостей, щоб створити таку ж сторінку для вулиці, на якій ви проживаєте? Чи достатнім буде використання вільної енциклопедії Вікіпедії, щоб знайти додаткові відомості для цієї сторінки? 3. Розгляньте HTML-код сторінки, для чого відкрийте її в середовищі текстового редактора Блокнот. Для того щоб зрозуміти призначення деяких тегів цього документа, поставте у відповідність виділені блоки веб-сторінки та фрагменти коду її розмітки. 4. Збережіть документ із HTML-кодом сторінки в папці Сайти своєї структури папок: 5. Внесіть зміни до тексту, що формує вміст сторінки, пам'ятаючи, що всі теги та їхні параметри містяться в кутових дужках. 6. Збережіть внесені зміни. 7. Перегляньте, як буде відображатися створена веб-сторінка у браузері. Завантажити текст практичного завдання у форматі docx: https://goo.gl/6zPTKg Завантажити файли-заготовки необхідні для виконання практичного завдання (взято з блогу авторів підручника): https://goo.gl/Rmp4Ho

Основні теги

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

Перший рядок просто вказує тип документа. Рекомендується вказувати її, щоб все правильно працювало.

html — парний тег контейнер всієї веб-сторінки в цілому. У ньому буде вміст всієї сторінки в цілому. Як бачите, він закривається в самому кінці.

head — тег, в якому розміщується різна інформація, яка не буде виведена на сайт, але має важливе значення для його правильної роботи. Наприклад, тут ми вже прописали кодування і назва сторінки, яке з’явиться у верхньому рядку браузера.

meta — тег мета-інформації. Такий, як кодування, метатеги і т. д. В даному випадку ми поставили кодування utf-8.

title — назва сторінки.

link — з допомогою цього тега до сторіночці можна підключити інші файли. Так ми підключили таблицю стилів css. Зараз не будемо конкретно розбиратися у всіх його атрибути. Скажу тільки, що href – це шлях до файлу. Щоб все працювало index.html і style.css повинні лежати в одній папці.

На цьому наш тег head закривається. До речі, ви помітили, що тег meta ми не закрили? Все тому, що в html є як парні, так і одинарні теги. В парні можна записати якийсь вміст, на відміну від одинарних.

Далі відкривається тег body. Якщо ви хоч трохи в ладах з англійською, то розумієте, що це перекладається як тіло. Тобто у body ми розміщуємо інформацію, яка безпосередньо буде виведена на екран – тіло сторінки. Напишемо тут стандартну фразу. Тепер саме час перевірити нашу сторінку. Відкрийте index.html в будь-якому браузері. Якщо ви бачите там порожній екран і фразу: «Привіт, світ!», значить, все вийшло. Залишилося тільки перевірити підключення файлу style.css.