amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70....

35
Занятие № 69-70 Задание для дистанционного обучения Предмет: Информатика Группа: Е-3 Дата06.05.2020 Тема: Технология WWW. Поиск информации в Интернете. План лекции: 1. Проблема поиска 2. Поисковые системы 3. Поиск по рубрикатору поисковой системы 4. Поиск по ключевым словам 5. Правила формирования запросов в поисковой системе Яндекс 6. Вопросы 1.Проблема поиска Говорят, что в Интернете есть все. На самом деле – это не так. Материалы для размещения в сети готовят живые люди, и потому там можно найти лишь то, что они сочли нужным опубликовать. Впрочем, река питается ручьями, и, благодаря их творчеству сегодня в Интернете уже образовалось около двух миллиардов Web-страниц. В результате каталогизация имеющихся в сети ресурсов стала серьезной проблемой. Несмотря на то, что проблемой занимаются тысячи организаций, она не только не приближается к разрешению, но и становится острее. Процент каталогизированных ресурсов неуклонно падает. В последние годы это падение стало катастрофическим. Так, если в 1999 году процент каталогизированных ресурсов приближался к 40%, то всего лишь за один следующий год он опустился до 25 %. Вывод простой: пространство Web быстрее наполняется, чем систематизируется. К сожалению, у нас нет оснований предполагать, что в ближайшее время что-нибудь может измениться к лучшему. В итоге поиск информации в Интернет можно считать одной из самых трудных задач. 2. Поисковые системы Для поиска интересующей вас информации необходимо указать браузеру адрес Web-страницы, на которой она находится. Это самый быстрый и надежный вид поиска. Для быстрого доступа к ресурсу достаточно запустить браузер и набрать адрес страницы в строке адреса.

Transcript of amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70....

Page 1: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

Занятие № 69-70

Задание для дистанционного обученияПредмет: ИнформатикаГруппа: Е-3Дата06.05.2020Тема: Технология WWW. Поиск информации в Интернете.

План лекции:

1. Проблема поиска 2. Поисковые системы 3. Поиск по рубрикатору поисковой системы 4. Поиск по ключевым словам 5. Правила формирования запросов в поисковой системе Яндекс 6. Вопросы

1.Проблема поиска    Говорят, что в Интернете есть все. На самом деле – это не так. Материалы для

размещения в сети готовят живые люди, и потому там можно найти лишь то, что они сочли нужным опубликовать. Впрочем, река питается ручьями, и, благодаря их творчеству сегодня в Интернете уже образовалось около двух миллиардов Web-страниц. В результате каталогизация имеющихся в сети ресурсов стала серьезной проблемой. Несмотря на то, что проблемой занимаются тысячи организаций, она не только не приближается к разрешению, но и становится острее. Процент каталогизированных ресурсов неуклонно падает. В последние годы это падение стало катастрофическим. Так, если в 1999 году процент каталогизированных ресурсов приближался к 40%, то всего лишь за один следующий год он опустился до 25 %.

    Вывод простой: пространство Web быстрее наполняется, чем систематизируется.

     К сожалению, у нас нет оснований предполагать, что в ближайшее время что-нибудь может измениться к лучшему. В итоге поиск информации в Интернет можно считать одной из самых трудных задач.

2. Поисковые системы    Для поиска интересующей вас информации необходимо указать браузеру адрес

Web-страницы, на которой она находится. Это самый быстрый и надежный вид поиска. Для быстрого доступа к ресурсу достаточно запустить браузер и набрать адрес страницы в строке адреса.

    Адреса Web-страниц приводятся в специальных справочниках, печатных изданиях, звучат в эфире популярных радиостанций и с экранов телевизора.

    Если вы не знаете адреса, то для поиска информации в сети Интернет существуют поисковые системы, которые содержат информацию о ресурсах Интернета.

    Каждая поисковая система – это большая база ключевых слов, связанных с Web-страницами, на которых они встретились. Для поиска адреса сервера с интересующей вас информацией надо ввести в поле поисковой системы ключевое слово, несколько слов или фразу. Тем самым вы посылаете поисковой системе запрос. Результаты поиска выдаются в виде списка адресов Web-страниц, на которых встретились эти слова.

    Как правило, поисковые системы состоят из трех частей: робота, индекса и программы обработки запроса.

Page 2: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

Робот (Spider, Robot или Bot) - это программа, которая посещает веб-страницы и считывает (полностью или частично) их содержимое.

    Роботы поисковых систем различаются индивидуальной схемой анализа содержимого веб-страницы.

Индекс - это хранилище данных, в котором сосредоточены копии всех посещенных роботами страниц.

    Индексы в каждой поисковой системе различаются по объему и способу организации хранимой информации. Базы данных ведущих поисковых машин хранят сведения о десятках миллионов документов, а объемы их индекса составляют сотни гигабайт. Индексы периодически обновляются и дополняются, поэтому результаты работы одной поисковой машины с одним и тем же запросом могут различаться, если поиск производился в разное время.

Программа обработки запроса - это программа, которая в соответствии с запросом пользователя «просматривает» индекс на предмет наличия нужной информации и возвращает ссылки на найденные документы.

    Множество ссылок на выходе системы распределяется программой в порядке убывания от наибольшей степени соответствия ссылки запросу к наименьшей.

    В России наиболее распространенными поисковыми системами являются: Рамблер (www.rambler.ru); Яндекс (www.yandex.ru); Мэйл (www.mail.ru).      За рубежом поисковых систем гораздо больше. Самыми популярными

являются: Alta Vista (www.altavista.com); Fast Search (www.alltheweb.com); Northern Light (www.northernlight.com).      Яндекс является пожалуй наилучшей поисковой системой в российском

Интернете. Эта база данных содержит около 200 000 серверов и до 30 миллионов документов, которые система просматривает в течение нескольких секунд. На примере этой системы покажем как осуществляется поиск информации.

    Поиск информации задается введением ключевого слова в специальную рамку и нажатием кнопки «Найти», справа от рамки.

    Результаты поиска появляются в течение нескольких секунд, причем ранжированные по значимости – наиболее важные документы размещаются в начале списка. При этом ранг найденного документа определяется тем, в каком месте документа находится ключевое слово (в заглавии документа важнее, чем в любом другом месте) и числом упоминаний ключевого слова (чем больше упоминаний, тем ранг выше).

Page 3: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

    Таким образом, сайты, расположенные на первых местах в списке, являются ведущими не с содержательной точки зрения, а практически, по отношению к частоте упоминания ключевого слова. В связи с этим, не следует ограничиваться просмотром первого десятка предложенных поисковой системой сайтов.

    Содержательную часть сайта можно косвенно оценить по краткому его описанию, размещаемому Поисковой системой под адресом Сайта. Некоторые недобросовестные авторы сайтов, для того, чтобы повысить вероятность появления своей Web-страницы на первых местах Поисковой системы, умышленно включают в документ бессмысленные повторы ключевого слова. Но как только поисковая система обнаруживает такой «замусоренный» документ, она автоматически исключает его из своей базы данных.

    Даже ранжированный список документов, предлагаемый поисковой системой в ответ на ключевую фразу или слово, может оказаться практически необозримым. В связи с этим в Яндекс (как и других мощных Поисковых Машинах) предоставлена возможность в рамках первого списка, выбрать документы, которые точнее отражают цель поиска, то есть уточнить или улучшить результаты поиска. Например, на ключевое слово список из 34 899 Веб-страниц. После ввода в команду «Искать в найденном» уточняющего ключевого слова список сокращается до 750 страниц, а после ввода в эту команду еще одного уточняющего слова этот список сокращается до 130 Веб-страниц.

3.Поиск по рубрикатору поисковой системы    Поисковые каталоги представляют собой систематизированную коллекцию

(подборку) ссылок на другие ресурсы Интернета. Ссылки организованы в виде тематического рубрикатора, npeдставляющего собой иерархическую структуру, перемещаясь по которой, можно найти нужную информацию.

    Приведем в качестве примера структуру поискового интернет-каталога Яндекс.

Page 4: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

    Это каталог общего назначения, так как в нем представлены ссылки на ресурсы Интернета практически по всем возможным направлениям. В этом каталоге выделены следующие темы:

Бизнес и экономика; Общество и политика; Наука и образование; Компьютеры и связь; Справочники и ссылки; Дом и семья; Развлечения и отдых; Культура и искусство.    Каждая тема включает множество подразделов, а они, в свою очередь,

содержат рубрики и т. д.    Предположим, вы готовите мероприятие ко Дню победы и хотите найти в

Интернете слова известной военной песни Булата Окуджавы «Вы слышите, грохочут сапоги». Поиск можно организовать следующим образом:

    Яндекс > Каталог > Культура и искусство > Музыка > Авторская песня    Такой способ поиска является достаточно быстрым и эффективным. В конце

вам предлагается всего несколько ссылок, среди которых есть ссылки на сайты с песнями известных бардов. Остается только найти на сайте архив с текстами песен Б. Окуджавы и выбрать в нем нужный текст.

    Другой пример. Предположим, вы собираетесь приобрести мобильный телефон и хотите сравнить характеристики аппаратов разных фирм. Поиск мог бы вестись по следующим рубрикам каталога:.

    Яндекс > Каталог > Компьютеры и связь > Мобильная связь > Мобильные телефоны

    Получив ограниченное количество ссылок, можно достаточно оперативно их просмотреть и выбрать телефон, исследовав характеристики по фирмам и модификациям аппаратов.

4. Поиск по ключевым словам    Большинство поисковых машин имеют возможность поиска по ключевым

словам. Это один из самых распространенных видов поиска. Для поиска по ключевым словам необходимо ввести в специальном окне

слово или несколько слов, которые следует искать, и щелкнуть на кнопке Найти.

Page 5: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

    Поисковая система найдет в своей базе и покажет документы, содержащие эти слова. Таких документов может оказаться множество, но много в данном случае не обязательно означает хорошо.

    Проведем несколько экспериментов с любой из поисковых систем. Предположим, что мы решили завести аквариум и нас интересует любая информация по данной теме. На первый взгляд самое простое — это поиск по слову «аквариум». Проверим это, например, в поисковой системе Яндекс. Результатом поиска будет огромное количество страниц - огромное количество ссылок. Причем, если посмотреть внимательнее, среди них окажутся сайты, упоминающие группу Б. Гребенщикова «Аквариум», торговые центры и неформальные объединения с таким же названием, и многое другое, не имеющее отношения к аквариумным рыбкам.

    Нетрудно догадаться, что такой поиск не может удовлетворить даже непритязательного пользователя. Слишком много времени придется потратить на то, чтобы отобрать среди всех предложенных документов те, что касаются нужного нам предмета, и уж тем более на то, чтобы ознакомиться с их содержимым.

    Можно сразу сделать вывод, что вести поиск по одному слову, как правило, нецелесообразно, ведь по одному слову очень сложно определить тему, которой посвящен документ, веб-страница или сайт. Исключение составляют редкие слова и термины, которые практически никогда не используются вне своей тематической области.

    Имея определенный набор наиболее употребительных терминов в нужной области, можно использовать расширенный поиск. На рис. показано окно расширенного поиска в поисковой системе Яндекс. В этом режиме возможности языка запросов реализованы в виде формы. Подобный сервис, включающий словарные фильтры, предлагается почти всеми поисковыми системами.

Page 6: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

    Попробуем уточнить условия поиска и введем словосочетание «аквариумные рыбки». Количество ссылок уменьшится более чем в 20 раз. Этот результат нас устраивает больше, но все равно среди предложенных ссылок могут встретиться, например, русские сувенирные наборы спичечных этикеток с изображениями рыбок, и коллекции заставок для Рабочего стола компьютера, и каталоги аквариумных рыбок с фотографиями, и магазины аквариумных аксессуаров. Очевидно, что следует продолжить движение в направлении уточнения условий поиска.

    Для того чтобы сделать поиск более продуктивным, во всех поисковых системах существует специальный язык формирования запросов со своим синтаксисом. Эти языки во многом похожи. Изучить их все достаточно сложно, но любая поисковая машина имеет справочную систему, которая позволит вам освоить нужный язык.

5.Правила формирования запросов в поисковой системе Яндекс    Приведем несколько простых правил формирования запроса в поисковой

системе Яндекс.Ключевые слова в запросе следует писать строчными (маленькими)

буквами.    Это обеспечит поиск всех ключевых слов, а не только тех, которые начинаются

с прописной буквы. При поиске учитываются все формы слова по правилам русского языка,

независимо от формы слова в запросе.Например, если в запросе было указано слово «знаю», то условию поиска будут

удовлетворять и слова «знаем», «знаете» и т. п. Для поиска устойчивого словосочетания следует заключить слова в

кавычки.Например, «фарфоровая посуда». Для поиска по точной словоформе перед словом надо поставить

восклицательный знак.Например, для поиска слова «сентябрь» в родительном падеже следует написать

«!сентября». Для поиска внутри одного предложения слова в запросе разделяют пробелом

или знаком &Например, «приключенческий роман» или «приключенческий&роман».

Несколько набранных в запросе слов, разделенных пробелами, означают, что все они должны входить в одно предложение искомого документа.

Если вы хотите, чтобы были отобраны только те документы, в которых встретилось каждое слово, указанное в запросе, поставьте перед каждым из них знак плюс «+». Если вы, наоборот, хотите исключить какие-либо слова из результата поиска, поставьте перед этим словом минус «-». Знаки « + » и «-» надо писать через пробел от предыдущего и слитно со следующим словом.

Например, по запросу «Волга -автомобиль» будут найдены документы, в которых есть слово «Волга» и нет слова «автомобиль».

При поиске синонимов или близких по значению слов между словами можно поставить вертикальную черту «|».

Например, по запросу «ребенок | малыш | младенец» будут найдены документы с любым из этих слов.

Вместо одного слова в запросе можно подставить целое выражение. Для этого его надо взять в скобки

Например, «(ребенок | малыш | дети | младенец) +(уход | воспитание)». Знак «~» (тильда) позволяет найти документы с предложением, содержащим

первое слово, но не содержащим второе.

Page 7: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

Например, по запросу «книги ~ магазин» будут найдены все документы, содержащие слово «книги», рядом с которым (в пределах предложения) нет слова «магазин».

Если оператор повторяется один раз (например, & или ~), поиск производится в пределах предложения. Двойной оператор (&&,~~ ) задает поиск в пределах документа.

Например, по запросу «рак ~~ астрология» будут найдены документы со словом «рак», не относящиеся к астрологии.

    Вернемся к примеру с аквариумными рыбками. После про¬чтения нескольких предлагаемых поисковой системой документов становится понятно, что поиск информации в Интернете следует начинать не с выбора аквариумных рыбок. Аквариум - сложная биологическая система, создание и поддержание которой требует специальных знаний, времени и серьезных капиталовложений.

    На основании полученной информации человек, производящий поиск в Интернете, может кардинально изменить стратегию дальнейшего поиска, приняв решение изучить специальную литературу, относящуюся к исследуемому вопросу.

    Для поиска литературы или полнотекстовых документов возможен следующий запрос:

    «+(аквариум | аквариумист | аквариумистика) +начинающим +(советы | литература) +(статья | тезис | полнотекстовый) -(цена | магазин | доставка | каталог)».

    После обработки запроса поисковой машиной результат оказался весьма успешным. Уже первые ссылки приводят к искомым документам.

    Теперь можно подытожить результаты поиска, сделать определенные выводы и принять решение о возможных действиях:

Прекратить дальнейший поиск, так как в силу различных причин содержание аквариума вам не под силу.

Прочитать предлагаемые статьи и приступить к устройству аквариума. Поискать материалы о хомячках или волнистых попугайчиках.назад

6. Вопросы.1. Какой вид поиска является самым быстрым и надежным? 2. Где пользователь может найти адреса Web-страниц? 3. Каково основное назначение поисковой системы? 4. Из каких частей состоит поисковая система? 5. Какие поисковые системы вы знаете? 6. Какова технология поиска по рубрикатору поисковой системы? 7. Какова технология поиска по ключевым словам? 8. Когда в критерии поиска надо задавать + или -? 9. Какие критерии поиска в Яндексе заданы следующей фразой:  (няня|воспитатель|гувернантка)++(уход|воспитание|присмотр)?

10. Что означает удвоение знака (~~ или ++) при формировании сложного запроса?

Вам необходимо внимательно прочитать лекцию сделать конспект и письменно ответить на вопросы, ответ обоснуйте.

Критерии оценивания задания: «5»- все ответы верны, обоснованы; «4»- ответы верны, но не обоснованы; «3» - есть всего два правильных ответа с обоснованием; «2»- нет ответов на данное задание

Page 8: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

Срок выполнения заданий до 08.05.2020 Студенты, выполнившие задания, оправляют свои работы на электронный адрес amak ek [email protected] .В теме «письма» указывают Фамилию, Имя, Отчество, номер группы, дисциплину, по которой выполнили задание. (Например, Иванов Иван Иванович Е-3, информатика). Или фото выполненных работ на WhatsApp по номеру +79243455700.

Занятие № 71-72

Задание для дистанционного обучения

Предмет: Информатика

Группа: Е-3

Дата 06.05.2020

Тема: Практическая работа № 17.Поиск информации в сети Интернете.

Цель работы: изучить основные правила поиска в сети Интернет, синтаксис поиска в сети; научится на практике использовать полученные знания.

Ход выполнения работы

1. Войти в свой аккаунт Google (если аккуанта нет, то создаем)Шаг 1. Заходим на страницу МойаккуантGoogle.

.Шаг 2. Зарегистрироваться в Google.

2. На Google диске создать Новый документ, дать ему название “Поиск информации”

Page 9: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

3. В настройках доступаРазрешить Всем доступ к Вашему документуПрактическая работа находится по адресу

Краткие теоретические сведения

Точность поиска – выражает отношение совокупности релевантных откликов, к количеству всех выданных документов.

Правила поиска информации в сети Интернет?

1. Учитывать особенности естественного языка.2. Не допускать орфографических ошибок.3. Избегать поиска по одному слову, использовать необходимый и достаточный набор

слов.4. Не писать большими буквами.5. Исключать из поиска не нужные слова.Понятие языка запросов.

Синтаксис

языка

Значение Пример

!Запрет перебора всех

словоформ

! педагогическая система (из поиска будут

исключены слова педагогические системы)

+

Обязательное присутствие

слов в найденных

документах

Педсовет по+пятница (должны быть выбраны страницы, где встречаются слово не только

педсовет) но обязательное условие наличие

слова «пятница»

&Обязательное вхождение

слов в одно предложениеПедагогическая & система

Page 10: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

«»Поиск устойчивых

словосочетаний

«педагогическая система» (учитывается

строгая последовательность слов, слово

«система педагогическая» будет исключеная)

Задание №1.

Определить провайдера, с помощью которого Ваш компьютер подключен к Интернету и найти в каком году он появился на рынке.

Задание №2.

Указание адреса страницы.

а) Запустить обозреватель.

б) Ввести в адресную строку

http://top140.com/fantasy/library/tolkien.htm

в) По полученным материалам выяснить, где и когда родилсяДж.Р.Р.Толкиен (автор книги «Властелин кольца»).

г) Скопировать полученные данные и вставить в файл текстового документа.

Задание №3.

а) Назовите автора строк "Кто владеет информацией - тот владеет миром"

Ответ ввести в формате: фамилия. При вводе ответа не вводите лишних пробелов перед словом и после него. Фамилию вводить на русском языке!

б) Скопировать и вставить в документ ссылку с адресом сайта, где взят ответ

Задание №4

Используя любой поисковый сервер, найдите ответы на следующие вопросы:

1. Существует три типа речных окатанных камней: гравийные (диаметр от 1 до 10 мм), галичниковые (диаметр — от 10 до 100 мм). Как называется третий тип камней?

2. Говорят, что мало - кто из современников Эйнштейна понимали его теорию. Макс Планк, утешая Эйнштейна, говорил: "Новые теории никогда не принимаются. Они или опровергаются, или их противники...". Закончите мысль.

3. Считалось, что носить большие и красивые манжеты на рубашках у средневековых студентов значило прослыть трусом. Почему?

Оформите информацию в текстовом редакторе Word, сделав ссылки на сайты, содержащие ответы на вопросы.

Page 11: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

4. Найдите в Интернет два закона РФ, регулирующие деятельность в области информационных технологий.

Задание №5

С помощью поисковой системы Google вы можете найти в сети имеющееся у вас изображение и определить по его описанию то, где оно сделано, кто его автор, кто на нем изображен и т.д

.

а) Для того, чтобы воспользоваться поиском по изображениям, зайдите на сайт поисковой системыgoogle.com и перейдите в раздел Картинки, который находится в правой верхней части страницы.

б) В открывшемся окне щелкните по значку фотоаппарата в правой части поисковой строки. Далее укажите ссылку на изображение, которое вы ищите или загрузите файл изображения со своего компьютера.

Page 12: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

в) Нажмите на кнопку Поиск по картинке и поисковая система предложит вам варианты найденных изображений.перейдите по одной из предложенных ссылок для того, чтобы ознакомиться с результатами поиска.

г) Для того, чтобы сохранить картинку с веб-страницы на своем компьютере для дальнейшего поиска информации о ней, щелкните на картинке правой кнопкой мыши и выберите пункт меню "Сохранить картинку как..."

д) Картинку из текста скопировать в Папку своей группы.

е) Найдите с помощью поиска Google ответ на вопрос:

Как называется город, на привокзальной площади которого разместился памятник и автор?

Срок выполнения заданий до 08.05.2020 Студенты, выполнившие задания, оправляют свои работы на электронный адрес amak ek [email protected] .В теме «письма» указывают Фамилию, Имя, Отчество, номер группы, дисциплину, по которой выполнили задание. (Например, Иванов Иван Иванович Е1, информатика). Или фото выполненных работ на WhatsApp по номеру +79243455700.

Занятие № 73-74

Задание для дистанционного обученияПредмет: ИнформатикаГруппа: Е-3Дата 07.05.2020Тема: Средства создания Web-сайта.

Просмотреть презентацию https://nsportal.ru/shkola/informatika-i-ikt/library/2015/10/13/prezentatsiya-na-temu-

instrumentalnye-sredstva-sozdaniyaи сделать конспект. Срок выполнения заданий до 08.05.2020 Студенты, выполнившие задания, оправляют свои работы на электронный адрес amak ek [email protected] .В теме «письма» указывают Фамилию, Имя, Отчество, номер группы, дисциплину, по которой выполнили задание. (Например, Иванов Иван Иванович Е-3, информатика). Или фото выполненных работ на WhatsApp по номеру

+79243455700.

Page 13: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

Занятие № 75-76

Задание для дистанционного обученияПредмет: ИнформатикаГруппа: Е-3Дата 08.05.2020Тема: Средства создания Web-сайта.

План лекции:

1. Введение2. Клиентские технологии3. Серверные технологии4. Сравнительный анализ сред создания Web-приложений

1.ВведениеВлияние глобальной компьютерной сети Internet на современный мир не имеет

исторических аналогов. Его сегодняшний день – это начало эпохи электронного проникновения во все сферы человеческой жизни, это нечто большее, чем просто маркетинговая кампания, это основа новой философии и новой деловой стратегии.

Вполне логично предположить, что и с точки зрения рекламы продукции или услуги Интернет – наиболее значимый ресурс. Большинство современных людей пользуются Интернетом, как наиболее доступным источником информации.

Web-технология полностью перевернула представления о работе с информацией, да и с компьютером вообще. Оказалось, что традиционные параметры развития вычислительной техники производительность, пропускная способность, емкость запоминающих устройств не учитывали главного "узкого места" системы интерфейса с человеком. Устаревший механизм взаимодействия человека с информационной системой сдерживал внедрение новых технологий и уменьшал выгоду от их применения. И только когда интерфейс между человеком и компьютером был упрощен до естественности восприятия обычным человеком, последовал беспрецедентный взрыв интереса к возможностям вычислительной техники.

Создание Web-сайтов является одной из важнейших технологий разработки ресурсов Internet. Хороший сайт, вбирая в себя всю полезную информацию, является лучшей визитной карточкой и коммерческой фирмы и образовательного учреждения, работая на них в любое время суток.

Проведя анализ нескольких сайтов обеспечивающих информационную поддержку предприятий малого бизнеса на предмет соответствия их поставленным целям, а так же корректности выбора средств разработки можно выделить следующие характерные недостатки:

не соответствие сайта психофизиологическим требованиям, которое приводит к повышенной утомляемости или отвлечению внимания;

увлечение анимацией, графическими изображениями и видео фрагментами, которые не несут смысловой нагрузки, автоматически влечет за собой уменьшение количества потенциальных посетителей web-сайта, так как повышает требования к пропускной способности Интернет-соединения и объем трафика;

избыточность или недостаток представленной информации; некорректный выбор средств разработки, который влечет за собой

необоснованное повышение стоимости готового продукта.Таким образом, определение функциональных возможностей средств и языков

для разработки сайта, предъявляемых к текстовой и графической информации

Page 14: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

представленной на экране монитора представляется актуальной задачей.К тому же сейчас, когда число онлайновых пользователей оценивается более чем

в 500 миллионов человек, приходится искать пути использования новых технологий, которые могли бы оказать содействие в привлечении и удержании внимания пользователей.

Предмет исследования – web-технологии.Объект – среды и языки разработки web-приложений.Цель работы – рассмотреть возможности практического использования языков и

средств для разработки web-приложений.Для достижения поставленной цели необходимо решить ряд задач:1. рассмотреть основные клиентские технологии;2. определить области применения языков программирования для разработки

web-приложений;3. проанализировать функциональные возможности сред по созданию web-

приложений.1. Клиентские технологииHTMLЯзык разметки гипертекста (HypertextMarkupLanguage), или, как его чаще

называют, HTML, — это компьютерный язык, лежащий в основе WorldWideWeb. Благодаря языку HTML любой текст можно разметить, преобразовав его в гипертекст с последующей публикацией в Web.

Язык HTML имеет собственный набор символов, с помощью которых Web-браузеры отображают страницу. Эти символы, называемые дескрипторами, включают в себя элементы, необходимые для создания гиперссылок [3, с. 20].

Одной из отличительных особенностей HTML-документов является то, что сам документ содержит только текст, а все остальные объекты встраиваются в документ в момент его отображения Браузером с помощью специальных тэгов и хранятся отдельно. При сохранении HTML-файла в месте размещения документа создается папка, в которую помещаются сопутствующие ему графические элементы оформления [10, с. 134].

JavaScriptЯзык программирования JavaScript разработан фирмой Netscape для создания

интерактивных HTML-документов. Это объектно-ориентированный язык разработки встраиваемых приложений, выполняющихся как на стороне клиента, так и на стороне сервера. Синтаксис языка очень похож на синтаксис Java – поэтому его называют – Java-подобным.

Основные области применения JavaScript делятся на следующие категории: динамическое создание документа с помощью сценария; оперативная проверка достоверности заполняемых пользователем полей

форм HTML до передачи их на сервер; создание динамических HTML-страниц совместно с каскадными таблицами

стилей и объектной моделью документа; взаимодействие с пользователем при решении "локальных" задач, решаемых

приложением JavaScript, встроенном в HTML-страницу [4, с. 57].VBScriptЯзык создания сценариев VBScript разработан фирмой Microsoft, является

подмножеством достаточно распространенного в среде программистов языка VisualBasic разработки прикладных программ Windows-приложений. Как и его родитель, язык VBScript достаточно прост и лёгок в изучении.

Преимуществом его применения для создания сценариев является возможность использования, с небольшими корректировками, ранее написанных процедур на языках VisualBasic и VisualBasicforApplication.

Функциональные возможности сценариев, написанных на VBScript, ничем не

Page 15: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

отличаются от возможностей сценариев JavaScript: динамические создание документа или его частей, перехват и обработка событий и так далее.

VBScript используется для написания сценариев клиента (в этом случае браузер должен иметь встроенный интерпретатор этого языка), а также для написания сценариев на сервере (в этом случае сервер должен поддерживать язык VBScript).

Для создания сценариев клиента используется набор объектов, аналогичный набору JavaScript. Объекты клиента и сервера отличаются друг от друга, но существует общая часть (ядро) объектов, используемых при разработке как сценариев клиент, так и сценариев сервера [11, с. 213].

Приложения MacromediaFlashТехнология Flash основана на использовании векторной графики в формате

ShockwaveFlash (SWF) разработанная компанией Macromedia®. Основным преимуществом Flash технологии является его межплатформенность, то есть этот формат может использоваться на любой аппаратно-программной платформе. И еще одна весомая особенность Flash технологии: созданные на его основе изображения могут быть не только анимированы, но еще и дополнены интерактивными элементами и звуковым сопровождением.

Особенностью технологии Flash является тот факт, что она вполне может заменить обыкновенную страницу, написанную на html. Но здесь открываются существенные преимущества технологии Flash перед языком HTML.

Интересны возможности языка ActionScript, а также интеграция его и самого конечного продукта с другими языками программирования и базами данных. Конечный продукт - это так называемый flash-ролик, которые представляет собой элемент active-x, который существует как самостоятельное приложение, и который, встраивается в html-документ по средствами включения его в тело документа как объекта active-x.Разумеется, для проигрывания такого ролика от браузера потребуется наличие установленного plug-in'а, но это не является проблемой, т.к. почти всё браузеры уже имеют предустановленный flash-plug-in, а если такового всё же в системе не имеется, то произойдёт автоматическая его загрузка с сервера производителя. Для достижения более сложной интерактивности Flash может взаимодействовать с JavaScript или VBScript.

Организация ссылок внутри flash-ролика может происходить как обычно, т.е. пряма ссылка на какой либо документ/cgi-шлюз, либо ссылка может приводить к загрузке новых роликов, которые могут содержать данные, и которые будут являть аналогом документов, загружаемых по щелчку на обыкновенную html-ссылку. Ссылка на другие ролики происходит внутри ролика, текст ссылки не покидает пределов ролика, его нельзя скопировать, либо просмотреть в строке состояния. Также перемещение по таким ссылками не будет вызывать перезагрузку главной страницу, в которую вставлен flash-ролик.

AjaxAjax расшифровывается как AsynchronousJavascriptAnd XML (Асинхронные

Javascript и XML) и технологией в строгом смысле слова не является. Если в стандартном web-приложении обработкой всей информации занимается сервер, тогда как браузер отвечает только за взаимодействие с пользователем, передачу запросов и вывод поступившего HTML, то в Ajax-приложении между пользователем и сервером появляется еще один посредник - движок Ajax. Он определяет, какие запросы можно обработать "на месте", а за какими необходимо обращаться на сервер.

Поведение сервера тоже изменилось. Если раньше на каждый запрос сервер выдавал новую страницу, то теперь он отсылает лишь те данные, которые нужны клиенту, а HTML из них прямо в браузере формирует движок Ajax.

Асинхронность проявляется в том, что далеко не каждый клик пользователя доходит до сервера, причем обратное тоже справедливо - далеко не каждая реакция сервера обусловлена запросом пользователя. Большую часть запросов формирует движок

Page 16: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

Ajax, причем его можно написать так, что он будет загружать информацию, предугадывая действия пользователя.

Где стоит использовать Ajax: Формы. Они очень медленны. Если асинхронно передавать данные,

страница не перезагружается. Навигация в виде "дерева". Голосования. Пользователю будет приятней оставить свой голос за

несколько секунд, чем за 30-40. Фильтры. Часто на сайтах делают сортировку по дате, по имени. Ajax это

будет значительно удобнее.2. Серверные технологии

PHPВ первую очередь PHP используется для создания скриптов, работающих на

стороне сервера, для этого его, собственно, и придумали. PHP способен решать те же задачи, что и любые другие CGI-скрипты, в том числе обрабатывать данные html-форм, динамически генерировать html страницы и тому подобное. Но есть и другие области, где может использоваться PHP.

Вторая область – это создание скриптов, выполняющихся в командной строке. То есть с помощью PHP можно создавать такие скрипты, которые будут исполняться, вне зависимости от web-сервера и браузера, на конкретной машине.

И последняя область – это создание GUI-приложений (графических интерфейсов), выполняющихся на стороне клиента.

PerlНаиболее широко Perl используется для разработки инструментов системного

администрирования, однако в последнее время он получил огромную популярность в области разработки Интернет-приложений: CGI-сценариев, систем автоматической обработки электронной почты и поддержки узлов Web.

Вот некоторые примеры задач, которые можно решать с помощью Perl: проверка пользователей Windows NT на несоответствие их статуса и

возможностей; управление NT-сервисами из командной строки и дистанционно с локальной

машины получение статистических данных на отдельной машине; может работать и с протоколом FTP; системная поддержка UNIX и Windows.PythonПитон – это объектно-ориентированный, интерпретируемый, переносимый язык

сверхвысокого уровня. Программирование на Питоне позволяет получать быстро и качественно необходимые программные модули. Интерпретатор Питона может быть перенесён на любую платформу, будь то Unix, Windows, Linux, RiscOS, MAC, Sun. При написании кода на Питоне вы не должны заботиться о конечной платформе, кроме тех случаев, когда вы используете специфические модули для данной системы. Таким образом, Питон представляет серьёзную угрозу для Java, обеспечивая лёгкую переносимость, одновременно сочитая в себе средства доступа к ресурсам операционной системы. В отличие от Java Питон не столь строг к использованию объектов, но реализуются они столь просто, что любой программист легко понимает сущность объектно-ориентированного подхода. Кроме этого, модули Питона могут быть с лёгкостью использованы в ваших программах на С++ и, если вы знаете этот язык программирования, то освоение Питона будет для вас тривиально. Питон идеален в качестве cgi скриптов для веб-страниц, так как использует быстрый, эффективный и мощный интерпретатор. Питон может служить как в качестве языка для обучения, так и в качестве языка для разработки больших систем. Он прост, мощен и его очень легко освоить. Программы на Питоне можно написать в два раза быстрее, чем на Си, используя

Page 17: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

структуры высокого уровня, но по мощности он приближается к С++, избегая недостатков его безопасности и средств, черезмерно усложняющих язык(указатели).

ASPActiveServerPages это среда программирования, которая обеспечивает

возможность комбинирования HTML, скриптов и компонент для создания динамических Web-приложений. Возможность встраивания в Web-страницы скриптов (кода, написанного на языке программирования, например, VBScript или JScript) позволяет логичным образом объединить оформление с данными, полученными из различных источников, например, из БД.

Идеология создания современных Web-приложений заключается в инкапсуляции бизнес-логики в отдельные компоненты, написанные по технологии COM. Технология ASP в данном случае является связующим звеном между этими компонентами и интерфейсом Web-приложения.

Использование ActiveServerPages не требует специфичных браузеров. Все ASP-скрипты запускаются и выполняются на Web-сервере, причем брaузер получает только результирующие HTML-файлы. Microsoft Internet Information Server, начинаясверсии 3.0, поддерживает Active Server Pages.Рассмотрим последовательность функционирования ASP. Клиент запрашивает ASP-страницу на Web-сервере. Сервер принимает запрос и начинает его обрабатывать. По расширению файла (.asp) определяет, что данный файл содержит ASP-скрипт, и начинает анализировать его содержимое, последовательно интерпретируя и выполняя вставки ASP-кода. ASP-код, в свою очередь, может содержать обращения к различным источникам данных, осуществлять обработку полученных данных и добавлять содержимое генерируемой страницы. В результате формируется обычная HTML-страница (уже не содержащая ASP-кода), которая и отправляется обратно клиенту.

Внешне ASP функционирует также, как CGI. Аналогичным образом передаются параметры и осуществляется вывод результатов. Однако производительность ASP оказывается гораздо выше, т. к. при каждом запросе не происходит отдельной загрузки ASP-интерпретатора. Использование компонент ActiveX также значительно повышает производительность Web-сервера.

3. Сравнительный анализ сред создания Web-приложенийВ настоящее время во всемирной паутине размещено несколько миллионов Web-

сайтов и их число постоянно растет. У каждого есть возможность не только просмотреть любой из них и извлечь полезную для себя информацию, но и принять активное участие в их создании. Большое значение при этом имеет среда, в которой будет происходить разработка.

MacromediaDreamweaverКомпания Macromedia продолжает делать Dreamweaver интуитивно понятной и

простой в использовании программой. Мощные средства с одной стороны и простота в использовании – с другой, делают продукты Macromedia идеальными программным пакетом, как для профессиональных web-дизайнеров, так и для новичков. Продукты, входящие в пакет Macromedia, такие как: Flash, Firework, Dreamweaver - сделают работу более продуктивной, и при этом могут заменять друг друга (так, например, в любой из них можно создать кнопки). Такие продукты как: Sitespring, FreeHand – добавит эффективности при работе с клиентом.

У Dreamweaver множество плюсов:1. Программа Dreamweaver поддерживает "чистый" HTML код, а также

последние расширения DHTML и CSS.2. Содержит прекрасные средства автоматического управления связями, то

есть при любом перемещении файлов в среде, все связи восстанавливаются автоматически. Предусмотрена блокировка разделов страницы для их защиты от неумышленной порчи.

Page 18: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

3. Позволяет отменить изменения, сделанные несколько шагов назад (однако после сохранения страницы отменить изменения будет невозможно).

4. Применяется "Динамическая проверка для различных браузеров".5. Поддерживает расширения, как сторонних разработчиков, так и самой

Macromedia (более 500).С Dreamweaver поставляется библиотека элементов, которые можно применять на

WEB-страницах, например панель навигации, дескриптор авторского права и др.Применяется для добавления мультимедийных средств на web-страницы и

различных типов файлов от Flash и Java до RealAudio, интерактивных элементов, таких как поисковые системы, форумы, системы электронной коммерции.

Программа Dreamweaver не имеет собственных средств создания изображений. В ней представлены лишь простейшие инструменты редактирования, поэтому для создания и редактирования изображений нам понадобятся специальные графические редакторы.

Dreamweaver позволяет убрать лишний код из приложений Microsoft, после чего страницы станут быстрее грузиться и лучше отображаться в разных браузерах.

MicrosoftFrontPageЯвляется наиболее популярным HTML-редактором на рынке, главным образом за

счёт популярности пакета MicrosoftOffice. В программе предлагаются мощные функции и привлекательный пакет программ, включая ImageComposer, который предназначен для создания изображений (Приложение В). Во FrontPage также содержатся WEB-компоненты, необходимые для добавления интерактивных свойств web-узлу. MicrosoftFrontPage является классическим WYSIWYG-редактором, в котором, однако, присутствует возможность ручной правки кода [6, с. 17].

В программе имеется три режима работы с документом: Normal, HTML и Preview.В режиме Normal, web-страницы представляют собой обычный текстовый файл с

возможностью редактирования всех элементов - от текста до картинок.В режиме HTML осуществляется подсветка синтаксиса, однако довольно

посредственную - дескрипторы выделены, синим цветом, все остальное - черного цвета.В режиме Preview можно посмотреть, как будет выглядеть ваша страница в окне

браузера.FrontPage имеет конструктор таблиц, существенно облегчающий их создание.

Одним из основных преимуществ программы является большое количество имеющихся шаблонов, позволяющих пользователю не ломать голову над дизайном своего проекта. Выбрав необходимый шаблон, можем приступать непосредственно к наполнению страницы контентом. Вот тут то и ощущается вся прелесть FrontPage: процесс создания HTML-страницы ничем не отличается от создания обычного текстового документа в MicrosoftWord. Нам доступны те же средства для редактирования текста, смены его форматирования, создания и редактирования таблиц, вставки различных объектов и изображений и всё это без знания HTML. FrontPage делит рабочую область на несколько блоков, содержащих определенные элементы страницы - рисунки, текст, заголовки и проч. Для каждого блока можно назначить свои параметры форматирования и расположения его относительно страницы.

Минусы: небольшой набор инструментов разработки, невозможность отдельного приобретения программы. MicrosoftFrontPage неплохо подойдет в качестве HTML-редактора на первое время, однако с ростом потребностей его возможностей может не хватить. Есть и обратная сторона медали - сложность и громоздкость полученного кода, что естественно, сказывается на конечном размере документа. Также в дальнейшем будет весьма сложно вносить изменения в подобный документ. Но это скорее недостаток не конкретного продукта, а практически всех WYSIWYG-редакторов (WhatYouSeeIsWhatYouGet - "что видите, то и получите").

Web-компоненты работают только в том случае, если на web-сервере, который используется, присутствуют соответствующие им программы.

Page 19: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

AdobeGoLive CSAdobeGoLive CS — это универсальное многофункциональное профессиональное

средство для создания, построения и управления Web-сайтами.AdobeGoLive CS содержит полный набор средств для создания

профессиональных Web-сайтов, обеспечивает возможность создания индивидуального дизайна, высокую продуктивность для коллективной работы и поддержку современных индустриальных стандартов.

В GoLive реализованы автоматическая проверка синтаксиса HTML-кода и его совместимости с различными версиями InternetExplorer и NetscapeNavigator. При обнаружении тэгов, которые не поддерживаются тем или иным браузером, программа сообщает об этом.

В программе также имеется функция автоматического распознавания и завершения написания операторов (code-completionengine), которая действует для CSS, JavaScript, PHP, SMIL, SVG и XML.

Помимо этого доступны такие функции, как настраиваемая подсветка синтаксиса, редактор библиотеки тэгов (чтобы редактировать и индивидуализировать библиотеки тэгов), средства сравнения кодов (Sourcecodedifferencechecking) и средство оптимизации (очистки) кода.

Что касается мультимедиа, то в последней версии GoLive CS произведен целый ряд усовершенствований, включая поддержку QuickTime, XHTML, более совершенную работу с PDF-файлами. Поддержка XHTML позволяет конвертировать существующие HTML-файлы в рабочие XHTML-страницы для Web и мобильных устройств.

Программа предоставляет возможность создания, редактирования и коррекции сложных таблиц с точностью до пиксела в привычном drag-and-drop-режиме.

Разработчикам доступны многочисленные, заранее спроектированные элементы дизайна. Программа обеспечивает возможность выбора из 58 профессионально разработанных темплейтов, которые идеально подходят для галерей изображений, бизнес-сайтов, сайтов электронной коммерции и т.п., а также возможность выбора из 35 профессиональных CSS-стилей.

ЗаключениеС появлением web-технологии компьютер начинают использовать совершенно

новые слои населения Земли. Можно выделить две наиболее характерные группы, находящиеся на разных социальных полюсах, которые были стремительно вовлечены в новую технологию, возможно, даже помимо их собственного желания. С одной стороны, это были представители элитарных групп общества руководители крупных организаций, президенты банков, топ - менеджеры, влиятельные государственные чиновники. С другой стороны, это были представители широчайших слоев населения домохозяйки, пенсионеры, дети.

Спектр социальных групп, подключающихся к сети Интернет и ищущих информацию в WWW, все время расширяется за счет пользователей, не относящихся к категории специалистов в области информационных технологий. Это врачи, строители, историки, юристы, финансисты, спортсмены, путешественники, священнослужители, артисты, писатели, художники. Список можно продолжать бесконечно. Любой, кто ощутил полезность и незаменимость Сети для своей профессиональной деятельности или увлечений, присоединяется к огромной армии потребителей информации во "Всемирной Паутине".

С развитием технологий гипертекстовой разметки в Интернете стало появляться всё больше сайтов, тематика которых была совершенно различной – от сайтов крупных компаний, повествующих об успехах компании и её провалах, до сайтов маленьких фирм, предлагающих посетить их офисы в пределах одного города.

Развитие Интернет-технологий послужило толчком к появлению новой ветки в Интернете – Интернет - форумов. Стали появляться сайты, и даже целые порталы, на

Page 20: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

которых люди со всех уголков планеты могут общаться, получать ответы на любые вопросы и, даже, заключать деловые сделки.

Создание сайта представляет собой маркетинговый шаг, направленный на создание информационного ресурса, который предоставит возможность для компании как удержать старых клиентов, так и привлечь новых.

Создание и разработка сайтов включает: утверждение первоначального технического задания на разработку сайта; определение структурной схемы сайта - расположение разделов, контента и

навигации; web-дизайн - создание графических элементов макета сайта, стилей и

элементов навигации; разработка программного кода, модулей, базы данных и других элементов

сайта необходимых в проекте; тестирование и размещение сайта в сети интернет.Существует множество средств для создания web-сайтов, но лишь некоторые из

них способны предоставить разработчикам инструменты для решения подавляющего большинства стоящих перед ним задач. При разработке web-сайта из всех современные web-технологий, позволяющих создавать интерактивные web-страницы, необходимо выбрать наиболее подходящие для выполнения поставленных на первоначальном этапе задач.

Вам необходимо внимательно прочитать лекцию сделать конспект.

Срок выполнения заданий до 12.05.2020 Студенты, выполнившие задания, оправляют свои работы на электронный адрес amak ek [email protected] .В теме «письма» указывают Фамилию, Имя, Отчество, номер группы, дисциплину, по которой выполнили задание. (Например, Иванов Иван Иванович Е-3, информатика). Или фото выполненных работ на WhatsApp по номеру +79243455700.

Занятие № 77-78

Задание для дистанционного обученияПредмет: ИнформатикаГруппа: Е-3Дата 08.05.2020Тема: Практическая работа № 18. Средства создания и сопровождения сайта

Цель работы:

1. сформировать навыки создания шаблона web- страницы;2. научиться создавать заголовки разного уровня;3. овладеть технологией форматирования линий;4. получить представление, как оформляется текст на web- странице;5. научиться создавать маркированные, нумерованные и многоуровневые

списки на web- странице.План работы:

1. создание шаблона web- страницы.2. создание заголовков разных уровней.3. форматирование линий.

Page 21: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

4. задание фона web- страницы.5. оформление текста на web- странице.6. использование маркированного, нумерованного и многоуровневого

списков на web- странице.7. выполнение зачетного задания.

Теоретические сведенияТехнология создания сайта предусматривает:

1. выбор темы сайта;2. планирование сайта в целом;3. планирование отдельных страниц сайта;4. создание web- страниц и сайта с использованием программного средства;5. тестирование сайта ( удобство навигации, целостность данных,

корректность ссылок, орфография, просмотр сайта в целом);6. публикацию сайта.

Инструментарий для создания сайта включает в себя:обычные текстовые редакторы, HTML- и WYSIWYG- редакторы.Навигация – важнейший элемент сайта, показывающий посетителю место нахождения и место дальнейшего движения по сайту. Существуют линейная и параллельная навигации.

Ход выполнения работы1. Создание шаблона web- страницы.HTML- документ ( простой текстовый файл, содержащий текст и текстовые HTML – теги) всегда должен начинаться с открывающего тега <HTML> и заканчиваться закрывающим тегом </HTML>. Внутри документа выделяют два раздела: раздел заголовков и тело документа. Раздел заголовков содержит информацию, описывающую документ в целом, и ограничивается тегами <HEAD>и </ HEAD>. Этот раздел должен включать в себя контейнер общего документа <TITLE>…</TITLE>. Содержимое web- страницы размещается в теле документа, которое ограничивается тегами <BODY>и </ BODY>. Создайте шаблонweb- страницы. Для этого выполните следующие действия:

создайте папку Страница на Рабочем столе. Все последующие файлы сохраняйте в данной папке;

откройте текстовый редактор Блокнот; напечатайте команды в текством редакторе для создания web- страницы:

<html><head><title>Заголовокweb - документа</title></ head><body>содержимое web- страницы ( тело документа)<!—Комментарии, которые не отображаются на web- странице --></ body></ html>

Page 22: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

сохраните готовый шаблон под именем шаблон. html в папку Страница на своем компьютере;

закройте текстовый редактор; просмотрите файл шаблон.html; откройте файл шаблон.htmlс помощью редактора Блокнот; внесите изменения : заголовок « Дизайн отделка» и в тело документа

введите текст « Первая web- страница будет посвящена стилям оформления квартир”;

сохраните получившийся файл под именем index.htmlв папке Страница (index.html – это стандартное имя головного документа, с которого начинается загрузка сайта);

просмотрите результат работы в браузере.2. Создание заголовков разных уровней. В HTMLпредусмотрено шесть

уровней заголовков, которые задаются с помощью парных тегов <H1> …<H6>( первый заголовок самый крупный, а остальные мельче). По умолчанию заголовки выравниваются по левому краю ( Left), также возможно выравнивание по центру ( Center) и правому краю ( Align).

откройте файл index.html; сохраните его под именем уровни. htmlв папку Страница; в файле уровни. htmlоформите текст в виде заголовков

различных уровней:- заголовок первого уровня( выравнивание по центру)<H1 Align =Center>Первая web- страница будет посвящена стилям оформления квартир !</H1>- заголовок второго уровня( выравнивание по левому краю)<H2Align = Left>Заголовок второго уровня</H2>- заголовок третьего уровня( выравнивание по правому краю)<H3Align = Right>Заголовок третьего уровня</H3>- заголовок четвертого уровня( выравнивание по центру)<H4Align =Center> Заголовок четвертого уровня </H4>- заголовок пятого уровня( выравнивание по левому краю)<H5Align = Left> Заголовок пятого уровня </H5>- заголовок шестого уровня( выравнивание по центру)<H6Align = Right>Заголовок шестого уровня</H6>.

сохраните изменения; просмотрите результат работы в браузере

3. Формирование линий. Длину, ширину, цвет и расположение горизонтальных линий ( тег <HR>) можно задавать с помощью дополнительных атрибутов.Атрибут выравнивания (Align )Align=Left- выравнивание по левому краю;Align=Center – выравнивание по центру;Align= Right –выравнивание по правому краю.

Page 23: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

Атрибут размера ( Size ) Size = число высоту линии в пикселах ( [ 1;100], целые числа); Size = число – задает длину линии в пикселях; Size = число % - задает длину линии в процентах от ширины

окна браузера.Атрибут цвета ( Color ): = цвет, где в качестве значения после знака равенства пишется название цвета английскими буквами и задается числовой код оттенка ( табл.)Палитра цветов

Название Русское название КодAqua #00FFFFBlack #000000Blue #0000FFFuchsia #FF00FFGray #808080Green #008000Lime #00FF00Maroon #900000Navy #000080Olive #808000Purple #800080Red #FF0000Silver #C0C0C0Teal #008080White #FFFFFFYellow #FFFF00

3.1 Откройте файл уровни. htmlи сохраните его под именем линии. html в папке Страница.

3.2 Отделите все заголовки горизонтальными линиями. Для этого выполните следующие действия:

после заголовка первого уровня добавьте горизонтальную линию и расположите ее по центру ( высота линии – 7 пикселов, длина – 650 пикселов, цвет – желтый ) с помощью команд.< HR Align = Center Size =7 Width = 650 Color = yellow>

после заголовка второго уровня добавьте горизонтальную линию и расположите ее по левому краю ( высота линии – 15 пикселов, длина – 400 пикселов, цвет – малиновый) с помощью команд< HR Align = Left Size =15 Width = 400 Color = maroon>

после заголовка третьего уровня добавьте горизонтальную линию и расположите ее по правому краю ( высота линии – 10 пикселов, длина – 300 пикселов, цвет – лиловый) с помощью

Page 24: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

команд< HR Align =Right Size =10 Width = 300 Color = fuchsia>

после заголовка четвертого уровня добавьте горизонтальную линию и расположите ее по центру ( высота линии – 200 пикселов, длина – 700 пикселов, цвет – по своему выбору) ;

после заголовка пятого уровня добавьте горизонтальную линию и расположите ее по левому краю ( высота линии – 250 пикселов, длина – 500 пикселов, цвет –по своему выбору) ;

после заголовка шестого уровня добавьте горизонтальную линию и расположите ее по правому краю ( высота линии – 200 пикселов, длина – 500 пикселов, цвет –по своему выбору) ;

Сохраните данные;4. Задание фона web- страницы задается с помощью параметра

Bgcolorтега<Body> в виде шестнадцатеричного числа или словесного названия оттенка, но на большинстве сайтов используются белый фон и черный текст.4.1. Задайте для web- страницы оливковый фон с помощью команды<BodyBgcolor=#808000></Body>.4.2 Измените фон сайта на серебристый.4.3 Результат выполненной работы сохраните в файле фон. html и покажите преподавателю.

5. Оформление текста на web- странице. Обособленный абзац текста в html- документе нужно заключать в контейнер <P>….</P>.В этом случае абзацы разделяются небольшим промежутком. Если нужно начать какой – либо текст с новой строки, то необходимо использовать в требуемом месте разрыва строки одиночный тег <BR>. Выравнивание абзацев задается с помощью атрибута ALIGN, записываемого в составе открывающего тега абзаца <P>( тал.2)

Теги форматирования абзацев

Тег Описание<P> текст абзаца </P> Перед новым абзацем автоматически

добавляется небольшой отступ<P Align = Left >текст</P> Выравнивание абзаца по левому краю<P Align =Right>текст</P> Выравнивание абзаца по правому краю<P Align =Center>текст</P> Выравнивание абзаца по центру<P Align =Justify>текст</P> Выравнивание абзаца по ширинеТекст 1 <BR>Текст 2 Тег разрыва строки<Nobr>Текст</Nobr> Запрет разрывов и переносов словТекст 1 <WBR> Текст 2 Перенос строки в указанном местеС помощью контейнера <Font> …. </Font>можно менять такие параметры шрифта, как гарнитура ( Face, рис.6.15), размер (size) и (Color). Параметр size задает размер шрифта в условных единицах ( от 1 до 7). Атрибут Color определяет цвет текста, который можно задавать с помощью названий цветов или в шестнадцатеричном формате.

Page 25: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

Контейнеры увеличения ( <BIG>…</BIG>) и уменьшения (<SMALL>…</SMALL>) размера шрифта могут быть многократно вложенными друг друга, чтобы увеличить или уменьшить текст до нужных размеров.Контейнеры для шрифтового выделения представлены в табл.6.3 Таблица 6.3

Тег Описание<B>Текст</B> Полужирный<STRONG> Текст</STRONG><I>Текст </I> Курсив<EM> Текст</EM>

Arial, Arial Black, Arial Narrow, Book Antiqua, Bookman Old Style, Century Gothic, Gooper Black, Courier New, Elephant, Impact, Mangal, Monotype Corsiva, Times New Roman, Tahoma, VerdanaРис. 6.15. Примеры гарнитур шрифта Окончание табл. 6.3

Тег Описание<U>Текст</U> Подчеркнутый текстE=mc < SUP> 2 </SUP> Верхний индексH < SUP> 2 </SUP>0 Нижний индекс<STRIKE>Текст</STRIKE> Зачёркнутый текст <PRE>Текст </PRE> Обычный текст

5.1. Откройте в Блокноте файл шаблон. html.5.2. Сохраните файл в папке Страница под именем текст. html.5.3. В файле текст. Htmlвведите следующий текст: Вводим

любой текст5.4. Просмотрите результат ввода текста в браузере.5.5. Заключите каждый абзац в контейнер абзаца, например <P>Стили в

интерьере.</P>.5.6. Заголовку « Стили в интерьере» назначьте вид заголовка первого

уровня, расположенного по центру. Оформите заголовок с использованием полужирного, подчеркнутого текста и размером шрифта, равным 6, т.е. <P Align =Center><B><U><Font size=6>Стиливинтерьере.</Font></U></B></P>5.7 Оформите названия стилей в интерьере полужирным шрифтом Arial и размером, равном 4.5.8 Результат проделанной работы сравните с рис. 6.16 и покажите преподавателю.5.9 Выполните задание № 1 и покажите преподавателю результат работы.Задание 1.

В конце всего текста задайте размеры шрифта от 1 до 7 и примените теги шрифтового выделения.

Page 26: amak-bl.ruamak-bl.ru/uploads/2/Informatika_E3.docx · Web viewЗанятие № 69-70. Задание для дистанционного обучения. Предмет: Информатика.

6. Использование маркированного, нумерованного и многоуровневого списков на web- странице. Набор элементов ( абзацев) со специально выбранным символом - маркером ( круг по умолчанию, окружность, квадрат) – представляет собой маркированный список. Данный список задается с помощью контейнера

Срок выполнения заданий до 12.05.2020 Студенты, выполнившие задания, оправляют свои работы на электронный адрес amak ek [email protected] .В теме «письма» указывают Фамилию, Имя, Отчество, номер группы, дисциплину, по которой выполнили задание. (Например, Иванов Иван Иванович Е-3, информатика). Или фото выполненных работ на WhatsApp по номеру +79243455700.