Проектно-исследовательская работа «Создание Web — страниц c помощью языка гипертекстовой разметки HTML»
Пояснительная записка к презентации
НАУЧНО-ПРАКТИЧЕСКАЯ КОНФЕРЕНЦИЯ
ТВОРЧЕСКИХ ПРОЕКТОВ И ИССЛЕДОВАТЕЛЬСКИХ РАБОТ
Секция: информационные технологии
Создание Web – страниц c помощью языка гипертекстовой разметки HTML
Создание Web – страниц c помощью языка гипертекстовой размет
PPTX / 3.12 Мб
сайт - продукт работы
TMP / 0 байт
Содержание
1.Web-сайты и Web-страницы
2.Основные теги HTML
3.Оформление сайтов
4.Подключение графических объектов
5.Гиперссылки
6.Списки
7.Вставка мультимедиа
8.Интерактивные формы на Web-страницах.
Список используемой литературы
Введение
Интернет все активнее входит в нашу жизнь. Возможности, представленные им, привлекают все больше и больше пользователей. Многие люди начинают обращаться к глобальной сети для обмена информацией
Умение создавать Web – сайты со временем становится актуальным навыком простого пользователя. Опубликовать сайт в Интернете настолько просто и доступно, что эта возможность привлекает все большее число людей. Однако Web – сайт может привлечь к себе внимание лишь в том случае, если его содержание вызывает какой-то интерес и если он имеет привлекательное внешнее оформление. Оформление Web – страниц становится своеобразным видом прикладного искусства. У него даже появилось свое название – «Web-дизайн». И если человек решил опубликоваться в Интернете, то следует разобраться – как и какими средствами создаются Web – страницы.
Тема нашей работы
«Создание Web–сайта c помощью языка гипертекстовой разметки HTML».
Цель работы
разработать сайт с помощью языка HTML.
В процессе работы необходимо было решить следующие задачи:
Изучить основы языка HTML
Изучить основные способы создания Web – страниц
Продумать и спроектировать будующий сайт.
Собрать информацию, необходимую для верстки страниц сайта
Продумать внешний вид сайта
Создать сайт
Часть 1. Web-сайты и Web-страницы
Что же такое Web-сайт? Web-сайт- это совокупность программных, информационных, а также медийных средств, логически связанных между собой.
Публикации во Всемирной паутине реализуются в форме Web-сайтов, которые обычно содержат материал по определённой теме или проблеме. Любой пользователь Интернета может создать свой тематический сайт, на котором разместит информацию о своих разработках, увлечениях и т.д. Прежде чем разместить свой Web-сайт на сервере в Интернете, необходимо его тщательно протестировать, так как посетителями вашего сайта будут десятки миллионов пользователей Интернета.
На сайтах может содержаться абсолютно любая информация. Например о компьютерных играх, автомобилях, аквариумных рыбках, городах и странах мира и т.д. и т.п. Список можно продолжать бесконечно. Как вам например сайт "Война и мир"? Получается, что сайт это книга, но только электронная.
Как и обычная книга, Web-сайт состоит из страниц, которые называются Web-страницами. Web-страницы создаются с использованием языка разметки гипертекстовых документов. В обычный текстовый документ вставляются управляющие символы , которые определяют вид Web-страницы при просмотре в браузере.
Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста самого редактора.
Устройство
Страницы сайтов- это набор текстовых файлов, размеченных на языке HTML. Эти файлы, будучи загруженными на его компьютер, понимаются и обрабатываются браузером и выводятся на средство отображения пользователя. Язык HTML позволяет форматировать текст, различать в нём функциональные элементы, создавать гипертекстовые ссылки и вставлять в отображаемую страницу изображения, звукозаписи и другие мультимедийные элементы. Отображённые страницы можно изменить добавлением стилей, что позволяет централизовать в определённом файле все элементы формирования (размер и цвет заглавных букв 2-го уровня, размер и вид блока вставки и другое) или сценариев на языке JavaScript, с помощью которого имеется возможность просматривать страницы с событиями или действиями.
Страницы сайтов могут быть простым статичным набором файлов или создаваться специальной компьютерной программой на сервере. Она может быть либо сделана на заказ для отдельного сайта, либо быть готовым продуктом, рассчитанным на некоторый класс сайтов. Некоторые из них могут обеспечить владельцу сайта возможность гибкой настройки структурирования и вывода информации на веб-сайте.
Сайты могут содержать подразделы, ориентированные целиком на ту или иную аудиторию. Аудитория может различаться по виду используемого оборудования, по используемому языку аудитории. К примеру, известны так называемые мобильные версии сайта, предназначенные для работы с ними с использованием смартфона.
Структура Web-страниц
Шапка сайта
поиск
логотип
баннер
Блок с дополнит. Инфо.
Блок с основным контентом
меню
Низ сайта
Блок с дополнит. Инфо.
Блок с дополнит. Инфо.
Существует несколько основных структур:
Линейная- страницы располагаются в определённом порядке. Переход с одной страницы на другую строго определён. Такая структура обоснована, например, при обучении. Располагая страницы в определённом порядке, вы можете быть уверены, что пользователь не пропустит нужный материал.
главная страница
Иерархическая- страницы разбиты по категориям и подкатегориям. Такая структура наиболее удобна.
раздел
раздел
раздел
раздел
главная страница
Произвольная- страницы расположены в свободном порядке. Такая структура оправдана только для небольших сайтов.
главная страница
Главная страница сайта.
Обычно это первая страница, на которую попадает пользователь. Поэтому она должна удовлетворять некоторым условиям:
1.Главная страница должна отражать тематику сайта.
2.Она должна быть интересной, чтобы пользователю захотелось пройтись по другим страницам сайта.
3.желательно разместить на ней функцию поиска по сайту.
4.Пусть на ней будет раздел с постоянно обновляющейся информацией, например: новости, акции, советы дня.
5. Обязательно должен присутствовать способ обратной связи (e-mail, телефон, адрес).
6.Сделайте главную страницу отличающейся от остальных, но соответствующей общей стилистике сайта.
Остальные страницы сайта.
Внешний вид всех страниц сайта должен быть выдержан в едином стиле. На них должно быть указано название ресурса и обязательная ссылка на главную страницу. В основном каждая страница должна быт уникальна, т.е. иметь свое содержание. Причём, следует учесть несколько моментов:
1.Следите за длиной страницы. Если она больше 2,5 экранов, разбейте страницу на две.
2.Разбивайте текст на абзацы, делайте отступы и поля. Выделяйте текст заголовками и подзаголовками. В общем, сделайте так, чтобы он легко воспринимался.
3.Снабжайте текст картинками и графиками, но не переусердствуйте. Всё должно быть обоснованно.
Web-страницы разделяются на две логические части: заголовок и содержание.
Заголовок Web-страницы заключается в контейнер и содержит содержание страницы и справочную информацию о ней, которая используется браузером для её правильного отображения.
Название страницы помещается в контейнер и при просмотре отображается в верхней строке окна браузера.
Созданную Web-страницу необходимо сохранить в виде файла.
Пример Web-страницы
<HTML>
<HEARD>
Петропавловск-Камчатский
Charset=windows-1251">
МОЙ ГОРОД ПЕТРОПАВЛОВС-КАМЧАТСКИЙ''>
HEARD>
<BODY>
здесь размещается содержимое страницы
BODY>
HTML>
Часть 2. Основные теги HTML.
Создание.
Начнём создание сайта в стандартной программе- блокнот, которая есть в любом компьютере. Напечатайте любое предложение и сохраните его на рабочем столе с именем файла index.html. После появится соответствующий значок.
Если вы отправите свой файл index.html на сервер хостинг-провайдера, он станет доступным для просмотра из любой точки Земного шара.
Таким способом вы можете хоть "Войну и мир" напечатать, и выложить в Интернете. Но, допустим, вам надо изменить размер шрифта, придать ему какой-то цвет, вставить рисунки, фотографии...
Как всё это сделать? А для этого нужно применить язык гипертекстовой разметки- HTML.
HTML.
Html — что это? HyperText Markup Language — это язык разметки документа во всемирной паутине. Язык html воспроизводится интернет-браузером в виде удобной страницы с текстом, таблицами, списками, изображениями.
Фактически интернет-сайт воспринимается браузером как совокупность страниц, каждая из которых есть ни что иное, как текстовый файл с расширением html (в отличие от обычных текстовых файлов txt или doc), в котором выполняются требования его разметки.
Структура простейшего html файла или простейшей интернет страницы:
|
|
Начало разметки |
|
|
Начало «головы» страницы сайта |
|
|
Название страницы сайта |
|
|
Конец «головы» |
|
|
Начало «тела» страницы |
|
Мой город Петропавловск-Камчатский |
Основной контент сайта |
|
|
Конец «тела» |
|
|
Конец разметки html |
Из примера, если присмотреться, видно, что документ состоит из текста и текста заключенного в скобки <>.
, ,Тег – начальный или конечный маркер элемента записывается в угловых скобках и состоит из имени, за которым может следовать список атрибутов. Причем теги есть открывающие
и закрывающие . Отличие между ними — наличие правого слеша в закрывающем теге. Практически всегда теги присутствуют парами, кроме нескольких исключений, например тег
— у него нет закрывающего тега.
Между тегами
и находится вся основная информация или контент, который видят посетители интернет страницы. Для отображения текста в виде таблиц, для вывода видео, картинок, для создания форм и др. существует достаточное количество тегов.
Форматирование текста
Пока наша страница выглядит не слишком привлекательной. Мелкий шрифт и чёрные буквы на белом фоне почти не обращают на себя внимания. С помощью HTML - тегов можно задать различные параметры форматирования текста. Чтобы придать тексту требуемый вид воспользуемся тегами:
- тег абзаца; используется с закрывающим тегом
. Каждый абзац начинается с новой строки. Между абзацами браузер оставляет небольшой промежуток.
- полужирный текст; используется с закрывающим тегом . Любой текст становится полужирным.
- перевод строки.
- горизонтальная разделительная линия
- заголовок 1-го уровня используется с закрывающим тегом
.
Чтобы выполнить форматирование имеющегося HTML – документа, разместим теги в нужных местах текста
С помощью тега FONT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста. Атрибут FACE позволяет задать гарнитуру шрифта (например FACE=”Arial”), атрибут SIZE – размер шрифта (например SIZE=4), атрибут COLOR – цвет шрифта (например COLOR=”#00FF00”)
Задать цвет текста можно следующим образом
Текст
|
Названия цветов и значения RGB |
|||
|
|
Black = "#000000" |
|
Green = "#008000" |
|
|
Silver = "#C0C0C0" |
|
Lime = #00FF00" |
|
|
Gray = "#808080" |
|
Olive = "#808000" |
|
|
White = "#FFFFFF" |
|
Yellow = "#FFFF00" |
|
|
Maroon = "#800000" |
|
Navy = #000080" |
|
|
Red = "#FF0000" |
|
Blue = "#0000FF" |
|
|
Purple = "#800080" |
|
Teal = "#008080" |
|
|
Fuchsia = "#FF00FF" |
|
Aqua = "#00FFFF" |
Часть 3. Оформление сайта
Сегодня в Интернете существуют миллионы сайтов, которые активно конкурируют между собой в поисковой выдаче и в завоевании аудитории. Пользователям Интернета постоянно нужна всё новая информация и новые услуги, однако при таком большом предложении, они вправе выбирать те сайты, которые вызывают уважение и интерес.
Что входит в понятие «оформление сайта» в нашем понимании:
Подбор цветовой гаммы для сайта;
Формирование расположения текста, рисунков и видео материалов на страницах;
Расположение информационных блоков (рекламы, комментариев, похожих статей и т.д.)
Подбор шрифта (стиля и размера);
Оформление элементов дизайна таким образом, чтобы было удобно посетителю.
Если на сайте
Правильно подана информация;
Выделены главные элементы статьи;
Есть дополнительные тематические ссылки;
Цвета не «выедают» глаз;
Явно выражены основные достоинства сайта.
То:
Человек дольше пробудет на странице;
Просмотрит дополнительные страницы;
Зарегистрируется;
Оставит комментарий;
Добавит сайт в закладки или социальные сети;
Вернется на сайт ещё раз.
Следовательно:
Сайт будет лучше ранжироваться в поисковой выдаче;
Поисковые системы будут уважать проект;
Ресурс получит ещё больше целевой аудитории.
Web-страницы могут содержать:
1.Тексты 4.Эмблемы 7.Мультимедиа-файлы
2.Таблицы 5.Графики 8.Скрипты
3.Логотипы 6.Банеры 9.Апплеты
10.Флеш-анимации
11.Гиперссылки 12. Таблицы стилей
Часть 4. Подключение графических объектов
Компьютерная графика обладает огромным потенциалом, ведь один рисунок может дать больше информации, чем целая страница текста.
Для вставки изображения используется тег "IMG" с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в той же папке, что и файл Web-страницы, то в качестве значения атрибута достаточно указать только имя файла.
Если файл находится в другой папке на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в файловой системе.
Если файл находится на удалённом сервере в интернете, то должен быть указан Интернет-адрес этого файла.
Теговое включение графики.
В языке HTML существует отдельный тег для вставки в текст изображений - он используется без закрывающего тега, а изображение размещается там, где тег вставлен в текст.
Параметры изображения и имя файла, в котором он находится, определяется инструкциями тега.
Инструкция src определяет имя графического файла. Пример:
Среди других инструкций тега существуют следующие:
Alt – альтернативное текстовое описание рисунка;
Height – переопределение высоты рисунка;
Width – переопределение ширины рисунка;
Border – задание ширины границ. 
Часть 5. Гиперссылки.
Первая титульная страница должна посетителю Web – сайта возможность начать путешествие по сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы сайта.
Гиперссылки, размещённые на Web-странице, позволяют загружать в браузере другие Web-страницы, хранящиеся на локальном компьютере или в Интернете.
Гиперссылка создаётся с помощью тэга "А" и его атрибута HREF, указывающего, в каком файле хранится загруженная Web-страница.
Если загруженная в браузер Web-страница размещена на локальном компьютере в той же папке, то указывается просто имя файла. Относительный URL – адрес указывает на местоположение документа относительно того, в котором находится указатель ссылки. При разработке сайта рекомендуется входящие в него Web – страницы связываются относительными ссылками. Это позволит не изменять адресную часть ссылок при перемещении Web – сайта в другой каталог локального компьютера или при публикации его в Интернете.
Прежде всего, необходимо разместить на титульной странице тексты гиперссылок на каждую страницу сайта. Для представления гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход.
Принято размещать гиперссылки в нижней части страницы, поэтому разместим их после набранного текста в новом абзаце в одну строку разделенными несколькими пробелами. Такое размещение называют панелью навигации.
Панель навигации будет представлять собой абзац, выровненный по центру, в которых указатели гиперссылок разделены пробелами ( ):
[ МОЙ ГОРОД ПЕТРОПАВЛОВСК-КАМЧАТСКИЙ]  
[ История  [ Вулканы]   [Заповедники ]   [Анкета]  
Часть 6. Списки на Web-страницах.
Довольно часто при размещении текста на Web-страницах удобно использовать списки в различных вариантах:
Нумерованные списки, где элементы списка идентифицируются с помощью чисел;
Маркированные списки, где элементы списка идентифицируются с помощью специальных символов (маркеров)
Списки определений - позволяют составлять перечни определений в так называемой словарной форме.
Часть 7. Вставка мультимедиа файлов.
Для вставки на Web-страницу аудиоролика язык HTML предусматривает парный тег
Встретив тег
Тег
Часть 8. Интерактивные формы на Web-страницах.
Для того чтобы посетители сайта могли не только просматривать информацию, но и отправлять сведения его администраторам, на страницах сайта размещают интерактивные формы. Формы включают в себя элементы управления различных типов: текстовые поля, раскрывающиеся списки, флажки, переключатели и т. д.
Разместим на странице «Анкета» анкету для посетителей, чтобы выяснить, кто из наших посетителей, с какими целями и с помощью каких программ получает и использует информацию из сети Интернет, а также выясним, какую информацию они хотели бы видеть на нашем сайте.
Вся форма заключается в контейнер
.
В первую очередь выясним имя посетителя нашего сайта и его электронный адрес, чтобы иметь возможность ответить ему на замечания и поблагодарить за посещение сайта.
Текстовые поля.
Для получения этих данных разместим в форме два однострочных текстовых поля для ввода информации.
Текстовые поля создаются с помощью тэга
Атрибут NAME является обязательным и служит для идентификации полученной информации. Значением атрибута SIZE является число, задающее длину поля ввода в символах.
Для того чтобы анкета «читалась», необходимо разделить строки с помощью тэга перевода строки
.
Переключатели.
Далее, мы хотим выяснить, к какой группе пользователей относит себя посетитель. Предложим выбрать ему один из нескольких вариантов: бывал, не бывал, живу на Камчатке.
Для этого необходимо создать группу переключателей («радиокнопок»). Создается такая группа с помощью тэга «INPUT ". Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например, NAME="group".
Еще одним обязательным атрибутом является VALUE, которому присвоим значения «бывал», «не бывал», «живу на Камчатке». Значение атрибута VALUE должно быть уникальным для каждой «радиокнопки», так как при ее выборе именно оно передается серверу.
Флажки.
Далее, мы хотим узнать, какими сервисами Интернета наш посетитель пользуется наиболее часто. Здесь из предложенного перечня он может выбрать одновременно несколько вариантов, пометив их флажками.
Флажки создаются с помощью тэга «INPUT Флажки, объединенные в группу, могут иметь различные значения атрибута NAME. Еще одним обязательным атрибутом является VALUE, которому присвоим значения «WWW», «e-mail» и «FTP». Значение атрибута VALUE должно быть уникальным для каждого флажка, так как при его выборе именно оно передается серверу.
Текстовая область. В заключении поинтересуемся, что ещё посетитель хочет видеть на нашем сайте. Так как мы заранее не можем знать, какой обширный ответ даст посетитель, отведём для него текстовую область с линейкой прокрутки. В такое поле можно ввести достаточно подробный текст.
Создаётся такая область с помощью тега
Какую информацию вы хотели бы найти, и что вы думаете о нашем сайте?
На нашем сайте используются текстовые поля, переключатели и формы на страничке «Анкета». Посетители нашего сайта могут ответить на вопросы анкеты и написать свои пожелания.
Заключение.
Данная работа будет полезна тем, кто решит попробовать создать свой сайт и выйти с ним в глобальную сеть Интернет, для того, чтобы рассказать о себе. Практическая часть работы заинтересует тех, кто захочет узнать о нашем крае, посещая страницы сайта. Посетителями сайта могут быть и сами жители Камчатки, и люди не бывавшие здесь никогда. На страницах сайта можно получить информацию о самом крае, о её истории, заповедниках, флоре и фауне и многое другое. Данные о посещении нашего сайта и добрые слова можно оставить на страничке «Гость».
Работа может быть использована в качестве учебного курса при изучении языка гипертекстовой разметки HTML и практического пособия при создании сайтов.
Список используемой литературы
М. Ю. Монахов, А. А. Воронин. – Создаём школьный сайт в Интернете. Элективный курс: Учебное пособие. БИНОМ. Лаборатория знаний, 2005.
И. Г. Семакин, Е. К. Хеннер. Информатика. 10-й класс. БИНОМ. Лаборатория знаний, 2005.
Н. Д. Угринович. Информатика и информационные технологии. Учебник для 10-11 классов. БИНОМ. Лаборатория знаний, 2005.
