Создание собственного сайта
Каталог статей
| Главная » Статьи » Мои статьи |
Основные теги HTML Язык гипертекстовой разметки HTML, как выяснилось в предыдущей статье состоит из тегов, представляющих собой его основные компоненты. Здесь вы сможете познакомиться с этими компонентами. Не со всеми конечно, а только с самыми основными тегами HTML — теми, без которых не обходится создание ни одной веб-страницы в мире. Речь идет о структурных тегах — именно их здесь и рассмотрим, но вначале классифицируем все основные теги HTML. Они делятся на следующие группы: Структурные теги
Структурные теги: Теги для задания структуры документа. Теги форматирования: Теги для управления текстом. Теги таблиц: Теги для управления таблицами. Теги изображений: Теги для управления изображениями. Теги гиперссылок: Теги для управления гиперссылками. Метатеги: Теги для записи дополнительной информации. Структурные теги HTML
<html> — корневой тег документа HTML — </HTML> Тип этого тега – контейнерный. Открывающий тег <html> ставится в самом начале документа, а закрывающий Внутри контейнера <html>.....</html> содержатся все остальные теги документа. Именно поэтому тег и называют корневым (вы ведь знаете, что такое корневая папка?). Контейнерный тег можно сравнить с папкой операционной системы. В каждую такую папку могут быть вложены другие папки, а в них, в свою очередь – еще папки, и.т.д. У открывающего тега <html> при необходимости могут быть следующие параметры: lang — определяет язык документа title — определяет всплывающую подсказку для всей страницы Пример:Если вы посмотрите результат, то увидите, что при наведении курсора на страницу, всплывает подсказка «Моя страница» Голова страницы<head> — головной тег html-страницы, внутри которого располагаются мета-теги, тег <title> и другие теги, помогающие браузеру в обработке страницы — </head> Тип тега – контейнерный. Это первый из двух глобальных контейнеров, расположенных внутри конструкции <html>.....</html> <title> — контейнерный тег, позволяющий задать наименование веб-страницы — </title> Заглавие, которое создает этот тег, отображается в строке заголовка окна браузера. В первом приближении код веб-страницы выглядит следующим образом:
<html>
Тег <title> выполняет несколько функций, одна из которых – сообщить посетителю, о чем страница. Благодаря тексту заголовка пользователь может понять, что это за сайт и как называется текущая страница. Если посетитель будет сворачивать окна, то заголовки отобразятся на панели задач – по ним проще сориентироваться, где какая страница. При сохранении веб-страницы, имя сохраненного файла будет совпадать с названием заголовка. При сохранении в закладки ситуация аналогична. Еще одна важная функция тега <title> – продвижение страницы в поисковиках. Поисковые системы выводят заголовки в поисковую выдачу, а, кроме того, оценивают по ним релевантность. Завершая разговор о контейнере тега <head>, можно сказать, что название тега соответствует его функциям. Контейнер тега <head> действительно является своего рода головой для веб страницы. Теперь поговорим про туловище. Тело страницы<body> — тег, внутри которого пишется весь код, отвечающий за внешний вид страницы — </body> Тип тега – контейнерный. Это второй из двух глобальных контейнеров, расположенных внутри конструкции <html>.....</html> .Во втором приближении код любой веб-страницы выглядит так:
<html>
Обратите внимание, что теперь у страницы появилась как голова, так и туловище. Это значит, что она стала выглядеть абсолютно полноценно. У тега <body> есть несколько параметров, позволяющих поменять фон на странице, цвет текста, а также задать отступы от границ окна. Фон страницыbgcolor — параметр тега <body>, позволяющий настроить цвет фона веб-страницы. Например, чтобы сделать цвет фона светло-желтым, нужно записать следующий фрагмент кода:
<html>
О том, каким образом задаются цвета в HTML, можно почитать в статье о способох создания .Параметр bgcolor устанавливает одноцветный фон на странице. Но в качестве фона может быть использована и повторяющаяся картинка, или так называемая текстура. Для этого служит следующий параметр: background — параметр тега <body>, позволяющий установить текстурное изображение в качестве фона веб-страницы. В следующем примере в качестве текстуры выбрано изображение, которое вы видите справа – .
<html>
Учтите: чтобы браузер смог найти изображение-источник, оно должно быть расположено в одной папке с html-файлом, для которого устанавливается текстура. В противном случае необходимо прописывать полный адрес изображения источника. Текст на страницеtext—параметр тега <body>, позволяющий поменять цвет шрифта, используемого на странице по умолчанию. Например, коричневый шрифт можно задать следующим образом:
<html>
А для того, чтобы разместить зеленый шрифт на синем фоне, достаточно прописать у тега <body> одновременно два параметра - параметр фона и параметр текста:
<html>
В последнем примере можно было написать сначала параметр text, а затем параметр bgcolor - очередность записи не имеет никакого значения. Отступы от границ окнаОтступ на странице – это пустое пространство от края окна браузера до содержимого страницы. Это пространство не может быть занято никакими элементами – оно всегда остается пустым. За отступы на странице в HTML отвечают следующие параметры тега <body>: bottommargin — определяет отступ от нижнего края браузера до содержимого страницы leftmargin — определяет отступ от левого края окна браузера до содержимого страницы topmargin — определяет отступ от верхнего края окна браузера до содержимого страницы Модифицируем предыдущий пример, добавив на страницу левый отступ в 50 пикселей и верхний – в 150 пикселей: Пример:
<html>
На этом все о структурных тегах. Следующие из основных тегов HTML позволяют работать с текстом. С их помощью вы сможете форматировать текст на странице также, как вы делаете это в обычном текстовом редакторе. | |
| Просмотров: 17627 | Комментарии: 194 | |
| Всего комментариев: 7 | ||||||||
| ||||||||
Приветствую Вас Гость
Категории раздела | |
|---|---|
|
Вход на сайт |
|---|
Поиск |
|---|
Наш опрос |
|---|
Мини-чат |
|---|
Статистика |
|---|
Онлайн всего: 1 Гостей: 1 Пользователей: 0 |