: HTML - мова розмітки гіпертаксту (або мова гіпертекстової розмітки)
Тож давайте познайомимося з ним ближче.
Для початку створіть у себе на комп'ютері файл з будь-якою назвою та розширенням.html (назва має бути англійською мовою- Наприклад, index.html). Щоб створити такий файл - створіть звичайний текстовий документ ("Пуск" - "Всі програми" - "Стандартні" - "Блокнот")і збережіть ("Файл" - "Зберегти як")його в будь-якому місці, ввівши назву та розширення (буває, що при введенні розширення блокнот все одно зберігає його як текстовий файл, а нам потрібний web файл. Для цього перед збереженням виберіть тип файлу - "Всі файли(*.*)").
Це не обов'язкова умова (оскільки в налаштуваннях сервера можна поміняти назву першої сторінки), а правило гарного тону. Назва першої сторінки бажано саме index (index.html), тому що сервер, при зверненні до нього, видає файл з таким ім'ям – index.
При правильному збереженні значок файлу повинен змінюватися на значок браузера (за промовчанням Internet Explorer).
Відкрийте цей файл через блокнот і скопіюйте туди такий код.
Це перша веб-сторінка!
Збережіть та відкрийте через браузер.
Вітаю, ви щойно створили свою першу веб-сторінку.
Текст "Це перша веб-сторінка!" можете поміняти на будь-якій іншій, наприклад так - "Це моя перша web-сторінка!". зберігаємо, оновлюємо браузер, милуємось результатом.
Але наша сторінка не має заголовка.
Потрібно це виправити - трохи підправимо код, вірніше додамо до нього "Голову сайту", використовуючи теги
і
Зберігаємо, оновлюємо, милуємось. Тепер наша сторінка має заголовок.
Опис тегів.
Найперший тег це (цей тег парний, тобто закриває тегобов'язковий) - він використовується як контейнер, усередині якого знаходиться весь вміст сторінки (текст, зображення та інше). Хоча цей тег ( і) необов'язковий, але його використання говорить про правило хорошого тону. Тому й вам раджу його використати.
Наступний тег - . Це теж парний тег (
і). Цей тег не відображається на сторінці (крім заголовка), але він необхідний для вказівки додаткових параметрів сторінки - опис сторінки (використовується пошуковими системами), ключові слова (використовується пошуковими системами), стилі, скрипти, заголовок та інше.Тег
І останній, у нашому коді, тег - . Теж парний тег (
і), усередині якого перебуває вся видима частина сайту, тобто. тексти, картинки, посилання, загалом інформація, яку ви хочете розмістити на сайті.У наступному уроці ми поговоримо про види тегів і їх написання.
Якщо відкрити будь-яку веб-сторінку, то вона міститиме в собі типові елементи, які не змінюються від виду та спрямованості сайту. У прикладі 1 показаний код простого документа, що містить основні елементи.
Приклад 1. Початковий код веб-сторінки
Заголовок
Перший абзац.
Другий абзац.
Скопіюйте вміст цього прикладу та збережіть його в папці c:\www\ під ім'ям example2.html. Після цього запустіть браузер та відкрийте файл через пункт меню Файл > Відкрити файл(Ctrl+O). У діалоговому вікні вибору документа вкажіть файл example2.html. У браузері відкриється веб-сторінка, показана на мал. 1.
Рис. 1. Результат прикладу у браузері
Елемент(Жарг. Доктайп) призначений для вказівки типу поточного документа - DTD (document type definition, опис типу документа). Це необхідно, щоб браузер розумів, як слід інтерпретувати поточну веб-сторінку, адже HTML існує у кількох версіях – сучасний HTML5 або застарілі HTML4 та XHTML. Щоб браузер «не плутався» і розумів, за яким стандартом відображати веб-сторінку і необхідно в першому рядку коду задавати.
Оскільки ми будемо працювати тільки з HTML5, то нам буде потрібно лише один короткий і сучасний доктайп.
Ми згадували, що імена елементів можна писати маленькими та великими літерами. Доце правило теж відноситься і його можна записувати по-різному. Проте традиційно ім'я цього елемента пишеться у верхньому регістрі.
Відкриваючий тег визначає початок HTML-документа, усередині якого зберігається «голова» (
) та «тіло» документа ( ).Вміст цього розділу не відображається безпосередньо на сторінці, за винятком елемента