Структура веб-сайтів. Етапи створення веб-сайтів динамічною мовою гіпертекстової розмітки HTML.

10 клас

Тема: Структура веб-сайтів. Етапи створення веб-сайтів динамічною мовою гіпертекстової   розмітки HTML.

Мета:

Навчальна: Ознайомити учнів з елементами HTML мови та  прикладами сайтів. Створити та реалізувати сайт.

Розвиваюча: Формувати уявлення про сайт та команди (теги) мови HTML.

Виховна: Розвивати інтерес до вивчення основ програмування, розповідаючи про широке застосування сайтів.

Епіграф уроку:

«Хто володіє інформацією, той володіє світом»

Уїнстон Черчіль

Тип уроку: засвоєння нових знань, формування вмінь та навичок

Обладнання та наочність: дошка, комп'ютер, інструкції з ТБ в ком­п'ютерному кабінеті.

Базові поняття й терміни:  веб-сайт, веб-сторінка, структура сайту, етапи розробки сайту, редактор веб-сайтів, система керування вмістом сайту, завантаження файлів.

Учні повинні знати:

• структуру сайту;

• поняття та особливості сайтів різних типів;

• дизайн та правила оформлення веб-сторінок;

Учні повинні вміти:

•  засобами безкоштовного сервера створювати статичні веб-сторінки різних типів, добирати їх оформлення;

•  розміщувати на веб-сторінках зображення й текст, налаштовувати параметри їхнього розташування, відображення та відтворення;

•  створювати гіпепрпосилання на основі текстових фрагментів і зображень.

                                                   Хід уроку

І. Організаційний етап.

 1.Перевірка готовності до уроку.

 2. Інструктаж по техніці безпеки при роботі на ПК.

3. Повідомлення мети та завдань уроку.

Мета сьогоднішнього уроку якомога найкраще познайомитися з програмами для створення веб-сайтів та їх обслуговування.

Сьогодні ми з вами розглянемо тему: «Структура веб-сайтів. Етапи створення сайту. Засоби автоматизованої розробки веб-сайтів, редактор веб-сайтів з графічним інтерфейсом. Створення веб-сторінки, тип її оформлення. Наповнення сторінки текстом, графікою, завантаження файлів».

4. Мотивація учнів на даний урок.

Учитель. Ви хочете бути сучасним, мати свою сторінку в Інтернеті, рекламувати свої можливості широкій аудиторії? Просто бажаєте знайти нових друзів і заявити на весь світ пре себе? Цікавитесь послугами з веб-дизайну та створення веб-сайтів?

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

5.Перевірка домашнього завдання

       Актуалізація опорних знань:

1. Які служби Інтернету ви знаєте?
2. Яке призначення електронної пошти?
3. Яка структура адреси електронної поштової скриньки?
4. Скільки потрібно часу для доставки електронного письма?
5. Перелічіть відомі вам браузери.
6. Що таке форум? чат?

ІІ. Основний етап:

План вивчення теми:

1. Інформаційний зміст та структура Web-сайту

      Web-сайт - це сукупність веб-сторінок, розташованих в мережі Інтернет, об'єднаних під одним доменним ім'ям або ІР-адресою, власником яких є приватна особа або організація. Для перегляду сторінок веб-сайтів використовують браузери, найпопулярнішими з яких є Internet Explorer, Mozilla Firefox, Opera, Google Chrome, Safari.

Кожна людина або організація можуть мати свою «сторіночку в Інтернеті», це може бути як окремий веб-сайт, так і сторінка у складі іншого сайту. 

Веб-сайт може бути розміщений як на одному сервері, так і на декількох (наприклад, портали). Послуги з розміщення сайту на сервері називаються хостингом і надаються за певну плату за одиницю часу.  За умовами надання хостинг часто розділяється на платний і безкоштовний. Недоліками безкоштовного хостингу є обмежений дисковий простір, невелика пропускна спроможність інтернет каналу (низька швидкість завантаження сайту), відсутність обмежена функціональність серверних технологій (Perl, PHP, Python, ASP, Ruby, JSP, MYSQL). Тому безкоштовний хостинг використовується в основному для любительських сайтів.

2. Поняття про мову HTML.

HTML (від англ. Hypertext Markup Language - мова розмітки гіпертексту) - це стандартна мова розмітки документів у Всесвітній павутині.

Всі веб-сторінки створюються за допомогою мови HTML (або XHTML). Мова HTML інтерпретується браузером і відображається у вигляді документа, зручному для людини. HTML є додатком SGML (стандартної узагальненої мови розмітки) і відповідає міжнародному стандарту.

HTML-документ є текстовим файлом розмічений за допомогою спеціальних (текстових) команд. Текстовий формат представлення веб-документів був вибраний виходячи з основних вимог до веб-документу: простота, можливість безпосередньої інтерпретації в будь-якій операційній системі, мінімальний розмір файлу, зручність редагування і інтерпретації.

Мова розмітки гіпертекстових документів HTML дозволяє визначити різні типи елементів ( у оригіналі element ), що забезпечують функціональність документа: текстові фрагменти із заданими параметрами форматування, списки, таблиці, зображення, гіперпосилання і т.д. Елементи HTML оголошуються за допомогою команд розмітки, званих тегами (від англійського tag - ярлик). Всі HTML-теги, що зустрічаються в тексті документа інтерпретуються браузером при відображенні документа.

• Тег – це фрагмент коду, що описує певні елементи документа HTML і вміщений у кутові дужки < >

HTML-теги можуть бути умовно розділені на дві категорії:

1. Теги, що визначають, як буде відображатися WEB-браузером тіло документа в цілому.

2. Теги, що описують загальні властивості документа, такі як заголовок чи автор документа.

3. Створення HTML-файлів

HTML-документи можуть бути створені за допомогою текстового редактора, як правило це Блокнот.

Усі теги HTML починаються з "<" (лівої кутової дужки) і закінчуються символом ">" (правої кутової дужки). По-перше необхідно повідомити браузеру, що ви будете "говорити" з ним мовою HTML. Це робиться тегом <html>. Так що, перш ніж надрукувати що-небудь, потрібно поставити тег "<html>" в першому рядку документа

Як правило, існує стартовий тег і завершальний тег. Для прикладу наведемо теги заголовка, що визначають текст, що знаходиться всередині стартового і завершального тега і описує заголовок документа:

<TITLE> Заголовок документа </ TITLE>

Завершальний тег виглядає також, як стартовий, і відрізняється від нього прямим слешем « / »перед текстом всередині кутових дужок. У даному прикладі тег <TITLE> говорить WEB-броузеру про використання формату заголовка, а тег </ TITLE> - про завершення тексту заголовка.

Файл з набраним текстом слід зберегти на диску у текстовому форматі, але з розширенням.html. Наприклад: ''USA. html''

Основні теги,які використовуються при створенні сайту:

<html> </ html> - Тег HTML вказує початок і кінець HTML документа.

<head> </ head> -Тег HEAD (заголовок HTML-документа) містить інформацію, що відноситься до документа в цілому.

<body> </ body>- Тег BODY охоплює ту частину HTML-документа (текст, зображення та елементи формування), яка буде видно користувачеві.

<title> </ title> -Тег TITLE встановлює заголовок HTML-документа, що виводиться в рядку заголовка вікна броузера.

<body bgcolor=?>- Атрибут BGCOLOR встановлює колір фону HTML-документа. Колір може бути вказаний за допомогою назви або коду.

<body text=?> - Атрибут TEXT встановлює колір для всього тексту HTML-документа. Колір може бути вказаний за допомогою назви або коду.

<H1> Заголовок першого рівня

<P></P> — розриву абзацу;

<DIV></DIV> — виділення блоку;

<BR> — розриву рядка

<HR> — вставлення горизонтальної лінії;

<BLOCKQUOTE></BLOCKQUOTE> — відступу праворуч.

<LEFT> — для вирівнювання за лівим краєм;

<RIGHT >— для вирівнювання за правим краєм;

<CENTER> — для вирівнювання за центром.

<B> — напівжирний шрифт;

<BR> — розриву рядка

<HR> — вставлення горизонтальної лінії;

<I> — курсив;

<NOBR> — заборона переносу, в яку можна вставити м’який перенос тегом <WBR>;

<PRE> — попередньо форматований текст;

<SUB> — підрядковий текст (індекси знизу);

<SUP> — надрядковий текст (індекси згори);

<STRIKE> — перекреслений;

<TT> — моноширинний;

<U> — підкреслення;

4. Практична робота:

• виконання практичної роботи

На сьогоднішній Практичній роботі Ви будете Системними Адміністраторами, які створюють   Web-сайт для  туристичної фірми з відомостями про різні країни світу.

Вашим, домашнім завданням було створити текстовій документ з відомостями про обрану Вами країну, тепер з цих відомостей створюємо сайт.

Порядок виконання практичної роботи:

1. В текстовому редакторі Блокнот створити документ мовою HTML.
2. Текст документу повинен містити в собі:

а) Заголовок з назвою країни (по центру);

б) відцентровану по лівому  краю:  площу країни, кількість населення, державну мову країни;

в) розташування країни( звичайним текстом)

г) кліматичні умови країни;

д) відомості про грошову одиницю країни

3. Декілька фото відповідної країни та їх короткий опис.

4. Коротку історичну довідку країни. 

ІІІ.Підбиття підсумків уроку

- Учитель обговорює з учнями проблемі і ускладнення які виникали під час виконання практичної роботи.

- Проводиться оцінювання роботи учнів.

Домашнє завдання.

1.Вивчення  теоретичного матеріалу по даній темі.

2. Продовжити створення  HTML - файлу.