Понеділок, 10.12.2018, 00:12
Вітаю Вас Гість | RSS

Старокостянтинівська ЗОШ №3

Статистика

Онлайн всього: 1
Гостей: 1
Користувачів: 0

Уроки інформатики


Інформатика - єдність науки і технології...
 
Для підготовки до олімпіади з інформатики

http://mail.rambler.ru/m/redirect?url=http%3A%2F%2Fwww.lito.kr.ua%2Findex.php%3Foption%3Dcom_content%26task%3Dview%26id%3D46%26Itemid%3D41;href=1

Розділ "Перевір себе" на сайті berezdiv.at.ua

Підготовчі матеріали - intelektualnijj-internet.zip [8.87 Kb] (завантажень: 1)


1. Посилання на ресурс з конспектами уроків за підручником Завадського -
 
2. Творча лабораторія вчителя інформатики http://teachlab.ucoz.ua/
 

Тема: Поняття про мову HTML.

Мета: ознайомити учнів з способами створення web-сторінок; сформувати поняття про HTML-файл, коди мови HTML, структурні теги; навчити створювати, форматувати та переглядати за допомогою web-броузера HTML-файли; розвивати логічне мислення.

Обладнання: Комп‘ютер, internet, програма комп‘ютерного адміністрування NetOP School, комп‘ютерні програми: Internet Explorer, Блокнот, MS Frontpage, MS Publisher, MS Word.

Тип: Засвоєння нових знань.

Хід уроку

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

Вчитель. Хто знає що таке Інтернет?

Учні. Інтернет – це глобальна комп‘ютерна мережа до складу якої входять різні комп‘ютерні мережі, а також мільйони комп‘ютерів по всьому світу.

Вчитель. Які існують служби Інтернет?

Учні.   

·        Електронна пошта.

·        Файлові архіви.

·        Інтерактивне спілкування.

·        Групи новин.

·        World Wide Web.

            Вчитель. Продовжіть речення: World Wide Web – це…

Учні. World Wide Web – це єдиний інформаційний простір, який складається із сотень мільйонів взаємозв‘язаних web-сторінок, які зберігаються на web-серверах.

II Оголошення теми та мети уроку.

1.      Вчитель оголошує тему уроку.

2.   Мотивація навчання школярів.

Вчитель. Вивчення даної теми необхідне для кращого розуміння принципів функціонування найпопулярнішої служби Інтернет  - World Wide Web.

3.      Мета уроку.

III Вивчення нового матеріалу.

Вчитель. Давайте запустимо веб-броузер Internet Explorer і в рядку адреси введемо www.olympiada.km.ua. Перед Вами веб-сторінка олімпіад з інформатики:

Далі давайте виконаємо наступні команди:

Рядок меню\Вигляд\Перегляд HTML-коду. В результаті з‘явиться наступне вікно:

Що ми бачимо на моніторах?

Учні. Код веб-сторінки, який записаний у блокноті.

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

Користувачі WWW можуть не тільки переглядати чужі Web-сторінки, але й створювати, свої. Щоб створювати Web-сторінки, немає необхідності вивчати мову HTML. Можна конвертувати у Web-сторінки документи, створені за допомогою текстового процесора Word, або за допомогою засобу Front Page Express, що є в складі Office XP, чи програми PublisherOffice 2003)

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

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

Керуючим елементом мови HTML є тег, який визначає, як буде виглядати відповідний фрагмент на екрані броузера.

Тег – це команда формування вигляду фрагменту web-сторінки, яка завжди записується в кутових дужках.

Всі HTML-документи будуються за визначеними правилами:

·        Текст документа починається тегом <html> і закінчується тегом </html>;

·        всередині контейнера <html> знаходяться ще два контейнери <head> (заголовок веб-сторінки) і <body> (її зміст);

·        всередині контейнера <head> знаходяться інші контейнери, серед них <title> (рядок символів заголовка вікна броузера ).

Наприклад, закінчений HTML-файл буде мати такий вигляд:

<html>

<head>

<title>Наша Web-сторінка </title>

</head>                                                                     Текст 1

<body>

Ми, учні 11-го класу вітаємо всіх хто нас знає

</body>

</html>

Завдання учням: набрати текст 1 в ТР «Блокнот», зберегти його у власну папку з іменем 11_kl_z1 з розширенням .html. Відкрити програму Internet Explorer і виконати команду Файл\Відкрити\Огляд\11_kl1_z1, подивитись що буде на екрані.

Вчитель. Який висновок Ви можете зробити переглянувши щойно створений файл у вікні веб-броузера?

Учні. При відображенні HTML-файла браузером зайві пропуски ігноруються. Якщо позділити два слова трьома пропусками, то на екрані між словами залишиться один пропуск, а кілька порожніх рядків будуть замінені на один. Коли текст досягає правої границі вікна, він автоматично переходить на новий рядок.

Вчитель.  Що можна сказати про словосполучення «Наша Web-сторінка»?

Учні. Даний запис знаходиться в рядку заголовка вікна броузера/

Вчитель. Все, що розташовано між тегами <head> </head>, - це службова інформація., між тегами <body> </body>, - це безпосередній зміст документа.

Учні. Як встановити інший колір тексту і фону?

Вчитель. Кольори тексту встановлюються за допомогою тега <font color=”Назва кольору”>; Колір фону сторінки встановлюється за допомогою <body bgcolor=”Назва кольору”>. Розмір шрифта змінюється за допомогою команди <font size=”+4”> (Чим більша цифра, тим більший розмір шрифта). Для збереження зору не слід зловживати яскравими фонами (жовтий, червоний, салатний або чорний фон з яскравим текстом на ньому), а багато різних кольорів на сторінці відволікають увагу від змісту, заважаючи його читати.

Учні. А можна змінити тип шрифта?

Вчитель. Для цього використовують тег <font face=”arial”>текст</font>

Деякі корисні прості теги:

<i> </i> - почати текст виводити курсивом;

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

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

Теги, з допомогою який відбувається вирівнювання тексту;

<p align=”center”>текст</p> - по центру;

<p align=”left”>текст</p>- по лівому краю;

<p align=”justify”>текст</p>

<p align=”right”>текст</p> - по правому краю.

IV Закріплення знань.

Вчитель. Спробуйте до попереднього HTML- файла за допомогою редактора «Блокнот» додати нові елементи і зберегти з новим ім‘ям 11kl_pr2.html таким чином, щоб отримати у вікні Internet Explorer наступне зображення:

Вчитель. Якщо Ви все вірно виконали, то HTML-файл у блокноті буде мати такий вигляд:

V Підведення підсумків.

Вчитель. 1. Якою мовою створюється веб-сторінка і яким чиним відображується?

2.      Що таке тег? Для чого використовуються теги?

3.      Яку структуру має HTML-документ?

4.      Назвіть основні теги HTML.

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

Написати в зошиті HTML-код веб-сторінки в якій мають знаходитись відомості про Вас: Прізвище, Ім‘я, По-батькові, Дом. адреса, Телефон.

Всі дані повинні бути написані в окремих рядках різними шрифтами та кольорами на сірому фоні..

Додаткове завдання: Вставити на створену веб-сторінку свою фотокартку.

 

 

 

 

 

 

 

 

 

 

 

 

 

Вхід на сайт
Пошук
Календар
«  Грудень 2018  »
ПнВтСрЧтПтСбНд
     12
3456789
10111213141516
17181920212223
24252627282930
31

Copyright MyCorp © 2018
Зробити безкоштовний сайт з uCoz