Конструктор уроків
- Всеосвіта›
- Бібліотека уроків›
- Професійна освіта›
- Практична робота №1 «Створення HTML-документів в простому текстовому редакторі»
Урок:
Практична робота №1 «Створення HTML-документів в простому текстовому редакторі»
02.11.2022
Вміст уроку:
1
2
Опис, який учні побачать перед початком уроку
Доброго дня читаєм умову уроку виконуєм у програмі блокнот та зберігаєм із розширенням HTML.
1
Практична робота №1
«Створення HTML-документів в простому текстовому редакторі»
Поняття тегу.
Коди мови HTML,за допомогою яких розмічають вихіднийтекст, називають
тегами. Усі теги починаються із символу < і закінчуються символом >.Використовують пару тегів, відкривальний і закривальний. Наприклад
<HTML> </HTML>, <B> </B>, <TITLE></TITLE>….Перший з них задає ефект, а другий - припиняє дію. Закривальний тег починається із символу / (слеш). Деякі теги задають разовий ефект, тоді закривальний тег не потрібний. Прикладиодинарних тегів: <BR>, <HR>, <WETA>,
<BASEFONT>, <FRAME>, <INPUT>.
Відкривальні теги можуть містити атрибути, які впливають на ефект, створюваний тегом. Для деяких атрибутів слід задавати значення, яке відділяють від імені атрибута символом =. Значення атрибута беруть в лапки, але в багатьох випадках їх можна не ставити. Закривальні теги атрибутів не містять. Приклади: <BODY BGCOLOR=”#000000” TEXT”FFFFFFF”….
Структура HTML-документа
Починається з тегу <HTML> ізакінчується відповідним йому тегом
</HTML>. Така пара тегів повідомляє браузеру, що це <HTML>-
документ.
Містить два розділи – заголовків і тіла документа (розміщуються самев такому порядку). Розділ заголовків помічений тегами <HEAD> і
</HEAD> та містить інформацію про документ загалом. Зокрема, він повинен містити в собі теги <TITLE> та </TITLE>, між якими розміщено текст, що відображатиметься в заголовку вікна браузера.Крім цього, у розділі заголовків може міститися тег <META>, призначений для технічного опису документа (це інформація для пошукових програм), а також тег <STYLE> для опису стилів (наборів параметрів форматування), використаних в документі.
Сам текст документа міститься в його тілі, яке розташоване між тегами <BODY> та </BODY>.
Теги
Від <H1>…</H1> до <H6>…</H6> - шість рівнів заголовків, які підтримує мова HTML. Найвищий рівень заголовків <H1>…</H1>. Текст, що міститься всередині тегу заголовка, відображатиметься відповідно до його рівня. Текст заголовка може бути вирівняний по центру, за правим, за лівим краєм – для цього використовують атрибут ALIGN. Приклад: <H2 ALIGN=center>Текст заголовка</H2>;
<P> і </P> - теги для визначення звичайних абзаців (Слід пам’ятати, що всі
«зайві» пропуски між словами і переходи на новий рядок під час відтворення <HTML>-документа браузер ігнорує;
<BR> -одинарний тег для переходу на новий рядок без створення абзацу;
<HR> - одинарнийтег для розділення тексту горизонтальною лінією;
Кольори та зображення для всього документа і його тла задають за допомогою тегу <BODY>. Він може мати такі атрибути:
BACKGROUND=”URL” – замість ”URL”вказують адресу малюнка, якиймає бути тлом для сторінки;
BGCOLOR=значення – задає колір, який має бути фоновим для документа;
TEXT=значення – задає колір тексту;
LINK=значення – визначає колір гіперпосилань у документі;
ALINK=значення –задає колір гіперпосилань під час клацання;
VLINK=значення – задає колір переглянутих гіперпосилань.
2
12 з 12 балів
Вправа1.
Створити HTML-документ за допомогою найпростішого текстового редактора.
Створіть у своїй папці папку під назвою «Мій вебдокумент».
Відкрийте текстовий редакторБлокнот.
Для створення HTML-документа наберіть такий текст:
<HTML>
<HEAD>
<TITLE>Купівля\продаж</TITLE>
</HEAD>
<BODY>
<H1>Торгівельні об’єкти Тернопільщини</H1>
<H2>Супермаркети</H2>
<P>На Львівщині діє мережа магазинів Інтермаркет. У кожному районі є торговельний об’єкт.
<P>Одним із таких магазинів став нещодавно відкритий супермаркет
«Арсен».<HR>Це торгівельний центр із багатьма відділами та зручною системою обслуговування покупців.<BR>Його можна назвати торговельним містечком.
</BODY>
</HTML>
Збережіть файл на жорсткому диску у створеній заздалегідь папці, назвавши його, наприклад, ВАШЕ ПРІЗВИЩЕ.html. З’явиться файл зі значком Internet Explorer. Закрийте текстовий редактор.
Запустіть файл 1.html. Перегляньте отриманий результат.
Проаналізуйте, як відтворено веб-сторінку. Якщо потрібно внести зміни, виберіть команду Перегляд HTML-коду в меню Вигляд(Вид). Збережіть зміни та оновіть веб-сторінку за допомогою клавіші F5 або кнопки Оновити панелі інструментів.,
Файл вантажим у програму.
.png)
Рефлексія від 14 учнів
Сподобався:
0
Так: 13
Ні: 1
Зрозумілий:
0
Так: 11
Ні: 3
Потрібні роз'яснення:
0
Ні: 13
Так: 1