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

9г класса
МОУ СОШ с УИОП пгт. Ленинское
Учитель

Е.И. Леушина
2009 г.

Web-страницах

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

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

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

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


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

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


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

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

как прописными, так и строчными буквами.

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

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

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

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

файлы и так далее.

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

от (самый крупный) до (самый мелкий). Заголовок страницы

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

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

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

---

.

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

.

«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 достаточно указать только имя файла.
Например :

то значение атрибута должно быть полное имя файла.
Например :

SRC=«С:\computer\computer.gif»>

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

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

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

– это то, что мы видим на Web- странице (текст

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

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

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

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

«center»> [Программы]   [Словарь]

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

чисел;

Маркированные списки (в HTML их принято называть нумерованными), когда элементы

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

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

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

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

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

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

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

.

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

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

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

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

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

Создаётся

такая область с помощью тэга с обязательными атрибутами: NAME, задающим имя области, ROWS, определяющим число строк, и COLS – число столбцов области. <br> </div> <div class="image"> <a href="/img/thumbs/ced335cda292904c44cd3656892e2091-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Текстовая область нужна для того чтобы посетители могли оставлять свои отзывы и свои пожелания сайту. Создаётся такая область с помощью тэга с обязательными атрибутами: NAME, задающим имя области, ROWS, определяющим число строк, и COLS – число столбцов области. "><img src="/img/thumbs/ced335cda292904c44cd3656892e2091-800x.jpg" title="Основы языка гипертекстовой разметки документов Текстовая область нужна для того чтобы посетители могли оставлять свои отзывы" alt="Текстовая область нужна для того чтобы посетители могли оставлять свои отзывы и свои пожелания сайту."></a> </div> <hr> </div> <div class="descrip" id="slide21"> <h2><a href="/img/thumbs/0baf1e4e524a517072836cf59485bdbc-800x.jpg" target="_blank">Слайд 21</a></h2> <div class="image"> <a href="/img/thumbs/0baf1e4e524a517072836cf59485bdbc-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/thumbs/0baf1e4e524a517072836cf59485bdbc-800x.jpg" title="Основы языка гипертекстовой разметки документов " alt=""></a> </div> <hr> </div> <div class="descrip" id="slide22"> <h2><a href="/img/tmb/2/171457/62207ff29068b196745acee26c9336fe-800x.jpg" target="_blank">Слайд 22</a>Литература :<br><br><br>Информатика и информационные технологии. Учебник для 10-11 классов /</h2> <div class="text"> <h3>Н.Д. Угринович. – М.: Бином. Лабораторий знаний, 2007.<br></h3> </div> <div class="image"> <a href="/img/tmb/2/171457/62207ff29068b196745acee26c9336fe-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Литература :Информатика и информационные технологии. Учебник для 10-11 классов / Н.Д. Угринович. – М.: Бином. Лабораторий знаний, 2007."><img src="/img/tmb/2/171457/62207ff29068b196745acee26c9336fe-800x.jpg" title="Основы языка гипертекстовой разметки документов Литература :Информатика и информационные технологии. Учебник для 10-11 классов / Н.Д." alt="Литература :Информатика и информационные технологии. Учебник для 10-11 классов / Н.Д. Угринович. – М.: Бином. Лабораторий знаний,"></a> </div> <hr> </div> <div class="descrip" id="slide23"> <h2><a href="/img/thumbs/d283c6703e9b465215409475d26a29a3-800x.jpg" target="_blank">Слайд 23</a>СПАСИБО ЗА ВНИМАНИЕ<br></h2> <div class="image"> <a href="/img/thumbs/d283c6703e9b465215409475d26a29a3-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="СПАСИБО ЗА ВНИМАНИЕ"><img src="/img/thumbs/d283c6703e9b465215409475d26a29a3-800x.jpg" title="Основы языка гипертекстовой разметки документов СПАСИБО ЗА ВНИМАНИЕ" alt="СПАСИБО ЗА ВНИМАНИЕ"></a> </div> <hr> </div> </div> <div class="custom" > <!-- Yandex.RTB R-A-448123-10 --> <div id="yandex_rtb_R-A-448123-10"></div> <script type="text/javascript"> (function(w, d, n, s, t) { w[n] = w[n] || []; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "R-A-448123-10", renderTo: "yandex_rtb_R-A-448123-10", async: true }); }); t = d.getElementsByTagName("script")[0]; s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks"); </script></div> <div class="url" id="download"><a href="/informatika/osnovy-yazyka-gipertekstovoy-razmetki-dokumentov/download">Скачать презентацию</a></div> </div> <div class="right"> <div class="banners"> <div class="custom" > <!-- Yandex.RTB R-A-448123-2 --> <div id="yandex_rtb_R-A-448123-2"></div> <script type="text/javascript"> (function(w, d, n, s, t) { w[n] = w[n] || []; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "R-A-448123-2", renderTo: "yandex_rtb_R-A-448123-2", async: true }); }); t = d.getElementsByTagName("script")[0]; s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks"); </script></div> </div> <div class="list related"> <h2>Похожие презентации</h2> <div class="wrapper"> <a href="/informatika/peremennye-velichiny-operator-prisvaivaniya-7-klass"> <img src="/img/thumbs/3f7ecd665fb177306961bb5e5a4d7273-800x.jpg" alt="Переменные величины. Оператор присваивания 7 класс"> <span class="desc"> <span>Переменные величины. Оператор присваивания 7 класс</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 254</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/ponyatie-prezentatsii-i-kompyuternoy-prezentatsii-1"> <img src="/img/thumbs/f414bd7047b0c7b2a1f505f5fcc7d3a8-800x.jpg" alt="Понятие презентации и компьютерной презентации"> <span class="desc"> <span>Понятие презентации и компьютерной презентации</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 327</span> </span> </a> </div> <div class="custom" > <!-- Yandex.RTB R-A-448123-12 --> <script>window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ type: 'fullscreen', blockId: 'R-A-448123-12' }) })</script></div> <div class="wrapper"> <a href="/informatika/skazka-o-tom-otkuda-voznikla-nauka-informatika-"> <img src="/img/thumbs/99fd0f6c384aaa414b5027e6814cda01-800x.jpg" alt="Сказка о том, откуда возникла наука Информатика "> <span class="desc"> <span>Сказка о том, откуда возникла наука Информатика </span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 265</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/prezentatsiya-po-informatike-po-teme-modelirovanie"> <img src="/img/thumbs/f54c164c9902a892eb36064543fd7ad9-800x.jpg" alt="Презентация по информатике по теме "Моделирование""> <span class="desc"> <span>Презентация по информатике по теме "Моделирование"</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 284</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/ustroystva-vvoda-informatsii-7-klass"> <img src="/img/thumbs/ec2c7972b498b696274a6a0f6654a20c-800x.jpg" alt="Устройства ввода информации 7 класс"> <span class="desc"> <span>Устройства ввода информации 7 класс</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 298</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/programmirovanie-algoritmicheskoy-konstruktsii-vetvlenie-8-klass"> <img src="/img/thumbs/d1769a44cbaf69cdda6747ac7220c662-800x.jpg" alt="Программирование алгоритмической конструкции ветвление 8 класс"> <span class="desc"> <span>Программирование алгоритмической конструкции ветвление 8 класс</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 252</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/osnovy-logiki-4-klass"> <img src="/img/thumbs/1446d16bd2e14288f61cacc5b1cbd655-800x.jpg" alt="Основы логики 4 класс"> <span class="desc"> <span>Основы логики 4 класс</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 609</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/tsikly-3"> <img src="/img/thumbs/e2ab6b94000932140067578837a5069c-800x.jpg" alt="ЦИКЛЫ"> <span class="desc"> <span>ЦИКЛЫ</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 348</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/elektronnі-tablitsі"> <img src="/img/thumbs/ad2c62f2f0e82fdc0a9387751fccd59c-800x.jpg" alt="Електронні таблиці"> <span class="desc"> <span>Електронні таблиці</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 500</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/rastrovye-izobrazheniya-na-ekrane-monitora"> <img src="/img/thumbs/83acfb19d42311939698c63462b36c86-800x.jpg" alt="Растровые изображения на экране монитора"> <span class="desc"> <span>Растровые изображения на экране монитора</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 373</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/grafika-v-abcpasckal-urok-n2"> <img src="/img/thumbs/2ff1e1a222b10b7d632e7219f12af3b9-800x.jpg" alt="Графика в ABCPasckal. Урок №2"> <span class="desc"> <span>Графика в ABCPasckal. Урок №2</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 258</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/prezentatsiya-vliyanie-kompyutera-na-zhizn-i"> <img src="/img/thumbs/0f9673f696a57ae8a92b4125395c282c-800x.jpg" alt="Презентация Влияние компьютера на жизнь и здоровье человека""> <span class="desc"> <span>Презентация Влияние компьютера на жизнь и здоровье человека"</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 295</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/prezentatsiya-sovremennoe-obshchestvo-i-smart-tehnologii"> <img src="/img/thumbs/a7986074b6ab02f81858fb23202e9616-800x.jpg" alt="Презентация Современное общество и smart-технологии"> <span class="desc"> <span>Презентация Современное общество и smart-технологии</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 510</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/kompyuternye-prezentatsii-animatsiya"> <img src="/img/thumbs/fadcfdb2ef3050286c61d29770462da3-800x.jpg" alt="Компьютерные презентации. Анимация"> <span class="desc"> <span>Компьютерные презентации. Анимация</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 352</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/delovaya-grafika-v-zadachah-planirovaniya-i-upravleniya-2"> <img src="/img/thumbs/63abea5b95269cfc3a2631f086d130da-800x.jpg" alt="Деловая графика в задачах планирования и управления"> <span class="desc"> <span>Деловая графика в задачах планирования и управления</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 249</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/servisy-seti-internet-4"> <img src="/img/thumbs/9cdc78b54072d2ccec174b1292a4bcd0-800x.jpg" alt="Сервисы сети Интернет"> <span class="desc"> <span>Сервисы сети Интернет</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 293</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/risuem-zhuka-4-klass"> <img src="/img/thumbs/775f6cedbabca9a262a0335d153225fe-800x.jpg" alt="Рисуем жука 4 класс"> <span class="desc"> <span>Рисуем жука 4 класс</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 243</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/rastrovaya-i-vektornaya-grafika-8-klass"> <img src="/img/thumbs/4752c75363a991f9cd96053e18f202bd-800x.jpg" alt="Растровая и векторная графика 8 класс"> <span class="desc"> <span>Растровая и векторная графика 8 класс</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 412</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/printsipy-raboty-kompyutera-i-arhitektura-evm-vidy-i-harakteristiki-mashinnyh-nositeley-informatsii-tehnicheskie-sredstva-obrabotki-informatsii"> <img src="/img/thumbs/587ba15203536aaa2a0df31a04fd7c82-800x.jpg" alt="Принципы работы компьютера и архитектура ЭВМ. Виды и характеристики машинных носителей информации. Технические средства обработки информации"> <span class="desc"> <span>Принципы работы компьютера и архитектура ЭВМ. Виды и характеристики машинных носителей информации. Технические средства обработки информации</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 379</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/istoriya-razvitiya-vychislitelnoy-tehniki-10"> <img src="/img/thumbs/b32ab3c3b5d0b92d9d2072db96b5caf5-800x.jpg" alt="История развития вычислительной техники"> <span class="desc"> <span>История развития вычислительной техники</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 296</span> </span> </a> </div> <div class="clear"></div> </div> </div> </div> </div> </div> <div class="container bottom"> <div> <div class="call_back"> <h4><i class="fas fa-bullhorn"></i>Обратная связь</h4> <p>Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:</p> <p>Email: <a href="#" class="js_hidden_email" data-address="abusetheslide" data-domain="ya.ru">Нажмите что бы посмотреть</a> </p> </div> <div class="links"> </div> <div class="whatis"> <h4><i class="fa fa-info text-red"></i>Что такое TheSlide.ru?</h4> <p>Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.</p> <hr /> <p><a href="/privacy">Для правообладателей</a></p> <a href="https://metrika.yandex.ru/stat/?id=48768281&from=informer" target="_blank" rel="nofollow"><img src="https://informer.yandex.ru/informer/48768281/3_1_FFFFFFFF_EFEFEFFF_0_pageviews" style="width:88px; height:31px; border:0;" alt="Яндекс.Метрика" title="Яндекс.Метрика: данные за сегодня (просмотры, визиты и уникальные посетители)" class="ym-advanced-informer" data-cid="48768281" data-lang="ru" /></a> <!--LiveInternet counter--> <script type="text/javascript"> document.write("<a href='//www.liveinternet.ru/click' "+ "target=_blank><img src='//counter.yadro.ru/hit?t16.2;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";h"+escape(document.title.substring(0,150))+";"+Math.random()+ "' alt='' title='LiveInternet: показано число просмотров за 24"+ " часа, посетителей за 24 часа и за сегодня' "+ "border='0' width='88' height='31'><\/a>") </script> <!--/LiveInternet--> </div> <div class="clear"></div> </div> </div> <script src="/templates/presentation/js/script.js?2f7a446f4c1827ed407306caac7b976b"></script> </body> </html>