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

Содержание

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

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

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

Слайд 2doctype

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

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

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

Слайд 3Элемент html

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

и конец, делается это с помощью элемента :



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

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

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


Браузеры отображают содержимое элемента как заголовок (имя) документа, который обычно отображается вверху окна браузера или в названии вкладки:<br> </div> <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="Урок 3. Структура HTML документа Элемент title Элемент предоставляет текстовый заголовок для документа. Каждый HTML-документ должен" alt="Элемент title Элемент предоставляет текстовый заголовок для документа. Каждый HTML-документ должен иметь ровно один элемент , который"></a> </div> <hr> </div> <div class="descrip" id="slide7"> <h2><a href="/img/thumbs/79bcb7ba8d25d2c2555aa0cfd406a1ef-800x.jpg" target="_blank">Слайд 7</a>Элемент body <br>Элемент является контейнером для всего содержимого веб-страницы. Все, что</h2> <div class="text"> отображается в окне браузера и видит пользователь, содержится в нем (у каждого HTML-документа может быть только один элемент <body>). Его основная цель - отделить содержимое документа от метаданных:<br><!DOCTYPE html><br><html><br> <head><br> <title>Заголовок окна




Элемент body Элемент является контейнером для всего содержимого веб-страницы. Все, что отображается в окне браузера и видит

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

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

Слайд 9Структура сайта
Не держите все файлы в одной папке. Даже небольшими сайтами

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

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

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

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

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

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

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

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









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

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

элемент, над которым в иерархическом древе есть родительский элемент. Дочерний элемент также еще называют ребенком.
Родственный элемент - это другой дочерний элемент того же родительского элемента на том же уровне ответвления. Такие элементы также называют сестринскими, в примере такими элементами являются и , и <style>.<br> </div> <div class="image"> <a href="/img/thumbs/7013929ccaf337a098b83250af8ac23e-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Схему, показывающую вложенность элементов, можно представить следующим образом:Дочерний элемент - это элемент, над которым в иерархическом древе есть родительский элемент. Дочерний элемент также еще называют ребенком.Родственный элемент - это другой дочерний элемент того же родительского элемента на том же уровне ответвления. Такие элементы также называют сестринскими, в примере такими элементами являются и , и ."><img src="/img/thumbs/7013929ccaf337a098b83250af8ac23e-800x.jpg" title="Урок 3. Структура HTML документа Схему, показывающую вложенность элементов, можно представить следующим образом:Дочерний элемент - это" alt="Схему, показывающую вложенность элементов, можно представить следующим образом:Дочерний элемент - это элемент, над которым в иерархическом древе"></a> </div> <hr> </div> <div class="descrip" id="slide15"> <h2><a href="/img/thumbs/0ff70f13e082e8861e2a990d84a5e8f1-800x.jpg" target="_blank">Слайд 15</a>Корневой элемент - самый верхний элемент в иерархии (), все другие</h2> <div class="text"> элементы являются его потомками.<br>Родительский элемент - это элемент, который содержит другой элемент. Иногда его называют просто родитель.<br>Потомок может являться непосредственно дочерним элементом, но обычно это общее название для всех элементов, которые вложены в другие элементы, независимо от того, как глубоко они вложены, например <head>, <title>, <body>, <p> и <style> являются потомками элемента <html>.<br> </div> <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="Урок 3. Структура HTML документа Корневой элемент - самый верхний элемент в иерархии (), все другие" alt="Корневой элемент - самый верхний элемент в иерархии (), все другие элементы являются его потомками.Родительский элемент -"></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/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/master-klass-osobennosti-elektronnyh-tablits-v"> <img src="/img/thumbs/e2aa1a325b0ef8735ac72ff9e285059a-800x.jpg" alt="Мастер-класс Особенности электронных таблиц в различных офисных программах. Подготовка учащихся к ОГЭ по информатике, практическое задание №19"> <span class="desc"> <span>Мастер-класс Особенности электронных таблиц в различных офисных программах. Подготовка учащихся к ОГЭ по информатике, практическое задание №19</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 192</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/algoritm-algoritmd-zhazu-pshm-blok-shemalar"> <img src="/img/tmb/1/91789/678526f65d733db68267e6c1b1f365d7-800x.jpg" alt="Алгоритм. Алгоритмді жазу пішімі. Блок-схемалар."> <span class="desc"> <span>Алгоритм. Алгоритмді жазу пішімі. Блок-схемалар.</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 224</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-po-informatike-podgotovka-k-ege-2"> <img src="/img/thumbs/9fa4e1994cbc09a2752113f13baf6eb5-800x.jpg" alt="Презентация по информатике Подготовка к ЕГЭ. №23 (11 класс)"> <span class="desc"> <span>Презентация по информатике Подготовка к ЕГЭ. №23 (11 класс)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 221</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/esepteush-tehnikasyny-damu-tarihy-6-synyp"> <img src="/img/tmb/1/31461/7ca55a7e172814b2baa88b607bb55505-800x.jpg" alt="Есептеуіш техникасының даму тарихы 6 сынып информатика сабағы"> <span class="desc"> <span>Есептеуіш техникасының даму тарихы 6 сынып информатика сабағы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 297</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/massivy-2"> <img src="/img/thumbs/a8ac93d1fe8a03eb277a6779a32db8e8-800x.jpg" alt="Массивы"> <span class="desc"> <span>Массивы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 318</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/prezentatsiya-podgotovka-kompyutera-k-rabote-2"> <img src="/img/thumbs/e6e28945fd42a2f04d562a78076f8ca3-800x.jpg" alt="Презентация Подготовка компьютера к работе (2 класс) Информатика и ИКТ"> <span class="desc"> <span>Презентация Подготовка компьютера к работе (2 класс) Информатика и ИКТ</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 218</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>