Привіт! Сьогодні поговоримо про списки, як іх додавати до html-сторінки, яких видів бувають списки.
Мабуть в багатьох може виникнути ситуація, коли потрібно буде в процесі розробки сайту, зробити на сторінці список.
Мове нижче піде про–те як створювати список на HTML— сторінці, які бувають види списків, які теги та атрибути потрібно прописувати в редакторі щоб появився список, хто бажає дізнатись то продовжуєм читання.
Можливість додати список до сторінки блогу або сайту, існує і в самому редакторі сsm WordPress. В редакторі сsm WordPress на мою думку створити список легше, тому-що не потрібно прописувати код вручну.
Також можливо існують і плагіни, в котрих для редагування тексту, присутя можливість додати список.
В самому редакторі сsm WordPress для того щоб створити список, потрібно натиснути на позначку, яка знаходиться вгорі, в панелі редактора, (в моєму редакторі область для списків зверху).
⇑область для списків
Для нумерованого і маркованого розташовані позначки (в нумерованому виділені три маленьки рисочки з цифрами, а для маркованого стільки ж але з крапками), при натисканні на позначку появляється випадаючий список, в якому присутні елементи списку.
В самому редакторі с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>
Як ми бачимо простенький код, всього навсього два посилання, про те потім створивши собі таку сторінку ви легко собі зможите додавати туда різні потрібні посилання. Скажем каталоги в яких ви зареєструвались, або сайти пояким ви просуваєте свій блог. Користь від неї така, і посилання можливо додавати, заодно і практикуючись надавати сторінці кращий вигляд.
Для того щоб надати кращого виду сторінці, я вирішив щоб посилання не розташувувались в один рядок, в ширину, а були виділені за списком, щоб один за одним красиво виділялись в декілька рядків, розташовувались по списку.
⇑з списками кращий вигляд
Як ми створюємо списки для 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> , а синім сам код посилання, він в нас був присутній.
Щоб додати посилання, виділіть код посилання, скопіюйте, вставте нижче виділеного посилання, а потім поміняйте адресу на інше посиланя, і саму назву посилання.
Хто не зрозумів передивіться фото нижче.
⇑
Номерований список
Продовжуємо, коли запустим сторінку в браузері то ми побачимо такий список, де посилання розміщені за цифрами. Цифри 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=(посилання).
⇑види списків
Але в цьому списку на відміну від попередніх ще додається один тег, його додають для вказівки посилання це <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>. Тепер все до зустрічі.