Поточний час:
Сьогодні 22 листопада, середа 2017 рік
Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 2 роки 11 місяців 3 дня

Ваш ip адрес:54.80.169.119

Доброї ночі!
Ви обновили сторінку в 3 : 57
Статистика

Кількість публікацій на блозі: 367
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 27
Кількість міток на блозі: 3

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

Post_26aПривет! Сегодня поговорим о списках, как их добавлять к html-страницам, каких видов бывают списки.

Видимо у многих может возникнуть ситуация, когда нужно будет в процессе разработки сайта, сделать на странице список.  


Речь  пойдет о-том как создавать список на HTML- странице, какие бывают виды списков, какие теги и атрибуты нужно прописывать в редакторе, чтобы появился список, желающие узнать  как продолжаете чтения.

Возможность добавить список в страницу блога или сайта, существует и в самом редакторе сsm WordPress. В редакторе сsm WordPress на мой взгляд создать список легче, потому-что не нужно прописывать код вручную.

Также возможно существуют и плагины, в которых для редактирования текста присуствует возможность и добавить список.

В самом редакторе сsm WordPress для того чтобы создать список, нужно нажать на метку, которая находится виверхней  панели инструментов редактора, (в моем редакторе область для списков вверху слева). 

new1

⇑область для списков

Для нумерованного и маркированного списка (см на фото выше) расположены отметки (в нумерованном выделены три маленькие черточки с цифрами, а для маркированного столько же но с точками), при нажатии на отметку появляется выпадающий список, в котором присутствуют элементы списка.

В самом редакторе сsm WordPress присутствуют только два вида списке, при наведении курсора мышки к одному из списков  (их название можно прочитать, если подвести курсор мышки, к одному из них)  сразу появится подсказка — название слева расположен маркированный, а по справа нумерованный.

Маркованый список ⇒ входят элементы кружок, точка, квадрат.

Нумерованый список ⇒ входят буквы, (строчные) строчные латинские буквы, строчные греческие буквы, строчные римские буквы, (заглавные) заглавные римские буквы, заглавные латинские буквы.

Существует кроме “нумерованного” и “маркированного” еще один вид списка называется “определение”, добавить его можно  в вашу страницу только вручную, так как в редакторе сsm WordPress такого вида списка мной не обнаружено, такой список тяжело сделать самому, для этого нужно прописать коды, в области “Текст”.

Если мы перейдем в редакторе с режима страницы “Визуально” на страницу с режимом “Текст”, там отображается текст с  тегами и атрибутами на языке HTML.

Маркированные и нуменровани списки считаются самыми распространенными, где их практически каждый использует, когда возникает необходимость создать список для веб-страницы.

Хотя мне больше нравится третий вид “Определение”.

Как создать список в редакторе сsm WordPress 


В редакторе сsm WordPress делается список следующим способом, нужно:

выбрать строку для списка выделить выбранный строку далее выбираем вид списка затем нажимаем на значок выбираем нужный элемент который присутствует в данном виде спика, нажмем на клавишу мышки, и в той области которую мы обвели, появится  вид списка. Обновляем страницу, список готов.

Как добавить список, прописав код на HTML-страницу.

Сечас давайте узнаем как добавить список вручную, точнее прописать код на HTML-страницу

В редакторе присутствует всего лишь два вида списка. И дополнительные знания как вручную создать список, не помешают.

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

Начнем с “нумерованных”..

Я буду ориентироваться по коду своей учебной HTML-страницы, которую я сделал для того чтобы учиться прописывать коды, о которой я писал в одной из публикаций и кто не читал может прочитать публикацию, название поста “Типы ссылок и о странице со ссылками”, найти статью можно в категории “Все о HTML”.

В статье моя рекомендация самому создать обычную HTML- страницу с ссылками, и по странице можно учиться, лучше усваивать язык HTML, методом добавлять елементы,  менять коды, скажем по другому  учиться и заодно постоянно делать сам вид страницы  лучше.

На страницу с этой публикацией можно перейти по ссылке “Типы ссылок, и о странице со ссылками” в публикации я обещал, что буду искать возможность как сделать вид html-страницы лучшим, добавляя к странице различные элементы, которые я изучаю.

Заодно и страница становится лучше, и я сам так осваиваю лучше материал, рекомендую новичкам попробовать именно таким способом учиться.

Один из таких путей чтобы изменить вид страницы на лучший я сам придумал, лучше будет выглядеть страница когда все ссылки будут расположены друг за другом по списку, считаю что это именно то, что подойдет супер что–бы сделать страницу лутше.

Конечно как с практической точки зрения, то ничего не меняется, ссылки или с таким видом где они сейчас отображены в ширину друг за другим, и как бы мы их не разместили на странице, все равно выполнят ту же самую функцию, это перевести пользователя на сайт на который указывает ссылка.

Чтобы показать как вписать в код страницы, код списка, я открою свою страницу со ссылками, скопируйте код он находится чуть ниже, и по коду вам лучше будет ориентироваться, добавляя туда теги, атрибуты.

Код “Мої посилання”

<html>

<head>

<meta http-equiv= “content-type” content= “text/html;charset=windows-1251″ >

<title>Мої посилання</Title>

</head> <body> <a href= “http://google.ua” target= “_blank” >GOOGLE</a>

<a href= “http://yandex.ua” target= “_blank” >yandex</a>

</body>

</html>

Как мы его видим, ето простенький код, всего навсего две ссылки,   зато создав себе такую ​​страницу вы легко  сможет добавлять туда разные нужны ссылки. Скажем каталоги в которых вы зарегистрировались, или сайты по которым вы продвигаете свой блог. Польза от нее такая, и ссылки возможно добавлять, заодно и практикуясь менять сам вид страницы делая лучшим.

Для того чтобы  лучше смотрелась страница, я решил чтобы ссылки не отображались в одну строку, в ширину, а были выделены по списку, чтобы друг за другом красиво выделялись в несколько строк, располагались по списку.

 

Смотрим на фото чтобы лучше понять, на этой странице если просто добавлять ссылки, тогда они будут располагаться не в одну строку, а в ширишу, так как указывает стрелка на красную отметку, а если сделать отсортированы по списку, то согласитесь выглядеть лучше, и так удобнее.

37а

⇑со списком красивее

Как мы создаем списки для html-страницы

Создается список после тега <body> добавляем тег <ol> этот тег означает для браузера что нужно воспроизвести список, закрываем список </ ol>, внутри этих тегов размещаются все коды ссылок, которые мы собираемся разместить в списке.

Тег </ ol> нужно вставлять перед закрытым тегом </ body> чтобы закрыть список тег.

Далее продолжаем посередине между тегами <ol> </ ol> размещаем наши ссылки, потом где у нас ссылки, перед атрибутом <a href= (означае что открываем посилання) вставляем тег <li> посмотрите <li> <a href = а в конце ссылки после </a> закрываем тег </ li>.

 Показать повнистью код строки где размещена ссылка на поисковую систему yandex 

<li><a href=”http://yandex.ua“target=”_blank”>yandex</a></li>.

 

  <html>

<head>

<meta http-equiv=»content-type»content=»text/html;charset=windows-1251″>

<title>Мої посилання</Title>

</head> <

body>

<ol>

<li><a href=»http://google.ua»target=»_blank»>GOOGLE</a></li>

<li><a href=”http://yandex.ua”target=”_blank”>yandex</a></li>

</ol>

</body>

</html>

Такие же действия предпринимаются для каждой строки, где размещены ссылки, посмотрите на строку выше где красным выделены что добавляем к ссылке тег <li>, а синим сам код ссылки, он у нас присутствовал.

Чтобы добавить ссылку, выделите код ссылки, скопируйте, вставьте ниже выделенной ссылки, а затем измените адресс ссылки на другую ссылок, и название ссылки.

Хто не понял просмотрите фото ниже

 38а

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

 

Продолжаем, спиок отобразится когда запустят страницу в браузере в таком виде где ссылки размещены по цифрам.

 Цифри 1,2,3,— такие цифры считаются арабскими, нумерация с такими цифрами зустрячаеться повсюду.

нумерация з арабськими цифрами

<li><a href=”http://yandex.ua“target=”_blank”>yandex</a></li>.

Но существуют еще римские, которые также можно использовать и для этого чтобы увидеть список в виде римских букв, нужно сделать следующее.

нумерация  вид римськие буквы

<ol type=I> <li><a href=”http://yandex.ua“target=”_blank”>yandex</a></li> </ol>

В теге <ol> нужно дописать атрибут type = I выглядит так <ol type = I> и когда перезапустить страницу в нас появятся римские буквы, но добавлять советую большое “и” а не маленький “и”, (если добавить маленькое “и” то получаются маленькие римские) буквы а вид у них как для меня не очень, мне не понравился.

Если поменять букву “и” на букву “а” ,  “= а” вместо равно “= И” вид часть кода будет такой <ol type = а>, то на экране у нас появится список из латинских букв, но маленьких латинских букв.

список з маленьких латинських букв

<ol type= а ><li><a href=”http://yandex.ua“target=”_blank”>yandex</a></li>

</ol>

 

список з великих латинських літер

<ol type= А >. <li><a href=”http://yandex.ua“target=”_blank”>yandex</a></li> </ol>

Если добавить добавить к атрибуту <ol> START с числом например равно “= 3>, <ol START = 3 type = A> то у нас появится спиок из латинских букв, этот список будет начинаться с третьей буквы латинского алфавита, это с буквы” С “а не с буквы” А “.

список буде начинатся з третей буквы латинського алфавита, ето з буквы “С”

<ol START=3 type=A>

<li><a href=”http://yandex.ua“target=”_blank”>yandex</a></li>

</ol>

И конечно аналогично оставим START = 3 а удалим type = A, такой вид <ol START = 3>, то у нас появится список, который будет начинаться с цифры «три»

Список буде начинатся с цифри “3”

<ol START=3>

<li><a href=”http://yandex.ua“target=”_blank”>yandex</a></li>

</ol>

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

Маркированный список, сюда входят все те же процедуры, разница конечно в названиях тегов, меняем вместо <ol> после тега <body> нужно поставить <ul> или поменять одну букву “о” на “u”, конечно и с “ul” закрыть </ ul> контейнер со ссылками, перед </ body>, возможно контейнер и по другому называют, но по сути оно ничего не меняет.

У нас появятся список в котором черные кружочки будут сказываться в начале каждой строки, мне кстати такой вид списка больше нравится, возможно я бы оставил для страницы этот список, но есть еще один какой-то считается не популярен, но о нем позже, розберемся с этим до конца.

Список отображается с не закрашеными кружочками

<ul type= circle >

<li><a href=”http://yandex.ua“target=”_blank”>yandex</a></li>

</ul>

Продолжаем, для того чтобы вместо кружочки в строке появились квадратики, к атрибуту <ul добавляем тип type а потом если равно “= square”, тогда появятся окрашенные квадратики, если равно “= circle” тогда кружочки но не окрашены.

Передивимся полностью примеры

Список значиться  закрашеными квадртами

<ul type=square  >

<li><a href=”http://yandex.ua“target=”_blank”>yandex</a></li>

</ul>

Без  type= по умалчиванию ето только <ul>— закрашеные кружочки.

По умалчиванию только закрашеные кружочки

<ul  >

<li><a href=”http://yandex.ua“target=”_blank”>yandex</a></li>

</ul>

<ul type= circle >—кружочки не закрашены,  <ul type=square  >— закрашены квадратики без  type= по умалчиванию ето только <ul>— закрашеные кружочки.

  Список  определений

Следующий список называется определение,  как для меня то етот список  подходит супер для страницы со ссылками, суть его заключается в следующем, сначала ссылки, а ниже ссылок подсказка что за  ссылка.

Здесь в отличие от маркированного и нумерованного списка меняется все. Чтобы сделать такой список, точнее сами значения со ссылками и структура страницы остаются, а минються полностью только сами теги.

Вместо тегу <ul> или  <ol> вставляем тег <dl>, а вместо тегу <li> вставляєм тег <dt>,

вместо  <li><a href=(посилання)

вставляем  <dt><a href=(посилання).

 

39а

⇑види списков

Но в этом списке в отличие от предыдущих еще добавляется один тег, его добавляют для указания ссылки на это <dd> → после тега идет описание ссылки и закрываем </ dd> ниже пример списка полностью.

Список определения

<dl>

<dt><a href=”http://google.ua”target=”_blank”>GOOGLE</a></dt>

<dd>гугл-це пошукова система</dd>

<dt><a href=”http://yandex.ua”target=”_blank”>yandex</a></dt>

<dd>яндекс-це пошукова система</dd> </dl>

По спискам все. Этой информации достаточно, чтобы создать список, надеюсь кто из вас не знает как создавать список, то прочитав етот пост сможет сделать список у себя на сайте.


Ничего сложного в создании списка нету, нужно только попытатся, напомню еще раз, что списки да и любые элементы для сайта (таблицы, картинки, видео) следует размещать в теле страницы, а это посреди  тегов <body> </ body>

Перед спискам сделайте подсказку, которая будет указывать что ниже размещен такой-то список.

Для этого нужно добавить заголовок, как добавить заголовок к тега <body> вставляем тег <h1> можно и <h2> здесь прикол чем меньше число тем больше буквы отображаются в браузере, далее вписываем значение списка скажем “Мои ссылки на сайты” вы можите конечно другое, какое-то ваше.

Закроєм </h1>

Ни в коем случае не висавляты тег <h1> а закрывать </ h2> или на оборот, потому Заголовок не появится.

Ну что же пора заканчивать публикацию, моя учебная страница становится все лучше, и благодаря ей лучше усваивается сам язык HTML, конечно я страницу и дальше планирую совершенствовать.

Чуть не забыл заголовок <h1> Ссылки на сайты </ h1>, нужно ставить ниже тега <body> перд тегом <ol>.

До свидания.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *