Маркірований список

<ul type= “{disc|circle|square}”>

<li> елемент списку</li>

<li> елемент списку</li>

. . .

</ul>

Нумерований список

<ol type=”значення параметру” start= “{1…n}”>

<li> елемент списку</li>

<li> елемент списку</li>

. . .

</ol>

де значення параметра type задають зображення нумерації списку:

"і" - римськими малими (і, іі, ііі, iv, ...),

"І" - римськими великими (І, II, III, IV, ...) цифрами,

"а" - латинськими малими (a, b, c, d, ...),

"А" - латинськими великими (А, В, С, ...) літерами.

Список визначень

<dl>

<dt> термін 1</dt>

<dd>визначення 1</dd>

<dt> термін 2</dt>

<dd> визначення 2</dd>

</dl>

Створення таблиць

<table параметри>

Тег <table> служить контейнером для елементів, що визначають вміст таблиці. Будь-яка таблиця складається з рядків і комірок, які задаються за допомогою тегів <tr> і <td>.

Деякі параметри <table>

bordercolor = “колір рамки”

bgcolor= “колір таблиці”

border= “товщина рамки”

cellpadding= “Відступ від рамки до вмісту комірки” cellspacing= “Відстань між комірками”

Тег <thead> призначений для зберігання одного або кількох рядків, які представлені вгорі таблиці. Допустимо використовувати не більше одного елемента <thead> в межах однієї таблиці, і він повинен йти у вихідному коді відразу після тегу <table>

Тег <tr> служить контейнером для створення рядка таблиці. Кожна комірка в межах такого рядка може задаватися за допомогою тегу <th> або <td>.

Тег <th> призначений для створення однієї комірки таблиці, яка позначається як заголовна. Текст в такій клітинці відображається браузером зазвичай жирним шрифтом і вирівнюється по центру.

Тег <td> Призначений для створення однієї комірки таблиці.

Деякі параметри <th> та <td>

align= “left|right|center|justify”

визначає вирівнювання вмісту комірки по горизонталі.

valign= “top|bottom|middle”

вирівнювання вмісту комірки по вертикалі.

bgcolor= “Колір фону комірки”

bordercolor= “Колір рамки”

colspan= “Об'єднує горизонтальні комірки”

rowspan= “Об'єднує вертикальні комірки”

height= “Висота комірки”

width= “Ширина осередку”

Приклад

<table>

<thead>Заголовок таблиці </thead>

<tr>

<th>текст заголовок у клітинкі</th>

<td>текст у клітинкі</td>

…

</tr>

<tr>

<th>текст заголовок у клітинкі</th>

<td>текст у клітинкі</td>

…

</tr>

………………….

</table>

Порожню клітинку описують, як <td></td> або <td> </td> .

Послідовність виконання роботи

Завдання 1.

1. Відкрийте редактор NotePad.

2. Створіть за допомогою текстового редактора html-файл з особистими даними о собі.

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

3. Задайте назву «Особисті дані» вікна web-сторінки.

4. Збережіть його під назвою filel1.htm у власній папці.

5. Відкрийте файл file1.htm у браузері. Для цього відкрийте свою робочу папку і двічі клацніть мишею на назві файлу.

6. Відредагуйте сторінку. Для того щоб відредагувати файл, треба спочатку відкрити програму NotePad, а потім файл і кожного разу після редагування треба зберігати файл.

Задайте колір фона та тексту. Змінюйте відповідні параметри тега body - bgcolor і text (назви кольорів: red, green, white, yellow, blue, #ffaa55 тощо).

7. Виконайте форматування тексту у файлі filel.htm. Застосуйте у тексті різні накреслення літер (жирний, курсив, підкреслений). Заголовок тексту відцентруйте та відокремте від іншого тексту порожнім рядком. Кожний абзац розташуйте з нового рядка.

У кінці всього тексту наведіть риску.

8. Проекспериментуйте з тегами форматування тексту. Використайте якнайбільше тегів форматування і надайте своїй сторінці якнайліпшого вигляду.

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

10. Проведіть на сторінці лінії різної ширини, довжини та кольорів.

Рис 1. Приклад виконання роботи

Завдання 2.

1. Створіть за допомогою текстового редактора html-файл. Збережіть його під назвою filel2.htm у власній папці.

2. Задайте назву «Резюме» вікна web-сторінки.

3. Використовуючи теги першої лабораторної роботи створіть сторінку яка буде містити наступну інформацію:

Відомості про себе

• П.І.Б.;

• дата народження;

• місце народження. Інформація

• Адреса проживання;

• Телефон (домашній);

• Телефон (мобільний);

• E-mail.

4. Використовуючи теги маркірованого списку введіть інформацію про освіту

Освіта

• Школа;

• Ліцей;

• Університет;

• Курси;

• Друга вища освіта.

5. Використовуючи теги нумерованого списку вкажіть, якими мовами ви володієте.

Знання іноземних мов

1. Російська;

2. Англійська;

3. Німецький;

4. Французький;

5. Іспанська і т.д.

6. Використовуючи теги нумерованого списку вкажіть, які дисципліни ви вивчали на першому курсі. Задайте початок нумерації списку з 10.

7. Використовуючи теги нумерованого списку вкажіть, які дисципліни ви вивчаєте на другому курсі. Задайте початок нумерації списку з 20.

8. Використовуючи теги списку визначень перерахуйте свої інтереси та захоплення, хобі.

Рис 2. Приклад виконання роботи

Завдання 3.

1. На новій web-сторінці створить таблицю з даними про свій рейтинг.

Таблиця буде складатися з 3 стовпців та 4 рядків.

Задайте заголовок таблиці “Результати рейтингу”.

Задайте заголовки стовпців та рядків.

Заповніть таблицю оцінками.

2. Новий файл збережіть під назвою file3.htm. Перегляньте його у браузері.

3. Змінить вигляд таблиці. Задайте товщину рамки таблиці, на приклад, 3, задайте кольори рамки та фона таблиці.

4. Вирівнюйте текст у клітинках таблиці.

У заголовках – по центру, в інших комірках – на ваш смак.

5. Задайте ширину та висоту комірок.

Рис 3. Приклад виконання роботи