Презентация

Тег

Тег содержит метаданные о документе, такие как заголовок и ссылки на стили.

Заголовок страницы () </li> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> Кодировка документа (<meta charset>) </li> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> Ссылки на стили (<link>) </li> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> Скрипты (<script>) </li> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> Описание страницы для поисковых систем (<meta name="description">) </li> </ul> </div> </div> </div> </div> <div class="relative border-1 border-s-4 shadow-lg rounded-lg p-5 notpreview"> <p class="editable" contenteditable="true">На этом слайде мы рассмотрим важный элемент HTML-документа — тег <head>. Этот тег содержит метаданные, которые не отображаются на странице, но играют ключевую роль в её функционировании. Внутри тега <head> мы можем указать заголовок страницы, который будет виден во вкладке браузера, определить кодировку документа, ссылки на внешние стили и скрипты, а также другие важные данные, такие как описание страницы для поисковых систем. Понимание структуры тега <head> поможет вам создавать более эффективные и организованные веб-страницы.</p> <span class="time-to-read absolute bottom-2 right-2 text-sm text-gray-500 notprint">Чтение займет 89 секунд</span> </div> <div class="flex justify-center notprint"> <button class="add-block p-2 bg-blue-500 text-white rounded-full p-1 h-12 w-12">+</button> </div> </div> <div class="block-wrapper w-a4-landscape-width h-a4-landscape-height p-4 print:w-a4-landscape-width print:h-a4-landscape-height"> <div class="relative aspect-[16/9] border-2 border-black shadow-lg rounded-lg overflow-hidden"> <div class="absolute inset-0 bg-center bg-no-repeat bg-cover bg-[url('https://img.freepik.com/free-photo/man-putting-ballot-his-pocket_23-2148265572.jpg')]"> <div class="relative z-20 max-w-screen-lg mx-auto h-full flex items-center px-8 sm:px-12 md:px-16 lg:px-20 bg-white/70"> <div class="w-3/3 space-y-6"> <h2 class=" font-lxgw-wenkai-tc-regular text-5xl mb-8 leading-tight tracking-tight transition-transform transform hover:scale-105 duration-300 text-green-950" contenteditable="true"> Тег <body> </h2> <p class=" font-lxgw-wenkai-tc-regular text-base sm:text-lg lg:text-xl leading-relaxed transition-colors duration-300 hover:text-gray-700 text-green-800" contenteditable="true"> Тег <body> содержит видимый контент страницы. </p> </div> </div> </div> </div> <div class="relative border-1 border-s-4 shadow-lg rounded-lg p-5 notpreview"> <p class="editable" contenteditable="true">Сегодня мы поговорим о теге <body> в HTML. Этот тег является одним из ключевых элементов любой веб-страницы. Внутри тега <body> размещается весь видимый контент, который пользователи видят на экране. Это может быть текст, изображения, видео, ссылки и многое другое. Без тега <body> веб-страница была бы пустой, и пользователи не увидели бы ничего интересного. Поэтому, когда вы создаете веб-страницу, обязательно размещайте все видимые элементы внутри тега <body>.</p> <span class="time-to-read absolute bottom-2 right-2 text-sm text-gray-500 notprint">Чтение займет 77 секунд</span> </div> <div class="flex justify-center notprint"> <button class="add-block p-2 bg-blue-500 text-white rounded-full p-1 h-12 w-12">+</button> </div> </div> <div class="block-wrapper w-a4-landscape-width h-a4-landscape-height p-4 print:w-a4-landscape-width print:h-a4-landscape-height"> <div class="relative aspect-[16/9] border-2 border-black shadow-lg rounded-lg overflow-hidden"> <div class="absolute inset-0 bg-center bg-no-repeat bg-cover bg-[url('https://img.freepik.com/free-photo/gender-fluid-person-holding-pronoun-isolated-blue_23-2149030515.jpg')]"> <div class="relative z-20 max-w-screen-lg mx-auto h-full flex items-center px-8 sm:px-12 md:px-16 lg:px-20 bg-white/70"> <div class="w-3/3 space-y-6"> <h2 class=" font-lxgw-wenkai-tc-regular text-5xl mb-8 leading-tight tracking-tight transition-transform transform hover:scale-105 duration-300 text-green-950" contenteditable="true"> Тег <h1> </h2> <p class=" font-lxgw-wenkai-tc-regular text-base sm:text-lg lg:text-xl leading-relaxed transition-colors duration-300 hover:text-gray-700 text-green-800" contenteditable="true"> Тег <h1> используется для создания заголовков первого уровня. </p> </div> </div> </div> </div> <div class="relative border-1 border-s-4 shadow-lg rounded-lg p-5 notpreview"> <p class="editable" contenteditable="true">Сегодня мы поговорим о теге <h1>, который является одним из ключевых элементов в HTML. Тег <h1> используется для создания заголовков первого уровня, которые обычно являются главными заголовками страницы. Этот тег помогает структурировать контент, делая его более читаемым и понятным. Важно помнить, что на каждой странице рекомендуется использовать только один тег <h1>, чтобы подчеркнуть основное содержание страницы.</p> <span class="time-to-read absolute bottom-2 right-2 text-sm text-gray-500 notprint">Чтение займет 70 секунд</span> </div> <div class="flex justify-center notprint"> <button class="add-block p-2 bg-blue-500 text-white rounded-full p-1 h-12 w-12">+</button> </div> </div> <div class="block-wrapper w-a4-landscape-width h-a4-landscape-height p-4 print:w-a4-landscape-width print:h-a4-landscape-height"> <div class="relative aspect-[16/9] border-2 border-black shadow-lg rounded-lg overflow-hidden"> <div class="absolute inset-0 bg-center bg-no-repeat bg-cover bg-[url('https://img.freepik.com/free-photo/hands-holding-letter-p_53876-63701.jpg')]"> <div class="relative z-20 max-w-screen-lg mx-auto h-full flex items-center px-8 sm:px-12 md:px-16 lg:px-20 bg-white/70"> <div class="w-3/3 space-y-6"> <h2 class=" font-lxgw-wenkai-tc-regular text-5xl mb-8 leading-tight tracking-tight transition-transform transform hover:scale-105 duration-300 text-green-950" contenteditable="true"> Тег <p> </h2> <p class=" font-lxgw-wenkai-tc-regular text-base sm:text-lg lg:text-xl leading-relaxed transition-colors duration-300 hover:text-gray-700 text-green-800" contenteditable="true"> Тег <p> используется для создания параграфов текста. </p> </div> </div> </div> </div> <div class="relative border-1 border-s-4 shadow-lg rounded-lg p-5 notpreview"> <p class="editable" contenteditable="true">Сегодня мы поговорим о теге <p> в HTML. Этот тег используется для создания параграфов текста, которые являются основным контентом веб-страницы. Параграфы помогают структурировать текст, делая его более читаемым и понятным. Давайте рассмотрим, как это работает на практике.</p> <span class="time-to-read absolute bottom-2 right-2 text-sm text-gray-500 notprint">Чтение займет 45 секунд</span> </div> <div class="flex justify-center notprint"> <button class="add-block p-2 bg-blue-500 text-white rounded-full p-1 h-12 w-12">+</button> </div> </div> <div class="block-wrapper w-a4-landscape-width h-a4-landscape-height p-4 print:w-a4-landscape-width print:h-a4-landscape-height"> <div class="relative aspect-[16/9] border-2 border-black shadow-lg rounded-lg overflow-hidden"> <div class="absolute inset-0 bg-center bg-no-repeat bg-cover bg-[url('https://img.freepik.com/free-photo/blue-gift-tag-with-curly-ribbon_1101-623.jpg')]"> <div class="relative z-20 max-w-screen-lg mx-auto h-full flex items-center px-8 sm:px-12 md:px-16 lg:px-20 bg-white/70"> <div class="w-3/3 space-y-6"> <h2 class=" font-lxgw-wenkai-tc-regular text-5xl mb-8 leading-tight tracking-tight transition-transform transform hover:scale-105 duration-300 text-green-950" contenteditable="true"> Тег <a> </h2> <p class=" font-lxgw-wenkai-tc-regular text-base sm:text-lg lg:text-xl leading-relaxed transition-colors duration-300 hover:text-gray-700 text-green-800" contenteditable="true"> Тег <a> используется для создания гиперссылок. </p> </div> </div> </div> </div> <div class="relative border-1 border-s-4 shadow-lg rounded-lg p-5 notpreview"> <p class="editable" contenteditable="true">Сегодня мы поговорим о теге <a>, который является одним из самых важных в HTML. Тег <a> используется для создания гиперссылок, которые позволяют пользователям переходить с одной страницы на другую или на другие ресурсы в интернете. Этот тег имеет атрибут 'href', который указывает на адрес, куда будет вести ссылка. Например, если вы хотите создать ссылку на сайт 'example.com', вы напишете <a href='http://example.com'>Example</a>. Таким образом, пользователь, кликнув на слово 'Example', перейдет на указанный сайт.</p> <span class="time-to-read absolute bottom-2 right-2 text-sm text-gray-500 notprint">Чтение займет 86 секунд</span> </div> <div class="flex justify-center notprint"> <button class="add-block p-2 bg-blue-500 text-white rounded-full p-1 h-12 w-12">+</button> </div> </div> <div class="block-wrapper w-a4-landscape-width h-a4-landscape-height p-4 print:w-a4-landscape-width print:h-a4-landscape-height"> <div class="relative aspect-[16/9] border-2 border-black shadow-lg rounded-lg overflow-hidden"> <div class="absolute inset-0 bg-center bg-no-repeat bg-cover bg-[url('https://img.freepik.com/free-photo/blue-gift-tag-with-curly-ribbon_1101-623.jpg')]"> <div class="relative z-20 max-w-screen-lg mx-auto h-full flex items-center px-8 sm:px-12 md:px-16 lg:px-20 bg-white/70"> <div class="w-3/3 space-y-6"> <h2 class=" font-lxgw-wenkai-tc-regular text-5xl mb-8 leading-tight tracking-tight transition-transform transform hover:scale-105 duration-300 text-green-950" contenteditable="true"> Атрибуты в HTML </h2> <p class=" font-lxgw-wenkai-tc-regular text-base sm:text-lg lg:text-xl leading-relaxed transition-colors duration-300 hover:text-gray-700 text-green-800" contenteditable="true"> Атрибуты предоставляют дополнительную информацию о элементах HTML. </p> </div> </div> </div> </div> <div class="relative border-1 border-s-4 shadow-lg rounded-lg p-5 notpreview"> <p class="editable" contenteditable="true">Сегодня мы поговорим об атрибутах в HTML. Атрибуты — это дополнительные параметры, которые можно добавлять к HTML-элементам. Они предоставляют дополнительную информацию о том, как элемент должен быть отображен или как он должен себя вести. Например, атрибут href в теге <a> указывает на URL, куда ведет ссылка. Атрибуты пишутся внутри открывающего тега элемента и состоят из имени и значения, разделенных знаком равенства.</p> <span class="time-to-read absolute bottom-2 right-2 text-sm text-gray-500 notprint">Чтение займет 70 секунд</span> </div> <div class="flex justify-center notprint"> <button class="add-block p-2 bg-blue-500 text-white rounded-full p-1 h-12 w-12">+</button> </div> </div> <div class="block-wrapper w-a4-landscape-width h-a4-landscape-height p-4 print:w-a4-landscape-width print:h-a4-landscape-height"> <div class="relative aspect-[16/9] border-2 border-black shadow-lg rounded-lg overflow-hidden"> <div class="absolute inset-0 bg-center bg-no-repeat bg-cover bg-[url('https://img.freepik.com/free-photo/create-website-layout-blank-banner_53876-132284.jpg')]"> <div class="relative z-20 max-w-screen-lg mx-auto h-full flex items-center px-8 sm:px-12 md:px-16 lg:px-20 bg-white/70"> <div class="w-3/3 space-y-6"> <h2 class=" font-lxgw-wenkai-tc-regular text-5xl mb-8 leading-tight tracking-tight transition-transform transform hover:scale-105 duration-300 text-green-950" contenteditable="true"> Пример HTML документа </h2> <p class=" font-lxgw-wenkai-tc-regular text-base sm:text-lg lg:text-xl leading-relaxed transition-colors duration-300 hover:text-gray-700 text-green-800" contenteditable="true"> Пример простого HTML документа с использованием основных тегов. </p> <ul class="list-disc list-inside space-y-2 text-black text-base sm:text-lg lg:text-xl leading-relaxed font-lxgw-wenkai-tc-regular pl-4 "> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> Тег <html> — корневой элемент документа. </li> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> Тег <head> — содержит метаданные и заголовок страницы. </li> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> Тег <body> — основное содержимое страницы. </li> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> Тег <h1> — заголовок первого уровня. </li> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> Тег <p> — параграф текста. </li> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> Тег <a> — ссылка на другую страницу или ресурс. </li> </ul> </div> </div> </div> </div> <div class="relative border-1 border-s-4 shadow-lg rounded-lg p-5 notpreview"> <p class="editable" contenteditable="true">Сегодня мы рассмотрим пример простого HTML документа, чтобы понять, как основные теги работают вместе. HTML — это язык разметки, который используется для создания веб-страниц. Давайте разберем каждый элемент этого документа, чтобы увидеть, как он структурирован и как каждый тег влияет на отображение контента.</p> <span class="time-to-read absolute bottom-2 right-2 text-sm text-gray-500 notprint">Чтение займет 52 секунд</span> </div> <div class="flex justify-center notprint"> <button class="add-block p-2 bg-blue-500 text-white rounded-full p-1 h-12 w-12">+</button> </div> </div> <div class="block-wrapper w-a4-landscape-width h-a4-landscape-height p-4 print:w-a4-landscape-width print:h-a4-landscape-height"> <div class="relative aspect-[16/9] border-2 border-black shadow-lg rounded-lg overflow-hidden"> <div class="absolute inset-0 bg-center bg-no-repeat bg-cover bg-[url('https://img.freepik.com/free-photo/businessman-finger-touching-empty-search-bar_155003-22606.jpg')]"> <div class="relative z-20 max-w-screen-lg mx-auto h-full flex items-center px-8 sm:px-12 md:px-16 lg:px-20 bg-white/70"> <div class="w-3/3 space-y-6"> <h2 class=" font-lxgw-wenkai-tc-regular text-5xl mb-8 leading-tight tracking-tight transition-transform transform hover:scale-105 duration-300 text-green-950" contenteditable="true"> Валидация HTML </h2> <p class=" font-lxgw-wenkai-tc-regular text-base sm:text-lg lg:text-xl leading-relaxed transition-colors duration-300 hover:text-gray-700 text-green-800" contenteditable="true"> Валидация HTML проверяет правильность синтаксиса и структуры документа. </p> <ul class="list-disc list-inside space-y-2 text-black text-base sm:text-lg lg:text-xl leading-relaxed font-lxgw-wenkai-tc-regular pl-4 "> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> Проверка синтаксиса HTML </li> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> Обеспечение соответствия стандартам </li> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> Обнаружение и исправление ошибок </li> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> Улучшение производительности и совместимости сайта </li> </ul> </div> </div> </div> </div> <div class="relative border-1 border-s-4 shadow-lg rounded-lg p-5 notpreview"> <p class="editable" contenteditable="true">Валидация HTML — это процесс проверки вашего HTML-кода на соответствие стандартам и правильность его синтаксиса. Это важный шаг, который помогает убедиться, что ваш сайт будет корректно отображаться во всех браузерах и соответствует требованиям веб-стандартов. Используя специальные инструменты, такие как валидаторы, мы можем легко обнаружить ошибки и исправить их, чтобы наш код был чистым и эффективным.</p> <span class="time-to-read absolute bottom-2 right-2 text-sm text-gray-500 notprint">Чтение займет 68 секунд</span> </div> <div class="flex justify-center notprint"> <button class="add-block p-2 bg-blue-500 text-white rounded-full p-1 h-12 w-12">+</button> </div> </div> <div class="block-wrapper w-a4-landscape-width h-a4-landscape-height p-4 print:w-a4-landscape-width print:h-a4-landscape-height"> <div class="relative aspect-[16/9] border-2 border-black shadow-lg rounded-lg overflow-hidden"> <div class="absolute inset-0 bg-center bg-no-repeat bg-cover bg-[url('https://img.freepik.com/free-photo/businessman-finger-touching-empty-search-bar_155003-22606.jpg')]"> <div class="relative z-20 max-w-screen-lg mx-auto h-full flex items-center px-8 sm:px-12 md:px-16 lg:px-20 bg-white/70"> <div class="w-3/3 space-y-6"> <h2 class=" font-lxgw-wenkai-tc-regular text-5xl mb-8 leading-tight tracking-tight transition-transform transform hover:scale-105 duration-300 text-green-950" contenteditable="true"> HTML и CSS </h2> <p class=" font-lxgw-wenkai-tc-regular text-base sm:text-lg lg:text-xl leading-relaxed transition-colors duration-300 hover:text-gray-700 text-green-800" contenteditable="true"> HTML отвечает за структуру, а CSS — за стиль и внешний вид страницы. </p> <ul class="list-disc list-inside space-y-2 text-black text-base sm:text-lg lg:text-xl leading-relaxed font-lxgw-wenkai-tc-regular pl-4 "> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> HTML: Структура страницы </li> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> CSS: Стиль и внешний вид </li> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> Вместе: Создание полноценного веб-сайта </li> </ul> </div> </div> </div> </div> <div class="relative border-1 border-s-4 shadow-lg rounded-lg p-5 notpreview"> <p class="editable" contenteditable="true">Сегодня мы поговорим о двух ключевых технологиях, которые лежат в основе веб-разработки: HTML и CSS. HTML, или HyperText Markup Language, отвечает за структуру веб-страницы. Это как каркас здания, который определяет, где будут располагаться стены, двери и окна. CSS, или Cascading Style Sheets, наоборот, отвечает за стиль и внешний вид страницы. Это как внутренняя отделка здания, которая определяет цвет стен, тип обоев, расположение мебели и многое другое. Вместе HTML и CSS создают полноценный и привлекательный веб-сайт.</p> <span class="time-to-read absolute bottom-2 right-2 text-sm text-gray-500 notprint">Чтение займет 88 секунд</span> </div> <div class="flex justify-center notprint"> <button class="add-block p-2 bg-blue-500 text-white rounded-full p-1 h-12 w-12">+</button> </div> </div> <div class="block-wrapper w-a4-landscape-width h-a4-landscape-height p-4 print:w-a4-landscape-width print:h-a4-landscape-height"> <div class="relative aspect-[16/9] border-2 border-black shadow-lg rounded-lg overflow-hidden"> <div class="absolute inset-0 bg-center bg-no-repeat bg-cover bg-[url('https://img.freepik.com/free-photo/businessman-finger-touching-empty-search-bar_155003-22606.jpg')]"> <div class="relative z-20 max-w-screen-lg mx-auto h-full flex items-center px-8 sm:px-12 md:px-16 lg:px-20 bg-white/70"> <div class="w-3/3 space-y-6"> <h2 class=" font-lxgw-wenkai-tc-regular text-5xl mb-8 leading-tight tracking-tight transition-transform transform hover:scale-105 duration-300 text-green-950" contenteditable="true"> HTML и JavaScript </h2> <p class=" font-lxgw-wenkai-tc-regular text-base sm:text-lg lg:text-xl leading-relaxed transition-colors duration-300 hover:text-gray-700 text-green-800" contenteditable="true"> JavaScript добавляет интерактивность и динамическое поведение на веб-страницы. </p> <ul class="list-disc list-inside space-y-2 text-black text-base sm:text-lg lg:text-xl leading-relaxed font-lxgw-wenkai-tc-regular pl-4 "> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> Добавление интерактивности (например, кнопки, меню) </li> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> Создание анимаций и эффектов </li> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> Обработка событий (например, клики мыши, нажатия клавиш) </li> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> Проверка данных на стороне клиента </li> </ul> </div> </div> </div> </div> <div class="relative border-1 border-s-4 shadow-lg rounded-lg p-5 notpreview"> <p class="editable" contenteditable="true">HTML — это основа веб-страниц, но чтобы сделать их действительно интерактивными и динамичными, мы используем JavaScript. JavaScript — это язык программирования, который позволяет нам добавлять на веб-страницы различные эффекты, анимации и обработчики событий. Например, с помощью JavaScript можно создать кнопку, которая меняет цвет при наведении курсора, или форму, которая проверяет правильность введенных данных перед отправкой. Таким образом, JavaScript делает веб-страницы не просто статичными текстовыми блоками, а полноценными интерактивными приложениями.</p> <span class="time-to-read absolute bottom-2 right-2 text-sm text-gray-500 notprint">Чтение займет 94 секунд</span> </div> <div class="flex justify-center notprint"> <button class="add-block p-2 bg-blue-500 text-white rounded-full p-1 h-12 w-12">+</button> </div> </div> <div class="block-wrapper w-a4-landscape-width h-a4-landscape-height p-4 print:w-a4-landscape-width print:h-a4-landscape-height"> <div class="relative aspect-[16/9] border-2 border-black shadow-lg rounded-lg overflow-hidden"> <div class="absolute inset-0 bg-center bg-no-repeat bg-cover bg-[url('https://img.freepik.com/free-photo/woman-working-laptop_53876-163217.jpg')]"> <div class="relative z-20 max-w-screen-lg mx-auto h-full flex items-center px-8 sm:px-12 md:px-16 lg:px-20 bg-white/70"> <div class="w-3/3 space-y-6"> <h2 class=" font-lxgw-wenkai-tc-regular text-5xl mb-8 leading-tight tracking-tight transition-transform transform hover:scale-105 duration-300 text-green-950" contenteditable="true"> Создание первой веб-страницы </h2> <p class=" font-lxgw-wenkai-tc-regular text-base sm:text-lg lg:text-xl leading-relaxed transition-colors duration-300 hover:text-gray-700 text-green-800" contenteditable="true"> Шаг за шагом создадим простую веб-страницу с использованием HTML. </p> <ul class="list-disc list-inside space-y-2 text-black text-base sm:text-lg lg:text-xl leading-relaxed font-lxgw-wenkai-tc-regular pl-4 "> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> Создание базовой структуры с тегами <html>, <head> и <body>. </li> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> Добавление заголовка с помощью тега <h1>. </li> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> Вставка абзаца текста с использованием тега <p>. </li> <li contenteditable="true" class="transition-transform transform hover:translate-x-2 duration-300"> Включение изображения с помощью тега <img>. </li> </ul> </div> </div> </div> </div> <div class="relative border-1 border-s-4 shadow-lg rounded-lg p-5 notpreview"> <p class="editable" contenteditable="true">Сегодня мы с вами начнем создавать свою первую веб-страницу с использованием HTML. Это будет простой, но очень важный шаг для закрепления полученных знаний. Мы разберем каждый элемент, который нужно добавить в нашу страницу, чтобы она корректно отображалась в браузере. Давайте начнем с базовых тегов, таких как <html>, <head> и <body>. Затем мы добавим заголовок, абзац текста и, возможно, изображение. Помните, что ключ к успеху — это практика, поэтому не бойтесь экспериментировать и вносить свои изменения в код.</p> <span class="time-to-read absolute bottom-2 right-2 text-sm text-gray-500 notprint">Чтение займет 86 секунд</span> </div> <div class="flex justify-center notprint"> <button class="add-block p-2 bg-blue-500 text-white rounded-full p-1 h-12 w-12">+</button> </div> </div> <div class="block-wrapper w-a4-landscape-width h-a4-landscape-height p-4 print:w-a4-landscape-width print:h-a4-landscape-height"> <div class="relative aspect-[16/9] border-2 border-black shadow-lg rounded-lg overflow-hidden"> <div class="absolute inset-0 bg-center bg-no-repeat bg-cover bg-[url('https://img.freepik.com/free-photo/close-up-woman-holding-guitar_23-2149273068.jpg')]"> <div class="relative z-20 max-w-screen-lg mx-auto h-full flex items-center px-8 sm:px-12 md:px-16 lg:px-20 bg-white/70"> <div class="w-3/3 space-y-6"> <h2 class=" font-lxgw-wenkai-tc-regular text-5xl mb-8 leading-tight tracking-tight transition-transform transform hover:scale-105 duration-300 text-green-950" contenteditable="true"> Заключение </h2> <p class=" font-lxgw-wenkai-tc-regular text-base sm:text-lg lg:text-xl leading-relaxed transition-colors duration-300 hover:text-gray-700 text-green-800" contenteditable="true"> HTML — это фундамент веб-разработки, который позволяет создавать структурированные веб-страницы. </p> </div> </div> </div> </div> <div class="relative border-1 border-s-4 shadow-lg rounded-lg p-5 notpreview"> <p class="editable" contenteditable="true">Итак, ребята, сегодня мы с вами познакомились с основами HTML — это фундамент, на котором строится весь мир веб-разработки. HTML позволяет нам создавать структурированные веб-страницы, добавлять текст, изображения, ссылки и многое другое. Это первый шаг к тому, чтобы вы могли создавать свои собственные веб-сайты. Помните, что HTML — это как каркас дома, без которого невозможно построить ничего серьезного. Сегодня мы рассмотрели основные теги, такие как <html>, <head>, <body>, <p>, <h1> и другие. Эти знания помогут вам начать создавать свои первые веб-страницы.</p> <span class="time-to-read absolute bottom-2 right-2 text-sm text-gray-500 notprint">Чтение займет 94 секунд</span> </div> <div class="flex justify-center notprint"> <button class="add-block p-2 bg-blue-500 text-white rounded-full p-1 h-12 w-12">+</button> </div> </div> <div class="block-wrapper w-a4-landscape-width h-a4-landscape-height p-4 print:w-a4-landscape-width print:h-a4-landscape-height"> <div class="relative aspect-[16/9] border-2 border-black shadow-lg rounded-lg overflow-hidden"> <div class="absolute inset-0 bg-center bg-no-repeat bg-cover bg-[url('https://img.freepik.com/free-photo/waistup-portrait-cheerful-redhead-female-student-yellow-sweater-inviting-checkout-event-recommend_1258-126303.jpg')]"> <div class="relative z-20 max-w-screen-lg mx-auto h-full flex items-center px-8 sm:px-12 md:px-16 lg:px-20 bg-white/70"> <div class="w-3/3 space-y-6"> <h2 class=" font-lxgw-wenkai-tc-regular text-5xl mb-8 leading-tight tracking-tight transition-transform transform hover:scale-105 duration-300 text-green-950" contenteditable="true"> Призыв к действию </h2> <p class=" font-lxgw-wenkai-tc-regular text-base sm:text-lg lg:text-xl leading-relaxed transition-colors duration-300 hover:text-gray-700 text-green-800" contenteditable="true"> Попробуйте создать свою первую веб-страницу и продолжайте изучать HTML и другие веб-технологии. </p> </div> </div> </div> </div> <div class="relative border-1 border-s-4 shadow-lg rounded-lg p-5 notpreview"> <p class="editable" contenteditable="true">Сегодня мы с вами познакомились с основами HTML, языком, который лежит в основе всех веб-страниц. HTML — это простой и доступный язык разметки, который позволяет создавать структуру и оформление веб-страниц. Теперь, когда вы уже знаете основные теги и принципы работы с HTML, я призываю вас попробовать создать свою первую веб-страницу. Это может быть простая страница с вашим именем и несколькими абзацами текста. После этого, не останавливайтесь на достигнутом — продолжайте изучать HTML, а также другие веб-технологии, такие как CSS и JavaScript. Это откроет перед вами мир возможностей в области веб-разработки.</p> <span class="time-to-read absolute bottom-2 right-2 text-sm text-gray-500 notprint">Чтение займет 103 секунд</span> </div> <div class="flex justify-center notprint"> <button class="add-block p-2 bg-blue-500 text-white rounded-full p-1 h-12 w-12">+</button> </div> </div> <div class="total-time text-gray-700 mt-4 notprint"> Время для рассказа презентации: <span id="total-reading-time"></span> секунд </div> </div>  <div id="editor-panel" class="w-1/3 bg-white shadow-lg rounded-lg p-4"> <div class="space-y-4"> <h2 class="text-lg font-semibold text-gray-700">Сохранение слайдов</h2>  <div> <label class="block text-gray-600 text-sm">Тип сохранения:</label> <div class="space-y-1"> <label class="flex items-center text-sm"> <input type="radio" name="saveType" value="saveWithComments" class="text-blue-500 mr-2"> <span>С комментариями</span> </label> <label class="flex items-center text-sm"> <input type="radio" name="saveType" value="saveSlidesOnly" class="text-blue-500 mr-2"> <span>Только слайды</span> </label> </div> </div>  <div> <label class="block text-gray-600 text-sm">Формат сохранения:</label> <div class="space-y-1"> <label class="flex items-center text-sm"> <input type="radio" name="format" value="pdf" class="text-blue-500 mr-2"> <span>PDF (печать и презентации)</span> </label> <label class="flex items-center text-sm"> <input type="radio" name="format" value="pptx" class="text-blue-500 mr-2"> <span>PPTX (PowerPoint)</span> </label> </div> </div>  <div class="flex space-x-2 pt-4"> <button class="px-3 py-2 bg-blue-500 text-white text-sm rounded hover:bg-blue-600">Сохранить</button> <button class="px-3 py-2 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 pdf">Скачать на компьютер</button> </div> <div id="resdownload" class="mt-4"></div> <div id="progress-container" class="w-full bg-gray-200 h-8 mt-4 hidden"> <div id="progress-bar" class="bg-green-500 h-full w-0"></div> </div> <div id="countdown" class="text-center mt-2 hidden text-gray-700">30 секунд осталось</div> </div> </div> <script> $(document).ready(function() { $('.pdf').click(function() { // Получаем содержимое контейнера и выбранные параметры const content = $('#container').html(); // HTML содержимое контейнера // Получаем значения выбранных опций const saveType = $('input[name="saveType"]:checked').val(); const format = $('input[name="format"]:checked').val(); $('#resdownload').html('Среднее время генерации 26 секунд.'); // Отображаем прогресс-бар и таймер $('#progress-container').removeClass('hidden').addClass('block'); $('#countdown').removeClass('hidden').addClass('block'); let start=30; let timeLeft = 40; // Время отсчета в секундах const progressBar = $('#progress-bar'); const countdown = $('#countdown'); // Запускаем прогресс-бар и таймер const progressInterval = setInterval(function() { timeLeft -= 1; const progress = ((start - timeLeft) / start) * 100; progressBar.css('width', progress + '%'); countdown.html(timeLeft + ' секунд осталось'); if (timeLeft <= 0) { clearInterval(progressInterval); } }, 1000); // Обновление каждую секунду // Отправляем POST-запрос для генерации PDF с дополнительными параметрами $.post('https://upresent.ru/ajax/pdfgenerator', { action: 'generate', content: content, saveType: saveType, // Передаем выбранный тип сохранения format: format // Передаем выбранный формат }, function(response) { const taskId = response.taskId; // Получаем идентификатор задачи из ответа сервера const intervalId = setInterval(function() { $.get('https://upresent.ru/ajax/fnext/' + taskId + '/check', function(statusResponse) { if (statusResponse.status === 'completed') { // Если файл готов, останавливаем проверку, прогресс-бар и обратный отсчет clearInterval(intervalId); clearInterval(progressInterval); progressBar.css('width', '100%'); countdown.html('Генерация завершена'); // Добавляем ссылку для скачивания файла $('#resdownload').html('<a class="sofax-default-btn pill sofax-header-btn" href="' + statusResponse.file + '" target="_blank" download="upresent_ru.pdf">Скачать файл</a>'); } }, 'json'); }, 3000); // Проверка каждые 3 секунды }, 'json'); }); }); $(document).ready(function() { function updateReadingTime($element) { var textLength = $element.text().length; var readingTime = Math.round(textLength / 6); // Ваш расчет времени var formattedTime = formatTime(readingTime); // Форматируем время $element.siblings('.time-to-read').text('Чтение займет ' + formattedTime); updateTotalReadingTime(); // Пересчитываем общее время } // Функция для расчета и форматирования общего времени чтения function updateTotalReadingTime() { var totalTime = 0; $('.editable').each(function() { var textLength = $(this).text().length; totalTime += Math.round(textLength / 6); }); var formattedTotalTime = formatTime(totalTime); // Форматируем общее время $('.total-reading-time').text(formattedTotalTime); } // Функция для форматирования времени function formatTime(seconds) { if (seconds < 60) { return seconds + ' секунд'; } else { var minutes = Math.floor(seconds / 60); var remainingSeconds = seconds % 60; return minutes + ' мин' + (remainingSeconds > 0 ? ' и ' + remainingSeconds + ' секунд' : ''); } } // Обработчик события для каждого редактируемого блока текста $('.editable').on('input', function() { updateReadingTime($(this)); }); // Рассчитываем начальное общее время при загрузке страницы updateTotalReadingTime(); $('#fonts').on('change', function() { const selectedFont = $(this).val(); // Получаем выбранный шрифт const $span = $('.colortest'); // Находим элемент с шрифтом const currentFont = $span.data('font'); // Получаем текущий шрифт из атрибута data-font // Заменяем классы с текущим шрифтом на новый $('[class*="font-' + currentFont + '"]').each(function() { const $element = $(this); // Удаляем только существующий класс шрифта и добавляем новый if ($element.hasClass('font-' + currentFont)) { $element.removeClass('font-' + currentFont).addClass('font-' + selectedFont); } }); // Обновляем атрибут data-font на новый выбранный шрифт $span.data('font', selectedFont); }); $('#colors').on('change', function() { const selectedColor = $(this).val(); // Получаем выбранный цвет const $span = $('.colortest'); // Находим элемент с цветом const currentColor = $span.data('color'); // Получаем текущий цвет из атрибута data-color // Заменяем классы с текущим цветом на новый $('[class*="bg-' + currentColor + '-500"], [class*="text-' + currentColor + '-950"], [class*="text-' + currentColor + '-800"]').each(function() { const $element = $(this); // Удаляем только существующие классы if ($element.hasClass('bg-' + currentColor + '-500')) { $element.removeClass('bg-' + currentColor + '-500').addClass('bg-' + selectedColor + '-500'); } if ($element.hasClass('text-' + currentColor + '-950')) { $element.removeClass('text-' + currentColor + '-950').addClass('text-' + selectedColor + '-950'); } if ($element.hasClass('text-' + currentColor + '-800')) { $element.removeClass('text-' + currentColor + '-800').addClass('text-' + selectedColor + '-800'); } }); // Обновляем атрибут data-color на новый выбранный цвет $span.data('color', selectedColor); }); let typingTimer; // Таймер const doneTypingInterval = 10*1000; // 10 секунд // Общий обработчик событий для всех изменений $('#container').on('input change', function() { clearTimeout(typingTimer); // Сбрасываем таймер typingTimer = setTimeout(sendUpdateToServer, doneTypingInterval); // Устанавливаем новый таймер }); $('.save').on('click', function() { sendUpdateToServer(); alert('Сохранено'); }); // Обработчик для кнопок "+" $('#container').on('click', '.add-block', function() { // Находим родительский блок, где нажали "+" const blockWrapper = $(this).closest('.block-wrapper'); // Клонируем блок-контейнер с копируемым блоком и кнопкой "+" const newBlockWrapper = blockWrapper.clone(); // Убираем старые обработчики событий из клонированного блока newBlockWrapper.find('*').off(); newBlockWrapper.find('[contenteditable="true"]').text(''); // Вставляем новый блок сразу после текущего блока blockWrapper.after(newBlockWrapper); // Добавляем обработчики событий на новый блок attachEventsToEditableBlocks(newBlockWrapper); }); function attachEventsToEditableBlocks(wrapper) { wrapper.find('[contenteditable]').on('click', function() { // Убираем выделение с предыдущего блока $('[contenteditable]').removeClass('highlight'); // Выделяем выбранный блок $(this).addClass('highlight'); selectedBlock = $(this); updateEditorPanel(); }); } let selectedBlock = null; // Выделение элемента при наведении мыши $('[contenteditable]').on('click', function() { // Убираем выделение с предыдущего блока $('[contenteditable]').removeClass('highlight'); // Выделяем выбранный блок $(this).addClass('highlight'); selectedBlock = $(this); updateEditorPanel(); }); // Обновление панели с текущими стилями выбранного блока function updateEditorPanel() { if (!selectedBlock) return; // Получаем позицию выбранного блока var offset = selectedBlock.offset(); // координаты элемента // Получаем ширину и высоту панели const panelWidth = $('#editor-panel').outerWidth(); const panelHeight = $('#editor-panel').outerHeight(); // Располагаем панель рядом с выбранным элементом $('#editor-panel').css({ left: offset.left + selectedBlock.outerWidth() + 10, // 10px отступ справа от элемента top: offset.top + selectedBlock.outerHeight() / 2 - panelHeight / 2 // по вертикали по центру относительно элемента }); // Настроим остальные параметры панели $('#font-size').val(getTailwindFontSize(selectedBlock)); $('#font-weight').val(getTailwindFontWeight(selectedBlock)); $('#padding').val(getTailwindPadding(selectedBlock)); $('#text-align').val(getTailwindTextAlign(selectedBlock)); } // Функции для извлечения классов Tailwind function getTailwindFontSize(el) { return (el.attr('class').match(/text-\w+/) || ['text-base'])[0]; } function getTailwindFontWeight(el) { return (el.attr('class').match(/font-\w+/) || ['font-normal'])[0]; } function getTailwindPadding(el) { return (el.attr('class').match(/p-\d+/) || ['p-4'])[0]; } function getTailwindTextAlign(el) { return (el.attr('class').match(/text-(left|center|right)/) || ['text-left'])[0]; } // Применение изменений стилей в реальном времени $('#font-size').on('change', function() { if (!selectedBlock) return; selectedBlock.removeClass(function(index, className) { return (className.match(/text-\w+/g) || []).join(' '); }).addClass($(this).val()); }); $('#font-weight').on('change', function() { if (!selectedBlock) return; selectedBlock.removeClass(function(index, className) { return (className.match(/font-\w+/g) || []).join(' '); }).addClass($(this).val()); }); $('#padding').on('change', function() { if (!selectedBlock) return; selectedBlock.removeClass(function(index, className) { return (className.match(/p-\d+/g) || []).join(' '); }).addClass($(this).val()); }); $('#color').on('input', function() { if (!selectedBlock) return; selectedBlock.css('color', $(this).val()); }); $('#background-color').on('input', function() { if (!selectedBlock) return; selectedBlock.css('background-color', $(this).val()); }); $('#text-align').on('change', function() { if (!selectedBlock) return; selectedBlock.removeClass(function(index, className) { return (className.match(/text-(left|center|right)/g) || []).join(' '); }).addClass($(this).val()); }); }); </script> </div> </section>  <section class="sofax-section-padding"> <div class="container"> <div class="row"><h3>Подходящие презентации</h3></div></div> <div class="container"> <div class="row"> <div class="w-full md:w-1/2 xl:w-1/2 px-4 mb-6"> <div class="bg-white rounded-lg shadow-lg p-6 flex justify-between items-center transform transition duration-500 hover:scale-105"> <div class="flex-1"> <h4 class="text-xl font-bold mb-2"> <a target="_blank" href="https://upresent.ru/prezentaciya-yazyk-razmetki-gipertekstovyh-dokumentov-html-11644.html" class="text-blue-600 hover:text-blue-800">Язык разметки гипертекстовых документов HTML </a> </h4> <ul class="list-disc list-inside text-gray-700"> <li>Что такое HTML?</li><li>Основные теги HTML</li><li>Структура HTML-документа</li><li>Создание ссылок</li><li>Форматирование текста</li><li>Вставка изображений</li><li>Создание списков</li><li>Таблицы в HTML</li><li>Формы в HTML</li><li>Валидация HTML</li><li>HTML и CSS</li><li>HTML и JavaScript</li><li>HTML5: Новые возможности</li><li>Практика: Создание простой веб-страницы</li> </ul> </div> <div class="ml-6"> <img src="/bitrix/assets/images/service/image3.png" alt="" class="object-cover rounded-full"> </div> </div> </div> <div class="w-full md:w-1/2 xl:w-1/2 px-4 mb-6"> <div class="bg-white rounded-lg shadow-lg p-6 flex justify-between items-center transform transition duration-500 hover:scale-105"> <div class="flex-1"> <h4 class="text-xl font-bold mb-2"> <a target="_blank" href="https://upresent.ru/prezentaciya-yazyk-html-11930.html" class="text-blue-600 hover:text-blue-800">Язык HTML презентация</a> </h4> <ul class="list-disc list-inside text-gray-700"> <li>Что такое HTML?</li><li>История HTML</li><li>Структура HTML-документа</li><li>Основные теги HTML</li><li>Атрибуты в HTML</li><li>Формы в HTML</li><li>Таблицы в HTML</li><li>Стилизация с помощью CSS</li><li>Валидация HTML</li><li>HTML5: Новые возможности</li><li>Семантическая разметка</li><li>Интерактивность с JavaScript</li><li>Оптимизация для мобильных устройств</li><li>Безопасность в HTML</li><li>Доступность в HTML</li><li>Будущее HTML</li> </ul> </div> <div class="ml-6"> <img src="/bitrix/assets/images/service/image4.png" alt="" class="object-cover rounded-full"> </div> </div> </div> <div class="w-full md:w-1/2 xl:w-1/2 px-4 mb-6"> <div class="bg-white rounded-lg shadow-lg p-6 flex justify-between items-center transform transition duration-500 hover:scale-105"> <div class="flex-1"> <h4 class="text-xl font-bold mb-2"> <a target="_blank" href="https://upresent.ru/prezentaciya-osnovy-yazyka-html-25111.html" class="text-blue-600 hover:text-blue-800">Презентация Основы языка HTML </a> </h4> <ul class="list-disc list-inside text-gray-700"> <li>Что такое HTML?</li><li>Основные теги HTML</li><li>Структура HTML документа</li><li>Атрибуты в HTML</li><li>Формы в HTML</li><li>Таблицы в HTML</li><li>Списки в HTML</li><li>Изображения в HTML</li><li>Ссылки в HTML</li><li>Семантика в HTML</li> </ul> </div> <div class="ml-6"> <img src="/bitrix/assets/images/service/image4.png" alt="" class="object-cover rounded-full"> </div> </div> </div> <div class="w-full md:w-1/2 xl:w-1/2 px-4 mb-6"> <div class="bg-white rounded-lg shadow-lg p-6 flex justify-between items-center transform transition duration-500 hover:scale-105"> <div class="flex-1"> <h4 class="text-xl font-bold mb-2"> <a target="_blank" href="https://upresent.ru/prezentaciya-oformlenie-teksta-v-html-11718.html" class="text-blue-600 hover:text-blue-800">Презентация Оформление текста в HTML</a> </h4> <ul class="list-disc list-inside text-gray-700"> <li>Что такое HTML?</li><li>Основные теги для оформления текста</li><li>Пример использования тегов</li><li>Теги для заголовков</li><li>Пример заголовков</li><li>Теги для форматирования текста</li><li>Пример форматирования текста</li><li>Теги для списков</li><li>Пример списков</li><li>Теги для выделения текста</li><li>Пример выделения текста</li><li>Теги для ссылок и изображений</li><li>Пример ссылок и изображений</li> </ul> </div> <div class="ml-6"> <img src="/bitrix/assets/images/service/image3.png" alt="" class="object-cover rounded-full"> </div> </div> </div> <div class="w-full md:w-1/2 xl:w-1/2 px-4 mb-6"> <div class="bg-white rounded-lg shadow-lg p-6 flex justify-between items-center transform transition duration-500 hover:scale-105"> <div class="flex-1"> <h4 class="text-xl font-bold mb-2"> <a target="_blank" href="https://upresent.ru/prezentaciya-razmeschenie-izobrazheniy-v-htmldokumente-11728.html" class="text-blue-600 hover:text-blue-800">Презентация Размещение изображений в HTML-документе</a> </h4> <ul class="list-disc list-inside text-gray-700"> <li>Что такое HTML?</li><li>Зачем нужны изображения в HTML?</li><li>Тег <img> в HTML</li><li>Атрибуты тега <img></li><li>Пример использования тега <img></li><li>Расположение изображений</li><li>Адаптивные изображения</li><li>Оптимизация изображений</li><li>Использование CSS для оформления изображений</li><li>Пример использования CSS для оформления изображений</li><li>Использование изображений в качестве фона</li><li>Пример использования изображения в качестве фона</li><li>Использование изображений в ссылках</li><li>Пример использования изображения в качестве ссылки</li><li>Использование изображений в таблицах</li><li>Пример использования изображения в таблице</li><li>Заключение</li> </ul> </div> <div class="ml-6"> <img src="/bitrix/assets/images/service/image1.png" alt="" class="object-cover rounded-full"> </div> </div> </div> <div class="w-full md:w-1/2 xl:w-1/2 px-4 mb-6"> <div class="bg-white rounded-lg shadow-lg p-6 flex justify-between items-center transform transition duration-500 hover:scale-105"> <div class="flex-1"> <h4 class="text-xl font-bold mb-2"> <a target="_blank" href="https://upresent.ru/prezentaciya-prezentaciya-absolyutnaya-adresaciya-yacheek-tablicy-318.html" class="text-blue-600 hover:text-blue-800">"презентация"! Абсолютная адресация ячеек таблицы</a> </h4> <ul class="list-disc list-inside text-gray-700"> <li>Что такое абсолютная адресация?</li><li>Пример абсолютной адресации</li><li>Как использовать абсолютную адресацию?</li><li>Преимущества абсолютной адресации</li><li>Пример использования в биологии</li><li>Заключение</li><li>Вопросы?</li> </ul> </div> <div class="ml-6"> <img src="/bitrix/assets/images/service/image5.png" alt="" class="object-cover rounded-full"> </div> </div> </div> <div class="w-full md:w-1/2 xl:w-1/2 px-4 mb-6"> <div class="bg-white rounded-lg shadow-lg p-6 flex justify-between items-center transform transition duration-500 hover:scale-105"> <div class="flex-1"> <h4 class="text-xl font-bold mb-2"> <a target="_blank" href="https://upresent.ru/prezentaciya-obuchayuschaya-prezentaciya-po-fizicheskoy-kulture-1264.html" class="text-blue-600 hover:text-blue-800">Обучающая презентация по физической культуре</a> </h4> <ul class="list-disc list-inside text-gray-700"> <li>Что такое физическая культура?</li><li>Зачем нужна физическая культура?</li><li>Основные виды упражнений</li><li>Правила безопасности</li><li>Спортивные игры</li><li>Значение физической культуры в жизни</li><li>Как начать заниматься спортом?</li><li>Примеры успешных спортсменов</li><li>Есть вопросы?</li> </ul> </div> <div class="ml-6"> <img src="/bitrix/assets/images/service/image1.png" alt="" class="object-cover rounded-full"> </div> </div> </div> <div class="w-full md:w-1/2 xl:w-1/2 px-4 mb-6"> <div class="bg-white rounded-lg shadow-lg p-6 flex justify-between items-center transform transition duration-500 hover:scale-105"> <div class="flex-1"> <h4 class="text-xl font-bold mb-2"> <a target="_blank" href="https://upresent.ru/prezentaciya-prezentaciya-k-uroku-muzyki-vo-2-klasse-3144.html" class="text-blue-600 hover:text-blue-800">Презентация к уроку музыки во 2 классе</a> </h4> <ul class="list-disc list-inside text-gray-700"> <li>Что такое музыкальные инструменты?</li><li>Классификация инструментов</li><li>Струнные инструменты</li><li>Духовые инструменты</li><li>Ударные инструменты</li><li>Клавишные инструменты</li><li>Как звучат инструменты?</li> </ul> </div> <div class="ml-6"> <img src="/bitrix/assets/images/service/image6.png" alt="" class="object-cover rounded-full"> </div> </div> </div> </div> </div> </section> <footer class="sofax-footer-section dark-bg"> <div class="container"> <div class="sofax-footer-top"> <div class="row"> <div class="col-xl-4 col-md-12"> <div class="sofax-footer-wrap mr15"> <a href="https://upresent.ru/"><img src="/bitrix/upreslogo.png" alt=""></a> <p class="text-white">Помогаем создавать презентации для вас в <a href="#">Телеграме</a></p> </div> </div> <div class="col-md-4"> <div class="sofax-footer-menu ml-50"> <h5 class="text-white">Презентации</h5> <ul> <li><a class="text-white" target="_blank" href="https://upresent.ru/prezentaciya-operacionnaya-deyatelnost-v-logistike-na-angliyskom-yazyke-9591.html">Операционная деятельность в логистике. На английском языке презентация</a><li><a class="text-white" target="_blank" href="https://upresent.ru/prezentaciya-kompyuternye-sistemy-schisleniya-11876.html">презентация Компьютерные системы счисления </a><li><a class="text-white" target="_blank" href="https://upresent.ru/prezentaciya-yazhitel-rossii-20409.html">презентация Я-житель России pdf</a><li><a class="text-white" target="_blank" href="https://upresent.ru/prezentaciya-idut-po-voyne-devchata-pohozhie-na-parney-21136.html">презентация Идут по войне девчата, похожие на парней pptx</a> </ul> </div> </div> <div class="col-md-4"> <div class="sofax-footer-menu sofax-footer-active"> <h5 class="text-white">Категории</h5> <ul> <li class="sub-menu--item"> <a class="text-white" href="https://upresent.ru/cat/prezentacii-dlya-1-klass.html" ><span class="menu-item-text">Презентации для 1 класс</span></a> </li> <li class="sub-menu--item"> <a class="text-white" href="https://upresent.ru/cat/prezentacii-dlya-1-klassa.html" ><span class="menu-item-text">Презентации для 1 класса</span></a> </li> <li class="sub-menu--item"> <a class="text-white" href="https://upresent.ru/cat/prezentacii-dlya-10-klass.html" ><span class="menu-item-text">Презентации для 10 класс</span></a> </li> <li class="sub-menu--item"> <a class="text-white" href="https://upresent.ru/cat/prezentacii-dlya-10-klassa.html" ><span class="menu-item-text">Презентации для 10 класса</span></a> </li> </ul> </div> </div> </div> </div> <div class="sofax-footer3-wrap"> <div class="sofax-footer3-text"> <p>© 2024 upresent.ru All Rights Reserved.</p> </div> </div> </div> </footer>  <script src="/bitrix/assets/js/bootstrap.bundle.min.js"></script> <script src="/bitrix/assets/js/aos.js"></script> <script src="/bitrix/assets/js/menu/menu.js"></script> <script src="/bitrix/assets/js/isotope.pkgd.min.js"></script> <script src="/bitrix/assets/js/jquery.magnific-popup.min.js"></script> <script src="/bitrix/assets/js/swiper-bundle.min.js"></script> <script src="/bitrix/assets/js/countdown.js"></script> <script src="/bitrix/assets/js/slick.js"></script> <script src="/bitrix/assets/js/wow.min.js"></script> <script src="/bitrix/assets/js/modernizr.min.js"></script> <script src="/bitrix/assets/js/countdown.js"></script> <script src="/bitrix/assets/js/skill-bar.js"></script> <script src="/bitrix/assets/js/pricing-switcher.js"></script> <script src="/bitrix/assets/js/gsap.js"></script> <script src="/bitrix/assets/js/ScrollTrigger.js"></script> <script src="/bitrix/assets/js/SplitText.js"></script> <script src="/bitrix/assets/js/gsap-animation.js"></script>  <script src="/bitrix/assets/js/accordion.js"></script> <script src="/bitrix/assets/js/app.js"></script>  <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(99066256, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/99066256" style="position:absolute; left:-9999px;" alt="" /></div></noscript>  </body> </html>

Презентация Основы HTML

Презентацию скачать или редактировать

Основы HTML

Что такое HTML?

Основные элементы HTML

— заголовок первого уровня, используется для основного заголовка страницы.

Структура HTML документа

Тег

Тег