Раздел 4. Сетевые технологии обработки информации и автоматизированные информационные системы (АИС)
Тема 4.2. Создание Web-страниц.
Практическая работа Создание текстовой Web-страницы.
Учебная цель: СозданиеWeb-страницы с использованием языка разметки текста HTML в простейшем текстовом редакторе Блокнот.
Формирование общих компетенций (ОК): ОК 2, ОК 4, ОК 5, ОК 6.
Задачи:знакомство со структурой Web-документа и языком разметки гипертекста HTML,развитие творческих способностей к самовыражению, посредством создания сайтов.
Время 2 часа
Используемое программное обеспечение: Internet Explorer (или другой установленный браузер).
Содержание работы: изучите теоретический материал, выполните задания.
Теоретический материал:
Теги– определенные последовательности символов, заключенные между знаками < и >
<- символ начало тега,> - символ конца тега.
Все, что заключено между тегами <html> и </html> - является html-документом.
Html –документ состоит из двух частей.
Первая – заголовок. Она находится между тегами<head> и </head>. В нем содержится информация о документе, которая не выводится на экран. Название странички располагается между тегами<title> и </title>.
Вторая часть – тело, которое выводится на экран. Оно заключается между тегами<body> и </body>.
Теги бывают парные и непарные. Парные теги бывают открывающие и закрывающие.
/ - символ закрывающего тега. Область парного тега начинается с того места, где стоит открывающий тег, а кончается там, где встречается закрывающий. Теги можно печатать прописными и заглавными буквами
Порядок работы:
1. Открыть текстовый редактор Блокнотввести код, содержащий основные теги для определения структуры HTML-документа:
1ДОКУМЕНТ:
<HTML>
<HEAD>
<TITLE>Компьютер</TITLE>
</HEAD>
<BODY>
Все о компьютерах
</BODY>
</HTML>
Сохраните как 1.HTML
2 ДОКУМЕНТ: Добавим заголовок и текст
<html>
<head>
<title>Компьютер</title>
</head>
<body>
<H1> Стих о компьютере </H1>
Отгадайте, ребятишки;
Сей предмет похож на книжку.
Точно так же он легко,
Быстро открывается,
Но листков внутри него
И не наблюдается...
Вся на свете ребятня
Этой книжке рада,
Но сидеть за ней полдня
Лучше бы не надо...
Пусть она немало знает,
Развивает ловкость рук,
Но при этом утомляет...
Книжка эта ноутбук
</body>
</html>
Сохраните как 2.HTML
3 ДОКУМЕНТ: Сделаем перевод строки <br>
<html>
<head>
<title>Компьютер</title>
</head>
<body>
<H1> Стих о компьютере </H1>
Отгадайте, ребятишки; <BR>
Сей предмет похож на книжку. <BR>
Точно так же он легко, <BR>
Быстро открывается, <BR>
Но листков внутри него<BR>
И не наблюдается... <BR>
Вся на свете ребятня<BR>
Этой книжке рада, <BR>
Но сидеть за ней полдня<BR>
Лучше бы не надо... <BR>
Пусть она немало знает, <BR>
Развивает ловкость рук, <BR>
Но при этом утомляет... <BR>
Книжка эта ноутбук<BR>
</body>
</html>
Сохраните как 3.HTML
4 ДОКУМЕНТ: Добавим Абзац <P>
<html>
<head>
<title>Компьютер</title>
</head>
<body>
<H1> Стих о компьютере </H1>
Отгадайте, ребятишки; <BR>
Сей предмет похож на книжку. <BR>
Точно так же он легко, <BR>
Быстро открывается, <BR><P>
Но листков внутри него<BR>
И не наблюдается... <BR>
Вся на свете ребятня<BR>
Этой книжке рада, <BR><P>
Но сидеть за ней полдня<BR>
Лучше бы не надо... <BR>
Пусть она немало знает, <BR>
Развивает ловкость рук, <BR>
Но при этом утомляет... <BR>
Книжка эта ноутбук<BR>
</body>
</html>
Сохраните как 4.HTML
5 ДОКУМЕНТ: Выравнивание текста
<html>
<head>
<title>Компьютер</title>
</head>
<body>
<H1> Стих о компьютере </H1>
<palign=left >
Отгадайте, ребятишки; <BR>
Сей предмет похож на книжку. <BR>
Точно так же он легко, <BR>
Быстро открывается, <BR> <P>
<palign=center >
Но листков внутри него<BR>
И не наблюдается... <BR>
Вся на свете ребятня<BR>
Этой книжке рада, <BR><P>
<palign=right >
Но сидеть за ней полдня<BR>
Лучше бы не надо... <BR>
Пусть она немало знает, <BR>
Развивает ловкость рук, <BR>
Но при этом утомляет... <BR>
Книжка эта ноутбук<BR>
</body>
</html>
Сохраните как 5.HTML
6 ДОКУМЕНТ: Заливка текста цветом
<html>
<head>
<title>Компьютер</title>
</head>
<body>
<font color="red"> <H1> Стихокомпьютере </H1>
<palign=left >
Отгадайте, ребятишки; <BR>
Сей предмет похож на книжку. <BR>
Точно так же он легко, <BR>
Быстро открывается, <BR> <P>
<palign=center >
Но листков внутри него<BR>
И не наблюдается... <BR>
Вся на свете ребятня<BR>
Этой книжке рада, <BR><P>
<palign=right >
Но сидеть за ней полдня<BR>
Лучше бы не надо... <BR>
Пусть она немало знает, <BR>
Развивает ловкость рук, <BR>
Но при этом утомляет... <BR>
Книжка эта ноутбук<BR>
</body>
</html>
Сохраните как 6.HTML
7 ДОКУМЕНТ: Способы заливки текста цветом
<html>
<head>
<title>Компьютер</title>
</head>
<body>
<font color="red"> <H1>Стихокомпьютере </H1></font>
<p align=left >
<fontcolor="blue"> Отгадайте,ребятишки; <BR>
Сейпредметпохожнакнижку.<BR>
Точно так же он легко, <BR>
Быстро открывается, <BR> <P></font>
<p align=center >
<fontcolor="008000">
Но листков внутри него<BR>
И не наблюдается... <BR>
Вся на свете ребятня<BR>
Этой книжке рада, <BR><P></font>
<palign=right >
<fontcolor="fuchsia"> Но сидеть за ней полдня<BR>
Лучше бы не надо... <BR>
Пусть она немало знает, <BR>
Развивает ловкость рук, <BR>
Но при этом утомляет... <BR>
Книжка эта ноутбук<BR></font>
</body>
</html>
Сохраните как 7.HTML
ЗАДАНИЕ №8 Создайте аналогично свою Web-страницу.
Критерии оценки:
Оценка «5» - выполнено 8 заданий, ошибки незначительные либо отсутствуют.
Оценка «4» - выполнено 7 заданий и ½ Задания №8, ошибки незначительные либо отсутствуют.
Оценка «3» - выполнено 6-7 заданий, ошибки незначительные либо отсутствуют.
Оценка «2» - выполнено менее 6 заданий.
Информационное обеспечение.
Основные источники:
Колмыкова Е.А., Кумскова И.А. Информатика: учеб. Пособие для студ. сред. проф. образования М., Издательский центр «Академия», 2017
Фуфаев Э.В. Пакеты прикладных программ: учеб. пособие для студ. учреждений сред. проф. образования / Э.В. Фуфаев, Л.И. Фуфаева. – 7 –е изд., испр. – М : Издательский центр «Академия», 2017.
Дополнительные источники:
Михеева Е.В. Информационные технологии в профессиональной деятельности (учебное пособие для студ. сред. проф. образования) М., Издательский центр «Академия», 2017
Михеева Е.В. , Титова О.И. Информатика (учебник для студ. сред. проф. образования М., Издательский центр «Академия», 2017
Астафьева Н.Е., Гаврилова С.А., Цветкова М.С.Информатика и ИКТ: Практикум для профессий и специальностей технического и социально-экономического профилей: учеб. пособие для студ. учреждений сред. проф. образования / под ред. М.С.Цветковой. — М., 2017
Малясова С.В., Демьяненко С.В. Информатика и ИКТ: Пособие для подготовки к ЕГЭ : учеб. пособие для студ. учреждений сред. проф. образования / под ред. М.С.Цветковой. — М., 2017.
Интернет-ресурсы
Электронно-библиотечная система BOOK.RU [Электронный ресурс] — Режим доступа: https://www.book.ru/
Электронно-библиотечная система ACADEMIA [Электронный ресурс] — Режим доступа: https://www.academia-moscow.ru
Электронно-библиотечная система ЮРАЙТ [Электронный ресурс] — Режим доступа: https://urait.ru/
Каталог видеоуроков TeachVideo.ru [Электронный ресурс] — Режим доступа: http:// www.teachvideo.ru.
Информатика и информационно-коммуникационные технологии [Электронный ресурс] // Федеральный центр информационно-образовательных ресурсов. – Режим доступа: http://fcior.edu.ru/catalog/srednee_obshee?discipline_oo=6&class=&learning_character=&accessibility_restriction=&page=2
Федеральные образовательные ресурсы для общего образования [Электронный ресурс] //Российское образование: федеральный портал. – Режим доступа: http://www.edu.ru/db/portal/sites/res_page.htm
