Разметку web страницы набранного текста на языке html можно просмотреть в программе Outlook express

Федеральное Г осударственное образовательное учреждение среднего профессионального образования «Рязанский колледж электроники»

МЕТОДИЧЕСКИЕ УКАЗАНИЯ ДЛЯ СТУДЕНТОВ ПО ПРОВЕДЕНИЮ ПРАКТИЧЕСКИХ РАБОТ ПО ДИСЦИПЛИНЕ

ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ КОМПЬЮТЕРНЫХ СЕТЕЙ И WEB-СЕРВЕРОВ

(Наименование дисциплины по примерному учебному плану)

для специальности 230106 Техническое обслуживание средств вычислительной техники и компьютерных сетей

(№ специальности и её наименование)

Рязань 2010

Цикловой комиссией Информационных технологий ФГОУ СПО «РКЭ»

Председатель ЦК Директора по УМиВР

Авторы: Ларина Марина Евгеньевна Рецензенты

Настоящее руководство содержит описания 12 двухчасовых лабораторных работ по курсу «Программное обеспечение компьютерных сетей и web-серверов» для студентов 3­го курса специальности 230106 — Техническое обслуживание средств вычислительной техники и компьютерных сетей.

Каждая работа содержит теоретические пояснения необходимые для выполнения работы, порядок выполнения практической части, а также теоретические вопросы, ориентированные на понимание и анализ полученных результатов. Зачет за каждую работу выставляется при качественном выполнении практической работы, правильном и грамотном оформлении отчета и устной защите работы (заключающейся в ответе на вопросы преподавателя). Работы выполняются с разбиением студентов на бригады по 2 человека. Отчёт по каждой работе студент выполняет индивидуально на специальном бланке установленного образца.

How To Embed HTML in Outlook Email | Microsoft 365 & Outlook Live

В руководство включены практические работы:

ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ КОМПЬЮТЕРНЫХ СЕТЕЙ И WEB-СЕРВЕРОВ 1

для специальности 230106 Техническое обслуживание средств вычислительной техники и компьютерных сетей 1

Практическая работа №1 «Изучение браузеров» 3

Практическая работа №2 «Работа с почтовым клиентом Outlook Express» 6

Практическая работа №3 «Утилиты ОС для диагностики и анализа сети» 7

Практическая работа №4 «Создание простейшей WEB страницы. Форматирование текста в HTML» 11

1. Создание шаблона Web-страницы 11

3. Форматирование текста с помощью символов разрыва абзаца и строк. 12

4. Создание линий 12

5. Создание списков 12

6. Создание иллюстраций 13

7. Цвет фона на WEB странице 14

8. Размер и цвет текста на WEB странице 14

9. Создание бегущей строки 15

Практическая работа №5 «Ссылки. Графические карты ссылок» 16

4. Пример использования графической карты ссылок 18

Практическая работа №6 «Таблицы на WEB странице» 19

2. Объединение ячеек в таблице 22

3. Табличная верстка страницы 22

4. Установка внутренних полей в таблице 23

Практическая работа №7 «Фреймы» 24

2. Верстка страницы фреймами 25

З.Плавающий фрейм 27

Практическая работа №8 «Каскадные таблицы стилей CSS (Cascading Style Sheets)» 29

Практическая работа № 9 «Разработка Java-скриптов и их внедрение с web-страницу» 34

Практическая работа № 10 «Создание форм в HTML» 39

Практическая работа № 11 «HTML-редакторы» 45

Практическая работа № 12 «Создание баннера и добавление его на WEB-страницу» 47

Практическая работа №1 «Изучение браузеров»

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

Теоретические сведения:

При работе с системой www пользователи имеют дело с программами-клиентами системы, называемыми браузерами

Браузер (от англ. browse — листать, просматривать) — программа, с помощью которой пользователь организует диалог с системой www, просматривает www-страницы, взаимодействует с www-серверами и другими ресурсами в Internet.

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

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

Первым графическим браузером была программа Mosaic разработанная в национальном центре суперкомпьютерных приложений США (NCSA).

В 1994 г. была образована корпорация Netscape Communications, а её основателями были создатели Mosaic. Вскоре появилась коммерческая версия графического браузера Netscape. Netscape Navigator 2.0 умел поддерживать Java-апплеты и язык JavaScript. К 1996 г. Netscape обладала полным господством в мире веб-браузеров.

В начале 1996 г. на рынке появляется браузер Microsoft Internet Explorer 2.0, а летом того же года Microsoft Internet Explorer 3.0. В дальнейшем появились версии Microsoft Internet Explorer 4.0, Microsoft Internet Explorer 5.0, Microsoft Internet Explorer 6.0

Хотя сейчас на рынке можно встретить множество веб-браузеров (в том числе и текстовые), подавляющее число пользователей пользуются браузерами Microsoft.

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

1. Запустите браузер Internet Explorer. Откройте WEB-страницы сохраненные на ПК и

работайте автономно.

1. Ознакомьтесь с основными элементами:

1. команды меню;

Б) навигационная панель браузера;

Г) справочная система;

1. Какие сервисы Интернета поддерживает данный браузер (только ли просмотр веб­страниц или другие сервисы, например IRC, FTP, RSS).
2. Внимательно изучите меню и возможности настроек браузера. Ответьте на ряд

1. Как изменить кодировку текста?

Б) Как отключить показ рисунков (звук, анимацию)?

1. В каких видах можно сохранить загруженную страницу?

Г) Как изменить домашнюю страницу?

Д) Как изменить вид ссылки (цвет)?

Е) Как добавить или удалить кнопки на панели?

1. Основные особенности настройки журнала посещений.
2. Временные файлы Интернета.

1. Как указать путь к папке?

Б) Как изменить время хранения файлов?

1. Удаление временных файлов Интернета.

1. В чем заключается настройка безопасности. Какие параметры можно изменить?
2. Настройка конфиденциальности. Основные параметры.
3. Как блокировать всплывающие окна?
4. Как сделать так чтобы при открытии HTML документов браузер автоматически осуществлял подключение к Интернету?
5. Как сделать, чтобы при окончании загрузки файла браузер делал уведомление?
6. Запустите браузер Opera. Повторите задания с данным браузером. Внимательно изучите меню и навигационную панель. (Обратите внимание, что аналогичные возможности в разных браузерах могут по-разному называться и по-другому настраиваться.)
7. После изучения всех элементов и настроек выделите отличительные особенности данного браузера от Internet Explorer.
8. Запустите браузер FireFox. Повторите указанные действия.

Отчет по работе должен содержать:

1. Краткое описание ответов на вопросы по каждому браузеру.
2. Указание отличительных особенностей.
3. Вывод о проделанной работе, удобстве и необходимости тех или иных функций браузера.

Рекомендации:

Отчет удобно оформить в виде таблицы, в которой указать ответы на вопросы и перечислить особенности. Например:

Источник: studfile.net

Документ созданный в MS Power Point имеет расширение

$$$Инструкция браузеру, указывающая способ отображения текста:

$$$Выберите тэги, которые указывают браузеру, что это HTML-документ:

$$$Укажите тэги, которые помещают название документа в оглавление программного документа в оглавление просмотра Web-страниц

$$$Укажите тэги, которые определяют тело документа

$$ средство создания web-страниц

$ функциональный раздел документа

$ Комментарии в языке HTM L

$$$ Язык HTML — язык…

Для чего используется язык HTML?

$$ для создания Web-страниц

$ для создания текстового документа

$ для создания программ

$ для работы в Internet

$$$ Тэги разметки заключаются между знаками…

Между каким тэгом заключается документ HTML?

$$$ Тело документа заключается в тэге…

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

$$$Тэг форматирования шрифта…

$$$ Для перехода текста на новую строку используется тэг…

$$$ Синтаксис установки цвета шрифта для части текста…

$$$ Синтаксис цвета…

Выберите тэг, в котором установлен цвет фона

Какое расширение имеют Web-страницы?

$$$ Разметку Web-страницы набранного текста на языке HTML можно просмотреть в программе…

Что такое компьютерная сеть?

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

$система сконцентрированных в одном месте компьютеров

$система территориально распределенных ЭВМ

$$$ Тэги – это …

$$ специальные элементы для задания команды HTML

$ средства передачи информации

$ ярлык на рабочем столе

Какой элемент позволяет указать высоту знаков текста?

От чего не зависит скорость передачи данных в сети Интернет?

$$от пропускной способности и загруженности каналов связи

$ от администратора сети Интернет

$ от загруженности серверов

$$$ Каталог – это …

$$ список адресов сайтов, сгруппированных по темам и снабженных краткими описаниями

$ ярлык на рабочем столе

$ папка с документами

Что такое сервер?

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

$общая часть имени у группы компьютеров

$программа для работы в сети

$$$ Что такое клиент (рабочая станция)?

$$ любой компьютер, имеющий доступ к услугам сервера

$пользователь локальной сети

$поставщик услуг Интернета

$$$ Для чего предназначена программа Internet Explorer?

$$ для просмотра Web-страниц

$для запуска антивируса

$для просмотра структуры каталога

$ для работы с папками и файлами

Источник: 4-i-5.ru

Язык разметки HTML

В основе Интернета лежит язык разметки HTML. В этой статье мы рассмотрим основы HTML.

1. Что такое HTML?

Язык HTML (HyperText Markup Language — язык разметки гипертекста) — это язык для обозначения элементов веб-страницы. Это не язык программирования, поэтому любой может его освоить. Суть языка в том, что нужно исходный текст разметить специальными метками — тегами.

Например, тег параграфа выглядит так:

В данном примере мы разметили текст тегом p. В начале стоит открывающий тег , а в конце — закрывающий тег .

Каждый тег обозначается некоторым кодом. Обычно тег начинается знаком «<код параметры>» и заканчивается знаком «». Существуют теги без закрывающего знака.

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

Пример текста

Пробелы в HTML сокращаются до одного пробела. Переводы строк игнорируются.

Чаще всего используются следующие теги:

— полужирный текст
— курсив

— перевод строки
— горизонтальная линия

— добавленный текст
— удаленный текст

Существует шесть уровней заголовков: с по .

Результат будет выглядеть так:

2. Минимальная веб-страница

Создание веб-страницы на HTML называется версткой. А человек, который верстает страницы называется верстальщиком. Верстка имеет свои правила и сейчас мы начнем с ней знакомиться.

Чтобы создать минимальную веб-страницу достаточно в любом текстовом редакторе написать следующий текст:

Этот текст нужно сохранить с именем index.html.

Рекомендую использовать для этого редактор Geany. В этом редакторе есть шаблон для HTML5.

После этого веб-страницу можно открыть в любом браузере.

Строки минимальной веб-страницы означают следующее:

— язык страницы русский

— техническая информация о веб-странице

3. Структура веб-страницы

Для указания на структуру используются теги:

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

4. Таблицы

Таблица задается тегами:

Простая таблица выглядит так:

— начало таблицы

— начало первой строки

— конец первой строки

— начало второй строки

— конец второй строки

Текст без комментариев выглядит так:

Сама таблица будет выглядеть так:

5. Блоки, аудио и видео

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

В HTML5 рекомендуется так называемая блочная верстка. Для работы с ней используются два тега:

• — блочный элемент
• — строчный элемент.

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

Таблицы используются только для вывода табличных данных.

Ролик на YouTube

allow = «accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture» allowfullscreen >  

6. Цвета

В HTML цвет можно указать как значение RGB, используя следующую формулу:

RGB (красный, зеленый, синий)

Каждый параметр определяет интенсивность цвета от 0 до 255.

• rgb (255, 0, 0) — красный.
• rgb (0, 0, 0) — черный.

Цветовые значения RGBA являются расширением цветовых значений RGB с альфа-каналом, который определяет непрозрачность для цвета.

7. Формы

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

Пример простой формы:

Для получения данных используется тег :

• флажки
• радиокнопки —
• ввод текста —
• пароль —
• отправить форму —

и многое другое.

Полный список здесь:

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

Обязательные для заполнения поля обозначаются атрибутом required. В полях выбора можно сразу установить выбор атрибутом checked.

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

Пример формы с группировкой данных:

Источник: progtips.ru