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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Файл стилів підключається ось так:

Відео: HTML для початківців - Урок №1 "Основні теги. Створення каркаса сторінки"

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

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

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

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

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

текст

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

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

• курсив
• жирний текст
• перекреслений текст
• підкреслений текст

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

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

Є й інші важливі HTML-команди. Для створення сайтів обов`язково використовують заголовки. Вони вказуються за допомогою тега

Тема першого рівня

. Існують рівні від 1 до 6. Важливо розуміти, що в заголовках повинна бути вкладеність.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Відео: Створення html сайту в блокноті

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

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

Ці 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 сторінок.

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

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

Увага, тільки СЬОГОДНІ!