Разработка открытого урока на тему "Глобальная сеть "

Глобальная компьютерная вычислительная сеть Интернет-страница и редакторы для ее создания

Подготовила преподаватель Информатики и ИКТ

Козловская Оксана Владимировна

Содержание

• World Wide Web
• Web-технология
• Создание HTML-документа
• Структура языка HTML

• Содержание элемента Body
• Содержание элемента Body

• Абзац в Html-документе Заголовок Параметры текста
• Абзац в Html-документе Заголовок Параметры текста
• Абзац в Html-документе
• Заголовок
• Параметры текста
• Практическая часть

World Wide Web (WWW)

• Глобальная сеть Интернет представляет собой совокупность узлов, объединенных между собой каналами связи. Каждый узел ( хост ) содержит один или несколько мощных компьютеров-серверов. Управляет узлом организация-собственник – провайдер
• World Wide Web – глобальная компьютерная сеть – на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация.
• Для навигации в WWW используют специальные программы – браузеры. Вся информация в браузере отображается в виде web-страниц сайтов.

• Mozilla Firefox
• Yandex. Браузер
• Google Chrome
• Internet Explorer

World Wide Web (WWW)

Каждый компьютер в сети имеет свой уникальный IP-адрес , состоящий из 4-х байтов (4-х десятичных чисел в интервале от 0 до 255, разделенных точкой). Адрес читается справа налево :

128.250.33.199

адресы сетей и подсетей

адрес компьютера пользователя

WEB-технология

• позволяет связать всю совокупность опубликованных в Интернете документов в единую систему WWW с помощью гиперссылок

Создание HTML-документа

• Язык HTML не является языком программирования, это средство описания структуры документа, его стиля и связей его с другими документами.

Структура языка HTML

• Язык разметки документов – это набор специальных инструкций, называемых тегами, которые предназначены для формирования в документах какой-либо структуры
• Теги – это последовательность символов, заключенных между знаками .Все, что заключено между тегами и называется html-документом.

Структура языка HTML :

• заголовок и описание документа

текст 

 -  начинает и заканчивает любой HTML-документ . 

 - формирования структуры документа.

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

• Установка «обоев»:
• Установка «обоев»:

• Установка цвета фона: ,
• Установка цвета фона: ,

• Установка цвета выводимых символов: .
• Установка цвета выводимых символов:
• .

Содержание элемента BODY

10

10

Абзац в HTML-документе

• Текст абзаца

• Текст абзаца

  , где значением атрибута align могут быть:

• center - по центру,
• left - по левому краю, (задается по умолчанию),
• right - по правому краю,
• justify - по ширине.

Пример

10

Абзац

Примеры форматирования абзаца

Выравнивание текста по левому краю

Выравнивание текста по правому краю

Данный текст, если он будет достаточно длинным, покажет нам как можно выровнять текст по ширине страницы. Если текст короткий, то он просто выравнивается по левому краю.

Заголовок в HTML-документе

10

• Для размещения на Web-странице  заголовков и подзаголовков используется тэг Текст заголовка ,

где вместо многоточия ставится номер уровня заголовка в порядке возрастания от 1 до 6. Выравнивание заголовков производится с помощью уже известного атрибута align.

Пример:

Форматирование текста Работа с текстом

Примеры форматирования заголовков

… ) color - выделение текста некоторым цветом . face – шрифт ( … ) size – размер шрифта ( font size=7… ) color - выделение текста некоторым цветом . Цвет текста можно задать двумя способами: А) написать английское название цвета, например, … или …, Б) задать шестнадцатеричный код цвета в формате “#FF0000” - красный или “#505050”, например, … Размер шрифта +2 (-2) означает, что размер шрифта требуется увеличить (уменьшить) на 2 условных единицы относительно текущего размера. Этот способ удобно применять, когда необходимо выделить небольшой фрагмент текста и вернуться к исходному размеру шрифта. 10 " width="640"

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

10

• Текст
• Параметры атрибутов:

• face – шрифт ( … ) size – размер шрифта ( font size=7… ) color - выделение текста некоторым цветом .
• face – шрифт ( … )
• size – размер шрифта ( font size=7… )
• color - выделение текста некоторым цветом .
• Цвет текста можно задать двумя способами:

А) написать английское название цвета, например,

… или …,

Б) задать шестнадцатеричный код цвета в формате “#FF0000” - красный или “#505050”, например,

…

Размер шрифта +2 (-2) означает, что размер шрифта требуется увеличить (уменьшить) на 2 условных единицы относительно текущего размера. Этот способ удобно применять, когда необходимо выделить небольшой фрагмент текста и вернуться к исходному размеру шрифта.

10

Таблица базовых цветов BgColor

10

10

• Средства выделения текста (жирность, курсив, подчеркивание и их комбинации).

… - жирный (bold);

… - курсив (italic);

… - подчеркивание (underline).

• Комбинация: Жирный курсив с подчеркиванием

Пример

10

Пример форматирования текста Текст напечатан крупно, красивым шрифтом и только одно слово выделено красным

Практическая часть

Создать Web-страницу, на которой разместить текст стихотворения Сергея Есенина

“ Да! Теперь решено. Без возврата ”, отформатированный соответственно заданию

Текст

Действие

Заголовок

Теги HTML

Заголовок I уровня( по центру)

Подзаголовок(автор)

Заголовок II уровня( по пр.краю)

…

1 абзац

Шрифт Impact

…

2 абзац

Шрифт Monotype Corsiva

3 абзац

Шрифт Arial

4 абзац (по две строки)

Начертание “Полужирный”

5 абзац

Начертание “Курсив”

…

Каждая строка разного размера от 1 до 7

6 абзац

…

Каждая строка разного цвета

Начертание “Подчеркнутый”

7 абзац,  кроме последней строки

По две строки попеременно выравнивание по левому и по правому краю.

…

…

…

…