Проектно-исследовательская работа «Создание Web – страниц c помощью языка гипертекстовой разметки HTML»

Разработка Web-сайтов при помощи языка разметки HTML Работу выполнили: Байриева Зейнаб и Пономаренко Татьяна Ученицы 10 «А» класса

Тема работы – «Создание Web-сайта с помощью языка гипертекстовой разметки HTML». Тема работы – «Создание Web-сайта с помощью языка гипертекстовой разметки HTML». Цель- разработать сайт с помощью языка HTML. В процессе работы необходимо решить следующие задачи: Изучить основы языка HTML Изучить основные способы создания Web – страниц Продумать и спроектировать будующий сайт Собрать информацию, необходимую для верстки страниц сайта Продумать внешний вид сайта Создать сайт

Интернет все активнее входит в нашу жизнь. Возможности, представленные им, привлекают все больше и больше пользователей. Многие люди начинают обращаться к глобальной сети для обмена информацией

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

Структура шапка сайта логотип баннер поиск меню Блок с основным контентом Блок с доп. инфо Блок с доп. инфо Блок с доп. инфо Низ сайта

Существуют несколько основных структур: Существуют несколько основных структур: 1.Линейная. Главная страница 2.Иерархическая. Главная страница

3.Произвольная. 3.Произвольная. Главная страница

Главная страница сайта

Остальные страницы сайта

Пример Web-страницы. Пример Web-страницы. <HTML> <HEARD> <TITLE> Петропавловск-Камчатский </TITLE> <META http-equiv=“Content-Type”=“text/html; Charset=windows-1251”> <META name=''Author''=''Bayriyeva''> <META name=“Keywords” content =“МОЙ ГОРОД ПЕТРОПАВЛОВС-КАМЧАТСКИЙ”> </HEARD> <BODY> Здесь размещается содержимое страницы. </BODY> </HTML>

Создание.

Что такое HTML? <html> Начало разметки <heard> Начало «головы» страницы сайта <title> Петропавловск-Камчатский</title> Название страницы сайта </heard> Конец «головы» <body> Начало «тела» страницы Мой город Петропавловск-Камчатский Основной контент сайта </body> Конец «тела» </html> Конец разметки html Структура простейшего html файла или простейшей интернет страницы

Форматирование текста Названия цветов и значения RGB Black = "#000000" Silver = "#C0C0C0" Gray = "#808080" White = "#FFFFFF" Maroon = "#800000" Red = "#FF0000" Purple = "#800080" Fuchsia = "#FF00FF" Green = "#008000" Lime = #00FF00" Olive = "#808000" Yellow = "#FFFF00" Navy = #000080" Blue = "#0000FF" Teal = "#008080" Aqua = "#00FFFF" <FONT COLOR=”#00FF00”>Текст</ FONT>

Оформление сайта Что входит в понятие «оформление сайта» в нашем понимании: Подбор цветовой гаммы для сайта; Формирование расположения текста, рисунков и видео материалов на страницах; Расположение информационных блоков Подбор шрифта (стиля и размера); Оформление элементов дизайна таким образом, чтобы было удобно посетителю.

Web-сайты могут содержать: 1.Таблицы 7.Мультимедиа-файлы 2.Тексты 8.Скрипты 3.Логотипы 9.Апплеты 4.Эмблемы 10.Флеш-анимации 5.Графики 11.Гиперссылки 6.Банеры 12.Таблицы стилей

Подключение графических объектов. <IMG> Если файл находится в другой папке на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в файловой системе. Если файл находится на удалённом сервере в интернете, то должен быть указан Интернет-адрес этого файла.

Гиперссылки на Web-страницах Гиперссылки, размещённые на Web-странице, позволяют загружать в браузере другие Web-страницы, хранящиеся на локальном компьютере или в Интернете. Гиперссылка создаётся с помощью тэга "А" и его атрибута HREF, указывающего, в каком файле хранится загруженная Web-страница. [<a href="index.html"> МОЙ ГОРОД ПЕТРОПАВЛОВСК-КАМЧАТСКИЙ</a>] &nbsp [<a href="history.html"> История</a] &nbsp [<a href="vulkani.html"> Вулканы</a>] &nbsp [<a href="zapovedniki.html">Заповедники </a>] &nbsp [<a href="anketa.htm">Анкета</a>] &nbsp

Списки Нумерованные Маркированные <ol> <ul> <li>первый элемент</li> <li> первый элемент</li> <li>второй элемент</li> <li>второй элемент</li> </ol> </ul> 1. первый элемент ∙первый элемент 2. второй элемент ∙второй элемент

Вставка мультимедиа файлов ТЕГИ <AUDIO> <AUDIO SRC=‘‘sound. way’’></AUDIO>

Интерактивные формы на Web-страницах. Для того чтобы посетители сайта могли не только просматривать информацию, но и отправлять сведения его администраторам, на страницах сайта размещают интерактивные формы. Формы включают в себя элементы управления различных типов: текстовые поля, раскрывающиеся списки, флажки, переключатели и т. д. <form></form>.

Текстовые поля. Для получения этих данных разместим в форме два однострочных текстовых поля для ввода информации. Текстовые поля. Для получения этих данных разместим в форме два однострочных текстовых поля для ввода информации. Текстовые поля создаются с помощью тэга «INPUT». Атрибут NAME является обязательным и служит для полученной информации. Значением атрибута SIZE является число, задающее длину поля ввода в символах. Для того чтобы анкета «читалась», необходимо разделить строки с помощью тэга перевода строки «BR».

Переключатели. Далее, мы хотим выяснить, к какой группе пользователей относит себя посетители. Предложим выбрать ему один из нескольких вариантов: учащийся, студент, учитель. Переключатели. Далее, мы хотим выяснить, к какой группе пользователей относит себя посетители. Предложим выбрать ему один из нескольких вариантов: учащийся, студент, учитель. Для этого необходимо создать группу переключателей. Создается такая группа с помощью тэга «INPUT». Все элементы в группе должны иметь одинаковые значения атрибута NAME.

Флажки. Далее, мы хотим узнать, какими сервисами Интернета наш посетитель пользуется наиболее часто. Здесь из предложенного он может выбрать одновременно несколько вариантов, пометив их флажками. Флажки. Далее, мы хотим узнать, какими сервисами Интернета наш посетитель пользуется наиболее часто. Здесь из предложенного он может выбрать одновременно несколько вариантов, пометив их флажками. Флажки создаются с помощью тэга «INPUT». Флажки, объединенные в группу, могут иметь различные значения атрибута NAME. Еще одним обязательным атрибутом является «VALUE», которому присвоим значения «WWW» «e-mail». Значение этого атрибута должно быть уникальным для каждого флажка, т.к. при его выборе именно оно передается серверу.

Текстовая область. В заключении поинтересуемся, что ещё посетитель хочет видеть на нашем сайте. Так как мы заранее не можем знать, какой обширный ответ даст посетитель, отведём для него текстовую область с линейкой прокрутки. В такое поле можно ввести достаточно подробный текст. Текстовая область. В заключении поинтересуемся, что ещё посетитель хочет видеть на нашем сайте. Так как мы заранее не можем знать, какой обширный ответ даст посетитель, отведём для него текстовую область с линейкой прокрутки. В такое поле можно ввести достаточно подробный текст. <br> <textarea name="resume" ROWS=4 COLS=30> </textarea> <br> На нашем сайте используются текстовые поля, переключатели и формы на страничке «Анкета». Посетители нашего сайта могут ответить на вопросы анкеты и написать свои пожелания.

Заключение Данная работа будет полезна тем, кто решит попробовать создать свой сайт и выйти с ним в глобальную сеть Интернет, для того, чтобы рассказать о себе. Практическая часть работы заинтересует тех, кто захочет узнать о нашем крае, посещая страницы сайта. Посетителями сайта могут быть и сами жители Камчатки, и люди не бывавшие здесь никогда. На страницах сайта можно получить информацию о самом крае, о её истории, заповедниках, флоре и фауне и многое многое другое. Данные о посещении нашего сайта и добрые слова можно оставить на страничке «Гость».