ПОДКЛЮЧЕНИЕ ГРАФИЧЕСКИХ ОБЪЕКТОВ
МУНИЦИПАЛЬНОЕ ОБРАЗОВАНИЕ ПАВЛОВСКИЙ РАЙОН КРАСНОДАРСКОГО КРАЯ МУНИЦИПАЛЬНОЕ БЮДЖЕТНОЕ ОБЩЕОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ СРЕДНЯЯ ОБЩЕОБРАЗОВАТЕЛЬНАЯ ШКОЛА № 13 ИМЕНИ ФЕДОРА ИВАНОВИЧА ФОМЕНКО СТАНИЦЫ НОВОПЕТРОВСКОЙ
Итоговый проект по информатике
Создание Web – страниц c помощью языка гипертекстовой разметки HTML
Автор проекта:
Земляной Семён Сергеевич
Ученик 9 класса МБОУ СОШ №13 имени Федора Ивановича Фоменко
Руководитель: Князев Олег Анатольевич, учитель физики и информатики МБОУ СОШ №13 имени Федора Ивановича Фоменко
2021г.
ОГЛАВЛЕНИЕ
ВВЕДЕНИЕ.. 3
ЧАСТЬ 1. WEB-САЙТЫ И WEB-СТРАНИЦЫ... 4
ЧАСТЬ 2. ОСНОВНЫЕ ТЕГИ HTML.. 9
ОФОРМЛЕНИЕ САЙТА.. 12
ЗАКЛЮЧЕНИЕ.. 17
СПИСОК ИСПОЛЬЗУЕМОЙ ЛИТЕРАТУРЫ... 18
ВВЕДЕНИЕ
Интернет все активнее входит в нашу жизнь. Возможности, представленные им, привлекают все больше и больше пользователей. Многие люди начинают обращаться к глобальной сети для обмена информацией
Умение создавать Web – сайты со временем становится актуальным навыком простого пользователя. Опубликовать сайт в Интернете настолько просто и доступно, что эта возможность привлекает все большее число людей. Однако Web – сайт может привлечь к себе внимание лишь в том случае, если его содержание вызывает какой-то интерес и если он имеет привлекательное внешнее оформление. Оформление Web – страниц становится своеобразным видом прикладного искусства. У него даже появилось свое название – «Web-дизайн». И если человек решил опубликоваться в Интернете, то следует разобраться – как и какими средствами создаются Web – страницы.
|
|
|
Тема моей работы
«Создание Web–сайта c помощью языка гипертекстовой разметки HTML».
Цель работы
разработать сайт с помощью языка HTML.
В процессе работы необходимо было решить следующие задачи:
· Изучить основы языка HTML
· Создать модель сайта
ЧАСТЬ 1. WEB-САЙТЫ И WEB-СТРАНИЦЫ
Что же такое Web-сайт? Web-сайт- это совокупность программных, информационных, а также медийных средств, логически связанных между собой.
Публикации во Всемирной паутине реализуются в форме Web-сайтов, которые обычно содержат материал по определённой теме или проблеме. Любой пользователь Интернета может создать свой тематический сайт, на котором разместит информацию о своих разработках, увлечениях и т.д. Прежде чем разместить свой Web-сайт на сервере в Интернете, необходимо его тщательно протестировать, так как посетителями вашего сайта будут десятки миллионов пользователей Интернета.
|
|
|
На сайтах может содержаться абсолютно любая информация. Например о компьютерных играх, автомобилях, аквариумных рыбках, городах и странах мира и т.д. и т.п. Список можно продолжать бесконечно. Как вам например сайт "Война и мир"? Получается, что сайт это книга, но только электронная.
Как и обычная книга, Web-сайт состоит из страниц, которые называются Web-страницами. Web-страницы создаются с использованием языка разметки гипертекстовых документов. В обычный текстовый документ вставляются управляющие символы , которые определяют вид Web-страницы при просмотре в браузере.
Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста самого редактора.
Устройство
Страницы сайтов- это набор текстовых файлов, размеченных на языке HTML. Эти файлы, будучи загруженными на его компьютер, понимаются и обрабатываются браузером и выводятся на средство отображения пользователя. Язык HTML позволяет форматировать текст, различать в нём функциональные элементы, создавать гипертекстовые ссылки и вставлять в отображаемую страницу изображения, звукозаписи и другие мультимедийные элементы. Отображённые страницы можно изменить добавлением стилей, что позволяет централизовать в определённом файле все элементы формирования (размер и цвет заглавных букв 2-го уровня, размер и вид блока вставки и другое) или сценариев на языке JavaScript, с помощью которого имеется возможность просматривать страницы с событиями или действиями.
|
|
|
Страницы сайтов могут быть простым статичным набором файлов или создаваться специальной компьютерной программой на сервере. Она может быть либо сделана на заказ для отдельного сайта, либо быть готовым продуктом, рассчитанным на некоторый класс сайтов. Некоторые из них могут обеспечить владельцу сайта возможность гибкой настройки структурирования и вывода информации на веб-сайте.
Сайты могут содержать подразделы, ориентированные целиком на ту или иную аудиторию. Аудитория может различаться по виду используемого оборудования, по используемому языку аудитории. К примеру, известны так называемые мобильные версии сайта, предназначенные для работы с ними с использованием смартфона (Рис.1).
Рис.1 Структура Web -страниц
Существует несколько основных структур:
|
|
|
Линейная- страницы располагаются в определённом порядке. Переход с одной страницы на другую строго определён. Такая структура обоснована, например, при обучении. Располагая страницы в определённом порядке, вы можете быть уверены, что пользователь не пропустит нужный материал (Рис.2).
Рис.2 Структура Web -страницы(Линейная)
Иерархическая- страницы разбиты по категориям и подкатегориям. Такая структура наиболее удобна (Рис.3).
Рис.3 Структура Web -страницы(Иерархическая)
Произвольная- страницы расположены в свободном порядке. Такая структура оправдана только для небольших сайтов (Рис.4).
| главная страница |
Рис.4 Структура Web -страницы(Произвольная)
Главная страница сайта.
Обычно это первая страница, на которую попадает пользователь. Поэтому она должна удовлетворять некоторым условиям:
1.Главная страница должна отражать тематику сайта.
2.Она должна быть интересной, чтобы пользователю захотелось пройтись по другим страницам сайта.
3.желательно разместить на ней функцию поиска по сайту.
4.Пусть на ней будет раздел с постоянно обновляющейся информацией, например: новости, акции, советы дня.
5. Обязательно должен присутствовать способ обратной связи (e-mail, телефон, адрес).
6.Сделайте главную страницу отличающейся от остальных, но соответствующей общей стилистике сайта.
Остальные страницы сайта.
Внешний вид всех страниц сайта должен быть выдержан в едином стиле. На них должно быть указано название ресурса и обязательная ссылка на главную страницу. В основном каждая страница должна быт уникальна, т.е. иметь свое содержание. Причём, следует учесть несколько моментов:
1.Следите за длиной страницы. Если она больше 2,5 экранов, разбейте страницу на две.
2.Разбивайте текст на абзацы, делайте отступы и поля. Выделяйте текст заголовками и подзаголовками. В общем, сделайте так, чтобы он легко воспринимался.
3.Снабжайте текст картинками и графиками, но не переусердствуйте. Всё должно быть обоснованно.
Web-страницы разделяются на две логические части: заголовок и содержание (Рис. 5).
Рис.5 Пример Веб-страницы
Заголовок Web-страницы заключается в контейнер и содержит содержание страницы и справочную информацию о ней, которая используется браузером для её правильного отображения.
Название страницы помещается в контейнер и при просмотре отображается в верхней строке окна браузера.
Созданную Web-страницу необходимо сохранить в виде файла.
ЧАСТЬ 2. ОСНОВНЫЕ ТЕГИ HTML
Начнём создание сайта в стандартной программе- блокнот, которая есть в любом компьютере. Напечатайте любое предложение и сохраните его на рабочем столе с именем файла index.html. После появится соответствующий значок.
Если вы отправите свой файл index.html на сервер хостинг-провайдера, он станет доступным для просмотра из любой точки Земного шара.
Таким способом вы можете хоть "Войну и мир" напечатать, и выложить в Интернете. Но, допустим, вам надо изменить размер шрифта, придать ему какой-то цвет, вставить рисунки, фотографии...
Как всё это сделать? А для этого нужно применить язык гипертекстовой разметки- HTML.
Html — что это? HyperText Markup Language — это язык разметки документа во всемирной паутине. Язык html воспроизводится интернет-браузером в виде удобной страницы с текстом, таблицами, списками, изображениями.
Фактически интернет-сайт воспринимается браузером как совокупность страниц, каждая из которых есть ни что иное, как текстовый файл с расширением html (в отличие от обычных текстовых файлов txt или doc), в котором выполняются требования его разметки.
Структура простейшего html файла или простейшей интернет страницы:
Таблица 1. Структура таблицы
| <html> | Начало разметки |
| <heard> | Начало «головы» страницы сайта |
| <title> Краснодарский край</title> | Название страницы сайта |
| </heard> | Конец «головы» |
| <body> | Начало «тела» страницы |
| Краснодарский край - субъект Российской Федерации | Основной контент сайта |
| </body> | Конец «тела» |
| </html> | Конец разметки html |
Из примера, если присмотреться, видно, что документ состоит из текста и текста заключенного в скобки <>. <html>, </body>, <title> — так называемые ТЭГИ (или ключевые слова, или дискрипторы).
Тег – начальный или конечный маркер элемента записывается в угловых скобках и состоит из имени, за которым может следовать список атрибутов. Причем теги есть открывающие <body> и закрывающие </body>. Отличие между ними — наличие правого слеша в закрывающем теге. Практически всегда теги присутствуют парами, кроме нескольких исключений, например тег <br> — у него нет закрывающего тега.
Между тегами <body> и </body> находится вся основная информация или контент, который видят посетители интернет страницы. Для отображения текста в виде таблиц, для вывода видео, картинок, для создания форм и др. существует достаточное количество тегов.
Форматирование текста
Пока наша страница выглядит не слишком привлекательной. Мелкий шрифт и чёрные буквы на белом фоне почти не обращают на себя внимания. С помощью HTML - тегов можно задать различные параметры форматирования текста. Чтобы придать тексту требуемый вид воспользуемся тегами:
<p> - тег абзаца; используется с закрывающим тегом </p>. Каждый абзац начинается с новой строки. Между абзацами браузер оставляет небольшой промежуток.
<b> - полужирный текст; используется с закрывающим тегом </b>. Любой текст становится полужирным.
<br> - перевод строки.
<hr> - горизонтальная разделительная линия
<H2> - заголовок 1-го уровня используется с закрывающим тегом </H2>.
Чтобы выполнить форматирование имеющегося HTML – документа, разместим теги в нужных местах текста
С помощью тега FONT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста. Атрибут FACE позволяет задать гарнитуру шрифта (например FACE=”Arial”), атрибут SIZE – размер шрифта (например SIZE=4), атрибут COLOR – цвет шрифта (например COLOR=”#00FF00”)
Задать цвет текста можно следующим образом (Рис.6)
<FONT COLOR=”#00FF00”>Текст</ FONT>
Рис.6 Названия цветов и значения RGB
ОФОРМЛЕНИЕ САЙТА
Сегодня в Интернете существуют миллионы сайтов, которые активно конкурируют между собой в поисковой выдаче и в завоевании аудитории. Пользователям Интернета постоянно нужна всё новая информация и новые услуги, однако при таком большом предложении, они вправе выбирать те сайты, которые вызывают уважение и интерес.
Что входит в понятие «оформление сайта» в моем понимании:
1. Подбор цветовой гаммы для сайта;
2. Формирование расположения текста, рисунков и видео материалов на страницах;
3. Расположение информационных блоков (рекламы, комментариев, похожих статей и т.д.)
4. Подбор шрифта (стиля и размера);
5. Оформление элементов дизайна таким образом, чтобы было удобно посетителю.
Если на сайте
1. Правильно подана информация;
2. Выделены главные элементы статьи;
3. Есть дополнительные тематические ссылки;
4. Цвета не «выедают» глаз;
5. Явно выражены основные достоинства сайта.
То:
1. Человек дольше пробудет на странице;
2. Просмотрит дополнительные страницы;
3. Зарегистрируется;
4. Оставит комментарий;
5. Добавит сайт в закладки или социальные сети;
6. Вернется на сайт ещё раз.
Следовательно:
1. Сайт будет лучше ранжироваться в поисковой выдаче;
2. Поисковые системы будут уважать проект;
3. Ресурс получит ещё больше целевой аудитории.
Web-страницы могут содержать (Рис.7):
1.Тексты 4.Эмблемы 7.Мультимедиа-файлы
2.Таблицы 5.Графики 8.Скрипты
3.Логотипы 6.Банеры 9.Апплеты
10.Флеш-анимации
11.Гиперссылки 12. Таблицы стилей
Рис.7 Содержимое сайта
ПОДКЛЮЧЕНИЕ ГРАФИЧЕСКИХ ОБЪЕКТОВ
Компьютерная графика обладает огромным потенциалом, ведь один рисунок может дать больше информации, чем целая страница текста.
Для вставки изображения используется тег "IMG" с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в той же папке, что и файл Web-страницы, то в качестве значения атрибута достаточно указать только имя файла.
Если файл находится в другой папке на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в файловой системе.
Если файл находится на удалённом сервере в интернете, то должен быть указан Интернет-адрес этого файла.
Теговое включение графики.
В языке HTML существует отдельный тег для вставки в текст изображений - <img> он используется без закрывающего тега, а изображение размещается там, где тег вставлен в текст.
Параметры изображения и имя файла, в котором он находится, определяется инструкциями тега.
Инструкция src определяет имя графического файла. Пример:
<img src=”logo.gif”>
Среди других инструкций тега <img> существуют следующие:
· Alt – альтернативное текстовое описание рисунка;
· Height – переопределение высоты рисунка;
· Width – переопределение ширины рисунка;
· Border – задание ширины границ.
Гиперссылки.
Первая титульная страница должна посетителю Web – сайта возможность начать путешествие по сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы сайта (Рис.8).
Рис.8 Гиперссылка
Гиперссылки, размещённые на Web-странице, позволяют загружать в браузере другие Web-страницы, хранящиеся на локальном компьютере или в Интернете.
Гиперссылка создаётся с помощью тэга "А" и его атрибута HREF, указывающего, в каком файле хранится загруженная Web-страница.
Если загруженная в браузер Web-страница размещена на локальном компьютере в той же папке, то указывается просто имя файла. Относительный URL – адрес указывает на местоположение документа относительно того, в котором находится указатель ссылки. При разработке сайта рекомендуется входящие в него Web – страницы связываются относительными ссылками. Это позволит не изменять адресную часть ссылок при перемещении Web – сайта в другой каталог локального компьютера или при публикации его в Интернете.
Прежде всего, необходимо разместить на титульной странице тексты гиперссылок на каждую страницу сайта. Для представления гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход.
Принято размещать гиперссылки в нижней части страницы, поэтому разместим их после набранного текста в новом абзаце в одну строку разделенными несколькими пробелами. Такое размещение называют панелью навигации
Панель навигации будет представлять собой абзац, выровненный по центру, в которых указатели гиперссылок разделены пробелами ( )
Списки на Web -страницах.
Довольно часто при размещении текста на Web-страницах удобно использовать списки в различных вариантах:
1.Нумерованные списки, где элементы списка идентифицируются с помощью чисел;
2.Маркированные списки, где элементы списка идентифицируются с помощью специальных символов (маркеров)
3.Списки определений - позволяют составлять перечни определений в так называемой словарной форме
ЗАКЛЮЧЕНИЕ
Данная работа будет полезна тем, кто решит попробовать создать свой сайт и выйти с ним в глобальную сеть Интернет, для того, чтобы рассказать о себе. Практическая часть работы заинтересует тех, кто захочет узнать о нашем крае, посещая страницы сайта. Посетителями сайта могут быть и сами жители Камчатки, и люди не бывавшие здесь никогда. На страницах сайта можно получить информацию о самом крае, о её истории, заповедниках, флоре и фауне и многое другое. Данные о посещении нашего сайта и добрые слова можно оставить на страничке «Гость».
Работа может быть использована в качестве учебного курса при изучении языка гипертекстовой разметки HTML и практического пособия при создании сайтов.
СПИСОК ИСПОЛЬЗУЕМОЙ ЛИТЕРАТУРЫ
1. https://nsportal.ru/sites/default/files/2014/09/15/sozdaem_shkolnyy_sayt_v_internete_el_kurs_ucheb_pos_monakhov_voronin_2005_-128s.pdf - М. Ю. Монахов, А. А. Воронин. – Создаём школьный сайт в Интернете. Элективный курс: Учебное пособие. БИНОМ. Лаборатория знаний, 2005.
2. https://znayka.cc/uchebniki/9-klass/informatika-9-klass-bosova-l-l-bosova-a-yu/ - Л.Л. Босова, А.Ю.Босова – Информатика 9 класс
3. https://11klasov.com/116-informatika-i-informacionnye-tehnologii-uchebnik-dlya-10-11-klassov-ugrinovich-nd.html - Н. Д. Угринович. Информатика и информационные технологии. Учебник для 10-11 классов. БИНОМ. Лаборатория знаний, 2005.
Дата добавления: 2021-05-18; просмотров: 134; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!