Практическая работа № 42 Тема «Создание Web­страницы в языке HTML» Структура Web­страницы.  Большая часть тэгов образует контейнер, состоящий из открывающего и закрывающего тэгов. Тэги можно набирать как заглавными, так и строчными буквами.  Web­страница   помещается   в  контейнер    состоит  из   двух   частей:   заголовка  и  отображаемого   в браузере содержания.  Заголовок страницы помещается  в контейнер .  Заголовок содержит  название страницы, которое помещается в контейнер  и при просмотре отображается в верхней строке окна браузера.  Также в заголовок помещаются не отображаемые при просмотре мета­тэги, задающие кодировку страницы для ее правильного  отображения  в браузере,   а также  содержащие  описание  и ключевые слова  страницы,  которые  в первую очередь просматривают роботы поисковых систем.  Отображаемое в браузере содержание страницы помещается в контейнер .  Создать Web­страницу, знакомящую с основными тэгами HTML.  Работа 1. Основные тэги HTML 1. 2. Запустить текстовый редактор Блокнот командой [Пуск ­ Программы ­ Стандартные ­ Блокнот].  Ввести HTML­код, задающий структуру Web­страницы:      3. 4. Ввести команду [Файл ­ Сохранить]. Файлу Web­страницы присвоить имя ваша_фамилия.htm Запустить браузер и открыть созданный файл командой [Файл ­ Открыть]. В заголовке окна браузера  высвечивается название Web­страницы Первое знакомство с тэгами HTML. 5.  Заголовки. Внести в текст страницы после  в пустую строку тэги заголовков различных уровней (размеров).              Заголовки различных уровней:

Заголовок первого уровня

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвертого уровня

Заголовок пятого уровня

Заголовок шестого уровня

6.  Внесение изменений и дополнений в Web­страницу. В процессе создания  Web­страницы приходится добавлять новые тэги и просматривать получаемый результат.  7.   Активизировать   Блокнот  с   открытой   в   нем   редактируемой   Web­страницей.   Внести   в   содержимое   страницы необходимые изменения и сохранить новый вариант страницы, выполнив команду меню [Файл ­ Сохранить]. 8. Активизировать браузер с открытым в нем предыдущим вариантом страницы. Щелкнуть по кнопке Обновить. В окне браузера отобразится обновленная Web­страница Внести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных линий. Отделить этот фрагмент от остального текста с помощью горизонтальных разделительных линий. Разделительная линия: Запустить текстовый редактор Блокнот командой [Пуск ­ Программы ­ Стандартные ­ Блокнот]. Работа 2. Форматирование шрифта.  1. 2. Открыть файл ваша_фамилия.htm 3. Внести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных  линий. Отделить этот фрагмент от остального текста с помощью горизонтальных разделительных линий.  Разделительная линия:

---

  Форматирование шрифта: Жирный Курсив Подчеркнутый Жирный подчеркнутый курсив Равноширинный Выделение: Выделение Усиленное выделение 

---

4.  Списки.  Внести   в   текст   страницы   тэги,   задающие   списки   нумерованные   и   ненумерованные,   а   также   списки определений.   Нумерованный список:

1. Первый элемент списка
2. Второй элемент списка
3. Третий элемент списка

  Ненумерованный список: 

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

    Список определений: 

ТЕРМИН 1

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

ТЕРМИН 2

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

ТЕРМИН 3

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

5. Внесение изменений и дополнений в Web­страницу. В процессе создания  Web­страницы приходится добавлять новые тэги и просматривать получаемый результат.  6.   Активизировать   Блокнот  с   открытой   в   нем   редактируемой   Web­страницей.   Внести   в   содержимое   страницы необходимые изменения и сохранить новый вариант страницы, выполнив команду меню [Файл ­ Сохранить]. 7. Активизировать браузер с открытым в нем предыдущим вариантом страницы. Щелкнуть по кнопке Обновить. В окне браузера отобразится обновленная Web­страница  В итоге в файле имя.htm у вас должно получиться  

Заголовок первого уровня

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвертого уровня

Заголовок пятого уровня

Заголовок шестого уровня

 

---

  Жирный Курсив Подчеркнутый Жирный подчеркнутый курсив Равноширинный Выделение Усиленное выделение

---

 

1. Первый элемент списка
2. Второй элемент списка
3. Третий элемент списка

 

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

   

ТЕРМИН 1

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

ТЕРМИН 2

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

ТЕРМИН 3

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

  Работа 3. Цветовые схемы. Шрифты. Запустить текстовый редактор Блокнот командой [Пуск ­ Программы ­ Стандартные ­ Блокнот]. Сздать файл index.htm 1. 2. …   (Запусти файл в браузере) 3. Атрибуты задания цветовой схемы (цвета фона, текста и гиперссылок).  Цвет на Web­странице задают либо его названием,   либо   числовым   шести   разрядным   шестнадцатеричным   кодом   #RRGGBB  (первые   два   разряда   задают интенсивность красного цвета, вторые – зеленого и третьи – синего).  Значение яркости цвета может меняться от минимальной 00 до максимальной FF. В таблице приведены примеры некоторых цветов:  Цвет  Название     ф  б  ж  з  о  к  Код  #FF00FF  #00FFFF  #FFFF00  #FFD800  #FFA500  #A82828  Код  #000000  #FFFFFF  #FF0000  #00FF00  #0000FF  #808080  Название  black  white  red  lime  blue  gray     ч  б  к  з  с  с  Цвет  фиолетовый  бирюзовый  желтый  золотой  оранжевый  коричневый    magenta  cyan  yellow  gold  orange  brown  черный  белый  красный  зеленый  синий  серый     Основную цветовую схему Web­страницы можно задать в тэге  с помощью атрибутов:    Цвет фона  Текстура фона  Цвет текста  Цвет текста ссылки  Цвет текста активной ссылки  Цвет текста просмотренной ссылки        При использовании текстуры, закрывающей собой всю площадь страницы, применение однотонного фона кажется излишним. Однако рисунки загружаются несколько медленнее, чем текст. Все это время посетители страницы будут видеть цвет фона, заданный атрибутом BGCOLOR. Поэтому для фона указывают цвет, совпадающий с основным тоном фонового рисунка.  BGCOLOR="#RRGGBB"  BACKGROUND="file_name"  TEXT="#RRGGBB"  LINK="#RRGGBB"  ALINK="#RRGGBB"  VLINK="#RRGGBB"  Чтобы текст хорошо читался, цвета на странице подбирают контрастирующие по яркости: пастельный фон ­ темный текст, или темный фон ­ светлый текст. Нежелательны буквы белого цвета ­ они могут оказаться невидимыми при печати страницы на принтере.  Для оформления страницы можно использовать следующую цветовую схему: (после          (Сохранить файл и Обновить страничку) 1.. Запустить текстовый редактор Блокнот командой [Пуск ­ Программы ­ Стандартные ­ Блокнот]. 2. Открыть файл index.htm 3. Вставка изображений. Для размещения на Web­страницах используются графические файлы форматов GIF, JPEG и Работа 4. Вставка изображений. PNG.  Изображения   помещаются   на  Web­страницу   тэгом  IMG  с   атрибутом  SRC,   сообщающим   браузеру   имя   и местоположение графического файла.    Если рядом с изображением не должно быть текста, его размещают внутри отдельного абзаца. Выравнивание рисунка по горизонтали в этом случае задают в тэге 

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

Атрибут ALIGN выравнивает текст по верхнему краю, середине или нижнему краю изображения, справа или слева от него с помощью значений: top, bottom, middle, left или right.    4. Форматирование текста. Для выделения фрагментов текста используется тэг . Атрибут FACE определяет гарнитуру шрифта, атрибут COLOR – цвет и атрибут SIZE ­ размер символов.  Выравнивание текста по горизонтали задает атрибут ALIGN. Его возможные значения: left ­ выравнивание по левому краю center – по центру и right ­ по правому краю.  Выравнивание можно  добавлять к тэгам,  задающим заголовки,  абзацы,  или размещающим  информацию  в таблице. Выровнять по центру заголовок страницы. HSPACE, VSPACE ­ горизонтальный и вертикальный отступы между картинкой и текстом. Введем заголовки различных уровней. А это ­ заголовок нашей странички.

А   это   ­   подзаголовок   нашей   странички.

(Сохранить файл и Обновить страничку)  Выделим часть текста более крупным шрифтом и цветом и определим выравнивание  Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по левому краю.

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

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

 (Сохранить файл и Обновить страничку) Работа 5. Оформление гиперссылок. 1.. Запустить текстовый редактор Блокнот командой [Пуск ­ Программы ­ Стандартные ­ Блокнот]. 2. Открыть файл index.htm  3.   Различные   виды   гиперссылок.  Связать  Web­страницу   с   другими   документами   можно   с   помощью универсального тэга , и его атрибута HREF, указывающим в каком файле хранится вызываемый ресурс.  Указатель ссылки  file_name – путь к файлу или его URL­адрес в Интернете.  Если вызываемый документ размещается в той же папке, что и Web­страница, то можно указывать только имя файла.  Указатель ссылки в окне браузера выделяется подчеркиванием и особым цветом. При указании на него мышью, ее курсор   превращается   в   значок   «рука».   Щелчок   мыши   по   указателю,   вызывает   переход   на   документ,   указанный   в гиперссылке.  Используем различные значения атрибута HREF для реализации различных реакций браузера:  Моя вторая страничка (Сохранить файл и Обновить страничку) А теперь с оформлением выравнивания и шрифтов Исправляем предыдущую запись.   Моя вторая страничка

 (Сохранить файл и Обновить страничку) 4. Создадим вторую страничку. Для этого откроем Блокнот еще раз. И наберем в нем следующий текст.   <А HREF="index.htm">Моя первая страничка  5. Сохраним файл под именем index1.htm.  6. Запустить первый файл index.htm. Запустим гиперссылку Моя втораЯ страница. В качестве указателя ссылки можно использовать не только текст, но и изображение. В этом случае указатель ссылки задается с помощью тэга .   Пусть в нашем проекте при щелчке мышью по маленькому рисунку, вызывается ее крупная фотография. Такой прием часто используют, для снижения времени загрузки страницы. Посетитель увидит уменьшенные копии рисунков, а при желании, сможет загрузить полномасштабное изображение. Дополним нашу страничку, введем текст в пустую строку в файл index1.htm. < A HREF="carsk.jpg"> 7. (Сохранить файл и Обновить странички index.htm, index1.htm.)