Набор практических работ для 11-х классов по WEB - программированию и дизайну состоит из 7 работ, которые включают в себя как и теоретический материал, на основе которого ребенок будет выполнять задания по практике. Некоторый материал взят из курса профессиональных учебных заведений. Работы расположены по возрастанию сложности. Последнии две работы на самостоятельную работу - проверка усвоеногого материала.
Вы уже знаете о суперспособностях современного учителя?
Тратить минимум сил на подготовку и проведение уроков.
Быстро и объективно проверять знания учащихся.
Сделать изучение нового материала максимально понятным.
Избавить себя от подбора заданий и их проверки после уроков.
Создать текстовый документ «Дневник» с гиперссылками, соблюдая следующую структуру:
Оглавление (содержание)
Учителя (в таблице)
Список класса
Факультативы\секции
Расписание (в таблице)
Оценки (в таблице как в настоящем дневнике)
Оценки за полугодия (таблица)
Пожелания в конце учебного года (вставка картинок)
Задание 2
После объяснения преподавателя, создать несколько Html документов (с помощью программы Word), связанных между собой гиперссылками, по предыдущей структуре (материал взять из задания 1).
Обязательно вставить изображения (находятся в папке «Img»), желательно как ссылки между страницами использовать кнопки (вставка автофигур).
Переход между страницами должен осуществляться как вперед, так и назад.
Не забывайте о том, что у любой структуры есть «страница содержания» - главная страница, с которой осуществляются все ссылки!
Просмотр содержимого документа
«практика №2»
Практическая работа №2
Задание 1. Создание пробной Web-страницы
Мы будем создавать Web-страницу, используя простейший текстовый редактор Блокнот.
1.
Запустите текстовый редактор Блокнот [Пуск – Все программы - Стандартные - Блокнот].
2.
Напишите следующий HTML-код:
3.
Сохраните файл в своей папке, выполнив команду: Файл – Сохранить
1. В появившемся диалоговом окне введите имя файла proba.htm 2. В списке Тип файла выберите Все файлы 3. Нажмите кнопку Сохранить
4.
ЗапуститебраузерMicrosoft Internet Explorer [Пуск – Всепрограммы - Internet Explorer].
5.
Выполните команду Файл – Открыть. Найдите и откройте только что сохраненный вами файл proba.htm.
Вывод
Вы загрузили в браузер страницу proba.htm, HTML-код которой только что написали в Блокноте. Вы увидите, что в заголовке окна браузера (в левом верхнем углу) высвечивается надпись Моя первая Web-страничка, а основная часть окна браузера – пуста.
Задание 2. Внесение изменений и добавлений в Web-страницу
Мы будем добавлять текст на Web-страничку, помещая его в контейнер
Просмотр содержимого документа
«практика №3»
Практическая работа №3
Задание 1. Цветовые схемы. Шрифты.
1.
Откройте proba.htm через блокнот
Ознакомьтесь с нижней таблицей:
Цвет фона
BGCOLOR="#RRGGBB"
Текстура фона
BACKGROUND="file_name"
Цвет текста
TEXT="#RRGGBB"
Цвет текста ссылки
LINK="#RRGGBB"
Цвет текста активной ссылки
ALINK="#RRGGBB"
Цвет текста просмотренной ссылки
VLINK="#RRGGBB"
Скопируйте файл 2.jpg из папки \web-практика\img\BACKGROUND к себе в папку.
В файле proba.htm измените следующий код:
Сохраните и откройте в браузере.
Подберите из этой же папки понравившийся фон, и цвет текста и ссылок (палитру можно посмотреть в файле Цветовая схема.doc)
Вывод
Мы научились устанавливать цвет фона, текстуру фона, цвет шрифта обычного текста и ссылок.
Задание 2. Вставка изображений.
1.
Откройте proba.htm через блокнот.
2
Для размещения на Web-страницах используются графические файлы форматов GIF, JPEG и PNG.
3
Изображения помещаются на Web-страницу тэгом IMG с атрибутом SRC, сообщающим браузеру имя и местоположение графического файла.
IMGSRC="image_name"
4
Если рядом с изображением не должно быть текста, его размещают внутри отдельного абзаца. Выравнивание рисунка по горизонтали в этом случае задают в тэге P. Размеры изображения (в пикселах) можно задать с помощью атрибутовWIDTH и HEIGHT.К изображению атрибутом ALT можно добавить название, которое появляется на экран или вместо иллюстрации (если по какой - либо причине графика не выводится в окне браузера), или в качестве всплывающий строки, при указании на рисунок мышью.
5
Атрибут ALIGN выравнивает текст по верхнему краю, середине или нижнему краю изображения, справа или слева от него с помощью значений: top, bottom, middle, left или right.
6
Вставить в начале страницы картинку.
7
Подберите из этой же папки понравившуюся картинку – поменяйте код. Сохраните и откройте в браузере.
8
Также можно менять цвет и центрование текста внутри кода, а не в начале.
Попробуйте вставить код после вставки изображения, и посмотрите что получится:
9
Выделим часть текста более крупным шрифтом и цветом и определим выравнивание
10
Измените на уместные фразы, сохраните и откройте в браузере. Покажите преподавателю!
Вывод
Мы научились вставлять изображение и менять стиль текста внутри кода.
Задание 3. Оформление гиперссылок.
1.
Откройте proba.htm через блокнот
2
Различные виды гиперссылок. Связать Web-страницу с другими документами можно с помощью универсального тэга A, и его атрибута HREF, указывающим в каком файле хранится вызываемый ресурс.
file_name – путь к файлу или его URL-адрес в Интернете. Если вызываемый документ размещается в той же папке, что и Web-страница, то можно указывать только имя файла.
Указатель ссылки в окне браузера выделяется подчеркиванием и особым цветом. При указании на него мышью, ее курсор превращается в значок «рука». Щелчок мыши по указателю, вызывает переход на документ, указанный в гиперссылке.
3
Вставить после рисунка код
4
А теперь с оформлением выравнивания и шрифтов Исправляем предыдущую запись.
5
Создадим вторую страничку. Для этого откроем Блокнот еще раз. И наберем в нем следующий текст.
6
Сохраним файл как proba2.html и откроем через браузер. Опробуйте работу гиперссылок.
7
В качестве указателя ссылки можно использовать не только текст, но и изображение. В этом случае указатель ссылки задается с помощью тэга .
8
Добавьте после большой центральной картинки следующий код:
9
10
Сохраните файл и откройте его через браузер. Покажите работу преподавателю.
Вывод
Мы научились создавать текстовые ссылки и ссылки от изображений.
Просмотр содержимого документа
«практика №4»
Практическая работа №4
Задание 1. Создание таблиц
1.
Создайте через блокнот файл index.html.
Введите следующий код, сохраните, и посмотрите через браузер – что получилось.
2
3
Прочитайте материал ниже и создайте таблицу с вашим расписанием на неделю.
4
Атрибуты метки TABLE не обязательны. По умолчанию, таблица выводится без рамки. Как правило, размер ячеек таблицы устанавливается автоматически, чтобы наилучшим образом разместить содержимое, однако можно установить ширину таблицы с помощью атрибута WIDTH. Атрибуты BORDER, CELLSPACING и CELLPADDING предоставляют дополнительные возможности для контроля за внешним видом таблицы. Заголовок размещается над или под таблицей в зависимости от значения атрибута ALIGN.
Горизонтальный ряд ячеек определяется элементом TR, закрывающая метка не обязательна. Ячейки таблицы определяются элементами TD (для данных) и TH (для заголовков). Как и TR, эти элементы могут не иметь закрывающей метки. TH и TD могут включать несколько атрибутов: ALIGN и VALIGN для выравнивания содержимого ячейки, ROWSPAN и COLSPAN для указания того, что ячейка занимает более одного горизонтального ряда или колонки. Ячейка таблицы может содержать другие элементы уровня блока и текста, включая формы и другие таблицы.
Для элемента TABLE обязательны открывающая и закрывающая метки. Допустимые атрибуты:
align
Допустимые значения: LEFT, CENTER и RIGHT. Определяет положение таблицы по отношению к полям документа. По умолчанию установлено выравнивание по левому краю, но это можно изменить путем включения в документ элемента DIV или CENTER.
DIV и CENTER
Элементы DIV можно использовать для разбиения HTML-документа на несколько разделов (англ. division — раздел). Для указания горизонтального выравнивания внутри элемента DIV можно использовать атрибут ALIGN с допустимыми значениями LEFT, CENTER и RIGHT (аналогично принятому для абзацев
).
Обратите внимание: элемент DIV по определению закрывает открытый абзац P. За исключением этого случая, браузеры не показывают элемент DIV на экране. Элемент
полностью равнозначен . В элементах DIV и CENTER обязательны открывающие и закрывающие метки.
width
При отсутствии этого атрибута ширина таблицы определяется автоматически в зависимости от содержимого. Атрибут WIDTH можно использовать для установки фиксированной ширины в пикселах (например, WIDTH=212) или в процентах от пространства между левым и правым полем (например, WIDTH="80%").
border
Используется для указания ширины внешней окантовки таблицы в пикселах (например, BORDER=4). Значение можно установить равным нулю, в результате чего окантовка не будет видна. В отсутствие этого атрибута окантовка также не должна показываться на экране. Обратите внимание: некоторые браузеры воспринимают метку
точно так же, как BORDER=1.
cellspacing
В традиционном издательском программном обеспечении расположенные рядом ячейки таблицы имеют общую окантовку. В HTML это не так. Каждая ячейка имеет собственную окантовку. Ширина окантовки ячейки в пикселах устанавливается атрибутом CELLSPACING (например, CELLSPACING=10). Этот атрибут также устанавливает расстояние между окантовкой таблицы и окантовками крайних клеток таблицы.
cellpadding
Устанавливает расстояние между окантовкой ячейки таблицы и содержимым ячейки.
Элемент CAPTION может иметь один атрибут ALIGN со значением ALIGN=TOP или ALIGN=BOTTOM. Соответственно, заголовок таблицы показывается либо над, либо под таблицей. Большинство браузеров по умолчанию показывают заголовок над таблицей. Открывающая и закрывающая метки обязательны. В заголовках тыблиц не разрешаются элементы уровня блока.
Элемент TR открывает описание строки таблицы. Закрывающая метка не обязательна. Имеет два стрибута:
align
Устанавливает горизонтальное выравнивание в ячейках строки. Допустимые значения: LEFT, CENTER и RIGHT. Действие аналогично атрибуту ALIGN у абзацев.
valign
Устанавливает вертикальное выравнивание в ячейках строки. Допустимые значения: TOP, MIDDLE и BOTTOM; содержимое ячеек при этом выравнивается по верхнему краю, по центру или по нижнему краю.
Существует два элемента, определяющих ячейки таблицы. TH используется для ячеек-заголовков, а TD - для ячеек с данными. Открывающие метки обязательны, закрывающие - нет. Ячейки могут иметь следующие атрибуты:
nowrap
Этот атрибут запрещает автоматический перевод текста со строки на строку внутри ячейки таблицы (например,
). Эффект применения этого атрибута аналогичен использованию объекта вместо пробела по всему содержимому ячейки.
rowspan
Используется с положительным целым значением числа строк таблицы, занятых ячейкой. По умолчанию принято равным единице.
colspan
Используется с положительным целым значением числа колонок таблицы, занятых ячейкой. По умолчанию принято равным единице.
align
Указывает принятое по умолчению выравнивание содержимого ячейки. Имеет приоритет над значением, установленным атрибутом ALIGN строки таблицы. Допустимые значения те же самые: LEFT, CENTER и RIGHT. Если атрибут ALIGN не указан, принятое по умолчанию выравнивание - по левому краю для
и по центру для
, однако это можно изменить установкой атрибута ALIGN элемента TR.
valign
Указывает принятое по умолчению выравнивание содержимого ячейки. Имеет приоритет над значением, установленным атрибутом ALIGN строки таблицы. Допустимые значения те же самые: TOP, MIDDLE и BOTTOM. Если атрибут VALIGN не установлен, по умолчанию принято выравнивание по центру, однако это можно изменить установкой атрибута VALIGN элемента TR.
width
Указывает рекомендуемую ширину содержимого ячейки в пикселах. Значение используется только в случаях, когда оно не противоречит требованиям к ширине других ячеек в колонке.
height
Указывает рекомендуемую высоту содержимого ячейки в пикселах. Значение используется только в случаях, когда оно не противоречит требованиям к высоте других ячеек в строке.
Таблицы, как правило, показываются на экране "приподнятыми" над поверхностью страницы, а ячейки - "вдавленными" в тело таблицы. Ячейки выделяются окантовкой только если в них есть содержимое. Если содержимое ячейки состоит только из пробелов, ячейка считается пустой, за исключением случаев, когда в ней есть хотя бы один объект .
5
Сохраните и откройте в браузере.
Вывод
Мы научились создавать таблицы.
Просмотр содержимого документа
«практика №7»
Практическая работа №6
Выполните письменно в тетради:
Найти музеи в городе – названия и адреса.
Супермаркеты, находящиеся в радиусе 1 км от указанного места:
Бр.Кашириных 100,
Цвиллинга 8,
Солнечная 44
Пр.Победы 73
Барбюса 50
Пр.Ленина 63
Аптеки, находящиеся в радиусе 3 км. От указанного места:
Плеханова 3
Российская 145
Свободы 30
Овчинникова 4
С.Юлаева 69
Сколько Сбер.Банков находится в:
Центральном районе
Калининском районе
Ленинском районе
ЧТЗ
Какая фирма или заведение находится по адресу Цвиллинга 15?
На каком транспорте можно доехать от:
Синегорья до ЮуРГУ?
ЮуРГУ до зоопарка?
театра ЧТЗ до Авроры?
ЧТПЗ до обл.больницы?
Сколько троллейбусов идет от:
гор. больницы до Синегорья?
Комсомольской площади до ЧТЗ?
ПКиО до Евтеева?
Адреса Киномаксов в городе?
Сколько ресторанов японской кухни в центральном районе?
Если я нахожусь по адресу Воровского 7, где поблизости я могу отремонтировать телефон?