Embedded Files
Назва проекту: HTML та шоколадні торти
Назва проекту: HTML та шоколадні торти
Керівник проекту: Майборода Олена Олексіївна
Керівник проекту: Майборода Олена Олексіївна
Мета: дослідити етапи створення веб-сайту за допомогою мови розмітки гіпертексту HTML
Мета: дослідити етапи створення веб-сайту за допомогою мови розмітки гіпертексту HTML
Теоретично-пошуковий етап
Для чого вивчати HTML?
HTML (Hyper Text Markup Language) – це спеціальна мова розмітки, яка застосовується при створенні сайтів в інтернеті. А навіщо знати мову HTML, якщо в Інтернеті існує величезна кількість візуальних редакторів, де все створюється наочно, швидко, легко і зручно?
Потрібно розуміти, що конструктори сайтів в результаті також створюють HTML код, який часто містить багато зайвого коду. Це впливає на швидкість завантаження веб-сторінок та на інші властивості сайту.
Уявіть, ви створили свою сторінку сайту у візуальному редакторі, який пише автоматично код HTML. А вас щось не влаштувало, і хочеться виправити цю ситуацію, а для цього потрібно відкрити вихідний код та відредагувати його. Ви відкрили код, але там суцільні незрозумілі англійські літери, і ви нічого не знаєте і не розумієте, що там взагалі треба робити.
Тегами називають команди HTML, вони відповідають за оформлення та розміщення тексту на веб сторінці, розміщення зображень, відео, створення гіперпосилань на інші сторінки. Важливо вивчити основи мови HTML (базові елементи) для того, щоб розбиратися у вихідних кодах HTML сторінок вашого сайту. Знання HTML потрібно не тільки для редагування сторінок вашого сайту, але і для їх аналізу.
Знати мову HTML потрібно всім веб-майстрам, навіть тим хто створює сайти в онлайнових редакторах конструкторах сайтів.
Структуру сторінок часто створюють за допомогою графічних редакторів.
Для розробки документу HTML можна взяти простий редактор Блокнот, але краще застосувати редактори HTML коду, які спрощують запис основних тегів мови HTML:
<html> - початок сторінки
<head> - заголовок документа зі службовою інформацією
<body> - «тіло» документу
<div> - початок блоку
<h1 > - заголовок 1 рівня
<h2> - заголовок 2 рівня
<ul> - список
<img > - зображення.
Обов'язково зберігаємо цей текстовий файл з розширенням (форматом) HTML, тоді він автоматично відкривається браузером, який демонструє зовнішній вигляд сторінки. Правила та приклади застосування тегів HTML можна знайти за посиланням https://www.w3schools.com/html/html_intro.asp
Онлайн підручник доступний українською мовою.
Що таке Каскадні таблиці стилів?
CSS — це мова, яку ми використовуємо для оформлення HTML-документа. CSS описує, як мають відображатися елементи HTML. СSS можна застосовувати всередині файлу HTML, але більш зручний спосіб - створити окремий файл типу CSS, який можна "підключати" до різних файлів HTML, що відповідають різним сторінкам сайту. Це забезпечить стильове оформлення всіх сторінок. Докладніше
https://www.w3schools.com/css/default.asp
Що таке веб програмування?
JavaScript – це мова програмування, яку створили спеціально, щоб зробити сторінки живими. Програми, які написали на JavaScript, легко вбудовуються в HTML і автоматично виконуються під час завантаження сторінки. Без JavaScript HTML також втрачає частину своїх функцій: не можна додавати анімації, створювати інтерактивні елементи, додавати пошук по сторінці.
Етапи створення веб сайту "Мої улюблені шоколадні торти"
Етапи створення веб сайту "Мої улюблені шоколадні торти"
Тематика сайту.. Сайт створюєтся для розміщення рецептури шоколадних тортів.
Розробка структури сайту. Головна сторінка сайту складається з 3 підсторінок. Кожна підсторінка містить зображення кулінарного шедевру, складові інгредієнти, та покроковий рецепт.
Пошук потрібних даних. Для пошуку зображень та рецептів тортів використано Internet. Файли зображень зберігаються у папці image основної папки site.
Розробка структури головної сторінки.
Структура сторінки складається із заголовка, меню сайту, підзаголовка, зображення та тексту. Структуру сторінок часто створюють за допомогою графічних редакторів.
Для розробки документу HTML головної використано навчальний редактор HTML коду HEFS. Створено файл site_1.html.
Для удосконалення зовнішнього виду веб сторінки в редакторі HEFS створюємо файл style.css і отримаємо узагальнений формат головної сторінки сайту.
Розробка структури підсторінок.
Структура підсторінок повністю повторює структуру головної сторінки. Тому код HTML файлу site_1.html можна скопіювати 3 рази з назвами site_2.html, site_3.html, site_4.html.
Кожна підсторінка буде містити додатковий контент з покроковим рецептом кулінарного шедевра, тому відповідні HTML-файли потрібно доповнити тегами створення текстів, списків та зображень.
Для підсторінок створюється окремий файл style_2.css
Демонстрація проекту
Демонстрація проекту
Проект не передбачає публікацію сайту в Інтернеті. Для звітності створено відео, що демонструє локальну роботу створеного сайту. З навчально метою можна завантажити архів структури папок за посиланням surl.li/gwpab та перевірити роботу сайту на локальному пристрої.
Аналіз результатів
Проведено дослідження особливостей застосування мови HTML для створення сайтів. Розроблено сайт, який складається з головної сторінки та 3-х підсторінок. Меню сайту працює за допомогою списку гіперпосилань. Оформлення сайту витримано в одному стилі з використанням CSS. Контент сайту демонструє зображення, список інгредієнтів та покроковий рецепт шоколадних тортів.
Page updated
Google Sites
Report abuse