Урок №4. HTML. Основні приклади

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



Основні приклади написання HTML-коду. Як писати веб-сторінки?

Не хвилюйтеся, якщо ці приклади використовують теги, які ви ще не знаєте. Ви дізнаєтеся про них у наступних розділах.

Документи HTML

Всі HTML документи повинні починатися з оголошення типу документа: <!DOCTYPE html>.

Сам HTML документ починається з тега <html> і закінчується тегом </html>.

Видима частина HTML документа знаходиться між тегами <body> і </body>.

Приклад:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
Спробуйте самі! »

Заголовки в HTML

Заголовки (heading - заголовок) в HTML визначаються тегами від <h1> до <h6>.

Тег <h1> визначає найважливіший заголовок. Тег <h6> визначає найменш важливий заголовок:

Приклад:

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Спробуйте самі! »

Параграфи (абзаци) в HTML

Параграфи (paragraph - абзац, параграф) в HTML визначаються тегом <p>.

Примітка: Слово paragraph перекладається зазвичай як абзац, але в середовищі веб-розробників прийнято вживати слово параграф - так, як воно звучить в оригіналі, щоб не було плутанини.

Приклад:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Спробуйте самі! »

Посилання в HTML

Посилання в HTML визначаються тегом <a> (від слова anchor - якір):

Приклад:

<a href="https://www.w3schools.com">This is a link</a>
Спробуйте самі! »

Призначення посилання вказується в атрибуті href. Атрибути використовуються для надання додаткової інформації про елементи HTML.

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


Зображення в HTML

Зображення в HTML визначаються тегом <img> (скорочено від слова image - зображення).

Вихідний файл (src), альтернативний текст (alt), width (ширина) і height (висота) надаються як атрибути:

Приклад:

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Спробуйте самі! »

Кнопки в HTML

Кнопки в HTML визначаються тегом <button> (з анг. button - кнопка):

Приклад:

<button>Click me</button>
Спробуйте самі! »

Списки HTML

Списки в HTML визначаються тегом <ul> (від unordered list - невпорядкований список / маркер ядро) або <ol> (від ordered list - упорядкований / нумерований список), за якими слідують теги <li> (елементи списку):

Приклад:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Спробуйте самі! »

Більш докладніше про ці та інші приклади ви дізнаєтесь в наступних розділах на сайті.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.