- элемент , задающий ячейку таблицы Атрибут width задают ширину таблицы Атрибут height -задают высоту таблицы Атрибут bgcolor -для задания цвета всей таблицы надо поместить внутри элемента
Для задания цвета ячеек этот атрибут надо поместить внутрь элемента | Атрибут border - задает толщину рамки таблицы Слайд 3 Пример Таблица шириной 500 пикселей | Ширина этой таблицы 500 пикселей и она состоит из одной строки и одного столбца | Слайд 4 Пример Для задания таблицы не зависимой от разрешения монитора, ее следует задавать в процентном отношении к экрану и задавать цвет каждой ячейки: Слайд 5 Пример : Можно сделать грани таблицы невидимыми , для чего толщину рамки таблицы надо задать равной нулю border="0"Слайд 6 Существует набор атрибутов предназначенных для выравнивания данных в ячейках таблицы: align - позволяет выравнивать данные по горизонтали и может принимать следующие значения : left - выравнивание влево right - выравнивание вправо center -выравнивание по центру valign -позволяет выравнивать текст по вертикали и может принимать следующие значения : top - выравнивание по верхнему краю ячейки middle - выравнивание по центру baseline - выравнивание по первой строке Таблицы Слайд 7 Пример: Слайд 8 Пример : | выравнивание по гризонтали | по центру | по левому краю | по правому краю | | выравнивание по вертикали | по верхнему краю | по центру | по нижнему краю | Слайд 9 Задание 1 2 Создание таблиц 1. Создайте новую страницу в редакторе БЛОКНОТ 2. В элементе укажите "Практическая работа № 12 3. Создайте таблицу из двух строк и трех столбцов 4. Задайте фон таблицы зеленого цвета, толщину линии равную 3 пикселам, ширину таблицы равную ширине экране, шрифт внутри таблицы белый. 5. Текст первой строки выровняйте по цетру по горизонтали и по вертикали 6. Текст второй строки выделите жирным шрифтом. 7. В первую ячейку первой строки вставьте рисунок children.jpg 8. Во второй ячейке второй строки напишите любое четверостишие. 9. З ада йте фон третьей ячеки второй строки красный.</p><p class='slide-number'>Слайд 10</p><p>Задание 1 3 Создание таблиц 1. Создайте новую страницу в редакторе БЛОКНОТ 2. В элементе <TITLE>укажите "Практическая работа №13" 3. Создайте таблицу для расписания ваших уроков из восьми столбцов и девяти строк. Ширина таблицы 100%. 4. В первом столбце укажите время начала и конца ваших уроков с выравнивание по левому краю. 5. В остальных ячейках -школьные предметы по дням недели. 6. Выравнивание названий предметов - по левому краю. 7. Выравнивание дней недели - по центру ячейки и жирным шрифтом. 8. У всех столбцов фон задайте разным цветом. 9. Перед таблицей поместите заголовок первого уровня красного цвета "Расписание уроков". 10. Между заголовком и таблицей поместите рисунок.</p><p class='slide-number'>Слайд 11</p><p>1. Создайте новую страницу в редакторе БЛОКНОТ 2. В элементе <TITLE>укажите "Практическая работа № 14 3. Разметку производить с использованием таблицы шириной на весь экран (100%) Страница размечена таблицей Главная страница Примеры История Об авторе Эта страница составлена с использованием таблицы,шириной 100%, состоящая из двух строк и двух столбцов В первую ячейку первой страницы вставлен рисунок. Ш(ирина ячейки -15%. Во второй ячейке первой строки располагается название сайта. В первой ячейке второй строки располагается меню сайта. Во второй ячейке второй строкирасполагается текст сайта Задание 14 Разметка WEB- страницы при помощи таблицы ( вариант1) Недостатком такой разметки является “плавучесть” содержимого страницы при уменьшении разрешения экрана (текст должен будет разместиться в более узкие рамки)</p><p class='slide-number'>Слайд 12</p><p>Задание 15 Разметка WEB- страницы при помощи таблицы ( вариант2) Чтобы таблица выглядела неизменной при любом разрешении экрана, надо задавать ее фиксированного размера Создайте страницу, которая производится разметкой таблицы шириной 760 пикселей, выровненой по центру экрана. В таблице задайте три строки и и один столбец. В верхнюю строку поместите заголовок, во второую - меню, а в третьей содержание страницы . Название страницы Главная страница Примеры История Об авторе Страница составлена с использованием таблицы шириной 760 пикселей, состоящей из двух строк и двух столбцов В первую строку вставлен рисунок и располагается название страницы Во второй строке размещается меню сайта Третья страка содержит содержание страницы</p><p class='slide-number'>Слайд 13</p><p>Пример таблицы с объединенными ячейками Для создания таблицы с объединенными ячейками необходимо указать в качестве значения параметров COLSPAN или ROWSPAN число объединяемых ячеек для данной ячейки Вся строка как одна ячейка Одна ячейка Одна ячейка Одна ячейка Одна ячейка Ячейка 2х2 2 ячейки по ширине Одна ячейка 2 ячейки по высоте Одна ячейка Одна ячейка Одна ячейка</p><p class='slide-number'>Слайд 14</p><p><P ALIGN=CENTER> <TABLE border="3"> <TR ALIGN=CENTER > <TD COLSPAN=4><B>вся строка как одна ячейка</B> </TR> <TR ALIGN=CENTER > <TD > одна ячейка </TD> <TD >одна ячейка </TD> <TD >одна ячейка</TD> <TD >одна ячейка</TD> </TR> <TR ALIGN=CENTER > <TD СОLSPAN=2 ROWSPAN=2><B>ячейка 2х2</B> </TD> <TD СОLSPAN=2 >2 ячейки по ширине </TD> </TR> <TR ALIGN=CENTER > <TD><B>отдельная ячейка</B> </TD> <TD ROWSPAN=2>две ячейки по высоте </TD> </TR> <TR ALIGN=CENTER > <TD><B>отдельная ячейка</B> </TD> <TD ><B>отдельная ячейка</B> </TD> <TD ><B>отдельная ячейка</B> </TD> <TD ><B>отдельная ячейка</B> </TD> </TR> </TABLE> </P></p><p class='slide-number'>Слайд 15</p><p>Метатеги page-enter и page-exit содержащие в себе вызов функции revealTrans, позволяют реализовать красивые видеэффекты при открытии и закрытии страниц. <META HTTP-EQUIV= page-enter CONTENT= revealTrans (Duration=6.0, Transition=….) > <META HTTP-EQUIV= page-exit CONTENT= revealTrans (Duration=6.0, Transition=….) > Вместо многоточия код эффекта: Видеоэффекты при открытии и закрытие страницы</p><p class='slide-number'>Слайд 16</p><p>коды эффектов открытия-закрытия страниц: 0- квадрат снаружи внутрь 1- квадрат изнутри наружу 2- круг снаружи внутрь 3- круг изнутри наружу 4- шторка снизу вверх 5- шторка сверху вниз 6- шторка слева направо 7- шторка справа налево 8- вертикальные жалюзи (слева направо) 9- горизонтальные жалюзи (сверху вниз) 10- квадратная мозаика (слева направо) 11- квадратная мозаика (сверху вниз) 12- рассыпание по отдельным пикселям 13- занавес по горизонтали от краев к центру (слева и справа) 14- занавес по горизонтали от центра к краям 15- занавес по вертикали от краев к центру (сверху и снизу) 16- занавес по вертикали от центра 17- шторка по диагонали (из правого верхнего в левый нижний) 18- шторка по диагонали ( из правого нижнего в левый верхний) 19- шторка по диагонали (из левого верхнего в правый нижний) 20- штока по диагонали (из левого нижнего в правый верхний) 21- рассыпание по строкам 22- рассыпание по столбцам</p><p class='slide-number'>Слайд 17</p><p>создание форм</p><p class='slide-number'>Слайд 18</p><p>Создание форм Отправка содержимого формы по Е- mail для дальнейшей расшифровки данных владельцем сайта: <FORM ACTION=“mailto:sch186@mtu-net.ru” ENCTYPE=application/x-www-form-urlencoded METHOD=post> или <FORM ACTION=“mailto:sch186@mtu-net.ru” ENCTYPE=multipart/form-data METHOD=post> или <FORM ACTION=“mailto:sch186@mtu-net.ru” ENCTYPE=text/plain METHOD=post></p><p class='slide-number'>Слайд 19</p><p>Поля ввода текста INPUT TYPE=text Представляет собой прямоугольное поле для ввода одной строки текста Параметры: NAME - уникальное имя поля SIZE - ширина поля в символах MAXLENGHT - максимально допустимое количество вводимых символов VALUE - строка изначально выводимая в данном текстовом поле</p><p class='slide-number'>Слайд 20</p><p>Пример: <FORM ACTION=mailto:user@domain.ru METHOD=post> <INPUT TYPE=text NAME=MyFam SIZE=20 MAXLENGHT=40 VALUE=“Введите фамилию” </FORM></p><p class='slide-number'>Слайд 21</p><p>Поле ввода пароля INPUT TYPE=password Прямоугольное однострочное поле, отличающееся от ранее рассмотренного тем, что вводимый текст отображается в виде звездочек Пример <FORM ACTION=mailto:user@domain.ru METHOD=post> <INPUT TYPE=password NAME=MyFam SIZE=20 MAXLENGHT=40 VALUE=“пароль” </FORM></p><p class='slide-number'>Слайд 22</p><p>Многострочная текстовая область <TEXTAREA>….</TEXTAREA> Прямоугольное поле с заданными шириной и высотой, при необходимости генерируется вертикальная линейка прокрутки. Параметры: NAME - имя области COLS и ROWS - ширина области в символах и высота в строках WRAP- управляет автоматическим переносом строк внутри окна</p><p class='slide-number'>Слайд 23</p><p>Пример: <FORM ACTION=mailto:user@domain.ru METHOD=post> <TEXTAREA NAME MyFam COLS=20 ROWS=7 WRAP=virtual> Для прокручивания содержимого в этом поле ввода используйте линейку проерутки или клавиши PgUp, PgDn, дибо клавиши управления курсором </TEXTAREA> </FORM></p><p class='slide-number'>Слайд 24</p><p>Флажки INPUT TYPE=checkbox Служат для ответа пользователя “да-нет” или выбора из нескольких предложенных вариантов Параметры: NAME - имя флажка VALUE - произвольная комбинация букв и цифр, передаваемая на сервер, если данный флажок будет помечен пользоввателем CHECKED - при наличии данного параметра соответствующий флажок изначально будет выводится как помеченный</p><p class='slide-number'>Слайд 25</p><p>Пример: <FORM ACTION=mailto:user@domain.ru METHOD=post>Что заказываем? <INPUT TYPE=checkbox NAME=Pirog VALUE=“с капустой”>с капустой<BR> <INPUT TYPE=checkbox NAME=Pirog VALUE=“с мясом”>с мясом<BR> <INPUT TYPE=checkbox NAME=Pirog VALUE=“с яблоками”>с яблоками<BR> <INPUT TYPE=checkbox NAME=Pirog VALUE=“с курагой”>курагой<BR> </FORM></p><p class='slide-number'>Слайд 26</p><p>Радиокнопки INPUT TYPE=radio Позволяют выбрать только один из представленных вариантов Параметры: NAME - имя радиокнопки VALUE - произвольная комбинация букв и цифр, передаваемая на сервер, если данный флажок будет помечен пользоввателем CHECKED - при наличии данного параметра соответствующий флажок изначально будет выводится как помеченный</p><p class='slide-number'>Слайд 27</p><p>Пример: <FORM ACTION=mailto:user@domain.ru METHOD=post>Что заказываем? <INPUT TYPE=radio NAME=Pirog VALUE=“с капустой”>с капустой<BR> <INPUT TYPE=radio NAME=Pirog VALUE=“с мясом”>с мясом<BR> <INPUT TYPE=radio NAME=Pirog VALUE=“с яблоками”>с яблоками<BR> <INPUT TYPE=radio NAME=Pirog VALUE=“с курагой”>курагой<BR> </FORM></p><p class='slide-number'>Слайд 28</p><p>Раскрывающиеся списки <SELECT>…</SELECT> Предназначены для предоставления возможности выбора или раскрывающегося меню. Параметры: NAME - имя списка SIZE - количество отображаемых пунктов MULTIPLE - разрешение помечать сразу несколько пунктов списка (при одновременно нажатых клавишах Ctrl или Shift) SELECTED - пункт, помеченный по умолчанию Самый первый пункт обычно является фиктивным и содержит текст подсказки</p><p class='slide-number'>Слайд 29</p><p>Пример: <FORM ACTION=mailto:user@domain.ru METHOD=post> Назовите Ваш любимый браузер <br> <SELECT NAME=Browser SIZE=1> <OPTION VALUE=“”>Выберите название <OPTION VALUE=IE>Internet Explorer <OPTION VALUE=NN>Netscape Navigator <OPTION VALUE=NC> Netscape Communicator <OPTION VALUE=VZ> Mosaic </SELTCT> <BR> <INPUT TYPE=checkbox NAME=Not VALUE=“Ни один из перечисленных” <BR> </FORM></p><p class='slide-number'>Слайд 30</p><p>Командные кнопки Кнопка очистки формы INPUT TYPE=reset щелчок мыши по этой кнопке восстанавливает начальное значение всех элементов формы 2. Кнопка отправки формы INPUT TYPE=submit Щелчок ьыши по этой кнопке отправляет информацию формы на сервер</p><p class='slide-number'>Слайд 31</p><p>Задание 1 5 Создание форм Созайте форму следующего образца Ваша фамилия Ваш возраст Ваши занятия отправка 10-16 17-25 26-50 51-100 Искусство Наука Бизнес очистка</p><p class='slide-number'>Слайд 32</p><p>Меню с раскрывающемся списком <P ALIGN=CENTER> <FORM NAME=“form”> <SELECT NAME=“site”SIZE=1> <OPTION VALUE=“”> Go to… <OPTION VALUE=“STR2.HTM” > Вторая страница <OPTION VALUE=“STR3.HTM” > Третья страница <OPTION VALUE=“http://www.yaho.com” > <OPTION <OPTION VALUE=“http://javascript.internet.com >Javascript Sours </SELECT> <INPUT TYPE=button VALUE=“Go!” onClick=javascript:formHandler()”> </FORM> </P></p><p class='slide-number'>Слайд 33</p><p>Счетчик посещений <P> Посетителей странички - <?php $filename=“counter.dat”; $fp=@fopen($filename,”r”); If($fp) {$counter=fgets($fp,10);fclose($fp);} else {$counter=0;} $counter++; $fp=$fopen($filename,”w”); If ($fp) { $counter=fputs ($fp,$counter); fclose ($fp);} ?> </P> Переменные данного счетчика: Filename-хранит имя файла с количеством посещений Counter - количественное значение посетивших сайт</p><p class='slide-number'>Слайд 34</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/03/20/uchebnaya-prezentatsiya-po-teme-yazyk-html-nachalnye">Учебная презентация по теме " Язык HTML (начальные сведения)"</a></h6><p class="search-excerpt">Основные понятия HTML.Теги HTML.Форматирование текста.Форматирование шрифтов.Форматирование заголовков.Форматирование абзацев.Форматирование списков.Гиперссылки.Оформление фона и вставка рисунка...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2012/11/08/picture-138291-1352348112.jpg"><h6><a href="/shkola/informatika-i-ikt/library/2012/12/08/bazy-dannykh-subd-ms-access-redaktirovanie-tablits">Базы данных. СУБД MS Access: редактирование таблиц, создание форм и запросов (лабораторная работа 2)</a></h6><p class="search-excerpt">Лабораторная работа "Редактирование таблиц, создание форм и запросов в СУБД MS Access" является второй в комплексе лабораторных работ по изучению указанного приложения и ознакомления учащихся 8-9...</p></div><div class="others"><h6><a href="/shkola/inostrannye-yazyki/angliiskiy-yazyk/library/2015/10/21/uchebnaya-prezentatsiya-po-teme">учебная презентация по теме "Повседневная жизнь" (часть 1) к УМК Верешагиной И.Н. "Английский язык 3 класс</a></h6><p class="search-excerpt">учебная презентация к УМК Верещагиной И,Н. "Английский язык 3 класс" помогает знакомить учащихся с новой лексикой, отрабатывать новую лексику в устной речи, является наглядным пособием...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2013/11/08/picture-337252-1383925404.jpg"><h6><a href="/shkola/inostrannye-yazyki/angliiskiy-yazyk/library/2019/01/09/uchebnaya-prezentatsiya-po-angliyskomu">Учебная презентация по английскому языку "Основные лекарственные формы"</a></h6><p class="search-excerpt">Учебная презентация по английскому языку "Основные лекарственные формы"...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2016/12/03/picture-861312-1480788673.jpg"><h6><a href="/shkola/raznoe/library/2020/05/27/onlayn-uchebnye-resursy-po-tatarskomu-yazyku-dlya-organizatsii">Онлайн-учебные ресурсы по татарскому языку для организации дистанционной формы обучения</a></h6><p class="search-excerpt">Онлайн-учебные ресурсы по татарскому языку для организации дистанционной формы обучения...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2018/12/21/picture-620768-1545366541.jpg"><h6><a href="/shkola/informatika-i-ikt/library/2020/06/25/konspekt-uroka-po-informatike-na-temu-instruktazh-po-0">Конспект урока по информатике на тему: «Инструктаж по ОТ. Создание формы в базе данных» </a></h6><p class="search-excerpt">Конспект урока по информатике на тему: «Инструктаж по ОТ. Создание формы в базе данных»...</p></div><div class="others"><h6><a href="/shkola/informatika-i-ikt/library/2020/11/09/metodicheskaya-razrabotka-dlya-uchiteley-ispolzovanie">Методическая разработка для учителей "Использование языка HTML при создании сайтов"</a></h6><p class="search-excerpt">laquo;Использование языка HTML при создании сайтов» - методическая разработка для учителей, занимающихся созданием сайтов. Достаточно часто, при попытке выполнить форматиро...</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/2012/03/20/uchebnaya-prezentatsiya-po-teme-yazyk-html-tablitsy" 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-03-27 03:25:25, expires @ 2024-07-17 03:25:25, lifetime 3 месяца 3 недели -->
<!-- cache/normal/nsportal.ru/shkola/informatika-i-ikt/library/2012/03/20/uchebnaya-prezentatsiya-po-teme-yazyk-html-tablitsy_ --> |
