Практика_8_Создание WEB-странички (HTML)

Практическая работа № 8
СОЗДАНИЕ ПРОСТЕЙШЕЙ WEB-СТРАНИЧКИ

Цель работы:
Приобретение практических навыков в области WEB-дизайна и в разработке различного рода документацию с помощью языка разметки гипертекста HTML с последующей публикацией ее на глобальной компьютерной сети INTERNET.
Для выполнения практических заданий потребуются:
1. Броузер, т.е. программа, пригодная для просмотра HTML-файлов. (Internet Explorer или Netscape Navigator);
Текстовый редактор Блокнот (Notepad) для подготовки HTML-файлов.
При выполнении практических работ, студенты должны руководствоваться инженерно-психологическими рекомендациями по выбору оптимальных объемов и темпов поступления информации, предъявляемой человеку, учитывать особенности зрительного анализатора по восприятию объектов, имеющих разный цвет, яркость и размеры.
Практическое пособие включает в себя шесть практических работ с заданиями, в результате выполнения которых студенты должны:
знать основные приемы размещения и редактирования текстовой информации на WEB-странице;
уметь работать с цветом;
уметь работать с графическими объектами;
уметь создавать таблицы и разбивать WEB-страницы на фреймы;
уметь создавать гипертекстовые связи;
уметь использовать стили при создании WEB-страниц.

СОЗДАНИЕ ПРОСТЕЙШЕЙ WEB-СТРАНИЧКИ С ИСПОЛЬЗОВАНИЕМ ЦВЕТА
.
Теоретическая часть

Структура HTML-документа
При создании WEB-страниц используется язык разметки гипертекста HTML (Hypertext Markup Language). Документ, который написан на языке HTML, представляет собой простой документ, в который вставлены теги разметки. Теги разметки объясняют компьютеру, как должен быть расположен текст на экране, в каком месте должны находится рисунки, хранящиеся в других файлах и т.д.
С помощью тегов разметки формируются связи с WEB-сайтами и другими ресурсами INTERNET.
Теги разметки – это определенная последовательность символов, заключенная между знаками < и >. Знак < означает начало тега, знак > - конец тега. Прописные и строчные буквы в написании тегов значения не имеют. Теги бывают парные и непарные, открывающие и закрывающие. Отличительным признаком закрывающего тега является символ /, например, . Область действия парного тега начинается с того места, где стоит открывающий тег и заканчивается там, где стоит закрывающий тег. Например, текст выводится на экран полужирным шрифтом, если стоит между тегами и . Все форматирующие теги всегда следуют парами, и для открывающего тега должен существовать закрывающий тег.
Пример использования парных тегов.
Этот текст будет выводиться наклонным шрифтом,
Этот – подчеркнутым

Теги могут быть и непарными. Например, для перехода на новую строку используется непарный тег
(Linebreak).

Все, что заключено между тегами и является документом HTML. Любой HTML-документ состоит из двух частей: заголовка и тела. Заголовок заключается между тегами и . В заголовке содержится название страницы, которое появится в верхней рамке окна программы просмотра (Рис.1). Название страницы располагается между тегами и .
Пример заголовка WEB- странички.


Личная страничка <title><br /></head><br /><br /><br /><br />Рис.1. На рисунке отображено название странички в верхней рамке программы просмотра Internet Explorer.<br /><br />Информация, заключенная между тегами <body> и </body> называется телом странички. Все, что заключено между этими тегами будет выводиться на экран: текст, картинки, видеофрагменты (Рис.2).<br /><br /><br /><br />Рис.2 Пример WEB-странички, содержащей текст и картинки.<br /><br /><br />Пример укрупненной структуры HTML-документа:<br /><html><br /><head><br /> <br /></head><br /><body><br /> <br /><br /> </body><br /> </html><br /><br /><br />Заголовки<br />Заголовки служат для выделения логических частей текста WEB-странички. Они обозначаются прописной или строчной латинской буквой h. Цифра после буквы показывает уровень заголовка (всего их может быть 6).<br />Пример использования заголовков различного уровня.<br /><br /><h1 align = center> Изучение иностранного языка </h1><br /><h2 align=left> Грамматика <h2><br /><br />Параграфы<br />Чтобы разбить текст на параграфы используется парный тег <p> и </p>. Вместе с тегом параграфа используется параметр выравнивания align, который может принимать следующие значения:<br />align=center – выравнивание по центру;<br />align= left - выравнивание по левому краю;<br />align= (right) - выравнивание по правому краю<br />Пример выравнивания параграфа по левому полю. <br /><p align = left><br />Тег параграфа обеспечит выравнивание текста параграфа по левому полю.<br /></p><br /><br />Комментарии<br />В HTML-документы можно включать комментарии, помещая их между тегами комментариев HTML (<!--и -->).<br />Пример использования комментария.<br /> <p align = left><--!Это тег параграфа. Текст параграфа выровнен по левому полю--><br />Текст параграфа<br /></p><br /><br />Редактирование текста<br />Фрагменты текста можно выделить полужирным шрифтом (bold),<br />например,<br /><b><br />Данный текст будет выделен полужирным шрифтом<br /></b> <br />Отдельные слова можно подчеркнуть (underline),<br />например,<br /><u><br />Данный текст будет подчеркнутым<br /></u><br />Для выделения можно также использовать курсивный шрифт (italic),<br />например,<br /><i><br />Данный текст будет наклонным<br /></i><br />Для выделения логических частей текста используют также горизонтальную линию (horizontal rule). Тег горизонтальной линии является непарным. Толщина, размер и цвет линии задаются с помощью параметров size, width и color соответственно.<br />Пример использования тега горизонтальной линии.<br /><hr size=+2 width="10%" color=red> <br />Здесь размер линии составляет 10% от размера экрана, толщина линии увеличена на два пункта, цвет линии – красный.<br />Пример странички, включающей элементы редактирования и горизонтальную линию.<br /><html><br /><head><br /><title> <br />Моя страничка<br />

· bgcolor="#ffebcd" text="c71585" >


Домашняя страничка Сергея Сергеева







Сергей Сергеев

- писатель-авангарди




В жизни большой любитель собак и компьютерных игр.




Некоторые его рассказы вы можете прочитать прямо здесь.





Результат выполнения программы:




Списки
Списки бывают:
нумерованными, например,

Обучение и работа
Бухгалтерский учет – аудит.(3 мес.)
Делопроизводство (3 мес.)
Парикмахер широкого профиля (2 мес.)

маркированными, например,

Всероссийское общество слепых
продает:
( Электромоторы 180, 270 вт.
( Электромоторы 5.5 квт.
( Деревообрабатывающий станок СФ-4.

вложенными, т.е. сочетающими в себе элементы того и другого списков.
В нумерованном списке (Ordered list) каждому элементу предшествует его порядковый номер. Чтобы программа просмотра правильно расставила номера, нужно использовать теги разметки:

  1. элемент списка
  2. элемент списка
  3. элемент списка

В маркированном списке (Unordered list) каждому элементу списка предшествует символ bullers (пуля).
Для создания маркированного списка используются теги:

  • элемент списка
  • элемент списка
  • элемент списка

Вложенный список (Nested list) включает элементы обоих списков:

  1. элемент списка

    • элемент списка
    • элемент списка

  2. элемент списка


Пример странички, организуемой с помощью списков.

Советы по использованию WEB-страничек



Советы по изготовлению страничек



  1. Чаще обновляйте странички
  2. Не используйте редкий шрифт
  3. Не перегружайте страничку большими изображениями
  4. Перед тем как положить готовую страничку на сервер, надо:

    • Проверить грамматические ошибки
    • Просмотреть страничку в различных программах просмотра












Результат выполнения программы:



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


моя страничка



Привет! Это моя личная страничка!



Мой город



Я живу в Москве



Моя школа



Я учусь в школе №26


Мои увлечения


Мои увлечения – музыка, спорт


Мои друзья

Мои друзья учатся со мной в одном классе.






Design "Luch"






Результат выполнения программы:



При создании WEB-странички можно задать цвет фона и цвет шрифта. Для изменения цвета фона и шрифта всей странички используются следующие параметры тега :
bgcolor- цвет фона странички;
text- цвет текста странички;
Для редактирования фрагмента текста используется парный и , в котором можно задать тип шрифта (параметр type), цвет шрифта (параметр color) и размер шрифта (параметр size).
Пример форматирования фрагмента текста:


личная страничка


Привет! Это моя

личная страничка

страничка





Результат выполнения программы.



В данном примере фрагмент текста «личная страничка» будет оформлен шрифтом Normal, окрашен с синий цвет, размер шрифта будет увеличен на два пункта.
Ниже приведена таблица, в которой указаны коды некоторых цветов в шестнадцатиричном формате.

Цвет
Код

Черный
#000000

Темно-бордовый
#800000

Зеленый
#008000

Оливковый
#808000

Темно-синий
#000080

Фиолетовый
#800080

Серый
#808080

Серебряный
#С0С0С0

Красный
#FF0000

Желтый
#FFFF00





Пример WEB-странички, размещенной на белом фоне и имеющей шрифт различного цвета.


<br />Моя страничка<br />



На данной страничке текст и изображения будут
располагаться на белом фоне.



Шрифт может быть

разного

цвета.






Практическое задание

Используя редактор текста Блокнот (Note Pad) выполните последовательно следующие пункты задания для разработки WEB-странички:
1. Поместите в WEB-страничку:
заголовки нескольких уровней, выровненные по центру, по левому или правому полю;
параграфы с текстом, выровненные по центру, по левому или правому полю;
списки.
2. Отредактируйте фрагменты текста WEB-странички различными способами:
полужирным шрифтом;
курсивом;
различным размером шрифта;
различным типом шрифта;
подчеркиванием.
3. Для выделения логических частей WEB-странички используйте горизонтальную линию, задавая параметры ее длины, ширины и цвета .
4. Выберите цвет фона WEB-странички, окрасьте заголовки, текст и горизонтальные линии в тон к выбранному фону.
5. Сохраните полученную WEB-страничку на сервере в папке HTML с именем Lab1.htm.
6. Просмотрите HTML-файл своей страницы с помощью установленного на компьютере броузера (Internet Explorer) и добейтесь максимального подобия в представлении страницы броузером.









13PAGE 15


13PAGE 14315




Заголовок 115

Приложенные файлы

  • doc 10185847
    Размер файла: 340 kB Загрузок: 0

Добавить комментарий