Кожного разу, відкриваючи браузер, ви потрапляєте на веб-сайт, який складається з безлічі сторінок з різною інформацією. Основною технологією створення таких веб-сторінок є HTML.
Для загального розуміння давайте розглянемо невелику теорію про те, як браузер отримує сторінки в інтернеті. Щоб отримати веб-сторінку потрібно створити файл написаний на мові html і помістити його на веб-сервер. Веб-сервер - це звичайний комп'ютер з доступом в інтернет, який безперервно працює і чекає запитів від браузера. Будь сервер зберігає HTML-сторінки, картинки, аудіофайли та файли інших типів, коли сервер отримує запит від браузера на який-небудь ресурс (зображення, веб-сторінки тощо), він знаходить цей ресурс і висилає браузеру. У даному самовчителі ми не будемо викладати ніякі сторінки на веб-сервер, всі прекрасно буде працювати і на вашому локальному комп'ютері.
Що таке HTML?
HTML - це мова для опису розмітки веб-сторінок. Це має на увазі, що сторінки, створені за допомогою нього, можуть бути переглянуті тільки за допомогою спеціальних програм (браузерів), встановлених на комп'ютерах користувачів.
HTML розшифровується як Hyper Text Markup Language (мова розмітки гіпертексту).
Він не є мовою програмування, це мова розмітки.
HTML використовує теги розмітки, щоб описати структуру веб сторінки .
Що таке теги?
Отже, ви дізналися, що HTML є ключем, завдяки якому браузер відображає сторінку. Але для того щоб вивести не просто потік тексту, без відступів, заголовків і абзаців, а чітко структуровану інформацію, браузер повинен інтерпретувати все теги, які оточують основний текст сторінки.
<a href="http://www.puzzleweb.ru/html/all_tags.php" target="_blank">HTML-теги</a> - це ключові слова або символи, укладені в кутові дужки, наприклад <body>, <h1> і т.д. За допомогою тегів браузер розпізнає структуру і значення вашого тексту, наприклад, вони повідомляють браузеру яка частина тексту є назвою, де починається новий абзац, що потрібно підкреслити і де розташувати зображення. Отримавши цю інформацію, браузер використовує вбудовані в нього за умовчанням правила про те, як відображати кожен з цих елементів.
Примітка: але задовольнятися настройками, які використовуються браузером за умовчанням не обов'язково. Можна додати власний стиль і правила редагування за допомогою мови <a href="http://www.puzzleweb.ru/css/00_teacher.php" target="_blank">CSS</a>, який визначає шрифт, колір, розмір і багато інших характеристик сторінки, але про це ви дізнаєтеся трохи пізніше.
Що з себе являє HTML-документ?
HTML-документ - це звичайний текстовий файл c розширенням. Html або. Htm, який містить HTML-код. Далі буде описана інформація для тих, хто не знає як зберігати файли з потрібним розширенням.
Для того, щоб зробити з текстового файлу web-сторінку, вам треба всього навсього зберегти файл під іншим розширенням, робиться цієї так: файл → зберегти як → в рядку "ім'я файлу" можете написати, наприклад так: mypage.html → зберегти. Коли ви зберігаєте ваш HTML файл, ви можете використовувати. Htm або. Html розширення, різниці між ними ніякої немає.
Відкрити файл, збережений з розширенням. Htm або. Html, для перегляду в браузері можна двома способами:
кликнувши по ньому два рази лівою кнопкою миші
кликнувши по ньому правою кнопкою миші → відкрити за допомогою ... → вибрати потрібний вам браузер
При отриманні таких документів, браузер буде відображати їх у вигляді веб-сторінок, при цьому ви не побачите у вікні свого браузера відображення написаних вами тегів, тому що вони будуть інтерпретовані для відображення вмісту сторінки в потрібному вам вигляді.
Це виглядає приблизно так:
<html> <body> <h1> Мій перший заголовок </ h1> <p> Мій перший абзац </ p> </ body> </ html> Результат даного прикладу у вікні браузера:
У цьому прикладі:
текст між <html> і </ html> описує веб сторінку. текст між <body> і </ body> містить відображуване вміст сторінки. текст між <h1> і </ h1> визначає заголовок. текст між <p> і </ p> визначає абзац. На даному етапі вам варто просто подивитися, як виглядає HTML. Далі ми розглянемо все більш детально. А поки уважно вивчіть код і подивіться, як він відобразиться у вікні браузера.
HTML редактор
HTML документи можуть бути написані і відредаговані різними HTML редакторами, наприклад такими, як Dreamweaver або Visual Studio.
Тим не менш, вивчаючи HTML з даного самовчителю, для редагування HTML-документа ви можете використовувати простий текстовий редактор (наприклад Блокнот), але зручніше редагувати буде, якщо ви скачаєте notepad + + або geany, так як там є підсвічування коду. Використання текстового редактора це найкращий спосіб, щоб дізнатися і запам'ятати елементи HTML .
