Первая страница
Наша команда
Контакты
О нас

    Головна сторінка



Розмітка веб-сторінок за допомогою таблиць. Теги таблиць, рядків, клітинок, їхні атрибути

Скачати 61.56 Kb.

Розмітка веб-сторінок за допомогою таблиць. Теги таблиць, рядків, клітинок, їхні атрибути




Скачати 61.56 Kb.
Дата конвертації07.06.2017
Розмір61.56 Kb.
ТипУрок
… визначає один рядок таблиці. Дані окремих комірок поміщуються у контейнер (закриваючий дескриптор не є обов’язковим.

Однією з характеристик таблиці є рамка. Для побудови таблиці з рамкою треба задати товщину рамки за допомогою атрибута BORDER дескриптора


Урок 11

Тема: Розмітка веб-сторінок за допомогою таблиць. Теги таблиць, рядків, клітинок, їхні атрибути. Практична робота №4. Структурування веб-сторінок за допомогою таблиць.
Мета:

  • познайомити учнів з тегами створення таблиць у веб-документі;продовжувати формувати вміння та навички створення НТМL-документа;

  • розвивати пізнавальний інтерес; дизайнерські здібності учнів, вміння планувати свою роботу;

  • виховувати культуру подання інформації.


Використане обладнання: комп’ютер; дошка; презентація з основними поняттями;

Структу́ра (лат. structūra, англ. structure, рос. структура, нім. Struktur) - це характеристика складу та просторова картина складу об'єкта, речовини (ізотропна, анізотропна, кристалічна, аморфна, гомогенний чи колоїдний розчин, фазові суміші) взаєморозміщення формацій, частин, деталей, елементів, певний функціональний взаємозв'язок складових частин об'єкта, внутрішня будова.

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

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

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

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

таблиця із структурою НТМL-документу;
Хід уроку.

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

Інформаційний диктант: «Повторення призначення відомих тег». Учитель демонструє і називає тег або атрибут, учні записують їхнє призначення

Завдання: записати призначення тег:



    1. Html

    2. Br

    3. Ol, li

    4. H5

    5. Hr

    6. Title

    7. Color

    8. Font

    9. Head

    10. Align=”right”

    11. Body

    12. Bgcolor

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

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

Листо́к (лат. folium, грец. phýllon) - вегетативний орган вищих рослин, похідне пагону, що виконує функції фотосинтезу, транспірації (випаровування) та газообміну. Розміри листків найчастіше знаходяться в межах 3-10 см, однак є й цікаві винятки.



Завдання: відобразіть результати перевірки інформаційного диктанту у вигляді таблиці створеної засобами мови HTML.

Учні, що не мають досвіду роботи з мовою HTML, обов’язково заявлять про те, що вони не вміють цього робити. Таким чином виникає необхідність вивчення теми: „ Створення таблиць мовою HTML”



  1. Мотивація навчальної діяльності.

    Необхідність - система зв'язків і відносин, що зумовлює зміну, поступальний рух, розвиток у жорстко визначеному напрямку з жорстко визначеними результатами. Іншими словами, необхідність - це такий зв'язок, що обов'язково призводить до певної події.



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

  1. Повідомлення теми і постановка завдань уроку.

Отже тема уроку: „Таблиці в HTML”.

На уроці ми повинні розглянути таблиці різних видів та вивчити теги створення таблиць.



  1. Вивчення нової теми, виконання практичних завдань.

Перед створенням таблиці необхідно визначити максимальну кількість рядків та стовпців.

Веб-сторінка (англ. Web-page) - інформаційний ресурс, доступний в мережі World Wide Web (Всесвітня павутина), який можна переглянути у веб-браузері. Зазвичай, інформація веб-сторінки записана в форматі HTML, XHTML, або рідше Wml (для wap-сторінок).

Практика (грец. πράξις «діяльність») - доцільна і цілеспрямована діяльність, яку суб'єкт здійснює для досягнення певної мети. Практика має суспільно-історичний характер і залежить від рівня розвитку суспільства, його структури.

Кількість - в Арістотелівській логіці друга з 10 категорій (класів, розрядів, які спрощують процес розумового визначення будь-якої речі), побічна обставина матеріальних речей , за допомогою якої вони поширюються в просторі, вимірюються якоюсь математичною нормою і здатні бути поділеними на окремі частини.

Створення Ство́рення (англ. Creation, нім. Schöpfung, івр. בריאת העולם‎) - доктринальна позиція у багатьох релігіях та філософських системах вірувань, яка твердить, що за створенням всесвіту стоїть Божество. Богословські пояснення створення всесвіту можуть мати різноманітні форми, однією з основних є релігійна догма створення.

Код таблиці міститься у контейнері ...
. Кожна пара дескрипторів
. Формат атрибута: BORDER=n, де n – товщина рамки у пікселях.



Практичне завдання

  1. Створіть документ під назвою ROZKLAD.html, що містить таблицю з розкладом уроків:







і т.д..

Докуме́нт - базова теоретична конструкція, яка відноситься до всього, що може бути збережене або представлене, щоб служити як доказ для певної мети.

Понеді́лок - день тижня між неділею та вівторком. У давніх римлян та у північногерманських племен був присвячений Місяцю (нім. Mon(d)tag = день Місяця). Слово «понеділок» утворилось від словосполучення «після неділі» (по неділі).



ПОНЕДІЛОК < /TH>

Математика< /TD> 8
Хімія < /TD> 9
Фізика < /TD> 12


  1. Проаналізуйте результат.

Зверніть увагу, що перший рядок таблиці (заголовок) відрізняється написанням – це результат роботи тега
.

Крім того, ширина стовпців таблиці дорівнює максимальній довжині тексту у комірках. Таблиця вирівняна по лівому краю вікна браузера, а її вміст відображається гарнітурою Times New Roman.

Гарнітура (англ. Typeface, від нім. Garnitur – комплект) - сімейство накреслень шрифтів, що мають загальні стильові особливості та різні деталі рисунку знаків (в деяких випадках гарнітура складається з одного накреслення).

Текст у комірках заголовка вирівнюється по центру, а в інших комірках – по лівій межі. Щоб змінити ці установки за замовчуванням, використовують різні атрибути.



Атрибути елемента TABLE:

Width – задає ширину таблиці. Його значення виражається у пікселях або відсотках.

Відсо́ток або також проце́нт (лат. «pro centum» - сота частка, на сто). Відсотком якого-небудь числа називають соту частину цього числа.

Приклад:

Align – задає вирівнювання таблиці у документі, може набувати значень left, center, right.

Border – задає вивід рамок таблиці.

- задає рамку товщиною в 5 пікселів для зовнішньої рамки, внутрішні рамки дорівнюватимуть, як і раніше, 1 пікселю.



  1. Змініть вигляд таблиці у створеному файлі.

Атрибути елементів рядків і стовпців

Width, height –установлюють розміри комірок рядка: ширину і висоту. Ці атрибути можуть використовуватись у тегах

або.

Застосунок, застосовна програма або прикладна програма (англ. application, application software, app) - користувацька комп'ютерна програма, що дає змогу вирішувати конкретні прикладні задачі користувача.

Вигляд таблиці був би привабливішим, якби ви застосували колір у таблицях.

Колір у таблицях

Bgcolor- колір фону таблиці. Залежно від того, до якого тегу цей атрибут застосовується

,
.

Align – вирівнюють вміст у комірках і вводиться в теги

. Як ви вважаєте, яки значень може набувати цей атрибут. Учні назвуть: left, center, right. Крім того існує можливість вирівнювання по ширині за допомогою атрибута “justify”.

Можливість Можливість - це дія, що може відбутися або ні (можливо, приїду, а, можливо, і ні). Можливість можна забезпечити чи покладатись на «авось» та якось буде. Альтернатива дає шанс, але не гарантує без відповідних дій забезпечення результату і адекватності та конструктиву діяльності.

Valign – вирівнювання вмісту по вертикалі. Цей атрибут застосовується з такими значеннями: top( вирівнювання по верхньому краю комірки), bottom (по нижньому краю), middle (центрування по вертикалі). Приклад застосування:

,,

Bordercolor – колір рамок таблиці. Якщо цей атрибут вставити у тег
, то він діятиме, коли в таблиці є рамки, тобто за наявності атрибута Border. Якщо ж потрібно задати колір лише визначених комірок, атрибут Bordercolor розташовуємо в тегах , задає червоні межі всіх комірок рядка.

4.Представити список учнів класу і їх дні народження у вигляді таблиці



  1. Підведення підсумків уроків.

  1. Чим ми займалися сьогодні на уроці?

  2. Які теги ви запам’ятали?

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

  1. Запишіть нові теги до словника та повторіть попередні.

Учням, що мають комп’ютери вдома підібрати і принести в електронному вигляді цікаві малюнки для сторінок ( про сім’ю, спорт, улюблених тварин тощо)
Для підготовки використайте таку літературу:

О.Г.

,. Наприклад, тег г
Електроніка Електро́ніка (від грец. Ηλεκτρόνιο - електрон) - наука про взаємодію електронів з електромагнітними полями і про методи створення електронних приладів і пристроїв, в яких ця взаємодія використовується для перетворення електромагнітної енергії, в основному для передачі, обробки і зберігання інформації.

Пасічник, О.В.Пасічник, І.В. Стеценко «Основи веб-дизайну»


Додаток 1



Інструкція до виконання практичного завдання

    1. Створіть документ під назвою ROZKLAD.html, що містить таблицю з розкладом уроків:







і т.д..


ПОНЕДІЛОК < /TH>

Математика< /TD> 8
Хімія < /TD> 9
Фізика < /TD> 12


    1. Проаналізуйте результат.

Зверніть увагу, що перший рядок таблиці (заголовок) відрізняється написанням – це результат роботи тега
.

Крім того, ширина стовпців таблиці дорівнює максимальній довжині тексту у комірках. Таблиця вирівняна по лівому краю вікна браузера, а її вміст відображається гарнітурою Times New Roman. Текст у комірках заголовка вирівнюється по центру, а в інших комірках – по лівій межі. Щоб змінити ці установки за замовчуванням, використовують різні атрибути.



Атрибути елемента TABLE:

Width – задає ширину таблиці. Його значення виражається у пікселях або відсотках. Приклад:

Align – задає вирівнювання таблиці у документі, може набувати значень left, center, right.

Border – задає вивід рамок таблиці.

- задає рамку товщиною в 5 пікселів для зовнішньої рамки, внутрішні рамки дорівнюватимуть, як і раніше, 1 пікселю.



    1. Змініть вигляд таблиці у створеному файлі.

Атрибути елементів рядків і стовпців

Width, height –установлюють розміри комірок рядка: ширину і висоту. Ці атрибути можуть використовуватись у тегах

або.



Вигляд таблиці був би привабливішим, якби ви застосували колір у таблицях.

Колір у таблицях

Bgcolor- колір фону таблиці. Залежно від того, до якого тегу цей атрибут застосовується ,
.

Align – вирівнюють вміст у комірках і вводиться в теги

. Як ви вважаєте, яки значень може набувати цей атрибут. Учні назвуть: left, center, right. Крім того існує можливість вирівнювання по ширині за допомогою атрибута “justify”.

Valign – вирівнювання вмісту по вертикалі. Цей атрибут застосовується з такими значеннями: top( вирівнювання по верхньому краю комірки), bottom (по нижньому краю), middle (центрування по вертикалі). Приклад застосування:

,,

Bordercolor – колір рамок таблиці. Якщо цей атрибут вставити у тег
, то він діятиме, коли в таблиці є рамки, тобто за наявності атрибута Border. Якщо ж потрібно задати колір лише визначених комірок, атрибут Bordercolor розташовуємо в тегах , задає червоні межі всіх комірок рядка.

4.Представити список учнів класу і їх дні народження у вигляді таблиці
,. Наприклад, тег г



Скачати 61.56 Kb.

  • Хід уроку. Актуалізація опорних знань.
  • Вивчення нової теми, виконання практичних
  • Практичне завдання Створіть документ
  • Bgcolor
  • Підведення підсумків уроків. Чим ми займалися сьогодні на уроці Які теги ви запам’ятали Домашнє завдання.
  • Інструкція до виконання практичного завдання