Главная » Файлы » Для вчителя » Інформатика [ Добавить материал ]
Поняття про мову розмітки гіпертексту – мову HTML. СИСТЕМА УРОКІВ З ПІДРОЗДІЛУ HTML.
… , назва кожного стовпчика таблиці в „шапці” задається парним тегом , а значення в кожній комірці ділянки даних таблиці – парним тегом .
HTML-документ із таблицею „Мої оцінки” наведено на слідуючому малюнку:

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

5.Вставка малюнків і гіперпосилання. Щоб зробити Web-сторінку цікавішою, часто використовують малюнки. Для того щоб помістити малюнок, треба попередньо зберегти його у файлі. Потім у HTML-документі використати тег

Наприклад, якщо треба помістити фотографію Шаповала, що зберігається у файлі Фото Шаповал.jpg, треба вставити в HTML-документ тег

Цей тег на малюнку йде після тега

Ласкаво просимо



А на слідуючому малюнку показано, як він відображається у вигляді фотографії.

При перегляді Web-сторінки іноді треба перейти з однієї її частини в іншу чи навіть на іншу Web-сторінку. Для організації таких переходів використовують гіперпосилання. На Web-сторінці вони відображаються іншим кольором у вигляді підкресленого тексту. При наведенні покажчика миші на неї покажчик відображається у вигляді кисті руки, а при клацанні – відбувається перехід на зазначене місце.
Для організації переходу усередині HTML-документа використовуються два теги. Перший позначає точку документа, на яку треба перейти. Він має вигляд

Другий тег визначає команду переходу на задану точку. Він має вигляд
Текст
Текст між початковою та кінцевою частинами тега відображається в броузері у вигляді гіперпосилання. Назва точки переходу вибирається розробником Web-документа довільно.
У HTML-документі, поданому на малюнку

існує пара таких тегів: (перед відповідним фрагментом) і Розпорядок дня .
Перехід на іншу Web-сторінку здійснюється за допомогою тега, який має вигляд < HREF=”URL-адреса”> Текст . Зокрема, як URL-адресу можна вказати ім’я файла.
Наприклад, на малюнку вище зазначені теги Мої оцінки і Захоплення , за допомогою яких можна перейти до перегляду раніше створених Web-сторінок. Якщо після перегляду кожної з цих сторінок треба повернутись на початкову сторінку Шаповал.htm, то в кожному з HTML-документів Оцінки.htm і Захоплення.htm бажано розмістити тег

Перехід на початкову сторінку . Його можна вставити перед кінцевою частиною тега .
Вивчивши матеріал, ви зможете створити свої перші Web-сторінки. Якщо ви захочете їх розмістити на Web-сервері, то попередньо зверніться до свого провайдера, щоб узнати ім’я файла початкової сторінки. Дуже часто HTML-документ треба назвати index.html, default.html чи home.html.
Завдання додому:
Вивчити стор.
Підготуватись до практичної роботи „Створення HTML-документа, що містить теги форматування абзаців і символів.”

Запитання для підготовки до роботи:

1.Що являє собою HTML-документ?
2.Яке призначення тегів?
3.Які ви знаєте теги опису структури HTML-документа?
4.Як створюється HTML-документ?
5.Які дії треба виконати, щоб змінити HTML-документ?

Урок3. ПРАКТИЧНА РОБОТА
Тема. Створення HTML-документа, що містить теги форматування абзаців і символів.
Мета.
 Вироблення умінь і навичок створення HTML-документів, які містять теги форматування.
 розвивати логічне мислення учнів;
 виховувати в них охайність записів.
Обладнання: комп’ютер, підручник.
Тип уроку: урок розвитку і закріплення знань.
ХІД РОБОТИ
1.Запустити на виконання текстовий редактор Блокнот командою Пуск-Программы-Стандартные-Блокнот.
2.Увести текст:

3.Зберегти в папці учня на диску у файлі з ім’ям Прізвище.htm.
4.Відкрити файл у програмі ІЕ, двічі клацнувши на значку файла і переглянути відображення HTML-документа в робочій області.
5.Повернутись у вікно Блокнота, клацнувши на його кнопці на панелі задач, і ввести теги форматування в текст, розташований між тегами і . При цьому фрагмент HTML-документа буде мати такий вигляд:

Зберегти документ, натиснувши клавіші .
6.Переглянути одержаний HTML-документ у ІЕ. Для цього клацнути на кнопці ІЕ на панелі задач і обновити вміст робочої ділянки вікна ІЕ, натиснувши функціональну клавішу .
7.Закрити вікна ІЕ і Блокнота.

ОФОРМЛЕННЯ РОБОТИ
За результатами виконаної практичної роботи оформити звіт, у якому відповісти на такі запитання:
1.Чому змінилося відображення тексту HTML-документа у вікні ІЕ при останньому перегляді в порівнянні з його першим переглядом?
2.Яке призначення має кожний тег створеного HTML-документа?
3.Якими засобами форматування Word досягаються ті ж ефекти в Word-документах, що і при використанні тегів у створеному HTML-документі?

Завдання додому:
Підготуватись до практичної роботи „Створення HTML-документа, що містить списки і таблиці”

Запитання для підготовки до роботи:

1.Які види списків у Word ви знаєте й у яких випадках вони використовуються?
2.Які види списків використовуються у Web-документах?
3.Яке призначення тегів у Web-документах?
4.За допомогою яких тегів створюються ненумеровані списки?
5.Які теги використовуються у нумерованому списку?
6.Які теги необхідні для створення словника визначень?
7.Якими засобами Word створюються таблиці?
8.Навіщо потрібні таблиці в документах?
9.Якими засобами створюються таблиці у Web-документах?
10.Який тег використовується для обмеження рядка в таблиці?
11.Яким тегом задається назва стовпчика таблиці у „шапці”?
12.Яким тегом задається значення у комірці ділянки даних таблиці?

Урок4. ПРАКТИЧНА РОБОТА
Тема. Створення HTML-документа, що містить списки і таблиці.
Мета.
 Вироблення умінь і навичок створення списків і таблиць у HTML-документах.
 розвивати логічне мислення учнів;
 виховувати в них охайність записів.
Обладнання: комп’ютер, підручник.
Тип уроку: урок розвитку і закріплення знань.

Обладнання: Графопроектор, таблиці.

ХІД РОБОТИ
1.Запустити на виконання текстовий редактор Блокнот.
2.Увести текст:


3.Зберегти документ в папці учня на диску у файлі з ім’ям Захоплення.htm.
4.Відкрити файл у програмі ІЕ і переглянути відображення HTML-документа в робочій ділянці вікна ІЕ.
5.Повернутися у вікно Блокнота, ввести теги списків, Після цього HTML-документ буде виглядати так:


6.Зберегти документ на диску.
7.Переглянути одержаний HTML-документ у ІЕ.
8.Для придбання навичок роботи з таблицями створити в Блокноті новий документ:

9.Потім зберегти його в папці учня у файлі з ім’ям Оцінки.htm.
Після цього переглянути файл Оцінки.htm у вікні ІЕ.
10.Закрити вікна Блокнота і ІЕ.

ОФОРМЛЕННЯ РОБОТИ
За результатами виконаної практичної роботи оформити звіт, у якому описати призначення тегів, використаних для створення списків і таблиці.
Завдання додому:
Підготуватись до серії практичної роботи:
„Створення власного Web-сайту” (Тему сайту, його структуру обрати довільно, сайт повинен містити мінімум 7 сторінок, підготувати заздалегідь графіку).
Запитання для підготовки до роботи:
1.Що таке Web-сайт і в чому його відмінність від Web-сторінки?
2.Як здійснюється перехід з однієї Web-сторінки на іншу?
3.Які теги використовуються для організації переходу всередині HTML-документа?
4.За допомогою якого тега здійснюється перехід на іншу Web-сторінку?
5.Що являє собою URL-адреса?

Урок 5 – 10. ПРАКТИЧНА РОБОТА
Тема. Створення Web-сайта.
Мета. Вироблення умінь і навичок створення HTML .
 розвивати логічне мислення учнів;
 виховувати в них охайність записів.
Обладнання: комп’ютер, підручник.
Тип уроку: урок розвитку і закріплення знань.

Завдання. Створити власний Web-сайт.
Тематика сайту на власний розсуд.
Сайт повинен містити мінімум 7 сторінок.

ОФОРМЛЕННЯ РОБОТИ
За результатами виконаної практичної роботи оформити звіт, у якому відповісти на такі запитання:
1.За допомогою яких тегів встановлено малюнок у HTML-документ?
2.Які теги забезпечують переходи за гіперпосиланнями усередині одного HTML-документа, а також до інших HTML-документів?

Завдання додому:
Підготуватись до тематичної атестації.

05.08.2009, 22:59
Урок 1 - 2
Тема. Поняття про мову розмітки гіпертексту – мову HTML.
Мета.
 Дати поняття про мову гіпертекстової розмітки, познайомити з тегами мови, засобами створення HTML-документів, тегами форматування символів.
 розвивати логічне мислення учнів;
 виховувати в них охайність записів.
Обладнання: плакати, підручник.
Тип уроку: урок подання нових знань.
ПЛАН УРОКУ
1.Організація класу до занять.
2.Мотивація вивчення теми.
Для зручності читання інформації на Web- сторінці подаю не у вигляді суцільного тексту, а поділяю на різні структурні елементи – окремі рядки, абзаци, списки, таблиці, малюнки, гіперпосилання та ін. Щоб Web-сторінка виглядала однаково при перегляді користувачами в різних частинах Землі за допомогою різних браузерів, її готую у спеціальний спосіб.
Завдання уроку.
• Поняття про мову гіпертекстової розмітки;
• Структурні теги;
• Оформлення тексту у Web- документі;
• Теги форматування символів;
• Теги управління зовнішнім виглядом HTML- документа;
• Включення графіки до Web-сторінки;
• Визначення гіперпосилань;
• Теги оформлення списків даних, робота з таблицями;
• Засоби створення –документів.

3.Вивчення нового матеріалу.
1.Призначення мови й основні поняття. Різні структурні елементи Web-сторінки позначають відповідними операторами, які називаються тегами. При одержанні Web-сторінки із сервера броузер аналізує її. Він знаходить у ній теги, що вказують, якого типу елемент треба відобразити, і виводить фрагмент Web-сторінки на екран.
Сукупність тегів і правил їх використання називається мовою HTML – мова розмітки гіпертексту.
Файл даних, фрагменти якого розмічені тегами мови HTML, називається HTML-документом.
Ім’я такого файла звичайно має розширення .htm чи .html. HTML-документ, поміщений на Web-сервер є Web-сторінкою, яка переглядається за допомогою Web-броузера. Тому, навчившись створювати HTML-документи, ми зможемо робити власні Web-сторінки.
HTML-документ складається з фрагментів тексту у вигляді ASCII-коду й тегів. Теги записуються символами ASII, які беруться в кутові дужки (знаки “<” менше та “>” більше). Таким чином, HTML-документ є звичайним ASII-файлом, і створювати його можна за допомогою найпростішого текстового редактора.
Наприклад, при використанні редактора Блокнот треба ввести вміст HTML-документа, а при збереженні вибрати команду Файл-Сохранить. У вікні Сохранение, що відкрилося, встановити значення Все файлы в полі Тип файла, а в імені обов’язково вказати розширення .htm.

Завдяки цьому файл буде відображатися у вигляді значка броузера, який встановлено на даному комп’ютері. Подвійне клацання на значку відкриває HTML- документ у браузері для перегляду. Наприклад, до поля імені файлу можна ввести його назву Перша.htm, як показано на малюнку.
2.Теги. Структура HTML-документа. Вище було сказано, що тег – це вказівка браузеру, як відображати фрагмент документа. Тег завжди починається символом “<” і закінчується символом “>”. Між цими символами вказується ім’я тега. В імені малі й великі літери не розрізняються.
Теги бувають двох видів – одинарні й парні.
Одинарний тег ставиться перед фрагментом тексту, яким він керує. Наприклад, запис

Зошит
означає, що слово „Зошит” відображається з нового рядка.
Парні теги складаються з двох частин – початкової та завершальної. Початкова частина вказує точку документа, з якої починається дія команди, а завершальна – точку її закінчення. Завершальна частина відрізняється від початкової наявністю символу „ / „ (похила риска) перед ім’ям команди. Наприклад, запис Синій олівець означає, що текст „Синій олівець” відображається напівжирним шрифтом.
Розроблення Web-сторінки складається з двох етапів:
• Створення макета;
• Вставка тегів мови HTML.
При створенні макета визначається зміст Web-сторінки та її зовнішній вигляд. Вставка тегів забезпечує потрібний зовнішній вигляд при перегляді Web-сторінки за допомогою броузера.
Ознакою того, що текстовий файл є HTML-документом, служить парний тег . Він починає і завершає весь документ, тобто HTML-документ має вигляд:

текст документа

HTML-документ складається з двох частин – заголовка й тіла. Заголовок позначається парним тегом … , а тіло – парним тегом … . Текст, що вводиться в заголовку вікна броузера, розміщається в парному тезі … . Структура HTML-документа має вигляд


Заголовок документа


Тіло документа


У будь-якому місці HTML-документа можна помістити коментар. Це текст, який служить для пояснень розробника Web-сторінки та не відображається на екрані під час перегляду Web-сторінки у броузері. Текст коментаря поміщається в парний тег .
Найпростіший HTML-документ, відкритий у редакторі Блокнот, подано на малюнку, а зовнішній вигляд відповідної Web-сторінки в броузері Internet Explorer

3. Форматування абзаців і символів. Щоб текст сторінки не відображався суцільним текстом, використовують такі одинарні теги:

- початок абзацу (текст після тега починається з нового абзацу);

- початок нового рядка (текст після тега починається з нового рядка);

- горизонтальна лінія (у рядку, де розміщено тег, відображається горизонтальна лінія).
При використанні тега

спочатку вставляється порожній рядок. Далі текст виводиться з початку нового рядка. Якщо вжито тег
, то порожній рядок не вставляється.
Перед деякими фрагментами тексту можуть розміщатися заголовки. Вони виділяються більшим шрифтом. HTML має теги для задання величини заголовків (шість рівнів). Найкрупнішим шрифтом виділяються заголовки першого рівня, а найдрібнішим – шостого.
Текст заголовка визначається парним тегом
… , де n – номер рівня.
Наприклад, фрагмент HTML-документа

Ласкаво просимо!

відображається як заголовок першого рівня.
Абзаци й заголовки можна вирівнювати по центру, лівому чи правому краю. Для цього в імені команди в початковій частині тега вказується параметр ALIGN (вирівняти) й після знака «=» (дорівнює) одне з наступних значень:
CENTER – по центру;
LEFT – по лівому краю;
RIGHT – по правому краю.
Наприклад, фрагмент HTML-документа

Заходьте ще! Відображається як текст „Заходьте ще!”, який притиснуто до правого краю.
Якщо в тексті HTML-документа існують додаткові пробіли між словами, то при виводі в броузері вони можуть вилучатися. Щоб зберегти пробіли при відображенні, треба вказати парний тег 

 …
. Він позначає попередньо відформотований текст, тобто текст, що відображається шрифтом фіксованої ширини із збереженням усіх пробілів. Часто цей тег використовується для виведення тексту у вигляді таблиці.
Наприклад, HTML-документ, який подано на рисунку,

відображається в броузері в такому вигляді:

У наведеному вище прикладі використані теги, що керують шрифтом виведення окремих символів.
Для форматування символів у мові HTML існують теги:

Теги форматування символів
Тег Призначення
… Напівжирний
… Курсив
… Підкреслений

4.Списки і таблиці. Якщо у Web-документі треба перераховувати дані, то їх виводять у вигляді списку. Найчастіше використовуються списки таких типів:
• Ненумеровані (маркіровані) – відображаються у вигляді послідовності позначених елементів, позначаються тегом

    …
;
• Нумеровані – відображаються у вигляді списку, елементи якого мають послідовні номери, позначаються тегом
    …
;
• Словник визначень – відображається у вигляді термінів і їх визначень, позначається тегом
…
.
Перед кожним елементом ненумерованого й нумерованого списків вказується одинарний тег
  • . У списку типу словника визначень перед кожним терміном вказується одинарний тег
    , а перед його визначенням – тег
    .
    HTML-документ із нумерованим списком Захоплення та словником визначень, у якому пояснюється кожний вид захоплень наведено на рисунку.

    (1)ненумерований список, (2) словник визначень.
    Як відображаються ці списки у вікні броузера, показано на слідую чому рисунку

    Початок і закінчення ненумерованого списку позначено парним тегом
      …
    , а перед кожним елементом списку одинарний тег
  • (наприклад,
  • інформатика).
    Словник визначень обмежено парним тегом
    …
    . У ньому кожний термін починається одинарним тегом
    , а його пояснення – тегом
    . Наприклад, у словнику визначень використовується термін Інформатика та його визначення:
    Інформатика
    Мені подобається створювати додатки в Access
    У мові HTML дані можна подавати у вигляді таблиці. Для цього використовується тег …
    . У ньому „шапка” таблиці й дані задаються у вигляді послідовних рядків. Кожний рядок обмежується парним тегом
    • … …
    Категория: Інформатика | Добавил: referatwm
    Просмотров: 1465 | Загрузок: 0 | Рейтинг: 3.4/5