2.44M

Категория:

Интернет

Похожие презентации:

Создание веб-сайтов

Введение в язык разметки HTML

Структура HTML

Современные веб-технологии

Введение в HTML

Введение в язык разметки HTML

Создание веб-сайтов

HTML. Язык гипертекстовой разметки

Создание веб-сайтов

Presentation 1

1.

Министерство
Дошкольного и
Школьного
образования
Республики Узбекистан
ПРОЕКТНАЯ
РА Б О Т А
НА ТЕМУ: «HTML»
Выполнила: Хамидова Самия, 8 «Д» класс
Проверила: Байбулатова Г.К.
Ташкент 2024

ПЛАН:
• 1.Что такое HTML?
2.История HTML
3.Основные элементы HTML
4.Пример HTML-кода
5.Преимущества HTML
6.Эволюция HTML
7.Применение HTML
8.HTML и другие технологии
9.Теги заголовков в HTML
10.Гиперссылки в HTML
11.Списки в HTML
12.Изображения в HTML
13.Таблицы в HTML
14.Формы в HTML
15.Аудио и видео в HTML
16.Семантические теги HTML5
17.Интерактивность с HTML и
JavaScript
18.Будущее HTML
19.Заключение

3.

Ч ТО ТА КО Е H T M L ?
• HTML (HyperText Markup Language) —
это язык разметки, используемый для
создания веб-страниц.
• Основа структуры всех веб-сайтов.
• Определяет, как элементы
отображаются в браузере.

4.

И СТО Р И Я H T M L
• Разработан Тимом БернерсЛи в 1991 году.
• Первоначально содержал
всего 18 тегов.
• Эволюция версий: от HTML
1.0 до HTML5.
• HTML5: современный
стандарт, принятый в 2014
году.

5.

ОСНОВНЫЕ
ЭЛЕМЕНТЫ
HTML
• Теги: Основа HTML, например,
<html>, <head>, <body>.
• Атрибуты: Задают параметры
для тегов (например, href для
ссылок).
• Структура документа:
• Документ начинается с
<!DOCTYPE html>.
• Разделы: <head> для
метаданных, <body> для
содержимого.

6.

ПРИМЕР HTML-КОДА
• <!DOCTYPE html>
<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
<h1>Добро пожаловать!</h1>
<p>Это пример веб-страницы на HTML.</p>
</body>
</html>

7.

П Р Е И М У Щ Е СТ ВА H T M L
• Простота в изучении и
использовании.
• Поддерживается всеми браузерами.
• Легко интегрируется с CSS и
JavaScript.
• Основной стандарт веб-разработки

8.

ЭВОЛЮЦИЯ
HTML
•HTML 1.0: Первые базовые
возможности.
•HTML 4.01: Расширенные
мультимедийные функции.
•XHTML: Более строгий
синтаксис.
•HTML5: Поддержка
мультимедиа, адаптивность,
новые теги (например, <video> и
<article>).

9.

ПРИМЕНЕНИЕ
HTML
• Создание веб-сайтов.
• Разработка интерфейсов вебприложений.
• Разметка электронных писем.
• Интеграция с API для встраивания
данных.

10.

HTML И ДРУГИЕ
ТЕХНОЛОГИИ
• HTML + CSS: Дизайн и стилизация.
• HTML + JavaScript:
Интерактивность и
функциональность.
• HTML + Backend: Динамическая
генерация контента.

11.

Т Е Г И З А ГО Л О В К О В В H T M L
• Теги: <h1>, <h2>, <h3> ... <h6>.
• <h1> — самый крупный заголовок, <h6> — самый мелкий.
• Пример:
• html
• Копировать код
• <h1>Основной заголовок</h1>
• <h2>Подзаголовок</h2>

12.

ГИПЕРССЫЛКИ В
HTML
Тег: <a>.
Используется для создания ссылок на другие страницы.
Пример:
html
Копировать код
<a href="https://example.com">Перейти на
сайт</a>
Атрибуты:
href: адрес ссылки.
target="_blank": открытие ссылки в новой вкладке.

13.

СПИСКИ В
HTML
Маркированные списки: тег <ul>.
html
Копировать код
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
</ul>
Нумерованные списки: тег <ol>.
html
Копировать код
<ol>
<li>Первый пункт</li>
<li>Второй пункт</li>
</ol>

14.

• Тег: <img>.
И З О Б РА Ж Е Н И
Я В HTML
• Используется для добавления изображений.
• Пример:
• html
• Копировать код
• <img src="image.jpg" alt="Описание
изображения" width="500" height="300">
• Важные атрибуты:
• src: путь к файлу изображения.
• alt: описание изображения для случаев, если
оно не загрузится.

15.

ТАБЛИЦЫ В HTML
ег <table> используется для создания таблиц.
Пример:
<table>
<tr>
<th>Имя</th>
<th>Возраст</th>
</tr>
<tr>
<td>Иван</td>
<td>25</td>
</tr>
</table>

16.

АУД И О И В И Д Е О В
HTML
HTML5 добавил поддержку мультимедиа.
Аудио: тег <audio>.
html
Копировать код
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
Видео: тег <video>.
html
Копировать код
<video controls width="600">
<source src="video.mp4" type="video/mp4">
</video>

17.

СЕМАНТИЧЕСКИЕ ТЕГИ HTML5
• Семантические теги делают код более понятным:
• <header>: шапка страницы.
• <footer>: подвал страницы.
• <article>: независимый контент.
• <section>: раздел страницы.
• <nav>: меню навигации.

18.

И Н Т Е РА К Т И В Н О С Т Ь С H T M L И
J AVA S C R I P T
• HTML используется для разметки, а JavaScript добавляет функциональность.
• Пример:
• <button onclick="alert('Привет!')">Нажми меня</button>
• JavaScript позволяет:
• Реализовать обработку событий.
• Создавать динамические элементы.
• Управлять DOM (Document Object Model).

19.

БУД У ЩЕЕ HTM L
• HTML6 (разработка): новые возможности для мультимедиа и адаптивности.
• Более тесная интеграция с CSS4 и JavaScript.
• Совершенствование поддержки AI-инструментов и работы с API.
• HTML остаётся ключевой технологией для развития Интернета.

20.

ЗАКЛЮЧЕНИЕ
• HTML — это основа всех веб-технологий.
• Простой, гибкий и мощный инструмент.
• Знание HTML открывает двери в мир веб-разработки.
• Это первый шаг к созданию современных цифровых
решений.

English Русский Правила