Созданиe Web-страницы «Основные тэги HTML».

УЭ №1.

Создание Web – страницы «Оформления заголовка документа».

Задачи УЭ: закрепить знания по основные теги по созданию Web-страницы: HTML, тег форматирования шрифта, выравнивания абзаца.

Что сделать?

Создать документ, состоящий из 6 строк оформленных в виде заголовка 1- 6 уровня и каждая строка выполнена шрифтом: жирным, курсивом, подчеркнутым, равноширинным, выделенным и с усиленным выделением.  

Как сделать.

1. Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот].

2. Ввести HTML-код,  задающий структуру Web-страницы:

3. Сохранить данный документ, предварительно создав на диске С свою папку (имя папки – инициалы записанные латинскими буквами – IPC).  Имя документа – IPC11b1.htm

4. Запустить браузер и открыть созданный файл командой [Файл - Открыть]. В заголовке окна браузера высвечивается название Web-страницы Zagolovok с тэгами HTML.

УЭ №2.  Контроль знаний

Задачи: научится создавать простую Web- страницу, применяя, теги форматирования шрифта, выравнивания абзаца.

УЭ 3

Создание Web – страницы «Списки».

Задачи : изучить и закрепить теги по созданию списков и разделительной линии.

Что делать?

Создать документ, в котором присутствуют списки и разделительная линия.

Как сделать.

1. Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот].

2. Ввести HTML-код,  задающий структуру Web-страницы:

OL>

• Первый элемент списка
• Второй элемент списка
• Третий элемент списка

ТЕРМИН 1

Пояснение к термину 1

ТЕРМИН 2

Пояснение к термину 2

ТЕРМИН 3

Пояснение к термину 3

3 .Ввести команду [Файл - Сохранить]. Файлу Web-страницы присвоить имя  IPC11b2.htm

4.Запустить браузер и открыть созданный файл командой [Файл - Открыть]. В заголовке окна браузера высвечивается название Web-страницы Первое знакомство с тэгами HTML.

УЭ4 Создание  документа «Устройства ввода вывода вида» .

Задачи : на практике показать умения по представлению информации на Web-странице в виде списка.

УЭ 5Создание Web – страницы «Таблица погоды».

Задачи УЭ5: изучить и закрепить теги по созданию таблицы, строки, столбца.

Что делать?

Создать документ, в котором информация представлена  в виде таблицы о погоде по дням недели.

Как сделать.

УЭ 6 Создание  документа «Таблица кодов» .

Задачи : на практике показать умения по представлению информации на Web-странице в виде таблицы.

УЭ 7Создание Web – страницы «Атрибуты».

Задачи УЭ7: изучить и закрепить служебные слова –атрибуты, теги форматирования текста, создания фона документа, цвета текста, гиперссылки..

Что делать?

Создать документ, в котором информация представлена  на цветном фоне разным цветом..

Как сделать.

 

Атрибут выравнивания – align. Данный атрибут может принимать значения:

 

align ="center"- выравнивание по центру;

align="right"- выравнивание по правому краю;

align="left"- выравнивание по левому краю

Задание шрифта и установите  цвета шрифта.

Для выделения фрагментов текста используется тэг . Атрибут FACE определяет гарнитуру шрифта, атрибут COLOR – цвет и атрибут SIZE - размер символов.  color="#..." изменяет цвет шрифта (вместо многоточия указывается назва¬ние цвета на английском языке или его шестнадцатеричный код).

 

УЭ 8 Создание  документа «Атрибуты текста. Управление цветом» .

Задачи : на практике показать умения по применять теги «Атрибуты текста» .

Что сделать

Как сделать

Цвета и изображения фона задаются с помощью команды . Эта команда может задаваться только в начале HTML файла и не может быть изменена в дальнейшем. Ее параметры: bgcolor = “# код цвета” - цвет фона документа, text = “# код цвета” - цвет текста документа, link = “# код цвета” - цвет текста, используемого в качестве ссылки, vlink = “# код цвета” - цвет ссылки на просмотренный ранее документ, alink = “# код цвета” - цвет ссылки в момент нажатия на нее правой кнопки мыши. Код цвета задается в кодировке RGB - шесть шестнадцатеричных чисел. Белый = FFFFFF Малиновый = FF00FF Желтый = FFFF00 Бирюзовый = 008080 Красный = FF0000 Темно-синий = 000080 Серый = 808080 Коричневый = 808000 Синий = 0000FF Голубой = 00FFFF Зеленый = 00FF00 Темно-зеленый = 008000, Черный = 000000 Индиго = 800080 Пурпурный = CC33FF Темнокрасный = 800000 Для изменения цвета текущего текста можно в любом месте домашней страницы воспользоваться командами: Текущий текст Определено несколько именованных цветов. Их значения видны из таблицы: Если Вы хотите создать “обои”, то есть цветной фон с использованием 8301_ - файла с именем, например, Ground.gif, то вместо параметра BGCOLOR записываем: BACKGROUND = “Ground.gif” Если при этом вы хотите, чтобы фоновое изображение не двигалось, т.е. чтобы создался эффект “водяных знаков”, то задайте дополнительный параметр: BACKGROUND = “Ground.gif” BGPROPERTIES=FIXED

Использовать порядок создания  Web – страницы  описанный в УЭ 7

5(а) задание.

Создание Web – страницы «Вставка изображений».

Вставка изображений

---

Для размещения на Web-страницах изображений используются графические файлы фор-матов GIF, JPEG и PNG.

Изображения помещаются на Web-страницу тэгом IMG с атрибутом SRC, сообщающим браузеру имя и местоположение графического файла.

IMG SRC="image_name"

Если рядом с изображением не должно быть текста, его размещают внутри отдельного абзаца. Выравнивание рисунка по горизонтали в этом случае задают в тэге (P). Размеры изображения (в пикселах) можно задать с помощью атрибутов  WIDTH и HEIGHT. К изображению атрибутом ALT можно добавить название, которое появляется на экран.

5* задание.

По аналогии создания Web – страницы  «Вставка изображения».

По аналогии создания Web – страницы  «Вставка изображения». Создайте Web-документ вида.

Устройство персонального компьютера. 
Компьютер состоит из системного блока (корпус), монитора, клавиатуры, мышки. Все остальные устройства, подключаемые к системному блоку (принтер, сканер и т.п.), называются периферийными. Монитор, клавиатура, мышка - это устройства ввода/вывода информации.(картинка –Komn.png)

6(а) задание.

Создание Web – страницы «Вставка гиперссылки».

Различные виды гиперссылок. Связать Web-страницу с другими документами можно с помощью универсального тэга , и его атрибута HREF, указывающим в каком файле хранится вызываемый ресурс.

Указатель ссылки

Задание.

1.Откройте Web – страницe  «Вставка изображения». Добавите строку

  Атрибуты

(

Атрибуты

2. Сохраните документ

3. Откройте Web – страницe  «Атрибуты». Добавите строку

  Вставка изображения

4. Сохраните документ.

5. Запустите на исполнение любой документ.