Основи HTML
Очікувані результати заняття
Після цього заняття потрібно вміти:
- Розуміти поняття мови гіпертекстової розмітки.
- Використовувати гіпертекстові, графічні й мультимедійні елементи на веб-сторінках
Якщо переглянути джерело (початковий код) будь-якої веб-сторінки, зауважимо, що окрім власне тексту, котрий ми бачимо у вікні браузера, тут присутні різноманітні коди, команди, часто написані у кутових дужках. Це команди мови розмітки гіпертексту HTML.
Цю мову створено у 1990 році Тімом Бернесом-Лі , а з 1996 року її розробкою та стандартизацією займається Консорціум W3C, і з осені 2014 року діє стандарт цієї мови HTML5. Ця мова визначає спосіб опису вмісту веб-сторінок. За оформлення відповідають аркуші стилів, описані за технологією CSS3, а логіка функціонування деяких елементів сторінки – мовою JavaScript.
Команди мови HTML називаються тегами, котрі бувають відкриваючими та закриваючими. Вони записуються у кутових дужках. Наприклад, тег <i> означає, що текст, написаний між відкриваючим і закриваючим тегом (які розрізняються похилою рискою або слешем) буде записаний курсивом.
Тег у перекладі з англійської означає етикетку, ярлик, бірку – по суті це певний опис, прикріплений до тексту чи іншого об’єкту, котрий має відображатись на веб-сторінці.
Можна зауважити, що деякі теги є парними, а деякі не потребують закривання. Наприклад, тег вставки зображення є одинарним. Крім того, деякі теги містять атрибути – додаткові параметри.
Для тегу зображення такими параметрами є назва файлу (або адреса) зображення, його розміри та альтернативний текст, надзвичайно важливий для коректної обробки ілюстрацій програмами, котрі зчитують вміст з екрану. Такими програмами користуються незрячі та люди з особливими потребами.
Загалом, структура простої веб-сторінки виглядає так:
Спочатку вказується специфікація, котрій відповідає сторінка - <!doctype html>. Далі йде тег <html> , котрий закривається у самому кінці документа. У межах документа виділяється два великі розділи: <head> та <body> У першому задається деякий службовий опис сторінки, підключаються додаткові файли тощо. Другий розділ містить основний вміст сторінки: тексти, зображення, мультимедійні елементи.
Наповнюючи сторінку вмістом варто знати про деякі особливості роботи з текстом у форматі HTML:
- будь-яка кількість пробілів, що йдуть підряд будуть замінені одним пробілом;
- ігноруються усі переноси рядків, абзаци, якщо вони не виконані відповідними тегами <br> та <p>;
- текст займає всю ширину браузера, переноси відбуваються за словами чи дефісами
- для вставки спеціальних символів використовуються позначення наприклад нерозривний пробіл чи копірайт ©
Хоча існує набір тегів для базового форматування тексту, задачу оформлення зазвичай вирішують аркуші стилів, з якими ознайомимось на наступному занятті, а зараз розглянемо інструмент створення веб-сторінок.
Як вже згадувалось, таким інструментом може бути й звичайний Блокнот чи інший текстовий редактор, такий як Notepad++, у якому здійснюється кольорова розмітка тексту та вбудовані засоби перевірки та інші інструменти полегшення розробки. Інша група програмних засобів – це візуальні редактори, або редактори WYISWYG, найвідомішими серед яких є Adobe Dreamviewer та KompoZer. Вони дозволяють одночасно бачити і код сторінки, і її відображення у браузері, а також містять набір шаблонів, котрими можна скористатись у розробці.
Ми скористаємось онлайновим засобом, котрий називається https://jsfiddle.net/ , адже він дозволяє зберегти свою роботу і поділитись посиланням. Це текстовий веб-редактор, котрий допоможе попрактикуватись із укладанням HTML-документа.
Отож, перша сторінка може виглядати приблизно так.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Перша веб-сторінка</title>
</head>
<body>
<p>Спробуємо творити у Вебі!</p>
</body>
</html>
Бачимо, що редактор підсвітлює кольорами теги та інші команди мови. Внесення змін автоматично відображається на панелі праворуч.
Практика
На основі цього шаблону створимо сторінку, котра розповідатиме про фільм. Приклад для роботи можна переглянути за посиланням https://jsfiddle.net/4qd0tas9/.
На сторінці буде текст із заголовками (h1), текстом у абзацах (p) та ілюстраціями(img). На сторінці наведено зацікавлюючий ролик з YouTube, а також створено посилання на докладнішу інформацію.
Для додавання зображення виконаємо пошук в Інтернеті, враховуючи ліцензійність зображень (з ліцензію на повторне використання).
Для додавання відео, слід знайти так званий код вставки. Зверніть увагу, що цей код є тегом зі знайомими атрибутами джерела, розміру та іншими параметрами.
Гіперпосилання - це вказівка для браузера, до якого об'єкта він має звернутись.
< a href="адреса переходу">текст переходу < /a>
По закінченню роботи можна зареєструватись та зберегти створену сторінку.
Відео з курсу Prometheus: Цифрові комунікації в глобальному просторі https://edx.prometheus.org.ua/courses/course-v1:Prometheus+ITArts101+2017_T1