Презентация, доклад на тему Hyper Text Markup Language (HTML) - язык разметки гипертекста

Содержание

Гипертекст – это документ, содержащий ссылки на другие документы.Отдельный документ, выполненный в формате HTML, называется:- HTML-документом;- Web-документом;Web-страницей. Такие страницы как правило имеют расширение htm или html.Гиперссылка – выделенный объект, связанный с другим файлом и реагирующий на

Слайд 1Hyper Text Markup Language (HTML) - язык разметки гипертекста

Hyper Text Markup Language (HTML) - язык разметки гипертекста

Слайд 2Гипертекст – это документ, содержащий ссылки на другие документы.

Отдельный документ, выполненный

в формате HTML, называется:
- HTML-документом;
- Web-документом;
Web-страницей.

Такие страницы как правило имеют расширение htm или html.

Гиперссылка – выделенный объект, связанный с другим файлом и реагирующий на щелчок мыши(Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому).

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


Гипертекст – это документ, содержащий ссылки на другие документы.Отдельный документ, выполненный в формате HTML, называется:- HTML-документом;- Web-документом;Web-страницей.

Слайд 3Структура HTML-документа
Тег –это инструкции браузеру, определяющие способ отображения текста (Теги

определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой).
Пример:

текст

. Т.е. текст помещен между тегами как в контейнер.
Атрибут - параметр или свойство элемента. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.
Пример:

Этот текст будет выровнен по центру экрана



Структура HTML-документа Тег –это инструкции браузеру, определяющие способ отображения текста (Теги определяют границы действия элементов и отделяют

Слайд 4 - начало HTML-документа
- Конец HTML-документа.
- Этот тег указывает

на начало области заголовка Web-страницы. Служит для формирования обей структуры документа.
- Конец области заголовка Web-страницы.
Структура Web-страницы
Элемент для размещения заголовка Web-страницы. Строка отображается в заголовке окна браузера.
- Начало собственно содержимого Web-страницы.
- Конец содержимого Web-страницы.

Элемент заголовка

Элемент абзаца.



- начало HTML-документа - Конец HTML-документа. - Этот тег указывает на начало области заголовка Web-страницы. Служит

Слайд 5Правила синтаксиса
Взаимное расположение элементов HTML, HEAD, TITLE, BODY должно быть стандартным

на любой странице.
Структура:


.....


..................


2. Всегда использовать конечные теги (не забывать

, , и др.).
3. Не нарушать правила вложения тегов.
Правильно:

Заголовок крупный

Заголовок поменьше


4. Любая полезная информация должна находится между начальным и конечным тегами, указывающими ее формат.
5. Все атрибуты располагаются в начальном теге.
6. Принято начальные теги писать ЗАГЛАВНЫМИ буквами (

), а конечные строчными буквами (

).

Правила синтаксиса Взаимное расположение элементов HTML, HEAD, TITLE, BODY должно быть стандартным на любой странице.Структура:.......................2. Всегда использовать

Слайд 6Задания для выполнения:
Откройте текстовый редактор "Блокнот".
Наберите в нем структуру HTML-документа,

которая представлена вам на слайде 5.
Сохраните файл в своей папке, присвоив ему имя page1.htm
Зайдите в свою папку и откройте созданный файл. Вы увидите, как выглядит созданный вами файл в окне браузера.
Закройте браузер.
Вернитесь к сохраненному файлу в "Блокноте".
Внесите в него следующие изменения: пусть это будет ваша первая страничка. Укажите в ней ваши фамилию, имя, школу, класс, увлечения. Используйте для этого форматирование заголовков и абзацев.
В строке укажите: "Домашняя страничка (ваше имя и фамилия).<br> Сохраните файл как page2.htm.<br> Просмотрите результат в браузере, при необходимости отредактируйте файл при помощи "Блокнота".<br> </div> <div class="image"> <a href="/img/thumbs/6c93edd054774edf1693a7ef80cf18a1-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Задания для выполнения:Откройте текстовый редактор "Блокнот". Наберите в нем структуру HTML-документа, которая представлена вам на слайде 5. Сохраните файл в своей папке, присвоив ему имя page1.htm Зайдите в свою папку и откройте созданный файл. Вы увидите, как выглядит созданный вами файл в окне браузера. Закройте браузер. Вернитесь к сохраненному файлу в "Блокноте". Внесите в него следующие изменения: пусть это будет ваша первая страничка. Укажите в ней ваши фамилию, имя, школу, класс, увлечения. Используйте для этого форматирование заголовков и абзацев. В строке укажите: "Домашняя страничка (ваше имя и фамилия). Сохраните файл как page2.htm. Просмотрите результат в браузере, при необходимости отредактируйте файл при помощи "Блокнота"."><img src="/img/thumbs/6c93edd054774edf1693a7ef80cf18a1-800x.jpg" title="Hyper Text Markup Language (HTML) - язык разметки гипертекста Задания для выполнения:Откройте текстовый редактор "Блокнот". Наберите в нем структуру HTML-документа," alt="Задания для выполнения:Откройте текстовый редактор "Блокнот". Наберите в нем структуру HTML-документа, которая представлена вам на слайде 5."></a> </div> <hr> </div> </div> <div class="custom" > <!-- Yandex.RTB R-A-637067-9 --> <div id="yandex_rtb_R-A-637067-9"></div> <script>window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ renderTo: 'yandex_rtb_R-A-637067-9', blockId: 'R-A-637067-9' }) })</script></div> <div class="url"><a href="/informatika/hyper-text-markup-language-html-yazyk/download">Скачать презентацию</a></div> </div> <div class="right"> <div class="banners"> <div class="custom" > <!-- Yandex.RTB R-A-637067-8 --> <div id="yandex_rtb_R-A-637067-8"></div> <script>window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ renderTo: 'yandex_rtb_R-A-637067-8', blockId: 'R-A-637067-8' }) })</script></div> </div> <div class="list related"> <h2>Похожие презентации</h2> <div class="wrapper"> <a href="/informatika/informatika-11-klass-rastrovaya-i-vektornaya"> <img src="/img/thumbs/f5282fb82a920697d62e834cdd5fcc15-800x.jpg" alt="Информатика 11 класс. Растровая и векторная графика"> <span class="desc"> <span>Информатика 11 класс. Растровая и векторная графика</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 330</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/prezentatsiya-po-informatike-9klass-na-temu"> <img src="/img/tmb/5/462200/28c795afe946cda6e1851c18c417181a-800x.jpg" alt="Презентация по информатике 9класс на тему : Паскаль. Линейные алгоритмы"> <span class="desc"> <span>Презентация по информатике 9класс на тему : Паскаль. Линейные алгоритмы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 218</span> </span> </a> </div> <div class="custom" > <!-- Yandex.RTB R-A-637067-10 --> <script>window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ type: 'fullscreen', blockId: 'R-A-637067-10' }) })</script></div> <div class="wrapper"> <a href="/informatika/prezentatsiya-k-urok-16-kontrolnaya-rabota"> <img src="/img/thumbs/418977dd2304397eae0bf72c0d975fd5-800x.jpg" alt="Презентация к Урок 16. Контрольная работа №2 по разделу Компьютер как универсальное устройство для работы с информацией."> <span class="desc"> <span>Презентация к Урок 16. Контрольная работа №2 по разделу Компьютер как универсальное устройство для работы с информацией.</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 388</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/ponyatie-informatsii-10-klass"> <img src="/img/tmb/1/60275/54f0ca2ca4472d676bcb547d9f46c393-800x.jpg" alt="Понятие информации (10 класс)"> <span class="desc"> <span>Понятие информации (10 класс)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 352</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/prezentatsiya-po-informatiki-na-temu-arhitektura"> <img src="/img/thumbs/e31674f5346ea63cf0e7ee519f683c8f-800x.jpg" alt="Презентация по информатики на тему Архитектура ПК"> <span class="desc"> <span>Презентация по информатики на тему Архитектура ПК</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 201</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/prezentatsiya-po-informatike-dlya-8-klassa-8"> <img src="/img/thumbs/883d00499d0eb8db5b62c0161be2ecce-800x.jpg" alt="Презентация по информатике для 8 класса Компьютер құрылғылары"> <span class="desc"> <span>Презентация по информатике для 8 класса Компьютер құрылғылары</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 326</span> </span> </a> </div> <div class="clear"></div> </div> </div> </div> </div> </div> <div class="container bottom"> <div> <div class="whatis"> <h4><i class="fa fa-info text-red"></i>Что такое shareslide.ru?</h4> <p> Это сайт презентаций, где можно хранить и обмениваться своими презентациями, докладами, проектами, шаблонами в формате PowerPoint с другими пользователями. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами.</p> <hr /> <p><a href="/privacy">Для правообладателей</a></p> <!-- Yandex.Metrika informer --> <a href="https://metrika.yandex.ru/stat/?id=62259274&from=informer" target="_blank" rel="nofollow"><img src="https://informer.yandex.ru/informer/62259274/3_1_FFFFFFFF_EFEFEFFF_0_pageviews" style="width:88px; height:31px; border:0;" alt="Яндекс.Метрика" title="Яндекс.Метрика: данные за сегодня (просмотры, визиты и уникальные посетители)" class="ym-advanced-informer" data-cid="62259274" data-lang="ru" /></a> <!-- /Yandex.Metrika informer --> <!--LiveInternet counter--> <script type="text/javascript"> document.write('<a href="//www.liveinternet.ru/click" '+ 'target="_blank"><img src="//counter.yadro.ru/hit?t15.3;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="links"> </div> <div class="call_back"> <h4><i class="fas fa-bullhorn"></i>Обратная связь</h4> <p>Email: <a href="#" class="js_hidden_email" data-address="shareslide" data-domain="ya.ru">Нажмите что бы посмотреть</a> </p> </div> <div class="clear"></div> </div> </div> <script src="/templates/presentation/js/script.js?2447e50ae9548e2940ba7a21ee06d344"></script> </body> </html>