Рамка для изображения и списки

Всем приветик давно я уже не продолжал писать про построение ХТМЛ страниц. Вот пришло время и продолжаю. Итак сегодня мы рассмотрим как можно сделать рамку вокруг изображения,как можно менять её размер. Также разберем как создать список на сайте — обычный список либо же с нумерацией. Для начала рассмотрим как же получить рамку.

Как я уже сказал выше мы будем делать рамку вокруг изображения — кто не знает как вставить картинку на хтмл страницу просим сюда. Итак у нас имеется код картинки:

<html>
<body>
<img src=https://dari-pats.lv/images/39/sait/4/more.jpg>
</body>
</html>

Тут все по старому ничего не поменялось. Теперь разберемся как сделать рамку. Получить рамку вокруг изображения мы можем получить с помощью атрибута «border». Этот атрибут у картинка по умолчанию поставлен на 0. Соответственно если вы хотите убрать рамку где-то то нужно написать border=0. Значения рамки можно писать просто числом,можно после числа указать пиксели либо проценты. Пример смотрите ниже.

<html>
<body>

<img border=»10″ width=»150px» height=»150px» src=https://dari-pats.lv/images/39/sait/4/more.jpg>

<img border=»10px» width=»150px» height=»150px» src=https://dari-pats.lv/images/39/sait/4/more.jpg>

<img border=»10%» width=»150px» height=»150px» src=https://dari-pats.lv/images/39/sait/4/more.jpg>

</body>
</html>

С рамкой разобрались — переходим к созданию списка. Создание списка может пригодится на вашей страничка так как можно получить понятное разделение текста по пунктам. Так же научимся создавать список с числа 1 по 6 и т. д. Для этого нам понадобятся теги <ul>,<li> оба тега нужно закрывать. Вот пример ниже:

<html>
<body>
<ul>
<li>Пункт первый</li>
<li>Пункт второй</li>
<li>Пункт третий</li>
<li>Пункт четвёртый</li>
<li>Пункт пятый</li>
</ul>
</body>
</html>

У списка есть свои атрибуты с помощью которых его можно сделать поинтересней. Например вместо круга мы можем получить квадрат или пустой круг. Для этого нужен атрибут type он пишется в теге <ul> к нему можно применить значения square (квадрат),disc (диск), circle (пустой круг).  

Так же я выше сказал ,что мы сделаем нумерованный список — в нем почит нечего не отличается только вместе тега <ul> мы пишем <ol>. И по умолчанию мы получим нумерованный список от 1 до 7… Пример:

<html>

<body>

<ol>

<li>Пункт первый</li>

<li>Пункт второй</li>

<li>Пункт третий</li>

</ol>

</body>

</html>

И также у него есть атрибуты и также пишутся через type только значения другие. Если мы хотим арабские числа то в теге <ol> пишем 1 либо не пишем нечего по умолчанию у нас уже арабские. Если хотим буквами заглавными либо прописными пишем А либо а, если хотим римские цифры то пишем I.

<html>
<body>
<ol type=»1″>
<li>Пункт первый</li>
<li>Пункт второй</li>
<li>Пункт третий</li>
</ol>

<ol type=»A»>
<li>Пункт четвёртый</li>
<li>Пункт пятый</li>
<li>Пункт шестой</li>
</ol>

<ol type=»a»>
<li>Пункт седьмой</li>
<li>Пункт восьмой</li>
<li>Пункт девятый</li>
</ol>

<ol type=»I»>
<li>Пункт десятый</li>
<li>Пункт одинадцатый</li>
<li>Пункт двенадцатый</li>
</ol>

</body>
</html>

Ну вот, пожалуй, на сегодня и все. Спасибо за внимание!

Закрепите на Pinterest