Урок 3. HTML списки, ссылки, картинки.

HTML списки, маркированные и не маркированные списки. Ccылки, абсолютные и относительные адреса, подключение файла css. Картинки, свойство float, ширина картинок.

Списки.

Списки бывают маркированные и нумерованные. В маркированных используется маркер, определенный символ (кружок, тире и т.д.), в нумерованных – цифра.

Для создания маркированных списков используют тэг <ul>, для не маркированных - <ol>.

Примеры:

Маркированный список:

    <ul>

        <li>Пункт 1</li>

        <li>Пункт 2</li>

    </ul>

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

    <ol>

        <li>Пункт 1</li>

        <li>Пункт 2</li>

    </ol>

Для различных настроек списков можно использовать свойства css приведенные далее в таблице:

Свойство	Значения	Описание
list-style-type	disc	Устанавливает вид маркера списка. Применяется к тэгам li, ol, ul.
	circle
	square
	decimal
	decimal-leading-zero
	lower-roman
	upper-roman
	lower-greek
	lower-latin
	upper-latin
	none
list-style-image	none	Устанавливает маркер списка в виде изображения. Если none, то маркера не будет. Применяется к тэгам li, ol, ul.
list-style-image	url файла изображения.
list-style-position	inside	Маркер находится внутри прямоугольной области элемента списка.
list-style-position	outside	Маркер находится вне прямоугольной области элемента списка.
list-style		Позволяет задать все три предыдущие свойства за раз.

Например сделаем нумерованный латинскими маленькими буквами список:

    <style>

        ol {

            list-style-type:lower-latin;

        }

    </style>

    <ol>

        <li>Пункт 1</li>

        <li>Пункт 2</li>

    </ol>

Ссылки.

Ссылки в html документе создаются тэгом <a>. У данного тэга есть атрибут href, которому необходимо присвоить адрес страницы, на которую ведет ссылка. Пример:

<a href="https://yandex.ru/">Ссылка на яндекс</a>

Адреса бывают абсолютные и относительные. Абсолютные начинаются с http или https. В предыдущем примере был указан абсолютный адрес.

Относительные адреса вычисляются относительно адреса текущей страницы, на которой находится ссылка. Допустим мы находимся на странице c атресом «https://dvkuklin.ru/» тогда следующая ссылка будет указывать на адрес «https://dvkuklin.ru/page_01.html»:

<a href="page_01.html">Ссылка на яндекс</a>

Если страница находится еще в отдельно папке, то необходимо указать имя папки, слэш и названия папки. Т.е. в следующем примере ссылка указывает на файл, который находится в папке «pages»:

<a href="pages/page_01.html">Ссылка на яндекс</a>

Теперь обладая этими знаниями мы можем подключить к нашей страницы файл css. Допустим он находится в папке css и имеет имя style.css. Тогда в тэге <head> мы можем подключить файл следующим образом:

Теперь важный нюанс. В файле css относительные адреса так же вычисляются относительно этого файла. Тогда url для картинки, которая находится в другой папке будет выглядеть так:

background-image: url('../images/matrix-background.webp');

две точки здесь означают, что вначале надо выйти из текущей папки, потом мы заходим в папку images и обращаемся к файлю matrix-background.webp.

Картинки.

Картинки мы уже вставлять умеем. Для этого используется тэг <img> у которого есть атрибут src, которому в свою очередь мы присваиваем url (адрес) картинки.

Так же плюсом необходимо знать, что картинка отображается там, где она встречается в коде. Для того, что бы заставить текст обтекать картинку, ей необходимо в стилях css настроить свойство float, и присвоить ему значение либо left либо right.

Пример.

<head>

    <style>

        img {

            float: left;

            margin: 10px;

            width: 500px;

        }

    </style>

</head>

<body>

    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius tempora dicta, consequuntur excepturi tenetur fugiat voluptatum aliquid, in dolores aperiam provident et deserunt asperiores omnis delectus hic ipsa temporibus dolorem!</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus ipsa, laudantium reiciendis dolores nobis suscipit labore accusantium sunt modi, perferendis nemo odit iure incidunt assumenda tenetur consectetur nihil aliquid voluptatum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis totam temporibus accusamus maiores modi adipisci culpa similique eos atque ex iusto hic consequatur exercitationem, tempore possimus magnam omnis blanditiis natus!</p>

</body>

Результат:

Что бы понять как это работает, вам необходимо поэкспериментировать, т.е. добавить картинку в документ и посмотреть как и где она отображается. Потом добавить свойство float:left, и снова посмотреть. Потом float:right;

Так же обратите внимание, что в данном коде ширина картинки настраивается в коде css (width: 500px). Такой способ на данный момент предпочтительней.