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>
<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.ua  <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= А >.  

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

<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>. Тепер все до зустрічі.