Файл: Основы программирования на языке HTML (Изучение предметной области).pdf

Динамическое обновление документов

Динамическое обновление документов — это возможность построения самопросматривающихся страниц и, если позволяет скорость линии связи примитивной мультипликации. Если разработчики Arena только обещают использование заголовка HTML-документа для управления просмотром последнего, то в Netscape это уже делается. В данном случае используется тег META с атрибутом HTTP-EQUIV, в котором и указывается скважность обращения Navigator к серверу за обновленным документом, которым может быть либо новая копия просматриваемого документа, либо другой документ [15].

Таким образом, большинство людей в последнее время стали больше работать в сети интернет. И одним из способов самовыражения стало созданием личных страничек. Веб-страница (англ.Web page) — документ, содержание которого пригодно для обработки, манипулирования и просмотра посредством веб-браузера. Веб-страницы могут располагаться локально (на персональном компьютере) или на сетевых устройствах(серверах) в локальных и глобальных сетях. Изначально веб-сайты представляли из себя совокупности статических документов. В настоящее время большинству из них свойственна динамичность и интерактивность. Для таких случаев специалисты используют термин веб-приложение - готовый программный комплекс для решения задач веб-сайта. Веб-приложение входит в состав веб-сайта, но веб-приложение без данных сайтом является только техническим [15].

Язык HTML — это язык гипертекстовой разметки, отображаемых браузерами на экранах ЭВМ. Язык HTML определяет правила описания гипертекстов и отображения их браузерами на экранах компьютеров.

Для разработки гипертекстовой разметки необходимо существенно влияет два фактора: желание научиться гипертекстовой разметки и знание интерфейса в области гипертекстовых систем [16].

HTML разработанимом Бернерсом Ли, сотрудником Лаборатории физики элементарных частиц европейского центра ядерных исследований (CERN) в 1989 г. [6]. Со временем появился HTML+ в 1993 году. Буквально через год вышла версия HTML версия 2.0, и она стала постоянно использоваться и используется по сей день. В 1995 год вышла версия HTML 3.0, она в себя включила математические символы, они вставлялись при помощи элементов языка. Через год вышла версия HTML3.2 в которую включили фреймы, которые используются в приложении курсовой. И HTML 4.0 вышла в 1997 году, далее создания страниц использовались скрипты- программирования.

ГЛАВА 2. Создание Web-страниц с помощью языка HTML

2.1. Анализ современных сайтов

Интернет технологии стремительно развиваются в современном обществе и охватывают все сферы деятельности человека. Разработка дизайна сайта стала одним из важнейших моментов. Каждый проект требует дизайн, который раскроет стиль, направление и имидж компании. Поэтому необходимо использовать дизайн, который передавал бы фирменный стиль и уникальность компании, настраивая посетителя на более полное и качественное понимание информации, размещенной на сайте [17].

Что подразумевает под собой словосочетание дизайн сайта — это творческая работа, сочетающая в себе специальные знания и навыки, а также чувства вкуса и стиля. Он считается одним из основных компонентов удачного интернет-проекта, хорошо разработанный дизайн – это то, при помощи чего будет повышаться рейтинг веб-сайта. Развитие интернета происходит с очень большой скоростью, а количество пользователей всемирной глобальной паутины ежегодно возрастает в геометрической прогрессии. Всё больше количество людей черпает информацию о интересующих их товарах, предложениях или фирмах при помощи компьютера, имеющего доступ в интернет, а компании активно развивают сегмент интернет торговли. Обращаясь в компанию по разработке веб-дизайна или к человеку, занимающемуся разработкой интернет-сайтов, заказчик часто не знает, какой сайт ему потребуется. Существует определенная классификация сайтов по видам. Опишем наиболее часто встречающиеся категории (виды) интернет-сайтов [18]:

Сайт-визитка – как правило, содержит несколько веб-страниц, имеет не сложный и функциональный дизайн; востребован в компаниях, которые хотят представить информацию о себе и своих услугах в сети интернет; основные разделы сайта: «О компании», «Продукция или услуги», «Прайс-листы», «Контактная информация»; сайт-визитка чаще всего используется в качестве рекламного, предприятиями малого бизнеса и частными лицами.

Корпоративный информационный web-сайт – реализуют с целью создания автоматизации внутреннего документооборота, учёта показателей компании, управления персоналом, функционал сайта поддерживает обмен информацией между удалёнными филиалами; корпоративный сайт способствует росту репутацию и имиджа компании; соответственно дизайн сайта должен быть выполнен в    фирменном стиле компании; чаще всего, сайт содержит «администраторскую часть» для создания, а также внесения изменений в контент , позволяющий менеджеру или секретарю компании добавлять или менять новости, информационные статьи, справочную и прочую информацию на сайте; в дизайне используется минимум графики, основной упор делается на тестовую информацию. Сайт предназначен для предоставления подробной информации о компании, истории торговой марки, сведений об оказываемых услугах или поставляемых товарах; может содержать новостную ленту компании, информации о рекламных и торговых акциях, информационный блок для прессы; каталог продукции компании; всё это необходимо для создания оригинального дизайна, выгодно представляющего компанию.

Интернет-магазин – веб-ресурс рекламирующий товар или услугу, продающий различные товары принимающий заказы на покупку, предлагающий пользователю выбор варианта расчета, выписывающий счет на оплату, служащий одновременно подтверждением заказа. Помимо всего этого наполняем интернет-магазин уникальными текстами, которые впоследствии размещаются в разделах "О магазине", "Доставка", "Оплата", "Гарантия", "Возврат", а также на главной странице сайта. СЕО-тексты снабжаются ключевыми фразами, релевантными для каждой конкретной страницы. Написанные в едином стиле, четко соответствующие образу компании тексты для интернет-магазина, будут индикатором серьезности, привлекут внимание посетителей и станут помощниками в успешных продажах.

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

Контент-проект – сайт, как правило, некоммерческой направленности, представляет собой собрание текстов, статей и прочих материалов, основная задача сайта – привлечение посетителей по определенной тематике. Может быть реализован в виде интернет-библиотеки, энциклопедии или справочника, а также при условии размещения на нем подходящей по тематике рекламы, дает качественный и тематический трафик на коммерческие сайты партнеров (а значит и конвертацию посетителей в покупателей). А также представлен в виде образовательного или развлекательного ресурса.

Промо-сайт – сайт, созданный исключительно для продвижения какого- либо определённого товара, либо услуги или основного сайта компании. В основном он создаётся в целях оптимизации сайта для получения более высоких мест в рейтингах поисковых машин, которые дают сайту (а значит – компании) большее количество посетителей, и соответственно приносят больший доход.

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

Flash-сайт – это полностью анимированный сайт. Такие сайты чаще всего используются для продвижения имиджевой презентации какого-либо товара, продукта или услуги. Одним из основных недостатков сайтов такого типа является то, что внутренние тексты сайта не видны поисковым машинам, и посетители интернета не могут находить через поисковые машины. Для продвижения таких сайтов, используют печатные издания, телевидение, радио, наружную рекламу и т. п.

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

Рассмотрим наиболее распространенные ошибки веб-дизайна. При создании сайта нельзя применять сразу много шрифтов, лучше использовать оптимальное количество шрифтов. Также не смешивайте в дизайне сайта 2 рубленый шрифт и шрифт с засечками. Очень важно выбрать правильную величину шрифта, настроить разумный междустрочный интервал и установить целесообразный тон текста, а также подобрать контраст для текста. Для идеального выравнивания используйте систему сеток, которая позволит идеально выровнять текст и элементы. Выберите правильный подход к выравниванию блоков, обратите внимание на абзацы и интервалы в тексте, выровняйте их в соответствии с запланированным дизайном, соблюдайте однообразие дизайна. Не используйте слишком большое пространство между блоками, лучше используйте одинаковые отступы между блоками. Для удобства пользователей расположите привычные элементы сайта в стандартном порядке и сделайте удобную навигацию по сайту, уберите визуальный шум, выделяйте правильно ссылки в тексте, не разбрасывайте кнопки по главной странице, избавьтесь от хлама на главной странице. Откажитесь от использования устаревшего контента и поспешной публикации. Оптимизируйте поиск по сайту и совместимость браузеров, сделайте сайт разборчивее. Улучшите масштабируемость фотографий. 

2.2. Создание простых страниц на HTML

Разбивка на абзацы

Чтобы разместить определенный текст на странице, текст может быть заготовлен заранее, тогда добавляются требуемые теги, или же Интернет-страница должна быть в виде шаблона, текст можно ввести в него с клавиатуры или скопировать через буфер обмена. Когда мы в тексте прописываем абзац, в браузере это игнорируются, поэтому каждый абзац обрамляется парой тегов: <P> (в начале) и </P> (в конце), так как этот тег закрывающийся, тогда между абзацами автоматически оставляется небольшой отступ [1].

Для начала новой строки используются тег <BR>.Приводит к отображению браузером и переносит текст на новую строку. Этот тег не закрывающийся. Тег этот удобен тем, что, если требуется писать с новой строки без начала нового абзаца, например, стихотворение. Повторное использование этого тега позволяет вставить одну или несколько пустых строк [4].

Выравнивается с помощью атрибута ALIGN, если по умолчанию то будет слева, ALIGN записывается внутри тега <P>: < P ALIGN =… >, где можно записать одно из следующих значений:

CENTER - центрировать

RIGHT – выровнять по правому краю

LEFT – выровнять по левому краю

JUSTIFY – выравнивание по формату (по левому и правому краям одновременно).

При использовании данного атрибута в конце абзаца нужно обязательно записать закрывающий тег </P>.

Текстовый блок

В случае необходимости указания специальных свойств отдельному фрагменту текста используется тег <DIV> [8].

Тег DIV является структурным тегом, а также создает принудительный перенос строки на одну после своего закрывающегося тега. Поэтому задавать с его помощью отдельные свойства фрагмента внутри абзаца нельзя — это вызовет принудительный перенос строки.

Для этого тега возможно использование атрибута типа выравнивания ALIGN.

Заголовки и подзаголовки

В HTML чтобы объявить текст заголовком или подзаголовком (задав для него крупный и жирный шрифт, чем для остального текста), достаточно заключить абзац в тег <H*>...</H*>, где записаны звездочки записывается цифры от 1 до 6 (если тег открыт к примеру с цифрой 3 , то и закрывается он с той же цифрой). При 1 — это задает шрифт наибольшего размера, 2 – чуть меньше и т. д. до 6. Так же можно указать выравнивание, по умолчанию будет стоять по левому краю. Чтобы выровнять, можно воспользоваться атрибутом ALIGN и записать в составе открывающего тега <H*> [14].

Управление начертанием текста

Управление параметрами текста используется простой способ. В фрагментах текста произвольной длины или отдельных слов, можно использовать специальные теги для делаемого начертания - полужирное, курсивное, подчеркнутое или ''зачеркнутое'' используя соответственные теги <B>...</B>, <I>...</I>, <U>...</U> и <S>...</S> [17].

Использование подчеркивания в HTML-документе нежелательно, чтобы пользователь не путал такой текст с гиперссылками.

А для получения нижних индексов или верхних используются теги <SUB>…</SUB> и <SUP>…</SUP>. Эти теги могут быть, как вложены в текст абзаца, так и, наоборот, содержать в себе один или несколько абзацев. Также их можно комбинироваться друг с другом для получения ''смешанных'' начертаний [11].