Регистрация сайта в поисковых системах и тематических каталогах

⇐ ПредыдущаяСтр 2 из 2

После размещения сайта на хостинге необходимо зарегистрироваться в поисковых системах и тематических каталогах Yahoo, Rambler, Апорт и (адреса регистрации находятся на страничке и осуществить раскрутку сайта. Для раскрутки применяются различные средства.

Контроль посещаемости сайта осуществляется по счетчикам. Поисковые машины, как правило, имеют рейтинговые системы, которые ранжируют ресурсы по их посещаемости. Для участия в рейтинге установите на главной странице своего сайта счетчики рейтингов.

Поддержка и регулярные обновления (развитие) сайта

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

1.2Основы создания сайта

Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между элементами.

HTML-документ — это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот), так и в специализированном, с подсветкой кода(Notepad++). HTML-документ имеет расширениеhtml.

Язык HTML — язык тегов. Теги описывают структуру HTML-документа. Теги оформляются угловыми скобками , между которыми прописывается имя тега.

Теги располагаются в HTML-документе в соответствии с правилами разметки (порядок следования, правило вложенности тегов), создавая разделы будущей веб-страницы. Кроме тегов, HTML-документы могут содержать специальные символы.

Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы — заголовки, таблицы, изображения и т.д.

Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.

Практически все теги имеют атрибуты (глобальные, применяемые для всех html-элементов, и собственные), указываемые в формате атрибуты=”значение” Атрибуты позволяют изменять свойства элемента, для которого они заданы. Атрибуты прописываются в начальном теге элемента

Атрибуты class и id применимы ко всем HTML-элементам, за исключением элементов, содержащих техническую информацию — <html>, <head>, <title> , <meta>. Каждому элементу можно присвоить несколько значений class и только одно значение id. Множественные значенияclass записываются через пробел, <divclass= “ navtop”>. Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.

Большинство тегов — парные, они состоят из начального и закрывающего тегов.Начальный тег показывает, где начинается элемент, закрывающийся — где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем тега:<имя тега> …</имя тега>Между начальным и закрывающим тегами находится содержимое тега — контент.

Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег<inputtyp”button” value=”Кнопка”>создаст кнопку с текстом Кнопка внутри.

Теги могут вкладываться друг в друга, напримерТекст. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки»), например, следующая запись будет неверной:Текст .

HTML-документ состоит из двух разделов — заголовка — между тегами<head>…</head> и содержательной части — между тегами <body>…</body>

1.3 Основной принцип “юзабилити”

Первый закон юзабилити: «не заставляйте меня думать!»
Этот принцип является решающим при оценке того, что и как работает (или не работает) в Web-дизайне. В той мере, насколько этого можно достичь, Web-страница должна быть максимально простой, понятной и «самоочевидной». Другими словами, пользователь должен сразу «схватить» ее – понять, что на ней и как ей пользоваться без затраты каких-либо усилий.

Что значит: простой, понятной и «самоочевидной»?

Когда смотришь на страницу, в голове должно возникать нечто вроде: «Так, понятно, это вот это…а вот это вот то…а вот это то, что мне нужно». Но когда смотришь на страницу, которая заставляет думать, все мысли принимают форму вопросительных знаков.

Когда вы создаете сайт, ваша основная задача состоит в том, чтобы избавиться от вопросительных знаков. Чем меньше вопросов, тем лучше.

Разные вещи на Web-странице могут заставить нас без надобности останавливаться и задумываться. Например: вычурные и заумные названия, торговые марки, фирменные знаки, незнакомые технические термины. Название раздела лежит в неком диапазоне «Понятно каждому» и «Совсем понятно». Возможны разные положения внутри этого диапазона.

Другой источник вопросительных знаков – ссылки и кнопки, вид которых не всегда ясно показывает, что на них можно нажать. Пользователь никогда не должен тратить и сотой доли секунды но то, чтобы разбираться, можно или нельзя щелкнуть по объекту. Всякий лишний вопрос создает нагрузку для нашего восприятия, когда мы находимся в сети, и отвлекает внимание от текущей задачи. Если сами разработчики не задумываются о том, чтобы сделать все очевидным, то это подрывает доверие к содержанию сайта и его создателям.

Вопросы, о которых посетители сайтов не должны задумываться:

· Где я?

· Откуда следует начинать?

· Что самое главное на этой странице?

· Почему это называется так?

Ваша цель – каждую страницу сделать «самоочевидной», чтобы при первом взгляде посетитель мог понять, что это и как этим пользоваться. Однако в ряде случаев, когда требуется создать нечто оригинальное, ошеломляющее или очень сложное, трудно достичь полной простоты и ясности и приходится довольствоваться только понятностью. Понятная страница не нуждается в пояснениях. Внешний вид элементов, хорошо подобранные названия, общий вид страницы и небольшой объем тщательно составленного текста – все это должно создавать почти мгновенное понимание у пользователя. Если нет возможности сделать страницу полностью самоочевидной, то, по крайней мере, сделайте ее понятной.

Ясность и простота для Web-страницы – как хорошее освещение для витрины магазина – при них все кажется
лучше. Легко использовать сайт, который не принуждает задумываться о несущественном.

1.4. Язык гипертекстовой разметки HTML

HyperText Markup Language(HTML) – язык разметки гипертекста – предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.

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

Существует два способа создания гипертекстовых документов. Можно воспользоваться одним из WYSIWYG HTML-редакторов (например, Microsoft FrontPage, или др.), для работы с которыми не требуется специальных знаний о внутренней структуре создаваемого документа. Этот способ позволяет создавать документы для WWW без знания языка HTML. HTML-редакторы автоматизируют создание гипертекстовых документов, избавляют от рутинной работы. Однако их возможности ограничены, они сильно увеличивают размер получаемого файла и не всегда полученный с их помощью результат соответствует ожиданиям разработчика. Но, безусловно, этот способ незаменим для новичков в деле подготовки гипертекстовых документов.

Альтернативой служит создание и разметка документа при помощи обычного редактора текста (NotePad). При этом способе в текст вручную вставляются команды языка HTML. Создавая документы таким способом, вы точно знаете, что делаете.

Как уже отмечалось, HTML-документ содержит символьную информацию. Одна ее часть - собственно текст, т. е. данные, составляющие содержимое документа. Другая – теги(markup tags), называемые такжефлагами разметки, – специальные конструкции языка HTML, используемые для разметки документа и управляющие его отображением. Именно теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ. Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащие HTML-документы, приняты расширения .htm или .html.

Прописные и строчные буквы при записи тегов не различаются.В большинстве случаев теги используются парами. Пара состоит из открывающего (start tag) и закрывающего (end tag) тегов. Синтаксис открывающего тега:

<имя_тега [атрибуты]>

Прямые скобки, используемые в описании синтаксиса, означают, что данный элемент может отсутствовать. Имя закрывающего тега отличается от имени открывающего лишь тем, что перед ним ставится наклонная черта:

</имя_тега>

Атрибуты тега записываются в следующем формате:

имя[="значение"]

Кавычки при задании значения аргумента не обязательны и могут быть опущены. Для некоторых атрибутов значение может не указываться. У закрывающего тега атрибутов не бывает.

Действие любого парного тега начинается с того места, где встретился открывающий тег и заканчивается при встрече соответствующего закрывающего тега. Часто пару, состоящую из открывающего и закрывающего тегов, называют контейнером, а часть текста, окаймленную открывающим и закрывающим тегом, –элементом.

Последовательность символов, составляющая текст, может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например, +, #, $, @), за исключениемследующих четырех символов, имеющих в HTML специальный смысл: < (меньше), > (больше), & (амперсенд) и " (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов.

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

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

Закрывающий тег так же важен, как и открывающий. Если, например, документ включен в электронное письмо, тег </HTML> дает команду программе просмотра прекратить интерпретацию текста, как HTML-кода.

HTML-документ состоит из двух частей: заголовок (head) и тело (body), расположенных в следующем порядке:

<HTML>

<HEAD>

...

</HEAD>

<BODY>

...

</BODY>

</HTML>

В HTML-документ можно включать комментарии, позволяющие скрыть часть текста от браузера. Все, что заключено между последовательностями символов , при просмотре страницы остается невидимым. Комментарии не могут быть вложенными друг в друга

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

Заголовок документа открывается тегом <HЕAD>, который обычно следует сразу же за тегом <HTML>. Закрывающий тег </HEAD> показывает конец этого раздела, между ними располагаются остальные теги заголовка документа.

Чаще всего в заголовок документа включают парный тег <TITLE> ... </TITLE>, определяющий название документа. Многие программы просмотра используют его как заголовок окна, в котором выводят документ. Программы, индексирующие документы в сети Интернет, используют название для идентификации страницы. Хорошее название должно быть достаточно длинным для того, чтобы можно было корректно указать соответствующую страницу, и в то же время оно должно помещаться в заголовке окна. Название документа вписывается между открывающим и закрывающим тегами. Тело документа

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

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

Цвет может быть задан названием (например, green) или шестнадцатеричным числом, определяющим цвет в модели RGB. Эта цветовая модель базируется на определении цвета как композиции трех основных оттенков цвета: красного (Red), зеленого (Green) и синего (Blue). Каждая компонента задается двузначным шестнадцатеричным числом (т. е. изменяется от 00 до FF). Затем эти значения объединяются в одно число, перед которым ставится символ # (большинство современных браузеров может распознать цвет и без указания символа #).

Язык HTML предполагает, что автор документа ничего не знает о компьютере своего читателя. Читатель вправе установить любой размер окна и пользоваться любым из имеющихся у него шрифтов. Это означает, что место переноса в строке определяется только программой просмотра и установками конечного пользователя. Символы перевода строки оригинального документа игнорируются, в результате чего текст, отлично смотревшийся в окне вашего редактора, может превратиться в сплошной неудобочитаемый текст в окне программы просмотра.

Избежать этой неприятности позволяет разделение на абзацы при помощи тега <Р>.Разместите его в начало каждого абзаца, и программа просмотра отделит абзацы друг от друга пустой строкой. Использование закрывающего теганеобязательно. Несколько стоящих подряд тегов<Р> не дают дополнительного пространства между абзацами.

Иногда требуется "разорвать" текст, перенеся его остаток на новую строку, при этом не выделяя нового абзаца. Для этого используется тег разрыва строки .Он заставляет программу просмотра выводить стоящие после него символы с новой строки. В отличие от тега абзаца, тег не добавляет пустую строку. У этого тега нет парного закрывающего тега.

Пример

<HTML>

<HEAD>

<TITLE>ИосифБродский</TITLE>

</HEAD>

Откуда к нам пришла зима,

не знаешь ты, никто не знает.

Умолкло все. Она сама

холодных губ не разжимает.

</BODY>

</HTML>

Некоторые браузеры интерпретируют несколько стоящих рядом тегов как один тег, поэтому не стоит использовать его для вставки пустых строк.

· Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы. Тег <HR>позволяет провести рельефную горизонтальную линию в окне большинства программ просмотра. Этот тег не требует закрывающего тега. До и после линии автоматически вставляется пустая строка.

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

Название документа, задаваемое с помощью тега <TITLE>, не выводится на экран как часть документа. Чтобы отобразить название используется один из тегов заголовка. Заголовки в типичном документе разделяются по уровням. Язык HTML позволяет задать шесть уровней заголовков:H1(заголовок первого уровня),Н2, Н3, H4, Н5иH6. Заголовок первого уровня имеет обычно больший размер и насыщенность по сравнению с заголовком второго уровня.

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

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

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

жирный и подчеркнутый текст

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

После стартового тега обязательно указание атрибутов, без которых элемент не оказывает никакого влияния на текст, помещенный в контейнер.

Атрибут FACEпозволяет указать тип шрифта, которым программа просмотра выведет ваш текст (если таковым располагает пользователь). Если нужного шрифта нет, программа проигнорирует запрос и будет использовать шрифт, установленный по умолчанию.

Этот атрибут позволяет указать как один, так и несколько шрифтов (через запятую). Весь список будет просмотрен слева направо и первый из имеющихся на машине пользователя будет использован для вывода документа.

Атрибут SIZEслужит для указания размера шрифта в условных единицах от 1 до 7. Считается, что размер "нормального" шрифта соответствует числу 3. Размер может быть как абсолютной величиной (SIZE=5), так и относительной (SIZE=+2). Во втором примере текущий размер шрифта увеличивается на 2.

Атрибут COLORустанавливает цвет шрифта, который может быть задан как в формате RGB, так и указанием имени.

Пример

Текст красного цвета и

большого размера

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

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

<A HREF="URL_ресурса">фрагмент документа</A>

HREFздесь является обязательным атрибутом, значение которого и есть URL-адрес запрашиваемого ресурса. Кавычки в задании значения атрибутаHREFне обязательны.

Текстовые указатели,т. е. фрагменты текста, являющиеся ссылками, не отличаются разнообразием внешнего вида. Обычно такой указатель представляет собой слово или слова, подчеркнутые прямой линией. Цвет указателя может регулироваться автором и установками программы просмотра.

Пример<A HREF="example.html">Ссылка</A>

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

Пример <A HREF="example.html"><IMG SRC="pict.gif"></A>

В настоящее время стандарты HTML поддерживают теги для списков трех различных видов: нумерованных (упорядоченных), маркированных (неупорядоченных) и списков определений. Списки и элементы списков являются блочными элементами. Это означает, что перед ними и после них автоматически добавляются пустые строки.

Язык HTML допускает вложенность любых видов списков. Для этого размещают одну пару тегов (стартовый и завершающий) внутри другой. Следует помнить о том, что все имеющиеся списки должны завершаться закрывающим тегом.

Нумерованные (упорядоченные) списки используют, когда важен порядок вывода элементов списка. Браузер автоматически вставляет номера элементов по порядку, в исходном HTML-тексте номера не печатаются. Если количество элементов списка изменится (в результате удаления или добавления новых элементов), то нумерация автоматически обновится.

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

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

Маркированный список начинается стартовым тегом <UL>и завершается тегом</UL>. Каждый элемент списка начинается с тега<LI>и завершается (необязательным) тегом</LI>.

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

При выводе вложенных маркированных списков браузер автоматически проставляет маркеры перед элементами, находящимися на разных уровнях вложенности.

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

При формировании таблицы применяется несколько парных тегов.

<TABLE> и </TABLE>. Указывают на начало и конец таблицы. Все остальные теги и текст таблицы должны находиться между этими двумя тегами.

<TR> и </TR>. Отмечают начало и конец строки. Все шапки и ячейки любой строки должны находиться между этими двумя тегами.

<ТН> и </ТН>. Определяют начало и конец ячейки шапки таблицы.

<TD> и </TD>. Отмечают начало и конец ячейки данных.

Кроме того, с помощью тега <CAPTION>, размещаемого внутри тега <TABLE> можно создать заголовок таблицы.

<html>

<head>

<title>MARVEL</title>

</head>

<h1>CAPITAN AMERIKA MARVEL</h1>

</center>

<a href="http://top.roleplay.ru/r3410p1.html"><img src="avengers2099-cap.jpg"

<justify>.

<CENTER> Читайте далее!)

<tr><td><blockquote><a href="http://top.roleplay.ru/r3410p1.html">RPG TOP.

<tr><td bgcolor="#E4002E" ><center >Киновселенная</td><td bgcolor="#4285f4" ><center >БЭТМЭН</td><tr>

<tr><td bgcolor="#B38D01" ><center >Комиксы</td><td bgcolor="#00C39F" ><center >DC</td><tr>

<tr><td bgcolor="#99BB00"><center>ИГРЫ</td><td bgcolor="#00C583" ><center >МАРВЕЛ</td><tr>

<tr><td bgcolor="#99BB00"><center>Сериалы</td><td bgcolor="#00C583" ><center >КапитанАмерика</td>

</table

</html>

Дата добавления: 2018-04-05; просмотров: 262; Мы поможем в написании вашей работы!

Поделиться с друзьями:

⇐ Предыдущая 12

Мы поможем в написании ваших работ!