Создание веб-сайта с использованием языка html
методическая разработка по информатике и икт (8 класс) на тему
В работе представлен материал для проведения практических работ по теме "Создание веб-сайта с использованием языка html". Всего 4 практические работы, позволяющие ученикам 7-9х классов иметь представление о структуре Веб-сайта и о тегах, с помощью которых формируется Веб-страничка. В помощь учителю прилагается презентация.
Скачать:
Вложение | Размер |
---|---|
![]() | 194.75 КБ |
![]() | 489.82 КБ |
Предварительный просмотр:
Создание веб-сайта с использованием языка html
Методическая разработка
Учителя ГБОУ СОШ №535
Г.Санктт-Петербурга
Брагиной О.А.
Практическая работа №1
- В программе блокнот создайте 1-ю страничку, не забудьте сохранить её под именем index.html
- Для просмотра страницы надо закрыть файл и открыть его в браузере
- Для редактирования файла его открывают в блокноте
Здравствуйте, это моя первая страница. Меня зовут…..
- На страничке расскажите немного о себе
- Добавьте строку заголовка, расположенную по центру, размеры заголовков могут быть разные (см. приложение)
Обо мне
- Раскрасьте текст Добро пожаловать! :) , цвет текста может быть разный (см. приложение)
- Откройте страницу в браузере и просмотрите её
- Добавьте новые страницы, для этого:
- Скопируйте текст предыдущей страницы и вставьте его на две новые страницы
- 2-ю страницу назовите family.html (моя семья)
- 3-ю страницу назовите hobby.html (мои увлечения)
- Поменяйте заголовки страниц и их содержание в соответствии с заданием
- Сохраните их
- Откройте страницы в браузере и просмотрите их поочередно.
- Покажите работу учителю
Практическая работа №2
- Добавьте на странички изображения , например
- Файлы с изображениями необходимо сохранить в одной папке с файлами страничек
- Для размещения изображения с обтеканием текста, используйте атрибуты обтекания (см. приложение)
- Сохраните страницы
- Откройте страницы в браузере и просмотрите их поочередно.
- Покажите работу учителю
Практическая работа №3
- В программе блокнот откройте файл index.html для его дальнйшего редактирования.
- Добавьте тег, отвечающий за цвет текста на странице и цвет фона (коды цвета см. в приложении):
Например
- Установите определенный размер фрагмента текста, используя тег font size
(см. приложение).
- Откройте страницу в браузере и просмотрите её.
- Поменяйте фон и цвет текста на страницах family.html (моя семья) и hobby.html (мои увлечения).
- Сохраните их.
- Откройте страницы в браузере и просмотрите их поочередно.
- Покажите работу учителю.
Практическая работа №4
Свяжем наши странички гиперссылками.
- В конце вашей главной странички поставьте две ссылки:
- На страничку «моя семья» family.html "> моя семья
- На страничку «мои увлечения» hobby.html "> мои увлечения
- На каждой странички расставьте соответствующие ссылки на главную и вторую странички.
- Сохраните их.
- Откройте страницы в браузере и проверьте ваши ссылки.
- Измените цвет ссылок (код цвета возьмите произвольный):
- Для этого установите цвета параметров link - цвет просто ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки .
- Параметры вставляем в тег <body>
link="#339999" alink="#339999" vlink="#339999">
- Посмотрите вашу работу в браузере.
- Покажите работу учителю.
Приложение
Заголовки страниц
Существуют шесть уровней заголовков:
текст
текст
текст
текст
текст
текст
Н1 – самый важный, Н6 – наименее важный. Вводя заголовки в текст, вы позволяете вашему посетителю более легко ориентироваться на странице. Заголовками вы определяете структуру внутри текста.
Установка размера текста
Заголовки предназначены для выделения небольшой части текста (строки, фразы).
Но, если вы хотите выделить большой фрагмент текста, то заголовки для этого использовать нельзя. Для этого предназначен атрибут size тэга , который устанавливает желаемый размер шрифта:
текст
текст
текст
текст
текст
текст
текст
Цвета шрифта
Цвет в языке HTML задается двумя способами: по имени и в виде шестнадцатеричного кода.
1-й способ:
По имени
white — белый
black — черный
red — красный
green — зеленый
blue — синий
2-й способ:
Цвет записывается в виде трех пар шестнадцатеричных цифр, перед которыми ставится символ #. Каждая пара цифр может принимать значения в интервале от 00 до FF (или от 0 до 255 в десятичной записи). Первая пара обозначает яркость красного (R — red), вторая и третья - яркости зеленого (G — green) и синего (B — blue) в этом цвете.
Примеры цветов в шестнадцатеричном формате:
#FFFFFF — белый
#000000 — черный
#FF0000 — красный
#00FF00 — зеленый
#0000FF — синий
Атрибуты обтекания картинки текстом
текст слева
текст справа
текст может располагаться внизу картинки (это по умолчанию)
- (1), посередине - (2), и вверху - (3):
(1) -
(2) -
(3) -
Предварительный просмотр:
Подписи к слайдам:
В программе блокнот создадим 1-ю страничку, не забудем сохранить её под именем index.html Для просмотра страницы надо закрыть файл и открыть его в браузере Для редактирования файла его открывают в блокноте
Вот текст простейшей Web-страницы на языке HTML