Презентация3

1.

Министерство Дошкольног и
Школьного образования Республики
Узбекистан.
Проектная работа
на тему: «Что такое
HTML?»
Выполнила:
С.
Проверила:
Г.К.
Ташкент, 2024 г.
Джурабекова
Байбулатова

План:
-Введение.
1. История HTML.
2. Основные элементы HTML.
3. Структура HTML документа.
4. Гипертекстовые ссылки.
5. Медиа и графика.
6. Таблицы и списки.
7.Семантические теги.
8. Инструменты для работы с HTML.
-Заключение
-Список литературы.

3.

Истoрия
HTML
HTML (HyperText Markup Language) — это язык разметки,
используемый для создания структуры веб-страниц. Он был
разработан в 1991 году британским учёным Тимом БернерсомЛи, который работал в Европейском центре ядерных
исследований
(CERN).
Первоначальная
цель
HTML
заключалась в обмене научной информацией между учёными
через сеть.
Первая версия HTML была достаточно простой и включала
всего несколько тегов, таких как заголовки, абзацы и
гиперссылки. Важной особенностью HTML стало создание
гипертекста, позволяющего связывать документы между собой с
помощью ссылок. В 1995 году появилась HTML 2.0, которая уже
поддерживала таблицы и формы, что значительно расширило
возможности языка.
В 1997 году вышла версия HTML 3.2, ставшая официальным
стандартом W3C. В ней были добавлены новые элементы для
работы с таблицами, а также поддержка стилей с помощью CSS.
HTML 4.0, выпущенный в 1999 году, сделал язык ещё более
гибким, добавив поддержку скриптов и улучшив работу с
мультимедиа. Эта версия использовалась долгое время и стала
основой для большинства сайтов.
В 2014 году была представлена современная версия HTML5,
которая значительно расширила возможности языка. HTML5
поддерживает встроенные аудио- и видеоплееры, а также
анимации и интерактивные элементы без необходимости

4.

Основные элементы
HTML.
HTML-документ состоит из множества элементов, каждый из которых выполняет свою
функцию и создаёт структуру веб-страницы. Эти элементы оформляются с помощью
тегов — специальных команд, которые заключаются в угловые скобки, например, <p>,
<h1>, <a> и другие. Теги бывают парными и одиночными. Парные теги включают
открывающий тег и закрывающий, например, <p> и </p>, где первый начинает элемент, а
второй его завершает. Одиночные теги, такие как <img>, не требуют закрывающего тега.
Одним из основных элементов HTML является <html>, который представляет собой
корневой тег документа. Весь контент страницы размещается внутри этого тега. Каждый
HTML-документ состоит из двух основных разделов: <head> и <body>.
Раздел <head> содержит информацию о странице, такую как заголовок страницы, ссылки
на стили и скрипты, метаинформацию, кодировку и т. д. Этот раздел не отображается на
веб-странице. Например, тег <title> в разделе <head> задаёт название страницы, которое
отображается в строке браузера.
Основной контент страницы располагается в разделе <body>. Здесь размещаются все
видимые элементы, такие как текст, изображения, списки, таблицы, ссылки и другие
компоненты. Одним из самых распространённых элементов является <h1>–<h6>,
которые задают заголовки разных уровней. Тег <p> используется для создания абзацев
текста, а <a> — для создания гиперссылок.
Также важными элементами являются теги <img> для добавления изображений, <ul> и
<ol> для создания списков, а также <table> для создания таблиц. Все эти элементы,
объединённые в HTML-документе, создают структуру, которая может быть оформлена с
помощью CSS и сделать страницу более интерактивной с помощью JavaScript.

5.

Структура HTML
документа.
HTML-документ имеет чётко определённую структуру, которая должна соблюдаться, чтобы
браузер мог корректно отображать страницу. Основная структура документа начинается с
объявления типа документа <!DOCTYPE html>, которое информирует браузер о том, что
используется версия HTML5. Этот тег необходим для правильной интерпретации
содержимого веб-страницы.
Далее следует корневой элемент <html>, который содержит весь документ. Всё
содержимое страницы организуется внутри этого тега. HTML-документ состоит из двух
ключевых частей: <head> и <body>.
Раздел <head> содержит метаинформацию о документе. В этом разделе указываются такие
элементы, как заголовок страницы (с помощью тега <title>), кодировка символов (через тег
<meta>), ссылки на внешние файлы стилей (<link>) или скрипты (<script>), а также другие
настройки и метаданные. Эти элементы не отображаются на веб-странице, но они важны
для работы сайта и его индексации поисковыми системами.
Раздел <body> — это основная часть документа, где размещается весь видимый контент. В
нём находятся все элементы, которые пользователь видит на странице: текст,
изображения, таблицы, списки, формы и другие компоненты. Важно отметить, что
структура в <body> может быть разной, в зависимости от целей веб-разработки. Например,
с помощью тегов <h1>–<h6> создаются заголовки, <p> — параграфы текста, а <a> —
гиперссылки.
Чтобы правильно создать HTML-документ, важно соблюдать правильную
последовательность элементов. Например, теги, такие как <head> и <body>, должны быть
внутри <html>, а все остальные элементы размещаются в соответствии с их функцией в
структуре страницы.

6.

Гипертекстовые
ссылки. — это ключевая
Гипертекстовые ссылки, или гиперссылки
особенность HTML, которая позволяет связывать страницы
и ресурсы в интернете. Они являются основой Всемирной
паутины (World Wide Web), предоставляя пользователю
возможность переходить с одной страницы на другую или
на другие ресурсы. В HTML гиперссылки создаются с
помощью тега <a>, который обозначает ссылку.
Структура гиперссылки включает два основных атрибута:
href и target. Атрибут href указывает адрес, на который
ведёт ссылка, будь то другой документ, изображение,
видео или внешний сайт.
Гиперссылки могут быть внутренними и
внешними. Внутренние ссылки ведут на другие
страницы одного сайта, а внешние — на
страницы других сайтов. Важно, чтобы ссылки
на внешние ресурсы открывались в новой
вкладке, чтобы пользователь не потерял
доступ к вашему сайту.
Также существует возможность создания
якорных
ссылок,
которые
приводят
пользователя к конкретному элементу на той
же странице. Для этого используется атрибут id
в целевом элементе и ссылка с символом #

7.

Медиа и графика.
Изображения.
Для добавления изображений в HTML используется тег
<img>, который является одиночным (не требует
закрывающего тега). Этот тег указывает браузеру, какое
изображение нужно отобразить. Основной атрибут src
(source) определяет путь к изображению, а атрибут alt
предоставляет текстовое описание изображения для
пользователей с ограниченными возможностями или в
случае, если изображение не загружается
Видео и аудио.
HTML5 значительно улучшил работу с мультимедиа,
добавив теги для вставки видео и аудио без
необходимости использования внешних плагинов. Для
видео используется тег <video>, а для аудио — <audio>.
Эти теги поддерживают атрибуты для управления
воспроизведением, такими как controls (управление
воспроизведением) и autoplay (автоматическое начало
воспроизведения).
Медиа-контроль
Кроме того, с помощью тегов можно
управлять отображением видео и аудио.
Например, <source> используется внутри
тегов <video> и <audio> для указания
нескольких форматов файла для лучшей
совместимости с различными браузерами.

8.

Таблицы и
списки
Ⅰ
Ⅰ
Ⅰ
Ⅰ
Ⅰ
Ⅰ
Ⅰ
Ⅰ
Ⅰ
Ⅰ
HTML предоставляет удобные инструменты
для структурирования данных в виде таблиц
и списков.
Таблицы создаются с помощью тега <table>.
Основные элементы таблицы включают:
<tr> — строка таблицы.
<td> — ячейка данных.
<th> — заголовок ячейки.
Списки бывают нумерованные
(<ol>) и маркированные (<ul>).
Каждый пункт обозначается тегом
<li>.

9.

Семантические
элементы.
<header> — элемент, который
используется для представления заголовка
страницы или раздела. Обычно в этом разделе содержатся логотип,
навигационные ссылки и другие элементы, которые помогают пользователю
ориентироваться на странице.
<footer> — используется для размещения информации внизу страницы или
раздела, например, копирайта, контактных данных и ссылок на политику
конфиденциальности.
<article> — элемент, который представляет собой самостоятельный контент,
который может быть использован отдельно от остальной части страницы.
Это может быть пост в блоге, новостная статья или другой тип контента,
который имеет свой смысл вне контекста веб-страницы.
<section> — используется для группировки связанных элементов в
логические блоки. Это помогает структуировать контент на странице,
например, для разделов с информацией о продукте, услугах или разделах
блога.
<nav> — тег, который используется для обозначения блока навигационных
ссылок. Это помогает поисковым системам и пользователям быстро найти
навигацию по сайту.
<aside> — элемент, предназначенный для размещения контента, который
связан с основной темой, но не является её центральной частью. Например,
боковые панели с дополнительной информацией или рекламой.
<main> — этот тег используется для выделения основного содержимого
страницы, которое является центральным для сайта. Всё, что находится в
этом элементе, является основным контентом, в отличие от боковых
панелей или других вспомогательных частей.

10.

Инструменты для работы с
HTML.
Для создания и редактирования HTML-документов существует
множество инструментов. К ним относятся:
Текстовые редакторы (например, Notepad++, Visual Studio Code,
Sublime Text). Эти программы поддерживают подсветку синтаксиса и
автодополнение кода.
Графические редакторы (например, Adobe Dreamweaver), которые
позволяют создавать страницы в визуальном режиме.
Браузеры (Chrome, Firefox, Safari) для проверки результата и отладки
кода.
Также веб-разработчики используют инспектор кода в браузере,
который помогает просматривать и редактировать HTML в реальном
времени.
Важными инструментами являются системы контроля версий
(например, Git) и онлайн-сервисы (например, CodePen или JSFiddle)
для тестирования кода.
Эти инструменты значительно упрощают процесс разработки и
помогают создавать качественные веб-страницы.

11.

Заключени
е.
HTML является фундаментальной технологией для создания веб-страниц,
предоставляя инструменты для структурирования и организации контента. Его
элементы, включая гиперссылки, семантические теги, формы и медиа,
позволяют разработчикам создавать как простые, так и сложные сайты.
Семантические теги, такие как <header>, <article>, <footer>, делают код более
понятным как для разработчиков, так и для поисковых систем, способствуя
улучшению SEO и доступности контента. Использование форм в HTML
позволяет сайтам быть интерактивными, обеспечивая сбор данных и
взаимодействие с пользователем.
Интеграция медиа-ресурсов, таких как изображения, видео и аудио, делает
страницы более визуально привлекательными и удобными для пользователей.
А благодаря гибкости и совместимости HTML с другими технологиями, такими
как CSS и JavaScript, веб-разработчики могут создавать функциональные и
динамичные проекты.
Таким образом, изучение HTML — это первый шаг к освоению веб-разработки,
открывающий путь к созданию современных и профессиональных веб-ресурсов.

12.

Список литературы:
-MDN Web Docs: HTML: HyperText Markup Language
(Документация и справочные материалы по HTML от Mozilla.)
-W3Schools: HTML Tutorial
(Подробный учебник по HTML с примерами и интерактивными
упражнениями.)
-Книга: "HTML5 и CSS3. Разработка современных веб-сайтов" —
Автор: Бен Фрейн
(Руководство по современному HTML и CSS.)
-Официальная спецификация HTML5: WHATWG HTML Living
Standard
(Технический стандарт HTML, поддерживаемый WHATWG.)
-Книга: "HTML и CSS: Разработка и дизайн веб-сайтов" — Автор:
Джон Дакетт
(Пособие для начинающих с иллюстрациями и примерами.)
-Википедия: HTML
(Общее описание языка разметки HTML, история и его развитие.)

13.

Спасибо за
внимание!

English Русский Rules