Web-мастеру

У вас есть идея насчет сайта? Вы хотите написать о своей самоделке нам? Тогда вам сюда или пришлите её нам skype valeron609, e-mail:   Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра. . Новость должна быть уникальной. 

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

Автор 
Оцените материал
(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>

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

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

 

 

 

 

 

 

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

Понравился сайт? Кликни +1

Наши группы

Красиво не правда ли? Нажми если хочешь.

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