Тэги ХТМЛ


В данной статье будет опубликована базовая информация касательно создания и обращения с HTML страницами.

HTML (HyperText Markup Language - язык разметки гипертекста) получил свое название неспроста: дело в том, что он позволяет форматировать (или размечать) текст при помощи тэгов ХТМЛ. легко отличить от остального текста по угловым скобкам, в которые он заключен:



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

Данный текст будет выделен полужирным шрифтом

Обратите внимание, что второй (называемый закрывающим или, реже, конечным) тэг начинается с символа косой черты (/). Теперь вы знаете, что тэг, перед которым стоит косая черта, является закрывающим в паре. Для достижения комбинированных эффектов теги можно вкладывать друг в друга:

Начертание данного текста - полужирное, курсивное

Теги не обязательно писать заглавными буквами: это желательно делать лишь для того, чтобы отличить их от остального текста.

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

Вы можете просмотреть исходный HTML-код, лежащий в основе любой страницы, щелкнув правой кнопкой мыши по рабочей области окна браузера и выбрав из контекстного меню команду «В виде HTML», «Просмотр источник»а или «View Source» (название пункта меню зависит от используемого вами браузера и его версии).


Тэги ХТМЛ и атрибуты со значениями



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


Обратите внимание, что необходимо также указать значение данного атрибута, в данном случае "Green", чтобы сообщить Web-браузеру, какой цвет использовать.

Атрибуты и их значения включаются только в открывающий тэг элемента, но не в закрывающий. Тэг может иметь более одного атрибута, а может не иметь ни одного. Хотя на первый взгляд это кажется странным, вы быстро уловите здесь логику, так как основана она на здравом смысле.

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

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

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

партнерские программы

Порядок атрибутов, равно как и регистр букв, не имеет значения. Единственный элемент, в котором регистр символов играет роль, - имя файла.

Некоторые элементы вообще не имеют атрибутов. Тег
используется для вставки разрыва строки (или новой строки) в документ. У
есть только открывающая часть; никаких атрибутов и закрывающего тэга ему не требуется.


Абзацы и разрывы строк ХТМЛ



Тэги ХТМЛ


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

Тэг задает пропуск строки перед текстом, в результате чего абзацы размещаются на некотором расстоянии друг от друга. Предусмотрен один атрибут - выравнивание (align), которому может быть присвоено значение "по левому краю", "по правому краю", "по центру" или "по ширине". По умолчанию абзац выравнивается по левому краю.

Вот пример тэга в действии:



Этот абзац выровнен по центру.




Этот абзац выровнен по правому краю.




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

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

Чтобы обеспечить переход на новую строку (что равносильно нажатию клавиши Enter в текстовом редакторе), вы должны ввести тэг
. Простое разделение текста на строки следующим образом:

1. Это первая строчка.
2. Это вторая строчка.

не позволит вам достичь желаемого.

Для разбиения текста на строки необходимо использовать тэг разрыва строки:

1) Это первая строчка.

2) Это вторая строчка.

Строки не обязательно должны располагаться друг под другом; они могут быть просто разделены тэгом
- результат будет аналогичным.


Заголовки ХТМЛ



Тэги ХТМЛ


Тэги заголовков - простой и быстрый способ структурирования Web-документа путем его разбиения на разделы. Существует шесть уровней заголовков: от до . Заголовок, обозначаемый тэгом , - самый крупный; обозначаемый тэгом - самый маленький. Заголовки выделяются полужирным шрифтом и автоматически отбиваются друг от друга пустой строкой.

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


Стиль и размер шрифта ХТМЛ



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

Размер шрифта может быть задан абсолютным (от 1 до 6) либо относительным значением (от +1 до +6 и от -1 до -6). По умолчанию выбрана величина. Таким образом, если вы введете строку

Этот текст на два размера больше, чем был прежде.

кегль увеличится на два шага1. Обратите внимание, что открывающий тэг требует закрывающего - .

Атрибут face определяет используемую гарнитуру:

Данный текст будет выведен шрифтом Arial

Атрибут color работает аналогично:

Данный текст будет выделен желтым цветом.

Значение цвета может быть задано либо его названием, либо шестнадцатеричным числом (например, желтому соответствует #FFFF00). Используя шестнадцатеричное значение, не забудьте ввести перед ним знак решетки (#).

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

Если тэг имеет несколько атрибутов, как, например, , их можно объединять:

Данный текст будет отображен шрифтом Arial черного цвета и иметь размер 2


Добавление изображений на сайт



Тэги ХТМЛ


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



Закрывающего тэга нет. Атрибут src содержит путь к файлу, где записано используемое вами изображение. Речь идет о файлах типа myimage. gif, myimage.jpg или myimage.png.

В случае если изображения и HTML-страницы вашего сайта хранятся в одном и том же месте (в полном каталоге или, иначе говоря, директории), вы вправе ограничиться простым указанием имени файла. А вот если рисунки записаны в другой каталог (допустим, в поддиректорию images), после атрибута src= следует прописать путь относительно страницы, в которой размешается изображение. В противном случае Web-браузер не сможет найти и показать файл. Например, строка сообщает браузеру, в каком подкаталоге находится документ myimage.gif.

Тэг вставки изображения имеет еще несколько часто используемых атрибутов: align, border, width, height, hspace, vspace, usemap и alt. Первый из них предназначен для выбора места расположения рисунка на странице (слева, справа или по центру)1. Атрибут border применяется для установки толщины рамки, обводящей изображение. Если такая граница не нужна, используйте нулевое значение:



Назначение атрибута alt состоит в присвоении графическому документу текстовой альтернативы. Вот еще один пример тэга в действии:

Арбитраж трафика

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


Автор: pimka21

Еще советуем:
  • Ключевые слова для сайта
  • Гугл Эдвордс
  • Оптимизация изображений
  • Посадочные страницы
  • Адвего - текстовая биржа. Как заработать на текстах