|
Структура Html-документа
Тег "TITLE"
Один из наиболее важных тегов, которому поисковые системы придают огромное значение. Обязательно нужно использовать ключевые слова в теге TITLE.
Кроме того, ссылка на ваш сайт в выдаче поисковой системы будет содержать текст из тега TITLE, так что это, в некотором роде, визитная карточка страницы.
Именно по этой ссылке осуществляется переход посетителя поисковой системы на ваш сайт, поэтому тег TITLE должен не только содержать ключевые слова, но быть информативным и привлекательным.
Как правило, в выдачу поисковой системы попадает 50-80 символов из тега TITLE, поэтому размер заголовка желательно ограничить этой длинной.
Ключевые слова в тексте ссылок
Также очень простое правило - используйте ключевые слова в тексте исходящих ссылок с ваших страниц (как на другие внутренние страницы вашего сайта, так и на другие ресурсы сети), это может добавить вам небольшое преимущество при ранжировании.
Теги "ALT" изображений
Любое изображение на странице имеет специальный атрибут "альтернативный текст", который задается в теге "ALT". Этот текст будет отображен на экране в том случае, если скачать изображение не удалось или же показ изображений заблокирован в браузере.
Поисковые системы запоминают значение тега ALT при разборе (индексации) страницы, однако не используют его при ранжировании результатов поиска.
На данный момент достоверно известно, что поисковая система Google учитывает текст в теге ALT тех изображений, которые являются ссылками на другие страницы, остальные же теги ALT игнорируются. По другим поисковым систем точных данных нет, но можно предполагать что-то подобное.
В целом стоит дать такой совет - использовать ключевые слова в тегах ALT можно и нужно, хотя принципиального значения это не имеет.
Мета-тег Desciption
Мета-тег Description специально предназначен для задания описания страницы. Этот тег никак не влияет на ранжирование, но, тем не менее, очень важен. Многие поисковые системы (и, в частности, крупнейшая Google) отображают информацию из этого тега в результатах поиска, если этот тег присутствует на странице и его содержимое соответствует содержимому страницы и поисковому запросу.
Можно с уверенностью сказать, что высокое место в результатах поиска не всегда обеспечивает большое число посетителей. Если описание ваших конкурентов в результатах выдачи будет более привлекательным, чем вашего сайта, то посетители поисковой системы выберут именно их, а не ваш ресурс.
Поэтому грамотное составление мета-тега Description имеет большое значение. Описание должно быть кратким, но информативным и привлекательным, содержать ключевые слова, характерные для данной страницы.
Мета-тег Keywords
Этот мета-тег изначально предназначался для указания ключевых слов данной страницы. Однако в настоящее время он почти не используется поисковыми системами.
Структура Html-документа или с чего начинается каждая страничка
Html-код страничек будем писать в обычном блокноте Windows (Пуск> программы> стандартные> блокнот).
После того, как весь код будет написан (см. ниже), не забываем сохранить созданный файл с расширением .html или .htm (его дописываем прямо к названию файла через точку), но ни в коем случае не .txt!
Отредактировать сохраненный html-файл можно следующим образом: открываем страничку в браузере и выбераем команду меню (для IE): вид> просмотр HTML-кода, после чего и откроется html-код выбранной странички в блокноте (но может открыться в другом редакторе. Все зависит от настроек браузера.
Рассмотрим структуру html-документа
Самая первая строчка html-документа:
< ! DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Лучше всего указывать метод strict, иначе под IE появятся разные виды глюков. Самый расспространенный - неверная интерпретация IE margin'ов и padding'ов: он их суммирует сверху к общей длине блока. Новичкам советую пока не заморачиваться по этому поводу.
Весь html-документ заключается в теги:
< html>....< /html>
Добавляем голову html-документа - head:
< html>
< head>....< /head>< /html>
В голову пишем заголовок нашего сайта в тегах title:
< html>
< head>
< title>Заголовок.....< /title>
< /head>
< /html>
Затем добавляем мета-тег кодировки нашей странички (если пропустить этот важный момент, на вашем сайте возможно нежелательное появление иероглифов и других неопознанных объектов.
< html>
< head>
< title>Заголовок.....< /title>
< /head>
< /html>
На самом деле существует еще множество интересных мета-тегов, но об этом позже.
Далее (после title) добавляем тело html-документа (здесь содержится весь наш сайт: картинки, таблички, тексты...) - body:
< html>
< head>
< title>Заголовок.....< /title>
< /head>< body>.......< /body>
< /html>
< div align="center">< b>Мета-теги< /b>< /div>
Чтобы облегчить жизнь поисковым роботам (да и себе тоже), не забывайте о meta-тегах. Все они вставляются между тегами head.
< META NAME="Description" CONTENT="подробное описание вашего сайта">
это описание поисковик должен выдавать рядом с ссылкой на ваш сайт, правда далеко не все из них это делают.
< META NAME="Keywords" CONTENT="ключевые слова вашего сайта">
сильно на них не рассчитывайте: в последнее время поисковики при индексации больше обращают внимание на сам текст сайта, а не на набор ключевых слов в мета-тегах.
< META NAME="Updated" CONTENT="дата обновления">
дата последнего обновления сайта.
< META NAME="Document-state" CONTENT="Dynamic">
если документ часто обновляется.
< META NAME="revizit-after" CONTENT="7 days">
частота захода роботов на ваш сайт для последующей индексации. Это старый мета-тег и он редко работает :)
< META NAME="Document-state" CONTENT="Static">
если сайт не изменяется, можно заблокировать доступ робота к сайту.
< META NAME="robots" CONTENT="разрешение">
действия, разрешенные роботам: ALL (все действия разрешены), Index (можно индексировать страницу), Noindex (нельзя индексировать).
< META NAME="Rating" CONTENT="доступ">
указание доступа к вашему сайту: General (сайт доступен всем), 14 jears (доступен инетчикам от 14 лет; можно писать любую другую цифру для аналогичных случаев), Mature (только взрослым)...
< META NAME="URL" CONTENT="http://Адрес вашего сайта">
определение главной страницы для индексирования.
< META NAME="doc-type" CONTENT="Тип документа">
указание типа документа, например - "Homepage".
< META NAME="language" CONTENT="Russian Federation">
указание языка вашего сайта.
< META NAME="Author" CONTENT="Автор сайта">
здесь можно указать автора сайта.
Текст на странице
Со структурой странички разобрались, теперь можно заполнять сайт текстом. Сразу скажу, html-форматирование текста встрачается в сети редко. Все эти методы на профессиональных сайтах давно запрещены, к тому же они не удобны. Представьте, что вы решили изменить размер текста и его цвет на всех страничках своего сайта, а их у вас... допустим, 200! Мы же с вами не полезем менять код в каждой странице? Для этого существует CSS. Об этом расскажу как-нибудь попозже. А пока... новичкам будет полезна следующая информация.
Весь текст вставляем между тегами body. А чтобы раскрасить его в какой-либо цвет, достаточно заключить нужный фрагмент текста в теги FONT и указать код цвета:
< FONT COLOR="#код_цвета_html">
Наш текст. Всем привет!
< /FONT>
Размер шрифта указывается через SIZE (от 1 до 6), а вид шрифта - через FACE:
< FONT COLOR="#код_цвета_html" SIZE=3 FACE="Arial">
Твой текст< /font>
В FACE можно через запятую перечислить несколько шрифтов на случай, если у пользователя не будет первого, браузер выберет следующий.
Форматирование текста
Переформатированный текст
Это самый простой способ размещения текста на страничке, который позволяет сэкономить время при размещении на странице любого фрагмента уже отформатированного текста: просто заключите готовый текст в теги < PRE>......< /PRE>. В этом случае браузер сохранит в неприкосновенности все пробелы и Enter'ы. В общем, этот способ я не рекомендую:) Он в Explorere прокатит, а вот за другие браузеры я не ручаюсь, поэтому лучше размещайте текст на своей страничке по уму, договорились? Об этом читайте ниже!
Разбивка на абзацы
Все абзацы заключаются в теги < P>...< /P> .Т.е. весь текст находящийся между этими тегами будет абзацем.
Можно написать:
< P>Этот текст будет абзацем, поскольку предоставленная мне информация по HTML является достоверной.< /P>
Или:
< P>Этот текст будет
абзацем, поскольку
предоставленная мне информация по HTML
является достоверной.< /P>
В обоих случаях браузер отобразит одно и то же:
Этот текст будет абзацем, поскольку предоставленная мне информация по HTML является достоверной.
Выравнивание абзацев
По умолчанию все абзацы выравниваются в браузере по левому краю. Обойти это просто, если учесть, что за выравнивание отвечает параметр ALIGN (записываем в < P>)
< P ALIGN= CENTER>Этот текст будет по центру < /P>
< P ALIGN=RIGHT>Текст справа< /P>
< P ALIGN=LEFT>Текст слева< /P>
Часто бывает необходимо равномерно распределить текст по абзацу (чтобы текст не обрывался по правому краю), за выравнивание по строке (и по левому и по правому краю одновременно - как в этом абзаце (на этой странице)) отвечает параметр JUSTIFY в АLIGN. Имейте в виду: не все редакторы распознают этот параметр! Если вы пишите свою страничку в блокноте, то там таких проблем нет. А самый главный недостаток этого параметра, на мой взгляд, это то, что он иногда любит переносить на следующую строку повтор слова конца предыдущей строки. Не знаю откуда такие глюки. Ну и, конечно, что в нем не нравится обычно: если слов в предложении мало, то они некрасиво растянутся по всей строке, образуя пустоты между словами...
С абзацами разобрались, перейдем к строкам.
Разрыв строки
Переход на новую строку осуществляется с помощью тега < BR>. Он ставится в конце нужной строки, которую обрываем. Что-то типа обыкновенного Enter'a. У него нет закрывающегося тега!
Если просто хотите сделать несколько пустых строк (без текста), то запишите подряд нужное число раз
.
Например, три пустые строки: < BR>< BR>< BR>
Заголовки и подзаголовки
Нужный текст заключаем в теги < H*>....< /H*>, роль звездочки* выполняет цифра от 1 до 6. Самый крупный заголовок - 1; самый маленький - 6. Это грубый контроль за размером шрифта, на вкус и цвет... Но если указать размеры заголовков в Css'ке, то все будет ok.
Управление начертанием текста
полужирный шрифт заключаем в теги < B>...< /B>
курсив: < I>...< /I>
подчеркнутый текст: < U>...< /U>
вычеркнутый текст: < S>...< /S>
верхний индекс: < SUP>...< /SUP>
нижний индекс: < SUB>...< /SUB>
пишущая машинка: < TT>...< /TT>
Графика на web-страницах
Лучше всего размещать на сайте картинки форматов gif или jpg. Иногда нужны и png, а вот bmp'шки не рекомендуются из-за своего гигантского размера: чем больше весит картинка, тем дольше она будет загружаться при просмотре ваших страниц, в результате
чего гость просто сбежит с вашего сайта или отключит показ картинок в браузере :)
Картинки вставляются с помощью тега IMG с указанием адреса самой картинки (можно через http. Кстати, url-адрес любой картинки в сети можно узнать, кликнув правой кнопкой по выбранной картинке и выбрать там пункт "свойства") в src:
< img src="images/cat.gif" width="100" height="200">
width - ширина картинки в пикселах;
height - высота картинки, тоже в пикселах.
Не забывайте указывать параметры width и height! Это один из способов ускорения загрузки графики.
А еще, для каждой картинки можно прописать alt-текст. В этом случае при наведении мышки на картинку появится всплывающий комментарий. Например:
< img src="images/cat.gif" width="100" height="200" alt="котенок :)">
Если пользователь отключит показ картинок в своем браузере, то вместо картинок увидит эти надписи-комментарии. А по стандартам html указывать alt обязательно всегда, в некоторых случаях можно писать пустой alt="".
Кроме alt'a существует еще и title. В отличие от alt'a, с отключенными картинками при title на экране мы не увидим никаких комментариев к отключенным изображениям в IE. В Firefox наоборот: видимы значения title, но не видны alt'ы (alt всплывает). И еще, title можно приписывать к текстовым ссылкам. Бывает полезно и очень удобно:)
Обтекание картинок текстом
Картинку можно расположить слева или справа от текста. За ее расположение отвечает параметр align:
< img src="cat.gif" width="100" height="200" align="right">
right - картинка справа от текста;
left - картинка слева от текста;
bottom - нижняя линия строки текста выравнивается по нижнему краю картинки;
top - верхняя линия строки текста выравнивается по верху картинки;
middle или center - строка текста выравнивается по середине картинки.
Иногда бывает полезно задать поля вокруг картинки. Это делается с помощью параметров hspace и vspace:
< img src="cat.gif" width="100" height="200" align="right" hspace="15" vspace="10">
Разместить картинку по центру можно с помощью тега center:
< center>< img src="cat.gif" width="100" height="200">< /center>
Не забывайте закрыть тег, иначе вся информация на вашей страничке, идущая после картинки, отцентрируется
А вообще, размещать картинки, текст и другие элементы страницы удобно в табличках, сделав невидимые границы. Об этом читайте в темке "таблицы".
Меняем фон сайта
Со структурой html-странички мы с вами уже познакомились в соответствующей теме, поэтому с тегом body вы уже знакомы. Именно в этом теге можно задать цвет фона вашего сайта или прописать путь до фоновой картинки.
Смена цвета фона:
< body bgcolor="#код_цвета">
Коды смотрите в палитре цветов или в фотошопе. Вместо кода можно указывать английские названия цветов: blue, red, black, white, lime, yellow и т.д.
Графический фон:
< body background="fon.jpg">
где fon.jpg - ваше фоновое изображение.
Фон можно зафиксировать, т.е. при прокрутке текста фон двигаться не будет:
< body background="fon.jpg" bgproperties="fixed">
Не забывайте, что для каждой страницы, на которой присутствует графический фон, нужно прописывать фоновый цвет, т.к. гости вашего сайта могут отключить показ картинок в своем браузере, в результате чего могут увидеть не очень приятную картинку: к примеру, на белом фоне текст белым шрифтом :))
Cсылки: текстовые и графические
Ссылки вставляются с помощью тега A HREF, в котором прописывается путь до страницы, которая будет открываться при клике по ссылке:
< a href="page.html">текст ссылки< /a> - относительная адресация
или:
< a href="http://сайт/page.html">текст ссылки< /a> - абсолютная адресация
Обе ссылки будут текстовыми. А можно сделать ссылку-картинку. В этом случае достаточно вместо "текста ссылки" вставить картинку (см. "графика на web-страницах"):
< a href="page.html">< img src="cat.gif" border="0" width="50" height="70">< /a>
Параметр border=0 указывает на то, что вокруг нашей ссылки-картинки не будет рамочки, которые бывают у ссылок.
PS Абсолютную адресацию используйте только тогда, когда нельзя применить относительную! Представьте, что вы решили переехать на новый домен: вам придется менять пути для каждой ссылки и каждой картинки, если они будут прописаны абсолютно...
Часто бывает необходимо сделать так, чтобы при клике по ссылке новая страница открывалась в новом, выскакивающем отдельно, окне (например, при клике по какому-нибудь баннеру). Это делается с помощью параметра target, который вставляется внутрь тега "a href":
< a href="http://сайт" target=_blank>ссылка< /a>
При target=_top - открытие страницы будет происходить поверх основной. Это удобно использовать, например, во фреймах.
А вообще, в target'e может быть имя окна фрейма (или iframe), котрое будет указывать на то, что страничка, описанная в ссылке, откроется именно в этом окне. Но об этом читайте в статье о фреймах или iframe :)
Ссылка на отправку письма
Обычно запускается формочка программы Outlook или TheBat:
< a href="mailto:name@name.ru">написать письмо< /a>,
где name@name.ru - ваш e-mail.
Цвет ссылок
Цвет указывается внутри тега body (см. "структуру html"):
< body link="#код_цвета1" vlink="#код_цвета2">
link - цвет всех ссылок;
vlink - цвет ссылок при наведении мыши
alink - цвет ссылок в момент клика по ним
Коды цветов смотрите в палитре или фотошопе.
Горизонтальные линии часто используются для оформления текста на странице, для отделения одной части текста от другой. Достаточно разместить в нужном месте html-кода тег < HR>
Параметры этого тега:
ALIGN - выравнивание линии на странице (center, right, left);
SIZE - толщина линии в пикселях;
WIDTH - длина линии в пикселях или в % от ширины всей страницы;
COLOR - цвет линии (только для Internet Explorer и NetSurfer!);
NOSHADE - запрет выпуклости.
Например:
< HR SIZE="20" WIDTCH="50%" ALIGN="center" COLOR="red">
означает, что мы размещаем красную линию шириной в 20 пикселей по -центру длиной в пол экрана.
А вообще, наиболее универсальный способ, позволяющий создать совершенно любые линии - нарисовать их в каком-либо графическом редакторе или использовать готовые графические линии из интернета. В страничку вставляем их как графический объект:
< IMG SRC="путь_к_нашей_линии-изображению">
Не забывайте указывать длину и ширину линии: width и height.
А можно растянуть цветной квадратик размерами 1пиксель?1пиксель, превратив его в линию (очень удобно! и графический файл очень маленький :) ), указав width="желаемый размер" после пути к изображению, внутри тега IMG
Списки
Списки могут быть нумерованными: каждому пункту соответствует порядковый номер; а могут быть маркированными, где рядом с каждым пунктом стоит спец.символ - маркер или картинка.
Пример маркированного списка смотрите тут
Маркированный список
< UL type=disc>
< LI>первое< /LI>
< LI>второе< /LI>
< LI>третье< /LI>
< /UL>
type определяет вид маркера:
disc - закрашенный круг;
circle - обведенный по контуру круг;
square - закрашенный квадрат.
В качестве маркера можно использовать и любое графическое изображение. Наример, пиксельную картинку. В этом случае вместо type нужно указать путь до картинки в SRC: src="http://yoursite.com.ru/image.gif"
Нумерованный список
< OL start=1 type=1>
< LI>первое< /LI>
< LI>второе< LI>
< LI>третье< LI>
< /OL>
type определяет вид маркера:
1 - нумерация арабскими цифрами (1,2,3...);
a - нумерация латинскими строчными буквами;
A - нумерация латинскими заглавными буквами;
I - нумерация римскими цифрами.
start указывает номер, с которого нужно начать нумерацию (для римских цифр "start=6 type=I" эквивалентно началу нумерации с VI)
< div align="center">< b>Таблицы< /b>< /div>
В таблицах можно размещать тексты, рисунки, другие таблицы... Вообще, сайты чаще всего верстают именно табличками :)
html-код простой таблицы из 2 столбцов и 2 строк представлен ниже:
< table>
< tr>
< td>первая ячейка первой строки< /td>
< td>вторая ячейка первой строки< /td>
< /tr>
< tr>
< td>первая ячейка второй строки< /td>
< td>вторая ячейка второй строки< /td>
< /tr>
< /table>
Внутри тега table можно указать разные свойства будущей таблицы:
border - толщина рамок-границ (при border=0 границы становятся невидимыми!);
bgcolor - цвет фона таблицы;
width - ширина таблицы (в пикселях или %);
cellpadding - отступ в пикселях содержимого ячеек от их границ.
Например:
< table border="2" bgcolor="#FF0000" width="300" cellpadding="15">
Внутри тега tr (строки) тоже можно указать полезные свойства:
align (значение left, right или center) - выравнивание содержимого в ячейках;
valign (значение top - по верху ячеек, bottom - по низу, center - по центру) - вертикальное выравнивание содержимого в ячейках;
bgcolor - фон ячеек в данной строке.
Например:
< tr align="center" valign="center" bgcolor="#666666">
Свойства тега td (столбца):
bgcolor - цвет фона ячейки;
background - фоновое изображение ячейки;
width - длина ячейки;
align - выравнивание содержимого в ячейке (left, right, center);
valign - вертикальное выравнивание (top, bottom, center);
colspan - объединение указанного кол-ва столбцов;
rowspan - объединение указанного кол-ва строк;
nowrap - отключение автопереноса текстовых строк в пределах ячейки.
Например:
< td bgcolor="red" background="rose.jpg" width="200" align="center" valign="center" colspan="2">
! приоритет параметра, расспространяющегося на меньшую область, всегда выше.
< div align="center">< b>Внедренные окна Iframe< /b>< /div>
Iframe - внедренные окна. Это разновидность фреймов, но не фрейм. Очень удобная штука, если не работает php. В качестве примера, смотрите внедренное окно с новостями на моем хомяке
Код iframe вставляется внутри выбранной странички, в том месте (между тегами body), где мы хотим видеть "врезанную" страничку.
< iframe name="fr1" src="page1.html" width="300" height="200" frameborder="1" scrolling="yes" marginheight="20" marginwidth="30">
name - имя iframe (любое!);
src - адрес странички, которая будет открываться внутри iframe;
width - длина iframe;
height - высота iframe;
frameborder - рамка (1 - есть, 0 - нет);
scrolling - наличие полос прокруток (no - их нет, yes - есть, auto - браузер сам определяет: нужна ли полоса прокрутки);
marginheight - отступ от края окна до расположенного внутри него по высоте текста;
marginwidth - отступ от края окна до расположенного по ширине текста.
На этом пока все, ждите следующего обновления документа...
|
