В основе языка HTML лежит понятие «тэг» (англ.: tag -ярлычок, этикетка). Тэги заключаются в угловые скобки (< >) и образуют пары – контейнеры (открывающий тэг и закрывающий). Например, контейнером HTML документа является пара тэгов и . В web-странице включены контейнеры, отвечающие за заголовок документа (голова) и содержат дополнительную информацию, а также контейнеры, отвечающие за само содержание документа (тело). Они представлены на рисунке.
Итак HTML документ заключается в контейнер , заголовок в контейнер
, а содержание документа в контейнере . КонтейнерПример простейшей HTML странички, содержащей только основные тэги:
Результат работы указанного кода изображен на рисунке.
Как видно из примера текст «Содержание простейшей странички» отображается обычным текстом. Для того чтобы произвести форматирование этого текста, необходимо использовать специальные тэги. Пример использования тэгов форматирования представлен на рисунке.
Для изменения шрифта, его цвета и размера используется тэг с параметрами “face”, “color” и “size”. Например для того чтобы задать шрифт “arial” красного цвета и 14 размера необходимо написать следующий код:
Форматируемтекст
Для выделения абзаца в тексте используется тэг
В контейнер которого как правило помещается каждый абзац текста. Для создания заголовка используются тэги
, , , , , .
, , , .
, .
Для формирования списков в теле документа используются контейнеры , и . Причем тэг
- формирует нурмерованный список, тэг
- помещаются элементы списка. Пример кода отображения списков, представленный в виде нумерованного и маркированного списков представлен на рисунке.
Для связи двух и более Web-страниц между собой используются гиперссылки, для создания которых используется тэг . Причем в тэгах гиперссылок используются дополнительные атрибуты, позволяющие либо перейти к другой web-странице, либо переместиться внутри данной страницы. Второй способ желательно использовать в большом документе, имеющем несколько смысловых разделов.
Пример использования гиперссылок представлен на рисунке.
При указании URL адреса другой страницы необходимо указывать либо полный абсолютный путь к странице «полный путь/папка/страница» либо относительный (относительно данной страницы) «папка/страница». Параметр “target” позволяет открыть web-страницу в новом или существующем окне браузера.
Для вставки изображения на web-страницу используется тэг
с параметрами src (путь к изображению), width (ширина изображения), height (высота изображения), border (рамка вокруг рисунка). Пример кода вставки изображения:
Часто при создании Web-страниц необходимым является задание фонового цвета или фонового изображения. Для этого используются атрибуты тэга
«bgcolor» или «background-image». Пример вставки фонового цвета:Пример вставки фонового изображения:
Указанные атрибуты могут быть использованы не только для тэга
, но и для тэгов таблицы , области и других, которые будут рассмотрены в следующих темах.Чтобы операционная система знала, что какой либо текстовый документ является html документом, необходимо присвоить файлу расширение htm (html) .
Не пугайтесь нижеприведенной таблицытегов языка html , используя визуальный редактор FrontPage , первое время можно вообще не вникать в теги, затем, постепенно изучить пару десятков основных тегов, а дальше Вы сами решите для себя, надо ли Вам их знать. Мне самому приходилось неоднократно рыться в справочниках, чтобы найти внезапно понадобившийся тег, поэтому можете поместить данную страницу в закладки и подобный справочник будет всегда под рукой.
Что же касается примеров использования тегов, то нет ничего лучше, чем рассматривать уже готовый html код готовых интернет сайтов, для этого в браузере нужно найти вкладку "отобразить исходный код страницы" , обычно она есть в каждом браузере. (Браузер - программа с помощью которой Вы просматриваете страницы в интернете).
Теги могут быть как одиночные, так и парные. Парные теги открываются < код тега> и закрываются , все что расположено между открывающим и закрывающим тегами, попадет под его влияние. Теги могут иметь различные атрибуты, которые указываются с помощью специальных параметров. Теги могут быть вложенными один в другой и т.д.
echo $sape->return_links(); ?>
Внутри html документа необходимо использовать так называемые теги. Тег - это определенный условный код, обычно заключенный в скобки типа <> . Этот код дает понять браузеру, какой тип данных размещен между тегами, как нужно отображать эти данные, например такую информацию предоставляют теги форматирования текста. Тегов существует довольно много и начинающему вебмастеру тяжело в них ориентироваться, поэтому рассмотрим основные теги, которые могут Вам пригодиться уже при составлении первого сайта. Ниже в таблице тегов приведены не все теги, но основные выделены жирным шрифтом.
Основные теги Определяет тип документа как web страницу. Служебная часть документа, не отображаемая в браузере, тут размещаются заголовок, описание, ключевые слова и т.д. Между этими тегами располагается непосредственно сама web сраница, которую Вы видите на экране, могут размещаться и другие типы данных. Определяет способ сканирования данных для роботов поисковых систем. Указывается информация для поисковых роботов. В данном теге можно указать авторство. Для обеспечения работы с поисковыми серверами, указываются ключевые слова, через запятую. Применяется для не полностью прописанных ссылок, указывает начальный адрес в интернете Краткое описание web страницы, будет показано в результатах поиска поисковиками. Тег для заголовка страницы Определяет цвет фона web страницы Определяет цвет текста web страницы Задается цвет гиперссылок в нормальном состоянии Задает цвет уже просмотренных гиперссылок. Задает цвет выделенной гиперссылки. Тег заголовка, создает самый крупный заголовок, цифра 1 может меняться в пределах от 1 до 6. Шесть будет самый мелкий заголовок. Делает текст полужирным. Форматирует текст в наклонный. Иммитация стиля печатной машинки. Название переменных отображается курсивом Выделение цитат курсивом Создает абзац с текстом выделенным курсивом. Курсив (воспринимается поисковиками как выделение) Полужирное форматирование текста (воспринимается поисковиками, как особо сильное выделение) Устанавливает размер шрифта, значение от 1 до 7. Задает цвет текста. Оформление гиперссылок в html Создает гиперссылку, имеется ввиду как внутренние так и внешние гиперссылки. Указывает в каком окне открывать гиперссылку. Гиперссылка для отправления почтового сообщения по электронной почте. Создает гиперссылку на метку в текущей странице. Ставит метку для гиперссылки на текущей странице. Гиперссылка на метку другой страницы. Форматирование текста Создает новый параграф Выравнивает параграф относительно одной из сторон документа, значения: left, right, justify или center Запрещает перевод строки. Указывает где разбивать строку для переноса при необходимости.
Вставляет перевод строки. Создает отступы с обеих сторон текста. Создает список определений. Определяет каждый из терминов списка Описывает каждое определение Форматирует текст в пронумерованный список Определяет каждый элемент списка и присваивает порядковый номер Тег для создания ненумерованного списка Отмечает каждую новую позицию в списку гружком или квадратиком. Данный тег используется для форматирования больших блоков текста HTML документа, также используется в таблицах стилей Графические элементына странице Вставляет изображение на страницу. Форматирует положение изображения в документе, может иметь значения: left, right, center; bottom, top, middle. Устанавливает толщину рамки вокруг изображения Устанавливает поля сверху и снизу Устанавливает поля слева и справа. Создает всплывающую подсказку
Добавляет горизонтальную линию.
Указывает толщину линии.
Указывает ширину линии в пикселах или процентах.
Линия без тени.
Определяет цвет линии. Создание таблиц Тег создающий таблицу. Задает строку в таблице. Задает отдельную ячейку в таблице. Задает заголовок таблицы (обычная ячейка с форматированием по центру и полужирным текстом) Какие бывают атрибуты таблицы Назначает подпись таблицы Определяет толщину рамки. Определяет расстояние между ячейками. Поля для текстового содержимого ячейки. Устанавливает ширину таблицы. (Значение параметра может быть в пикселях или процентах) Устанавливает высоту таблицы. (Значение параметра может быть в пикселях или процентах) или Определяет горизонтальное выравнивание положения ячеек в таблице, может иметь значения: left, center, right. или Определяет вертикальное выравнивание положения ячеек в таблице, может иметь значения: top, middle, или bottom. Указывает количество столбцов, объединенных в одной ячейке. Указывает количество строк, объединенных в одной ячейке. Не позволяет программе просмотра делать перевод строки в ячейке таблицы. Задает ширину ячейки таблицы в пикселях или процентах. Задает высоту ячейки таблицы в пикселях или процентах. Фреймы в документах html Предшествует тегу на фреймовой странице. Определяет строки в таблице фреймов, значение высоты которых определяется количеством пикселей или в процентах. Определяет столбцы в таблице фреймов, значение ширины которых определяется количеством пикселей или в процентах. Задает единичный фрейм или область в таблице фреймов. Задает информацию, которую увидит посетитель в случаях, когда показ фрейма невозможен. Используемые атрибуты фреймов html Привязка web страницы к окну фрейма. Назначает фрейму имя, для улучшения маршрутизации информации между фреймами и страницами. Отступы по горизонтали внутри фреймового окна. Отступы по вертикали внутри фреймового окна. Запрещает изменение размеров фреймового окна посетителем сайта. Ифрейм и его атрибуты Создает контейнер, который может содержать любые элементы. Другие элементы страницы будут обтекать данный контейнер.
- - маркированный список, а в тэгах
