Презентация по основам HTML
презентация к уроку по информатике и икт (11 класс) на тему
Опубликовано 01.12.2013 - 12:17 - Белоусова Юлия Викторовна
Предварительный просмотр:
Подписи к слайдам:
Создание Web -страниц на языке HTML - Название, оглавление страницы, предназначен для поисковых машин, этот тег всегда помещается внутри - < head >< title >…</ title ></ head > <BODY> - В этот тег помещается информация, которая должна отображаться в окне браузера. < body >…</ body ></p><p class='slide-number'>Слайд 6</p><p>Пример: <HTML> <HEAD> <TITLE> Это моя первая страница</ TITLE> </HEAD> <BODY> Привет, мир!</ BODY> </HTML></p><p class='slide-number'>Слайд 7</p><p>Чтобы расширить возможности отдельных тегов и более гибко управлять их содержимым применяются атрибуты тегов. Атрибуты тега тела документа < body bgcolor= "…"> - Цвет фона документа, используя значение цвета в виде RRGGBB. < body text= "..."> - Цвет текста документа</p><p class='slide-number'>Слайд 8</p><p>Таблица цветов HTML</p><p class='slide-number'>Слайд 9</p><p>< H1>.....<H6> - Определяет величину заголовка по их степени важности. <h1>.....</h1> - Самый большой заголовок. <h6>.....</h6> - Самый маленький заголовок. < b >…..</ b > - Определяет текст жирным шрифтом. < i >…..</ i >- Определяет текст наклонным (курсив) шрифтом. < tt >…..</ tt > - Имитирует стиль печатной машинки. < font color= ”…”>…..</ font > - Задаёт цвет текста , шестнадцатеричном коде. < font size= "...">…..</ font >- Задаёт величину шрифта в пределах от “1” до “7”. < big >…..</ big >- Увеличивает размер текст на условную 1-цу от заданного. < strong >…..</ strong >- Этот тег, браузер определяет как жирное начертание текста. < em >…..</ em > - Этот тег, браузер определяет как наклонное (курсив) начертании текста. Атрибуты текст документа</p><p class='slide-number'>Слайд 10</p><p>Форматирование текста документа < p >…..</ p > - Определяет новый параграф текста с предварительным пропуском одной строки. < P ALIGN=”…”> - Выравнивает текст относительно одной из сторон документа. Значения : “ left ”, “ right ”, “ justify , “ center ”. Пример: < p align= " center ">текст</ p > Текст по центру.</p><p class='slide-number'>Слайд 11</p><p><OL> - Определяет нумерованный список. < LI> - Объекту, заключённому в этот тег присваивается номер. Также применяется атребут : start - Указывает стартовый номер. type - Определяет характер обозначение, буквенный “Ж”, ” ж ”, “ J”, ”j” или цифровой – “10”, “Х”. < ol type="… " start=" число" >...</ ol > Пример: < ol type="1" start="3"> <LI> морковь < LI> капуста < LI> яблоки < LI> уксус < LI> сахар < LI> соль </ ol > Результат: 3. морковь 4. капуста 5. яблоки 6. уксус 7. сахар 8. соль</p><p class='slide-number'>Слайд 12</p><p>Графические элементы на странице < img src ="name"> Вставляет изображение на страницу. < img src ="name" align="?"> Форматирует положение изображения в документе. Может иметь значения: left, right, center; bottom, top, middle. < img src ="name" border="?"> Устанавливает толщину рамки вокруг изображения < img src ="name" vspase ="?"> Устанавливает поля сверху и снизу < img src ="name" hspase ="?"> Устанавливает поля слева и справа. <hr> - Добавляет горизонтальную линию. < hr width="?"> Указывает ширину линии в пикселах или процентах. < hr noshade > Линия без тени. < hr color="?"> Определяет цвет линии.</p><p class='slide-number'>Слайд 13</p><p>Создание таблиц < table ></ table > Тег создающий таблицу. < tr ></ tr > Задает строку в таблице. < td ></ td > Задает отдельную ячейку в таблице. < th ></ th > Задает заголовок таблицы (обычная ячейка с форматированием по центру и полужирным текстом)</p><p class='slide-number'>Слайд 14</p><p>Атрибуты таблицы < table border= "#"> Определяет толщину рамки. < table cellspacing= "#"> Определяет расстояние между ячейками < table width= "#"> Устанавливает ширину таблицы. (Значение параметра может быть в пикселях или процентах) < table height= "#"> Устанавливает высоту таблицы. (Значение параметра может быть в пикселях или процентах) < td colspan= "#"> Указывает количество столбцов, объединенных в одной ячейке. < td rowspan= "#"> Указывает количество строк, объединенных в одной ячейке. < td width= "#"> Задает ширину ячейки таблицы в пикселях или процентах. < td height= "#"> Задает высоту ячейки таблицы в пикселях или процентах.</p><p class='slide-number'>Слайд 15</p><p>Оформление гиперссылок < a href= "Адрес ресурса - URL"></ a > - Задаёт переход на другие ресурсы. < a href= "Имя файла "> - Название страницы</ a > - Задаёт переход на другие страницы сайта. < a href= "Имя файла содержащего информацию" target= " _blank "> - Название страницы</ a > - Задаёт переход на другую страницу сайта в новом окне.</p><p class='slide-number'>Слайд 16</p><p>Атрибуты гиперссылок < atarget= "?"></ a > Указывает в каком окне открывать гиперссылку. Параметры: Значение _Blank - Открыть в новом окне _Parent Открыть в текущем окне Цвет текста гиперссылок Атрибут LINK служит для выделения гиперссылок, которые еще не посещались пользователем. Атрибут VLINK - уже посещенные ссылки. Атрибут ALINK - выделяет активную гиперссылку.</p><p class='slide-number'>Слайд 17</p><p>Пример: Гиперссылка может связывать страницы как в пределах одного сайта, так и указывать на любую страницу в Интернете. При построении ссылки на чужие страницы всегда надо пользоваться абсолютным адресом страницы (http://www.site.com/page.html). Если создается ссылка на страницу в пределах сайта , то предпочтительнее использовать относительный URL ( page.html , catalog / page.html ). Делая графическую гиперссылку, помните, что некоторым пользователям графика недоступна, поэтому обязательно включайте соответствующие текстовые элементы.</p><p class='slide-number'>Слайд 18</p><p>HTML-код: < a href= "http://on-line-teaching.com/index.html">Ссылка на главную страницу сайта</ a > Отображение в браузере: Ссылка на главную страницу сайта HTML-код: < a href= "../ index.html ">Ссылка на главную страницу сайта</ a > Отображение в браузере: Ссылка на главную страницу сайта</p><p class='slide-number'>Слайд 19</p><p>Гиперссылка в пределах html страницы Иногда необходимо сделать гиперссылку в пределах одной страницы. Например, в начале страницы это гиперссылки, позволяющие перейти к просмотру конкретного вопроса, и в самом низу страницы - позволяющей перейти в начало страницы. Чтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута NAME тэга <A>. Имя должно содержать только буквы и цифры. Таким образом можно делать гиперссылки, указывающие на области других страниц внутри сайта. Пример: HTML-код: < a href= "#Начало страницы">Наверх страницы</ a > В то место, куда надо сделать переход надо вставить: < a name= "Начало страницы"></ a > Отображение в браузере: Наверх страницы</p><p class='slide-number'>Слайд 20</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/informatika-i-ikt/library/2012/01/30/osnovy-html-razrabotka-web-sayta-shest-urovney">Основы HTML. Разработка Web-сайта Шесть уровней ворженности (модуль) 11 класс</a></h6><p class="search-excerpt">Урок с использованием модульной технологии.На мой взгляд, использование модульной технологии позволяет:
• повысить мотивацию учащихся в освоении не только знаний, но и ключевых компетенций;
• строит...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2012/12/02/picture-156133-1354437292.jpg"><h6><a href="/shkola/informatika-i-ikt/library/2012/12/02/prezentatsiya-osnovy-html-razrabotka-web-sayta">Презентация "Основы HTML. Разработка Web-сайта"</a></h6><p class="search-excerpt">Презентация предназначена для получения первоначальных сведений о создании Web-сайта и основах HTML....</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2022/10/17/picture-184558-1666033072.jpg"><h6><a href="/shkola/informatika-i-ikt/library/2013/03/11/sposoby-sozdaniya-saytov-osnovy-html">Способы создания сайтов. Основы HTML</a></h6><p class="search-excerpt">ЦЕЛИ И ЗАДАЧИ УРОКА:Освоить основные этапы построения web - страницОсвоить основные методы создания web - страницИметь представление об особенностях оформления информационных блоков страницыОсво...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2013/11/25/picture-353917-1385377476.jpg"><h6><a href="/shkola/informatika-i-ikt/library/2013/11/25/osnovy-html">Основы HTML</a></h6><p class="search-excerpt">Презентация по теме " Основы HTML"...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2016/06/26/picture-36763-1466925823.jpg"><h6><a href="/shkola/informatika-i-ikt/library/2014/07/02/osnovy-html">Основы HTML</a></h6><p class="search-excerpt">Основы HTML...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2016/01/28/picture-744764-1453957724.jpg"><h6><a href="/shkola/informatika-i-ikt/library/2016/01/28/kontrolnoe-testirovanie-test-po-teme-osnovy-html">Контрольное тестирование. Тест по теме «Основы HTML»</a></h6><p class="search-excerpt">Контрольное тестирование. Тест по теме «Основы HTML»...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2019/03/02/picture-250420-1551540523.jpg"><h6><a href="/shkola/informatika-i-ikt/library/2017/11/01/prezentatsiya-osnovy-html-vyborg-18-aprelya-2017-god">Презентация "Основы HTML" - Выборг, 18 апреля 2017 год.</a></h6><p class="search-excerpt">Презентация для предметной сессии для одаренных детей....</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/2013/12/01/prezentatsiya-po-osnovam-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 type="text/javascript" src="/sites/default/files/advagg_js/js__S3bm1c7u9YzJnRE6QrV-HsLzADKLeupchfbrYg22kRU__S91yqV9ubUDMxzCK2GLBYdp1SFL3v48MFVTVZ3OSXjc__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script>
<script type="text/javascript" src="/sites/default/files/advagg_js/js__hxOxF7aEdhvlSyCfiIODtjKmufwiFkLnYBgfAc3JU2U__Zvl8DJBWOfPQpMnqpLsqpzRLZD7C0PqUDMlY8RRkYVw__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script>
<script type="text/javascript" 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 @ 2024-04-15 02:01:01, expires @ 2024-08-05 02:01:01, lifetime 3 месяца 3 недели -->
<!-- cache/normal/nsportal.ru/shkola/informatika-i-ikt/library/2013/12/01/prezentatsiya-po-osnovam-html_ -->
Основные понятия HTML расшифровывается H yper T ext M arkup L anguage ( в переводе означает Язык Разметки ГиперТекста ). HTML предназначен для создания веб-страниц во всемирной паутине.
Основные понятия Тэги - это метки, которые используются для указания браузеру, как он должен показывать web-сайт. Большая часть HTML тегов состоит из двух частей: открывающий тег <...> закрывающий тег Теги не чувствительны к регистру
Структура HTML документа. Абсолютно любой документ, построенный на базе HTML будет состоять, по меньшей мере, из следующих тегов: - Это самый главный тег, так как указывает принадлежность документа к HTML языку, заключает в себе всё содержимое веб – страницы, ставится в самом начале и соответственно в конце закрывает документ. < html >…
- Этот тег не менее важен, в нём размещается не видимая информация о вашем сайте предназначенная для поисковых машин. < head >…