Урок "Создание простейшей веб-страницы"

Практическая работа № 19

Тема: «Создание простейшей Web-страницы с использованием текстового редактора».

Ход работы

1. Создайте на рабочем столе папку под своей фамилией.

2. Запустите текстовый редактор Блокнот (Пуск → Все программы → Стандартные → Блокнот)

3. Напишите общую структуру web-страницы:

1. Сохраните документ как web-страницу с именем Ваша_фамилия.html (Файл → Сохранить как… → Тип файла → Все файлы) в свою папку.

1. Не закрывая Блокнот, просмотрите созданную страницу в браузере.

2. Вернитесь в Блокнот и добавьте заголовок web-страницы

1. Сохраните страницу и обновите окно в браузере, чтобы посмотреть внесенные изменения.

2. Скопируйте текст из файла Text.doc, находящийся в папке Практическая работа № 19 и поместите в разделе body, заключив в тег 

1. Сохраните страницу и обновите окно в браузере, чтобы посмотреть внесенные изменения.

2. Скопируйте файл Foto.jpg, находящийся в папке Практическая работа № 19 в свою папку на Рабочем столе.

3. Добавьте изображение на страницу перед текстом:

1. Сохраните страницу и обновите окно в браузере, чтобы посмотреть внесенные изменения.

2. Добавим еще одну надпись и разобьем весь текст на абзацы, для этого внесите следующие изменения:

1. Сохраните страницу и обновите окно в браузере, чтобы посмотреть внесенные изменения.

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

1. Сохраните страницу и обновите окно в браузере, чтобы посмотреть внесенные изменения.

2. Установим выравнивание для абзацев, для этого установим следующие атрибуты:

1. Сохраните страницу и обновите окно в браузере, чтобы посмотреть внесенные изменения.

2. Установим для заголовка  цвет текста – синий, а для текста  - зелёный цвет и размер - 6, для этого добавим следующий код:

1. Сохраните страницу и обновите окно в браузере, чтобы посмотреть внесенные изменения:

1. Установите заливку фона страницы жёлтым цветом, для этого добавьте следующий код:

1. После текстового блока добавим таблицу следующей структуры:

1. Сохраните страницу и обновите окно в браузере, чтобы посмотреть внесенные изменения.

2. Добавим заголовок к таблице, для этого используем тег :

1. Сохраните страницу и обновите окно в браузере, чтобы посмотреть внесенные изменения.

2. Преобразуем таблицу:

• установим выравнивание таблицы по центру, размер 75% относительно окна браузера, 3-й размер границ и заливку белым цветом;

• зададим для заголовка красный цвет и размер текста 6;

• выполним заливку нечетных строк серебристым цветом;

• ширину 2-5 столбцов 22% относительно всей ширины таблицы;

• текст в первом столбце и строке выровнять по центру;

для этого добавим следующие атрибуты:

1. Сохраните страницу и обновите окно в браузере, чтобы посмотреть внесенные изменения:

1. Позовите учителя для проверки результата.

Учитель информатики МОУ "Лобановская школа" и учитель информатики и физики МОУ "Столбовская школа" Джанкойского района Республики Крым. Педагогический стаж 4,4 года. Окончил Мелитопольский Государственный Педагогический Университет имени Богдана Хмельницкого по специальности "Информатика". Квалификация по диплому "Инженер-программист". Увлечения: спорт, футбол, программирование, web-программирование.