Презентация, доклад на тему 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/prezentatsiya-i-fayl-s-zadaniyami-po"> <img src="/img/thumbs/609ba9c9be4781a04d96977e32596644-800x.jpg" alt="Презентация и файл с заданиями по информатике Форматирование абзацев(9 класс) Стили заголовок 1 выровнять по середине (Ctrl+E), абзац интервал перед 20, после 24, размер шрифта 18Задание№2. Напечатать текст, а затем отформатировать, его так как указано в "> <span class="desc"> <span>Презентация и файл с заданиями по информатике Форматирование абзацев(9 класс) Стили заголовок 1 выровнять по середине (Ctrl+E), абзац интервал перед 20, после 24, размер шрифта 18Задание№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/prezentatsiya-multimediyaly-prezentatsiyany-konstruktory"> <img src="/img/thumbs/f7a466ce4cac73a92122a5920a45c558-800x.jpg" alt="Презентация Мультимедиялық презентацияның конструкторы"> <span class="desc"> <span>Презентация Мультимедиялық презентацияның конструкторы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 134</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/iskusstvo-illyuzii"> <img src="/img/thumbs/63c83247b9746bb1b283cbadf7ab3c42-800x.jpg" alt="Искусство иллюзии"> <span class="desc"> <span>Искусство иллюзии</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 214</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/prezentatsiya-po-robototehnike-robototehnika-kak-instrument"> <img src="/img/thumbs/da45e9499f0cf03b2e54ea07590582eb-800x.jpg" alt="Презентация по робототехнике Робототехника как инструмент формирования инженерной компетенции обучающихся в рамках реализации ФГОС"> <span class="desc"> <span>Презентация по робототехнике Робототехника как инструмент формирования инженерной компетенции обучающихся в рамках реализации ФГОС</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 235</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/urok-po-teme-informatsiya-edinitsy-izmereniya"> <img src="/img/thumbs/db568eae3c2d3cfca7b4076b441afd0b-800x.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/interaktivnyy-test-po-programmirovaniyu-8-klass"> <img src="/img/thumbs/8cb867960f435e81ef97ae1fe48fd97d-800x.jpg" alt="Интерактивный тест по программированию 8 класс"> <span class="desc"> <span>Интерактивный тест по программированию 8 класс</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 232</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>