Добавление кнопок, ссылок и таблиц
Կոճակների, հղումների և աղյուսակների ավելացում
Теперь после того когда вы узнали как добавлять стили, и что такое width и height давайте поговорим о добавлении ссылок - тег <a>. Тег <a> превращает любой объект в ссылку.
Այժմ, երբ դուք սովորել եք, թե ինչպես ավելացնել ոճերը և ինչ են ներկայացնում width ու height թեգերը, եկեք խոսենք հղումներ ավելացնող <a> թեգի մասին: <a> թեգը ցանկացած օբյեկտ վերածում է հղումի:
Атрибут href нужен, для того чтобы задать ссылку на сайт либо блок. Внутри него уже можно писать текст, который при нажатии на него перейдёт на соответствущую ссылку.
href հատկանիշն անհրաժեշտ է կայքի կամ բլոկի հղում սահմանելու համար: Դրա ներսում արդեն կարող եք գրել տեքստ, որը սեղմելուց հետո կգնա համապատասխան հղումով։
Если будет надобность чтобы ссылка открывалась на новой странице можете использовать атрибут target:_blank;
Եթե անհրաժեշտություն կա, որ հղումը բացվի նոր էջում, կարող եք օգտագործել target:_blank; հատկանիշը։
Чтобы ссылка не была голой, можно сделать наподобие кнопки через <div> либо использовать уже существующий тег <button>․
Որպեսզի հղումը մերկ չլինի, կարող եք այն դարձնել կոճակի նման <div>-ի միջոցով կամ օգտագործել գոյություն ունեցող <button> թեգը:
Давайте чуточку изменим дизайн и зададим ему ссылку на сайт. Сперва давайте изменим border и размер кнопки с помощью width и height. Потом изменим цвет кнопки и зададим для него новое свойство: box-shadow. Направлена на то, чтобы имитировать объекты реального мира и создавать эффект объёма в плоских элементах интерфейса. При необходимости можете добавить border-radius для закруглённых углов.
Դիզայնը մի քիչ փոխենք ու ավելացնենք կայքի հղում։ Նախ, եկեք ավելացնենք կոճակին border և փոխենք լայնությունն ու բարձրությունը width և height թեգերի օգնությամբ: Հետո փոխենք կոճակի գույնը և դրա համար սահմանենք նոր հատկություն՝ box-shadow։ Այս հատկությունը ուղղված է իրական աշխարհի օբյեկտների ընդօրինակմանը և հարթ ինտերֆեյսի տարրերում եռաչափ էֆեկտ ստեղծելուն: Անհրաժեսհտության դեպքում դուք կարող եք ավելացնել border-radius թեգը անկյունները կլորացնելու համար:
Для того чтобы кнопка ввела на ссылку, нужно добавить тег <а>. Тег <button> должен находиться внутри тега <а>, чтобы ссылка работала на всю область кнопки.
Որպեսզի կոճակը ուղղի դեպի հղում, պետք է ավելացնել <а> թեգը։ <button> թեգը պետք է գտնվի <а> թեգի ներսում, որպեսզի հղումն աշխատի կոճակի ողջ տարածքում:
Теперь давайте попробуем создать таблицу. В некоторых случаях для удобства восприятия, контент нужно оформить в виде таблицы. Таблица состоит из строк и столбцов и предназначена для структурирования данных. Как правило, в таблицах размещаются однотипные данные. Как пример таблицы, из школьных лет — журнал. Ученик это каждая строка. Колонки — даты. Напротив каждой фамилии можно проставить оценку за урок, прошедший в конкретную дату. Всё что вам нужно это знать за что отвечают следующие теги: <table>, <thead>, <tbody>, <tfoot>, <th>, <tr>, <td>, <caption>.
Հիմա եկեք փորձենք ստեղծել աղյուսակ: Որոշ դեպքերում ավելի հեշտ ընկալելու համար անհրաժեշտ է բովանդակությունը ներկայացնել աղյուսակի տեսքով: Աղյուսակը բաղկացած է տողերից և սյունակներից և նախատեսված է տվյալներին կառուցվածք սահմանելու համար: Որպես կանոն, աղյուսակներում տեղադրվում են նույն տեսակի տվյալները։ Որպես աղյուսակի օրինակ՝ դպրոցական մատյան։ Յուրաքանչյուր տողում աշակերտի անուն ազգանուն է լրացված: Սյունակներում ամսաթվեր են: Յուրաքանչյուր ազգանվան դիմաց կարող եք դնել դասի գնահատականը, որը տեղի է ունեցել կոնկրետ ամսաթվով: Ձեզ անհրաժեշտ է միայն իմանալ, թե ինչի համար են պատասխանատու հետևյալ թեգերը՝ <table>, <thead>, <tbody>, <tfoot>, <th>, <tr>, <td>, <caption>:
Самый важный тег для создания таблицы – это <table>. С этого и начинается всё. При встрече этого слова в разметке, браузер понимает, что дальше будет таблица.
Աղյուսակ ստեղծելու ամենակարևոր թեգը <table>-ն է։ Այս թեգից է սկսվում ամեն ինչ: Երբ այս բառը հանդիպում է նշագրման մեջ, բրաուզերը հասկանում է, որ դա աղյուսակ է:
В первую очередь таблица состоит из строк. Используйте парный тег <tr> для того, чтобы в таблице появились строки. «tr» расшифровывается как «table row» и переводится «ряд таблицы»․
Առաջին հերթին, աղյուսակը բաղկացած է տողերից: Աղյուսակում տողեր ավելացնելու համար օգտագործեք <tr> զույգ թեգը: «tr» նշանակում է «table row» և թարգմանվում է որպես «աղյուսակի տող»։
Теги до этого только создавали структуру, а данных мы еще не добавляли. Чтобы создать ячейку под данные, нужно использовать парный тег <td>. «td» расшифровывается как «table data» и переводится «данные таблицы».
Մինչ այդ թեգերը միայն ստեղծում էին կառուցվածքը, բայց մենք դեռ տվյալներ չենք ավելացրել։ Տվյալների համար վանդակներ ստեղծելու համար անհրաժեշտ է օգտագործել <td> զույգ թեգը: «td» նշանակում է «table data» և թարգմանվում է որպես «աղյուսակի տվյալներ»:
В нашей таблице 3 строки. Каждая строка содержит две ячейки. Эти ячейки состоят из двух столбцов.
Մեր աղյուսակն ունի 3 տող։ Յուրաքանչյուր տող բաղկացած է երկու վանդակից: Այդ վանդակները կազմված են 2 սյունակից:
Но в таком варианте заголовки ячеек ничем не будут отличаться ни внешне, ни по смыслу от обычных ячеек. Специально для заголовков ячеек или строк есть тег <th>. По отношению к ячейкам, обёрнутым тегом <th> используются дефолтные стили: текст становиться жирным и выравнивается по центру ячейки. Эти способы помогают отделить заголовки от других данных таблицы. Обернём заголовки в парный тег:
Բայց այս տարբերակում վանդակներիի վերնագրերը ոչ մի կերպ չեն տարբերվի ոչ արտաքինից, ոչ էլ իմաստով սովորական վանդակներից: Գոյություն ունի <th> թեգ հատուկ վանդակների կամ տողերի վերնագրերի համար:Այն վանդակների նկատմամբ, որոնք գտնվում են <th> թեգի ներսում օգտագործվում են սկզբնական ոճեր. տեքստը դառնում է հաստ և հավասարեցվում է վանդակի կենտրոնին: Այս մեթոդները օգնում են տարբերել վերնագրերը աղյուսակի այլ տվյալներից: Վերնագրերը տեղադրենք զույգ թեգի մեջ՝
Тег <thead> отвечает в данном случае за шапку таблицы. В этом теге могут быть размещены одна или несколько строк с заголовками таблицы. <thead> должен быть расположен в разметке сразу после открывающего <table> или после <caption>, но строго до <tbody> и <tfoot>.
<thead> թեգը այս դեպքում պատասխանատու է աղյուսակի վերնագրի համար: Այս թեգը կարող է պարունակել մեկ կամ մի քանի տող՝ աղյուսակի վերնագրերով: <thead>-ը նշագրման մեջ պետք է տեղադրվի անմիջապես <table>-ից հետո կամ <caption>-ից հետո, բայց խիստ <tbody>-ից և <tfoot>-ից առաջ:
Он предназначен для основной части таблицы. В него помещаются строки с данными. Можно использовать несколько <tbody> внутри таблицы, разделяя тем самым данные на отдельные блоки.
Այն նախատեսված է աղյուսակի հիմնական մասի համար։ Դրա մեջ տեղադրում են տվյալների տողեր: Դուք կարող եք օգտագործել բազմաթիվ <tbody>-ներ աղյուսակում, այդպիսով տվյալները բաժանելով առանձին բլոկների:
Тег <tfoot> необходим для строки «Итого» — некой строки с итогом данных таблицы. Таблица должна содержать в себе только один блок <tfoot>.
<tfoot> թեգը օգտագործվում է «Արդյունք» տողի համար, որը իրենից ներկայացնում է որոշակի տող՝ աղյուսակի ընդհանուր տվյալներով: Աղյուսակը պետք է պարունակի միայն մեկ <tfoot> բլոկ։
К примеру, если нужно подписать документ с определением или давать определение в виде текста, то можно использовать парный тег <caption>.
Օրինակ, եթե անհրաժեշտ է փաստաթուղթ ստորագրել սահմանումով կամ տալ սահմանում տեքստի տեսքով, ապա կարող եք օգտագործել <caption> զույգ թեգը։
Кроме того, при работе с таблицами вам могут пригодиться атрибуты colspan и rowspan. Два этих атрибута предназначены для соединения двух ячеек. Colspan необходим, чтобы объединить ячейку из 2 или более столбцов, а rowspan нужен для объединения ячейки из двух или более рядов.
Բացի այդ, աղյուսակների հետ աշխատելիս կարող են օգտակար լինել colspan և rowspan ատրիբուտները: Այս երկու ատրիբուտները նախատեսված են երկու վանդակները միմյանց միացնելու համար: Colspan-ն անհրաժեշտ է 2 կամ ավելի սյունակներից բաղկացած վանդակները միացնելու համար, իսկ rowspan-ը՝ 2 կամ ավելի տողերից բաղկացած վանդակները միավորելու համար:
Дополнительное задание
Լրացուցիչ առաջադրանք
Попробуйте воссоздать также как на картинке:
Փորձեք վերստեղծել ինչպես նկարում.
