Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Вивчайте HTML (Мова Розмітки Гіпертексту) | Анатомія Вебсайту
Основи Веб-Розробки з ШІ

book
HTML (Мова Розмітки Гіпертексту)

HTML, основа веб-сторінок, визначає їх структуру та вміст. Подумайте про це як про фундамент будинку, стіни, двері та дах.

У своїй основі HTML складається з елементів, укладених у кутові дужки (<>) і зазвичай приходять у парах - відкриваючий тег і закриваючий тег. Ці елементи утворюють ієрархічну структуру, з деякими елементами, вкладеними в інші, щоб створити змістовне розташування.

Приклад:

Будь ласка, натисніть кнопку Запустити код, щоб побачити сайт в дії.

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
</body>
</html>

Додавання різних тегів у HTML

У HTML ми можемо використовувати різні теги для додавання різних типів вмісту на веб-сторінку. Ось як ми можемо додати текст, зображення, посилання та інше:

Додавання тексту

Щоб додати текст на веб-сторінку, ми можемо використовувати тег <p> для абзаців, <h1> до <h6> для заголовків різних рівнів.

html

index.html

copy
<p>This is a paragraph of text.</p>
<h1>This is a main heading</h1>
<h2>This is a subheading</h2>

Додавання зображень

Щоб додати зображення, ми можемо використовувати тег <img>. Вкажіть джерело зображення (атрибут src) і за бажанням додайте атрибути, такі як alt для альтернативного тексту та width і height для розмірів.

<img src="image.jpg" alt="Description of the image" width="300" height="200" />

Додавання посилань

Щоб додати гіперпосилання на інші веб-сторінки або ресурси, ми можемо використовувати тег <a>. Вкажіть URL-адресу сторінки призначення за допомогою атрибута href.

html

index.html

copy
<a href="https://www.example.com">Visit Example Website</a>

Додавання списків

Щоб створити впорядковані (нумеровані) або невпорядковані (маркіровані) списки, ми можемо використовувати теги <ol> та <ul> відповідно. Всередині цих тегів використовуйте тег <li> для кожного елемента списку.

html

index.html

copy
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

Додавання форм

Щоб створити форми для введення користувачем, ми можемо використовувати різні теги, пов'язані з формами, такі як <form>, <input> та <button>.

html

index.html

copy
<form>
<input type="text" name="username" placeholder="Enter your username" />
<input type="password" name="password" placeholder="Enter your password" />
<button type="submit">Submit</button>
</form>

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

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<a href="https://www.google.com/" target="_blank">Visit Google home page</a><br>
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/2d218c15-0264-4b7d-afb6-e91ad4a42daa/section-2/image-example-dog.jpg"
alt="Puppy in a suit"
width="240"
/>
</body>
</html>

Відео-урок

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 2. Розділ 2
some-alt