Відмінності між версіями «Створення веб-сторінок Одеська школа 27 Урок 3»

Матеріал з Iteach WIKI
Перейти до: Навігація, пошук
(→‎Нумеровані списки)
 
(не показані 50 проміжних версій 2 учасників)
Рядок 11: Рядок 11:
 
<b>&lt;li></b> НЕобов'язковий парний йому <b>&lt;/li></b> - створення ЕЛЕМЕНТУ нумерованого або маркерованого списку
 
<b>&lt;li></b> НЕобов'язковий парний йому <b>&lt;/li></b> - створення ЕЛЕМЕНТУ нумерованого або маркерованого списку
  
−
=== Нумеровані списки ===
+
== Нумеровані списки ==
  
 
Для створення нумерованого списка служить тег <b>&lt;ol></b> (від <b>o</b>rdered <b>l</b>ist) та обов'язковий парний йому <b>&lt;/ol></b>
 
Для створення нумерованого списка служить тег <b>&lt;ol></b> (від <b>o</b>rdered <b>l</b>ist) та обов'язковий парний йому <b>&lt;/ol></b>
Рядок 19: Рядок 19:
 
Атрибути
 
Атрибути
 
   
 
   
−
type  Тип маркера
+
<b>type</b> Тип маркера
 
<table border=1>
 
<table border=1>
  
 
<tr>
 
<tr>
 
<td>A
 
<td>A
−
<td>Заглавные буквы  
+
<td>Великі англійські літери  
 
<tr>
 
<tr>
 
<td>a
 
<td>a
−
<td> Строчные буквы  
+
<td> Малі англійські літери  
 
<tr>
 
<tr>
 
<td>I
 
<td>I
−
<td> Заглавные римские цифры
+
<td> Великі римскі цифри
  
 
<tr>
 
<tr>
 
<td>i  
 
<td>i  
−
<td> Строчные римские цифры
+
<td> малі римскі цифри
  
 
<tr>
 
<tr>
 
<td>1
 
<td>1
−
<td> Арабские цифры (по умолчанию)   
+
<td> Арабські цифри (за замовчуванням)   
  
 
</table>
 
</table>
  
 +
<b>start</b>
  
 +
Початкове значення для нумерованого списка при використанні арабських цифр
  
 +
<b>title</b>
  
 +
Спливаюча підказка
  
−
start
 
−
Начальное значение для нумерованного списка при использовании арабских цифр
 
−
title
 
−
Всплывающая подсказка
 
  
−
=== Маркеровані списки ===
+
<h2 style = color:green;>Наприклад</h2>
 +
 
 +
<ol type=1 title="Top 5">
 +
<li> Іван Франко
 +
<li> Тарас Шевченко
 +
<li> Леся Українка
 +
<li> Павло Загребельний
 +
<li> Олесь Гончар
 +
</ol>
 +
 
 +
<p style="font-size:14pt; color:blue;">
 +
 
 +
А так виглядає сам HTML-код.</p>
 +
 
 +
&lt;ol type=1 title="Top 5"><br>
 +
&lt;li> Іван Франко <br>
 +
&lt;li> Тарас Шевченко<br>
 +
&lt;li> Леся Українка<br>
 +
&lt;li> Павло Загребельний<br>
 +
&lt;li> Олесь Гончар<br>
 +
&lt;/ol><br>
 +
 
 +
== Маркеровані списки ==
 
Для створення маркерованого списка служить тег <b>&lt;ul></b> (від <b>u</b>nordered <b>l</b>ist) та обов'язковий парний йому <b>&lt;/ul></b>
 
Для створення маркерованого списка служить тег <b>&lt;ul></b> (від <b>u</b>nordered <b>l</b>ist) та обов'язковий парний йому <b>&lt;/ul></b>
 +
 +
Допускається вкладення нумерованого списка в списки другого виду
 +
 +
Атрибути
 +
 +
<b>type</b>  Тип маркера
 +
<table border=1>
 +
 +
<tr>
 +
<td>disk
 +
<td>Замальований кружок. За замовчуванням
 +
<tr>
 +
<td>circle
 +
<td> Незамальований кружок
 +
<tr>
 +
<td>square
 +
<td> Квадратик
 +
</table>
 +
 +
<b>title</b>
 +
 +
Спливаюча підказка
 +
 +
<h2 style = color:green;>Наприклад</h2>
 +
 +
<ul type=square title="Top 5">
 +
<li> Іван Франко
 +
<li> Тарас Шевченко
 +
<li> Леся Українка
 +
<li> Павло Загребельний
 +
<li> Олесь Гончар
 +
</ul>
 +
 +
<p style="font-size:14pt; color:blue;">
 +
 +
А так виглядає сам HTML-код.</p>
 +
 +
&lt;ul type=square title="Top 5"><br>
 +
&lt;li> Іван Франко <br>
 +
&lt;li> Тарас Шевченко<br>
 +
&lt;li> Леся Українка<br>
 +
&lt;li> Павло Загребельний<br>
 +
&lt;li> Олесь Гончар<br>
 +
&lt;/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>
 +
 +
&lt;ul type=square title="Українські літератори та їх твори"> <br>
 +
&lt;li> Іван Франко<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ol><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li>Каменярі<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li>Борислав Сміється<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li>Захар Беркут<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ol><br>
 +
&lt;li> Тарас Шевченко<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ol><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li>Сон<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li>Катерина<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li>Заповіт<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ol><br>
 +
&lt;li> Леся Українка<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ol><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li>Лісова Пісня<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li>Камінний господар<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li>Бояриня<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ol><br>
 +
&lt;li> Павло Загребельний<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ol><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li>Роксолана<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li>Я, Боган<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li>Думки на розхрист<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ol><br>
 +
&lt;li> Олесь Гончар<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ol><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li>Тронка<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li>Прапороносці<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li>Собор<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ol><br>
 +
&lt;/ul><br>
 +
 +
== Завдання ==
 +
1. Створіть HTML-сторінку за зразком поданим на Рис. 1
 +
Збережіть у свою папку у файл з іменем List.html  <br>
 +
[[Файл:Урок3_рис1.png]] <br>
 +
 +
2. Змініть файл List.html відповідно до Рис. 2. Для зміни кольору тексту використайте тег &lt;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

Спливаюча підказка


Наприклад

  1. Іван Франко
  2. Тарас Шевченко
  3. Леся Українка
  4. Павло Загребельний
  5. Олесь Гончар

А так виглядає сам 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>

Вкладені списки

Наприклад

  • Іван Франко
    1. Каменярі
    2. Борислав Сміється
    3. Захар Беркут
  • Тарас Шевченко
    1. Сон
    2. Катерина
    3. Заповіт
  • Леся Українка
    1. Лісова Пісня
    2. Камінний господар
    3. Бояриня
  • Павло Загребельний
    1. Роксолана
    2. Я, Боган
    3. Думки на розхрист
  • Олесь Гончар
    1. Тронка
    2. Прапороносці
    3. Собор

Сам 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
Урок3 рис1.png

2. Змініть файл List.html відповідно до Рис. 2. Для зміни кольору тексту використайте тег <font> (див. Урок 2)

Урок3 рис2.png

3. Створіть HTML-сторінку за зразком поданим на Рис. 3 Збережіть у свою папку у файл з іменем Sesons.html

Урок3 рис3.png

Отримано з http://wiki.iteach.com.ua/index.php?title=Створення_веб-сторінок_Одеська_школа_27_Урок_3&oldid=263193