HTML документ. Структура html документа. Що тестувати?

ГОЛОВНАБЛОГТехнічні статтіHTML документ. Структура html документа. Що тестувати?

HTML документ. Структура html документа. Що тестувати?

22.01.2020
Опубліковано: Admin

Для початку давайте розберемося, що ж таке HTML?

HTML розшифровується як HyperText Markup Language – «мова гіпертекстової розмітки». На перший погляд звучить складно, але це не так. Насправді, HyperText – це звичайний текст, просто в ньому є відсилання до іншого тексту/ресурсу/контенту. У web цей термін прийшов з літератури. Відкрийте будь-яку книгу – її зміст і є HyperText, так як він містить посилання на інші сторінки.

Тепер визначимо, що таке «мова розмітки». Спочатку всі сайти представляють собою просто сторінки з текстом, картинками і посиланнями – ця розмітка і є HTML. Якщо уявити створення сайту як будівництво будинку, то для початку знадобиться креслення (план), щоб зрозуміти що і де буде знаходитися – вікно, двері, вітальня і т. ін. І HTML якраз виконує роль такого креслення для сайту. Вже потім буде вирішуватися якими будуть стіни і як будуть виглядати двері і вікна.

HTML розмітку можна побачити на будь-якій сторінці в інтернеті. Для цього потрібно зайти на сторінку, натиснути правою клавішею миші і в випадаючому меню вибрати пункт «View source» або «Переглянути джерело сторінки» (в різних браузерах назва пункту може трохи відрізнятися).

Пункт «View source» для перегляду розмітки

HTML документ, відкритий в редакторі, відображається як звичайний текстовий файл, якщо ж HTML документ відкритий в браузері, то він відображається відповідно до тегів розмітки і називається веб-сторінкою. Головне завдання будь-якого браузера – прочитати HTML документ і відобразити його як веб-сторінку.

Cтруктура HTML документу

HTML – не мова програмування, тому він лише описує те, що знаходиться в документі (текст, посилання, зображення, відео) за допомогою спеціальних слів – тегів. Теги укладені в кутові дужки «<» і «>», найчастіше їх використовують парами. Спочатку йде відкриваючий тег, потім його вміст, потім закриваючий тег. Закриваючий тег утворюється шляхом додавання слеша «/» перед ім'ям тега. У тегів також є атрибути, які розширюють їх можливості. Писати атрибути завжди потрібно всередині відкриваючого тегу.

Розглянемо структуру найпростішої HTML сторінки.

HTML сторінка починається із тегу <! DOCTYPE html> – це тег, який повідомляє браузеру, яку версію мови HTML використовує сторінка. Після <! DOCTYPE html> йде парний тег <html>. Структуру HTML часто порівнюють з деревом, так ось тег <html> – це його стовбур, основа основ. Далі цей «стовбур» поділяється на дві гілки <head> і <body>. У <head> вказують інформацію, необхідну браузеру і пошуковим системам, також підключаються стилі для візуального оформлення сторінок. Наприклад, в <head> пишеться обов'язковий тег <title> </ title> – тег заголовку сторінки, який відображається на вкладці браузера. Увесь текст, графіка та інший код, який безпосередньо відображається на сторінці, повинен знаходитись всередині тега <body> </ body>.

Doctype, Html, Head, Title, Body є обов'язковими тегами і писати їх необхідно завжди для нової сторінки і саме у такому порядку. Все це пишуть в документі із розширенням «.html».

Одиночні та парні теги

Давайте з'ясуємо що таке одиночні та парні теги. Одиночні теги в HTML не мають змісту та слугують лише для створення якихось графічних елементів на сторінці. Для одиночних тегів закриваючий тег заборонений.

Усього в HTML є 16 одиночних тегів:

<!doctype>	<input>
<area>	<keygen>
<base>	<link>
<br>	<meta>
<col>	<param>
<embed>	<source>
<hr>	<track>
<img>	<wbr>

Парні теги отримали таку назву тому, що вони складаються з двох тегів: відкриваючий і закриваючий (<html> </ html>). Елемент починається з відкриваючого тега і закінчується закриваючим тегом. Вмістом елемента є все, що знаходиться між відкриваючим і закриваючим тегами. Вміст може бути текстом і/або іншим HTML елементом.

Що і як тестуємо?

Дуже важливо протестувати HTML код, перевірити його на відсутність помилок валідації на сторінках сайту, переконатися, що веб-сайт працює у всіх браузерах, тому що це є основною вимогою майже для всіх веб-розробників. Після перевірки і в разі виявлення явних помилок потрібно внести до коду відповідні зміни. Існує безліч онлайн-інструментів, які допоможуть переконатися, що HTML код генерує бажаний результат, а веб-сайт працює в спрощеному режимі. Можна піти традиційним шляхом і використати Chrome Developer Tools, але є багато інших онлайн-інструментів, з якими простіше працювати.

Пропонуємо шість інструментів тестування HTML коду у браузері:

1. CodePen

Цей онлайн-інструмент швидше онлайн-спільнота розробників, які використовують різні інтерфейсні інструменти, такі як HTML, CSS, JavaScript і безліч бібліотек для написання коду. Інструмент функціонує як онлайн-редактор коду в браузері. Таким чином, це один з найпопулярніших інструментів для перевірки HTML коду, а також одна з найбільших спільнот розробників, де можна багато чого довідатися про HTML, CSS, веб-розробки в цілому і про тестування коду.

2. Використання текстового редактора

Це ще один спосіб запустити файл HTML. При роботі в текстовому редакторі в автономному режимі, такому як Sublime Text або Notepad ++, просто потрібно зберегти файл з розширенням .html і запустити його, двічі клацнувши по ньому. За замовчуванням він запускається в браузері, встановленому на локальному комп'ютері. Також можна перейти в розділ «Налаштування» свого пристрою і змінити браузер за замовчуванням, щоб проаналізувати висновок в різних браузерах.

3. JSFiddle

JSFiddle – це онлайн-спільнота розробників, яке також є платформою для тестування HTML коду онлайн в браузері. Він був запущений як додаток в 2009 році, але пізніше набув величезної популярності. JSFiddle в основному використовується для тестування коду JavaScript в режимі онлайн, але також можна тестувати HTML, CSS і код, написаний за допомогою деяких інших інтерфейсних бібліотек. Він має власний онлайн-редактор і одночасно показує висновок. Це буквально кращий інструмент для роботи з JavaScript. Єдиним недоліком є те, що потрібно натиснути кнопку «Виконати», щоб оновити панель попереднього перегляду.

4. JSBin

Багато новачків вважають інтерфейс JSFiddle складним для роботи. JSBin є альтернативою JSFiddle і порівняно простіший у використанні. Він має два типи доступу: безкоштовний і професійний. Обидва типи дозволяють необмежене безкоштовне тестування коду HTML, CSS і JavaScript в браузері, проте кількість бібліотек JavaScript, які можна увімкнути, є фіксованим. Якщо необхідно отримати доступ до додаткових функцій, таких як приватні кошики і хостинг активів, необхідно зареєструвати професійний обліковий запис.

5. Liveweave

Liveweave пропонує попередній перегляд HTML коду в режимі реального часу і є одним з найкрасивіших і найприємніших інструментів для роботи. Інтерфейс дійсно простий і зрозумілий завдяки наявності змінюваних розмірів панелей. Під час набору коду у вбудованому редакторі він постійно робить підказки, чим значно полегшує роботу. Крім того, можна легко зберегти код у хмарі і навіть завантажити його у вигляді файлу .zip для подальшого використання. Він також дозволяє працювати з бібліотеками JavaScript, такими як jQuery, і має лінійку, що дозволяє відстежувати відгуки продукту.

6. HTMLhouse

Це кращий варіант, якщо HTML це все, з чим ви маєте справу. Інтерфейс чистий і мінімальний, без додаткових функцій і підтримки. Він був розроблений виключно для HTML. Можна опублікувати HTML і поділитися ним публічно/в приватному порядку. Для кожного фрагменту коду, який буде написаний, є можливість поділитися посиланням на той випадок, якщо потрібно переслати його.

Також існує безкоштовний сервіс для перевірки Markup Validation Service W3C, за допомогою якого можна здійснити пошук помилок валідації на сторінках сайту. Цей сервіс перевіряє зазначені дані на помилки, а також формує звіт з їх переліком та рекомендаціями для виправлення.

Для новачків, окрім вищенаведених інструментів, можуть стати в нагоді деякі інші HTML-ресурси, такі як HTML Goodies. Також можна працювати з інструментами розробника Chrome. Для цього потрібно запустити HTML документ в Google Chrome і натиснути правою кнопкою миші елемент HTML, який необхідно перевірити. Натиснувши «Перевірити» можна отримати інструменти для запуску, аналізу і навіть відладки коду.

Однак основним недоліком всіх перерахованих вище інструментів є те, що вони показують, як виглядає код тільки в одному браузері. Якщо необхідно тестувати в різних браузерах, потрібно встановити їх всіх. Це також іноді неможливо. Наприклад, якщо тестувальник працює в середовищі Mac, він не може безпосередньо тестувати в IE. Одним із способів протестувати сайт у різних браузерах є використання онлайн-кросбраузерних інструментів тестування, таких як LambdaTest. Це один з найдивовижніших інструментів кросбраузерного тестування, що дозволяє тестувати свій код на кросбраузерну сумісність. Результати тесту засновані на результатах понад 2000 браузерів. Це забезпечує безперебійну роботу коду в різних десктопних і мобільних браузерах і позбавляє від багатьох проблем.

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