Презентація - HTML програмування таблиці. Третя з 4-х презентацій по темі.

Бібліотека Інформатика 8 клас Матеріали до уроків
Про матеріал
Третя з 4-х презентацій про використання HTML мови. Призначена для використання під час уроків з утворення web-сторінок. Як правильно використовувати таблиці для розбиття web-сторінки на частки.
Перегляд файлу
Про що дізнаємось Вивід стандартних табличних даних Позиціонування різних елементів – малюнків, фрагментів тексту – у строго заданих місцях. Хоча сучасна концепція WEB-дизайну рекомендує робити розмітку сторінок за допомогою тегів <DIV> та таблиць стилів CSS. Такий вид дизайну називають ще ДИВним
Тег <table> </table> - створює таблицю. Усі інші елементи таблиці – текст, малюнки, списки - повинні бути вкладеними в нього. Припускаються також вкладені таблиці одна в одну тобто змістом клітинки може бути інша таблиця. Закриваючий тег обов'язковий. Теги <tr></tr> и <td></td> - описують рядки та стовбці (клітинки таблиці). Тег <th> </th> - описують заголовки у першому рядку таблиці. Тег <caption> </ caption > - описує заголовок таблиці.
Атрибути тегу <table> Align вирівнювання таблиці відносно документу. Можливі значення: center, left, right Valign – вирівнювання тексту в таблиці по вертикалі. Значення: top, bottom, middle, baseline. background=“ім'я файлу“ рядок, що визначає малюнок для заднього фону таблиці bgcolor =колір визначає задній фон таблиці border товщина зовнішньої рамки таблиці в пікселях. Якщо атрибут не задано, таблиця виводиться без рамки яку видно bordercolor =колір колір рамки bordercolorlight = колір колір рамки зліва та зверху bordercolordark = колір колір рамки справа та знизу
Атрибути тегу <table> title =“Текст“ спливаюча підказка width = число ширина таблиці у відсотках або пікселях height = число рекомендована висота таблиці в пікселях cellspacing = число відстань між клітинками cellpadding = число відстань між вмістом та рамкою colls = число заздалегідь сповіщає про кількість стовбців у таблиці border cellspacing cellpadding
<body bgcolor=
A
border cellspacing cellpadding " title="
A
border cellspacing cellpadding ">
rules - описувє рамки в середині таблиці. Значення: all Відображає усі частини рамки в середині таблиці cols Відображає усі вертикальні рамки в середині таблиці none Видаляє усі рамки в середині таблиці rows Відображає усі горизонтальні рамки в середині таблиці Атрибути тегу <table>
frame – описує параметри зовнішньої рамки. Значення: box Відображає усі частки рамки навколо таблиці void Видаляє усі рамки навколо таблиці above Рамка тільки зверху belov Рамка тільки знизу lhs Рамка тільки зліва rhs Рамка тільки справа vsides Рамка тільки зліва та справа hsides Рамка тільки зверху та знизу Атрибути тегу <table>
<tr>- рядок таблиці У цьому тегу можливо використовувати майже усі атрибути, що і в тегу таблиці. Але діють вони тільки у цьому рядку. <th> - клітинки таблиці з заголовками стовбців <td> - клітинки таблиці з данними В ціх тегах можливо застосовувати майже усі атрибути таблиці. Для оформлення тексті можливо використовувати усі теги форматування. Таблиця будується по рядках. Спочатку прописуються усі клітинки в першому рядку, потім – в другому і т.д.
<table border=2 cols=2 bgcolor=yellow align=center> <TR> <TH>Заголовок стовбця 1</TH> <TH>Заголовок стовбця 2</TH> </TR> <TR> <TD>Клітинка стовбця 1, ряд 1</TD> <TD>Клітинка стовбця 2, ряд 1</TD> </TR> <TR> <TD>Клітинка стовбця 1, ряд 2</TD> <TD>Клітинка стовбця 2, ряд 2</TD> </TR> </table>
<html> <head> <title>Таблица Звіри</title> </head> <body bgcolor=#9966FF> <table width=800 height=550 border=6 bgcolor=#990099 align=center> <tr> <td width=200 height=150><center> <img src=
Морський котик
Жирафи
Леопард " title=" Таблица Звіри
Морський котик
Жирафи
Леопард
">
Вид в браузере:
Переклад презентації 2008 р. © М.Е.Макарової http://uchinfo.com.ua
1 / 13
Зміст слайдів
Номер слайду 1

Номер слайду 2

Про що дізнаємось Вивід стандартних табличних даних Позиціонування різних елементів – малюнків, фрагментів тексту – у строго заданих місцях. Хоча сучасна концепція WEB-дизайну рекомендує робити розмітку сторінок за допомогою тегів

та таблиць стилів CSS. Такий вид дизайну називають ще ДИВним

Номер слайду 3

Тег

- створює таблицю. Усі інші елементи таблиці – текст, малюнки, списки - повинні бути вкладеними в нього. Припускаються також вкладені таблиці одна в одну тобто змістом клітинки може бути інша таблиця. Закриваючий тег обов'язковий. Теги и - описують рядки та стовбці (клітинки таблиці). Тег - описують заголовки у першому рядку таблиці. Тег - описує заголовок таблиці.

Номер слайду 4

Атрибути тегу

Align вирівнювання таблиці відносно документу. Можливі значення: center, left, right Valign – вирівнювання тексту в таблиці по вертикалі. Значення: top, bottom, middle, baseline. background=“ім'я файлу“ рядок, що визначає малюнок для заднього фону таблиці bgcolor =колір визначає задній фон таблиці border товщина зовнішньої рамки таблиці в пікселях. Якщо атрибут не задано, таблиця виводиться без рамки яку видно bordercolor =колір колір рамки bordercolorlight = колір колір рамки зліва та зверху bordercolordark = колір колір рамки справа та знизу

Номер слайду 5

Атрибути тегу

title =“Текст“ спливаюча підказка width = число ширина таблиці у відсотках або пікселях height = число рекомендована висота таблиці в пікселях cellspacing = число відстань між клітинками cellpadding = число відстань між вмістом та рамкою colls = число заздалегідь сповіщає про кількість стовбців у таблиці border cellspacing cellpadding

Номер слайду 6

A
border cellspacing cellpadding

Номер слайду 7

rules - описувє рамки в середині таблиці. Значення: all Відображає усі частини рамки в середині таблиці cols Відображає усі вертикальні рамки в середині таблиці none Видаляє усі рамки в середині таблиці rows Відображає усі горизонтальні рамки в середині таблиці Атрибути тегу

Номер слайду 8

frame – описує параметри зовнішньої рамки. Значення: box Відображає усі частки рамки навколо таблиці void Видаляє усі рамки навколо таблиці above Рамка тільки зверху belov Рамка тільки знизу lhs Рамка тільки зліва rhs Рамка тільки справа vsides Рамка тільки зліва та справа hsides Рамка тільки зверху та знизу Атрибути тегу

Номер слайду 9

- рядок таблиці У цьому тегу можливо використовувати майже усі атрибути, що і в тегу таблиці. Але діють вони тільки у цьому рядку.
- клітинки таблиці з заголовками стовбців - клітинки таблиці з данними В ціх тегах можливо застосовувати майже усі атрибути таблиці. Для оформлення тексті можливо використовувати усі теги форматування. Таблиця будується по рядках. Спочатку прописуються усі клітинки в першому рядку, потім – в другому і т.д.

Номер слайду 10

Заголовок стовбця 1 Заголовок стовбця 2
Клітинка стовбця 1, ряд 1 Клітинка стовбця 2, ряд 1
Клітинка стовбця 1, ряд 2 Клітинка стовбця 2, ряд 2

Номер слайду 11

Таблица Звіри

Морський котик
Жирафи
Леопард

Номер слайду 12

Вид в браузере:

Номер слайду 13

Переклад презентації 2008 р. © М.Е.Макарової http://uchinfo.com.ua

ppt
Додав(-ла)
Вишковський Сергій Арнольдович
Пов’язані теми
Інформатика, 8 клас, Матеріали до уроків
Додано
12 серпня 2022
Переглядів
209
Оцінка розробки
Відгуки відсутні
Безкоштовний сертифікат
про публікацію авторської розробки
Щоб отримати, додайте розробку

Додати розробку
Рекомендовані матеріали
ppt
522 0
Презентація - HTML програмування посилання та списки. Остання з 4-х презентацій по темі.
docx
5213 0
Календарно-тематичне планування Інформатика 8 клас. За підручником Ривкінд
ppt
376 0
Презентація - HTML програмування посилання та списки. Перша з 4-х презентацій по темі.
pptx
471 0
Презентація на тему (День української писемності і мови)
Схожі матеріали
doc
2312 0
Конспект урока інформатики в 8 класі з теми "Огляд інформаційних ресурсів в Інтернеті. Правила безпечної роботи в мережі"
doc
2850 5
Матеріали до уроків "Використання розвивальної казкотерапії при вивченні основ програмування в загальноосвітній школі"
zip
6332 5
УРОК З ІНФОРМАТИКИ. ТЕМА: "НАЛАГОДЖЕННЯ ПРОГРАМ".
zip
8923 5
УРОК.8 КЛАС. ТЕМА:"ПОЛЕ, ЙОГО ВЛАСТИВОСТІ. ВЕЛИЧИНИ (ЗМІННІ І КОНСТАНТИ), ЇХНІ ВЛАСТИВОСТІ".
zip
10713 4.9
УРОК.8 КЛАС. ТЕМА:"ВЕЛИЧИНИ ЛОГІЧНОГО ТИПУ, ОПЕРАЦІЇ НАД НИМИ".
Завантажити
Зберегти на потім