Кожен раз, відкриваючи браузер, ви потрапляєте на веб-сайт, який може складатися з однієї або безлічі веб-сторінок з різною інформацією. Основною технологією створення таких веб-сторінок є мова HTML.
Як браузер отримує веб-сторінки?
Для загального розуміння давайте розглянемо невелику теорію про те, як браузер отримує веб-сторінки і що таке веб-сервер. Щоб отримати веб-сторінку, потрібно створити файл, написаний на мові HTML, і помістити його на веб-сервер. Після того як ви помістили створений файл на веб-сервер, будь-який браузер зможе через інтернет відшукати вашу веб-сторінку. Веб-сервер - це звичайний комп'ютер з доступом в інтернет, який безперервно працює і чекає запитів від браузерів. Будь-сервер зберігає веб-сторінки, картинки, аудіофайли та файли інших типів. Коли сервер отримує запит від браузера на який-небудь ресурс (зображення, веб-сторінки та ін.), Він знаходить цей ресурс (якщо може визначити місце розташування ресурсу) і відправляє його браузеру.
Але яким чином браузер дізнається про те, як саме відображати сторінку? Ось тут починає працювати мову HTML. Він каже браузеру все про зміст і структуру сторінки. Якщо ви виконаєте свою роботу добре (код буде написаний коректно і без помилок), то ваші сторінки будуть однаково відображатися у всіх браузерах.
Зверніть увагу: під час навчання вам не доведеться викладати ніякі сторінки на веб-сервер, все прекрасно буде працювати і на вашому локальному комп'ютері.
Що з себе являє HTML-документ?
HTML-документ - це звичайний текстовий файл c розширенням .html. який містить HTML-код. Далі буде описана інформація для тих, хто не знає, як зберігати файли з потрібним розширенням.
Windows:
Для того, щоб зробити з текстового файлу HTML-документ, вам треба всього-на-всього зберегти файл під іншим розширенням, зробити це можна двома способами:
- Клікнути по ньому два рази лівою кнопкою миші, в цьому випадку веб-сторінка відкриється в тому браузері, яка була обрана за замовчуванням.
- Клікнути по ньому ПКМ → наводимо курсор на відкрити за допомогою. → вибираємо потрібний вам браузер.
При отриманні HTML-документа браузер буде відображати його у вигляді веб-сторінки (веб-сторінкою є те, що відображається у вікні браузера), при цьому ви не побачите у вікні свого браузера відображення написаних вами тегів, тому що вони будуть інтерпретовані для відображення вмісту сторінки в потрібному вам вигляді.
Результат даного коду в вікні браузера:
Що таке HTML?
- Абревіатура HTML розшифровується як H yper T ext M arkup L anguage (мова розмітки гіпертексту).
- Запам'ятайте, він не є мовою програмування, це мова розмітки.
- HTML використовує теги розмітки, щоб описати структуру веб-сторінки.
Що таке теги?
HTML теги - це ключові слова або символи, укладені в кутові дужки, наприклад
..
і т.д. Теги бувають двох видів: парні і одиночні (їх також називають порожніми). Парні теги складаються з відкриває і закриває тега, наприклад:
текст
. Символ "/" після кутової дужки вказує на те, що тег закриває. Поодинокі теги складаються тільки з відкриваючого тега, наприклад:. Теги нечутливі до регістру, тому можуть бути написані як великими, так і малими літерами:
означає те ж саме, що і
. За стандартом HTML5 теги можуть бути написані в будь-якому регістрі.
За допомогою тегів браузер розпізнає структуру і кількість написаних вами тексту, наприклад, вони повідомляють браузеру, яка частина тексту є заголовком, де починається новий абзац, що потрібно підкреслити і де розташувати зображення (картинку). Отримавши цю інформацію, браузер використовує вбудовані в нього за умовчанням правила про те, як відображати кожен з цих елементів. Без використання тегів браузер виведе просто суцільний потік тексту, без відступів, заголовків, абзаців і т.д. Щоб стало зрозуміліше, розглянемо це докладніше на прикладах нижче.
Так виглядає сторінка, в якій використовуються теги для розмітки: