Тема: Списки
Мета: Опанувати методи створення різних видів списків у HTML-документі.
Теоретичні відомості.
Списки надають зручну можливість представлення інформації в документах.
Елементи списків всіх типів мають відступ від лівої межі екрана.
Тип Теги списку Теги
елементів
Нумерований
...
... - елемент списку
Маркірований
... - елемент списку
Список описів ...
... - назва терміна
За замовчуванням елементи впорядкованого списку нумеруються цілими числами починаючи з 1. До тега нумерованого списку існує атрибут TYPE. Встановлюючи TYPE рівним «А», «а», «І», «і», можна змінити схему нумерації на великі літери, малі літери, великі або малі римські цифри відповідно.
Атрибут START дозволяє задавати початкове значення для нумерації (за замовчуванням START= 1, але можна вказати будь-яке додатне число).
Атрибут TYPE тега дозволяє змінювати вигляд маркера
7YPE=disk - маркер має вигляд диска;
TYPE=circle - маркер має вигляд кола;
TYPE=square - маркер має вигляд квадрата.
ПРИКЛАД (нумерований список)
Файл у форматі HTML:
Mon перша НТМІ-сторінка< TITLE ><br /><br /></HEAD><br /><br /><BODY><br /><br /><P ALIGN=CENTER><br /><br /></p><div class='pagination'><a class='uk-button uk-button-small uk-button-default' href='computers_8348.php'>1</a></div></div>
<hr />
<div style="margin:0px 0px 0px 0px;" class="responsive_1_">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3017271769063749"
crossorigin="anonymous"></script>
<!-- Universal horizontal adaptive -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3017271769063749"
data-ad-slot="8886608564"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</article>
</div>
<div class="uk-width-1-4@m">
<div style="margin:0px 0px 15px 0px;" class="uk-text-center">
<div uk-alert>
<h3>Реферати!</h3>
<p class="">У нас ви зможете знайти і ознайомитися з рефератами на будь-яку тему.</p>
</div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3017271769063749"
crossorigin="anonymous"></script>
<!-- Universal vertical adaptive -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3017271769063749"
data-ad-slot="6775450545"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<br /><br />
<div uk-sticky="offset: 100" class="scrollspy uk-sticky uk-active uk-card uk-card-small uk-card-body uk-padding-remove-top uk-visible@m uk-text-center">
<br />
</div>
</div>
</div>
</div>
</div>
<br /><br />
<div class="uk-section uk-padding-remove-top uk-padding-remove-bottom">
<div class="uk-container">
<hr>
</div>
</div>
<div class="uk-section uk-padding-remove section-cta uk-background-blend-lighten uk-background-center-center uk-background-cover uk-text-center" style="background-image: url(/assets/img/home-office.jpg)" >
<div class="uk-background-muted1 uk-border-rounded1 uk-padding-large">
<h2>Не знайшли потрібний реферат ?</h2>
<p class="uk-text-lead">Замовте написання реферату на потрібну Вам тему</p>
<p class="uk-margin-medium-top">
<a href="/go/referat/2" target="blank" class="uk-button uk-button-primary uk-button-large">Замовити реферат</a>
</p>
</div>
</div>
<footer id="footer" class="uk-section uk-margin-remove uk-section-xsmall uk-text-small uk-text-muted border-top">
<div class="uk-container">
<div class="uk-text-center">
<a href="/" title="Реферат на тему">Реферати на тему</a> | <a href="/" title="Реферати українською мовою безкоштовно">Реферати українською мовою безкоштовно</a> | <a href="/" title="Скачати бесплатно реферати українською мовою">Скачати бесплатно реферати українською мовою</a>
</div>
<div class="uk-text-center">
<span class="copyright">© 2011 - 2023 - Українські реферати
</span>
</div>
</div>
</footer>
<link rel="stylesheet" href="/assets/fa/css/font-awesome.min.css">
</body>
</html>