Теги HTML
Теги (дескриптори) у HTML – це спеціальні елементи розмітки, що визначають, як даний документ HTML має інтерпретуватися програмою перегляду інформації – браузером. Кожний тег описує посилання на якийсь об`єкт з
об`єктної моделі браузера.
Теги HTML бувають одно- і двокомандні.
Однокомандні теги зазвичай використовуються для зміни вигляду виведеної на екран інформації. Вони задаються в такому вигляді:
де команда – команда HTML;
атрибут=значення – задання конкретних значень параметрам (атрибутам) команди (не є обов`язковими);
текст – текст, що виводиться на екран тільки для читання у вигляді, обумовленому командою та її атрибутами
Двокомандні теги мають такий синтаксис:
де / – використовується у випадку, коли тег є останнім (закриваючим) у блоці тегів.
| Основні теги Теги заголовку Атрибути тіла документа Теги фізичного форматування тексту Теги логічного форматування тексту Якірні теги та гіперпосилання Графичі забраження і зображення-карти Таблиці в HTML Фрейми Форми (формуляри) | |
| Основні теги – теги для відкриття/закриття документів і їхніх частин (структурні теги) | |
| Початок і кінець документа; вказує програмі перегляду сторінок що це HTML документ | |
| Заголовок; визначає місце, де поміщується різна інформація, яка не відображається в тілі документа. Тут розташовується тег назви документа та теги для пошукових машин | Тіло документа; визначає видиму частину документа |
| Теги заголовку та метатеги. | |
| Поміщує назву документа, що відображається у заголовку вікна | |
| або | Метатеги призначені для управління документа і не опрацьовують корисний текст документа |
| При завантаженні документа браузер буде брати останню версію, а не версію кеша | |
| Для визначення браузером кодування веб-сторінки | |
| Для примусового перезавантаження або автоматичного завантаження будь-якого документа | |
| Для управління кешуванням | |
| Для визначення вікна поточної сторінки | |
| Для зазначення імені автора і додаткової інформації про нього | |
| Для зазначення відомостей щодо авторських прав | |
| Для зазначення ключових слів і термінів. Призначений для пошукових систем (індексування) (максимум – 1000 символів) | |
| Для короткого опису сторінки. Призначений для пошукових систем (індексування) (максимум – 200 символів) | |
| Атрибути тіла документа | |
| Встановлює колір фону документа, використовуючи значення кольору у вигляді RRGGBB, наприклад: FF0000 – червоний колір | |
| Встановлює колір тексту документа, використовуючи значення кольору у вигляді RRGGBB, наприклад: 000000 – чорний колір | |
| Встановлює колір гіперпосилань, використовуючи значення кольору у вигляді RRGGBB, наприклад: 00FF00 – зелений колір | |
| Встановлює колір гіперпосилань, на яких ви вже побували, використовуючи значення кольору у вигляді RRGGBB, наприклад: 333333 – сірий колір | |
| Встановлює колір гіперпосилань при натисканні | |
| Теги фізичного форматування тексту | |
| Створює новий абзац | |
| Атрибут і параметри | Значення |
|---|---|
| align=”left” | – вирівнювання по лівому краю |
| align=”right” | – вирівнювання по правому краю |
| align=”center” | – вирівнювання по центру |
| Атрибути і параметри | Значення |
|---|---|
| face=”…” | – задає ім`я шрифту |
| size=”…” | – задає розмір шрифту в межах від 1 до 7 (за замовчуванням розмір дорівнює 3) |
| color=”…” | – задає колір шрифту |
| Атрибути і параметри | Значення |
|---|---|
| type=A|a|I|i|1 | – задає вид нумерації |
| start=n | – задає число, з якого починається відлік |
| Атрибути і параметри | Значення |
|---|---|
| type=disk|circle|square | – визначає зовнішній вигляд маркера; за замовчуванням (disk), круглий (circle) чи квадратний (square) |
| Атрибути і параметри | Значення |
|---|---|
| target=”_Blank” | Відкриття документа в новому вікні |
| target=”_Top” | Відкриття документа в поточному вікні |
| target=”_Parent” | Відкриття документа в батьківському фреймі |
| target=”_Self” | Відкриття документа в поточному фреймі |
| При використанні фреймів і вкладених фреймів значенням може виступати ім’я фрейма або вкладеної сітки фреймів, прицьому сторінка відкриється у вказаній частині вікна |
| Атрибути і параметри | Значення |
|---|---|
| alt=”текст” | Містить текстовий опис, що за замовчуванням відображаеться під картункою |
| align=”bottom” | Вертикальне вирівнювання картинки – притиснути картинку донизу |
| align=”top” | Вертикальне вирівнювання картинки – притиснути картинку догори |
| align=”middle” | Вертикальне вирівнювання картинки – розташувати картинку посередені |
| align=”left” | Горизонтальне вирівнювання картинки – притиснути картинку вліво |
| align=”right” | Горизонтальне вирівнювання картинки – притиснути картинку вправо |
| align=”center” | Горизонтальне вирівнювання картинки – розташувати картинку посередені |
| border=”…” | Встановлює товщину рамки навколо зображення в пікселях (за замовчуванням 1) |
| width=”…” | Задає ширину картинки в пікселах |
| height=”…” | Задає висоту картинки в пікселах |
| vspase=”…” | Встановлює поля зверху і знизу від картинки |
| hspase=”…” | Встановлює поля з боків від картинки |
| Атрибути і параметри | Значення |
|---|---|
| size=”…” | Встановлює висоту (товщину) лінії в пікселях |
| width=”…” | Встановлює ширину лінії в пікселях або відсотках |
| noshade | Створює лінію без тіні |
| color=”…” | Задає лінії певний колір в значенні RRGGBB |
| Атрибути і параметри | Значення |
|---|---|
| shape=”…” | Форма області: rect-прямокутник; circle-коло; poly-багатокутник |
| href=”url” | Посилання при клацанні на області мишею |
| nohref | Задання неактивної області (при клацанні на ній мишею переходу за посиланням не відбувається) |
| coords=”…” | Задає координати області: “x1, y1, x2, y2” – для прямокутника; “x, y, r” – для кола; “x1, y1, x2, y2,…, xn, yn, x1, y1” – для багатокутника |
| Атрибути і параметри | Значення |
|---|---|
| width=”…” | Задає ширину таблиці в пікселах або відсотках |
| height=”…” | Задає висоту рядків в таблиці в пікселах або відсотках |
| valign=”top” | Вертикальне вирівнювання тексту – притиснути вміст догори |
| valign=”bottom” | Вертикальне вирівнювання тексту – притиснути вниз |
| valign=”middle” | Вертикальне вирівнювання тексту – розмістити по центру |
| align=”left” | Горизонтальне вирівнювання тексту – притиснути вліво |
| align=”right” | Горизонтальне вирівнювання тексту – притиснути праворуч |
| align=”center” | Горизонтальне вирівнювання тексту – розмістити по центру |
| cellpadding=”…” | Визначає відстань між границею комірки та її вмістом у пікселах |
| cellspacing=”…” | Визначає відстань між комірками у пікселах |
| bgcolor=”…” | Встановлює колір фону (у форматі RGB) |
| background=”url” | Встановлює фонове граічне зображення (адреса) |
| bordercolor=”…” | Встановлює колір рамки (у форматі RGB) |
| Вищенаведені атрибути і параметри застосовуються також і для тегів | |
| Атрибути і параметри | Значення |
|---|---|
| colspan=”…” | Встановлює число комірок, які повинні бути об’єднані по горизонталі |
| rowspan=”…” | Встановлює число комірок, які повинні бути об’єднані по вертикалі |
| Атрибути і параметри | Значення |
|---|---|
| colspan=”…” | Встановлює число комірок, які повинні бути об’єднані по горизонталі |
| rowspan=”…” | Встановлює число комірок, які повинні бути об’єднані по вертикалі |
| Атрибути і параметри | Значення |
|---|---|
| rows=[рядки] | При горизонтальному розташуванні фреймів |
| cols=[стовпці] | При вертикальному розташуванні фреймів |
| border= | Товщина лілій границі |
| frameborder= | Товщина розмежувальної лінії |
| Атрибути і параметри | Значення (усі параметри необов`язкові) |
|---|---|
| scrolling= | Наявність смуг прокручування: yes – смуги прокручування присутні, no – смуги відсутні, auto – смуги присутні тільки в тому випадку, якщо домумент не міститься у фреймі |
| noresize= | Користувач не може змінювати розмір фрейму |
| name= | Задає ім`я фрейму, використовується для того, щоб можна було оновлювати інформацію в одному фреймі, активізуючи гіпертекстове посилання в іншому |
| marginwidth= | Ширина бічних розділювальних смуг між фреймами |
| marginheight= | Ширина верхніх і нижніх розділювальних смуг |
| target=”…” | Задає способи виведення фрейму: _blank, _self, _parent, _top (див. розділ Якірні теги та гіперпосилання) |
| Атрибути і параметри | Значення |
|---|---|
| action=”…” | Визначає, де знаходиться оброблювач форми |
| method=”…” | Визначає, яким чином (за допомогою якого методу протоколу передачі гіпертексту) дані з форми будуть передані до оброблювача. Допустимі значення: method=post і method=get, за замовчуванням передбачається останнє |
| enctype=”…” | Визначає, яким чином дані з форми будуть закодовані для передачі до оброблювача, за замовчуванням – enctype=application/x-www-form-urlencoded |
Елементи управління формою
| Тип | Опис |
|---|---|
| checkbox | Керуючий елемент – перемикач (прапорець перевірки) |
| hidden | Прихований текст, використовують для обміну даними між формами |
| password | Рядок вводу пароля |
| reset | Кнопка “Reset” |
| submit | Кнопка “Submit” |
| text | Рядок для введення тексту |
| Опції | Значення |
|---|---|
| type | Дозволяє вказувати, який саме тип керуючого елемента описується. Кожен тип має своє унікальне ім`я |
| name | Вказує ім`я змінної, у якій система зберігатиме отримане значення. Ім`я не має містити пробілів |
| value | Дозволяє визначити текст, що поміщається в рядок введення при відображенні форми (необов`язкова) |
| size | Визначає максимальне число символів, які може побачити при введенні користувач. Ця опція працює разом з maxlength, яка визначає кількість символів, що вводяться користувачем |
Як зробити відступ в html
Є різні способи установки HTML відступів перед текстом. Але для сумісності з різними браузерами і доступності, ми обговоримо найпопулярніші методи:
- Рекомендований спосіб в CSS і HTML
- Рекомендований метод в HTML
- альтернативний метод
Рекомендований спосіб в CSS і HTML
Щоб зробити відступ перед текстом або абзацом, краще використовувати CSS . Нижче наведені приклади того, як зміщувати написи за допомогою каскадних таблиць стилів. Вставте кожен з наведених прикладів коду між тегами HTML .
Наступний код створює CSS-клас «tab», який відсуває символи і абзац на 40 пікселів від лівого краю:
Вставивши наведений вище код в розділ, можна виконати його в будь-якому місці, додаючи його в теги абзацу (
), Як показано нижче:
Якщо ви плануєте застосовувати цей стиль на декількох сторінках, краще створити файл .css і зв’язати його з усіма веб-сторінками. Для відступу в HTML, додайте наступний рядок між тегами і створіть посилання на файл. Ми назвали його «basic.css «:
Як тільки файл каскадних таблиць стилів створений, відкрийте його для редагування і додайте той же код, крім тега і міток коментування, як показано нижче:
Коли ці кроки виконані, можна табулювати будь-який текст, використовуючи той же самий
Є й інші варіанти. Наприклад, якщо потрібно змістити тільки перший рядок абзацу, то застосуєте наведений нижче код:
Підказка: Можна задавати величину відступу в процентах. Наприклад, замість зсуву на 40 пікселів, можна зрушити рядки на 5% від поточного положення. Можна використовувати і довгий пробіл при визначенні потрібної ширини.
Бонусна підказка як зробити відступ в HTML: Щоб поміняти HTML відступ зліва на відступ справа, змініть властивість margin-left на margin-right .
Рекомендований метод в HTML
Можна досягти тих же результатів використовуючи стиль, вбудований в HTML- код . Хоча застосування CSS робить управління численними веб-сторінками легше, якщо використовувати стиль тільки один раз:
Тут весь текст абзацу зміщений на 40 пікселів вліво. інші теги
А тут тільки перший рядок в абзаці зміщується на 40 пікселів зліва. Ніякі додаткові рядки зміщені НЕ будуть.
Підказка: можна задати відступ за допомогою відсотків. Наприклад, замість зсуву на 40 пікселів, можна замінити значення на 5%, щоб зрушити текст на 5%.
Бонусна карта: Можна поміняти відступ зліва на відступ справа, змінивши властивість margin-left на margin-right.
альтернативний метод
Інший часто вживаний метод, що дозволяє створити HTML відступ тексту — за допомогою, як показано нижче.
Хоча це набагато легше, але є проблеми сумісності, які можуть виникнути через застосування цього рішення. Даний тег призначений для цитування, а не зсуву:
HTML: Абзац і новий рядок
абзаци
Будь-який текст має свою унікальну структуру: книги розділені на частини, розділи і глави, газети і журнали має окремі рубрики та підзаголовки, які, в свою чергу, включають фрагменти тексту, також мають власну структуру: абзаци, відступи тощо.
Текст, що розміщується на веб-сторінках, не є винятком, він також повинен мати логічний, зрозумілу кожному користувачеві, структуру. Адже від того, наскільки зручно і просто буде сприйматися текст на сторінці, залежить багато чого: перш за все, яке враження складеться у відвідувача про вашому сайті.
Для створення таких структурних одиниць тексту, як абзаци, в HTML-документах використовується тег
, який розділяє фрагменти тексту вертикальним відступом (до і після абзацу додається порожній рядок).
Примітка: за замовчуванням відстань між абзацами одно 1em (em — це одиниця виміру рівна висоті шрифту), тобто відстань між абзацами безпосередньо залежить від розміру шрифту.
Для зміни відступів між абзацами, без зміни розміру шрифту, можна скористатися CSS властивість margin.
Не забувайте про закриває тег
Більшість браузерів будуть відображати HTML документ коректно, навіть якщо ви забули про закриває тег.
Цей код буде працювати в більшості браузерів, але не покладайтеся на це. Забутий закриває тег може привести до непередбачених результатів або помилок.
червоний рядок
Що таке новий рядок? Згідно з визначенням, це початкова рядок абзацу, яку раніше виділяли червоним кольором (звідки і пішла назва). До того, як було винайдено книгодрукування, книги писали від руки — главу або частина тексту, перше слово або букву писали червоною фарбою. Так з’явилося поняття «писати з нового рядка» — це означає початок нової думки, глави або частини.
Однак при створенні веб-сторінок оформлення нового рядка використовується досить рідко, незважаючи на те, що вона дозволяє з набагато більшою зручністю сприймати текст у візуальному плані, що для традиційного читача досить важливо — не всім зручно читати електронний варіант тексту.
Для додавання нового рядка до ваших абзаців потрібно скористатися CSS властивість text-indent, яке дозволяє поставити відступ перед першим реченням:
У прикладі, наведеному вище, перший рядок кожного абзацу на сторінці буде починатися з відступу в 25px. Приклад, розташований нижче, демонструє, як можна задати новий рядок тільки для певного абзацу на сторінці.
Примітка: не обов’язково встановлювати відступ розміром в 25px, ви можете вибрати оптимальний розмір відступу самі, також за допомогою властивості text-indent можливо зробити виступаючу над рештою тексту рядок, для цього потрібно задати негативне значення для властивості (наприклад: -30px).
Як в html зробити відступ тексту?
Вітаю, дорогі друзі!
Розглянемо кілька способів як зробити відступ тексту в HTML.
Навігація по статті:
- Відступ тексту в HTML за допомогою margin
- Відступ тексту в HTML за допомогою padding
- Відступ тексту html за допомогою нерозривного пробілу
- Відступ тексту в HTML за допомогою text-indent
- Що робити якщо відступ не народжуються?
Відступ тексту в HTML за допомогою margin
Коли ви розміщуєте текст на сайті він знаходиться в якомусь тезі. Це може бути тег блоку
, секції і так далі.
Ми можемо зробити відступ для тега в якому знаходиться текст за допомогою CSS властивості margin.
Робиться це так:
Тут ми скористалися атрибутом style і в ньому вказали потрібне CSS властивість, задавши тексту відступ зліва 20px. Так само ми можемо поставити для нашого блоку або іншого тега клас і потім в окремому CSS файлі дописати для нього стилі.
За допомогою цієї властивості ми можемо поставити різні відступи тексту в HTML:
- margin-left — відстань зліва
- margin-right — відстань справа
- margin-top — відстань зверху
- margin-bottom — відстань від низу
Так само можна одночасно в одному рядку задати однакові або різні відступи з усіх сторін:
- margin: 10px; — робимо відступ тексту 10px з усіх боків
- margin: 15px 30px; — задаємо відступ срерху і знизу по 15px, а праворуч і ліворуч по 30px
- margin: 15px 25px 35px 45px; — відступ зверху 15px, зліва — 25px, знизу — 30px, праворуч — 45px
Замість пікселів ви так само можете задавати%, em, rem і інші одиниці.
Відступ тексту в HTML за допомогою padding
Цей спосіб дуже схожий на попередній, але якщо margin ставив відступ до тексту як би зовні тега, то padding задаватиме відступ всередині.