Оптимизация сайта. Теги для описания ключевых слов
Оптимизация сайта – приведение сайта в понятный для поисковых систем вид. Условно, процесс оптимизации сайта можно разделить на 3 этапа:внутренняя оптимизация(работа над внутренними моментами оптимизации - код, текст, структура); внешняя оптимизация (работа над сайтом "извне", т.е. работа над внешними факторами - внешние ссылки); поддержка результата (непрерывные работы по мониторингу позиций и корректировке проводимых работ по сайту (внутренней и внешней оптимизации).
17. Тэги HTML сообщают браузеру информацию о структуре и особенностях форматирования Вэб-страницы. Каждый тэг содержит определенную инструкцию и заключается в угловые скобки <>. Большинство тэгов состоят из открывающей и закрывающей частей и воздействуют на текст, заключенный внутри.Существует несколько основных тэгов HTML, которые должны присутствовать в тексте любой Вэб-страницы. Каждая Вэб-страница обязана содержать тэг <HTML>, располагаемый в самом начале. Этот тэг описывает ваш документ как Вэб-страницу, выполненную в формате HTML. Непосредственно за дескриптором <HTML> обычно следует тэг <HEAD>, который указывает на наличие текста, содержащего наименование страницы и дополнительные сведения о ней. В раздел HEAD обычно вложен тэг <TITLE>, служащий для обозначения наименования страницы. Наименования страниц обычно отображаются в строке заголовка окна браузера. Название Вэб-страницы может быть набрано только с помощью символов букв, цифр и пробела. Затем следует тэг <BODY>, который указывает на начало собственно "тела" Вэб-страницы. В этом разделе размещаются весь остальной текст, графика, таблицы и другие элементы содержимого страницы, которые увидит посетитель, обратившийся к вашему сайту. Элементами HTML являются ссылки, списки, заголовки, изображения, элементы форм. Конечно, HTML ограниченный язык и не может сравниться с издательскими системами такими, например, как PageMaker, но он постоянно развивается.HTML- HyperText Markup LanguageHTML (HyperText Markup Language, язык гипертекстовой разметки) - специальные инструкции браузеру, с помощью которых создаются Вэб-страницы. Т.е. Web-страницы - это документы в формате HTML, содержащие текст и специальные тэги (дескрипторы) HTML Документы HTML хранятся в виде файлов с расширением .htm или .html. Любая Web-страница структурно разбивается на две части: заголовок и тело. В заголовке указывается служебная информация обо всей Web-странице, а в теле Web-страницы мы уже и описываем ее содержимое вместе с правилами его отображения. При этом заголовок Web-страницы ограничивается тегами <head> и </head>, а тело документа обозначается тегами <body> и </body>. Именно в нем находится все то, что отображается на странице: текст, картинки, таблицы.
18. Форматирование текста<B>полужирный <Big>укрупняет <Br>новая строка <Hr>горизонтальная линия <I>курсив <P>новый абзац <U>подчеркивание текста. Размер, цвет, шрифт <Font size color face> Рисунок <BODY background="img/fon.jpg"><p><img src="img/teacher.jpg" border="3"></p><BODY> < width="50" height="41">размер, align="left">" align="right"> выравнивание, <br clear="right"> обтекание текстом
Создание таблицы
Для создания таблицы служит тэг <TABLE>. Как известно таблица состоит из строк, а строки, в свою очередь состоят из ячеек. Для определения строк служит тэг <TR>, для создания ячеек - <TH>, <TD>.
Тэг <TH> используется для создания ячеек с заголовками.
Тэг <TD> - для обыкновенных ячеек с данными.
Содержание ячеек заголовков отображается полужирным шрифтом и выравнивается по центру.
Для создания заголовка таблицы служит тэг <CAPTION>.
Для того, чтобы сделать видимой границы таблицы, служит атрибут BORDER тэга <TABLE>. Чтобы задать толщину разграничивающих линий внутри таблицы, необходимо воспользоваться атрибутом CELLSPACING.
Дело в том, что, используя таблицы, можно сделать аккуратную компоновку информации в пределах Вэб-страницы, добиться точного расположения того или иного фрагмента страницы, будь то текст, графика или гиперссылка. Например, используя таблицу, можно легко добиться отображения текста в нескольких колонках, подобно газетной публикации.
21. ГиперссылкиГиперссылка на другую страницу
<ahref="http://on-line-teaching.com/index.html">Ссылка на главную страницу сайта</a> <a href="index.html">Ссылка на начало учебника</a> Гиперссылка в пределах страницы <a href="#Начало страницы">Наверх страницы</a> В то место, куда надо сделать переход надо вставить: <a name="Начало страницы"></a> Почтовая гиперссылка <a href="mailto:admin@on-line-teaching.com?subject=Письмо автору" title="Письмо автору с сайта www.on-line-teaching.com">admin@on-line-teaching.com</a> Открытие страниц в новом окне <a href="index.html" target="_blank"">Ссылка на первую страницу учебника</a> Цвет текста гиперссылок Атрибуты LINK, ALINK, VLINK задают цвет шрифта гиперссылок.
22. Структура документа HTML. Рисунки и видеоролики на Web-страницах. Для вставки графических элементов (в виде файлов с расширениями .jpg .gif. ) служит тэг <IMG>. Атрибут Alt позволяет создать текст, который при необходимости должен быть отображен вместо графики. <img src="img/tigr.jpg" alt="Это изображение тигра"> Для создания рамки служит атрибут BORDER тэга <IMG>. Используя этот атрибут можно указать толщину линии рамки в пикселях. С помощью атрибута BACKGROUND тэга <BODY>, можно снабдить страницу любым графическим фоном. Атрибут ALIGN тэга <IMG> допускает задание двух значений – left, right. Значение left - изображение слева от текста, а right - справа от него. Тэг BR с атрибутом CLEAR, указывают позицию в тексте, начиная с которой действие механизма обтекания графики текстом отменяется. Значения left, right, all атрибута CLEAR позволяют определить, с какой стороны - левой, правой, обеих - текст далее будет свободен от графики. Атрибут ALIGN тэга <IMG>, принимающий значения top, middle, bottom задает вертикальное положение текста относительно границ изображения. <p> <img src="img/majak.jpg" align="top">Выравнивание по верхней кромке</p> Для увеличения пустой области вокруг изображения служат атрибуты HSPACE, VSPACE тэга <IMG>. Атрибут HSPACE -ширина чистой области СЛЕВА И СПРАВА от изображения. VSPACE - СВЕРХУ и СНИЗУ.<p><img src="img/tigr.jpg" align="left" hspace="20" vspace="20">Этот зверь называется тигр. </p> Для построения горизонтальной линейки служит дескриптор <HR>. По умолчанию – толщина линейки в 2 пикселя. Для изменения ширины и длины линейки служат атрибуты SIZE, WIDTH. По умолчанию – выравнивание линейки посреди страницы. Для изменения выравнивания надо воспользоваться атрибутом ALIGN. Атрибут NOSHADE устраняет эффект объемности линейки.<hr align="left" width="50" size="5" noshade> Браузеры обычно в состоянии воспроизводить видеофайлы форматов AVI, Real Video и Windows Media. А внедрение их в состав Web-страницы производится при помощи тега <img>. Но для указания местонахождения видеофайла используется параметр dunscr. По умолчанию, внедренный в Web-страницу видеоклип проигрывается один раз, сразу после полной загрузки страницы. Для того, чтобы просмотр Web-страницы сопровождался звуковым воспроизведением, необходимо в код страницы вставить тег <bgsound>. Тег вставляется не в тело Web-страницы, а в его заголовок, т. е. между тегами <head> и </head>. У данного тега существует обязательный параметр src, в качестве значения которого используется URL подключаемого звуквого файла. Необходимо отметить, что браузеры гарантированно распознают и воспроизводят аудиофайлы форматов MIDI и WAV. Воспроизведение иных форматов, таких как МРЗ и Real Audio, возможно только при подключении дополнительных модулей к браузерам.
23. Навигационная карта - это изображение, разбитое на определенные зоны, каждая из которых представляет собой гиперссылку. Прежде чем создавать карту ссылок, надо в графическом редакторе определить координаты крайних точек зон. Зоны могут быть трех типов. Прямоугольная зона (rect). В этом случае задаются координаты двух точек - левого верхнего угла, правого нижнего угла. Многоугольник (poly). В этом случае задаются координаты каждой точки многоугольника. Круг (circle). В этом случае задается координата центра круга и его радиус. Для создания карты ссылок необходимо вставить нужное изображение с помощью дескриптора <IMG>, затем, при помощи атрибута USEMAP, присвоить ему имя. После этого ввод данных при помощи тэга <MAP>.Дескриптор <AREA> определяет зоны изображения карты ссылок.Атрибут SHAPE описывает форму зоны карты ссылок.Атрибут COORDS назначает координаты конкретной зоны. Количество точек в этом атрибуте зависит от формы зон (прямоугольник, круг, многоугольник).Атрибут HREF указывает страницу на которую ведет данная зона карты ссылок.
24. Для создания html-формы используется команда form. У нее могут быть следующие параметры: NAME - определяет имя формы, обычно не указывается. Применяется для идентификации формы, если в документе присутствует несколько форм. ACTION - обязательный параметр, он задает путь к скрипту, который будет запущен веб-сервером. METHOD - определяет способ отправки параметров формы. Принимает значение GET или POST. TARGET - определяет окно, в которое возвращается результат обработки отправленной формы. Возможные значения : _self, _parent, _top, _blank или явно указанное имя окна. Поле ввода для строки <input type=text name=text value="Начальное значение" size=40 maxlength=80>.Для созданиякнопки атрибут type должен быть равен button - <input type=button value=Кнопка> Кнопка для отправки формы создается так: <input type=submit value="Опубликовать">. Для создания радиокнопки атрибут type должен быть равен radio. <input type=radio name=smile value=images/smiles/icon18.gif> <img src=images/smiles/icon18.gif> <input type=checkbox name=checkbox> Список <SELECT NAME=list>
<OPTION value=1>one
<OPTION value=2>two
<OPTION value=0 SELECTED>zero
</SELECT> Область ввода для текста создается командой <textarea name=textarea cols=45 rows=6>Здесь текст по умолчанию</textarea>
26. Понятие и назначение стиля:Лист стилей (CSS - Cascading Style Sheets) - позволяет сосредоточить описания признаков форматирования Вэб-страниц в одном месте и дает возможность избежать необходимости их повторного ввода в дескрипторах.Внутренний лист стилей размещается в промежутках между дескрипторами <HEAD> </HEAD> отдельной Вэб-страницы и начинается с объявления тэга <STYLE>. При создании листа стилей надо указать наименование дескриптора, свойства которого надо будет определить, а затем перечислить значения этих параметров. Листы стилей являются очень удобным средством форматирования Вэб-страниц, т.к. позволяют сконцентрировать управление внешним видом страницы в одном месте.Еще более удобным является создание внешнего листа стилей, который позволяет сконцентрировать в одном месте управление внешним видом всего сайта.
Основные команды CSS.
Определение цвета элементов и свойств фона:color—цвет текста в пределах данного элемента; значение: цвет. Пример: color: #f00; background-color—цвет фона в пределах данного элемента; значение: цвет. Пример: background-color: #ffc; background-image—фоновое изображение в пред елах данного элемента; значение: url(path/filename.ext). Пример: background-image: url(../bgr.gif); background-repeat—повторение фонового изображения в пределах данного элемента; значения: no-repeat, repeat, repeat-x, repeat-y (не повторять (изоб ражение появится только один раз), замостить всю площадь, повторять только по горизонтал и, повторять только по вертикали). Пример: backgr ound-repeat: no-repeat; Определение свойств шрифта:font-family—гарнитура; значения: названия шрифтов. Для обеспечения совместимости следует завершать список возможных гарнитур родовым названием группы ш рифтов (serif, sans-serif или monospace), например: font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; или "Times New Roman", Times, serif; или "Courier New", Courier, monospace; font-size—кегль; значения: относительный размер в процент ах или абсолютный размер в пикселях или пунктах. Для стабильного воспроизведения относительного размера ш рифтов разных элементов документа необходимо (1) определить размеры шр ифта для всех элементов, (2) опр ед елить их единообразно. Пример: font-size: 16pt font-style—"стиль" шрифта; значения: italic (наклонный или курсив) или normal Пример: font-style: normal font-weight—жирность; значения: bold (полужирный) или normal Пример: font-style: normal Определение свойств отображения текста:text-align—выравнивание; значения: left, right, center или justify (по левому, по правому краю, по центру, по обоим краям). Пример: text-align: center text-decoration—под черкивание; значения: underline или none Пример: text-decoration: underline text-indent—абзацный отступ; значения: относительный размер в процентах или в долях ширины литер m или x данного шр ифта или абсолютный размер в пикселях или пункт ах. Пример: text-indent: 1em; Определение свойств текстового бокса:margin-top, margin-bottom, margin-left, margin-right—отступ от краев окна. Значения: относительный размер в процентах или в д олях ширины литер m или x данного шрифта или абсолютный размер в пикселях или пунктах. Пример : margin-left: 40px; padding-top, padding-bottom, padding-left, padding-right—отступ от зоны рамки текстового блока (самой рамки может и не быть). Значения: относительный размер в процентах или в долях ширины литер m или x данного шр ифта или абсолютный размер в пикселях или пункт ах. Пример: padding-left: 3px; border-width—ширина рамки. Значения абсолютный размер в пикселях или пунктах. Пример: border-width: 1px; border-color—цвет рамки. Значение: цвет. Пример: border-color: #f00; border-style—стиль рамки. Отображается довольно неоднозначно, здесь приводятся только однозначно отображающиеся значения. Значения: none, solid, double (нет, цельная, двойная). double работает когда border-width не менее 3px. Пример: border-style: double; border-top, border-bottom, border-left, border-right—рамка сверху, снизу, слева, справа. Используется вместе с –width, -color, -style для определения свойств разных частей рамки текстового бокса. Значения описаны выше. Пример: border-left-style: none; float—расположение элементов. Значения: left, right, none (прижать влево, прижать вправо, по умолчанию). Удобен, например, для верстки текста в несколько колонок без применения таблицы: все <div> шириной менее экрана, у которых выставлен float:left, будут заполнять экран друг за другом, начиная слева. Используется также для позиционирования кар тинок. Пример: float: left;
28. Классы (class) определяют способ разбиения стилей на очень точные части. Всякий раз, когда вы хотите, чтобы определенный фрагмент текста как-то отличался от остальных, вы можете создать собственный тег HTML. Каждый тип форматирования текста, который вы определяете, называется стилевым классом (style class).За стилевым классом в таблице стилей закрепляется имя. Это имя задается как обычное имя, но с точкой в качестве первого символа. Предположим, что в документе вам нужны два различных вида заголовков H1. Можно создать стилевой класс для каждого из них, помещая следующий код в таблицу стилей:
<style>
Н1.serif { font: 34pt "Times New Roman", Times, serif; color: #DC143C;}
H1.sans{font:18pt Arial;
color: #FF8C00; text-align : center;}
</style>
Для выбора между двумя стилями класса в теге <hl> (аналогичные правила действуют и для других тегов, имеющих описание а таблице стилей) используется атрибут class=имя_стиля.
Обратите внимание - здесь имя стиля употребляется без точки.
29. Виды стилей: -встроенный(самый простой способ задать стиль. Он задаётся с помощью параметра STYLE со списком свойств и их значений). –на уровне документов(определяется тэгом STYLE,который находится внутри тэга HEAD. Всё что находится внутри тэга STYLE рассматривается браузером как стилевые правила.) –внешний стиль(создаются отдельные файлы со стилями и присоединяются к документам. В данном случаи стиль находится в файле с расширением CSS. Для указания адреса стиля используют тэг LINK,кот. находится в HEAD. Адрес может быть как абсолютным так и относительным).
30.Принцип каскадирования применяется в случае, когда какому-то элементу HTML одновременно поставлено в соответствие более одного правила CSS, то есть, когда происходит конфликт значений этих правил. Чтобы разрешить такие конфликты вводятся правила приоритета.Наиболее низким приоритетом обладает стиль браузера;Следующим по значимости является стиль, заданный пользователем;И наиболее высоким приоритетом обладает стиль, заданный непосредственно автором страницы. И далее, уже в этом авторском стиле приоритеты расставляются следующим образом:Самым низким приоритетом обладают стили, наследуемые в документе элементом от своих предков;Более высоким приоритетом обладают стили, заданные во внешних таблицах стилей, подключённых к документу;Ещё более высоким приоритетом обладают стили, заданные непосредственно селекторами всех десяти видов (см. подраздел «виды селекторов»), содержащимися в контейнерах style данного документа. Нередки случаи, когда к какому-нибудь элементу имеют отношение, задают его вид, несколько таких селекторов. Такие конфликты между ними разрешаются с помощью расчёта специфичности каждого такого селектора и применения этих селекторов к данному элементу в порядке убывания их специфичностей. При расчёте специфичности селектора принимается во внимание: количество идентификаторов (#id) в селекторе —- ((1,0,0) за каждый объявленный идентификатор в селекторе правила CSS);количество классов (.class) и псевдоклассов (:pseudoclass) в селекторе —- ((0,1,0) за каждый объявленный класс и псевдокласс в селекторе правила CSS );количество тегов в селекторе —- ((0,0,1) за каждый объявленный тег в селекторе правила CSS). (Принцип расчёта таков, что, например, (1,0,0) будет иметь большую специфичность, соответственно — бо́льший приоритет, чем даже (0,10,0), а (0,1,0) будет иметь большую специфичность, больший приоритет, чем (0,0,10). Если же рассчитанные таким образом специфичности окажутся одинаковыми, то к элементу будет применено правило, описанное селектором, расположенным в документе ниже других.)Ещё более высоким приоритетом обладают стили, объявленные непосредственно в теге данного элемента посредством атрибута style этого тега;И наконец самым высоким приоритетом обладают стили, объявленные автором страницы или пользователем, с помощью сопроводительного слова !important. Если таких свойств несколько, то предпочтение отдаётся в первую очередь стилям, заданным пользователем, а для остальных свойств (которые будут являться задаваемыми автором страницы) потребуется определить их специфичности по принципам, описанным выше, и применять эти свойства в порядке убывания этих их специфичностей.
31.PHP (его полное название: PHP: Hypertext Preprocessor) - это язык, предназначенный для быстрого создания динамических web-страниц. Синтаксис языка похож на С, Java и Perl, однако имеет и свои, присущие только ему особенности. В официальной документации PHP определяется как server-side HTML-embedded scripting language (встраиваемый в HTML скриптовый язык с обработкой на сервере). Из этого определения можно выделить два основных момента:1. Обработка кода PHP производится на сервере, а не в браузере клиента, как, например 5-76439.php"> ⇐ Назад