Нумерованные и ненумерованные списки в в html-документах

Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Башкирский Государственный Университет

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

otchet_2.doc

Скачиваний:

Добавлен:

01.05.2025

Размер:

4.32 Mб

Скачать

☆

<<< < Предыдущая 12 / 62 3 4 5 6 > Следующая >>>

Нумерованные и ненумерованные списки в в html-документах

Списки могут быть:

Нумерованные. Каждый элемент нумерованного списка начинается спорядкового номера или буквы в алфавитном порядке;
Ненумерованные. Элемент ненумерованного списка начинается c маркера списка.

Далее будут рассмотрены примеры нумерованные и ненумерованные списки в в HTML-документах

Пример 1. Ненумерованные списки. Вид электронного учебника показан на рисунке 1.11

<title> работа со списками </title>

</head> <body>

<h1>пример 1</h1> времена года:

<ul><li>зима<ul><li>декабрь <ul><li>12декабря<LI>24деабря<li>31декабря</ul> <li>январь<li>февраль

</ul>

<li>весна <ul> <li>март<LI>апрель<li>май </ul>

<li>лето <ul> <li>июнь<LI>июль<li>август </ul>

<li>осень <ul> <li>сентябрь<LI>октябрь<li>ноябрь </ul>

</ul>

<h1>пример 2 </h1>

</body> </html>

Рисунок 1.11 - Ненумерованные списки.html

Пример 2. Нумерованные списки. Вид электронного учебника показан на рисунке 1.12

<title> работа со списками </title>

</head> <body>

<h1>пример 1</h1> времена года:

<li>зима<oltype="a"><li>декабрь <ol><li>12декабря<LI>24деабря<li>31декабря</ol> <li>январь<li>февраль </ol>

<li>весна <ol type="a"> <li>март<LI>апрель<li>май </ol>

<li>лето <ol type="a"> <li>июнь<LI>июль<li>август </ol>

<li>осень <ol type="a"> <li>сентябрь<LI>октябрь<li>ноябрь </ol>

</ol>

<h1>пример 2 </h1>

<ol type="circle"> <li>маша <li>саша <li> паша

</ol> </body> </html>

Рисунок 1.12 - Нумерованные списки.html

Работа с таблицами в html-документах

В языке HTML таблицы используются в двух случаях:

Для представления числовых данных, разбитых по строкам и столбцам;
Как средство форматирования Web-страниц, задания взаимного расположения элементов страницы.

Основные атрибуты для создания таблиц в HTML-документах:

align - определяет выравнивание таблицы;
background - задает фоновый рисунок в таблице;
bgcolor - цвет фона таблицы;
border - толщина рамки в пикселах;
bordercolor - цвет рамки;
cellpadding - отступ от рамки до содержимого ячейки;
cellspacing - расстояние между ячейками;
cols - число колонок в таблице;
frame - сообщает браузеру, как отображать границы вокруг таблицы;
height - высота таблицы;
rules - сообщает браузеру, где отображать границы между ячейками;
summary - краткое описание таблицы;
Width - ширина таблицы.

Далее будут рассмотрены примеры с таблицами в HTML- документах.

Пример 1. Обычная таблица 3х2.

<title> таблица 1 </title>

</head><body>

<caption> обычная таблица 3х2 </caption>

</table> </body> </html>

Пример 2. Пример с rowspan.

<title> таблица 2 </title>

</head><body>

<caption> пример с rowspan </caption>

</table></body></html>

Пример 3. Пример с colspan.

<title> таблица 3 </title>

</head> <body>

<caption> пример с colspan </caption>

</table> </body> </html>

Пример 4. Демонстрация заголовков.

<title> таблица 4 </title>

</head><body>

<caption> демонстрация заголовков </caption>

Пример 5. Демонстрация colspan и заголовков.

<title> таблица 5 </title>

</head> <body>

<caption> демонстрация colspan и заголовков </caption>

</table> </body> </html>

Пример 6. Демонстрация множественных заголовков, colspan.

<title> таблица 6 </title>

</head> <body>

<caption> демонстрация множественных заголовков, colspan </caption>

</table> </body></html>

Пример 7. Демонстрация множественных заголовков, colspan.

<title> таблица 7 </title>

</head> <body>

<caption> демонстрация множественных заголовков, colspan </caption>

</table></body></html>

Пример 8. Демонстрация боковых заголовков, rowspan.

<title> таблица 8 </title>

</head><body>

<caption> демонстрация боковых заголовков, rowspan </caption>

</table></body></html>

Пример 9. Пример таблицы использующей все эти теги.

<title> таблица 9 </title>

</head> <body>

<caption> пример таблицы использующей все эти теги </caption>

<th colspan=2>AvErAgE</th></td> </tr>

<tr> <td><th>HEight</th><th>WEight</th></td> </tr>

<tr> <th rowspan=2>GEndEr</th>

<th>MAIEs</th><td>1.9</td><td>0.003</td> </tr>

<tr> <th>FEmAIEs</th><td>1.7</td><td>0.002</td> </tr>

</table> </body> </html>

Пример 10. Использование rowspan/colspan.

p> <html> <head>

<title> таблица 10 </title>

</head> <body>

<caption> использование rowspan/colspan </caption>

</table> </body> </html>

Пример 11. Таблица без рамки.

p> <html> <head>

<title> таблица 11 </title>

</head> <body>

<caption> таблица без рамки </caption>

<table>

</table> </body> </html>

Пример 12. Таблица с рамкой шириной 10.

<title> таблица 12 </title>

</head> <body>

<caption> таблица с рамкой шириной 10 </caption>

</table> </body> </html>

Пример 13. Callpadding и cellspacing.

p> <html> <head>

<title> таблица 13 </title>

</head> <body>

<caption> callpadding и cellspacing </caption>

</table> </body> </html>

Пример 14. Выравнивание, заголовки и подтаблицы.

p> <html> <head>

<title> таблица 14 </title>

</head> <body>

<caption> выравнивание, заголовки и подтаблицы </caption>

<tr> <th>JanuAry</th> <th>FEBruAry</th> <th>MArch</th> </tr>

<td>AnothEr cELL, <Br>cELL 3</td> </tr>

</table> </body> </html>

Пример 15. Align=left|right|center.

</p> <html> <head>

<title> таблица 15 </title>

</head> <body>

<caption> align=left|right|center </caption>

<tr> <th>JanuAry</th> <th>FEBruAry</th> <th>MArch</th> </tr>

<td>All AlignEd cEntEr</td>

<td>AnothEr cELL, <Br>cELL 3</td> </tr>

<tr> <td align=right>AlignEd right</td>

<td align=cEntEr>AlignEd to cEntEr</td>

<td>dEfAult,<Br>AlignEd IEft</td> </tr>

</table> </body> </html>

Пример 16. Valign=top|bottom|middle.

p> <html> <head>

<title> таблица 16 </title>

</head> <body>

<caption> valign=top|bottom|middle</caption>

<tr> <th>JanuAry</th> <th>FEBruAry</th> <th>MArch</th> </tr>

<td>All AlignEd to top</td>

<tr> <td valign=top>AlignEd to ThE top</td>

<td valign=bottom>AlignEd to thE bottom</td>

<td>dEfAult AlignmEnt,<Br>center</td> </tr>

</table> </body> </html>

Пример 17. Таблицы: таблица ABCD внутри таблицы 123456.

<title> таблица 17 </title>

</head><body>

<caption> вложенные таблицы: таблица ABCD внутри таблицы 123456 </caption> <table border>

<td>1</td> <td>2</td> <td>3

</table> </td> </tr>

</table> </body> </html>

Пример 18. Задание ширины таблицы.

<title> таблица 18 </title>

</head> <body>

<caption> задание ширины таблицы </caption>

<tr><td>width=50%</td><td>width=50%</td> </tr>

Пример 19. Цнтрирование таблицы на странице.

<title> таблица 19 </title>

</head> <body>

<caption> цнтрирование таблицы на странице </caption>

</table> </center> </body> </html>

Пример 20. Ширина таблицы и вложенные таблицы.

<title> таблица 20 </title>

</head> <body>

<caption> ширина таблицы и вложенные таблицы </caption>

</table> </td>

</table> </body> </html>

Виды электронного учебника показан на рисунке 1.13

Рисунок 1.13 - Работа с таблицами.html

<<< < Предыдущая 12 / 62 3 4 5 6 > Следующая >>>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

#
27.09.201996.04 Кб7Osetrina 2b1.docx
#
26.09.20195.26 Mб244Osnovy_kvantovykh_i_optoelektronnykh_priborov.doc
#
17.11.2019742.99 Кб18Osnovy_prava.docx
#
20.08.20191.13 Mб36Osn_mod_BU_4kurs_k_sem_zan.doc
#
18.03.2016502.78 Кб81Otchet.doc
#
01.05.20254.32 Mб0otchet_2.doc
#
01.05.20253.59 Mб0otchet_2.doc
#
01.05.2025361.98 Кб0Otchet_po_praktike.doc
#
29.10.201859.28 Кб30Otchet_po_praktike_Kulmas_Ufa.docx
#
18.03.2016269.31 Кб62otchet_po_praktike_sberbanka_gor_ekaterinburga.doc
#
27.09.201932.56 Кб20otchyot_po_praktike_aydar_1.docx

Нумерованные и ненумерованные списки в в html-документах

Работа с таблицами в html-документах