1 Практическая работа Тема: «Создание html-документа в текстовом редакторе» Цель: формирование у обучающихся профессиональных компетенций создания, редактирования и форматирования html-документа при выполнении практического задания. ! Иллюстрации к практической работе находятся в сетевой папке: Задание 1: Создание простейшей Web-страницы 1) Создайте на Рабочем столе папку с именем Сайт_ФИО. 2) Скопируйте изображения (background.jpg, computer.png, struktura.jpg) из папки «Материалы Html» в созданную папку Сайт_ФИО. 3) Откройте текстовый редактор Блокнот: Пуск → Все программы → Стандартные → Блокнот. 4) Наберите в нем структуру HTML-документа:
Все о компьютере
2 Результат:
Все о компьютере
Все о компьютере
3 <р align="left"> Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.
<р align="right"> Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. Должен получиться данный код:
Все о компьютере
Нa этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.
Терминологический словарь познакомит вас с компьютерными терминами , а также вы сможете заполнить анкету.
4 4) Расположите рисунок по правому краю текста: 5) Установите для рисунка параметры ширины и высоты. За это отвечают атрибуты width и height. Вставьте в структуру тега img атрибуты: width="400" height="300".
Все о компьютере
Нa этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.
Терминологический словарь познакомит вас с компьютерными терминами , а также вы сможете заполнить анкету.
5 Задание 4: Вставка фоновой картинки для сайта 1) Скачайте подходящий по тематике сайта фоновое изображение или возьмите картинку с названием background.jpg в папке «Материалы Html» и переместите его в папку с файлом index.htm. 2) Запишите в теле структуры веб-страницы дескриптор работы с фоном:
3) В итоге должен получиться следующий код:
Все о компьютере
На сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и компьютерных комплектующих
Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.
6 Задание 5: Создание простейшей гиперссылки 1) Создайте пустые страницы «Программы», «Словарь», «Комплектующие» и «Анкета» и сохраните их в файлах с именами software.html, glossary.html, hardware.html и anketa.html в каталоге сайта. 2) Внесите на пустые страницы структуру веб-страницы с соответствующим заголовком. 3) Вставьте в титульную страницу index.htmlкод, создающий панель навигации:
7 <р align="left"> [<а href="software.html"> Программы ] [ Словарь ] [ Комплектующие ] [ Анкета ] 4) Отредактируйте шрифт и размер текста в панели навигации: … 5) Просмотрите через браузер полученную веб-страницу и проверить работу гиперссылок. Результат: 6) Создайте панель навигации на всех страницах. Задание 6: Создание ссылки на свою электронную почту 1) Откройте главную страницу index.html. 2) Вставьте код, создающий ссылку на адрес электронной почты:
<а href="mailto: ваш адрес электронной почты"> e-mail: ваш адрес электронной почты
3) Сохраните файл index.html (CTRL+S).
8 Результат выполнения:
Все о компьютере
Нa этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.
Терминологический словарь познакомит вас с компьютерными терминами , а также вы сможете заполнить анкету.
9 Задание 7: Создание таблицы на языке HTML 1) Откройте файл hardware.html через текстовый редактор Блокнот. 2) Присвойте название документу «Аппаратное обеспечение ПК», прописав соответствующий тег в разделе : 3) Оформите заголовок первого уровня html-документа «Структурно- функциональная схема компьютера», установите его по центру в структуре тега …
Структурно-функциональная схема компьютера
10
№ п/п
ОСНОВНЫЕ ТЕХНИЧЕСКИЕ ХАРАКТЕРИСТИКИ ПК
ОТ ЧЕГО ЗАВИСИТ ХАРАКТЕРИСТИКА
1
Тип процессора (система команд)
От используемой материнской платы
2
Быстродействие (тактовая частота и разрядность процессора и системной шины
От процессора
3
Объем, тип оперативной памяти и возможность её наращивания (количество подключаемых модулей)
От используемой материнской платы
4
Объем внешней памяти, число и типы встроенных дисководов
От вида корпуса компьютера
6) Закончите таблицу, внеся данные: № п/п Основные технические характеристики ПК От чего зависит характеристика 1 Тип процессора (система команд) От используемой материнской платы 2 Быстродействие (тактовая частота и разрядность процессора и системной шины) От процессора 3 Объем, тип оперативной памяти и возможность её наращивания (количество подключаемых модулей) От используемой материнской платы 4 Объем внешней памяти, число и типы встроенных дисководов От вида корпуса компьютера 5 Объем видеопамяти графического адаптера, цветовая палитра (глубина цвета) и разрешающая способность От используемой материнской платы 6 Тип дисплея, размер и разрешающая способность От технологии, которая была применена при создании 7 Номенклатура и типы портов ввода-вывода От используемой материнской платы 8 Состав дополнительного оборудования (звуковая плата, модем, сетевая карта) От используемой материнской платы 9 Количество слотов расширения на системной плате От используемой материнской платы 10 Мощность блока питания От используемой материнской платы 11 Эргономика и комфорт работы с мышью и клавиатурой От задумки дизайнера 12 Дизайн и тип корпуса системного блока От задумки дизайнера, от используемой материнской платы 13 Возможность модернизации компьютера От используемой материнской платы и типа корпуса компьютера 14 Надежность (наработка на отказ) компьютера От надежности его комплектующих и количества, от пользователя компьютера
11 15 Соответствие современным санитарным нормам и требованиям электробезопасности От руководителя организации, от работающего за данным рабочим местом 16 Состав и полнота сопроводительной технической документации От изготовителя 17 Гарантийные обязательства производителя и поставщика От используемой материнской платы и типа корпуса компьютера Результат выполнения: Задание 8: Создание нумерованных списков 1) Откройте в Блокноте файл software.html. 2) Добавьте следующий HTML-код, задающий нумерованный список:
Системные программы
Прикладные программы
Системы программирования
Данный код задает нумерацию арабскими цифрами (1, 2, 3…). 3) Создайте вложенный нумерованный список для элемента основного списка «Прикладные программы». Вставьте данный код под пунктом «Прикладные программы»:
Текстовые редакторы
Графические редакторы
12
Электронные таблицы
Системы управления базами данных
Данный код задает нумерацию римскими цифрами (I, II, III, IV…). 4) Для изменения размера шрифта всего документа используйте тег size=4pt>…. 5) Для создания заголовка к спискам добавьте следующий код:
ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ
. Результат: Задание 9: Создание маркированных списков 1) Расширьте список «Системные программы», используя маркированные списки:
Базовое системное программное обеспечение
ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ
Системные программы
Прикладные программы
Текстовые редакторы
Графические редакторы
Электронные таблицы
Системы управления базами данных
Системы программирования
13
Сервисное системное программное обеспечение
Данный код задает маркированный список в виде закрашенных дисков. 2) Расширьте список «Системы программирования», используя в качестве маркера «окружность», следующим образом: Системы программирования o Turbo Pascal o Free Pascal o Visual Basic o C++ Для этого тегу
задайте атрибут type со значением “circle”:
Turbo Pascal
Free Pascal
Visual Basic
C++
3) Расширьте пункты «Системные программы», «Прикладные программы», используя разные типы списков и маркеров (вид маркера списка: "disc" (диск), "square" (квадрат), "circle" (окружность)). Например: 1. Системные программы: Базовое системное программное обеспечение I. Операционные системы II. Операционные оболочки Сервисное системное программное обеспечение I. Программы проверки поверхности диска II. Дефрагментация диска III. Антивирусные программы 2. Прикладные программы Текстовые редакторы Графические редакторы Электронные таблицы Системы управления базами данных 3. Системы программирования o Turbo Pascal o Free Pascal o Visual Basic o С++ Результат:
14 4) Сохранить файл software.html (CTRL+S). Задание 10: Добавление списка определений 1) Страницу «Словарь» представьте в виде словаря компьютерных терминов. Откройте в Блокноте файл glossary.htm, введите заголовок «Компьютерные термины» и добавьте следующий HTML-код, задающий список определений:
Устройство, в котором хранятся программы и данные.
Используется контейнер списка определений . Внутри него текст оформляется в виде термина, который выделяется непарным тэгом
, и определения, которое следует за тэгом
. Результат:
15 Задание 11: Создание текстовых полей для ввода данных 1) Выясните имя посетителя сайта и его электронный адрес, чтобы иметь возможность ответить ему на замечания и поблагодарить за посещение сайта Откройте в Блокноте файл anketa.html и добавьте HTML-код, создающий текстовые поля для ввода данных.
На форме отображаются два однострочных текстовых поля для ввода ин- формации. Текстовые поля создаются с помощью тэга со значением атрибута TYPE="text". Атрибут NAME является обязательным и служит для идентификации полученной информации. Значением атрибута SIZE является число, задающее длину поля ввода в символах. 2) Просмотрите страницу в браузере: Задание 12: Создание группы переключателей 3) Выясните, к какой группе пользователей относит себя посетитель. Предложите выбрать ему один из нескольких вариантов: учащийся, студент, учитель. Добавьте HTML-код на страницу anketa.html, создающий группу переключателей для выбора одного варианта определения к какой группе пользователей относит себя посетитель. Укажите, к какой группе пользователей вы себя относите: учащийся студент
16 name="group" value="teacher"> учитель Создается группа переключателей с помощью тэга со значением атрибута TYPE="radio". Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например, NAME="group". Еще одним обязательным атрибутом является VALUE, которому присваиваются значения "schoolboy", "student" и "teacher". Значение атрибута VALUE должно быть уникальным для каждой «радиокнопки», так как при ее выборе именно они передаются серверу. 4) Просмотрите страницу в браузере: Задание 13: Создание флажков 1) Выясните, какими сервисами Интернета посетитель пользуется наиболее часто. Из предложенного перечня он может выбрать одновременно несколько вариантов, пометив их флажками. Добавьте HTML-код на страницу anketa.html, создающий флажки для выбора нескольких вариантов на странице anketa.html. Какие из сервисов Интернета вы используете наиболее часто: www e-mail ftp Флажки создаются в тэге со значением атрибута TYPE="checkbox". Флажки, объединенные в группу, могут иметь одинаковые значения атрибута NAME. Например, NAME="group". Еще одним обязательным атрибутом является VALUE, которому присвоим значения "www", "e-mail" и "ftp". Значение атрибута VALUE должно быть уникальным для каждого флажка, так как при его выборе именно они передаются серверу.
17 2) Просмотрите страницу в браузере: Задание 14: Создание раскрывающихся списков 1) Выясните, какой из браузеров предпочитает посетитель сайта. Перечень браузеров представьте в виде раскрывающегося списка, из которого можно выбрать только один вариант. Добавьте HTML-код на страницу anketa.html, создающий раскрывающийся список для выбора одного варианта.
Для реализации раскрывающегося списка используется контейнер , в котором каждый элемент списка определяется тэгом
18 Задание 15: Создание текстовой области для ввода комментариев 1) Поинтересуйтесь, что хотел бы видеть посетитель на страницах, какую ин- формацию следовало бы в них добавить. Так как мы не можем знать заранее, насколько обширным будет ответ читателя, необходимо отвести для него текстовую область с линейкой прокрутки. В такое поле можно ввести достаточно подробный текст. Добавьте HTML-код, создающий текстовую область для ввода комментариев. Какую еще информацию вы хотели бы видеть на нашем сайте?
Скачать 1.51 Mb.
