Твой первый сайт в Интернет

{"document": [{"text": [{"type": "string", "attributes": {"bold": true}, "string": ""}, {"type": "string", "attributes": {}, "string": "Практикум по созданию HTML сайта и его размещению в Интернет"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Аннотация"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Учебных курсов по изучению HTML довольно много. Данный курс отличается от аналогичных простотой изложения материала и своей практической направленность. Пользователь за несколько занятий сможет не только изучить основы HTML, но, также – создать свой многостраничный сайт и разместить его бесплатно в Интернет. Данный практикум не требует от учащихся каких – либо особых знаний: школьного курса информатики для старта будет вполне достаточно. Учебный материал рассчитан на возраст от 12 лет до 65+."}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Модуль 1. Урок 1. Создаем веб документ в Блокноте"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Введение. Краткая история HTML"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Язык HTML был создан Тимом Бернерсом-Ли в 90-х годах прошлого века. Изначально главной функцией первой версии HTML было корректное, без каких-либо структурных искажений, воспроизведение текста на различных устройствах вывода информации. За прошедшее время HTML претерпел существенные изменения и значительно расширил возможности верстки документов. Язык имеет несколько версий:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "HTML 1. 0 — начало 90-х годов. Единого официального стандарта языка на тот момент не было. Язык был ориентирован только на обработку текста и применение к нему атрибутов — жирный текст, курсив etc."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "HTML 2. 0 — появилась поддержка форм."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "HTML 3. 2 — появилась возможность создания таблиц, отображение математических формул, эффект обтекания изображений."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "HTML 4. 0 — были отменены некоторые элементы HTML, взамен которых было предложено использовать таблицы стилей CSS. Была добавлена поддержка скриптов и фреймов."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "HTML 5 — 2010-й год — нынешнее время. Современная (на сегодня – последняя) версия этого языка."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Создаем веб документ в Блокноте"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Далее мы научимся создавать простейшие текстовые веб документы (сайты), используя программу Блокнот, входящую во все версии ОС Windows."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Для справки"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "«"}, {"type": "string", "attributes": {"bold": true}, "string": "Блокнот"}, {"type": "string", "attributes": {}, "string": "» (Notepad) — текстовый редактор, входящий в операционные системы Windows, начиная с 1985 года. На протяжении многих лет Microsoft не обновляла свою программу, несмотря на существование бесплатных и более функциональных решений, заменяющих стандартный «Блокнот» (например, Notepad++)."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Чтобы открыть "}, {"type": "string", "attributes": {"bold": true}, "string": "Блокнот"}, {"type": "string", "attributes": {}, "string": " через меню «Пуск» в Windows 10 следует открыть основное меню «Пуск» на вкладке «Все приложения», то есть, щелкаем мышкой на значке логотипа Windows в нижней левой части экрана ПК и открываем «Все приложения» - рис. 1."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "image001.png", "filesize": 128843, "height": 482, "pic_id": 136027, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/24/image001_Lj6KdHE.jpeg", "width": 700}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 1."}, {"type": "string", "attributes": {}, "string": " Открываем мышкой меню "}, {"type": "string", "attributes": {"bold": true}, "string": "Пуск"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Далее нужно найти папку «Стандартные-Winsdows», а в ней – открыть программу «Блокнот» - рис. 2."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "image003.png", "filesize": 126675, "height": 643, "pic_id": 136048, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/24/image003_vmRRMuV.jpeg", "width": 700}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 2."}, {"type": "string", "attributes": {}, "string": " Программа "}, {"type": "string", "attributes": {"bold": true}, "string": "Блокнот"}, {"type": "string", "attributes": {}, "string": " находится в папке "}, {"type": "string", "attributes": {"bold": true}, "string": "Стандартные-Windows "}, {"type": "string", "attributes": {}, "string": "программы"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Пример 1. Наш первый текстовый веб документ"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "В программе Блокнот (или аналогичной, например, Notepad++) создайте любой текст, например, напишите текст «Мой сайт». Сохраните документ командой "}, {"type": "string", "attributes": {"bold": true}, "string": "Файл-Сохранить"}, {"type": "string", "attributes": {}, "string": " на "}, {"type": "string", "attributes": {"bold": true}, "string": "Рабочий стол"}, {"type": "string", "attributes": {}, "string": "Windows и дайте этому документу название "}, {"type": "string", "attributes": {"bold": true}, "string": "index. html"}, {"type": "string", "attributes": {}, "string": ". Тип файла – "}, {"type": "string", "attributes": {"bold": true}, "string": "Все файлы"}, {"type": "string", "attributes": {}, "string": " (это важно) – рис. 3."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "image005.png", "filesize": 53572, "height": 238, "pic_id": 136047, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/24/image005_2Dhg44t.jpeg", "width": 650}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 3."}, {"type": "string", "attributes": {}, "string": " Сохраняем текстовый документ, задаем Имя и Тип файла"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Далее мы откроем сохраненный документ с помощью любого браузера (Yandex, Opera, Google Chrome и др.) – рис. 4."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "image007.png", "filesize": 13936, "height": 165, "pic_id": 136046, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/24/image007_0BICYAA.jpeg", "width": 502}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 4."}, {"type": "string", "attributes": {}, "string": " Веб документ открыт в браузере"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Так создается простейший веб документ для Интернет. Однако, это документ неграмотный, выполненный с ошибками и не по стандарту HTML5."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Новый термин"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "HTML5 (англ. HyperText Markup Language, version 5) — язык для представления информации для всемирной паутины."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "В HTML5 существуют правила, по которым следует делать веб документы для Интернет. Например, тип документа (что это сайт, а не, например, видео) задается вHTML5 так:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<! DOCTYPE html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "А кодировка языка документа (язык документа может быть английский, русский и любой другой) задается в HTML5 так:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<meta charset= «UTF-8» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Поэтому, грамотная структура описанного выше документа Мой сайт в вHTML5 будет выглядеть так:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<! DOCTYPE html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<head>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<meta charset= «UTF-8» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<title>Мой первый текстовый документ (это название нашей, то есть, заголовок нашей веб страницы</title>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</head>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<p>Мой первый сайт (Текст оформлен как параграф. Это тело нашего документа) </p>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Как видим, создание веб документа на языке HTML сопровождаются специальными скобками: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "< (открывающая скобка) ставится в начало тега, > (закрывающая скобка) отмечает конец тега. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Новый термин"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Любой документ на языке HTML представляет собой набор команд для браузера, причём начало и конец каждой команды обозначается специальными метками, называемыми "}, {"type": "string", "attributes": {"bold": true}, "string": "тегами"}, {"type": "string", "attributes": {}, "string": ". HTML-теги это элементы компьютерной html верстки сайта. Каждый тег заключён в треугольные скобки (<…>). Писать любой тег можно в любом регистре (не важно - большими или маленькими буквами). Теги в HTML файле выполняются по порядку, столбиком: сверху - вниз."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "В веб документе всегда присутствует заголовок и тело: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "То, что между тегами <head> </head> - это заголовок документа. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "То, что между тегами <body> </body> - это тело документа."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Внутри заголовка <head> </head>, обычно используя теги <title> </title>, в которых можно прописать "}, {"type": "string", "attributes": {"bold": true}, "string": "название документа. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Вроде, все понятно. Однако, если вы сохраните наш грамотный документ и откроете его в браузере, то, возникнет такая картина (рис. 5)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "image009.png", "filesize": 8141, "height": 247, "pic_id": 136044, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/24/image009_ezA31WV.jpeg", "width": 425}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 5."}, {"type": "string", "attributes": {}, "string": " Кодировка "}, {"type": "string", "attributes": {"bold": true}, "string": "UTF-8"}, {"type": "string", "attributes": {}, "string": " не задана"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Правильно сохранять в блокноте нужно так (рис. 6)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "image011.png", "filesize": 9447, "height": 144, "pic_id": 136042, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/24/image011.jpeg", "width": 650}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 6."}, {"type": "string", "attributes": {}, "string": " Пример правильного сохранения веб документа в Блокноте"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Новый термин"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "UTF-8"}, {"type": "string", "attributes": {}, "string": " - стандарт кодирования символов. Кодировка UTF-8 является сегодня основной во всех веб-документах. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Внимание"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "В примере мы сохраняли веб документ как "}, {"type": "string", "attributes": {"bold": true}, "string": "index. html"}, {"type": "string", "attributes": {}, "string": " и это не случайно. index. html — это файл главной страницы сайта, ее традиционное название (индексный файл). Этот файл ищется по умолчанию веб-сервером и это страница по умолчанию, которую первой видит посетитель веб-сайта, которую часто называют «домашней страницей»."}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Резюме"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Итак, создать одностраничный текстовый веб документ очень просто. У текстового файла, созданного в программе Блокнот и имеющего по умолчанию расширение для файлов *. txt необходимо изменить расширение для сохраненных на диск файлов на "}, {"type": "string", "attributes": {"bold": true}, "string": "*. html."}, {"type": "string", "attributes": {}, "string": " Имя такого файла для главной страницы сайта принято писать, как index и, таким образом, здесь и далее сохраняем все наши веб документы как "}, {"type": "string", "attributes": {"bold": true}, "string": "index. html"}, {"type": "string", "attributes": {}, "string": "."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Что такое DOCTYPE в HTML5?"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Веб документ обычно начинается с записи"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<! DOCTYPE HTML>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Подобная запись указывает на тип документа, то есть, что перед нами веб документ. Это необходимо делать для того, чтобы браузер понимал, согласно какому стандарту отображать текущую веб страницу. В интернет есть специальные сервисы – "}, {"type": "string", "attributes": {"bold": true}, "string": "валидаторы"}, {"type": "string", "attributes": {}, "string": ", которые следят за сайтами, проверяя их на наличие ошибок в структуре веб документов. Этот процесс называется "}, {"type": "string", "attributes": {"bold": true}, "string": "валидацией"}, {"type": "string", "attributes": {}, "string": " сайта, то есть, проверкой сайта на ошибки кода. Естественно, что отсутствие элемента <! DOCTYPE> - это ошибка в коде сайта, требующая ее исправления. При наличии подобных ошибок браузер может не понять, согласно какому стандарту отображать веб-страницу. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Новый термин"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Сайт перед публикацией в Сеть стоит проверить на валидность, то есть на его соответствие нормам, принятым "}, {"type": "string", "attributes": {"bold": true}, "string": "Консорциумом Всемирной Паутины"}, {"type": "string", "attributes": {}, "string": " (W3C). Это единые технические стандарты, по которым должны быть созданы программы и документы, которые внедряются в Сеть Интернет. Если говорить простым языком, то в сайте не должно быть ошибок в коде, а валидность сайта можно с помощью валидаторов. Например, на https: //tools. icoder. uz/json-validator. php."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Еще раз приведем пример грамотного написания элементарной веб страницы с наиболее популярной сегодня кодировкой «utf-8»:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<! DOCTYPE html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<head>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<meta charset= «utf-8» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<title>Это заголовок</title>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</head>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Это основное содержимое страницы."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Элементы форматирования веб текста"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Форматирование "}, {"type": "string", "attributes": {}, "string": "текста – это изменение его цвета, размера, применение к нему анимации и так далее. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Заголовки "}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "В языке HTML определены 6 уровней заголовка, нумеруемых по убыванию их размера:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<H1> </H1> (самый крупный текст заголовка)"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<H2> </H2> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<H3> </H3> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<H4> </H4> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<H5> </H5> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<H6> </H6> (самый мелкий текст заголовка)"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Весь текст внутри таких скобок считается заголовком. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Пример 2. Меняем кегль (размер) шрифта"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Вот пример документа с использованием заголовков первого (H1) и второго (H2) уровней:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "…"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<BODY> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<H1> Заголовок первого уровня</H1>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<H2> Заголовок второго уровня</H2>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</BODY>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "…"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Абзацы (=параграфы)"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Одним из основных элементов страницы являются абзацы или, что тоже самое – параграфы. Абзацами в компьютерном наборе текста статьи или книги считается текст, размещенный между нажатиями на клавишу Enter. Поэтому каждый абзац начинается с новой строки. Абзац в веб тексте создается с помощью тега <p> таким образом:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "…"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<p>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Это абзац."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</p>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<p>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Это еще один абзац."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</p>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "…"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Так код будет выглядеть в браузере так (рис. 7)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "image014.jpg", "filesize": 3097, "height": 62, "pic_id": 136040, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/24/image014_z3jSjFs.jpeg", "width": 155}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 7."}, {"type": "string", "attributes": {}, "string": " Пример задания абзацев"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Разрыв строк, наподобие абзаца, можно задать записью вида "}, {"type": "string", "attributes": {"bold": true}, "string": "<BR>"}, {"type": "string", "attributes": {}, "string": " (этот тег задает переход на новую строку). При этом задавать закрывающие скобки </BR> нет необходимости. Но, если закрывающий тег задан, то это не считается ошибкой. Вот пример использования "}, {"type": "string", "attributes": {"bold": true}, "string": "<BR> "}, {"type": "string", "attributes": {}, "string": "(рис. 8)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "image016.jpg", "filesize": 7721, "height": 106, "pic_id": 136038, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/24/image016_hOwA9c3.jpeg", "width": 369}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 8."}, {"type": "string", "attributes": {}, "string": " Листинг с применением тега "}, {"type": "string", "attributes": {"bold": true}, "string": "<BR>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Данный код в браузере будет выглядеть так (рис. 9)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "image017.png", "filesize": 9572, "height": 237, "pic_id": 136036, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/24/image017.jpeg", "width": 819}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 9."}, {"type": "string", "attributes": {}, "string": " Пример отображения нескольких тегов "}, {"type": "string", "attributes": {"bold": true}, "string": "<BR> в браузере"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Примечание"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Здесь также применен пока новый для нас тег выравнивания"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Выравнивание текста"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "С помощью параграфов можно организовать выравнивание текста по центру, по левому или правому краю и по ширине. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<p align= «center» >123</p> текст 123 выровнен по центру."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<p align= «left» >123</p> текст 123 выровнен по левому краю."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<p align= «right» >123</p> текст 123 выровнен по правому краю. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<p align= «justify» > текст</p> текст 123 выровнен по ширине (то есть, по обоим краям – левому и правому)."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Пример 2. Выравнивание текста документа"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "…"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<H1 ALIGN=CENTER>Текст по центру</H1> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<BR>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<BR>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<P ALIGN=RIGHT> Текст по правому краю</P> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</body> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "…"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Как видим, здесь имеется два выравнивания: по центру и по правому краю (рис. 10)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "image020.jpg", "filesize": 5210, "height": 91, "pic_id": 136034, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/24/image020.jpeg", "width": 402}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 10."}, {"type": "string", "attributes": {}, "string": " Так отображается листинг с выравниванием в браузере"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Задаем цвет фона"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Цвет фона и текста можно определить шестнадцатиричным числом вида "}, {"type": "string", "attributes": {"bold": true}, "string": "#hhhhhh"}, {"type": "string", "attributes": {}, "string": ", где первая пара символов является значением насыщенности для красного цвета ("}, {"type": "string", "attributes": {"bold": true}, "string": "Red"}, {"type": "string", "attributes": {}, "string": "), вторая - для зеленого ("}, {"type": "string", "attributes": {"bold": true}, "string": "Green"}, {"type": "string", "attributes": {}, "string": "), и третья пара - для синего цвета ("}, {"type": "string", "attributes": {"bold": true}, "string": "Blue"}, {"type": "string", "attributes": {}, "string": "). #00 - минимальная насыщенность, #FF - максимальная "}, {"type": "string", "attributes": {"bold": true}, "string": "насыщенность цвета"}, {"type": "string", "attributes": {}, "string": ". Для понимания термина «насыщенность цвета» пример изменения насыщенности красного цвета приведен на рисунке (рис. 11)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "image021.png", "filesize": 46598, "height": 136, "pic_id": 136033, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/24/image021.jpeg", "width": 561}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 11."}, {"type": "string", "attributes": {}, "string": " Пример четырех цветов красного цвета разной насыщенности"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Подобрать нужную насыщенность цвета вы можете с помощью таблиц кода цвета HTML (см. Таблицу 1)."}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Таблица 1."}, {"type": "string", "attributes": {}, "string": " Примеры задания цвета шестнадцатеричным кодом и английскими словами"}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "image023.png", "filesize": 74705, "height": 607, "pic_id": 136032, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/24/image023.jpeg", "width": 916}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Помимо чисел вида "}, {"type": "string", "attributes": {"bold": true}, "string": "#hhhhhh "}, {"type": "string", "attributes": {}, "string": "на веб страницах можно также использовать текстовое определение цвета, используя обозначения цвета на английском языке. Например, чтобы сделать цвет фона страницы серым, можно написать:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<BODY BGCOLOR= «#808080» > "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "или"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<BODY BGCOLOR= «GRAY» > "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Эти записи равноценны."}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Задаем цвет и размер текста"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Мы знаем, как менять размер шрифта с помощью шести тегов заголовков. Но, также, для определения цвета и размера шрифта используется теги: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<FONT> </FONT>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Эти теги имеют "}, {"type": "string", "attributes": {"bold": true}, "string": "атрибуты"}, {"type": "string", "attributes": {}, "string": ": "}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "COLOR "}, {"type": "string", "attributes": {}, "string": "(цвет шрифта); "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "SIZE= «n» "}, {"type": "string", "attributes": {}, "string": " (размер шрифта равный величине «n»); "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "FACE= «имя_шрифта» "}, {"type": "string", "attributes": {}, "string": " (имя шрифта – это его семейство, например, если выбраны шрифты семейства "}, {"type": "string", "attributes": {"bold": true}, "string": "arial"}, {"type": "string", "attributes": {}, "string": " (тонкие, жирные, наклонные и другие). Тогда запись будет вида "}, {"type": "string", "attributes": {"bold": true}, "string": "FACE=\"arial"}, {"type": "string", "attributes": {}, "string": " "}, {"type": "string", "attributes": {"bold": true}, "string": "\"."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Новый термин"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Термин «"}, {"type": "string", "attributes": {"bold": true}, "string": "Атрибут тега"}, {"type": "string", "attributes": {}, "string": "» используется для определения расширенных характеристик тега. Например, тег с абзаца "}, {"type": "string", "attributes": {"bold": true}, "string": "<p>"}, {"type": "string", "attributes": {}, "string": " может содержать атрибут"}, {"type": "string", "attributes": {"bold": true}, "string": " align"}, {"type": "string", "attributes": {}, "string": ", который используется для выравнивания абзаца на странице."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Пример 3. Использование тега <FONT> с атрибутами SIZE, COLOR и FACE"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Ниже дан пример кода, где мы меняем цвет фона, цвет текста и задаем размер и семейство шрифта:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "…"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<BODY BGCOLOR= «GRAY» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<FONT SIZE= «10» COLOR= «RED» FACE= «SANS-SERIF» > "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "12345"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</body> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "…"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Как видим по тегам, здесь фон задан серым цветом и крупным шрифтом красного цвета шрифтом семейства SANS0SERIF написаны цифры 12345 (рис. 12)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "image025.png", "filesize": 27941, "height": 244, "pic_id": 136031, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/24/image025.jpeg", "width": 446}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 12."}, {"type": "string", "attributes": {}, "string": " Так отображается приведенный выше листинг в браузере"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "На рис. 13 изображено, как правильно нужно задавать размер шрифта в пикселах."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "image027.png", "filesize": 7970, "height": 169, "pic_id": 136029, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/24/image027.jpeg", "width": 508}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 13."}, {"type": "string", "attributes": {}, "string": " Пример задания размера шрифта в пикселах"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "ЗАДАНИЕ ДЛЯ САМОПРОВЕРКИ"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Создайте в Блокноте правильный (грамотный) одностраничный html-документ с любым веб текстом про своего домашнего питомца (кошку, собаку, рыбок в аквариуме или хомячка…). Можно написать про своего друга-приятеля (или про подругу). Документ должен иметь следующие параметры своего форматирования:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Фон (тег BGCOLOR) - серый,"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Шрифт (тег COLOR) - синий,"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Текст выровнять (тег ALIGN) по центру,"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Размер шрифта (тег size) – 9,"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Семья шрифта (тег face) – ARIAL,"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Название документа (title) – МОЙ КОТ (собака, хомяк и др…). Или, «Мой приятель Вася, одноклассница Маша»."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Кодировка - UTF-8"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "ВОПРОСЫ ДЛЯ САМОПРОВЕРКИ"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Что такое:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "HTML? "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Опишите HTML элементы форматирования веб текста (Заголовки, Абзацы, Параграфы)."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Какими командами можно произвести выравнивание HTML текста?"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Как задать цвет фона и цвет текста?"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Какой это цвет #000000? "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Для чего нужена запись вида <! DOCTYPE HTML>?"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Какое правильное название имени и расширения при сохранении веб документа на диск?"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Как задать размер и семейство шрифта?"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "В чем отличие заголовка документа от его названия (<head> </head> от <title> </title>)?"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Как вы понимаете термин «валидация»? Валидный сайт – это какой?"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Что такое «атрибут тега», приведите примеры тегов с атрибутами."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Мой сайт: "}, {"type": "string", "attributes": {"href": "https://kurs12345.ru/"}, "string": "https: //kurs12345. ru/"}], "attributes": []}], "selectedRange": [74, 571]}