SlideShare una empresa de Scribd logo
1 de 13
Розділ 2  Основи веб-дизайну
Вперед>><< Назад
 Інформатика. Профільне навчання
20:32
Розділ 2  Основи веб-дизайну
Вперед>><< Назад
 Інформатика. Профільне навчання
20:32
1. Доповнення автоматично створеної
веб-сторінки тегами користувача.
2. Нумеровані й марковані списки на
веб-сторінках.
3. Практична робота №3. Розробка
найпростішої веб-сторінки.
Частина 2
 Розділ 2
Вперед >><< Назад
 Інформатика. Профільне навчання
20:32
Доповнення автоматично створеної веб-сторінки тегами користувача
Для доповнення автоматично створеної веб-сторінки тегами користувача
необхідно відкрити HTML- код сторінки та вставити в потрібне місце
необхідні теги.
 Основи веб-дизайну
 Розділ 2
Вперед >><< Назад
 Інформатика. Профільне навчання
20:32
Для подання тексту в структурованому вигляді, коли кожен абзац виділено
за допомогою позначки або номера, призначені списки. У HTML-документах
використовують три види списків:
 Основи веб-дизайну
1.
• невпорядкований
(маркований);
2.
• упорядкований (нумерований);
3.
• список визначень.
 Розділ 2
Вперед >><< Назад
 Інформатика. Профільне навчання
20:32
У невпорядкованому списку для виділення елементів використовуються
певні позначки (крапки, квадрати тощо).
Починається такий список із тегу <UL>, а закінчується — </UL>.
Кожний елемент списку починається з тегу <LI>.
Тег <UL> може мати атрибут TYPE, який визначає форму позначки. Цей
атрибут набуває таких значень:
 Основи веб-дизайну
1.
• disk — зафарбоване коло;
2.
• circle — коло;
3.
• square — маленький чорний квадрат.
 Розділ 2
Вперед >><< Назад
 Інформатика. Профільне навчання
20:32
В упорядкованому списку всі елементи пронумеровані. Починається список
із тегу <OL>, а закінчується - </OL>. Кожний елемент такого списку також
починається з тегу <LI>. Тег <OL> може мати атрибут TYPE, який визначає тип
нумерації. Цей атрибут набуває таких значень:
 Основи веб-дизайну
А — велика
літера;
а — мала
літера;
I — велика
римська
цифра;
і — мала
римська
цифра;
1 — арабська
цифра.
 Розділ 2
Вперед >><< Назад
 Інформатика. Профільне навчання
20:32
У разі потреби за допомогою атрибута START можна задати
відмінний від одиниці початковий номер елемента, наприклад
<0L TYPE="I" START="5">. Нумерований список, початковий
елемент якого позначено латинською літерою Е, яка є п'ятою в
алфавіті, описують так:
<0L TYPE="A" START="5">
<LI> Перший елемент списку </LI>
<LI> Другий елемент списку </LI>
<LI> Третій елемент списку </LI>
<LI> Четвертий елемент списку </LI>
</0L>
 Основи веб-дизайну
 Розділ 2
Вперед >><< Назад
 Інформатика. Профільне навчання
20:32
Нумерований список, початковий елемент
якого позначено латинською літерою Е
 Основи веб-дизайну
 Розділ 2
Вперед >><< Назад
 Інформатика. Профільне навчання
20:32
Можливо, виникне необхідність розмістити на сайті список слів
(малознайомих, рідко використовуваних або вимагаючих пояснень) з
поясненнями (визначеннями), що вони означають. Для цього можна
використовувати списки визначень.
Список визначень (definition list) порівняно з маркованим або нумерованим
має дещо складнішу будову. Кожен елемент такого списку складається з двох
частин: терміна та його визначення. У такий спосіб можуть бути оформлені
словники та термінологічні довідники.
Списки визначень можна створити за допомогою тега <dl> із закриваючим
тегом </dl>. При цьому усередині цього списку для виділення слів (термінів)
використовується тег <dt>(</dt>), а для їх визначень використовується тег
<dd>(</dd>).
У HTML закриваючі теги </dt> і </dd> можна не вказувати. Елементи,
позначені тегом <dt> як терміни, відображуються браузерами практично без
відступів. Елементи, позначені тегом <dd> як визначення, відображуються
браузерами з відносно великим відступом, ці теги не маркіруються.
 Основи веб-дизайну
 Розділ 2
Вперед >><< Назад
 Інформатика. Профільне навчання
20:32 Основи веб-дизайну
Структура списку визначень наступна.
Термін 1
Визначення терміну 1
Термін 2
Визначення терміну 2
Приклад 1. Загальна структура списку
визначень
<html>
<body>
<dl>
<dt>термін 1</dt>
<dd>визначення терміну 1</dd>
<dt>термін 2</dt>
<dd>визначення терміну 2</dd>
</dl>
</body>
</html>
 Розділ 2
Вперед >><< Назад
 Інформатика. Профільне навчання
20:32 Основи веб-дизайну
Приклад 2. Створення списку визначень
<html>
<body>
<dl>
<dt>лев</dt>
<dd>хижа тварина з сімейства котячих.
Характеризується довгим хвостом з
пензликом на кінці і гривою. Мешкає в
Африці.</dd>
<dt>клітка</dt>
<dd>інструмент для упіймання лева. Є
великою коробкою, бічні стінки якої
зроблені із сталевих прутів.</dd>
</dl>
</body>
</html>
Результат данного прикладу.
Лев
Хижа тварина з сімейства котячих.
Характеризується довгим хвостом з
пензликом на кінці і гривою. Мешкає в
Африці.
Клітка
Інструмент для упіймання лева. Є
великою коробкою, бічні стінки якої
зроблені із сталевих прутів.
 Розділ 2
Вперед >><< Назад
 Інформатика. Профільне навчання
20:32
Приклад 2.1. Маркований список, в якому для позначення елементів
використовують коло
 Основи веб-дизайну
 Розділ 2
Вперед >><< Назад
 Інформатика. Профільне навчання
20:32
Приклад 2.2. Нумерований список, в якому для позначення елементів
використовують малі римські цифри
 Основи веб-дизайну
Виконання практичної роботи № 3

Más contenido relacionado

Destacado (6)

ИНТЕГРАЦИЯ 60-ТЕ ГОДИНИ
ИНТЕГРАЦИЯ 60-ТЕ ГОДИНИИНТЕГРАЦИЯ 60-ТЕ ГОДИНИ
ИНТЕГРАЦИЯ 60-ТЕ ГОДИНИ
 
Desenvolvimento da primeira infância - The Lancet
Desenvolvimento da primeira infância - The LancetDesenvolvimento da primeira infância - The Lancet
Desenvolvimento da primeira infância - The Lancet
 
Canva
CanvaCanva
Canva
 
manual parte 1 .
manual parte 1 .manual parte 1 .
manual parte 1 .
 
Capitulo4
Capitulo4Capitulo4
Capitulo4
 
Energías
EnergíasEnergías
Energías
 

Similar a мова html (частина 2)

основи Web дизайну
основи Web дизайнуоснови Web дизайну
основи Web дизайну
zaykoannaivanivna
 
Semantic Coding and Microformats
Semantic Coding and  MicroformatsSemantic Coding and  Microformats
Semantic Coding and Microformats
Quintagroup
 

Similar a мова html (частина 2) (20)

3
33
3
 
3
33
3
 
основи веб дизайну розділ 2 1
основи веб дизайну розділ 2 1основи веб дизайну розділ 2 1
основи веб дизайну розділ 2 1
 
основи Web дизайну
основи Web дизайнуоснови Web дизайну
основи Web дизайну
 
Semantic Coding and Microformats
Semantic Coding and  MicroformatsSemantic Coding and  Microformats
Semantic Coding and Microformats
 
Урок 28 10 клас
Урок 28 10 класУрок 28 10 клас
Урок 28 10 клас
 
7
77
7
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
л пр№2
л пр№2л пр№2
л пр№2
 
11
1111
11
 
кр Web
кр Webкр Web
кр Web
 
3
33
3
 
Html
HtmlHtml
Html
 
всі лр
всі лрвсі лр
всі лр
 
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML. Форматуванн...
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML.  Форматуванн...Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML.  Форматуванн...
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML. Форматуванн...
 
Presentation # 24. hypertext markup language concept
Presentation # 24.  hypertext markup language conceptPresentation # 24.  hypertext markup language concept
Presentation # 24. hypertext markup language concept
 
Лекція #04. Основи блочної верстки
Лекція #04. Основи блочної версткиЛекція #04. Основи блочної верстки
Лекція #04. Основи блочної верстки
 
Lecture 202 - DB design and implementation
Lecture 202 - DB design and implementationLecture 202 - DB design and implementation
Lecture 202 - DB design and implementation
 
МОДУЛЬ 1 ОСНОВИ КОМП’ЮТЕРНОЇ ГРАМОТНОСТІ. ОСНОВИ РОБОТИ В ІНТЕРНЕТІ ДЛЯ БІБЛІ...
МОДУЛЬ 1 ОСНОВИ КОМП’ЮТЕРНОЇ ГРАМОТНОСТІ. ОСНОВИ РОБОТИ В ІНТЕРНЕТІ ДЛЯ БІБЛІ...МОДУЛЬ 1 ОСНОВИ КОМП’ЮТЕРНОЇ ГРАМОТНОСТІ. ОСНОВИ РОБОТИ В ІНТЕРНЕТІ ДЛЯ БІБЛІ...
МОДУЛЬ 1 ОСНОВИ КОМП’ЮТЕРНОЇ ГРАМОТНОСТІ. ОСНОВИ РОБОТИ В ІНТЕРНЕТІ ДЛЯ БІБЛІ...
 
Prez
PrezPrez
Prez
 

Más de ������ �����

Más de ������ ����� (20)

Я маю Право!
Я маю Право!Я маю Право!
Я маю Право!
 
30-1 змінено3
30-1 змінено330-1 змінено3
30-1 змінено3
 
30 2 змінено2
30 2 змінено230 2 змінено2
30 2 змінено2
 
30 1 змінено2
30 1 змінено230 1 змінено2
30 1 змінено2
 
30 2 змінено
30 2 змінено30 2 змінено
30 2 змінено
 
30 1 змінено
30 1 змінено30 1 змінено
30 1 змінено
 
29 2 змінено
29 2 змінено29 2 змінено
29 2 змінено
 
статут 2017 року
статут 2017 рокустатут 2017 року
статут 2017 року
 
30-3
30-330-3
30-3
 
30-2
30-230-2
30-2
 
30-1
30-130-1
30-1
 
29-2
29-229-2
29-2
 
29-1
29-129-1
29-1
 
31-3
31-331-3
31-3
 
31 2
31 231 2
31 2
 
31-1
31-131-1
31-1
 
Iнформацiйна довiдка
Iнформацiйна довiдкаIнформацiйна довiдка
Iнформацiйна довiдка
 
условия, подпрограммы
условия, подпрограммыусловия, подпрограммы
условия, подпрограммы
 
сложные условия
сложные условиясложные условия
сложные условия
 
сложные условия pascal
сложные условия pascalсложные условия pascal
сложные условия pascal
 

Último

аналептики та антидепресанти.шгшгпшгп.ppt
аналептики та антидепресанти.шгшгпшгп.pptаналептики та антидепресанти.шгшгпшгп.ppt
аналептики та антидепресанти.шгшгпшгп.ppt
JurgenstiX
 
Презентациія для сайта Група «Незабудка».pptx
Презентациія для сайта Група «Незабудка».pptxПрезентациія для сайта Група «Незабудка».pptx
Презентациія для сайта Група «Незабудка».pptx
OlgaDidenko6
 

Último (16)

атестація 2023-2024 Kewmrbq wtynh GNJ.pdf
атестація 2023-2024 Kewmrbq wtynh GNJ.pdfатестація 2023-2024 Kewmrbq wtynh GNJ.pdf
атестація 2023-2024 Kewmrbq wtynh GNJ.pdf
 
Горбонос 2024_presentation_for_website.pptx
Горбонос 2024_presentation_for_website.pptxГорбонос 2024_presentation_for_website.pptx
Горбонос 2024_presentation_for_website.pptx
 
Проблеми захисту лісу в Україні та шляхи вирішення
Проблеми захисту лісу в Україні та шляхи вирішенняПроблеми захисту лісу в Україні та шляхи вирішення
Проблеми захисту лісу в Україні та шляхи вирішення
 
Застосування Гайду безбар’єрності в роботі закладів культури громад Одещини.pdf
Застосування Гайду безбар’єрності в роботі закладів культури громад Одещини.pdfЗастосування Гайду безбар’єрності в роботі закладів культури громад Одещини.pdf
Застосування Гайду безбар’єрності в роботі закладів культури громад Одещини.pdf
 
Відкрита лекція на тему: "Сидерати - як спосіб виживання"
Відкрита лекція на тему: "Сидерати - як спосіб виживання"Відкрита лекція на тему: "Сидерати - як спосіб виживання"
Відкрита лекція на тему: "Сидерати - як спосіб виживання"
 
Супрун презентація_presentation_for_website.pptx
Супрун презентація_presentation_for_website.pptxСупрун презентація_presentation_for_website.pptx
Супрун презентація_presentation_for_website.pptx
 
Хімічні елементи в літературних творах 8 клас
Хімічні елементи в літературних творах 8 класХімічні елементи в літературних творах 8 клас
Хімічні елементи в літературних творах 8 клас
 
Супрун презентація_presentation_for_website.pptx
Супрун презентація_presentation_for_website.pptxСупрун презентація_presentation_for_website.pptx
Супрун презентація_presentation_for_website.pptx
 
матеріал для 10 класу урок історія України
матеріал для 10 класу урок історія Україниматеріал для 10 класу урок історія України
матеріал для 10 класу урок історія України
 
аналептики та антидепресанти.шгшгпшгп.ppt
аналептики та антидепресанти.шгшгпшгп.pptаналептики та антидепресанти.шгшгпшгп.ppt
аналептики та антидепресанти.шгшгпшгп.ppt
 
psychologistpresentation-230215175859-50bdd6ed.ppt
psychologistpresentation-230215175859-50bdd6ed.pptpsychologistpresentation-230215175859-50bdd6ed.ppt
psychologistpresentation-230215175859-50bdd6ed.ppt
 
Іваніщук Надія Вікторівна атестація .pdf
Іваніщук Надія Вікторівна атестація  .pdfІваніщук Надія Вікторівна атестація  .pdf
Іваніщук Надія Вікторівна атестація .pdf
 
Презентациія для сайта Група «Незабудка».pptx
Презентациія для сайта Група «Незабудка».pptxПрезентациія для сайта Група «Незабудка».pptx
Презентациія для сайта Група «Незабудка».pptx
 
Бібліотека – розвиток дитячої творчості та дозвілля для дітейpptx
Бібліотека – розвиток дитячої творчості  та дозвілля для дітейpptxБібліотека – розвиток дитячої творчості  та дозвілля для дітейpptx
Бібліотека – розвиток дитячої творчості та дозвілля для дітейpptx
 
оцінювання дітей з особливими освітніми потребами у ЗЗСО.pptx
оцінювання дітей з особливими освітніми потребами у ЗЗСО.pptxоцінювання дітей з особливими освітніми потребами у ЗЗСО.pptx
оцінювання дітей з особливими освітніми потребами у ЗЗСО.pptx
 
Defectolog_presentation_for_website.pptx
Defectolog_presentation_for_website.pptxDefectolog_presentation_for_website.pptx
Defectolog_presentation_for_website.pptx
 

мова html (частина 2)

  • 1. Розділ 2  Основи веб-дизайну Вперед>><< Назад  Інформатика. Профільне навчання 20:32
  • 2. Розділ 2  Основи веб-дизайну Вперед>><< Назад  Інформатика. Профільне навчання 20:32 1. Доповнення автоматично створеної веб-сторінки тегами користувача. 2. Нумеровані й марковані списки на веб-сторінках. 3. Практична робота №3. Розробка найпростішої веб-сторінки. Частина 2
  • 3.  Розділ 2 Вперед >><< Назад  Інформатика. Профільне навчання 20:32 Доповнення автоматично створеної веб-сторінки тегами користувача Для доповнення автоматично створеної веб-сторінки тегами користувача необхідно відкрити HTML- код сторінки та вставити в потрібне місце необхідні теги.  Основи веб-дизайну
  • 4.  Розділ 2 Вперед >><< Назад  Інформатика. Профільне навчання 20:32 Для подання тексту в структурованому вигляді, коли кожен абзац виділено за допомогою позначки або номера, призначені списки. У HTML-документах використовують три види списків:  Основи веб-дизайну 1. • невпорядкований (маркований); 2. • упорядкований (нумерований); 3. • список визначень.
  • 5.  Розділ 2 Вперед >><< Назад  Інформатика. Профільне навчання 20:32 У невпорядкованому списку для виділення елементів використовуються певні позначки (крапки, квадрати тощо). Починається такий список із тегу <UL>, а закінчується — </UL>. Кожний елемент списку починається з тегу <LI>. Тег <UL> може мати атрибут TYPE, який визначає форму позначки. Цей атрибут набуває таких значень:  Основи веб-дизайну 1. • disk — зафарбоване коло; 2. • circle — коло; 3. • square — маленький чорний квадрат.
  • 6.  Розділ 2 Вперед >><< Назад  Інформатика. Профільне навчання 20:32 В упорядкованому списку всі елементи пронумеровані. Починається список із тегу <OL>, а закінчується - </OL>. Кожний елемент такого списку також починається з тегу <LI>. Тег <OL> може мати атрибут TYPE, який визначає тип нумерації. Цей атрибут набуває таких значень:  Основи веб-дизайну А — велика літера; а — мала літера; I — велика римська цифра; і — мала римська цифра; 1 — арабська цифра.
  • 7.  Розділ 2 Вперед >><< Назад  Інформатика. Профільне навчання 20:32 У разі потреби за допомогою атрибута START можна задати відмінний від одиниці початковий номер елемента, наприклад <0L TYPE="I" START="5">. Нумерований список, початковий елемент якого позначено латинською літерою Е, яка є п'ятою в алфавіті, описують так: <0L TYPE="A" START="5"> <LI> Перший елемент списку </LI> <LI> Другий елемент списку </LI> <LI> Третій елемент списку </LI> <LI> Четвертий елемент списку </LI> </0L>  Основи веб-дизайну
  • 8.  Розділ 2 Вперед >><< Назад  Інформатика. Профільне навчання 20:32 Нумерований список, початковий елемент якого позначено латинською літерою Е  Основи веб-дизайну
  • 9.  Розділ 2 Вперед >><< Назад  Інформатика. Профільне навчання 20:32 Можливо, виникне необхідність розмістити на сайті список слів (малознайомих, рідко використовуваних або вимагаючих пояснень) з поясненнями (визначеннями), що вони означають. Для цього можна використовувати списки визначень. Список визначень (definition list) порівняно з маркованим або нумерованим має дещо складнішу будову. Кожен елемент такого списку складається з двох частин: терміна та його визначення. У такий спосіб можуть бути оформлені словники та термінологічні довідники. Списки визначень можна створити за допомогою тега <dl> із закриваючим тегом </dl>. При цьому усередині цього списку для виділення слів (термінів) використовується тег <dt>(</dt>), а для їх визначень використовується тег <dd>(</dd>). У HTML закриваючі теги </dt> і </dd> можна не вказувати. Елементи, позначені тегом <dt> як терміни, відображуються браузерами практично без відступів. Елементи, позначені тегом <dd> як визначення, відображуються браузерами з відносно великим відступом, ці теги не маркіруються.  Основи веб-дизайну
  • 10.  Розділ 2 Вперед >><< Назад  Інформатика. Профільне навчання 20:32 Основи веб-дизайну Структура списку визначень наступна. Термін 1 Визначення терміну 1 Термін 2 Визначення терміну 2 Приклад 1. Загальна структура списку визначень <html> <body> <dl> <dt>термін 1</dt> <dd>визначення терміну 1</dd> <dt>термін 2</dt> <dd>визначення терміну 2</dd> </dl> </body> </html>
  • 11.  Розділ 2 Вперед >><< Назад  Інформатика. Профільне навчання 20:32 Основи веб-дизайну Приклад 2. Створення списку визначень <html> <body> <dl> <dt>лев</dt> <dd>хижа тварина з сімейства котячих. Характеризується довгим хвостом з пензликом на кінці і гривою. Мешкає в Африці.</dd> <dt>клітка</dt> <dd>інструмент для упіймання лева. Є великою коробкою, бічні стінки якої зроблені із сталевих прутів.</dd> </dl> </body> </html> Результат данного прикладу. Лев Хижа тварина з сімейства котячих. Характеризується довгим хвостом з пензликом на кінці і гривою. Мешкає в Африці. Клітка Інструмент для упіймання лева. Є великою коробкою, бічні стінки якої зроблені із сталевих прутів.
  • 12.  Розділ 2 Вперед >><< Назад  Інформатика. Профільне навчання 20:32 Приклад 2.1. Маркований список, в якому для позначення елементів використовують коло  Основи веб-дизайну
  • 13.  Розділ 2 Вперед >><< Назад  Інформатика. Профільне навчання 20:32 Приклад 2.2. Нумерований список, в якому для позначення елементів використовують малі римські цифри  Основи веб-дизайну Виконання практичної роботи № 3