Як створити HTML-сторінку: покрокова інструкція, технологія і рекомендації
Думаєте, як створити HTML-сторінку? Для цього потрібно витратити кілька годин, і ви будете знати основи HTML. А створити свою першу сторінку зможете за 5 хвилин.
HTML розшифровується як HyperText Markup Language. У перекладі це означає "мова гіпертекстової розмітки". Важливо розуміти, що HTML - це не мова програмування, а саме розмітки сайту.
Всі сучасні браузери вміють розпізнавати його. Потім вони відображають інформацію в зручному вигляді для користувача, як заздалегідь було задумано автором.
У цій мові використовуються спеціальні теги. Кожен тег виконує свою функцію. Їх дуже багато. В ідеалі потрібно вивчити всі. Але для початківця базових знань цілком достатньо.
основи HTML
Перед тим як створити HTML-сторінку, потрібно знати, з чого вона складається. У цій мові є два поняття: елемент і тег.
Для того щоб вказати, де цей елемент починається і закривається, використовуються відкриває і закриває тег. Виглядає це так.
<Відкриває тег> вміст </ закриває тег>
Як бачите, відкриває і закриває тег відрізняються тільки "/".
Весь HTML-документ являє собою набір цихелементів. Існують певні вимоги до структури документа. Весь вміст сторінки має перебувати між двома тегами <html> і </ html>. Коли ви будете писати код, візьміть собі за звичку відразу проставляти відкривається і закривається тег.
Також запам'ятайте, що структура мови HTML має свою ієрархію. Інакше вона називається вкладеність. Тег HTML є найголовнішим, оскільки всі інші знаходяться всередині його.
У HTML є два дочірніх елементи:
- <Head> ... </ head>;
- <Body> .. </ body>.
У блоці HEAD вказується різна службова інформація. Ця інформація в браузер не виводиться. Наприклад, вказівки для розробників, для будь-яких програм, для роботів і багато іншого.
Найголовніше - тут немає контенту.
У розділі BODY вказується зміст документа, яке буде відображено користувачеві.
Вчіться відразу робити відкриті і закриті теги, оскільки може бути і по 10 вкладених елементів. Крім цього, для зручності рекомендується вкладені теги робити з відступом. Наприклад, ось так.
<Html>
<Head>
</ Head>
<Body>
</ Body>
</ Html>
Так роблять, щоб рівні за значимістю теги булина одному рівні, а дочірні - "всередині". Так набагато зручніше для сприйняття і пошуку потрібного шматка коду. Інакше можна заплутатися. Але для економія місця саме теги head і body можна робити без відступів. Так надходять, щоб у всіх інших не було зайвого відступу. Все інше бажано відокремлювати.
Як створити просту сторінку на HTML
Для написання коду вам потрібен якийсь редактор. Їх дуже багато. Популярними є Notepad ++ і Adobe Dreamweaver. Також можна використовувати і блокнот.
Ось так виглядає редактор Notepad ++.
Це дуже зручний редактор і при цьому безкоштовний. Вищевказаний Adobe Dreamweaver є платним. Відмінність редакторів, призначених для написання коду HTML, від блокнота - в тому, що спеціальні теги підсвічуються. Якщо він не підсвітити, значить, ви написали неправильно.
Для того щоб підсвічування відповідала мови, її потрібно вказати в налаштуваннях.
Давайте розглянемо, як створити сторінку HTML в блокноті. Тобто закінчимо технічну частину і потім безпосередньо перейдемо до вивчення тегів.
Як створити веб-сторінку в блокноті HTML
Для початку відкрийте блокнот.
Потім наберіть в ньому те, що вказано на наступному скріншоті.
Звикайте писати руками, а не просто копіювати. Коли ви пишете руками, ви краще запам'ятовуєте всю базу тегів.
Після цього натисніть в меню "Зберегти файл" і вкажіть будь-яке ім'я файлу, але з розширенням .html.
Після цього файл можна відкривати в браузері і милуватися результатом. Тепер вам повинно бути зрозуміло, як створити веб-сторінку в блокноті HTML.
Всесвітній консорціум W3C
Існує така організація, як W3С, якарозробляє і впроваджує всі стандарти для інтернету. Всі браузери підкоряються цим стандартам і обробляють розмітки (коди) сторінок згідно з цими правилами.
На офіційному сайті розробників мови HTML можна знайти таблицю з усіма тегами та правилами їх використання. В рамках даної статті ми розглядаємо найосновніші.
Ви можете подумати, які можуть бути правила? Всі описані теги мають свою рекомендацію. Їх декілька:
- Необов'язковий тег.
- Заборонене.
- Порожній тег.
- застарілий
- Загублений.
Теги в HTML
Перед тим як створити HTML-сторінку, потрібно розібратися з тим, що повинно бути у службовій частині HEAD.
В області HEAD є як обов'язкові, так інеобов'язкові теги. До обов'язкового тегу відноситься заголовок. Він позначається <title> Заголовок </ title>. Він присвоюється всьому документу. І те, що ви бачите в результатах пошукової системи Google, - це тег title.
Перейдемо до розділу BODY. Існують елементи, які відображаються в браузері, а є і не відображаються. Наприклад, коментарі не відображаються користувачу. Їх можна використовувати для нотаток або ж для підказки іншим співробітникам, якщо ви працюєте в команді.
Позначається вони як <! - коментар ->
Все, що знаходиться між <!- і ->, розцінюється програмою саме так. Зверніть увагу, що не можна вкласти тег-коментар в інший тег-коментар. Оскільки як тільки ви відкриєте <! -, все, що йде далі, не буде відображено. Інформація буде не видна до тих пір, поки обробник не побачить закриває тег ->.
Приклад такої вкладеності:
<! - перший коментар <! - другий коментар -> продовження першого коментаря ->
Результатом в браузері буде наступне
продовження першого коментаря ->
А ось шматок <! - перший коментар <! - другий коментар -> НЕ буде видно. Другий відкривається тег <! - був проігнорований і сприйняли як простий текст.
Заголовки в тексті
Тема вказується не тільки в розділі HEAD за допомогою тега title. В контексті заголовок потрібно вказувати обов'язково. Оскільки тільки його побачить користувач.
Заголовки бувають різних рівнів. Таким чином створюється ієрархія в тексті. Рівносильно томів, главам, параграфами в книгах.
Буває всього 6 рівнів. Найголовніший заголовок позначається <h1> Заголовок </ h1>. З точки зору просування сторінки текст в тегах h1 і title повинен збігатися. Більш того, h1 з естетичної точки зору повинен бути тільки один. Але це не означає, що браузер не буде обробляти наступні h1. Їх можна зробити скільки завгодно, але це небажано.
Для підзаголовків використовують теги від h2 до h6. Вони так і - називаються заголовок першого, другого, третього, четвертого, п'ятого і шостого рівня. Так створюються вкладеність інформації та підрозділ на категорії.
Виглядає це ось так.
абзац
Основний текст в коді потрібно оформляти в тезі <p> ... </ P>. Він походить від слова "параграф". Кожен абзац потрібно оформляти тегом <p>, а не ліпити все в одну купу. Звичайний перенесення рядки не буде оброблений. Все виведеться в один рядок. Для переносів потрібно використовувати тег <br>.
Зверніть увагу, що тег перенесення не закривається. Він одиночний.
Розглянемо на прикладі віршів.
У різних тегів, крім свого "імені", є ісвій атрибут. Наприклад, у тега абзацу є атрибут "вирівнювання", який позначається align. Він може приймати значення left, right, center. Тобто, вирівнювання по лівому або правому краю або по центру.
Використання посилань
Напевно, ви вже подумали: а як створити HTML-сторінку з посиланнями? Складного в цьому нічого немає. Створити посилання сторінки HTML дуже просто. Для цього є спеціальний тег <a>. У нього є свої обов'язкові атрибути. Правильна посилання виглядає ось так:
<a href="адрес страніци"> текст посилання </a>
Якщо не вказати адресу і текст, то дане посилання буде марною або невидимою для користувача.
висновок
Існує дуже багато тегів, і у кожного є свій набір атрибутів. Прочитавши цю інформацію, ви повинні були зрозуміти, як створити веб-сторінку HTML.
Для того щоб розширити свої знання в ційобласті, потрібно читати додаткову літературу і користуватися офіційним довідником тегів по HTML, який розташований на сайті W3C. Якщо не користуватися періодично оновлюється довідником авторів мови, вам складно буде стати професіоналом в цій області.
</ P>
