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

Файлы веб-страниц

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

Главная страница веб-узла обычно имеет имя index.html, поскольку это - применяемое по умолчанию имя файла, которое ищут браузеры. Например, если пользователь введет в браузере адрес http://www.leonardo-studio. narod.ru, то он увидит страницу данного веб-сайта, хранящуюся в файле index. htm.

Каждый рисунок, который отображается на веб-странице или служит ее фоном, хранится в отдельном файле. Обычно это файлы с расширением gif, jpg, jpeg, png, bmp.

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

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

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

Реализация - это и есть работа по созданию сайта. На этом этапе проводится подготовка текстового и графического материала (печать, сканирование). Материал разбивается по файлам в соответствии со структурой. Организуются ссылки между файлами сайта. Рекомендуется создать шаблон-заготовку страницы с основными структурными областями и стилевым оформлением и использовать ее для создания всех страниц узла. Завершив работу по размещению страниц на Web-сайте, необходимо выполнить тестирование. Оно состоит из двух этапов: тестирование на работоспособность и тестирование на удобство пользования интерфейсом. На этапе тестирования на работоспособность проверяют, как функционирует Web-сайт, используя те же условия, при которых с ним будет работать пользователь.

Средства разработки Web-страниц

Для разработки web-страниц сайта можно использовать следующие инструментальные средства.

1) Текстовые редакторы для работы с “чистым" HTML-кодом. Поскольку HTML-документ представляет собой текстовый файл, его можно подготовить в простейшем текстовом редакторе, например, в блокноте (notepad), но при этом все команды разметки придется вводить вручную.

2) Программные средства, которые имеют специальные встроенные компоненты для конвертирования данных, созданных в этих продуктах, в HTML формат. Например, программы широко используемого пакета MS Office, начиная с версии 97, позволяет сохранить документ в формате HTML. При этом сохраняются, насколько это возможно, особенности форматирования символов и абзацев, изображения, таблицы, списки и так далее. Многие современные графические редакторы предоставляют возможность сохранить коллекцию картинок в виде HTML-документа. Надо отметить, что при таком конвертировании исходный текст HTML-документа получается крайне избыточным и нуждается в коррекции.

3) Специализированные программные средства - web-редакторы, предназначенные специально для разработки web-сайтов. Современные требования, предъявляемые к web-редакторам, включают в себя:

· Поддержку каскадных таблиц стилей.

· Использование современных скриптовых языков, таких как JavaScript и т.д.

· Генерацию Dynamic HTML для различных браузеров.

· Средства наглядного дизайна: вставка изображений, таблиц и фреймов.

· Динамическое отображение создаваемой страницы в браузере.

· Шаблоны WWW-страниц или специальные программы - "мастера" по их созданию.

Средства по управлению web-сайтом (создание файловой структуры сайта, отслеживание связей и проверка ссылок между страницами, публикация сайта в Интернет). Существуют две разновидности web-редакторов: визуальные и невизуальные.

Невизуальные редакторы работают с "чистым" HTML-кодом. Они предоставляют возможность быстрого ввода тэгов HTML с использованием инструментальных панелей, вставки изображений и таблиц с помощью специальных диалоговых окон, работы с файловым менеджером для выбора папок и файлов, подсветки синтаксиса, проверки правильности получившегося кода и ссылок, использования справки по тегам и их атрибутам. Невизуальные web-редакторы часто называют HTML-редакторами. Они прекрасно подходят как для опытных web-дизайнеров, знающих HTML и прекрасно представляющих, как должна выглядеть web-страница в результате тех или иных изменений в ее коде, так и для тех, кто только начинает осваивать процесс создания сайта.

Визуальные редакторы позволяют работать с самой web-страницей "как она есть", в режиме WYSIWYG (WhatYouSeeIsWhatYouGet - То, что ты видишь, то и получаешь). Редактирование и форматирование текстов, вставка рисунков, таблиц, гиперссылок и других элементов происходит как в обычном текстовом редакторе, а сама программа формирует (генерирует) соответствующий HTML-код. Кроме средств визуального редактирования эти web-редакторы одновременно предоставляют доступ к получившемуся HTML-коду.

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

1) Свободно распространяемые (бесплатные). В основном это невизуальные html-редакторы, разработанные небольшой группой авторов. Визуальные редакторы этой группы имеют ограниченный набор средств визуального редактирования. Характеризуются небольшим объемом занимаемой памяти, а некоторые из них даже не требуют специальной установки.

2) Условно-бесплатные. Web-редакторы этой группы характеризуются невысокой ценой - от 300 рублей.

формат код интернет сайт

3) Платные. В эту группу входят невизуальные и визуальные редакторы, разработанные крупными фирмами. Отвечают всем требованиям, предъявляемым к современным web-редакторам. Накладывают определенные ограничения на ресурсы компьютера. Обычно имеются демо-версии продукта, которые можно установит бесплатно и работать с ними ограниченное время (30 дней).

Язык разметки гипертекста HTML

Для реализации функционала различной направленности, web-программисты “пишут” сайты, используя соответствующий языки веб-разметки, с целью максимально расширить интерактивные возможности веб-ресурса.

HTML - это один из самых старых языков web-программирования, появившийся еще на заре развития Интернета, и зарекомендовавший себя как один из самых простых и надежных способов web-программирования.html расшифровывается как Hyper Text Markup Language - Язык Разметки Гипертекста. Сайты, созданные по технологии HTML в большинстве своем являются набором статических страниц, не требующих наличия базы данных.

Структура документа HTML

Все документы HTML имеют одну и ту же структуру, определяемую фиксированным набором тегов структуры. Документ HTML всегда должен начинаться с тега < HTML > и заканчиваться соответствующим закрывающим тегом (</ HTML>).

Внутри документа выделяются два основных раздела: раздел заголовков и тело документа, - идущих именно в таком порядке. Раздел заголовков содержит информацию, описывающую документ в целом, и ограничивается тегами <НЕАD> и </НЕАD>. В частности, раздел заголовков должен содержать общий заголовок документа, ограниченный парным тегом <ТITLE>.

Основное содержание размешается в теле документа, которое ограничивается парным тегом <ВОDY>. Строго говоря, положение структурных тегов в документе нетрудно определить, даже если и они опущены. Поэтому стандарт языка HTML требует только наличия тега < TITLE > (и, соответственно, </ТITLE>). Тем не менее, при создании документа HTML опускать структурные теги не рекомендуется. Простейший правильный документ HTML содержащий все теги, определяющие структуру, может выглядеть следующим образом:

<HTML >

<HEAD>< TITLE > Заголовок документа < /TITLE ></HEАD>

<BODY>

Текст документа

</BODY>

</HTML >

Элементы HTML

Большинство элементов языка HTML описывает части содержания документа и помещается между тегами <BODY>. и </BODY>, то есть внутрь структурного элемента BODY. Такие элементы делят на блочные и текстовые. Блочные элементы относятся к частям текста уровня абзаца. Текстовые элементы описывают свойства отдельных фраз и еще болей мелких частей текста.

В большинстве документов основными функциональными элементами являются заголовки и абзацы. Язык HTML. поддерживает шесть уровней заголовков. Они задаются при помощи парных тегов от <Н1> до <Н6>.

Обычные абзацы задаются с помощью парного тега <Р>. Язык HTML. не содержит средств для создания абзацного отступа ("красной строки"), поэтому при отображении на экране компьютера абзацы разделяются пустой строкой. Закрывающий тег </Р> рассматривается как необязательный. Подразумевается, что он стоит перед тегом, который задает начало очередного абзаца документа.

Например:

<H1>Заголовок </H1>

<Р>Первый абзац<Р>Второй абзац

<H2>Заголовок второго уровня</Н2>

Следствием наличия специального тега, определяющего абзац, является тот факт, что обычного символа конца строки, вводимого по нажатию клавиши ENTER, для создания абзацного отступа недостаточно. Язык HTML. рассматривает символы конца строки и пробелы особым образом. Любая последовательность; состоящая только из пробелов и символов конца строки, при отображении документа рассматривается как одиночный пробел. Это, в частности, означает, что символ конца строки даже не осуществляет перехода на новую строку (для этой цели используется текстовый элемент, задаваемый непарным тегом <BR>.

В качестве ограничителя абзацев может также использоваться горизонтальная линейка. Этот элемент задается непарным тегом <HR>. При отображении документа на экране линейка разделяет части текста друг от друга. Ее длина и толщина задается атрибутами тега <HR>.

Основной параметр абзацев - align - выравнивание текстов на экране ЭВМ. Выравнивание текстов производится браузерами автоматически в соответствии с размерами экрана ЭВМ:

align=center - по центру экрана:

align=left - к левому краю;

align=right - к правому краю;

align=justify - на весь экран.

Для выравнивания абзацев должен быть выбран единый общий стиль, который необходимо применять ко всем во всех гипертекстах на сайте.

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

Для выделения слов в гипертекстах можно использовать жирный шрифт или подчеркивание с помощью следующих тэгов:

<big> Большие символы </big>

<b> жирный шрифт </b>

<i> курсив </ i>

<u>подчеркивание </u>

<strike> перечеркивание </strike>

<small> маленькие символы </small>

Шрифтовое выделение в гипертекстах задается тэгом <font>: шрифты: = < font параметры> текст </ font>

Параметры шрифтов - их размер и тип. Размеры шрифта задаются параметром size = размер. Размер указывается явно от 1 до 6, либо в форме увеличения +1, +2

или уменьшении - 1, - 2.

Тип шрифта задается параметром face = шрифт

Здесь шрифт - один из стандартных шрифтов: "Times", "Courier" и т.д.

Цвет шрифта задается параметром со1ог = цвет, где цвет - цвет выделенного фрагмента гипертекста. Например - выделение текста красным цветом:

< font color = гed > текст </ font >

Стандартные названия цветов в языке НТМL:

red - красный, green - зеленый, blue - синий, black-черный,

white - белый, gold - золотой, yellow-желтый и т.д.

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

Размещено на Allbest.ru