Слайд 1
что такое HTML ? Курс разработан : Богдановым В.В. Зам. Директора по УВР ГОУ СОШ №68 г. Санкт- Петербурга
Слайд 2
Так что такое HTML? HyperText Markup Language (в дальнейшем HTML) это язык гипертекстовой разметки документа. В нашем случае этим документом является web страница. Проще говоря, это язык для написания web страниц. Читая код HTML, веббраузер выводит на экран Вашего монитора содержимое web страницы. Вы спросите; «А что такое веббраузер?». Это программа для просмотра web страниц, каковыми являются «Microsoft Internet Explorer” (в далнейшем "IE"), «Netscape Navigator», «Opera», «Mozila» и др..
Слайд 3
Использование Браузеров Каким браузером пользоваться каждый выбирает сам. Лично я использую три браузера : - Microsoft Internet Explorer - Mozila - Opera И возникнает вопрос: «Зачем столько браузеров на одном компьютере?». .
Слайд 4
Использование Браузера Дело в том что все эти браузеры продукты разных конкурирующих между собой компаний и каждая придумывает новые расширения к языку HTML и внедряет их поддержку в свои браузеры. Поэтому страницы не всегда могут одинаково выглядеть в разных браузерах и это надо учитывать при создании вебстраниц. Когда создаете страницы проверяйте их на правильное отображение в разных браузерах
Слайд 5
С чего начинать? Для начала Вам нужно выбрать редактор. Сyщecтвyeт три типa HTML peдaктopoв : 1. Редакторы типа “WYSIWYG (What-You- See-Is What-You-Get) Что видишь, то и получишь” Пользователь не видит "внутренностей" документа, с которым он работает, точно так же, как при работе с текстовым процессором типа Microsoft Word
Слайд 6
3 . Редактор Типа CMS Система управления содержимым (англ. Content Management System ) позволяет создавать сайт внутри программы без основных знаний PHP MySQL Apache (создание на сервере с установленными базами) 2. Редакторы собственно HTML-текстов. В процессе работы пользователь видит внутреннее содержание HTML-файла и может изменять его либо вручную, либо вызывая команды меню для вставки определенных элементов HTML.
Слайд 7
ИЗУЧЕНИЕ HTML Прежде чем начать изучение HTML нужно выбрать редактор. Можно использовать : Блокнот Notepad HotDog Professional Предлагаю использовать Notepad+
Слайд 8
Создание HTML страницы Скачайте документ с локального компьютера учителя : ДОКУМЕНТ Теперь создайте блокнот на рабочем столе и скопируйте текст из документа. Красным помечены поля для заполнения вашим текстом ( измените на ваш текст )
Слайд 9
Пример
Наша первая страница Название Вашего раздела Здесь Ваш текст.
Слайд 10
Теперь нужно сохранить документ в формате HTML
Слайд 11
Поздравляю с вашей первой страницей!!!! Теперь найдите ее там, куда Вы ее сохранили и откройте. То, что Вы видите это результат работы этого простого кода. РЕЗУЛЬТАТ
Слайд 12
ПЕРВАЯ СТРАНИЦА
Слайд 13
РАЗБОР КОДА Большинство тегов имеют открывающийся элемент <> и закрывающийся . Между ними и находяться коды, которые распознает Обозреватель. HTML-документ всегда должен начинаться с объявления браузеру какой версии международной спецификации html он соответствует. Верхняя строчка сообщает браузеру, что этот HTML документ соответствует версии 4.0 международной спецификации HTML.
Слайд 14
с вверху- вниз Открывающий тег, который объявляет о начале документа.
Открывающий тег заголовка = тег . Между открывающим и закрывающим тегом располагается название документа и служебная информация для браузеров и поисковых машин. В нашем случае это информация о кодировки страницы
Слайд 15
ТЕГ TiTle
Открывающий тег названия документа дает браузеру понять, что все что написано сразу за этим тегом и до закрывающего тега является названием документа. Это название выводится браузером на самую верхнюю панель браузера. Закрывающий тег названия документа дающий понять браузеру, что на этом действие тега
закончилось.</p><p class='slide-number'>Слайд 16</p><p>Закрытия тега Head </Head> Закрывающий тег заголовка или головы документа дающий понять браузеру, что на этом действие тега <Head> закончилось.</p><p class='slide-number'>Слайд 17</p><p>Что за тег BODY ?! <Body> Только теперь между открывающим тегом <Body> и закрывающим </Body> находится все, что выводится браузером на экран. Это таблицы, текст, изображения . Одним словом, все HTML-элементы, отвечающие за отображение документа, управление им и гипертекстовые ссылки. </Body> Закрываем тело документа. Иными словами в данном месте закончено действие тега <Body>.</p><p class='slide-number'>Слайд 18</p><p>Конец HTML документа </Html> Закрываем HTML документ. Видя этот тег браузер понимает что действие тега <Html> на этом закончено.</p><p class='slide-number'>Слайд 19</p><p>ПОДВОДИМ ИТОГИ Для просмотра созданного HTML документа необходимо как минимум 2а браузера . Крайне необходим текстовый редактор по типу ( Notepad ) . HTML страницы строятся на коде с открывающими и закрывающими тегами и базируются на главном элементе <></></p><p class='slide-number'>Слайд 20</p><p>Итог по HTML странице 4. Любой HTML документ состоит из : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <html> < / html> < Title > < /Title > <head> < / head> <body> < / body></p><p class='slide-number'>Слайд 21</p><p>Спасибо за Внимание!!!</p></div></div></div></div></div><br><div class="block marina-gradient-rounded-corners marina-title-rounded-green"><div class="inner clearfix"><div class="inner-wrapper"><div class="inner-inner"><h2 class="title block-title">По теме: методические разработки, презентации и конспекты</h2><div class="others"><h6><a href="/shkola/vneklassnaya-rabota/library/2011/10/31/stsenicheskaya-postanovka-chto-takoe-khorosho-i-chto">Сценическая постановка «Что такое хорошо и что такое плохо» </a></h6><p class="search-excerpt">Задача данного мероприятия - через сатиру и юмор показать отрицательное влияние вредных привычек на здоровье и моральный облик человека...</p></div><div class="others"><h6><a href="/shkola/stsenarii-prazdnikov/library/2012/01/09/konkurs-sorevnovanie-chto-takoe-khorosho-i-chto-takoe">Конкурс- соревнование "Что такое хорошо и что такое плохо"</a></h6><p class="search-excerpt">Данный конкурс- соревнование позволит обучающимся расширить знания о правилах хорошего тона, о культуре поведения Ц...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2017/01/26/picture-65404-1485379863.jpg"><h6><a href="/shkola/rodnoy-yazyk-i-literatura/library/2012/03/07/chto-takoe-krasota-po-proizvedeniyu-oskara">Что такое красота? (По произведению Оскара Уайльда «Мальчик – звезда») Что такое красота? (По произведению Оскара Уайльда «Мальчик – звезда») </a></h6><p class="search-excerpt">разработка урока литературы по произведению Оскара Уайльда "Мальчик - звезда"...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2017/11/12/picture-972730-1510512924.jpg"><h6><a href="/shkola/fizika/library/2022/12/15/virtualnaya-laboratornaya-rabota-po-fizike-izuchenie-rasshireniya">Виртуальная лабораторная работа по физике «Изучение расширения твердых тел» - http://efizika.ru/html5/29/index.html</a></h6><p class="search-excerpt">[[{"type":"media","view_mode":"media_large","fid":"26951967","attributes":{"alt":"","class":"media-image"}}]]Виртуальная лабораторная работа по физике «Изучение расширения твердых тел» - h...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2017/11/12/picture-972730-1510512924.jpg"><h6><a href="/shkola/fizika/library/2022/12/16/virtualnaya-laboratornaya-rabota-po-fizike-opredelenie">Виртуальная лабораторная работа по физике «Определение сопротивления проводников методом амперметров» - https://efizika.ru/html5/140/index.html</a></h6><p class="search-excerpt">[[{"type":"media","view_mode":"media_large","fid":"26960493","attributes":{"alt":"","class":"media-image"}}]]Виртуальная лабораторная работа по физике «Определение сопротивления проводников мето...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2017/11/12/picture-972730-1510512924.jpg"><h6><a href="/shkola/fizika/library/2022/12/16/virtualnaya-laboratornaya-rabota-po-fizike-izmerenie-soprotivleniya">Виртуальная лабораторная работа по физике «Измерение сопротивления резисторов методом вольтметров» - https://efizika.ru/html5/141/index.html.</a></h6><p class="search-excerpt">[[{"type":"media","view_mode":"media_large","fid":"26965571","attributes":{"alt":"","class":"media-image"}}]]141. Виртуальная лабораторная работа по физике «Измерение сопротивления резисторов ме...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2017/11/12/picture-972730-1510512924.jpg"><h6><a href="/shkola/fizika/library/2022/12/21/142-virtualnaya-laboratornaya-rabota-po-fizike-regulirovanie-sily">142. Виртуальная лабораторная работа по физике «Регулирование силы тока реостатом» - http://efizika.ru/html5/142/index.html</a></h6><p class="search-excerpt">[[{"type":"media","view_mode":"media_large","fid":"27006892","attributes":{"alt":"","class":"media-image"}}]]142. Виртуальная лабораторная работа по физике «Регулирование силы тока реостатом&raq...</p></div></div></div></div></div><br><div id="poisk-materialov" data-1="657"></div>
<ul class="links inline"><li class="flag-like first last"><span><span class='like-tooltip flag-like'><a href='#'>Мне нравится</a><span class='flag-throbber'> </span></span></span></li>
</ul> <div class="share_buttons clearfix">Поделиться:<div class="ya-share2" data-services="vkontakte,odnoklassniki,telegram,moimir" data-url="https://nsportal.ru/shkola/informatika-i-ikt/library/2019/02/22/chto-takoe-html" data-title="что такое html?" ></div></div>
<div class="add-new-comment-button my-button-large"></div>
</div>
</div>
</div>
</div>
</div>
</div> </div><!-- /content-inner -->
</div><!-- /content -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="user_relationships_popup_form" class="user_relationships_ui_popup_form"></div><script src="/sites/default/files/advagg_js/js__S3bm1c7u9YzJnRE6QrV-HsLzADKLeupchfbrYg22kRU__S91yqV9ubUDMxzCK2GLBYdp1SFL3v48MFVTVZ3OSXjc__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script>
<script src="/sites/default/files/advagg_js/js__hxOxF7aEdhvlSyCfiIODtjKmufwiFkLnYBgfAc3JU2U__Zvl8DJBWOfPQpMnqpLsqpzRLZD7C0PqUDMlY8RRkYVw__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script>
<script src="/sites/default/files/advagg_js/js__c1zZbhXAByh0V-pY3W2l6b4e6e6URcR4okOH_epIox4__oVrjkf1Udl7K9Xgwtl5J3lSmv-cR7ynKeNmPgrmULSU__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script>
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
</body>
</html>
<!-- Page cached by Boost @ 2026-01-25 06:21:19, expires @ 2026-05-17 06:21:19, lifetime 3 месяца 3 недели -->
<!-- cache/normal/nsportal.ru/shkola/informatika-i-ikt/library/2019/02/22/chto-takoe-html_ -->
urok_1sozdanie_html.ppt