Тема по програмі

Скачати 64.49 Kb.

Назва	Тема по програмі
Дата	31.03.2013
Розмір	64.49 Kb.
Тип	Документи

bibl.com.ua > Інформатика > Документи

План заняття

виробничого навчання

Тема по програмі: Основи WEB- дизайну

Тема заняття: Робота з основними тегами HTML

Мета заняття: навчити учнів створювати WEB-документи за допомогою мови HTML.

Матеріально - технічне забезпечення уроку: персональні комп'ютери з операційною системою Windows, підключені до мережі, роздатковий матеріал, плакат.

Структура заняття

І. Вступний інструктаж

1.1. Організаційний момент: Привітання, перевірка готовності учнів до заняття, перевірка присутніх.

Оголошення теми, мети заняття.
1.2. Перевірка правил ТБ:

- Облаштованість робочих місць операторів ПЕОМ;

- Вимоги безпеки перед початком роботи;

- Вимоги безпеки під час роботи;

- Вимоги безпеки по закінченню роботи.

1.3. Перевірка знань пройденого матеріалу:

Фронтальне опитування учнів з попередньої теми:

Як запустити програму Internet Explorer?
Що таке пошукові сервери?
Для чого призначені логічні слова?
Які самі популярні сервери Internet?
Як створити WEB-документ у програмі WORD?

Інформація у World Wide Web представляється у вигляді гіпертекстових документів – Web-сторінок, які розміщаються на Web-вузлах.

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

Для перегляду Web-сторінок потрібний Web-браузер – спеціальна програма. Популярним Web-броузером є Internet Explorer, який вбудовано безпосередньо в операційну систему Windows’98 (2000, NT тощо).

Браузер (“Обозреватель” – оглядач) здатний відображати на екрані текстову або графічну інформацію, а також звуки, анімацію і відео. Користувач за його допомогою може переглянути потрібну Web-сторінку, купити щось в електронному магазині, оплатити послуги і багато чого іншого.
Адреса Web-сторінки

Кожна Web-сторінка має свою унікальну адресу, за якою її можна знайти.

Адреса Web-сторінки у Всесвітній мережі Internet визначається уніфікованим покажчиком ресурсу – URL (Uniform Resource Locator) .

Адреса URL складається з трьох частин:

• Назва протоколу передачі гіпертексту (для служби WWW застосовується протокол HTTP);

• Доменне ім’я сервера, де зберігається потрібний Web-документ;

• Повний шлях доступу до файла Web-документа на сервері.

адреса Web-сторінки може виглядати так: http://cws.internet.com/32menu.html

http:// - протокол передачі гіпертексту, мова Web
Створення та збереження Web- сторінки

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

Після успішного завантаження на екрані з’являється Web-сторінка.

Після завантаження на екрані з’являється початкова Web-сторінка, відкриття наступних сторінок проводиться відповідними діями користувача.

Елементами вікна перегляду Web-сторінки можуть бути:

• Бігунки для пересування вздовж сторінки.

• Вкладки з назвами посилань на наступні сторінки.

• Каталог з назвами наступних сторінок.

• Вікно текстового і графічного повідомлення.

• Панель для пошуку інформації на Web-сторінці.

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

Простий приклад, обмежений ціми тегами, інтерпритується броузером як назва Web-стрінки і відображається у заголовку вікна броузера; збереження тексту в” БЛОКНОТІ”.

У цьому документі ви бачите заголовну частину, обмежену тегами,<HEAD>..(ввести інформацію) </HEAD> і тіло документа вміщене між тегами <BODY>...</BODY>. До заголовної частини вкладені теги <TITLE>...</TITLE>.

Текст прикладу, обмежений цими тегами, інтерпретується браузером як назва Web-стрінки і відображається у заголовку вікна броузера.

Завдання кольору шрифту, фон сторінки

Якщо потрібно визначити колір шрифту для всієї сторінки, то використовується атрибут text у тегу <BODY>.

Наприклад:

задає для всього тексту червоний колір.

Колір фону всього HTML- документа визначається атрибутом bicolor

тегу <BODY>.

Наприклад: <BODY bgcolor="olive">

призначає оливковий колір для фону Web-сторінки.
Абзац тексту:

Для створення абзацу у мові HTML передбачено кілька можливостей. Найпростіша із них - це використання тегів <�Р> і </Р>, між якими вміщений текст абзацу. Втім кінцевий тег в елементі абзацу не є обов'язковим.

Для переведення рядка (розрив рядка) використовується тег <�ВК>.цей тег є порожнім елементом, що змушує броузер перевести текст на новий рядок.

Для завдання заголовків використовуються парні теги <�Н1> (заголовок 1-го, найвищого рівня), <�Н2> (2-го рівня). Усього передбачено 6-ть рівнів заголовків. Приклад:

<�Н1> Ведмежий суд </Н1>

Вирівнювання абзаців можна здійснити за допомогою атрибута align. Вирівнювання align="center" задаватиме вирівнювання по центру, значення align="right" - вирівнювання по правому краю сторінки, align—"left" - приклад:

<�Н1 align =" center">Ведмежий суд</Н1>

Шрифт:

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

<�В>...</В> -для завдання напівжирного тексту,
<�І>...</І> - для завдання курсивного тексту
...</U> -для підкресленого тексту

Вставка зображення

Важко знайти в WWW сторінку, яка не мала б зображень. Вставка зображення на Web- сторінку виконується одиночним тегом <IMG>. Усередині цього тегу обов'язково записується атрибут src, що вміщує URL зображення.

Назва цього атрибута походить від слова source - джерело.

Наприклад, ви хочете розмістити на сторінці картинку з файла Lord.jpg. Для цього збережіть файл із зображенням у певній папці (наприклад, у тій самій папці, що і HTML-документ), а у документ введіть тег

Повний код документа може мати вигляд:

<TITLE>"Володар перстнів"</ТІТLЕ>

<Н2> Вставка зображення </Н2>

Схожі:

Тема: Основні прийоми роботи в програмі Microsoft FrontPage Мета: Ознайомитися з інтерфейсом програми та засвоїти основні прийоми роботи в програмі	Тема по програмі Тема заняття: Робота з меню електронної таблиці. Створення, завантаження та збереження файлів-книг. Введення, редагування та форматування...
Тема по програмі Тема уроку: Поняття запиту. Створення запитів. Виконання обчислень у запитах. Створення та редагування звітів	Тема по програмі Тема заняття: Робота з головним меню програми Page Maker, вікном та панелями інструментів, палітрою інструментів
Тема по програмі Тема уроку: Створення слайдів презентації. Робота зі слайдами презентації. Редагування та демонстрація презентації	Тема по програмі ...
Тема по програмі Табличний редактор Adobe Table може бути відкритий безпосередньо з програми PageMaker	Тема по програмі Мета заняття: Навчити учнів розбирати та вивчити основні деталі та блоки моніторів
Тема по програмі Мета уроку: Навчитися створювати та редагувати форми у базі даних та виконувати обчислення	Тема по програмі Мета заняття: Навчити учнів розбирати та вивчити основні деталі та блоки моніторів

Додайте кнопку на своєму сайті:
Портал навчання