|
|
Лабораторная работа 1. Лабораторная работа 1. Цель практической работы научиться оформлять Webстраницы и применять гиперсылки Задачи
Лабораторная работа №1.
Цель практической работы – научиться оформлять Web-страницы и применять гиперсылки
Задачи:
Задание 1. Оформление цветом Web-страницы
• Создайте новую Web-страницу в редакторе Блокнот.
• В элементе укажите название странички «Задание 1. Оформление цветом Web-страницы.»<br /><br />• В начальном элементе <body> <a href="/laboratornaya-rabota-1-po-discipline-upravlenie-dannimi/index.html" title="Лабораторная работа 1 по дисциплине: «Управление данными»">используйте соответствующий атрибут</a>, чтобы сделать цвет фона странички черным.<br /><br />• Сделайте надпись белым цветом «Спокойной ночи». Выровняйте ее по середине страницы. Размер шрифта 4.<br /><br />• Вставьте горизонтальную линию красного цвета.<br /><br />• Сделайте надпись желтого цвета «Приятных сновидений». Выровняйте ее по середине страницы. Размер шрифта 7.<br /><br />• Вставьте горизонтальную линию синего цвета толщиной 10 пикселов, , и выровняйте ее по центру.<br /><b><span id='Задание_2_Гиперсылки_Задание_2.1_Создание_простейшей_гиперссылки_Указания_к_выполнению'>Задание 2 Гиперсылки</span></b><br /><br /><b>Задание 2.1 Создание простейшей гиперссылки </b> <br /><br /><b>Указания к выполнению</b><br />• Создайте две Web-страницы в редактор<br /><br />е Блокнот. Одну назовите pagel.htm, вторую<br /><br />page2.htm. Обе странички сохраните в одной папке под названием site. Обратите внимание, что названия папки и страничек должны быть на английском языке и начинаться со строчной буквы<br /><br />• В элементе <TITLE> укажите название странички "Задание 2.1. Создание простейшей гиперссылки”.<br /><br />• Пусть фон первой странички будет зеленого цвета, а второй синего.<br /><br />• На первой страничке создадим гиперссылку для перехода на вторую страницу. Для этого создайте элемент:<br /><br /><А href="page2.htm">Ha страницу 2 </а><br /><br />• На второй страничке создадим гиперссылку для перехода на первую страницу. Для этого создайте элемент:<br /><br /><А href="page1.htm">На страницу 1 </а><br /><br />• Откройте в браузере первую страничку и убедитесь, что обе гиперссылки работают правильно.<br /><br /><b>Задание 2.2 <a href="/laboratornaya-rabota-sozdanie-zakladok-giperssilok-snosok-v-te/index.html" title="Лабораторная работа «Создание закладок, гиперссылок, сносок в текстовом редакторе Word»">Создание гиперссылок</a></b><br />Указания к выполнению<br /><br />• Выполнить второе задание вы можете, если успешно справились с Заданием 2.1.<br /><br />Создайте третью страничку page3.htm. Пусть ее фон будет черным.<br /><br />• На страничке page3.htm создайте гиперссылки для перехода на странички pagel.htm и page2.htm.<br /><br />• На страничках pagel.htm и page2.htm добавьте гиперссылку для переход на страничку page3.htm.<br /><br />• На страничке page3.htm создайте в конце документа гиперссылку для перехода в начало этого же документа.<br /><br />• Откройте в браузере первую страничку и убедитесь, что теперь можно перейти с любой странички на любую другую из трех созданных.<br /><br /><br /><b><span id='Задание_3._Задание_3.1_Размещение_графики_на_Web-странице'>Задание 3. </span></b> <br /><br /><b>Задание 3.1 Размещение графики на Web-странице</b><br />• Создайте новую Web-страницу в редакторе Блокнот.<br /><br />• В элементе <TITLE> укажите название странички « ».<br /><br />• Если в тэге <body> не указывать цвет странички, то по умолчанию фон будет белым. Сделайте цвет фона странички оранжевым.<br /><br />• Разместите на страничке любой рисунок. Для размещения изображения вам требуется указать путь к файлу в элементе <img>. Чтобы упростить <a href="/istoriya-rossii-razdel-viii-rossijskaya-imperiya-v-xviii-veke/index.html" title="История россии раздел viii. Российская империя в xviii веке Пётр i (1672-1725 гг.)">описание пути к этому графическому файлу</a>, скопируйте этот файл в ту же папку, в которой будет сохранена Web-страничка.<br /><br />Если файл находится не в одной папке с Web-страничкой, то необходимо указать относительный путь к этому файлу.<br /><br />• Сделайте подпись к рисунку с помощью атрибута alt.<br /><br />• Создайте рамку вокруг рисунка шириной 2 пиксела.<br /><br />• Над рисунком поместите заголовок самого большого размера и выровняйте его по центру страницы.<br /><br /><b><span id='Задание_3.2._Изменение_размеров_изображения_на_Web-странице.'>Задание 3.2. Изменение размеров изображения на Web-странице.</span></b><br /><br />• Создайте новую Web-страницу в редакторе Блокнот.<br /><br />• В элементе <TITLE> укажите название странички «Задание 3.2. Изменение размеров изображения на Web-странице».<br /><br />• Пусть фон странички будет зеленого цвета.<br /><br />• Определите размер выбранного вами изображения.<br /><br />• Вставьте это изображение на страничку, задав его размеры: ширина 100, высота 100 пикселов.<br /><br />• Просмотрите в браузере полученную страничку. Обратите внимание на следующие вещи:<br /><br />A. В связи с тем, что вы непропорционально изменили размеры изображения, произошло искажение рисунка;<br /><br />B. Так как вы <a href="/povtorenie-v5/index.html" title="Повторение">увеличили размер изображения</a>, произошла потеря качества рисунка (обратите внимание на края изображения);<br /><br />C. Для размещения изображений на Web-страничке, лучше использовать прозрачный фон рисунка.<br /><b><span id='Задание_3.3._Использование_рисунка_в_качестве_гиперссылки'>Задание 3.3. Использование рисунка в качестве гиперссылки</span></b><br /><br />• Выполнить задание вы можете, если успешно справились с Заданием 3.3.<br /><br />• На страничках pagel.htm, page2.htm и page3.htm, вместо текстовых гиперссылок используйте рисунки.<br /><br />Для этого:<br /><br />• Вставьте на первую страничку одно изображение и создайте гиперссылку для перехода на вторую страницу:<br /><br /><А href ="page2.htm"> <img src="*.gif"> </а><br /><br />• самостоятельно вставьте другое изображение для перехода с первой странички на третью;<br /><br />• задайте бордюр обоих изображений, равным 2;<br /><br />• Откройте в браузере первую страничку и, <a href="/zanyatie-1-tema-nastrojka-os-windows-panele-upravleniya-os-win/index.html" title="Занятие №1 Тема: «Настройка ос windows. Панель управления ос windows»">переходя по ссылкам со странички на страничку</a>, убедитесь, что переходы работают верно.<br /><br />• Самостоятельно вставьте изображения на страницы page2.htm и page3.htm и задайте соответствующие гиперссылки.<br /><br />• Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что кнопки на всех страницах работают верно.<br /><br /><br />По высше указанным пунктам поготовить отчет и загрузить в портал https://polytechonline.kz/ <br />Структура отчета (шаблон отчета представлен в Приложение А):<br /><br /><ul> <li/> <br /><i>Титульный лист</i><br /><li/> <br /><i>Содержание </i> <br /><li/> <br /><i>Введение </i> <br /><li/> <br /><i>Основная часть (решения задач)</i><br /><li/> <br /><i>Заключение</i><br /><li/> <br /><i>Список использованных литератур.</i><br /></ul> <br /><br />Материалы для изучения:<br /><table width="633" cellpadding="7" cellspacing="0"> <col width="240"> <col width="363"> <tr> <td width="240" height="5" bgcolor="#d9d9d9"> <br /><b><span id='Основная_литература__Дополнительная_литература'>Основная литература</span></b><br /></td> <td width="363" bgcolor="#d9d9d9"> <br /><b>Дополнительная литература</b><br /></td> </tr> <tr> <td width="240" height="6"> <br /><span></h2>[1] </span><span>Роббинс</span><span> </span><span>Дж</span><span>. HTML5, CSS3 </span><span>и</span><span> JavaScript. </span><span>Исчерпывающее руководство / Дженнифер Роббинс; [пер. с англ. </span><span>М. А. Райтман]. — 4-е издание. — М. : Эксмо, 2014. — 528 с.</span><br /></td> <td width="363"> <br /></h2>[1] <span>Руководство по </span><span>HTML</span><span>5 и </span><span>CSS</span><span>3 / </span>https://metanit.com/web/html5/ <span>(дата обращения 01.09.2022)</span><br /></td> </tr> <tr> <td width="240" height="6"> <br /><span></h2>[2] Бен Фрейн </span><span>HTML</span><span>5 и </span><span>CSS</span><span>3. Разработка сайтов для любых браузеров и устройств. — СПб.: Питер, 2014. — 304 с.: ил. </span><span>ISBN 978-5-496-00185-4</span><br /></td> <td width="363"> <br /><span></h2></span><span>[2] Руководство по </span><span>bootstrap</span><span> / </span>https://www.w3schools.com/bootstrap/bootstrap_ver.asp <span> /</span><span> (дата обращения 01.09.2022)</span><br /></td> </tr> <tr> <td width="240" height="6"> <br /><span></h2>[3] Robin Nixon Learning PHP, MySQL & JavaScript</span><br /><br /><span>With jQuery, CSS & HTML5, 5</span><sup><span>th</span></sup><span> edition, 2018</span><br /></td> <td width="363"> <br /><span></h2></span><span>[3] Руководство по </span><span>JavaScript</span><span> / </span><span>https</span><span>://</span><span>metanit</span><span>.</span><span>com</span><span>/</span><span>web</span><span>/</span><span>javascript</span><span>/</span><span> (дата обращения 01.09.2022)</span><br /></td> </tr> <tr> <td width="240" height="6"> <br /><span></h2>[4] Флэнаган Д. </span><span>JavaScript</span><span>. Подробное руководство, 6е издание. – Пер. с англ. – СПб: Символ Плюс, 2012. – 1080 с., ил. </span><span>ISBN 9785932862155</span><br /></td> <td width="363"> <br /><br /><br /></td> </tr> <tr> <td width="240" height="6"> <br /><span></h2>[5] John Dean WEB PROGRAMMING with HTML5, CSS, and JavaScript 2019</span><br /></td> <td width="363"> <br /><br /><br /></td> </tr> <tr> <td width="240" height="5"> <br /><span></h2>[6] Робсон Э., Фримен Э. Изучаем HTML, XHTML и CSS. 2-е изд. — СПб.: Питер, 2014. — 720 с.: ил. — (Серия «Head First O’Reilly»).</span><br /><br /><span> ISBN 978-5-496-00653-8</span><br /><br /></td> <td width="363"> <br /><br /><br /></td> </tr> </table> <br /><br /><br />Приложение А. Шаблон отчета<br /><b><span id='СӘТБАЕВ_УНИВЕРСИТЕТІ'>СӘТБАЕВ УНИВЕРСИТЕТІ</span></b><br /><br /><br /><center> <table width="180" cellpadding="7" cellspacing="0"> <col width="166"> <tr> <td width="166" height="96" valign="top"> <br /><img src="706750_html_efbdf9076e002d3b.png" name="ð ð¸ññð½ð¾ðº 3" align="bottom" width="58" height="88" border="0"/> <br /></td> </tr> </table> </center> <br /><br /><br />Институт автоматики и информационных технологий <br /><br />Кафедра Программная инженерия <br /><br /><b><span id='Лабораторная_работа_№___.'>Лабораторная работа №___. </span></b> <br />На тему____________________________________________________________________<br /><br /><table width="100%" cellpadding="7" cellspacing="0"> <col width="14*"> <col width="137*"> <col width="56*"> <col width="49*"> <tr valign="top"> <td width="5%"> <br />№<br /></td> <td width="53%"> <br /><b><span id='Качество_выполнения_работ__Диапазон_оценки__Получено_%/балл'>Качество выполнения работ</span></b><br /></td> <td width="22%"> <br /><b>Диапазон оценки</b><br /></td> <td width="19%"> <br /><b>Получено %/балл</b><br /></td> </tr> <tr valign="top"> <td width="5%"> <br />1<br /></td> <td width="53%"> <br />Не выполнено<br /></td> <td width="22%"> <br />0%<br /></td> <td width="19%"> <br /><br /><br /></td> </tr> <tr valign="top"> <td width="5%"> <br />2<br /></td> <td width="53%"> <br />Выполнено <br /></td> <td width="22%"> <br />0-50%<br /></td> <td width="19%"> <br /><br /><br /></td> </tr> <tr valign="top"> <td width="5%"> <br />3<br /></td> <td width="53%"> <br />Самостоятельная <a href="/razrabotka-uroka-v-8-klasse-po-teme-elektricheskoe-soprotivlen/index.html" title="Разработка урока в 8 классе по теме: «Электрическое сопротивление»">систематизация материала</a><br /></td> <td width="22%"> <br />0-10%<br /></td> <td width="19%"> <br /><br /><br /></td> </tr> <tr valign="top"> <td width="5%"> <br />4<br /></td> <td width="53%"> <br />Выполнение требуемого объема и в указанный срок<br /></td> <td width="22%"> <br />0-5%<br /></td> <td width="19%"> <br /><br /><br /></td> </tr> <tr valign="top"> <td width="5%"> <br />5<br /></td> <td width="53%"> <br />Использование дополнительной научной литературы<br /></td> <td width="22%"> <br />0-5%<br /></td> <td width="19%"> <br /><br /><br /></td> </tr> <tr valign="top"> <td width="5%"> <br />6<br /></td> <td width="53%"> <br />Уникальность выполненного задания<br /></td> <td width="22%"> <br />0-10%<br /></td> <td width="19%"> <br /><br /><br /></td> </tr> <tr valign="top"> <td width="5%"> <br />7<br /></td> <td width="53%"> <br />Защита работы<br /></td> <td width="22%"> <br />0-20%<br /></td> <td width="19%"> <br /><br /><br /></td> </tr> <tr valign="top"> <td width="5%"> <br /><br /><br /></td> <td width="53%"> <br />Итого<br /></td> <td width="22%"> <br />0-100%<br /></td> <td width="19%"> <br />100<br /></td> </tr> </table> <br /><br /><br />Ф.И.О. обучающегося <br /><br />_________________________<br /><br />Шифр и наименование ОП <br /><br />_________________________<br /><br />Ф.И.О. преподавателя <br /><br />Мукажанов Н. К.<br />Алматы 2022<br /><b>Содержание</b><br />1. <span id='Введение_Основная_часть_решения_задач_Заключение_Список_использованных_литератур'>Введение</span> <br /><br />2. Основная часть (решения задач)<br /><br />2.1 <br /><br />2.2 <br /><br />3. Заключение<br /><br />4. Список использованных литератур.<br /><br /><b>Введение</b><br /><br /><b>Основная часть решения задач</b><br /><br /><b>Заключение</b><br /><br /><b>Список использованных литератур</b>
|
|
Скачать 40.98 Kb.