Dobri-porady.pp.ua
Поради для маленьких і великих

HTML-команди для створення сайтів

Абревіатура HTML розшифровується як HyperText Markup Language. HTML - це не мова програмування, це мова розмітки сайту.

Всі браузери вміють перетворювати цю розмітку в зручний вигляд для користувача.

У цьому мові використовуються спеціальні команди, які називаються тегами. У кожного тега своя функція. Існує величезна кількість тегів. В ідеалі потрібно вивчити всі. Але для початківця розробника базових знань цілком достатньо.

Основні команди HTML

Список HTML-команд дуже великий. Але основних не так багато. Для того щоб почати писати код, вам потрібен редактор. Можна використовувати "Блокнот". Рекомендується використовувати Notepad . Він виглядає ось так.

html команды для создания сайтов

Перевага в тому, що в спеціальних редакторах теги підсвічуються певним кольором, залежно від категорії. Команди для створення HTML сайту в блокноті або будь-який інший програмі одні і ті ж. Мова використовується скрізь однаковий. Середовище розробки - це лише інструмент.

У мові HTML є закриваються і незакрывающиеся теги. Також в цій мові існує поняття вкладеності. Кожен об'єкт в коді - це елемент. У елемента є відкриваючий тег, що закриває і вміст. Більш того, у тега є свої додаткові атрибути зі своїми значеннями.

На малюнку видно два тега і . Запам'ятайте, що відкриваючий і закриваючий пишуться однаково, але відрізняються тільки "/". Якщо тег не закрити, то обробник буде все інше вважати продовженням саме цього елемента. Це дуже важливо. Особливо в посиланнях. Їх ми розглянемо трохи далі.

Тег обов'язковий. Його завжди потрібно писати. А ось закривати не обов'язково. За стандартами треба, але якщо не закрити, працювати все одно буде.

Є й інші основні теги: head і body.

команды для создания сайта html в блокноте

Ці HTML-команди є каркасом для сторінки. Вони обов'язкові. Вони також закриваються.

Назва тегів відповідає змістом. Head - голова. У цьому розділі вказується службова і важлива інформація, яку не видно. Розділ body - тіло документа. Тут вміст, який відображається користувачу. Намагайтеся закривати теги відразу, щоб потім не було плутанини.

html команды

У службовому розділі вказується:

  • заголовок документа;
  • файли стилів;
  • файли скриптів;
  • мета-теги;
  • вказівки для пошукових систем;
  • вказівки для роботів;
  • будь-яка інша інформація, яка може використовуватися програмістами, але не користувачам.
  • Файл стилів підключається ось так:

    Файл скриптів наступним чином:

    Текст обов'язково повинен бути заголовок. Його вказуємо ось так:

    Заголовок сторінки

    Цей текст буде відображатись в назві вкладки браузера. Також цей заголовок виводиться в результаті видачі пошукової системи.

    Теги для оформлення тексту

    Текст потрібно розміщувати в тезі абзацу. Він позначається як

    Текст

    . Для тексту також можна використовувати Рядок.

    Оформлювати текст можна, як і в "Ворді":

  • курсив
  • жирний текст
  • перекреслений текст
  • підкреслений текст
  • Текст можна оформляти стилями. Їх ми розглянемо в кінці, після огляду інших елементів.

    Використання заголовків

    Є й інші важливі HTML-команди. Для створення сайтів обов'язково використовують заголовки. Вони вказуються за допомогою тега Заголовок першого рівня. Існують рівні від 1 до 6. Важливо розуміти, що в заголовках повинна бути вкладеність.

    Приклад на малюнку.

    основные команды html

    Майте на увазі, що рекомендується використовувати тільки один заголовок h1. При цьому він повинен збігатися із тегом . Зрозуміло, ви можете вказати 200 заголовків h1, але тоді до вас будуть застосовані санкції з боку пошукових систем.

    Використання зображень

    Зображення є невід'ємною частиною веб-сторінок. На прикладі показано, як можна вставити якусь фотографію.

    html команды для сайта

    Як бачите, на прикладі детально показано, що і як називається.

    Використання посилань

    Якщо ви вчите HTML-команди, то знати тег-посилання ви просто зобов'язані. Це один з найголовніших елементів, який становить Всесвітню павутину.

    Посилання позначається тегом . Але його обов'язково треба закривати. Крім цього, у цього елемента є обов'язковий атрибут href, у якому вказується адреса посилання.

    html команды

    У прикладі, наведеному вище, видно, що замість тексту посилання вказана картинка. Тобто можна ставити як текст, так і зображення.

    Посилання можна форматувати за допомогою класів стилів або звичайних тегів (курсив, жирний, підкреслення і закреслення).

    Використання таблиць

    Таблиці використовуються також дуже часто. Спочатку вони призначалися для представлення інформації в зручному вигляді. Але потім верстальники їх використовували для розміщення різних елементів сторінки.

    Таблиця створюється наступним чином:

    Текст коміркиТекст комірки
    Текст коміркиТекст комірки

    Атрибут width вказує ширину таблиці. Вона може бути у відсотках або пікселях. Border вказує товщину рамки.

    Структура зазначається наступним чином. Тег tr є рядком. Тег td осередком. А все разом - це таблиця.

    список html команд

    Таблицю можна вирівнювати. Для цього використовується атрибут align, який може приймати три значення: Left, Center, Right. Приклад використання вказано нижче.

    html команды для таблицы

    Ці HTML-команди (ширина та вирівнювання підходять і для інших елементів. Товщина рамки також вказується зображень.

    Використання списків

    Використовуючи HTML-команди, можна створити різні види списків. Практично точно так само, як і в редакторі Word.

    У мові Html існують впорядковані і невпорядковані списки (марковані). Приклад такого списку.

  • Перше
  • Друге
  • Третє
  • Результат буде такий:

  • Перше
  • Друге
  • Третє
  • Тип списку

    Код в мові HTML

    У вигляді кола


  • ...

  • У вигляді кола


  • ...

  • З квадратними маркерами


  • ...

  • Впорядковані списки створюються точно так само, але тільки замість , використовуємо тег .

    Тут також можна задати тип виводу списку:

  • "1" - арабські числа 1, 2, 3 ...
  • "A" - заголовні букви A, B, C ...
  • "a" - рядкові букви a, b, c ...
  • "I" - великі римські числа I, II, III ...
  • "i" - маленькі римські числа i, ii, iii ...
  • Стандартно виводяться арабські цифри.

    Оскільки це нумеровані списки, у них є атрибут start, в якому вказується початкова значення списку. Наприклад, можна виводити список починаючи з 10-го чи 20-го числа.

    Використання стилів

    HTML-команди для сайту досить різноманітні, але всі вони підпорядковуються стилям. Стилі можна вказувати у вигляді файлу в розділі head: або прописати відразу готовий стиль.

    Зверніть увагу, що між цими визначеннями стилів є різниця. Файл стилів можна вказувати у всіх сторінках сайту. Як тільки ви внесете в нього зміни, то це оновлення торкнеться всього сайту в цілому. Якщо ви вкажете стилі на конкретній сторінці, то зміни та використання цих класів буде тільки всередині цього файлу. За межі нього ваші налаштування не вийдуть.

    Уявіть, що у вас 20 сторінок HTML і ви вирішили зробити заголовок на 2 пікселя більше. Якщо у вас все в файлі стилів, то зміну потрібно внести лише там. Якщо скрізь індивідуально, то доведеться оновлювати всі 20 сторінок.

    Вказувати лише для однієї сторінки можна наступним чином.

    html команды для стилей

    Даний спосіб використовувати не рекомендується.