Відмінності між версіями «Створення веб-сторінок Одеська школа 27 Урок 3»
| (не показано 32 проміжні версії 2 учасників) | |||
| Рядок 11: | Рядок 11: | ||
<b><li></b> НЕобов'язковий парний йому <b></li></b> - створення ЕЛЕМЕНТУ нумерованого або маркерованого списку | <b><li></b> НЕобов'язковий парний йому <b></li></b> - створення ЕЛЕМЕНТУ нумерованого або маркерованого списку | ||
| − | + | == Нумеровані списки == | |
Для створення нумерованого списка служить тег <b><ol></b> (від <b>o</b>rdered <b>l</b>ist) та обов'язковий парний йому <b></ol></b> | Для створення нумерованого списка служить тег <b><ol></b> (від <b>o</b>rdered <b>l</b>ist) та обов'язковий парний йому <b></ol></b> | ||
| Рядок 24: | Рядок 24: | ||
<tr> | <tr> | ||
<td>A | <td>A | ||
| − | <td>Великі літери | + | <td>Великі англійські літери |
<tr> | <tr> | ||
<td>a | <td>a | ||
| − | <td> Малі літери | + | <td> Малі англійські літери |
<tr> | <tr> | ||
<td>I | <td>I | ||
| Рядок 38: | Рядок 38: | ||
<tr> | <tr> | ||
<td>1 | <td>1 | ||
| − | <td> | + | <td> Арабські цифри (за замовчуванням) |
</table> | </table> | ||
| Рядок 73: | Рядок 73: | ||
</ol><br> | </ol><br> | ||
| − | + | == Маркеровані списки == | |
Для створення маркерованого списка служить тег <b><ul></b> (від <b>u</b>nordered <b>l</b>ist) та обов'язковий парний йому <b></ul></b> | Для створення маркерованого списка служить тег <b><ul></b> (від <b>u</b>nordered <b>l</b>ist) та обов'язковий парний йому <b></ul></b> | ||
| Рядок 84: | Рядок 84: | ||
<tr> | <tr> | ||
| − | <td> | + | <td>disk |
| − | <td> | + | <td>Замальований кружок. За замовчуванням |
<tr> | <tr> | ||
| − | <td> | + | <td>circle |
| − | <td> | + | <td> Незамальований кружок |
<tr> | <tr> | ||
| − | <td> | + | <td>square |
| − | <td> | + | <td> Квадратик |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</table> | </table> | ||
| − | |||
| − | |||
| − | |||
| − | |||
<b>title</b> | <b>title</b> | ||
Спливаюча підказка | Спливаюча підказка | ||
| − | |||
<h2 style = color:green;>Наприклад</h2> | <h2 style = color:green;>Наприклад</h2> | ||
| − | <ul type= | + | <ul type=square title="Top 5"> |
<li> Іван Франко | <li> Іван Франко | ||
<li> Тарас Шевченко | <li> Тарас Шевченко | ||
| Рядок 126: | Рядок 112: | ||
А так виглядає сам HTML-код.</p> | А так виглядає сам HTML-код.</p> | ||
| − | <ul type= | + | <ul type=square title="Top 5"><br> |
<li> Іван Франко <br> | <li> Іван Франко <br> | ||
<li> Тарас Шевченко<br> | <li> Тарас Шевченко<br> | ||
| Рядок 133: | Рядок 119: | ||
<li> Олесь Гончар<br> | <li> Олесь Гончар<br> | ||
</ul><br> | </ul><br> | ||
| + | |||
| + | == Вкладені списки == | ||
| + | |||
| + | <h2 style = color:green;>Наприклад</h2> | ||
| + | <ul type=square title="Українські літератори та їх твори"> | ||
| + | <li> Іван Франко | ||
| + | <ol> | ||
| + | <li>Каменярі | ||
| + | <li>Борислав Сміється | ||
| + | <li>Захар Беркут | ||
| + | </ol> | ||
| + | <li> Тарас Шевченко | ||
| + | <ol> | ||
| + | <li>Сон | ||
| + | <li>Катерина | ||
| + | <li>Заповіт | ||
| + | </ol> | ||
| + | <li> Леся Українка | ||
| + | <ol> | ||
| + | <li>Лісова Пісня | ||
| + | <li>Камінний господар | ||
| + | <li>Бояриня | ||
| + | </ol> | ||
| + | <li> Павло Загребельний | ||
| + | <ol> | ||
| + | <li>Роксолана | ||
| + | <li>Я, Боган | ||
| + | <li>Думки на розхрист | ||
| + | </ol> | ||
| + | <li> Олесь Гончар | ||
| + | <ol> | ||
| + | <li>Тронка | ||
| + | <li>Прапороносці | ||
| + | <li>Собор | ||
| + | </ol> | ||
| + | </ul> | ||
| + | |||
| + | <p style="font-size:14pt; color:blue;"> | ||
| + | |||
| + | Сам HTML-код.</p> | ||
| + | |||
| + | <ul type=square title="Українські літератори та їх твори"> <br> | ||
| + | <li> Іван Франко<br> | ||
| + | <ol><br> | ||
| + | <li>Каменярі<br> | ||
| + | <li>Борислав Сміється<br> | ||
| + | <li>Захар Беркут<br> | ||
| + | </ol><br> | ||
| + | <li> Тарас Шевченко<br> | ||
| + | <ol><br> | ||
| + | <li>Сон<br> | ||
| + | <li>Катерина<br> | ||
| + | <li>Заповіт<br> | ||
| + | </ol><br> | ||
| + | <li> Леся Українка<br> | ||
| + | <ol><br> | ||
| + | <li>Лісова Пісня<br> | ||
| + | <li>Камінний господар<br> | ||
| + | <li>Бояриня<br> | ||
| + | </ol><br> | ||
| + | <li> Павло Загребельний<br> | ||
| + | <ol><br> | ||
| + | <li>Роксолана<br> | ||
| + | <li>Я, Боган<br> | ||
| + | <li>Думки на розхрист<br> | ||
| + | </ol><br> | ||
| + | <li> Олесь Гончар<br> | ||
| + | <ol><br> | ||
| + | <li>Тронка<br> | ||
| + | <li>Прапороносці<br> | ||
| + | <li>Собор<br> | ||
| + | </ol><br> | ||
| + | </ul><br> | ||
| + | |||
| + | == Завдання == | ||
| + | 1. Створіть HTML-сторінку за зразком поданим на Рис. 1 | ||
| + | Збережіть у свою папку у файл з іменем List.html <br> | ||
| + | [[Файл:Урок3_рис1.png]] <br> | ||
| + | |||
| + | 2. Змініть файл List.html відповідно до Рис. 2. Для зміни кольору тексту використайте тег <font> (див. [http://wiki.iteach.com.ua/%D0%A1%D1%82%D0%B2%D0%BE%D1%80%D0%B5%D0%BD%D0%BD%D1%8F_%D0%B2%D0%B5%D0%B1-%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BE%D0%BA_%D0%9E%D0%B4%D0%B5%D1%81%D1%8C%D0%BA%D0%B0_%D1%88%D0%BA%D0%BE%D0%BB%D0%B0_27_%D0%A3%D1%80%D0%BE%D0%BA_2 Урок 2]) <br> | ||
| + | |||
| + | [[Файл:Урок3_рис2.png]]<br> | ||
| + | |||
| + | 3. Створіть HTML-сторінку за зразком поданим на Рис. 3 | ||
| + | Збережіть у свою папку у файл з іменем Sesons.html <br> | ||
| + | |||
| + | [[Файл:Урок3_рис3.png]] | ||
Поточна версія на 14:42, 27 вересня 2012
Зміст
Урок 3
Списки
Для подання тексту в структурованому вигляді, коли кожен абзац виділено за допомогою графічної позначки або номера, призначені списки.
Теги
<ol> обов'язковий парний йому </ol> - створення нумерованого списку
<ul> обов'язковий парний йому </ul> - створення маркерованого списку
<li> НЕобов'язковий парний йому </li> - створення ЕЛЕМЕНТУ нумерованого або маркерованого списку
Нумеровані списки
Для створення нумерованого списка служить тег <ol> (від ordered list) та обов'язковий парний йому </ol>
Допускається вкладення нумерованого списка в списки другого виду
Атрибути
type Тип маркера
| A | Великі англійські літери |
| a | Малі англійські літери |
| I | Великі римскі цифри |
| i | малі римскі цифри |
| 1 | Арабські цифри (за замовчуванням) |
start
Початкове значення для нумерованого списка при використанні арабських цифр
title
Спливаюча підказка
Наприклад
- Іван Франко
- Тарас Шевченко
- Леся Українка
- Павло Загребельний
- Олесь Гончар
А так виглядає сам HTML-код.
<ol type=1 title="Top 5">
<li> Іван Франко
<li> Тарас Шевченко
<li> Леся Українка
<li> Павло Загребельний
<li> Олесь Гончар
</ol>
Маркеровані списки
Для створення маркерованого списка служить тег <ul> (від unordered list) та обов'язковий парний йому </ul>
Допускається вкладення нумерованого списка в списки другого виду
Атрибути
type Тип маркера
| disk | Замальований кружок. За замовчуванням |
| circle | Незамальований кружок |
| square | Квадратик |
title
Спливаюча підказка
Наприклад
- Іван Франко
- Тарас Шевченко
- Леся Українка
- Павло Загребельний
- Олесь Гончар
А так виглядає сам HTML-код.
<ul type=square title="Top 5">
<li> Іван Франко
<li> Тарас Шевченко
<li> Леся Українка
<li> Павло Загребельний
<li> Олесь Гончар
</ul>
Вкладені списки
Наприклад
- Іван Франко
- Каменярі
- Борислав Сміється
- Захар Беркут
- Тарас Шевченко
- Сон
- Катерина
- Заповіт
- Леся Українка
- Лісова Пісня
- Камінний господар
- Бояриня
- Павло Загребельний
- Роксолана
- Я, Боган
- Думки на розхрист
- Олесь Гончар
- Тронка
- Прапороносці
- Собор
Сам HTML-код.
<ul type=square title="Українські літератори та їх твори">
<li> Іван Франко
<ol>
<li>Каменярі
<li>Борислав Сміється
<li>Захар Беркут
</ol>
<li> Тарас Шевченко
<ol>
<li>Сон
<li>Катерина
<li>Заповіт
</ol>
<li> Леся Українка
<ol>
<li>Лісова Пісня
<li>Камінний господар
<li>Бояриня
</ol>
<li> Павло Загребельний
<ol>
<li>Роксолана
<li>Я, Боган
<li>Думки на розхрист
</ol>
<li> Олесь Гончар
<ol>
<li>Тронка
<li>Прапороносці
<li>Собор
</ol>
</ul>
Завдання
1. Створіть HTML-сторінку за зразком поданим на Рис. 1
Збережіть у свою папку у файл з іменем List.html
2. Змініть файл List.html відповідно до Рис. 2. Для зміни кольору тексту використайте тег <font> (див. Урок 2)
3. Створіть HTML-сторінку за зразком поданим на Рис. 3
Збережіть у свою папку у файл з іменем Sesons.html
