Знайомство з HTML

На минулому занятті ми познайомилися з декількома ключовими елементами веб-сторінок:
- заголовки;
- важливий текст;
- списки (несортовані та нумеровані);
- зображення;
- посилання і т.п.

Тег

Тег - це спеціальна мітка в SGML-подібних мовах розмітки, призначена для виділення частини інформації (контенту), щоб задати стиль оформлення, зробити логічний поділ інформації.

В HTML є деякий набір зарезервованих слів для тегів. Вигадувати свої власні назви тегів крайнє не рекомендую. З кожною новою редакцією HTML добавляються нові теги, деякі старі можуть вилучатися.

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

Теги можуть вкладатися один в один як коробки чи матрьошки.

<тег> Інформація </тег>

<div> Блок інформації </div>
<body> А це - головний тег всієї видимої інформації веб-сторінки </body>
<p> Абзац тексту, в якому частину тексту <b> виділено жирним </b> шрифтом </p>
<blockquote> Уява важливіша за знання. </blockquote> <em> А. Енштейн </em>

Результат двох останніх строк:

Абзац тексту, в якому частину тексту виділено жирним шрифтом
Уява важливіша за знання.
А. Енштейн

В HTML деякі теги не потребують закриваючого тега. Такі теги не можуть містити в собі іншу інформацію:

<img src="cat.jpg"> зображення
<br> перенос строки
<hr> горизонтальна розділяюча лінія
<input> поле вводу

Існує строгий стандарт оформлення розмітки - XHTML (наразі він застосовується в React та деяких інших js-фреймворках). В цьому стандарті абсолютно всі теги повинні закриватися. Є повний та скорочений синтаксис:

<img></img>        <img/>
<br></br>          <br/>
<hr></hr>          <hr/>
<input></input>    <input/>

Атрибути та властивості тега

Тег може мати атрибути і властивості.

Атрибути мають назву (ключ) і значення, пишуться через символ "дорівнює". Значення атрибута бажано брати в лапки (особливо якщо є пробіли, кириличні символи):

<img src="cat.jpg" alt="Мій кіт" width="300">
<a href="http://google.com">Посилання на гугл</a>
<p class="msg" data-count="5">У вас є непрочитані повідомлення <i>5</i></p>

З властивостями ми познайомимося пізніше, вони записуються просто словом, властивість може бути у тега, а може не бути, третього не дано:

<div contenteditable>
<input type="checkbox" checked disabled readonly>
<video src="vid.mp4" controls autoplay>

Настав час модель даних перетворити на теги мови HTML.

Завдання

  1. Для виділення тексту жирним існує тег <b>, для виділення тексту наклонним шрифтом існує тег <і>.
    Напишіть код для оформлення наступної строки:

    У верстці головне - правильно використовувати теги.

  2. Створіть нову папку проекту html_start, в ній - папку html.
  3. В тій папці створіть файл index.html (можна використовувати Notepad++). Перевірте, чи файл має кодування UTF-8.
  4. Спробуйте використати всі нижчевказані теги. Якщо ви використовуєте заготовку сторінки - код прописуйте між тегами <body> і </body>.
  5. Відкрийте сторінку у браузері та перевірте результат.

Заголовки обрамляються тегами <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

Речення, абзаци, текст огортаються тегом <p> (кожне речення або кожен абзац в окремому тезі).

Якщо в реченні потрібно зробити перенесення строки на новий рядок - використайте тег <br>, та у більшості випадків текст переноситься автоматично.

Важливий текст огортається тегами <strong> або <b> (за замовчуванням в браузері виділяється жирним шрифтом).

Поняття, визначення, термін огортаються тегами <em> або <i> (за замовчуванням в браузері виділяється наклонним шрифтом).

Списки огортаються тегами <ul> (несортований) або <ol> (нумерований).

Кожен елемент списку - <li> (list item).

Зображення вставляються на веб-сторінку тегом <img>, у якого повинні бути атрибути src та alt, що вказують на URI зображення та описують зображення.

Посилання вставляються на веб-сторінку тегом <a>, у якого повинен бути атрибут href - адреса, по якій буде здійснено перехід при кліку на посилання.

Youtube: HTML Шорти - Навіщо потрібні заголовки (5:15).

Youtube: HTML Шорти - Посилання довкола блоків (2:27).

Перетворення моделі даних на веб-сторінку

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

Скопіюйте ваш файл index.txt у файл index.html, відкрийте його у IDE і починайте добавляти теги, видаляючи форматування моделі даних:

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <h1>Бобир Олександр Анатолійович</h1>
  <p><i>Дата народження:</i> 5.10.1982</p>
  <p><i>Захоплення:</i> коти, <b>програмування</b>, мандри</p>
  <h2>Улюблені ігри:</h2>
  <ul>
    <li>Fallout;</li>
    <li>Minecraft;</li>
    <li>Might &amp; Magic.</li>
  </ul>
  <h3>Мої друзі:</h3>
  <ol>
    <li>Іванов;</li>
    <li>Петров;</li>
    <li>Сидоров.</li>
  </ol>
  <img src="cat.jpg" alt="Кіт"><br>
  <a href="https://www.facebook.com/poshtar.boba">Мій профіль у facebook</a>
</body>
</html>

Відкрийте створений файл у браузері, отримаєте приблизно ось таку веб-сторінку:

Домашнє завдання

  1. Закінчіть робити сторінку-резюме, заляйте її на ваш_логін.github.io.
  2. У робочій папці створіть папку first_pages, всередині неї - дві підпапки: my_business і pet_network.
  3. У папці first-pages створіть сторінку-візитівку вашого домашнього улюбленця, кумира, вигаданого персонажа чи будь-яку іншу (index.html).
  4. У папку my_business закиньте модель даних сайту вашого бізнесу, перетворіть модель даних на веб-сторінки.
  5. Те саме зробіть і з соцмережею для домашніх тварин.
  6. Заляйте папку first_pages на github у вигляді окремого проекту і через групу у Viber чи Telegram передайте викладачу посилання на репозиторій.

Додаткове завдання

Дослідіть код сторінок цієї лекції, сайтів Wikipedia, соцмереж. Знайдіть елементи, які ми сьогодні вивчили.

Код сторінки можна побачити клацнувши правою кнопкою миші на сторінці і вибравши пункт меню "Переглянути джерело сторінки", "Show source".