Всесвітня павутина знає багато мов і кодується кількома мовами. Тим не менш, єдиною мовою, яку можна знайти всюди з моменту винаходу веб-сторінок, є мова розмітки гіпертексту, більш відома як HTML. Як випливає з назви, HTML - це не програмування, а мова розмітки. Розмітки інтерпретуються браузерами для візуалізації контенту на веб-сайтах. У своїй простій формі HTML використовується для форматування тексту, вбудовування медіа-файлів та організації контенту на веб-сторінці. Іншими словами, HTML описує веб-сторінки, і на основі цього опису браузер створює «зображення».
Завдяки безкоштовним розробникам веб-сайтів більше нікому не потрібно возитися з кодуванням HTML. Однак іноді HTML-теги можуть знадобитися, наприклад, для швидкої зміни веб-сайту, додавання гіпертексту в коментарі або форматування тексту для повідомлення на форумі. У цій статті я хочу показати вам декілька випадкових, але певно корисних і простих тегів для щоденного використання.
Перш ніж ми почнемо, дозвольте мені познайомити вас з деякими основними правилами, які, як ми сподіваємося, полегшать розуміння тегів HTML:
- HTML використовує теги розмітки, які містяться в кутових дужках, наприклад: <html>
- Теги, які виглядають як у прикладі вище, називаються початковими тегами. У якийсь момент за кожним початковим тегом повинен слідувати кінцевий тег, наприклад: </ html>
- Деякі теги не описують контент. Однак, щоб відповідати чинним стандартам, вони все ще повинні бути припинені. Отже, вони об'єднують початковий і кінцевий тег, наприклад: <br />
Форматування тексту
HTML-теги зазвичай прості. Теги для виділення тексту жирним шрифтом, курсивом або підкресленими є похідними від відповідного слова.
Ввід: < b > жирний </b >
Вихід: жирний
Ввід: < я > курсив </I >
Вивід: курсив
Ввід: < u > підкреслений </u >
Вивід: підкреслить
Ввід: < s > перекреслити текст </s >
Вихід: закреслити текст
Створення гіпертексту
Прості URL-адреси можуть виглядати досить негарно. Додавання гіперпосилання до тексту, тобто створення гіпертексту, набагато більш стильне і економить місце, особливо якщо посилання дуже довге.
Вхідні дані: < a href = veloper//www.. com.ua title = Оброблено veloper >
</а > Висновок:
Як бачите, цей HTML-тег трохи складніший, тому давайте розглянемо його докладніше. Фактичний тег - < a >, а додаткові елементи - це атрибути, які визначають додаткові характеристики. Атрибут href = вказує посилання, а title = визначає підказку при наведенні курсора миші. Обов'язково використовуйте лапки, щоб укласти посилання і заголовок, інакше ви можете отримати непрацююче посилання.
Вбудовування зображень
Картина може сказати більше тисячі слів. Ми повинні використовувати їх частіше. І ось як ви можете вручну вставити один, використовуючи HTML:
Вхідні дані: <img src = ”http://www.yourlinkhere.com/Smiley.png” alt = ”smiley” />
Выход: :
Давайте також проаналізуємо цей тег. Знову ж таки, фактичним тегом є < img >, а обов'язковими атрибутами є src = і alt =. Перший вказує на місце розташування зображення, тобто його URL, а другий надає альтернативний текст, який відображається в разі, якщо відображення зображень заблоковано або посилання не працює. Знову ж таки, використовуйте лапки, щоб уникнути битих посилань.
Тег < img > також є прикладом теґу, який не потрібно закінчувати і, отже, закривається з дефісом у початковому теґі, тобто < img/>, а не < img >.
Перерви і параграфи
Щоб створити структурований текст, вам слід використовувати розриви рядків та абзаци. І ось теги, які вам потрібно знати:
Вхід: < br/>
Вивід: Цей тег створює розрив рядка. Зауважте, що це ще один тег, який об'єднує початковий і кінцевий тег в одному.
Ввід: < p > Текст у вашому абзаці. </Р
> Вивід: на відміну від попереднього тегу, тег абзацу має стандартний початковий і кінцевий тег. Текст між двома тегами укладено в абзац, що означає порожній рядок до і після.
Списки
По суті, існує два типи списків: впорядковані і неупорядковані списки, більш відомі як нумеровані і марковані списки. Щоб створити будь-який з них, вам потрібно знати два різних теги, але всього три. Давайте спочатку подивимося на приклади:
Вхідні дані:
< Ол >
< li > Перший пункт </li >
< li > Пункт другий </li
> </Ол >
Вихід:
- Перший пункт
- Другий пункт
Вхідні дані:
< UL >
< li > Перший пункт </li >
< li > Пункт другий </li
> </UL >
Вихід:
- Перший пункт
- Другий пункт
Щоб створити впорядкований список, скористайтеся теґом < ol >, а потім вставте тег < ul >. В обох випадках тег < li > використовується для визначення елемента у списку.
Тепер, коли ви побачили, наскільки простий і логічний HTML, ви, можливо, захочете піти далі самих основ і дізнатися трохи більше. Для більшої кількості підказок HTML перевірте ці статті:
- 5 кроків до розуміння базового HTML-коду
- 5 порад щодо HTML, щоб створити безкоштовний сайт з швидким завантаженням
- 7 крутих HTML-ефектів, які будь-хто може додати на свій сайт
Чи відчуваєте ви себе більш впевнено у використанні тегів HTML зараз? Якщо ви раніше регулярно займалися ручним кодуванням, які теги, на вашу думку, відсутні?
Зображення надано: kentoh
