61074
Поняття про мову розмітки гіпертексту – мову НТМL. НТМL-файл. Коди (теги) мови. Засоби створення НТМL-документів. Оформлення тексту в HTML-документі
Конспект урока
Педагогика и дидактика
Оформлення тексту в HTML документі. Теги управління зовнішнім виглядом HTMLдокументу. Використовувані матеріали: презентація карточки додаткові електронні матеріали файли...
Украинкский
2014-05-23
272.5 KB
20 чел.
Тема: Поняття про мову розмітки гіпертексту мову НТМL. НТМL-файл. Коди (теги) мови. Засоби створення НТМL-документів. Оформлення тексту в HTML-документі. Теги управління зовнішнім виглядом HTML-документу. Теги форматування символів. Теги оформлення списків даних.
Мета:
Навчальна: Сформувати уявлення про призначення мови НТМL. Ознайомити учнів з короткою історією створення мови НТМL. Ознайомити учнів із структурою НТМL документа; надати представлення основних понятий тег; ознайомити з технологією створення Web-сторінок та тегами форматування символів.
Розвивати у учнів кругозір, мислення, уміння порівнювати та узагальнювати.
Виховувати допитливість, культуру мовлення, інформаційну культуру, позитивне ставлення до знань.
Тип заняття: урок вивчення нового матеріалу.
Вид урока: теоретичний урок.
Методы: объяснительно-иллюстративный, репродуктивний з використанням інтерактивних технологій навчання.
Використовувані матеріали: презентація, карточки, додаткові електронні матеріали файли з папки “11Б_HTML”:
матеріал підручників з інформатики.
Обладнання: проектор, таблиці, компютери.
Епіграф уроку: “Благо скрізь і всюди залежить від дотримання двох умов:
1) правильного встановлення кінцевої мети всякого роду діяльності і
2) відшукання відповідних засобів, що ведуть до кінцевої мети”.
(Аристотель)
ОРІЄНТОВНИЙ ПЛАН УРОКУ
Етап уроку |
Зміст роботи |
Орієнтов-ний час, хв |
І |
Організаційний момент |
1 |
II |
Актуалізація опорних знань (опитування та голосування картками) |
3 |
III |
Мотивація вивчення теми. |
3 |
IV |
Оголошення, представлення теми та очікуваних навчальних результатів |
1 |
V |
Вивчення нового матеріалу (повідомлення вчителя з елементами бесіди) та надання необхідної інформації для роботи |
5 |
VI |
Рефлексія перша. Закріплення нового матеріалу (дослідницька робота у парах) |
3 |
VII |
Створення конспекту та отримання завдання. |
5 |
VIII |
Інструктаж з техніки безпеки. |
1 |
ІХ |
Інтерактивна вправа та робота за комп'ютером. Удосконалення набутих знань (колективне обговорення) |
15 |
X |
Підбиття підсумків, оцінювання результатів уроку |
5 |
XI |
Домашнє завдання |
2 |
XIІ |
Рефлексія друга |
1 |
Структура уроку:
Підготовка до основного етапу уроку.
Кожний користувач 21 віка повинен уміти представляти свою інформацію в Internet. Як же створити Web сторінку самому? Тема наступного уроку, з якою ми познайомимося Web конструювання. Тому сьогодні я запросила на допомогу трьох учнів нашої школи, які самостійно засвоїли цій матеріал, пишуть сайти та будуть грати роль експертів у нашому інтерактиві.
Гіпертекст це розширений текст, який включає додаткові елементи: ілюстрації, посилання, вставні обєкти.
Це фрагменти тексту, зображення, або інші обєкти в електронних документах, які дозволяють створювати навігацію, як по окремому документу, так і по документах мережі Інтернет. Гіперпосилання може мати вигляд підкресленого тексту і бути іншого кольору ніж основний текст. Воно містить або адресу файлу, або вказівку на місце в документі до якого треба перейти. Якщо курсор миші навести на гіперпосилання, то він набуває вигляду долоні.
Це текст, написаний мовою НТМL, який призначений для перегляду електронної інформації на екрані компютера. Для перегляду WEB-документів використовують спеціальні програми, які називають браузерами (оглядачами). WEB-документ, який ми бачимо на екрані з допомогою браузера, називають WЕВ-сторінкою. WEB-документи зберігаються і пересилаються як текстові файли з розширенням htm чи html.
Декілька документів на одну тему, що є на деякому компютері чи належить одному власникові, утворюють (інший термін WЕВ-вузол).
Для перегляду WЕВ-сторінок використовуються програми-клієнти, які називаються WЕВ-браузерами (від англ.. to browse - переглянути). Зараз популярними браузерами є Internet Explorer фірми Microsoft та Netscape Navigator фірми Netscape.
Web сервер компютер в мережі Internet, де зберігаються Web-сторінки та відповідне програмне забезпечення для роботи з ними.
(Текстова, графічна, звукова, відео) Web сторінка є мультімедійна, як презентація.
Один з експертів забирає правильну відповідь, інший вивішує плакат:
Word Wide Web
Web сервер
WЕВ-сайт
Web сторінка
3. Мотивація вивчення теми.
Завдання 1. Відновите аналогічний ланцюжок.
?
Книга
?
Сторінки у книзі з'єднані механічним шляхом (плетіння, склеювання, за допомогою скоб и т. д.), а в Web сайтах як з'єднані Web сторінки? (Гіперпосиланнями)
Для того, щоб створити Web сторінку потрібно написати програму.
Де ви зустрічалися з цім словом? (Коли вивчали основи програмування.) (подарувати кольоровий папірець)
Ви писали команди на мові програмування Паскаль та виходила програма.
Згадаємо технологію створення програми на мові програмування Паскаль:
1. Набір тексту програми.
2. Запуск програми.
3. Збереження програми з поширенням *.рas.
Тепер ми будемо діяти по другому. Нам необхідно буде мати 2 програми:
1. Блокнот (для створення тексту програм Пуск/Програми/Стандартні/Блокнот)
2. Браузер Internet Explorer (будемо відображати інформацію в своєму робочому вікні)
Технологія створення Web сторінки:
1. Набор тексту програми.
2. Збереження програми з поширенням *.htm.
3. Запуск.
А на якій мові ми будемо писати програму для створення Web сторінки? (На мові HTML). (подарувати кольоровий папірець)
Перед тим як почати писати програму на мові HTML, ми познайомимося з основами мови HTML.
Що ж таке програма? (подарувати кольоровий папірець) Зазвичай комп'ютерна програма виконує обробку якихось даних, які підчас виконання програми зберігаються в оперативній пам'яті. Як ви гадаєте, яким чином можна занести дані в пам'ять комп'ютера? Вчитель підводить учнів до думки, що мають існувати спеціальні засоби (команди), які дозволяють занести дані в пам'ять комп'ютера. (подарувати кольоровий папірець)
Для зручності читання інформації на Web-сторінці подають не у вигляді суцільного тексту, а поділяю на різні структурні елементи окремі рядки, абзаци, списки, таблиці, малюнки, гіперпосилання та ін. Щоб Web-сторінка виглядала однаково при перегляді користувачами в різних частинах Землі за допомогою різних броузерів, її готують у спеціальний спосіб розмітки тексту.
4. Оголошення, представлення теми та очікуваних навчальних результатів
Завдання уроку.
Після цього уроку учні зможуть.
Мова HTML призначена для розмітки текстових документів, розмітка означає, що у звичайний текст добавляються спеціальні команди (вказівки управління) HTML, які описують те, як він повинен виглядати. Мова HTML не форматує документ, а описує його структуру. (вчитель супроводжує за допомогою проектору свої дії, відкриває кодову сторінку) Наприклад, окремий фрагмент тексту повинен бути заголовком. Тоді на екрані цей фрагмент буде виглядати інакше, ніж „звичайний” текст. Форматування документу відбувається потім, під час перегляду його за допомогою браузера. Браузер бачить команди і форматує документ на екрані, відповідно своїм настройкам та можливостям компютерної системи, в якій він працює.
Таким чином різні структурні елементи Web-сторінки позначають відповідними операторами, які називаються тегами. При одержанні Web-сторінки із сервера броузер аналізує її. Він знаходить у ній теги, що вказують, якого типу елемент треба відобразити, і виводить фрагмент Web-сторінки на екран.
Сукупність тегів і правил їх використання називається мовою HTML мова розмітки гіпертексту.
Файл даних, фрагменти якого розмічені тегами мови HTML, називається HTML-документом.
Імя такого файла звичайно має розширення .htm чи .html. HTML-документ, поміщений на Web-сервер є Web-сторінкою, яка переглядається за допомогою Web-броузера. Тому, навчившись створювати HTML-документи, ми зможемо робити власні Web-сторінки.
Наприклад, при використанні редактора Блокнот треба ввести вміст HTML-документа, а при збереженні вибрати команду Файл-Сохранить. У вікні Сохранение, що відкрилося, встановити значення Все файлы в полі Тип файла, а в імені обовязково вказати розширення .htm. (Вчитель показує на екрані з готовим шаблоном.)
Завдяки цьому файл буде відображатися у вигляді значка броузера, який встановлено на даному компютері. Подвійне клацання на значку відкриває HTML-документ у броузері для перегляду. Наприклад, до поля імені файла можна ввести його назву Перша.htm, як показано на екрані. Відкрити кодовану сторінку.
Таким чином маємо. Один з експертів забирає плакати, інший вивішує новий плакат:
Одиночний
ТЕГ
Відкриваючий < >
Парний
Закриваючий </>
Завдання 2. Дані теги, визначити парні та одиночні теги.
<H1> </H1>, <Br>, <Hr>, <Head> </Head>
Структура HTML документа.
Всі HTML документи будуються за визначеними правилами. Існують обовязкові та не обовязкові теги. Розроблення Web-сторінки складається з двох етапів:
При створенні макета визначається зміст Web-сторінки та її зовнішній вигляд. Вставка тегів забезпечує потрібний зовнішній вигляд при перегляді Web-сторінки за допомогою броузера.
Обовязкові теги:
<HTML>... </HTML>
текст документа починається тегом <HTML>
і закінчується тегом </HTML> (Це ознака того, що текстовий файл є HTML-документом). HTML-документ складається з двох частин заголовка й тіла.
<HEAD>... </HEAD>
<HEAD> вказує на початок заголовку WEB - сторінки
</HEAD> вказує на кінець заголовку WEB - сторінки. Тут може знаходитися також різна службова інформація
<TITLE> ... </TITLE>
Все, що знаходиться між тегами <TITLE> і </TITLE>, браузер сприймає як назву документу, вона знаходиться в заголовку вікна браузера
<BODY>... </BODY>
У середині пари тегів <BODY> ... </BODY> записується весь текст
Приклад 1:
<HTML>
<HEAD><TITLE> Перший HTML - документ </TITLE> </HEAD>
<BODY>
<H1> Я вивчаю WEB - програмування. </H1> Я хочу стати WEB - дизайнером.
</BODY>
</HTML>
Якщо в будь-якому редакторі, наприклад „Блокноті”, ввести цей приклад та зберегти його у файлі з довільним іменем але обов'язково з розширенням .html, а після цього відкрити програму Internet Explorer, виконавши команду Файл => Открыть => кнопка „Обзор” => ім'я файлу, то на екрані браузера побачимо WEB сторінку:
Мал. 1. Вид WEB - сторінки.
<HTML>
<HEAD>
службова інформація
<TITLE>
інформація об імені сторінки
</TITLE>
</HEAD>
<BODY>
<H1>
WEB-документ
</H1>
</BODY>
</HTML>
Вчитель показує у шаблоні як вставляти теги форматування та коментує свої дії. (Наприклад, <P></P>, та розриву рядка <BR>, <HR>, <H1>, <B> тощо.
Учні у дошки заповнюють пропущені місця. Перевіряють експерти.
мова . . . . (HTML) поширення файлу . . . . (*.htm) <BODY> . . . (тег) перший тег програми . . . (<HTML>) Запуск програми Блокнот . . . (Пуск/Програми/Стандартні/Блокнот) |
Гіперпосилання . . . (перехід від одної сторінки до другої) HTML-програму виконує . . . . (Internet Explorer) Парний тег . . . (< > </ >) Web сайт складається з . . . (Web сторінок) Текст програми пишемо . . . (у програмі Блокнот) |
А інші учні складають розрізане лото:
<HTML>
текст документа
</HTML>
Це ознака того, що текстовий файл є HTML-документом
Заголовок <HEAD> … </HEAD>, а тіло <BODY> … </BODY>
Текст, що вводиться в заголовку вікна броузера, розміщається в парному тезі <TITLE> … </TITLE>
<H1> Ласкаво просимо! </H1>
Перевіряють експерти.
Вчитель готовить презентацію до демонстрації.
Поглядання презентації та створення конспекту, видаються типові таблиці тегів.
Завдання 3. Створити WEB - сторінки за зразками прикладів розглянутих на уроці.
Завдання 4. Створити WEB - сторінку з розповіддю про себе.
Вивчивши матеріал, ви зможете створити свої перші Web-сторінки. Якщо ви захочете їх розмістити на Web-сервері, то попередньо зверніться до свого провайдера, щоб узнати імя файла початкової сторінки. Дуже часто HTML-документ треба назвати index.html, default.html чи home.html
Вчитель пропонує учням відповісти на питання. Запитання для бесіди:
Відкриємо запропоновані вами файли для підсумків за допомогою браузера ....(ІЕ, Опера)
Вказівки, до складу яких входять дескриптори і атрибути, називаються тегами. Дескрипторами називатимемо частини тегів, які вказують на спосіб відтворення образу. Дескриптори вказують на способи відтворення інформації програмам-броузерам, які утворюють середовище-інтерпретатор. Атрибути деталізують описання способів відтворення, тобто їх значення є операндами.
Переглянемо цій файл за допомогою текстового редактора ... . Якщо треба задаються таки питання:
А тепер витремо цей тег, збережемо файл та оновити сторінку в броузері. (учні побачать що зникло зображення і роблять висновки, що тег відповідає за вставляння зображення)
А тепер витріть цей тег, збережіть файл та оновіть сторінку в броузері. (учні побачать що зникло посилання і роблять висновки, що тег відповідає за вставляння посилання)
Ще є запитання?
1.Що являє собою HTML-документ?
2.Яке призначення тегів?
3.Які ви знаєте теги опису структури HTML-документа?
4.Як створюється HTML-документ?ї
5.Які дії треба виконати, щоб змінити HTML-документ?
Приклад програми:
<html>
<head><title>Тиждень інформатики в УФМЛ КНУ</title></head>
<body>
<h1><center> Український фізико-математичний ліцей Київського національного університету
імені Тараса Шевченка<BR>
запрошує Вас взяти участь у заходах <BR>
Тижня інформатики ліцею </center></h2>
<center><h3> Час проведення з 6 по 12 лютого </h3></center>
<center><h5> Буде проведено АСМ-олімпіаду з інформатики, <BR>
Чемпіонат по логічним іграм<BR>
Брейн-ринг та багато інших цікавих заходів</h5></center>
<hr>
<P ALIGN=left>Наша адреса : проспект Академіка Глушкова, 6
<p ALIGN=right> Довідки за телефоном : 2590394
</body>
</html>
Приклад WEB-оголошення
Довідковий матеріал.
Структура документу:
<HTML>
<HEAD><TITLE> Заголовок документу </TITLE></HEAD>
<BODY>
Текст, який можна прочитати на екрані
</BODY>
</HTML>
Параметри тега <BODY>:
BACKGROUND задає шлях до картинки фону;
BGCOLOR = „колір” задає колір фону;
BGPROPERTIES = „fixed” фонове зображення не прокручується;
TEXT =„колір” задає колір тексту.
<Ні>... </Ні> cтворення заголовків (Headings)
і - цифра від 1 до 6, заголовок першого рівня <Н1>... </Н1> самий великий, шостого рівня, відповідно самий маленький
Теги <Ні> і <Р> можуть мати атрибут ALIGN - вирівнювання:
СENTER - по центру;
RIGHT - по правому краю ;
LEFT - по лівому краю.
<ВR> - Перехід на новий рядок
<HR> - Горизонтальні лінії
Тег <HR> одинарний. Атрибути тега <HR>:
ALIGN (значення: CENTER, RIGHT, LEFT);
WIDTH - задає довжину лінії в пікселях або у відсотках від ширини вікна браузера, в останньому випадку ставиться символ %;
SIZE - задає ширину лінії в пік селях;
NOSHADE - відміняє рельєфність лінії;
COLOR - задає колір лінії.
<!-- ... --> - коментарі
Теги форматування символів
Тег |
Призначення |
<B>…</B> |
Напівжирний |
<I>…</I> |
Курсив |
<U>…</U> |
Підкреслений |
Списки.
Перед кожним елементом ненумерованого й нумерованого списків вказується одинарний тег <li>. У списку типу словника визначень перед кожним терміном вказується одинарний тег <dt>, а перед його визначенням тег <dd>.
Початок і закінчення ненумерованого списку позначено парним тегом <ul> … </ul>, а перед кожним елементом списку одинарний тег <li> (наприклад, <li> інформатика).
Словник визначень обмежено парним тегом <dl> … </dl>. У ньому кожний термін починається одинарним тегом <dt>, а його пояснення тегом <dt>. Наприклад, у словнику визначень використовується термін Інформатика та його визначення:
<dt> Інформатика
<dd> Мені подобається створювати додатки в Access
Вставка малюнків і гіперпосилання. У HTML-документі використати тег <img src = імя файла”>
Наприклад, якщо треба помістити фотографію Шаповала, що зберігається у файлі Фото Шаповал.jpg, треба вставити в HTML-документ тег
<img src = “Фото Шаповал.jpg”>
Щоб переглянути іншу сторінку або документ та повернутись на початкову сторінку Шаповал.htm, то в кожному з HTML-документів Оцінки.htm і Захоплення.htm бажано розмістити тег <p> <A HREF=”Шаповал.htm”> Перехід на початкову сторінку </A>.
HTML
код
текст
Web сторінка
Броузер
Текстовий редактор
<B> </B>
<I> </I>
<U> </U>
<S> </S>
<STRONG>
<CITE>
<EM>
<KBD>
<FONT
COLOR=
FASE=
SIZE= >
<P>
<BR>
<HR>
<H1> </H1>
…
<H6> </H6>
Вид символів
Параметри шріфта
абзац
аголовок
текстові
блочні
Елементи мови HTML
Вид символів
Параметри шріфта
абзац
заголовок
текстові
блочні
Елементи мови HTML
А также другие работы, которые могут Вас заинтересовать | |||
18840. | Определение входного сопротивления | 79.52 KB | |
Определение входного сопротивления Опишем линейную модель усилителя системой уравнений в соответствии с 1 и 2 законами Кирхгофа: Из уравнения 2 определим: и подставим в уравнение 1. Отсюда находим входное сопротивление транзистора. При напряжении колл... | |||
18841. | Определение коэффициента усиления по напряжению | 225.45 KB | |
Определение коэффициента усиления по напряжению Для этого воспользуемся следующей методикой: Рис. 3.10 упрощенная схема замещения усилителя с ОЭ. Предположим что входное и выходное напряжения синфазны пусть по отношению к общей шине распложен как показано на Ри | |||
18842. | Определение коэффициента усиления по току | 60.28 KB | |
Определение коэффициента усиления по току. Коэффициент усиления по току определяется как: Где а . Следовательно получим: . Из выражения следует что коэффициент усиления по току . Для увеличения ki следует уменьшать RН однако начиная с определенного значения RН на... | |||
18843. | Определение выходного сопротивления | 378.4 KB | |
Определение выходного сопротивления. Выходное сопротивление можно определить двумя способами. 1 Отключить сопротивление нагрузки. Замкнуть активный источник входного сигнала. Подвести к выходным зажимам усилителя переменное напряжение . Рассчитать переменный ток ... | |||
18844. | Схема с общим эмиттером | 108.35 KB | |
Схема с общим эмиттером. Схема усилителя представлена на рисунке 3.6. Назначения элементов аналогичны представленной ранее схемы. Рис. 3.6 принципиальная схема усилителя с ОЭ... | |||
18845. | Расчет схемы по постоянному току | 153.47 KB | |
Расчет схемы по постоянному току. Режим работы схемы по постоянному току определяется элементами: RЭ RБ EК и параметрами транзистора. Аналогично как и для схемы с общим эмиттером выходную и входную цепи можно описать следующими системами уравнений: Т. к. I | |||
18846. | Расчет по переменному току | 237.08 KB | |
Расчет по переменному току. Представим схему замещения усилителя с ОК для расчета каскада по переменному току см. Рис. 3.16. при этом примем следующие допущения: зажимы и источника питания по переменному току считаем однопотенциальными за счет низкого внутреннег... | |||
18847. | Определение коэффициента усиления по току | 51.07 KB | |
Определение коэффициента усиления по току. Коэффициент усиления по току можно определить как отношение выходного тока ко входному: где ток нагрузки входной ток эмиттерного повторителя. Подставив значения IН и IВх в формулу для ki получим: . Поскольку доп | |||
18848. | Определение выходного сопротивления | 229.72 KB | |
Определение выходного сопротивления. Для определения выходного сопротивления повторителя воспользуемся методикой изложенной в разделе. модель каскада приведена на. С учетом того что замыкание активного источника ЭДС произведем вместе с его внутрен | |||