Інтернет Windows Android
Розгорнути
Головна ›

Основні конструкції та використання мови html. Навчальний посібник "Створення Web-сторінок засобами мови HTML"

HTML - мова розмітки гіпертексту, який зробив інтернет таким, яким ми його знаємо і любимо. Саме завдяки цій чудовій інструменту сайти виглядають красиво і сучасно, а також забезпечується зручність їх використання. Мова HTML просто компонує елементи веб-сторінки в зручний для користувача варіант. Його робота порівнянна з тим, що роблять типу MS Word або OpenOffice. Вони перетворюють безлику масу букв в документ, в якому є абзаци, жирний текст, курсив, таблиці і навіть зображення. Приблизно те ж саме робить мову HTML, з тією лише різницею, що його документи відображаються в браузері, так і можливості цього інструменту набагато ширше, ніж у текстового редактора. Для розмітки використовуються теги - спеціальні команди, що описують структуру веб-сторінки. Вони укладені в кутові дужки -<тег>, Щоб браузер міг відрізнити їх від загальної маси тексту. Далі ми розглянемо основи HTML для початківців.

візуальні редактори

Новачки, тільки ступили на шлях вивчення HTML, часто починають свою роботу з програм, що дозволяють створювати сайти без будь-яких знань. У них можна просто розташувати елементи на екрані так, як вони будуть відображатися в браузері. Здавалося б, ось він - джерело вічної благодаті, що дозволяє позбутися від більшості веб-розробників. Але не все так просто, так як у візуальних редакторів є маса недоліків, які унеможливлюють їх використання в серйозних проектах.

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

Теги

Як згадувалося вище, теги описують браузеру структуру веб-сторінки. Більшість з них мають відкриває і закриває тег, але далеко не все. наприклад, ..., Де замість точок знаходиться вміст. Перший з них показує, де починається тег, а другий закриває його. Всередині можуть перебувати інші елементи розмітки сторінки, вони можуть вкладатися один в одного подібно матрьошці. Тут важливо своєчасно закривати теги, щоб сторінка відображалася коректно.

Зустрічаються також поодинокі теги, які не потрібно закривати. У них вміст знаходиться усередині, так само як і може бути прописаний для більшості HTML-тегів і задає властивості елемента. Позначається він в відкриваючому тезі і виглядає приблизно так: атрибут \u003d "...», де замість точок знаходиться значення атрибута. Знання тегів є першим і найважливішим кроком для освоєння HTML. Основи цього мистецтва також мають на увазі розуміння структури веб-сторінки.

структура документа

Кожен документ HTML має відповідне розширення, наприклад, Index.html. Так браузер зможе зрозуміти, з чим він має справу, і правильно відобразить сторінку. Всі файли, які використовуються для створення сайту, бажано зберігати в одній директорії, що в подальшому істотно полегшить вам життя. Основи мови розмітки гіпертексту HTML припускають чітке розуміння структури документа. Починається він з тега, Який повідомляє браузеру версію HTML, яка використовується в цьому документі. На даний момент актуальна п'ята версія мови, так що тут не потрібно нічого вигадувати, можна сміливо вставляти наведений вище тег в початок будь-якої сторінки.

Потім йдуть основні парні структури, складові «скелет» сайту. Перший тег, в який вкладено всі інші - .... Все, що знаходиться за його межами, що не розпізнається браузером як веб-сторінка, так що він відкриває документ і закриває його. Цей тег є обов'язковим для будь-якого документа. У ньому також містяться ще кілька обов'язкових тегів, які будуть розглянуті нижче.

Head

усередині тега ... міститься інформація технічного характеру, яка не буде відображатися на сторінці, але, тим не менш, є важливою частиною документа HTML. Основи сайту закладаються саме в цьому місці, тут вибирається кодування і вводиться назва сторінки. Воно міститься всередині обов'язкового тега .... Показує назви у верхній частині браузера, де також можна розмістити невелику іконку, що характеризує вміст сторінки. Бажано відразу вказати кодування документа для його коректного відображення. Це можна зробити за допомогою тега . Метатеги надають дані про структуру сторінки і зазвичай розташовуються усередині head.

Link

Знання основ HTML також передбачає використання каскадних стилів оформлення, або css. У них задаються властивості елементів, які будуть відображені на сторінці. Сучасний підхід до цього завдання передбачає винесення таких характеристик, як колір, висота і місце розташування елемента, у зовнішній файл для більшої зручності. Для підключення css-файлу використовується тег . У готовому вигляді це виглядає приблизно ось так: , Де href вказує на місце розташування файлу, а type - на його тип.

Body

Саме в цій частині HTML-документа створюється видима частина сторінки. Все, що робиться всередині «тіла», буде показано браузером. В використовується величезна кількість тегів HTML. Основи - це форматування тексту, робота з посиланнями і найпростіші інструменти для структурування веб-сторінки. Щоб приступити до роботи в HTML, досить знати основні теги і вміти ними користуватися. Нижче наведені найпопулярніші з них: