Урок 1. Що таке html - вивчаємо що таке html структура

Не будемо вдаватися в подробиці і історію що таке HTML, а відразу перейдемо основних моментів. HTML - це основа побудови будь-якого сайту! При вивченні теми сайтостроения необхідно починати саме з нього. Тут немає нічого важкого. Освоїти дану технологію зможе АБСОЛЮТНО КОЖЕН!

Відразу хочу зауважити, що це НЕ мову програмування, а мова розмітки.

Чому вивчити HTML легко?

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

Давайте приступимо до вивчення цієї захоплюючої, і одночасно простий, технології.

Трохи теорії ...

Будь-яка сторінка складається з тегів. Тобто сторінка виглядає насправді не так як ми звикли це бачити, а складається з безлічі тегів, кожен з яких, грає певну роль.

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

Але що таке тег в HMTL?

Це елемент HTML сторінки, який так чи інакше впливає на відображення і розмітку сторінки. На словах зрозуміти це досить складно, тому необхідно відразу все дивитися саме на практиці і звикати до коду. Подивіться на зображення нижче:

Це структура найпростішої сторінки. А ось ці повторювані слів в трикутних дужках - це і є теги. Якщо Ви відкриєте свій текстовий редактор і напишете даний код, а потім збережіть в форматі HTML, то у Вас вийде HTML сторінка. Поки що не зрозуміло що таке HTML? # 128578;

З цієї структури можна побачити ті теги, які повинні обов`язково бути присутнім. Це теги:

• і закриває
• і закриває
• і закриває

Щоб було більш наочно, я виділив їх помаранчевим кольором на зображенні нижче:

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

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

Ну що, стало більш зрозуміло що таке HTML? # 128521; Але ми не зупиняємося і рухаємося далі ...

Деякі теги можуть мати закриває тег, а деякі ні. наприклад тега є закриває тег. Як Ви могли вже здогадатися, закриваються теги за допомогою похилої риси.

Дуже важливо дотримуватися відкриття і закриття тегів. Щоб не було помилок. Браузер помилку може і не показати, а ось структура Вашої сторінок буде неправильною і при подальшій роботі зі стилями (де займемося зовнішнім виглядом) будуть великі проблеми. Тому якщо у тега є закриває тег, то він обов`язково повинен бути присутнім в правильному місці.

Давайте на прикладі розберемо як НЕ треба закривати теги і в якому порядку це необхідно робити. Приклад двох ключових слів:

1

lt;divgt; lt;pgt; Довільний текстlt;/pgt; lt;/divgt;

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

1

lt;divgt; lt;pgt; Довільний текстlt;/divgt; lt;/pgt;

Так закривати теги категорично забороняється!

Практика, щоб зрозуміти що таке HTML ...

Ближче пізнати, що таке HTML, можна лише на практиці. Для цього можна використовувати будь-який текстовий редактор. Навіть блокнот. Але я рекомендую використовувати Notepad ++, тому що функціонально для роботи з HTML тут набагато більше. Завантажити його можна за посиланням Завантажити Notepad ++. В даному редакторі є всі можливості для створення і редагування HTML сторінок.

Почнемо. Після відкриття програми ви побачите таке віконце:

Щоб створити HTML сторінку, необхідно ввести "тіло" сторінки в даний віконце. Ви можете скопіювати текст нижче і просто вставити його. Але краще введіть все руками. Так Ви зможете швидше запам`ятаєте і звикнете до тегам.

123456789

lt;htmlgt;lt;headgt;lt;titlegt; Вивчаю HTML - Початокlt;/titlegt;lt;/headgt;lt;bodygt;lt;h1gt; Основний заголовокlt;/h1gt;lt;h3gt; Більш маленький підзаголовокlt;/h3gt;lt;/bodygt;lt;/htmlgt;

Отже, у вас повинно вийти наступне:

Далі необхідно зберегти дану сторінку в HTML форматі. Для цього натискаємо в меню "Файл", тут тиснемо "Зберегти як ...". Вводимо ім`я HTML сторінки. Я назвав її index.html. Потім просто зберігаємо в зручне місце у себе на комп`ютері. Після цього з`явиться підсвічування HTML тегів, тому що редактор Notepad ++ зрозуміє що це HTML документ. А з підсвіткою працювати набагато приємніше.

Зараз можна відкрити цей файл в будь-якому браузері. І якщо Ви в своєму браузері побачили таку ось картину:

Те необхідно дописати після закриває тега ось таку строчку:

1

lt;meta charset="Utf-8"gt;

І переконатися в тому, що в текстовому редакторі обрано кодування cp1251 (без BOM):

І тоді Ви побачите наступну сторінку в своєму браузері:

Відео урок - що таке HTML? (Практика)

Якщо при прочитанні Вам було важко, то подивіться даний відео урок:

висновок

Чудово, у нас вийшла перша HMTL сторінка. Якщо ж щось пішло не так, то обов`язково повторіть всі кроки і переконайтеся в тому, що Ви все зробили так само. Тепер у Вас склалося перше враження про HTML і що це таке.