Название УД, ПМ, раздела, МДК: Информатика и программирование
Специальность, группа: 09.02.05 Прикладная информатика, 33
Тема лекции: Языки разметки и создания гипертекстовых документов. Защита информации в локальных и глобальных компьютерных сетях.
Цели занятия:
Образовательная: способствовать формированию знания языка HTML, способы создания Web-страниц.
Воспитательная: формирование сознательного отношения к процессу обучения, создать условия для формирования информационной культуры.
Развивающая: развитие интереса к учебному предмету, содействие активизации мышления обучающихся; развить познавательную деятельность обучающихся по овладению программным учебным материалом по дисциплине «Информатика и программирование».
Студент должен:
Знать:
- принципы работы с информацией в глобальных компьютерных сетях;
ОК 1. Понимать сущность и социальную значимость своей будущей профессии, проявлять к ней устойчивый интерес.
ОК 2. Организовывать собственную деятельность, определять методы и способы выполнения профессиональных задач, оценивать их эффективность и качество.
ОК 3. Решать проблемы, оценивать риски и принимать решения в нестандартных ситуациях.
ОК 4. Осуществлять поиск, анализ и оценку информации, необходимой для постановки и решения профессиональных задач, профессионального и личностного развития.
ОК 6. Работать в коллективе и команде, обеспечивать ее сплочение, эффективно общаться с коллегами, руководством, потребителями.
ОК 9. Быть готовым к смене технологий в профессиональной деятельности.
Тип лекции: информационная, проблемная, эвристическая, бинарная
Уровень освоения: I – ознакомительный.
Материально – техническое обеспечение: м/м система, просмотр презентации.
Учебно-методическое оснащение: рабочая программа, КТП, технологическая карта лекционного занятия, конспект лекции.
Этапы и хронология лекции (90 минут):
Этапы занятия | Время | Содержание занятия |
1. Организационный момент | 2 мин | Приветствие, проверка присутствующих, внешнего вида студентов, проверка готовности студентов к лекции, заполнение журнала. |
2. Формулировка темы, ее мотивация | 3 мин | Сообщение темы, целей, хода занятия, указание на важность темы. |
3. Изложение основных вопросов лекции | 77 мин | Языки разметки и создания гипертекстовых документов. Защита информации в локальных и глобальных компьютерных сетях. См. приложение:конспект лекции. |
4. Подведение итогов лекции | 5 мин | Вопросы: 1. Что такое HTML? 2. Что такое "тэг"? Приведите несколько примеров. 3. Каким тегом обозначается "тело" HTML-документа? 4. Какие части HTML-документа Вы знаете? 5. К какому типу гиперссылок относится эта гиперссылка: <a href="https://www.rambler.ru/"> ссылка на ресурс </a>? 6. Для чего предназначены тэги <h1></h1> и <p></p>? |
5. Задание на дом | 3 мин | Конспект по данной теме. Написание рефератов по теме «Микропроцессоры ПК, их назначение и характеристики» |
Список использованной литературы и Интернет-ресурсов в подготовке к занятию:
1. emk64.ru/userfiles/file/Tehnologicheskaya_karta_FGOS.doc
2. Хольцшлаг М. Использование HTML 4.6-е изд. - М.: Вильямс, 2001.- 1008 с.
3. Таненбаум Э. Компьютерные сети. 4-ое изд. - СПб: Питер, 2005.- 992 с.
4. Научно-образовательный интернет-ресурс по тематике ИКТ «Единое окно доступа к образовательным ресурсам». Разделы: «Общее образование: Информатика и ИКТ», «Профессиональное образование: Информатика и информационные технологии»
ФИО и подпись преподавателя Страхова Олеся Викторовна ___________
ЛЕКЦИЯ
Тема. Языки разметки и создания гипертекстовых документов. Защита информации в локальных и глобальных компьютерных сетях.
План:
1. Этапы создания Web-сайта
2. Терминология Web-проектирования
3. Создание Web-сайтов средствами языка HTML
1. Этапы создания Web-сайта
Создание Web-сайта предполагает наличие нескольких этапов — от придумывания идеи до ее воплощения. Чтобы создать действительно интересный и полезный продукт, необходимо пройти следующие этапы.
Анализ и проектирование. Анализ сильных и слабых сторон конкурентов, информационное проектирование Web-сайта, разработка его концепции, оценка целевой аудитории.
Написание контента. Под контентом (Content) понимается информационное наполнение сайта. Термин применяется для обозначения идейного содержимого Web-сайта.
Креатив. Креатив (Creative) — термин для обозначения визуальной составляющей Web-сайта. Сюда входит разработка дизайна, графических элементов, обработка графики и все, что с ней связано.
Написание кода Web-сайта. Программирование Web-файла, написание функциональной части.
Тестирование. На этом этапе проверяется все: удобство навигации, целостность данных, корректность ссылок и орфография, к тому же не все браузеры одинаково интерпретируют одни и те же теги HTML.
Публикация. Размещение Web-сайта в Интернете. Большинство Интернет-провайдеров (Internet service provider — ISP) предоставляют услугу по размещению домашних Web-страниц бесплатно (эта услуга называется Web-хостингом — Web hosting), например https://www.chat.ru/ (до 20 Мб), https://www.narod.ru/ (до 100 Мб), https://www.boom.ru/ (до 50 Мб). Для публикации можно размещать Web-сайт у провайдера или воспользоваться другими возможностями.
Раскрутка. Рекламная компания по узнаванию Web-сайта и повышения его посещаемости. Сюда входит регистрация Web-сайта в поисковых системах, обмен ссылками, баннерная реклама и др.
Поддержка. Необходимо решить, каким образом будут добавляться новые разделы и материалы, что будет происходить со старыми. Возможно, потребуется создание архива новостей, куда будут попадать новости, потерявшие свою актуальность. Еще более важным является регулярное обновление информации на Web-сайте для его постоянной привлекательности.
2. Терминология Web-проектирования
Web-браузер — программа-приложение, предназначенная для интерпретации кодов HTML документов и отображения гипертекстового документа на экране компьютера. Наиболее часто используемые браузеры — MicroSoft Internet Explorer и NetScape Navigator. Наряду с термином «браузер» используют термины-синонимы: «обозреватель» и «навигатор».
Web-сайт —набор связанных между собой, близких по смыслу Web-страниц и файлов. На каждом Web-сайте существует одна Web-страница называемая домашней (homepage) или главной страницей. Все посетители Web-сайта сначала попадают на нее, а потом с помощью гиперссылок попадают на другие страницы Web-сайта.
Web-страница (документ HTML) представляет собой текстовый файл на языке HTML формата *.htm или *.html, размещенный в WWW. Web-страница кроме текста может содержать графику, анимации, видеоклипы, музыку, а также гипертекстовые ссылки, при помощи которых можно переходить к другим Web-страницам и просматривать их.
Один из способов создания Web-страниц (или документов HTML) состоит в использовании текстового редактора Блокнот
(NotePad), встроенного в Windows. В этом редакторе создается файл Web-страницы, который сохраняется с расширением *.htm с последующим просмотром результатов с помощью браузера. После сохранения файла и выхода из Блокнота для просмотра отредактированной страницы надо выполнить команду Файл — Открыть в программе Internet Explorer и указать путь к созданной Web-странице с помощью кнопки Обзор.
3. Создание Web-сайтов средствами языка HTML
Язык HTML (Hyper Text Markup Language) — язык гипертекстовой разметки документа, служит для написания Web-сайтов. Язык HTML позволяет:
- создавать и редактировать Web-сайты, в том числе домашнюю Web-страницу, которую можно затем разместить в Интернете;
- редактировать документы HTML, полученные из Интернета, так чтобы функционировали все внедренные в документ объекты (картинки, анимации и т.д.);
- создавать мультимедийные презентации, слайд-шоу, демонстрационные проекты, благодаря гипертекстовым ссылкам и возможности вставлять в документ HTML рисунки, диаграммы, анимации, видеоклипы, музыкальное и речевое сопровождение, текстовые спецэффекты (например, бегущая строка).
ОСНОВНЫЕ ПОНЯТИЯ ЯЗЫКА HTML
Элемент — это конструкция языка HTML, или контейнер, содержащий данные.
Web-страница представляет собой набор элементов.
Тег (Tag) — это стартовый и конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. Теги заключаются в угловые скобки, например: <HTML>. Конечный тег, если он предусмотрен синтаксисом языка, снабжается косой чертой: </HTML>.
Гиперссылка (Hyperlinks) — фрагмент текста, который является указателем на другой файл или объект. Гиперссылки позволяют переходить от одного документа к другому.
Фрейм (Frame) — область гипертекстового документа со своими полосами прокрутки. Фреймы позволяют разбивать страницы на прямоугольные области, в каждой из которых отображается своя собственная страница. Вы можете разместить один или несколько фреймов на странице (такая страница называется страницей фреймов или фреймсет (frameset)).
Форма (Form) — область гипертекстового документа, которая необходима для организации обратной связи с посетителями сайта.
Апплет (Applet) — небольшая прикладная программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.
Скрипт (Script) — программа, включенная в состав Web-страницы для расширения ее возможностей.
Загрузка (DownLoad) — копирование документа с Web-сервера на компьютер клиента.
Размещение (UpLoad) — копирование документа с компьютера клиента на Web-сервер — используется при создании собственной Web-страницы (т.е. при ее опубликовании).
Пиксел (Pixel) — наименьшая цветная точка экрана монитора.
ОБЩАЯ СТРУКТУРА ПРОСТЕЙШЕГО ДОКУМЕНТА HTML
Общая структура простейшего документа HTML такова:
<СОММЕЭТ>Комментарий</СОММЕ1УГ>
<HTML>
<HEAD>
<TITLE> Название документа</ПТЬЕ>
</HEAD>
<BODY>
Здесь расположен текст самого документа HTML.
</BODY>
</HTML>
Дадим пояснения указанным тегам документа HTML. <COMMENT> — комментарий к документу. Не является обязательным.
<HTML> — идентификатор всего блока HTML-команд. <HEAD> — идентификатор заголовка документа HTML. <TITLE> — идентификатор заголовка окна просмотра. <BODY> — идентификатор HTML-команд документа для просмотра.
Три основных тега <HTML>, <HEAD> и <BODY> передают броузеру основную информацию для идентификации и организации документа.
Все указанные теги — парные, т.е. каждый из них заканчивается конечным тегом с косой чертой. Все команды можно писать как с маленькой, так и с большой буквы.
<МЕТА> — непарный тег применяется для указания подробной информации о документе.
ТЕГИ ФОРМАТИРОВАНИЯ ТЕКСТОВОГО ПОТОКА
<Р> — идентификатор конца абзаца, после которого добавляется пустая строка. В конце нужен тег </Р>.
<BR> — идентификатор перевода строки.
<HR> — идентификатор изображения горизонтальной линии.
Эти теги одиночные, т.е. непарные, они не требуют тегов с косой чертой.
<PRE> — установка равноширинного шрифта. В конце нужен тег </PRE>.
ПАРНЫЕ ТЕГИ ФОРМАТИРОВАНИЯ ЗАГОЛОВКОВ И ПОДЗАГОЛОВКОВ ДОКУМЕНТА
<Н1>, <Н2>, <НЗ>, <Н4>, <Н5>, <Н6>. При этом заголовки будут выведены большими буквами, причем размер букв у тега <Н1> будет самый большой, у <Н2> — меньше, у <НЗ> — еще меньше и т.д.
ПАРНЫЕ ТЕГИ ФОРМАТИРОВАНИЯ СИМВОЛОВ ТЕКСТА
<В> — идентификатор полужирного шрифта.
<strong> — идентификатор выделенного шрифта.
<i> — идентификатор курсива.
<U> — идентификатор подчеркивания.
<s> — идентификатор перечеркивания.
<tt> — идентификатор равноширинного шрифта (телетайпного или курьера).
<big> — задает увеличенный размер шрифта. <small> — задает уменьшенный размер шрифта. <center> — задает центрирование текста. <sub> — задает нижний индекс.
ТЕГИ ФОРМАТИРОВАНИЯ АБЗАЦЕВ <р align=left> — выравнивание текста в абзаце по левому краю. <р align=right> — выравнивание текста в абзаце по правому краю.
<p align=center> — выравнивание текста в абзаце по центру. <р align=justify> — полное выравнивание по обоим краям экрана, align — атрибут выравнивания.
ТЕГИ СПИСКОВ
Теги списков являются способом наглядного отображения структурированной информации. Упорядоченные списки служат для отображения последовательных операций или алгоритмов. Браузер автоматически генерирует номера для каждого пункта в списке.
<OL> — идентификатор упорядоченного списка. В конце </OL>.
Неупорядоченные списки служат для составления перечней, когда порядок следования пунктов несущественен. Перед каждым элементом будет стоять маркер.
<UL> — идентификатор неупорядоченного списка. В конце </UL>.
Отдельные элементы в упорядоченном и неупорядоченном списках помечают одиночным тегом <LI>, а элементы в списках определений <DL> тегами <DT> для термина и <DD> для значения термина.
<Ы> — идентификатор элемента в упорядоченном и неупорядоченном списке.
Конечный тег </Ы> может быть опущен.
ТЕГИ СПИСКОВ ОПРЕДЕЛЕНИЙ
Списки определений обеспечивают специальное форматирование, как в словарях, для терминов и связанных с ними описаний.
<DL> — идентификатор списка определений. В конце </DL>. <DT> — идентификатор термина в списке определений. <DD> — идентификатор значений термина в списке определений. <DL>
<DT> название термина I <DD> определение термина 1 <DD> другое определение термина 1
</DL>
ТЕГИ ЦВЕТА
<BODY bgcolor=«teal» text=«aqua» link=«red»> — задает цвет текста {text), цвет фона (bgcolor) и цвет гипертекстовой ссылки (link).
<BODY background=«back.jpg»> — задает фоновый рисунок (обои) на Web-странице в файле back.jpg.
<BODY background=«\windows\tartan.bmp»> — фоновый рисунок (обои) взят из файла tartan.bmp, причем указан путь этого файла.
<font color=«yellow» size=5> — задает цвет символов текста (color) и их размер (size). В конце нужен тег </font>.
ТЕГИ ЛИНИЙ
<hr color=«lime»> — задает цвет горизонтальной линии.
<hr color=«red» size=3 width=220 align=center> — атрибут size=N задает толщину линии в пикселах; атрибут width=M задает длину линии в пикселях; атрибут align=center (или left, или right) задает смещение линии (ее размещение в центре, или смещение влево, или вправо).
ТЕГИ ДЛЯ ВСТАВКИ ИЗОБРАЖЕНИЙ
Графика на страницах — это средство выражения мысли, подчеркивания идеи.
Изображения можно сохранять в нескольких форматах. Тип файлов GIF - графический формат обмена, стал первым типом файлов, которые поддерживались в WWW. Затем был разработан формат JPEG - объединенная группа экспертов фотографии. Это формат эффективнее GIF для представления больших изображений.
Приобрел популярность формат PNG — персональная сетевая графика, который заменяет GIF.
При публикации сайта рисунок должен находиться в папке, где хранятся файлы страниц, а URL-адрес должен быть реальным.
JPEG использует специальную технику компрессии изображений, что является преимуществом для рисунков и фотографий.
<IMG SRC=«lycos.gif»> — вставка графического изображения в виде анимационного файла lycos.gif. Можно также использовать и графические файлы формата *.jpg (или *.jpeg), *.bmp.
<IMG SRC=«echomsk.gif» width=«403» height=«263»> — если при вставке изображения использованы атрибуты width (ширина в пикселях) и height (высота в пикселях), то при загрузке изображения браузер покажет сначала рамку, где должно быть изображение, а затем уже само изображение, поскольку оно загружается дольше. Таким образом, резервируется место на экране под изображение.
<IMG SRC=«\html\animat\iexplor.gif»> — вставка графического изображения в виде файла iexplor.gif, причем указан полный путь графического файла на диске: c:\html\animat\iexplor.gif.
<IMG SRC=«scene.jpg» border=3 alt=«Картина»> — атрибут border задает рамку по периметру изображения толщиной 3 пикселя. Атрибут Alt дает текст на месте рамки, если изображения нет.
Атрибут border=0 используется, чтобы убрать рамку вокруг рисунка. Это необходимо, например, при использовании анимирован-ных ^//-рисунков на прозрачной основе.
<IMG SRC=«flower.jpg» border=0 width=«85» height=«130» align=«left» hspace=5 alt=«Цветок» >
Здесь атрибут hspace=5 обеспечивает плавное обтекание рисунка текстом. Он задает ширину незаполненного пространства справа и слева от рисунка в пикселях.
Атрибут align=«left» обеспечивает размещение рисунка слева.
ТЕГ ПЕРЕХОДА К ДРУГОМУ ФАЙЛУ
<а href=«excite.htm»>excite.htm</a> — гипертекстовая ссылка к файлу excite.htm.
<а href=«C:\book\book.inf»>book.uif</a> — гипертекстовая ссылка, переход к файлу book.inf. При запуске браузера следует указать программу для просмотра текстового файла book.inf, например edit.com.
При работе в Интернете следует различать файлы с большими и с маленькими буквами в имени и расширении. Должно быть полное соответствие между именами файлов по размеру каждой буквы в имени и расширении, указанными в гиперссылке и лежащими на сервере, иначе гиперссылки не будут работать.
Для облегчения работы можно задавать цифровые имена файлов (цифры всегда одного размера).
ТЕГ ПЕРЕХОДА К ДРУГОЙ WEB-СТРАНИЦЕ
<а href=«https://www.da.ru»>https://www.da.ru</a> — гипертекстовая ссылка в виде текста, переход в Интернете к Web-странице https://www.da.ru.
<а href=«zinn.gif»Ximg src=«globe.gif» border=«3»X/a> — гипертекстовая ссылка в виде изображения globe.gif, переход к просмотру изображения zinn.gif.
ТЕГ ВСТАВКИ АДРЕСА ЭЛЕКТРОННОЙ ПОЧТЫ<а href=«maiIto: int@mtu-net.ru»>int@mtu-net.ru</a> — гиперссылка на адрес электронной почты. При нажатии происходит вызов почтовой программы и указанный адрес E-mail:int@mtu-net.ru вводится в пункт Кому.
ТЕГ ВСТАВКИ ДОКУМЕНТА
<embed src=«Welcome.avi» Width=280 Height=140 autostart=true> —
вставка объекта в документ HTML. В данном случае это мультимедийный файл *.avi, причем при загрузке страницы происходит автозапуск этого файла, размеры которого на экране заданы атрибутами Width и Height.
Если документ HTML большой, то внутри него делают переходы по метке (U01): <РХа ЬтеР=«#и01»>Ввеяение</а></Р> <а name=«U01»> Введение </а>
ТЕГИ ДЛЯ СОЗДАНИЯ БЕГУЩЕЙ ТЕКСТОВОЙ СТРОКИ
(ТОЛЬКО ДЛЯ INTERNET EXPLORER):
<marquee behavior=«scrolI» direction=«right» loop=«-l»> Интернет — это окно в MHp!</marquee>
Если текстовая строка должна бежать влево, то вместо right должно быть слово left. Можно создать бегущую текстовую строку еще проще (т.е. без атрибутов, и она будет бежать влево):
<шагдиее>Добро пожаловать! </marquee>
Если текстовая строка должна бежать то влево, то вправо, то в теге <marquee> используется атрибут behavior=«alternate».
СПИСОК ЦВЕТОВ СИМВОЛОВ HTML
Всего 16 основных цветов:
Вместо указанных терминов для задания цвета можно использовать RGB-коды (Red, Green, Blue), например: #FFFFFF — белый (white), #FF0000 — красный (red).
Меняя RGB-коды, цвета можно подбирать желаемые текста и фона.
ТЕГИ ПОДКЛЮЧЕНИЯ ЗВУКА
Для воспроизведения звука (файл *.mid) после загрузки документа HTML в браузер Internet Explorer (т.е. в фоновом режиме), надо записать следующую команду, например:
<bgsound src=«\windows\canyon.mid» loop=l>
Можно также использовать файл формата *.wav. Число воспроизведений loop можно увеличить с 1 до п.
ТЕГИ ФРЕЙМОВ
<firameset></frameset> — определение фреймовой (оконной) структуры документа: размеры и расположение фреймов на странице. Заменяет тег BODY в документе с фреймами; может быть вложен в другие фреймсеты.
<frameset rows=«value, value* > — определение количества и размеров горизонтальных фреймов (фреймов-строк) в окне браузера (пиксели, проценты ширины).
<frameset cols=«value,value»> — определение количества и размеров вертикальных фреймов (фреймов-столбцов) в окне браузера (пиксели, проценты ширины).
<frame> — определение фрейма и его свойства внутри FRAMESET-структуры.
<noframes></noframes> — определяет, что показывать, если браузер не поддерживает фреймы.
Атрибуты фреймов
<frame src=«URL»> — указывает адрес (URL) HTML-файла, отображаемого в данном фрейме.
<frame name=«name»> — определение имени данного фрейма, которое будет в дальнейшем использоваться для ссылки на него из других документов с помощью параметра target.
<frame marginwidth=#> — определение ширины (в пикселях) левого и правого полей фрейма; должен быть равен или быть больше 1.
<frame marginheight=#> — определение ширины (в пикселях) верхнего и нижнего полей фрейма; должен быть равен или быть больше 1.
<frame scroUing=VALUE> — определение наличия полосы прокрутки содержимого фрейма; значениями могут быть: «yes,» «по,» или «ашо.» По умолчанию стоит auto.
<frame noresize> — предотвращение изменения размеров фрейма.
ТЕГИ ФОРМЫ
Для функционирования формы понадобится ^написать CGI скрипт. HTML просто создает вид формы.
СОЗДАНИЕ ТАБЛИЦ В HTML
Таблицы являются удобным средством форматирования данных в HTML.
Таблицу задает и определяет ее общие свойства тег <table></table>. По горизонтали, например по центру, таблицу можно выровнять с помощью тега <р align=«center»>, размещаемого перед <table>.
Тег <table> может иметь атрибуты:
<table bordcr=«5» width=«100» cellpadding=«10» cellspacing=«10»>,
где
border=«5» — ширина боковой грани в пикселях. При нулевом значении рамка исчезает;
width=«100» — ширина таблицы в пикселях или width=«50%» — ширина таблицы в % по отношению к ширине страницы в окне;
cellspacing=«10» — ширина фронтальной грани в пикселях;
cellpadding=«10» — задает размер пустого пространства в пикселях, окружающего данные в ячейке.
Тег <captionX/caption> задает заголовок таблицы.
Тег <tr> задает строку таблицы. Следующий тег <tr> задает следующую строку таблицы. Конечный тег необязателен.
Тег <td> задает ячейку таблицы. Следующий тег <td> задает следующую ячейку таблицы. Конечный тег необязателен.
Цвет фона ячейки задается в теге <td>: <td bgcolor=«cyellow»>
Непарный тег <th> — задает элемент ячейки, которая является заголовком таблицы. Этот тег должен находиться внутри тега <tr>.
Ячейка-заголовок отличается от обычной тем, что текст внутри нее выделяется полужирным шрифтом. Цвет фона заголовка задается: <tr><th bgcolor=«yeIlow»>3anxriOBOK 1.
СКРИПТ
Для реализации Web-сайта используется программа Движок, реализующая функциональность, отличную от простого показа готовых Web-страниц. Например, просмотр каталога Интернет-мага-тна (список товаров извлекается из базы данных магазина), поиск в И нтернете (страницы с ответами поисковой системы формируются динамически), показ баннеров (движок «выдает» страницам сайта тот или иной баннер по заданному алгоритму).
Скрипт - несложная программа на «скриптовом» языке программирования (Perl, Php, Javascript), компонент движка. В предельном случае движок сайта может состоять из одного-единствен-ного скрипта.
Cgi-bin исторически — подкаталог на сервере, в котором располагались скрипты и иные компоненты движка сайта. Некоторые хостинги (услуги по размещению чужого Web-сайта на своем Web-сервере или чужого Web-сервера) предоставляют своим клиентам личные каталоги cgi-bin для размещения скриптов.