TD1 Частина 1; HTML - мова розмітки для структурування документів

Мета цього посібника - зрозуміти, як пишуться основні веб-сторінки, які також називаються статичними (Web 1.0). Така веб-сторінка містить дві частини:

частина

HTML: Файл HTML містить структуру сторінки та її вміст; на додаток до простого тексту, він надає значення тексту, вказуючи те, що потрапляє в абзац, заголовок тощо, використовуючи теги (приклад

CSS: CSS-файл відповідає за розміщення цих елементів (поставте цей абзац рожевим кольором, використовуйте для цього заголовка шрифт “Sans Serif”,…)

Браузер (Firefox, Chrome, Safari, IE/Edge,…) - це програмне забезпечення, яке дозволяє нам переглядати веб-сторінки. Метою цього підручника є демістифікація способу інтерпретації браузером цих двох типів файлів. Для цього ми збираємося створити сайт, візуалізація якого відповідає файлу target.png, починаючи з файлу index.txt, який містить майже «необроблений» вміст сайту, який потрібно створити.

Спочатку ми присвятимо себе визначенню структури (отже, HTML), яку ми можемо додати до нашого вихідного вмісту. Потім ми побачимо у другій частині підручника, як досягти рендерингу, запропонованого target.png, створивши файл CSS.

Перетворення текстового документа в документ HTML

Роль навігатора

Як вже було сказано, роль браузера (Firefox, Chrome, Safari, IE/Edge,…) полягає у перегляді веб-сторінок. Отже, браузер перетворює текстовий файл, що містить HTML/CSS, у відображення макета із зображеннями ...

  1. Сторінка TD - це веб-сторінка. Відкрийте джерела цієї сторінки, щоб побачити HTML-код, який використовується для відображення цієї сторінки (клацніть правою кнопкою миші, потім вихідний код або Ctrl + U).

Щоб створити веб-сторінку, просто створіть текстовий файл і надайте йому розширення .html, щоб браузер зрозумів, що він повинен інтерпретувати його як документ HTML.

Збережіть файл index.txt локально в папці HTMLCSS/TD1/.
Зробіть index.html копію index.txt в тій же папці.

Відкрийте файли index.txt та index.html у браузері.
Які відмінності в дисплеї ви бачите? Чому ?
Як відображаються розриви рядків у документі HTML ?
Як відображається HTML-текст, оточений і -> ?

Мовний стандарт HTML

Наш документ index.html інтерпретується браузером як документ HTML.

Таким чином, HTML, що розшифровується як HyperText Markup Language, є мовою розмітки, що містить так звані гіпертекстові посилання на інші документи.

HTML - це стандарт, тобто повністю описана мова (не соромтеся швидко переглядати її специфікацію, дуже технічний, але вичерпний документ).

Давайте перевіримо відповідність index.html стандарту HTML5 за допомогою валідатора https://html5.validator.nu/. На які помилки вказується ?

Почнемо з помилки

Валідатор повідомляє нам, що очікував побачити на початку нашого документа. Цей тег використовується, щоб заявити, що документ написаний у форматі HTML5. Дійсно, існує кілька "HTML" стандартів: HTML4, XHTML, HTML5, ... Сьогодні люди в основному використовують HTML5, і ми будемо робити те саме.

Щоб документ був дійсним і визнаний як документ HTML 5, додати тег на самому початку файлу.
Перевірте відповідність вашого документа.

Валідатор нам повідомляє Кодування символів не оголошено.

Кодування вказує, як файл зберігається (UTF-8, ANSI, iso-8859-15, ...). Якщо більшість символів записано стандартним способом, спеціальні символи (наголоси, œ, ...) можуть бути записані зовсім по-іншому.

Тому вказівка ​​кодування символів необхідна для правильного відображення спеціальних символів на вашій сторінці. Ми завжди будемо використовувати кодування UTF-8 (і в ідеалі кожен також повинен використовувати це).

Додати отже, наступний рядок, який оголошує кодування в заголовку документа відразу після DOCTYPE.

Повторно відкрийте index.html у браузері та перевірте, чи відображаються всі акценти.

Примітка: Якщо акценти все одно не працюють, це тому, щоцього не достатньо сказати, що ваш файл знаходиться в UTF-8. Ваш файл також повинен бути добре записано в UTF-8. Наприклад, у Notepad ++ кодування позначено внизу праворуч. Ви можете перетворити свій файл на UTF-8 за допомогою пошуку в меню.

Перевірте відповідність вашого документа.

Остання помилка повідомляє нам про елемент head, в якому відсутній заголовок. Виправте свою веб-сторінку, вставивши заголовок після. Ви знайшли, що змінюється на дисплеї ?

На цьому етапі валідатор вказує, що файл index.html є дійсним документом HTML5.

Звичайна структура документа HTML

Теги HTML

У попередній вправі ми бачили наші перші теги та. Теги використовуються для структурування документа. Вони коментують текст, який вони містять, і, отже, додають значення. Існує два типи тегів:

Більшість тегів охоплюють зміст: вони починаються з відкриваючого тегу, потім вмісту, який ми хочемо "анотувати", і закінчуємо закриваючим тегом .
Наприклад, тег використовується, щоб сказати, що текст, який він охоплює, буде заголовком документа.

Певні теги не приймають вміст: вони просто складаються з відкриваючого тегу. Їх ще називають самозакриваються мітками. Наприклад, ми бачили маяк і побачимо найближчим часом,
...

Інші приклади:

Основна структура

Тож давайте використаємо теги для створення хорошої базової структури документа HTML:

Після рядка мовної декларації документ включається в тег і складається з двох частин:

  • заголовок містить інформацію про документ HTML, таку як
    • один (обов’язковий тег)
    • один для визначення кодування
  • тіло містить реальний вміст. Ми побачимо приклади тегів у розділі Загальні теги.

Документ HTML схожий на дерево

Теги HTML надають документу деревну структуру. У нашому прикладі index.html

дерево таке:

  • є кореневим елементом
  • і є двома синами стихії
  • і є двома синами стихії
  • “Неофіційний сайт Чака Норріса” - син стихії .

  1. Оновіть свою сторінку index.html так, щоб вона відповідала наведеній вище структурі HTML.
    (Ви повинні додати теги, і)
  2. Перевірте відповідність вашого документа.

Інструменти веб-розробки

В решті уроку ми використовуватимемо наш браузер, щоб «перевірити» нашу веб-сторінку. Для цього ми рекомендуємо Chrome або Firefox. Натисніть клавішу F12. Інструменти розробки мають дві різні частини, одну, присвячену HTML, а іншу ... CSS. Ці інструменти чудово підходять для вивчення побудови веб-сторінки.

Є три способи зосередити увагу на певному предметі:

  • Клацання правою кнопкою миші на відображеній сторінці, за яким слідує "Перевірка/перевірка елемента", дозволяє побачити відповідний HTML-код у засобі розробки.
  • Натискання в інструменті розробки дозволяє перевірити область, що цікавить сторінку (наведенням миші).
  • Коли ви наводите курсор миші на елемент у засобі розробки, він забарвлює його на сторінці.

Ознайомтесь із цими трьома прийомами, оглянувши сторінку TD.
Наприклад, клацніть правою кнопкою миші на пункт "є три способи ...", а потім "перевірити елемент". Інструмент розробки повинен представити вам HTML-код і розмістити вас безпосередньо на

Поширені теги HTML

Коментарі в HTML

Є можливість додавати коментарі в HTML. Ці коментарі не інтерпретуються браузером і, отже, не відображаються (але вони залишаються присутніми у вихідному коді). Отже, це інформація, залишена розробниками для розробників. Вони розміщуються між тегами та ->:

У файлі index.html є лише коментарі, як і багато вказівок щодо їх заміни на HTML. Ми пояснимо їх у наступних розділах.

Цінні папери

Ми почнемо з додавання структури на нашу сторінку. Для цього ми будемо використовувати теги вмісту

визначити різні розділи:

використовується для заголовків документів

використовується для розділів документів

використовується для підрозділів документів тощо.

Наприклад, назва вище отримана з таким кодом:

  1. Перевірте, чи заголовок Цінні папери трохи вище дійсно a

за допомогою інструментів розробки, клацнувши на ньому правою кнопкою миші. Додайте тег

до елементів index.html, позначених коментарями: . Додайте тег

до елементів index.html, позначених коментарями: .
  • Перевірте відповідність вашого документа.

    • Групування елементів

    Абзаци

    Тепер використовуйте теги

    навколо абзаців документа. Абзаци подаються вам і .

    Примітка: Якщо натиснути правою кнопкою миші, а потім "перевірити елемент" на цьому абзаці, ви побачите, що цей текст знаходиться в абзаці.

    Списки

    У HTML ми можемо складати впорядковані (нумеровані) або невпорядковані списки:

    Що дає при інтерпретації механізмом візуалізації браузера:

    • перший невпорядкований товар
    • другий пункт
    1. перший замовлений товар
    2. другий пункт
    1. Використовуйте теги