Веб-технология. Информатика для СПО

ВЕБ-СТРАНИЦА
Web-страницы – это специальные файлы, написанные на языке HTML (Hyper Text Markup Language – язык разметки гипертекста). Под разметкой понимается вставка в текст специальных кодов (тегов), определяющих то, как итоговый гипертекстовый документ должен отображаться специальной программой - броузером.

ЯЗЫК HTML
Язык HTML предназначен для создания системно-независимых файлов и не описывает формат документа, но описывает его структуру. Например, если в тексте встречается заголовок, то код HTML просто указывает, что соответствующий фрагмент является заголовком. Получив такой код, программа - броузер сама решает, что ей делать с заголовком. Возможно, она отобразит его более крупным шрифтом или выровнять по центру экрана. Если этот текст будет воспроизведен синтезатором речи, то синтезатор использует этот код, чтобы повысить громкость и сделать необходимую паузу.

ЯЗЫК HTML
Язык HTML представляет собой компьютерный язык, в некотором смысле родственный языкам программирования. Он включает достаточно строгие правила, которые необходимо соблюдать, чтобы получить правильные результаты.

ЯЗЫК HTML
Язык HTML появился одновременно со службой World Wide Web и развивался вместе с ней. Он является основой World Wide Web и одновременно причиной ее широчайшей популярности.

HTML- ФАЙЛ
HTML- файл – текстовый файл, имеющий расширение .htm или .html Web-страница хранится в виде HTML- файла. Для создания HTML- файла могут использоваться как простые текстовые редакторы, такие как Блокнот или Word Pad, так и редакторы Web.

ОСНОВНЫЕ ТЕРМИНЫ HTML
Перед началом работы с HTML вы, вероятно, столкнётесь с новыми и часто странными терминами. Со временем вы ознакомитесь со всеми ними подробнее, но сейчас вы должны начать с трёх основных терминов HTML — элементы, теги и атрибуты.

ЭЛЕМЕНТЫ
Элементы указывают, как определять структуру и содержимое объектов на странице. Некоторые из часто используемых элементов включают в себя несколько уровней заголовков (определены как элементы с
до
) и абзацев (определены как
); в список можно включить элементы
,
,
,
и
и многие другие.
Элементы идентифицируются с помощью угловых скобок <>, окружающих имя элемента. Таким образом, элемент будет выглядеть так:

ТЕГИ
Добавление угловые скобок < и > вокруг элемента создаёт то, что известно как тег. Теги наиболее часто встречаются в парах открывающих и закрывающих тегов.
Открывающий тег отмечает начало элемента. Он состоит из символа <, затем идёт имя элемента и завершается символом >; например,
.
Закрывающий тег отмечает конец элемента. Он состоит из символа < с последующей косой чертой и именем элемента и завершается символом >; например,
.
Содержимое, которое находится между открывающим и закрывающим тегами, является содержимым этого элемента. Ссылка, к примеру, будет иметь открывающий тег
и закрывающий тег
. Что находится между этими двумя тегами будет содержимым ссылки.
Так, теги ссылок будут выглядеть примерно так:
...

АТРИБУТЫ
Атрибуты являются свойствами, применяемыми для предоставления дополнительной информации об элементе. Наиболее распространённые атрибуты включают в себя атрибут id, который идентифицирует элемент; атрибут class, который классифицирует элемент; атрибут src, который определяет источник встраиваемого содержимого; и атрибут href, который указывает ссылку на связанный ресурс.
Атрибуты определяются в открывающем теге после имени элемента. В общем, атрибуты включают в себя имя и значение. Формат для этих атрибутов состоит из имени атрибута со знаком равенства за ним, а затем в кавычках идёт значение атрибута. Например, элемент
с атрибутом href будет выглядеть следующим образом:
Shay Howe

ДЕМОНСТРАЦИЯ ОСНОВНЫХ ТЕРМИНОВ HTM
Данный код будет отображать текст «Shay Howe» на веб-странице и при щелчке на этот текст ведёт пользователя на http://shayhowe.com. Элемент ссылки объявлен с помощью открывающего тега
и закрывающего тега
охватывающих текст, а также атрибута и значения адреса ссылки объявленной через href="http://shayhowe.com" в открывающем теге.

СТРУКТУРА ДОКУМЕНТА HTML
Документ HTML состоит из основного документа и тегов разметки, которые являются наборами обычных символов.
Все документы HTML имеют строго заданную структуру. Документ должен начинаться с тега и заканчиваться соответствующим закрывающим тегом . Эта пара тегов сообщает броузеру, что перед ним действительно документ HTML.
Документ HTML состоит из раздела заголовков и тела документа, идущих именно в таком порядке. Раздел заголовков заключён между тегами и и содержит информацию о документе в целом. В частности, этот раздел должен содержать внутри себя теги и , между которыми размещают «официальный» заголовок документа.

СТРУКТУРА ДОКУМЕНТА HTML
Сам текст документа располагается в теле документа. Тело документа располагается между тегами и BODY>. На практике определить место положения этих основных тегов можно и при их отсутствии. Поэтому, если теги , и , а также соответствующие им закрывающие теги опущены, то программа - броузер может сама определить то место, где они должны были находиться. Но всё-таки при создании Web-страниц опускать эти теги не рекомендуется.

ПРОСТЕЙШИЙ ПРАВИЛЬНЫЙ ДОКУМЕНТ HTML
Заголовок документа /TITLE><br>< /HEAD><br><BODY><br>Этот текст можно прочитать на экране<br><</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="ПРОСТЕЙШИЙ ПРАВИЛЬНЫЙ ДОКУМЕНТ HTML Заголовок документа /TITLE> Этот текст можно прочитать на экране" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1102486/slide-13.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1102486/slide-13.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1102486/slide-13.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-13.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-13.jpg" class="slides-image"><!----><div class="slides-content">/BODY><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide15" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1102486/slide-14.jpg" target="_blank" rel="noopener">Слайд 15</a><h3 class="slides-content text-center font-bold"><div><p>ТЕГИ HTML<br><p>Язык HTML состоит из специальных разметочных указателей – тегов. Их также</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="ТЕГИ HTML Язык HTML состоит из специальных разметочных указателей – тегов. Их" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1102486/slide-14.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1102486/slide-14.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1102486/slide-14.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-14.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-14.jpg" class="slides-image"><!----><div class="slides-content">можно назвать командами, инструкциями или кодами языка HTML.<br>Тег – инструкция броузеру, указывающая способ отображения текста. Все теги начинаются с символа «меньше» (<) и заканчиваются символом «больше» (>). Пару этих символов иногда называют угловыми скобками. После открывающей угловой скобки идет ключевое слово, определяющее тег.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide16" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1102486/slide-15.jpg" target="_blank" rel="noopener">Слайд 16</a><h3 class="slides-content text-center font-bold"><div><p>ТЕГИ HTML<br><p>Каждый тег в языке HTML имеет специальное назначение. Регистр букв в</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="ТЕГИ HTML Каждый тег в языке HTML имеет специальное назначение. Регистр букв" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1102486/slide-15.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1102486/slide-15.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1102486/slide-15.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-15.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-15.jpg" class="slides-image"><!----><div class="slides-content">названиях тегов не имеет значения – можно использовать как строчные, так и прописные буквы, хотя общепринято использовать прописные буквы, чтобы теги отличались от обычного текста документа.<br>Существует два типа тегов – парные и непарные.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide17" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1102486/slide-16.jpg" target="_blank" rel="noopener">Слайд 17</a><h3 class="slides-content text-center font-bold"><div><p>ТЕГИ HTML<br><p>Парные теги – открывающие и закрывающие, аналогичные круглым скобкам алгебраического выражения. Они</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="ТЕГИ HTML Парные теги – открывающие и закрывающие, аналогичные круглым скобкам алгебраического" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1102486/slide-16.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1102486/slide-16.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1102486/slide-16.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-16.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-16.jpg" class="slides-image"><!----><div class="slides-content">влияют на текст с того места, где употреблены, до того места, где указан признак окончания их действия (закрывающие теги начинаются с символа косой черты (/).<br>Например, <HTML> </HTML>, <P> </P>, <H3> </H3><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide18" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1102486/slide-17.jpg" target="_blank" rel="noopener">Слайд 18</a><h3 class="slides-content text-center font-bold"><div><p>ТЕГИ HTML<br><p>Непарные теги дают разовый эффект в месте своего появления, поэтому в</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="ТЕГИ HTML Непарные теги дают разовый эффект в месте своего появления, поэтому" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1102486/slide-17.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1102486/slide-17.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1102486/slide-17.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-17.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-17.jpg" class="slides-image"><!----><div class="slides-content">закрывающем теге нет необходимости.<br>Например, <BR>, <META>, <IMG><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide19" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1102486/slide-18.jpg" target="_blank" rel="noopener">Слайд 19</a><h3 class="slides-content text-center font-bold"><div><p>ТЕГИ HTML<br><p>Тег <META> несет служебную информацию о Web-сайте и не отображается в экране</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="ТЕГИ HTML Тег несет служебную информацию о Web-сайте и не отображается в" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1102486/slide-18.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1102486/slide-18.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1102486/slide-18.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-18.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-18.jpg" class="slides-image"><!----><div class="slides-content">браузера: это информация о кодировке Web-странички, об авторе, а также набор ключевых слов для поиска, отображающих содержание сайта.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide20" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1102486/slide-19.jpg" target="_blank" rel="noopener">Слайд 20</a><h3 class="slides-content text-center font-bold"><div><p>НАСТРОЙКА СТРУКТУРЫ ДОКУМЕНТА HTML<br><p>HTML-документы представляют собой простые текстовые документы, сохранённые с расширением</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="НАСТРОЙКА СТРУКТУРЫ ДОКУМЕНТА HTML HTML-документы представляют собой простые текстовые документы, сохранённые с" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1102486/slide-19.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1102486/slide-19.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1102486/slide-19.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-19.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-19.jpg" class="slides-image"><!----><div class="slides-content">.html, а не .txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании. К сожалению, сюда не входит Microsoft Word или Pages, поскольку это сложные редакторы. Двумя наиболее популярными текстовыми редакторами для написания HTML и CSS являются Dreamweaver и Sublime Text. Бесплатные альтернативы также Notepad++ для Windows и TextWrangler для Mac.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide21" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1102486/slide-20.jpg" target="_blank" rel="noopener">Слайд 21</a><h3 class="slides-content text-center font-bold"><div><p>НАСТРОЙКА СТРУКТУРЫ ДОКУМЕНТА HTML<br><p>Все HTML-документы содержат обязательную структуру, которая включает следующие декларации</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="НАСТРОЙКА СТРУКТУРЫ ДОКУМЕНТА HTML Все HTML-документы содержат обязательную структуру, которая включает следующие" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1102486/slide-20.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1102486/slide-20.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1102486/slide-20.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-20.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-20.jpg" class="slides-image"><!----><div class="slides-content">и элементы: <!DOCTYPE html>, <html>, <head> и <body>.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide22" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1102486/slide-21.jpg" target="_blank" rel="noopener">Слайд 22</a><h3 class="slides-content text-center font-bold"><div><p>НАСТРОЙКА СТРУКТУРЫ ДОКУМЕНТА HTML<br><p>Объявление типа документа или <!DOCTYPE html> находится в самом начале HTML-документа</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="НАСТРОЙКА СТРУКТУРЫ ДОКУМЕНТА HTML Объявление типа документа или находится в самом начале" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1102486/slide-21.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1102486/slide-21.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1102486/slide-21.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-21.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-21.jpg" class="slides-image"><!----><div class="slides-content">и сообщает браузерам, какая версия HTML применяется. Поскольку мы будем использовать последнюю версию HTML, наш тип документа будет просто <!DOCTYPE html>. После этого идёт элемент <html> означающий начало документа.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide23" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1102486/slide-22.jpg" target="_blank" rel="noopener">Слайд 23</a><h3 class="slides-content text-center font-bold"><div><p>НАСТРОЙКА СТРУКТУРЫ ДОКУМЕНТА HTML<br><p>Внутри <html> элемент <head> определяет верхнюю часть документа, включая разные метаданные (сопроводительная информация</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="НАСТРОЙКА СТРУКТУРЫ ДОКУМЕНТА HTML Внутри элемент определяет верхнюю часть документа, включая разные" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1102486/slide-22.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1102486/slide-22.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1102486/slide-22.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-22.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-22.jpg" class="slides-image"><!----><div class="slides-content">о странице). Содержимое внутри элемента <head> не отображается на самой веб-странице. Вместо этого он может включать название документа (который отображается в строке заголовка окна браузера), ссылки на любые внешние файлы или любые другие полезные метаданные.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide24" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1102486/slide-23.jpg" target="_blank" rel="noopener">Слайд 24</a><h3 class="slides-content text-center font-bold"><div><p>СТРУКТУРА ТИПИЧНОГО HTML-ДОКУМЕНТА<br><p><!DOCTYPE html><br><html lang="ru"><br> <head><br> <meta charset="utf-8"><br> <title>Привет, мир!
Привет, мир!
Это веб-страница.

СТРУКТУРА ТИПИЧНОГО HTML-ДОКУМЕНТА

СТРУКТУРА ТИПИЧНОГО HTML-ДОКУМЕНТА
Этот код показывает документ, начиная с объявления типа документа, , затем сразу идёт элемент . Внутри идут элементы и . Элемент содержит кодировку страницы через тег
и название документа через элемент
. Элемент <body> включает в себя заголовок через элемент <h1> и абзац текста через <р>. Поскольку и заголовок и абзац вложены в элемент <body>, они видны на веб-странице.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide27" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1102486/slide-26.jpg" target="_blank" rel="noopener">Слайд 27</a><h3 class="slides-content text-center font-bold"><div><p>СТРУКТУРА ТИПИЧНОГО HTML-ДОКУМЕНТА<br><p>Когда элемент находится внутри другого элемента, известный также как вложенный,</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="СТРУКТУРА ТИПИЧНОГО HTML-ДОКУМЕНТА Когда элемент находится внутри другого элемента, известный также как" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1102486/slide-26.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1102486/slide-26.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1102486/slide-26.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-26.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-26.jpg" class="slides-image"><!----><div class="slides-content">хорошей идеей будет добавить к нему отступ, чтобы сохранить структуру документа хорошо организованной и читабельной. В предыдущем коде оба элемента <head> и <body> вложены и сдвинуты внутри элемента <html>. Структура отступов для элементов продолжается с новыми добавленными элементами внутри <head> и <body>.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide28" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1102486/slide-27.jpg" target="_blank" rel="noopener">Слайд 28</a><h3 class="slides-content text-center font-bold"><div><p>САМОЗАКРЫВАЮЩИЕСЯ ЭЛЕМЕНТЫ<br><p>В предыдущем примере элемент <meta> был единственным тегом, который не включал закрывающий тег.</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="САМОЗАКРЫВАЮЩИЕСЯ ЭЛЕМЕНТЫ В предыдущем примере элемент был единственным тегом, который не включал" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1102486/slide-27.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1102486/slide-27.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1102486/slide-27.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-27.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-27.jpg" class="slides-image"><!----><div class="slides-content">Не переживайте, это было сделано намеренно. Не все элементы состоят из открывающих и закрывающих тегов. Некоторые элементы просто получают содержимое или поведение через атрибуты в пределах одного тега. <meta> является одним из таких элементов. Содержимое элемента <meta> в примере присваивается с помощью атрибута charset и значения. <br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide29" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1102486/slide-28.jpg" target="_blank" rel="noopener">Слайд 29</a><h3 class="slides-content text-center font-bold"><div><p>САМОЗАКРЫВАЮЩИЕСЯ ЭЛЕМЕНТЫ<br><p>К другим типичным самозакрывающимся элементам относятся:<br><embed><br><hr><br><img><br><input><br><link><br><meta><br><param><br><source><br><wbr><br></div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="САМОЗАКРЫВАЮЩИЕСЯ ЭЛЕМЕНТЫ К другим типичным самозакрывающимся элементам относятся:" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1102486/slide-28.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1102486/slide-28.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1102486/slide-28.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-28.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-28.jpg" class="slides-image"><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide30" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1102486/slide-29.jpg" target="_blank" rel="noopener">Слайд 30</a><h3 class="slides-content text-center font-bold"><div><p>АТРИБУТЫ ТЕГОВ<br><p>Открывающие теги часто могут содержать атрибуты, влияющие на эффект, создаваемый тегом.<br>Атрибуты</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="АТРИБУТЫ ТЕГОВ Открывающие теги часто могут содержать атрибуты, влияющие на эффект, создаваемый" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1102486/slide-29.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1102486/slide-29.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1102486/slide-29.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-29.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-29.jpg" class="slides-image"><!----><div class="slides-content">– это дополнительные ключевые слова, отделенные от ключевого слова тега и друг от друга пробелами.<br>Атрибуты могут иметь значения, записываемые после знака равенства (=). Всегда полезно заключать значение атрибута в кавычки (одинарные либо двойные). Строка в кавычках не должна содержать такие же кавычки внутри себя. <br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide31" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1102486/slide-30.jpg" target="_blank" rel="noopener">Слайд 31</a><h3 class="slides-content text-center font-bold"><div><p>АТРИБУТЫ ТЕГОВ<br><p>Можно опускать кавычки для значений атрибутов, которые состоят только из следующих</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="АТРИБУТЫ ТЕГОВ Можно опускать кавычки для значений атрибутов, которые состоят только из" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1102486/slide-30.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1102486/slide-30.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1102486/slide-30.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-30.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-30.jpg" class="slides-image"><!----><div class="slides-content">символов:<br>символов английского алфавита;<br>цифр (0-9);<br>промежутков времени;<br>дефисов (-).<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide32" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1102486/slide-31.jpg" target="_blank" rel="noopener">Слайд 32</a><h3 class="slides-content text-center font-bold"><div><p>АТРИБУТЫ ТЕГОВ<br><p>Таким образом, WIDTH=80 и ALIGN=CENTER - разрешенное сокращение для WIDTH="80" и ALIGN="CENTER".
Закрывающие теги не содержат атрибутов.<br>Примеры. <FONT fase=”arial”> </FONT><br><TABLE width=”50%” bgcolor=”#00CC99”><br></div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="АТРИБУТЫ ТЕГОВ Таким образом, WIDTH=80 и ALIGN=CENTER - разрешенное сокращение для WIDTH="80"" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1102486/slide-31.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1102486/slide-31.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1102486/slide-31.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-31.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-31.jpg" class="slides-image"><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide33" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1102486/slide-32.jpg" target="_blank" rel="noopener">Слайд 33</a><h3 class="slides-content text-center font-bold"><div><p>КОММЕНТАРИИ<br><p>Подобно тому, как во всех языках программирования есть возможность внесения в программу</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="КОММЕНТАРИИ Подобно тому, как во всех языках программирования есть возможность внесения в" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1102486/slide-32.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1102486/slide-32.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1102486/slide-32.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-32.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-32.jpg" class="slides-image"><!----><div class="slides-content">комментариев (текстовых строк, не являющихся частью программы), есть она и в языке HTML. Начинается комментарий со специального тега . Комментарий может включать в себя любые символы, кроме символа “больше” (>), и, таким образом, не может включать в себя теги.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide34" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1102486/slide-33.jpg" target="_blank" rel="noopener">Слайд 34</a><h3 class="slides-content text-center font-bold"><div><p>ПРИНЦИП НАСЛЕДОВАНИЯ ТЕГОВ. ТЕГИ-КОНТЕЙНЕРЫ<br><p>Мы уже знаем, что теги в большинстве своем состоят</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="ПРИНЦИП НАСЛЕДОВАНИЯ ТЕГОВ. ТЕГИ-КОНТЕЙНЕРЫ Мы уже знаем, что теги в большинстве своем" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1102486/slide-33.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1102486/slide-33.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1102486/slide-33.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-33.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-33.jpg" class="slides-image"><!----><div class="slides-content">из двух частей - это открывающий (он же - содержащий атрибуты) и закрывающий, то есть, "конец" тега. Заданные в теге параметры действуют только между его началом и концом, то есть, только внутри тега:<br>текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст<br><начало 2-го тега><br>текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст<br><начало 3-го тега><br>текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст<br><Конец 3-го тега><br><Конец 2-го тега><br><Конец 1-го тега><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide35" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1102486/slide-34.jpg" target="_blank" rel="noopener">Слайд 35</a><h3 class="slides-content text-center font-bold"><div><p>ПРИНЦИП НАСЛЕДОВАНИЯ ТЕГОВ. ТЕГИ-КОНТЕЙНЕРЫ<br><p>Отступы от левого края не случайны - они автоматически</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="ПРИНЦИП НАСЛЕДОВАНИЯ ТЕГОВ. ТЕГИ-КОНТЕЙНЕРЫ Отступы от левого края не случайны - они" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1102486/slide-34.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1102486/slide-34.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1102486/slide-34.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-34.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-34.jpg" class="slides-image"><!----><div class="slides-content">выставляются программами, формирующими код HTML для упрощения его восприятия. Достаточно понимать, что чем дальше от левого края отстоит тег, тем "глубже" он лежит, тем большее количество "старших" тегов может на него действовать.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide36" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1102486/slide-35.jpg" target="_blank" rel="noopener">Слайд 36</a><h3 class="slides-content text-center font-bold"><div><p>ПРИНЦИП НАСЛЕДОВАНИЯ ТЕГОВ. ТЕГИ-КОНТЕЙНЕРЫ<br><p>Также следует заметить, что некоторые атрибуты вложенных тегов могут</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="ПРИНЦИП НАСЛЕДОВАНИЯ ТЕГОВ. ТЕГИ-КОНТЕЙНЕРЫ Также следует заметить, что некоторые атрибуты вложенных тегов" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1102486/slide-35.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1102486/slide-35.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1102486/slide-35.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-35.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-35.jpg" class="slides-image"><!----><div class="slides-content">воздействовать и на вышестоящие, "старшие" теги. Например, это типично для таблиц, вложенных одна в другую.
Если у внутренней таблицы размер задан 100 пикселов, то у внешней не может быть размера меньше 100 пикселов + толщина рамки. Таким образом, вложенная таблица как бы "распирает" ту, в которую она вложена. При этом, даже если у нее не задан размер, а количество текста в ней значительно, она будет распирать "старшую" таблицу на такой размер, который необходим для отображения соответствующего количества строк текста. Это называется "обратная связь".<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide37" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1102486/slide-36.jpg" target="_blank" rel="noopener">Слайд 37</a><h3 class="slides-content text-center font-bold"><div><p>ПРАКТИЧЕСКАЯ РАБОТА «СОЗДАНИЕ ПРОСТЕЙШЕЙ WEB-СТРАНИЦЫ»<br><p>Цель: научиться создавать Web-страницы в текстовом редакторе Блокнот.<br>Указания к выполнению<br>Откройте текстовый</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="ПРАКТИЧЕСКАЯ РАБОТА «СОЗДАНИЕ ПРОСТЕЙШЕЙ WEB-СТРАНИЦЫ» Цель: научиться создавать Web-страницы в текстовом редакторе" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1102486/slide-36.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1102486/slide-36.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1102486/slide-36.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-36.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-36.jpg" class="slides-image"><!----><div class="slides-content">редактор Блокнот.<br>Наберите в нём структуру HTML-документа, которая приведена ниже:<br>О братьях наших меньших.<br>Здесь будет размещено содержание Web-страницы<br>Сохраните файл, присвоив ему имя index.htm.<br>Откройте созданный файл. Вы увидите, как выглядит созданный вами файл в окне браузера.<br>Закройте браузер.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide38" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1102486/slide-37.jpg" target="_blank" rel="noopener">Слайд 38</a><h3 class="slides-content text-center font-bold"><div><p>ПРАКТИЧЕСКАЯ РАБОТА «СОЗДАНИЕ ПРОСТЕЙШЕЙ WEB-СТРАНИЦЫ»<br><p>Вернитесь к сохранённому в Блокноте файлу.<br>Внесите в него следующие</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="ПРАКТИЧЕСКАЯ РАБОТА «СОЗДАНИЕ ПРОСТЕЙШЕЙ WEB-СТРАНИЦЫ» Вернитесь к сохранённому в Блокноте файлу. Внесите" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1102486/slide-37.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1102486/slide-37.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1102486/slide-37.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-37.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-37.jpg" class="slides-image"><!----><div class="slides-content">изменения: вместо слов «Здесь будет размещено содержание Web-страницы», наберите следующие: Это моя первая страничка.<br>В строке <TITLE> укажите: «Домашняя страничка (ваше имя и фамилия)».<br>Сохраните файл как page2.htm.<br>Просмотрите результат в браузере, при необходимости отредактируйте файл при помощи Блокнота.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide39" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/1102486/slide-38.jpg" target="_blank" rel="noopener">Слайд 39</a><h3 class="slides-content text-center font-bold"><div><p>ПРИМЕР РАБОТЫ №1<br><p><!DOCTYPE html><br><html lang="ru"><br> <head><br> <meta charset="utf-8"><br> <title>Домашняя страничка (ваше имя</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="ПРИМЕР РАБОТЫ №1 Домашняя страничка (ваше имя и фамилия) О братьях наших" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1102486/slide-38.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1102486/slide-38.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1102486/slide-38.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-38.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1102486/slide-38.jpg" class="slides-image"><!----><div class="slides-content">и фамилия)
О братьях наших меньших.
Здесь будет размещено содержание Web-страницы.
Это моя первая страничка.
Это веб-страница.

ЗАДАНИЕ №2. СОХРАНЕНИЕ ТЕКСТОВОГО ДОКУМЕНТА В КАЧЕСТВЕ ВЕБ-СТРАНИЦЫ
Наберите в текстовом процессоре Word следующий текст разными стилями:
О братьях наших меньших. - Заголовок 1
Здесь будет размещено содержание
Web-страницы. – Заголовок 2
Это моя первая страничка. – Заголовок 3
Это веб-страница. - Обычный

ЗАДАНИЕ №2. СОХРАНЕНИЕ ТЕКСТОВОГО ДОКУМЕНТА В КАЧЕСТВЕ ВЕБ-СТРАНИЦЫ
Сохраните полученный документ, как веб-страницу.
Просмотрите текст полученной веб-страницы в текстовом редакторе или браузере. Сравните страницы полученные двумя способами.

ФРАГМЕНТ ВЕБ-СТРАНИЦЫ ПОЛУЧЕННОЙ ПРИ ПОМОЩИ ГРАФИЧЕСКОГО РЕДАКТОРА
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
xmlns="http://www.w3.org/TR/REC-html40"> name=ProgId content=Word.Document>
… пропущены описание различных стилей ….
О братьях наших меньших
Здесь будет размещено содержание
Web
-страницы
Это моя первая страничка
Это веб-страница. - Обычный