Презентация, доклад на тему Урок 3. Структура HTML документа

Презентация на тему Урок 3. Структура HTML документа, предмет презентации: Информатика. Этот материал в формате pptx (PowerPoint) содержит 15 слайдов, для просмотра воспользуйтесь проигрывателем. Презентацию на заданную тему можно скачать внизу страницы, поделившись ссылкой в социальных сетях! Презентации взяты из открытого доступа или загружены их авторами, администрация сайта не отвечает за достоверность информации в них, все права принадлежат авторам презентаций и могут быть удалены по их требованию.

Слайды и текст этой презентации

Слайд 1
Структура html-документаВ создании презентации использованы контент сайта puzzleweb.ru
Текст слайда:

Структура html-документа

В создании презентации использованы контент сайта puzzleweb.ru


Слайд 2
doctypeКаждый HTML документ, отвечающий спецификации HTML какой-либо версии (мы будем указывать последнюю версию), обязан начинаться со строки
Текст слайда:

doctype


Каждый HTML документ, отвечающий спецификации HTML какой-либо версии (мы будем указывать последнюю версию), обязан начинаться со строки декларации версии HTML, делается это с помощью объявления следующим образом:

Эта строка поможет браузеру определить, как правильно интерпретировать код полученной веб-страницы. В данном случае мы говорим браузеру, что HTML соответствует последнему стандарту спецификации.
Хотя слово doctype размещается в угловых скобках (< и >), оно не является тегом, это инструкция, предназначенная специально для браузеров, и восклицательный знак (!) в начале отличает ее от остального кода в HTML-документе.


Слайд 3
Элемент html После объявления версии и типа документа необходимо обозначить его начало и конец, делается это с
Текст слайда:

Элемент html


После объявления версии и типа документа необходимо обозначить его начало и конец, делается это с помощью элемента :



Это элемент также называют корневым, потому что все остальные элементы документа располагаются в нем. Корневой элемент может иметь только два дочерних элемента: и .


Слайд 4
Элемент head Элемент является контейнером для других элементов, которые предоставляют информацию о документе, известную как метаданные. Эти
Текст слайда:

Элемент head

Элемент является контейнером для других элементов, которые предоставляют информацию о документе, известную как метаданные. Эти метаданные сообщают браузеру о местонахождении внешних скриптов и таблиц стилей, устанавливая отношение между текущим документом и другими ресурсами, и могут предоставлять дополнительные данные, предназначенные для браузеров. Помимо обязательного элемента , рассматриваемого далее в этой главе, браузеры не отображают никакие метаданные, находящиеся внутри элемента <head>.<br>Элемент <head> должен быть первым дочерним элементом <html>, никакое содержимое или элементы не должны располагаться перед ним:<br> </div> <hr> </div> <div class="descrip"> <center><a href="/img/thumbs/8c482f23769535df8cfbadb827d8b2f4-800x.jpg" target="_blank">Слайд 5</a></center> <div class="image"> <a href="/img/thumbs/8c482f23769535df8cfbadb827d8b2f4-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Элемент head "><img src="/img/thumbs/8c482f23769535df8cfbadb827d8b2f4-800x.jpg" title="Элемент head" alt="Элемент head"></a> </div> <div class="text"> <center>Текст слайда:</center> <p>Элемент head <br><p><!DOCTYPE html><br><html><br> <head><br> </head><br></html><br> </div> <hr> </div> <div class="descrip"> <center><a href="/img/thumbs/0eded2e7e4f38698bc0ef0c8ddc6ebb3-800x.jpg" target="_blank">Слайд 6</a></center> <div class="image"> <a href="/img/thumbs/0eded2e7e4f38698bc0ef0c8ddc6ebb3-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Элемент title Элемент предоставляет текстовый заголовок для документа. Каждый HTML-документ должен иметь ровно один элемент , который должен располагаться внутри элемента : Заголовок окна Браузеры отображают содержимое элемента как заголовок (имя) документа, который обычно отображается вверху окна браузера или в названии вкладки:"><img src="/img/thumbs/0eded2e7e4f38698bc0ef0c8ddc6ebb3-800x.jpg" title="Элемент title Элемент предоставляет текстовый заголовок для документа. Каждый HTML-документ должен" alt="Элемент title Элемент предоставляет текстовый заголовок для документа. Каждый HTML-документ должен иметь ровно один элемент , который"></a> </div> <div class="text"> <center>Текст слайда:</center> <p>Элемент title <br><p>Элемент <title> предоставляет текстовый заголовок для документа. Каждый HTML-документ должен иметь ровно один элемент <title>, который должен располагаться внутри элемента <head>:<br><!DOCTYPE html><br><html><br> <head><br> <title>Заголовок окна


Браузеры отображают содержимое элемента как заголовок (имя) документа, который обычно отображается вверху окна браузера или в названии вкладки:<br> </div> <hr> </div> <div class="descrip"> <center><a href="/img/thumbs/79bcb7ba8d25d2c2555aa0cfd406a1ef-800x.jpg" target="_blank">Слайд 7</a></center> <div class="image"> <a href="/img/thumbs/79bcb7ba8d25d2c2555aa0cfd406a1ef-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Элемент body Элемент является контейнером для всего содержимого веб-страницы. Все, что отображается в окне браузера и видит пользователь, содержится в нем (у каждого HTML-документа может быть только один элемент ). Его основная цель - отделить содержимое документа от метаданных: Заголовок окна "><img src="/img/thumbs/79bcb7ba8d25d2c2555aa0cfd406a1ef-800x.jpg" title="Элемент body Элемент является контейнером для всего содержимого веб-страницы. Все, что" alt="Элемент body Элемент является контейнером для всего содержимого веб-страницы. Все, что отображается в окне браузера и видит"></a> </div> <div class="text"> <center>Текст слайда:</center> <p>Элемент body <br><p>Элемент <body> является контейнером для всего содержимого веб-страницы. Все, что отображается в окне браузера и видит пользователь, содержится в нем (у каждого HTML-документа может быть только один элемент <body>). Его основная цель - отделить содержимое документа от метаданных:<br><!DOCTYPE html><br><html><br> <head><br> <title>Заголовок окна





Слайд 8
Структура папок и элементов
Текст слайда:

Структура папок и элементов


Слайд 9
Структура сайта Не держите все файлы в одной папке. Даже небольшими сайтами намного проще управлять, если разложить
Текст слайда:

Структура сайта

Не держите все файлы в одной папке. Даже небольшими сайтами намного проще управлять, если разложить HTML документы, изображения и другие ресурсы в разные папки, создав тем самым определенную структуру расположения различных файлов. Структурируя файлы как вам удобно, вы можете выбрать для себя достаточно гибкую систему организации файлов, учитывая то, что сайт может расти, система файлов при этом будет оставаться ясной и понятной. Структуру (иерархию) каталогов, в которых располагаются различные файлы, обычно можно увидеть в виде древа. Рассмотрим в качестве примера следующее изображение.


Слайд 10
Как вы видите, структура - это всего лишь схема, отображающая вложенность одних каталогов в другие. В примере
Текст слайда:

Как вы видите, структура - это всего лишь схема, отображающая вложенность одних каталогов в другие. В примере мы использовали всего три каталога, однако этого будет достаточно для того, чтобы описать всю необходимую информацию. Часто каталоги описывают с помощью терминов наследственных (семейных) связей. У нас есть папка под названием "Бананы", она расположена внутри папки "Фрукты". Папка "Фрукты" - это родитель каталога "Бананы", а каталог "Бананы" - ребенок (дочерний каталог) папки "Фрукты". Также у нас есть еще папка "Киви", которая является тоже ребенком каталога "Фрукты".
Чтобы вам лучше запомнить, опишем термины отдельно:


Слайд 11
Дочерний каталог - это папка, над которой в иерархическом древе есть родительский каталог.Родительский каталог - это папка,
Текст слайда:

Дочерний каталог - это папка, над которой в иерархическом древе есть родительский каталог.
Родительский каталог - это папка, содержащая другой каталог.
Есть еще такое понятие как "корневой каталог" - это основная (главная) папка, в которой расположены все прочие каталоги и файлы.


Слайд 12
Структура элементов Структуру элементов также можно представить в виде схемы, отображающей вложенность одних элементов в другие. Рассмотрим
Текст слайда:

Структура элементов

Структуру элементов также можно представить в виде схемы, отображающей вложенность одних элементов в другие. Рассмотрим простой пример:


Слайд 13
Структура элементов
Текст слайда:

Структура элементов











Слайд 14
Схему, показывающую вложенность элементов, можно представить следующим образом:Дочерний элемент - это элемент, над которым в иерархическом древе
Текст слайда:

Схему, показывающую вложенность элементов, можно представить следующим образом:
Дочерний элемент - это элемент, над которым в иерархическом древе есть родительский элемент. Дочерний элемент также еще называют ребенком.
Родственный элемент - это другой дочерний элемент того же родительского элемента на том же уровне ответвления. Такие элементы также называют сестринскими, в примере такими элементами являются и , и <style>.<br> </div> <hr> </div> <div class="descrip"> <center><a href="/img/thumbs/0ff70f13e082e8861e2a990d84a5e8f1-800x.jpg" target="_blank">Слайд 15</a></center> <div class="image"> <a href="/img/thumbs/0ff70f13e082e8861e2a990d84a5e8f1-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Корневой элемент - самый верхний элемент в иерархии (), все другие элементы являются его потомками.Родительский элемент - это элемент, который содержит другой элемент. Иногда его называют просто родитель.Потомок может являться непосредственно дочерним элементом, но обычно это общее название для всех элементов, которые вложены в другие элементы, независимо от того, как глубоко они вложены, например , , , и являются потомками элемента ."><img src="/img/thumbs/0ff70f13e082e8861e2a990d84a5e8f1-800x.jpg" title="Корневой элемент - самый верхний элемент в иерархии (), все другие" alt="Корневой элемент - самый верхний элемент в иерархии (), все другие элементы являются его потомками.Родительский элемент -"></a> </div> <div class="text"> <center>Текст слайда:</center> <p>Корневой элемент - самый верхний элемент в иерархии (<html>), все другие элементы являются его потомками.<br>Родительский элемент - это элемент, который содержит другой элемент. Иногда его называют просто родитель.<br>Потомок может являться непосредственно дочерним элементом, но обычно это общее название для всех элементов, которые вложены в другие элементы, независимо от того, как глубоко они вложены, например <head>, <title>, <body>, <p> и <style> являются потомками элемента <html>.<br> </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/urok-3-struktura-html-dokumenta/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/kodirovanie-graficheskoy-informatsii-prezentatsiya-k-uroku"> <img src="/img/tmb/1/63768/af885f1a33b1d21d2d4c14f98a5e6faf-800x.jpg" alt="Кодирование графической информации-презентация к уроку"> <span class="desc"> <span>Кодирование графической информации-презентация к уроку</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 80</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/prezentatsiya-po-informatike-na-temu-kodirovanie-55"> <img src="/img/thumbs/2f8a39e4b1d4e4ff6dd36595f9054920-800x.jpg" alt="Презентация по информатике на тему Кодирование (7 класс)"> <span class="desc"> <span>Презентация по информатике на тему Кодирование (7 класс)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 58</span> </span> </a> </div> <div class="custom" > <!-- Yandex.RTB R-A-637067-1 --> <div id="yandex_rtb_R-A-637067-1"></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-637067-1", renderTo: "yandex_rtb_R-A-637067-1", 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="wrapper"> <a href="/informatika/prezentatsiya-po-teme-pravila-zapolneniya-elektronnoy"> <img src="/img/thumbs/957d402ee3760c55281f51b97a1ad121-800x.jpg" alt="Презентация по теме Правила заполнения электронной таблицы"> <span class="desc"> <span>Презентация по теме Правила заполнения электронной таблицы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 83</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/prezentatsiya-k-uroku-po-informatike-istoriya-4"> <img src="/img/tmb/5/488701/d552162b714bbaaf86a701ba205eba44-800x.jpg" alt="Презентация к уроку по информатике История чисел и систем счисления"> <span class="desc"> <span>Презентация к уроку по информатике История чисел и систем счисления</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 87</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/prezentatsiya-po-informatike-na-temu-sistemnyy-1"> <img src="/img/thumbs/62a8acb6980e6a227b813c9ee2a17a36-800x.jpg" alt="Презентация по информатике на тему: Системный блок"> <span class="desc"> <span>Презентация по информатике на тему: Системный блок</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 75</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/test-po-teme-informatsiya-i-informatsionnye"> <img src="/img/thumbs/6fb6136cbd4939d33214385f005b56ce-800x.jpg" alt="Тест по теме Информация и информационные процессы, разработанный на основе шаблона презентаций разработанного учителем Хамадиевой Натальей Александровной, учитель-логопед МАОУ лицей Синтон, г Чайковский Пермского края, для сайта http://pedsovet.su"> <span class="desc"> <span>Тест по теме Информация и информационные процессы, разработанный на основе шаблона презентаций разработанного учителем Хамадиевой Натальей Александровной, учитель-логопед МАОУ лицей Синтон, г Чайковский Пермского края, для сайта http://pedsovet.su</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 125</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?517fa6e982acc1a0ec4bb7c3207e0fbd"></script> </body> </html>