Web-мастеру

 У вас есть идея насчет сайта? Вы хотите написать о своей самоделке нам? Тогда вам сюда или пришлите её нам на e-mail: admin@dari-pats.lv.

Новость должна быть уникальной. 

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

Автор 
Оцените материал
(1 Голосов)

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

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

 

<html>
<body>
<img src=http://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=http://dari-pats.lv/images/39/sait/4/more.jpg>

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

<img border="10%" width="150px" height="150px" src=http://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>

Разновидности списков

Разновидности списков в браузере

 

 

 

 

 

 

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

Реклама

Наши группы

Поддержи проект

WebMoney Кошельки

wmE E360805809023

wmR R200307929169

wmZ Z127913139149

Три случайные новости

  • Мультивибратор
    Мультивибратор Всем привет сегодня я расскажу, как сделать простейшую мигалку своими руками-оригинальное название простейший мультивибратор. Схема…
  • Соединение блоков питания
    Всем привет. Не давно захотел сделать питание для авто усилителя так как одного бп стало…
  • Что такое язык html и зачем он нужен
    Что такое язык html и зачем он нужен    Привет всем сегодня я начну статьи на тему веб-программирования, то есть, как устроены сайты,…