Essays.club - Получите бесплатные рефераты, курсовые работы и научные статьи
Поиск

Створення web-документів мовою HTML

Автор:   •  Апрель 24, 2022  •  Статья  •  1,531 Слов (7 Страниц)  •  213 Просмотры

Страница 1 из 7

 

ЦИКЛ УРОКІВ

з основ інформатики

Тема «Створення web-документів мовою HTML»

 

 


Уроки № 1 – 2

Тема уроку:  „Поняття мови розмітки гіпертексту. Структура HTML документу.”

Мета: 

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

Тип уроку: урок засвоєння нових знань

Хід уроку

1.  Організаційний момент.

2. Актуалізація досвіду й опорних знань учнів

  1. Що таке World Wide Web?

(глобальна система поширення гіпертекстової інформації, яка використовує для транспортування канали мережі Internet)

  1. Що таке гіпертекст?

(спосіб організації тексту, графіки та інших даних, у якому елементи пов’язані між собою)

  1. Що таке web-документ?

(текст, написаний спеціальною мовою, який призначений для перегляду електронної інформації на екрані комп’ютера )

  1. Броузер це - …

(програма, яка призначена для перегляду web-документів)

  1. Web-сайт це -…

(декілька  web-документів на одну тему, пов’язані гіпертекстом)

3. Мотивація навчальної діяльності учнів.

Основою всесвітньої павутини є мова гіпертекстової розмітки HTML (Hyper Text Markup Language). Вона була створена вченими Європейського центру  ядерних досліджень  (CERN, м.Женева). Наприкінці 80 років у CERN зайнялися проблемою збереження даних, які отримували від колег-фізиків. Складність полягала у тому, що кожен фахівець, який приїздив  до центру, застосовував власні методи відображення  інформації, і  потрібно було терміново створити  універсальну  систему, яка б не залежала від використовуваної комп’ютерної платформи і була б досить простою. Згодом мова HTML  стала основною при створенні документів, що розміщуються у WWW.

Завдяки мові розмітки користувач Web можна у себе на екрані переглянути документ у тому вигляді, в якому його задумав розробник.

4. Оголошення теми, мети, завдання уроку, сприйняття і первинне усвідомлення учнями нового матеріалу

 Отже, документ, складений за допомогою мови  розмітки HTML, являє собою текстовий файл. Такий файл можна набрати і відредагувати в звичайному текстовому редакторі, наприклад у  «Блокнот». Крім того створювати web-документи можна за допомогою візуальних HTML-редакторів, в яких користувач має справу з графічними образами  елементів HTML, а не з кодом. При створенні  сайта  користувач  звичайно сам визначає, працювати  йому у візуальному редакторі, чи вручну. Але при цьому  потрібно враховувати , що ефективно керувати  HTML документами і вирішувати питання web-дизайну можна тільки використовуючи мову розмітки.

1

[pic 1]

Яким же чином відбувається розмітка за допомогою HTML?

Для кожного елементу web-документу задається команда HTML, яка називається тегом. Розглянемо структуру найпростішого web-документу.

<HTML> - початок HTML документу

<HEAD> - заголовна частина документу

<TITLE>    Заголовок </TITLE> - власне заголовок

<BODY> - початок уведення змісту сторінки

Приклад HTML-документу

</BODY>

</HTML>

Необхідно звернути увагу на те, що кожен з тегів має закриваючий тег. Такі теги називають парні. В противному випадку  - одинарні.

Щоб преглянути створений документ у броузері, необхідно його зберегти з розширенням *.html, або *.htm.

2

[pic 2]

Часто теги містять додаткові елементи, які називаються атрибутами (параметрами). Наприклад, тег  <BODY> має наступні атрибути:

<BODY [pic 3]  text=”green”>, де bgcolor – колір фону сторінки, background – фонове зображення, text – колір тексту.

Зауваження. Якщо графічний файл та web-документ знаходяться у різних каталогах то слід писати повну адресу до графічного файлу (D:\Foto\picture.jpg). В противному випадку – тільки назву та розширення файлу (picture.jpg).

3

[pic 4]

При створенні web-сторінок необхідно прагнути до лаконічних текстів, які чітко оформлені, виділяти головне, розділяти на абзаци.

Для створення абзаців використовують декілька тегів:

<P>Текст</P> - з пропуском рядка

<BR> Текст </BR> - без пропуску рядка

<HR> Текст </HR>-   між абзацами буде проведена горизонтальна лінія

4

[pic 5]

За замовчуванням абзаци будуть вирівняні по лівому  краю. Щоб змінити вирівнювання  необхідно для тегів установки абзаців використати атрибут Аlign.

[pic 6]

5

[pic 7]

Щоб  задати певне зображення шрифту використовують наступні теги:

<B>Текст</B> - напівжирний текст

<І>Текст</I> - курсивний текст

<U>Текст</U>  - підкреслений текст

<SUB> Текст</SUB> - верхній індекс

<SUP> Текст</SUP> - нижній  індекс

Дані теги можна вкладати один в одного для отримання наприклад напівжирного та курсивного тексту (<B><I>Текст</I></B>)

6

[pic 8]

Параметри шрифту можна задати тегом <FONT>

<FONT Face=”Arial” Size=3 Сolor=”red”> Текст </FONT>, де Face – тип шрифта, Size – розмір шрифта, Color – колір шрифта.

...

Скачать:   txt (20.3 Kb)   pdf (463.1 Kb)   docx (327.3 Kb)  
Продолжить читать еще 6 страниц(ы) »
Доступно только на Essays.club