| Главная » Статьи » HTML » Основы HTML |
Слово HTML представляет собой сокращение от HyperText Markup Language — язык разметки гипертекста. В основном, HTML-документ является простым текстовым файлом, который содержит текст и ничего больше. Так что создавать веб-страницы можно в любом текстовом редакторе. Когда веб-страница открывается в браузере, он просматривает код HTML, находит специальные символы, называемые тегами, и использует их для вставки изображений, изменения вида текста, создание ссылок на другие веб-страницы и др. Для обозначения тегов используется символ <тег>. Теги бывают двух видов: парные, которые выделяют блок текста, также называются еще контейнером (пример 1) и одиночные. Контейнер требует закрывающего тега, обозначаемого </тег>. Теги нечувствительны к регистру, поэтому запись <B> и <b> эквивалентна. Пример 1. Использование парных тегов (контейнера) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Контейнеры</title> </head> <body> <p><b>Жирный шрифт</b> в тексте.</p> </body> </html> Поскольку одновременно можно использовать любое разумное сочетание тегов, следует помнить об их вложенности (пример 2). Один контейнер должен находиться внутри другого, и никак не пересекаться (пример 3). Пример 2. Правильное сочетание тегов <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Вложение тегов</title> </head> <body> <p><b><i>Полужирный курсивный текст</i></b></p> </body> </html> В данном примере текст находится внутри контейнера <I>, который устанавливает курсивное начертание, а он в свою очередь размещается внутри контейнера <B> задающим жирное начертание текста. Результат останется неизменным, если в данном случае поменять теги местами. Пример 3. Неправильное сочетание тегов <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
В данном примере нарушена вложенность тегов один в другой. Хотя браузер и отобразит
пример корректно, самостоятельно «догадавшись» что от него хотят, подобных ошибок
следует избегать, поскольку они приводят к замедлению работы страницы и к неправильной
демонстрации страницы в большинстве случаев. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Ошибка во вложении тегов</title> </head> <body> <p><i><b>Полужирный курсивный текст</i></b></p> </body> </html> Структура документаВсе нормальные веб-страницы состоят из двух разделов — заголовка (<HEAD>) и тела документа (<BODY>). Раздел заголовка может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице. Тело документа предназначено для размещения тегов и содержательной части (пример 4). Пример 4. Простейший HTML-документ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <!-- Этот раздел предназначен для заголовка страницы и технической информации. --> </head> <body> <!-- А здесь надо размещать все, что хочется увидеть на странице. --> </body> </html> DOCTYPEЭлемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>. Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 1. приведены основные типы документов с их описанием.
Раздел заголовка документа (<HEAD>)Теги и тексты, находящиеся в этом разделе, не отображаются на веб-странице. Этот раздел обычно предназначен для следующей служебной информации. Заголовок страницы (тег <TITLE>)Используется для отображения строки текста в левом верхнем углу окна браузера. Такая строка сообщает пользователю название сайта и другую информацию, которую добавляет разработчик. CSS (Cascading Style Sheets, Каскадные таблицы стилей)Стили хранят набор элементов форматирования, который применяется к тексту документа, чтобы быстро изменить его внешний вид. Метатеги (тег <META>)Метатеги используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Хотя тег <META> всего один, он имеет множество параметров, поэтому для его обращения применяется множественное число. СкриптыСкриптом традиционно называют программу, которая внедряется в тело веб-страницы и выполняет на ней определенные действия. Распространенным языком программирования для написания скриптов является JavaScript. Порядок тегов в заголовке документа особого значения не имеет. Тело документа (<BODY>)Тело документа предназначено для отображения данных на веб-странице, в частности, в теле размещается текст, изображения, ссылки, таблицы, списки и т.д. КомментарииКак показано в примере 4, некоторый текст можно скрыть от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрываемую информацию. Комментарии начинаются тегом <!-- и заканчиваются тегом -->. Все, что находится между этими тегами отображаться на веб-странице не будет. | |||||||||||||||||||||||
| Просмотров: 2128 | Комментарии: 1 | | |||||||||||||||||||||||
| Всего комментариев: 0 | |