Презентация на тему Основы языка гипертекстовой разметки документов

Форматирование текста
Вставка изображений
Гиперссылки на Гиперссылки на Web-Гиперссылки на Web-страницах
Списки

на Списки на Web-Списки на Web-страницах
Формы на Формы на Web-Формы на Web-страницах

Web-страницы могут быть интерактивными и могут содержать муль-
тимедийные

и динамические объекты.

Создание Web-сайтов реализуется с использованием языка разметки
гипертекстовых документов HTML.

что в обычный текстовый документ вставляются управляющие символы (тэги)

и в результате мы получаем Web-страницу. Браузер при загрузке Web-страницы представляет её на экране в том виде , который задали тэгами.


Основным достоинством HTML-документов является:

малый объём информации;
возможность просмотра на персональных компьютерах, оснащённых различными операционными системами.


В качестве такого простейшего текстового редактора в Windows можно использовать стандартное приложение Блокнот.

в угловые скобки. Тэги могут быть одиночными и парными.

Тэги могут записываться как прописными, так и строчными буквами.

HTML-код страницы помещается внутрь контейнера .

Заголовок Web-страницы заключается в контейнер и содержит название документа и справочную информацию о странице.

Название Web-страницы содержится в контейнере и отображается в строке заголовка браузера при просмотре страницы.

может включать текст, таблицы, бегущие строки, ссылки на графические

изображения и звуковые файлы и так далее.

Созданную Web-страницу необходимо сохранить в виде файла. Принято сохранять титульный файл сайта, то есть тот, который первый загружается в браузер, под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html.

задаётся тэгами от (самый крупный) до (самый

мелкий). Заголовок страницы целесообразно выделить самым крупным шрифтом.

Задать тип выравнивания позволяет тэг ALIGN, которому требуется присвоить определённое значение. Выравнивание по правой границе окна реализуется с помощью записи ALIGN=«right», а по центру – ALIGN=«center».

Заголовок целесообразно отделить от остального содержания страницы горизонтальной линией с помощью одиночного тэга

---

.

Разделение текста на абзацы производится с помощью контейнера

.

«red», «green», «blue» и так далее), либо его шестнадцатеричным

значением. Шестнадцатеричное представление цвета использует RGB-формат «#RRGGBB», где две первые шестнадцатеричные цифры задают интенсивность красного (red), две следующие – интенсивность зелёного (green), и две последние – интенсивность синего (blue) цветов. Минимальная интенсивность цвета задаётся шестнадцатеричным числом OO, а максимальная – FF.

С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE=«Arial»), атрибут SIZE – размер шрифта (например, SIZE=4), атрибут COLOR – цвет шрифта (например, COLOR=«blue»).

сделать их визуально более привлекательными. На Web-страницах могут размещаться

графические файлы трёх форматов – GIF, JPG и PNG. Если рисунок сохранён в другом формате, то его необходимо предварительно преобразовать в один из вышеуказанных форматов с помощью графического редактора. Для этих целей можно использовать редактор Photo Editor, который входит в пакет Microsoft Office.

Для вставки изображения используется тэг с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в том же каталоге, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла.
Например :

локальном компьютере, то значение атрибута должно быть полное имя

файла.
Например :

Если файл находится на удалённом сервере в Интернете, то должен быть указан URL-адрес этого файла.
Например :

Иногда в целях экономии времени отключают загрузку графических изображений и читают поясняющий текст, который
выводится с помощью атрибута ALT.
Например :

Расположить рисунок относительно текста различными способами позволяет атрибут ALIGN тэга , который может принимать пять различных значений : TOP(вверх), MIDDLE(середина), BOTTOM(низ), LEFT(слева) и RIGHT(справа).

Указатель ссылки – это то, что мы видим на

Web- странице (текст или рисунок), обычно выделенный синим цветом и подчёркиванием. Активизация гиперссылки вызывает переход на другую страницу.

Адресная часть гиперссылки – это URL-адрес документа, на который указывается ссылка.

Размещение гиперссылок в нижней части страницы называется панелью навигации.

по центру, в котором указатели гиперссылок разделены пробелами ( ):
Например

:

[Программы]   [Словарь]

Для того чтобы определить адрес перехода с каждой гиперссылки используется контейнер гиперссылки с атрибутом HREF, значением которого является URL-адрес документа на локальном компьютере или в Интернете.
Например : Указатель гиперссылки

с помощью чисел;

Маркированные списки (в HTML их принято называть

нумерованными), когда элементы списка идентифицируются с помощью специальных символов (маркеров);

Списки определений позволяют составлять перечни определений в так называемой словарной форме.
Список располагается внутри контейнера

, а каждый элемент списка отделяется тэгом

. С помощью атрибута TYPE тэга

можно задать тип нумерации: арабские цифры (по умолчанию), „I“ (римские), «а» (строчные буквы) и др.

не только просматривать информацию, но и отправлять сведения администраторам

сайта, на его страницах размещаются формы. Вся форма заключается в контейнер

.

Текстовые поля создаются с помощью тэга со значением атрибута TYPE=„text“. Атрибут NAME является обязательным и служит для идентификации полученной информации. Значением атрибута SIZE является число, задающее длину поля ввода в символах. Для того чтобы анкета «читалась», необходимо разделить строки тэгом
.

он себя относит. Создаются переключатели с помощью тэга

со значением атрибута TYPE=„radio“. Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например: NAME=„group“.
Ещё одним обязательным атрибутом является VALUE, значение которого является уникальным.
Атрибут CHECKED, который задаёт выбор кнопки по умолчанию.

Флажки позволяют узнать какими сервисами Интернета пользуется посетитель наиболее часто. Здесь из предложенного перечня он может выбрать одновременно несколько вариантов, пометив их флажками. Флажки создаются в тэге со значением атрибута TYPE=«checkbox». Атрибут CHECKED, в данном случае не используется.

оставлять свои отзывы и свои пожелания сайту.

Создаётся такая область с помощью тэга с обязательными атрибутами: NAME, задающим имя области, ROWS, определяющим число строк, и COLS – число столбцов области. <br> </div> <hr> </div> <div class="descrip"> <h3 id="slide21"> <a href="/img/tmb/12/1187137/d42c8130fb3f910e2efacaf8cc2b627d-720x.jpg" target="_blank">Слайд 21</a> <br> </h3> <div class="image"> <a href="/img/tmb/12/1187137/d42c8130fb3f910e2efacaf8cc2b627d-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/12/1187137/d42c8130fb3f910e2efacaf8cc2b627d-720x.jpg" title="Основы языка гипертекстовой разметки документов" alt=""></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide22"> <a href="/img/tmb/12/1187137/01de22f81e4adba00e8379ccde81fbc2-720x.jpg" target="_blank">Слайд 22</a> Литература :<br><br><br>Информатика и информационные технологии. Учебник для 10-11 </h3> <div class="image"> <a href="/img/tmb/12/1187137/01de22f81e4adba00e8379ccde81fbc2-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Литература :Информатика и информационные технологии. Учебник для 10-11 классов / Н.Д. Угринович. – М.: Бином. Лабораторий знаний, 2007."><img src="/img/tmb/12/1187137/01de22f81e4adba00e8379ccde81fbc2-720x.jpg" title="Основы языка гипертекстовой разметки документов" alt="Литература :Информатика и информационные технологии. Учебник для 10-11 классов / Н.Д."></a> </div> <div class="text"> <h4>классов / Н.Д. Угринович. – М.: Бином. Лабораторий знаний,</h4> 2007.<br> </div> <hr> </div> </div> <div class="custom" > <!-- Yandex.RTB R-A-11464146-5 --> <div id="yandex_rtb_R-A-11464146-5"></div> <script> window.yaContextCb.push(() => { Ya.Context.AdvManager.render({ "blockId": "R-A-11464146-5", "renderTo": "yandex_rtb_R-A-11464146-5" }) }) </script></div> <div class="content dl-content" style="margin-top: 20px"> <form action="" method="post" class="js_captcha dl-form"> <div> <ul> <li>Имя файла: osnovy-yazyka-gipertekstovoy-razmetki-dokumentov.pptx</li> <li>Количество просмотров: 108</li> <li>Количество скачиваний: 0</li> </ul> <div class="g-recaptcha" data-sitekey="6Lf0iN8nAAAAACKv8U8VhTtj8F1wq0TA-RBjxFb2"></div> <input type="submit" value="Скачать презентацию"> <input type="hidden" name="task" value="dodownload"> <input type="hidden" name="17763ac5485d34ec5357dd4557864df3" value="1" /> </div> <div class="clear"></div> </form> <div class="adBlockDownload"> <div class="banners"></div> </div> </div> <div class="itemNavigation"> <div class="itemNavigation-wrapper"> <div class="itemNavigation-item"> - Предыдущая <a class="itemNavigation-link" href="/informatika/osnovy-logiki-17">Основы логики</a> </div> <div class="itemNavigation-item"> Следующая - <a class="itemNavigation-link" href="/biologiya/ty-navsegda-v-otvete-za-vseh-1">Ты навсегда в ответе за всех, кого приручил</a> </div> </div> </div> </div> <div class="right"> <div class="banners"> <div class="custom" > <!-- Yandex.RTB R-A-11464146-1 --> <div id="yandex_rtb_R-A-11464146-1"></div> <script> window.yaContextCb.push(() => { Ya.Context.AdvManager.render({ "blockId": "R-A-11464146-1", "renderTo": "yandex_rtb_R-A-11464146-1" }) }) </script></div> </div> <div class="list related"> <h2>Похожие презентации</h2> <div class="wrapper"> <a href="/informatika/igra-po-informatike"> <img src="/img/tmb/13/1234967/b97ed682dc491113a7e28bf9ae10ccbe-210x.jpg" alt="Игра по информатике"> <span class="desc"> <span>Игра по информатике</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 146</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/avtomatizatsiya-trassirovki-mezhsoedineniy-pechatnyh-plat-na"> <img src="/img/tmb/15/1447297/b8335bf0ef4878c77f9e138cbca8e1df-210x.jpg" alt="Автоматизация трассировки межсоединений печатных плат, на основе муравьиного алгоритма"> <span class="desc"> <span>Автоматизация трассировки межсоединений печатных плат, на основе муравьиного алгоритма</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 120</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/meditsinskaya-informatika_"> <img src="/img/tmb/14/1335997/7d3662863811a2a140c7b2182adb6233-210x.jpg" alt="Медицинская информатика"> <span class="desc"> <span>Медицинская информатика</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 140</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/metody-sortirovki-odnomernyh-massivov"> <img src="/img/tmb/11/1088317/0f2ff2218e72bbd8a0ca04085ee2de7f-210x.jpg" alt="Методы сортировки одномерных массивов"> <span class="desc"> <span>Методы сортировки одномерных массивов</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 163</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/513863-lektsiya-n1-vvedenie-v-distsiplinu-chelovek"> <img src="/img/tmb/6/513863/4b18f888e3c6ea049ba082776b309f50-210x.jpg" alt="Лекция №1. Введение в дисциплину. Человек и информация. Информационные процессы. Арифметические основы компьютеров. Системы счисления. Перевод чисел из одной системы в другую. Кодировка символов. (2 курс)"> <span class="desc"> <span>Лекция №1. Введение в дисциплину. Человек и информация. Информационные процессы. Арифметические основы компьютеров. Системы счисления. Перевод чисел из одной системы в другую. Кодировка символов. (2 курс)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 165</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/bazi-danih"> <img src="/img/tmb/12/1156359/f4faf9a6d6616f47e990c0b4200c347b-210x.jpg" alt="Бази даних"> <span class="desc"> <span>Бази даних</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 146</span> </span> </a> </div> <div class="clear"></div> </div> </div> </div> <div class="cntWrapper"> <div class="list"> <h2 class="right-heading" id="related">Похожие презентации</h2> <div class="wrapper"> <a href="/informatika/grafika-v-paskale-1"> <img src="/img/tmb/12/1192746/1836e0a72e524f0d3d80f7c21cd86cea-210x.jpg" alt="Графика в Паскале"> <span class="desc"> <span>Графика в Паскале</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 157</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/zashchita-informatsii-10-klass-bazovyy-uroven"> <img src="/img/tmb/12/1136212/2f19f4362cb6443029d6d9c74575f56f-210x.jpg" alt="Защита информации 10 класс (базовый уровень)"> <span class="desc"> <span>Защита информации 10 класс (базовый уровень)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 128</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/data-representation-in-computer-systems-and"> <img src="/img/tmb/14/1399146/bca874a6348f5e37d37a9936c4347731-210x.jpg" alt="Data representation in computer systems and its architecture and components"> <span class="desc"> <span>Data representation in computer systems and its architecture and components</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 103</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/624704-metodicheskie-rekomendatsii-razrabotka-otkrytyh-meropriyatiy-na"> <img src="/img/tmb/7/624704/1f8a8c9b20b1b728aaca8505d3a53e35-210x.jpg" alt="Методические рекомендации Разработка открытых мероприятий на уроках информатика"> <span class="desc"> <span>Методические рекомендации Разработка открытых мероприятий на уроках информатика</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 156</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/proekt-i-osnovnye-etapy-ego-razrabotki"> <img src="/img/tmb/11/1095523/c5aa8785d9e71a698e9d9f9ebe9d8b79-210x.jpg" alt="ПРОЕКТ и основные этапы его разработки"> <span class="desc"> <span>ПРОЕКТ и основные этапы его разработки</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 163</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/postroenie-diagramm-i-grafikov-2_"> <img src="/img/tmb/14/1355808/f0d570829e4e79cf0bbc53edd9ce81d6-210x.jpg" alt="Построение диаграмм и графиков"> <span class="desc"> <span>Построение диаграмм и графиков</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 106</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/kompyuternye-virusy-138"> <img src="/img/tmb/15/1402547/d63358d9af20d455c04e9a0a56a74c33-210x.jpg" alt="Компьютерные вирусы"> <span class="desc"> <span>Компьютерные вирусы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 121</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/659023-prezentatsiya-k-otkrytomu-uroku-bezopasnyy-internet"> <img src="/img/tmb/7/659023/12bff64e31d5e86a141c3f9e6412234e-210x.jpg" alt="Презентация к открытому уроку Безопасный интернет"> <span class="desc"> <span>Презентация к открытому уроку Безопасный интернет</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 117</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/postrelyatsionnye-modeli-dannyh"> <img src="/img/tmb/15/1430343/cb6c1de7bf35255f28823f4447254157-210x.jpg" alt="Постреляционные модели данных"> <span class="desc"> <span>Постреляционные модели данных</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 165</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/operatory-tsikla-v-srede-programmirovaniya-pascal_"> <img src="/img/tmb/13/1257974/368165562556e7d0b66a47d8a13ac590-210x.jpg" alt="Операторы цикла в среде программирования Pascal ABC"> <span class="desc"> <span>Операторы цикла в среде программирования Pascal ABC</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 136</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/kesteler-arasynda-baylanys"> <img src="/img/tmb/15/1417780/a54b9422e16eff75af8d21575f0267d0-210x.jpg" alt="Кестелер арасында байланыс"> <span class="desc"> <span>Кестелер арасында байланыс</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 157</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/deystviya-s-informatsiey-9"> <img src="/img/tmb/12/1139487/8cb5ebe5d967784399912846b448197a-210x.jpg" alt="Действия с информацией"> <span class="desc"> <span>Действия с информацией</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 125</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/kompyuternye-virusy-108"> <img src="/img/tmb/14/1352353/9014f54ef44aa92abb49e552025ac4ee-210x.jpg" alt="Компьютерные вирусы"> <span class="desc"> <span>Компьютерные вирусы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 136</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/microsoft-office-word-2008"> <img src="/img/tmb/11/1067520/5f95e46db29361f358f8573b8c5fdc43-210x.jpg" alt="Microsoft Office Word"> <span class="desc"> <span>Microsoft Office Word</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 125</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/informatika-i-evm-v-psihologii-istoriya"> <img src="/img/tmb/15/1471916/7a3c94ce6c239c42f37f40973ae3b4fb-210x.jpg" alt="Информатика и эвм в психологии. История вычислительной техники. (Часть 1)"> <span class="desc"> <span>Информатика и эвм в психологии. История вычислительной техники. (Часть 1)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 134</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/algoritm-i-ego-svoystva-2"> <img src="/img/tmb/11/1087319/56f980584e0958b2b2f3bf9de0c6eb7e-210x.jpg" alt="Алгоритм и его свойства"> <span class="desc"> <span>Алгоритм и его свойства</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 129</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/531729-obzor-metodicheskoy-literatury-po-informatike"> <img src="/img/tmb/6/531729/bf9c00fe68659ecc55ccbb4f85a0b3ea-210x.jpg" alt="Обзор методической литературы по информатике"> <span class="desc"> <span>Обзор методической литературы по информатике</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 188</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/usovershenstvovaniya-sistemy-bezopasnosti-windows-server-2008"> <img src="/img/tmb/12/1138763/b9d5e0dc80e30833621e9d5930c57d9d-210x.jpg" alt="Усовершенствования системы безопасности Windows Server 2008"> <span class="desc"> <span>Усовершенствования системы безопасности Windows Server 2008</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 121</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/perevod-chisel-iz-odnoy-sistemy-schisleniya-5"> <img src="/img/tmb/12/1187717/2eb893e862206b658e74768d081ecd5e-210x.jpg" alt="ПЕРЕВОД ЧИСЕЛ ИЗ ОДНОЙ СИСТЕМЫ СЧИСЛЕНИЯ В ДРУГУЮ"> <span class="desc"> <span>ПЕРЕВОД ЧИСЕЛ ИЗ ОДНОЙ СИСТЕМЫ СЧИСЛЕНИЯ В ДРУГУЮ</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 143</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/osnovnye-ponyatiya-informatiki"> <img src="/img/tmb/15/1432687/36b95498cbc2ccf2c1dc2423ab6bb366-210x.jpg" alt="Основные понятия информатики"> <span class="desc"> <span>Основные понятия информатики</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 182</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/instruktazh-po-tehnike-bezopasnosti-v-kabinete"> <img src="/img/tmb/11/1085374/966029b9a682f8e65b62e19a87dad10c-210x.jpg" alt="Инструктаж по технике безопасности в кабинете информатики"> <span class="desc"> <span>Инструктаж по технике безопасности в кабинете информатики</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 142</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/535856-prezentatsya-dlya-testuvannya-5-klasu-robochiy"> <img src="/img/tmb/6/535856/6081b92ba869946e2df47b0af8fa6293-210x.jpg" alt="Презентація для тестування 5 класу Робочий стіл"> <span class="desc"> <span>Презентація для тестування 5 класу Робочий стіл</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 130</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/577314-ssylki-na-web-stranitsah"> <img src="/img/tmb/6/577314/c53d5a3191c8b4774f1f769e556c3e14-210x.jpg" alt="Ссылки на web страницах"> <span class="desc"> <span>Ссылки на web страницах</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 153</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/utrennik-k-23-fevralya"> <img src="/img/tmb/9/836798/33dc60ce28f89bfc296fd45e8a156b8c-210x.jpg" alt="Утренник к 23 февраля"> <span class="desc"> <span>Утренник к 23 февраля</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 66</span> </span> </a> </div> <div class="clear"></div> </div> </div> </div> </div> <script src="/templates/presentation/js/script.js?7ae5a315ef1850f1ab2723f8f8484030"></script> </body> </html>