План-конспект уроку на тему Теги оформлення списків даних. Робота з таблицямиТема. Теги оформлення списків даних. Робота з таблицями. Мета: удосконалити знання та сформувати вміння та навички в учнів при створенні HTML-документів; ознайомити учнів із базовими тегами, які використовуються для роботи з таблицями у Web-документах, навчити учнів використовувати ці теги на практиці; навчити редагувати введені дані; навчити працювати з таблицями; виховати наполегливість, спостережливість, розвинути логічне та абстрактне мислення. Тип уроку: пояснення нового матеріалу. План. 1. Організаційна частина. 2. Актуалізація опорних знань. 3. Пояснення нового матеріалу. 4. Закріплення вивченого матеріалу. 5. Підсумки уроку. 6. Домашнє завдання. Л-ра: 1. Глинський „Інформатика”. 2. Симонович „Общая информатика”. 3. Зарецька „Інформатика”. Хід уроку. І. Організаційна частина. ІІ. Актуалізація опорних знань. 1. За допомогою яких тегів мова HTML дозволяє створювати списки? (За допомогою тегів <Р>, <BR>, <PRE>, <Н1>, <В>, </>, <U>, <LI>, <OL>, <UL>, <DL>) 2. Які теги дозволяють вирівнювати текст по центру екрана, по лівому та по правому краю екрана? (<CENTER></CENTER>, <LEFT></LEFT>, <R1GHT></RIGHT>) 3. Які теги використовують для опису структури HTML-файлу. (Для опису структури HTML-файлу використовують слідуючи 4 парних теги: <HTMLx/HTML>, <HEADx/HEAD>, <T1TLE> </TlTLE>, <BODYx/BODY>j. ІІІ. Пояснення нового матеріалу. Сьогодні ми розглянемо теги за допомогою яких організовуються списки. Хто скаже мені, які є списки? (нумеровані і ненумеровані). Спочатку про нумеровані списки. Теги списків <OLx/OL> використовується з метою задання нумерованих списків. Вони мають атрибути type=l, А, або а, які призначенні для задання виду нумерації і атрибут start для в казання з якого індексу розпочинається нумерація списку. За допомогою тега <LI> задаємо елементи списку. Наприклад: <OL type=l start=l> <LI> елемент списка. <LI> елемент списка. </OL> Теги <UL></UL> являється аналогом тег <OL></OL>. Вони використовується з метою задання маркірованих (ненумерованих) списків. Для задання типу маркера використовується атрибут type=circle, squarte, disc. 1 за допомогою тега <LI> задаємо елементи списку. Наприклад: <ULtype=l start=l> <UI> елемент списку. <UI> елемент списку. <ЛЛ> Теги <DLx/DL> використовуються з метою задання словників та інших перечислень. Тег <DL> включає в себе додаткові теги <DT> і <DD>, які відповідно вказують термін і означення. Наприклад: <DL> термін 1. <DD> означення 1. <LI> термін 1. <DD> Теги Призначення <LI> Цей тег використовується для задання елементу списку. <OL></OL> Цей тег використовується для представлення інформації у вигляді пронумерованого списку <UIX/UL> Цей тег відображає маркіровані списки у вигляді послідовності помічених елементів <DIX/DL> Цей тег використовується для представлення інформації у ВИГЛЯДІ СЛОВНИКІВ. А зараз ознайомимось з технологією оформлення Web-документів. Попробуємо використати вивчений матеріал на практиці. (Роздаю завдання для самостійної роботи) На цьому пояснення нового матеріалу закінчено. Давайте перевіримо, як цей матеріал вами засвоєний. HTML Таблиці Таблиці в HTML організуються як набір стовпців і рядків. Комірки таблиці можуть містити будь-які HTML-елементи, такі, як заголовки, списки, абзаци, фігури, графіку, а також елементи форм. Основні теги таблиці Таблиця: <TABLE>...</TABLE> Це основні теги, що описують таблицю. Всі елементи таблиці повинні знаходитися усередині цих двох тегів. За замовчуванням таблиця не має обрамлення і роздільників. Обрамлення додається атрибутом BORDER. Рядок таблиці: <TR>...</TR> Кількість рядків таблиці визначається кількістю пар тегів <TR>..</TR>, що зустрічаються. Рядки можуть мати атрибути ALIGN і VALIGN, що описують візуальне положення вмісту рядків у таблиці. Комірки таблиці: <TD>...</TD> Описує стандартні комірки таблиці. Комірка таблиці може бути описана тільки усередині рядка таблиці. Кожна комірка повинна бути пронумерована номером стовпчика, для якої вона описується. Якщо в рядку відсутня одна чи кілька комірок для деяких стовпчиків, то браузер відображає порожні комірки. Розташування даних в комірці за замовчуванням визначається атрибутами ALIGN=left і VALIGN=middle. Дане розташування може бути виправлене як на рівні опису рядка, так і на рівні опису комірки. Заголовок таблиці: <ТН>...</ТН> Комірка заголовка таблиці має ширину всієї таблиці; текст у даній комірці має атрибут BOLD і ALIGN=center. Підпис: <CAPTION>...</CAPTION> Даний тег описує назва таблиці (підпис). Тег <CAPTION> повинний бути присутнім усередині <TABLE>...</TABLE>, але зовні опису якого-небудь рядка чи комірки. За замовчуванням <CAPTION> має атрибут ALIGN=top, але може бути явно встановлений у ALIGN^bottom. ALIGN визначають, де - зверху чи знизу таблиці - буде поставлений підпис. Підпис завжди центрований у рамках ширини таблиці. Основні атрибути таблиці: BORDER Даний атрибут використовується в тезі TABLE. Якщо даний атрибут присутній, границя таблиці прорисовується для всіх комірок і для таблиці в цілому. BORDER може приймати числове значення, що визначає ширину границі, наприклад BORDER=3. ALIGN Якщо атрибут ALIGN є присутнім усередині тегів <CAPTION> і - CAPTION>, то він визначає положення підпису для таблиці (зверху чи знизу). За замовчуванням ALIGN=top. Якщо атрибут ALIGN зустрічається > середині <TR>, <TH> чи <TD>, він керує положенням даних в комірках по-горизонталі. Може приймати значення left (ліворуч), right (праворуч) чи center (по центру). VALIGN Даний атрибут зустрічається усередині тегів <TR>, <TH> і <TD>. Він визначає вертикальне розміщення даних в комірках. Може приймати значення top (угорі), bottom (унизу), middle (по середині) і baseline (всі і рядка притиснуті догори). NOWRAP Даний атрибут говорить про те, що дані в комірці не можуть логічно розбиватися на кілька рядків і повинні бути представлені одним рядком. COLSPAN Вказує, яку кількість комірок буде об'єднано по-горизонталі для зазначеної комірки. По замовчуванні - 1. ROWSPAN Вказує, яку кількість комірок буде об'єднано по вертикалі для зазначеної комірки. По замовчуванні - 1. COLSPEC Даний параметр дозволяє задавати фіксовану ширину стовпчиків або в символах, або у відсотках, наприклад COLSPEC="20%". Наприклад: <TABLE BORDER=5> <CAPTION ALIGN=bottom> Таблица.1 </CAPTION> <TR><TD ROWSPAN=2><TD><TH COLSPAN=2>среднее значение</TH></TR> < TR><TH>Pocm</TH><TH>Bec</TH></TR> < TR><TD>мужчины</TD><TD ALIGN=center>l74</TD><TD ALIGN=center>78</TD></TR> < TR><TD>)женщины<TD><TD ALIGN=center>165</TD><TD ALIGN=center>56</TD></TR> < TABLE> Среднее значение Рост Вес Мужчины 174 78 Женщины Таблица.1 165 56 IV. Закріплення нового матеріалу. Закріплення нового матеріалу: Якими тегами визначається таблиця? Якими тегами визначається рядок таблиці? Якими тегами визначається комірка таблиці? За допомогою якого тега здійснюється підпис таблиці? За допомогою яких тегів мова HTML дозволяє створювати добре структуровані документи? (За допомогою тегів <L1>, <OL>, <UL>, <DL> ) V. Підсумок уроку. Отже, сьогодні ми повторили методи редагування HTML-файлів та основні структурні теги мови HTML. Вивчили теги, що використовуються для оформлення списків у Web-документі, а також для роботи з таблицями. VI. Домашнє завдання. Вивчити матеріал за конспектом і підручником.
