|
|
|
|
 Far |
| WinNavigator |
| Frigate |
| Norton
Commander |
| WinNC |
| Dos
Navigator |
| Servant
Salamander |
| Turbo
Browser |
|
|
| Winamp,
Skins, Plugins |
| Необходимые
Утилиты |
| Текстовые
редакторы |
| Юмор |
|
|
|
File managers and best utilites |
Структура HTML-документа: основные теги, пример. Какие тэги указывают браузеру что это html документ
Основные теги HTML
В основе языка HTML лежит понятие «тэг» (англ.: tag-ярлычок, этикетка). Тэги заключаются в угловые скобки (< >) и образуют пары – контейнеры (открывающий тэг и закрывающий). Например, контейнером HTML документа является пара тэгов <html> и </html>. В web-странице включены контейнеры, отвечающие за заголовок документа (голова) и содержат дополнительную информацию, а также контейнеры, отвечающие за само содержание документа (тело). Они представлены на рисунке.
Итак HTML документ заключается в контейнер <html></html>, заголовок в контейнер <head></head>, а содержание документа в контейнере <body></body>. Контейнер <title></title>, расположенный в заголовке (контейнере <head></head>) содержит текст, отображающийся в верхней строке окна браузера. В контейнер заголовка также могут быть добавлены тэги, содержащие кодировку, ключевые слова web-страницы, а также код для подключения файлов каскадных таблиц стилей CSS, языка программирования JavaScript, VBScript и т.д.
Пример простейшей HTML странички, содержащей только основные тэги:
<html><head><title>Название странички</title></head><body>Содержание простейшей странички</body></html>
Результат работы указанного кода изображен на рисунке.
Как видно из примера текст «Содержание простейшей странички» отображается обычным текстом. Для того чтобы произвести форматирование этого текста, необходимо использовать специальные тэги. Пример использования тэгов форматирования представлен на рисунке.
Для изменения шрифта, его цвета и размера используется тэг <font> с параметрами “face”, “color” и “size”. Например для того чтобы задать шрифт “arial” красного цвета и 14 размера необходимо написать следующий код:
<font face=”Arial” color=”red” size=”14”>Форматируемтекст</font>
Для выделения абзаца в тексте используется тэг <p>, в контейнер которого как правило помещается каждый абзац текста. Для создания заголовка используются тэги <h2>, <h3>, <h4>, <h5>, <h5>, <h6>.
Для формирования списков в теле документа используются контейнеры <ol></ol>, <ul></ul> и <li></li>. Причем тэг <ol> формирует нурмерованный список, тэг <ul> - маркированный список, а в тэгах <li> помещаются элементы списка. Пример кода отображения списков, представленный в виде нумерованного и маркированного списков представлен на рисунке.
Для связи двух и более Web-страниц между собой используются гиперссылки, для создания которых используется тэг <a>. Причем в тэгах гиперссылок используются дополнительные атрибуты, позволяющие либо перейти к другой web-странице, либо переместиться внутри данной страницы. Второй способ желательно использовать в большом документе, имеющем несколько смысловых разделов.
Пример использования гиперссылок представлен на рисунке.
При указании URL адреса другой страницы необходимо указывать либо полный абсолютный путь к странице «полный путь/папка/страница» либо относительный (относительно данной страницы) «папка/страница». Параметр “target” позволяет открыть web-страницу в новом или существующем окне браузера.
Для вставки изображения на web-страницу используется тэг <img> с параметрами src (путь к изображению), width (ширина изображения), height (высота изображения), border (рамка вокруг рисунка). Пример кода вставки изображения:
<img src=”путь/изображение.jpg” width=”100” height=”50” border=”1” >
Часто при создании Web-страниц необходимым является задание фонового цвета или фонового изображения. Для этого используются атрибуты тэга <body> «bgcolor» или «background-image». Пример вставки фонового цвета:
<body bgcolor=”red”>
Пример вставки фонового изображения:
<body background=”путь/изображение.jpg”>
Указанные атрибуты могут быть использованы не только для тэга <body>, но и для тэгов таблицы, области и других, которые будут рассмотрены в следующих темах.
webriz.ru
Основные теги HTML, структура html страницы
HTML(HyperText Markup Language) – это язык разметки гипертекста. Язык разметки используется для придания структуры интернет-странице, сайту. Язык разметки не несет в себе оформление, а выполняет задачи структурирования. Структура задается с помощью специальных элементов — меток, понятных браузеру. Эти метки называются тегами – от англ. слова tag — именованная метка.
Гипертекст – это документ, разметка которого выполнена с помощью языка HTML. Термин «гипертекст» изначально был введён Тедом Нельсоном для обозначения текста, «который разветвляется сам по себе или выполняет действие по запросу».
HTML документ – это обычный текстовый файл, который имеет специальную структуру. При открытии интернет-браузер обрабатывает этот документ, в результате чего мы с вами видим привычные для нас интернет-страницы, где есть текст, картинки, ссылки, и т.д. Интернет-страницы имеют расширение – html.
Рассмотрим структуру простого HTML документа
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body>
</body> </html> |
Строка <html> называется тегом. Вообще, все, что заключено в символы <> называется тегом. Данные символы — служебные в языке HTML. Теги бывают двух видов:
- Парные — данные теги имеют открывающийся и закрывающийся тег. Закрывающийся тег содержит знак наклонной черты. Между данными тегами вписывается содержимое тега. Содержимым тега может быть как обычный текст, так и другие, вложенные теги. Примеры парных тегов: <html></html>
- Непарные — теги, которые не закрываются. Пример: <br>
Теги можно писать большими и малыми буквами, поскольку HTML не различает написание. Закрывать парные теги нужно всегда!
Считается хорошим тоном знать и уметь оперировать большим количеством тегов. Этого не нужно пугаться, всё запомнится и уложится в голове, как только вы начнёте применять свои знания на практике. С основными тегами мы познакомимся в ходе нашего дальнейшего обучения. А вообще, в интернете сейчас доступно огромное количество справочников по HTML, где вы сможете найти актуальную информацию, ведь прогресс не стоит на месте, а языки программирования стремительными тепами развиваются и практически каждые пол года выходят обновления. Также, минимум тегов, которые будут необходимы нам в ходе обучения вы найдете в нашей шпаргалке
Рассмотрим структуру HTML документа:
- <!DOCTYPE html> — что же это за тег такой? Это версия HTML которая используется в данной странице. Подобным тегом принято начинать все HTML-документы. Это считается хорошим тоном. DOCTYPE указывает браузеру в какой версии HTML был написан документ, для того, что бы все браузеры (а их сейчас много) могли правильно обработать разметку и отобразить содержимое документа. Если этого не сделать, то браузер по умолчанию некорректно определит версию документа, в результате чего вся разметка может поехать и неправильно отображаться в разных браузерах. В данном случае DOCTYPE указывает на версию HTML5.
- <HTML></HTML> — все содержимое страницы заключено между данными парными тегами, которые информируют браузер, что это HTML страница.
- <head></head> -служебная секция (заголовок), которая используется для подключения внешних файлов, и установок отвечающих за вид, вывод и работу данной страницы. Содержимое ее, чаще всего, не отображается на странице, кроме тега title. Тег title – содержит заголовок страницы, который отображается во вкладке.
- <body></body> — все что отображается на странице, пишется в теге body.
Для расширения функционала HTML в тегах добавляют специальную информацию, которая называется атрибутами. Так в строке:
charset="UTF-8" — атрибут. Атрибутов может быть много. Атрибуты пишутся через пробел. В данном случае, с помощью тега meta HTML странице указывается кодировка UTF-8. Т.е. браузеру указывается кодировка данного документа, для правильного отображения содержимого страницы.
Атрибуты используются для расширения функционала тегов и позволяют модифицировать как способы отображения тегов на странице, так и их поведение. Не все теги используются для вывода информации, есть теги которые используются только для программирования поведения страницы, например с помощью JavaScript.
Вопросы для самоконтроля
- Что такое гипертекст?
- В чем состоит необходимость использования HTML?
- Что такое кодировка страницы? Зачем она применяется? Где в браузере можно поменять кодировку?
- Какие виды атрибутов вам известны?
- Что такое теги? Чем они отличаются от атрибутов?
- Какие теги обязательно должна содержать HTML страница?
Текст урока разработан совместно с Каменщик М.
w3.org.ua
Структура HTML документа: тип HTML документа, заголовок HTML документа, тело HTML документа, границы HTML документа
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой продолжим раздел HTML. Эта запись поможет разобраться вам со структурой HTML документа. На самом деле, структура HTML документа очень простая: границы документа, заголовок, тело и декларация. О каждом элементе структуры документа и его назначении вы можете узнать из этой публикации.
Структура HTML документа: тип HTMLдокумента, заголовок HTML документа, тело HTML документа, границы HTML документа
Кроме того, что мы рассмотрим структуру HTML документа, мы поговорим о том, как браузер интерпретирует HTML документ и проведем параллель между HTML и протоколом HTTP, ведь обе эти технологии были разработаны в ЦЕРНе одним и тем же человеком для того, чтобы сделать общение по сети более доступным и простым специально неподготовленным пользователям. Так же любой начинающий веб-разработчик или веб-мастер должен знать и понимать, как работают эти две технологии: HTML и HTTP.
Структура HTML документа. Особенности работы браузера с HTML
Содержание статьи:
Когда мы разговаривали о том, что такое HTML и создавали первую HTML страницу, мы сделали это неправильно, да HTML документ был создан и мы его даже смогли посмотреть в браузере, но данный документ был неправильным с точки зрения стандарта HTML, хотя браузер «понял» и корректно отобразил страницу, но это заслуга браузера.
Прежде чем перейти к рассмотрению структуры HTML документа, давайте откроем файл в папке Lesson 1 (этот файл мы создали, когда знакомились с HTML) в браузере и воспользуемся консолью разработчика, я буду использовать для этого Google Chrome, вы можете использовать любой другой браузер.
Открыв index.htmlв браузере, нажмите F12, либо нажмите правой кнопкой мыши в области просмотра и из контекстного меню выберите пункт «Просмотреть код».
Смотрим код сформированной HTML страницы в браузере
Снизу у нас появится консоль, в которой наибольший интерес для нас в данный момент представляет вкладка Elements.
Код HTML страницы в консоли браузера
А теперь нажмите еще раз по области просмотра правой кнопкой мыши, но теперь нажмите «Просмотр код страницы».
У вас откроется новая вкладка в браузере, в которой будет отображен HTMLкод, из которого получилась данная страница, в моем случае это:
Заметили разницу? В консоли помимо текста «Hello, World!» мы видим HTML тэги, когда мы смотрим HTML код, мы этих тэгов не видим. Данный пример очень показательный по двум причинам:
- Вы увидели структуру HTML документа.
- Вы увидели, как браузер обрабатывает HTML код.
Все дело в том, что разработчики браузеров заботятся о своих пользователях в отличии от некоторых HTML разработчиков, поэтому браузеры будут исправлять некоторые ошибки разработчика, чтобы пользователь видел красивую и правильную структуру HTML документа. Здесь стоит заметить, что HTML тэги могут делиться как на одиночные и парные HTML тэги, так и на обязательные и необязательные HTML тэги, так же существуют еще и запрещенные HTML тэги. Обо всем этом мы обязательно поговорим.
В данном примере браузер сгенерировал структуру HTML документа за нас, но, тут можно подумать, что тэги, обозначающие структуру HTML документа необязательные, и этот будет глубоким заблуждением, просто браузер генерирует тэги структуры HTML документа в том случае, когда разработчик их не указал.
Из-за того, что браузер сгенерировал структуру HTML документа, мы видим разницу между консолью и исходным кодом HTML документа. В консоли всегда отображается то, что на странице. В исходном коде браузера отображается код, который получил браузер на интерпретацию, это разные вещи.
Вы, наверное, уже разобрались со структурой HTML документа, посмотрев код консоли. Но я предлагаю вам взглянуть на картинку ниже, на ней изображена структура HTMLдокумента.
Структура HTML документа
Сверху мы видим HTML тэг <!DOCTYPE>, этот тэг так же является частью структуры HTML документа, но браузер его не генерирует, так как по тэгам не может определить версию HTML стандарта, как раз таки для определения версии HTML документа и используется тэг <!DOCTYPE>. Обратите внимание: это не простой параметр. На основе версии определяются правила написания тэгов (синтаксис HTML) и набор тэгов, который может быть использован в документе и, если эти правила будут нарушены, то ваш код будет невалидным.
Далее зеленой линией обозначен тэг <html>, который определяет границы HTML документа, весь код HTML документа за исключением декларации должен быть внутри тэгов <html> и </html>, иначе документ будет невалидным. Для простоты понимания структуры HTML документа можно представить, что тэги <html>и </html> это своеобразный контейнер, а декларация DOCTYPE это инструкция по использованию контейнера.
Но также на рисунке мы видим, что наш контейнер <html>состоит из двух отсеков: верхний отсек – это заголовок HTML документа, в заголовке HTML документа располагается служебная информация, которая невидна пользователю за исключением названия HTML документа в тэге <title>.
Нижний отсек – это тело HTML документа, в котором идет код, который отображается браузером на экранах пользователя в виде HTML элементов. Отметим себе, что HTML элементы – это то, что пользователь видит на экране, а HTML тэги – это то, что разработчик пишет в редакторе. Структура HTML документа очень строгая и ее не стоит нарушать, конечно, любой современный браузер будет стараться корректно отобразить HTML документ, но как только вы будете делать валидацию HTML, вы будете получать ошибки.
Да и поисковые системы начинают относиться хуже к тем сайтам, у которых HTML код невалидный. Поэтому никогда не пренебрегайте правилами HTML. Давайте теперь более подробно поговорим о структуре HTML документа.
Заголовок HTML документа: место для служебной информации, которую не видят пользователи. HTML тэг <head>
Пожалуй, самым важным элементом структуры HTML документа является его заголовок. Начало заголовка HTML документа обозначается открывающим тэгом <head>, конец заголовка HTML документа обозначается закрывающим тэгом </head>.
Внутри заголовка HTML документа прописывается вся необходимая служебная информация:
- В заголовке указывается кодировка HTML документа.
- Так же здесь подключатся таблицы стилей.
- Заголовок HTML документа используется для подключения файлов JavaScript.
- В заголовке расположено описание HTML документа.
- В заголовке указывается название HTML документа.
- В заголовке могут быть указаны другие мета-тэги HTML, которые позволяют браузеру корректно отображать документы, а пользователям и поисковой системы получить больше информации о сайте.
Для нас сейчас важно сделать вывод о том, что заголовок HTML документа – важный элемент его структуры, который используется для размещения служебной информации, с некоторыми особенностями мы познакомимся в других записях.
Хочу обратить ваше внимание на то, что заголовок HTML документа и HTML заголовок – разные вещи, по крайней мере в моем понимание. HTML заголовок – это тэги <h2>, <h3>, <h4>и так до <h6>, эти тэги делят документ на разделы.
Тело HTML документа: видимая часть HTML страницы. HTML тэг <body>
В структуре HTML документа есть тело. Браузер обычно отображает содержимое тела HTML документа в области просмотра. Другими словами: тело HTML документа отображается пользователю и он даже может взаимодействовать с HTML элементами при помощи браузера, например, вводить данные в HTML формы.
Тело HTML документа является частью структуры и предназначено для отображения содержимого пользователя, хотя это не означает, что пользователь будет видеть все HTML элементы после того, как браузер проанализирует код страницы, так как некоторые HTML элементы могут быть намеренно скрыты стилями, заданными в CSS или удалены при помощи JavaScript кода.
Открывающий HTML тэг <body> обозначает начало тела HTML документа, закрывающий тэг </body>обозначает его окончание. Вне тела не должно быть HTML тэгов, которые бы отображались пользователю.
Вывод: тело документа – часть структуры HTML документа, которая отображается пользователю в области просмотра браузера.
Границы HTML документа. HTML тэг <html>
Если не быть таким уж формалистом, то HTML можно считать подмножеством XML. В XML действует незыблемое правило: один документ – один тэг. В XML так же, как и в HTML есть декларация. Как понимать это правило: один документ – один тэг. Ведь на самом деле в XML документе тэгов много? Понимать это правило нужно следующим образом: тэг один, но в него может быть вложено сколь угодно много тэгов. Этот внешний тэг называют корневым или корнем. Корень как раз-таки и является границей XML. В HTML границей документа является тэг <html>.
Так и в HTML: весь HTML документ представляет собой один тэг <html>, внутри которого должно быть обязательно два вложенных тэга: <head>и <body>. За пределами границы HTML документа, кроме декларации, ничего быть не должно, на то это и граница.
Важной особенностью структуры HTML документа является то, что за пределами <html>...</html>не должно быть других тэгов, а внутри <html> могут быть только тэги <head>и <body>. А вот внутри тэгов <head>и <body>может быть сколь угодно много тэгов, правда внутри <head>служебных, а внутри <body>тех тэгов, которые видны пользователю.
Повторюсь, что структура HTML документа строгая и порядок написания тэгов должен быть так, как на рисунке выше.
Вывод: тэг <html> определяет границу HTML документа, за пределами которой не должно быть других тэгов, кроме декларации. Внутри границы HTML документа могут располагаться только тэги <head>и <body>в том порядке, как они написаны, а внутри тэгов <head> и <body> можно писать сколь угодно много тэгов.
Тип HTML документа: как браузер узнает о версии HTML в документе. HTML тэг DOCTYPE
Браузер интерпретирует HTML документа. Другими словами: браузер проводит его анализ и в соответствии с этим анализом он решает, как отображать HTML документ пользователю. На данный момент используют два стандарта HTML: 4.01 и 5 (есть еще XHTML, но на это у нас будет отдельная рубрика).
Исходя из вышесказанного, браузеру нужно «понимать»: с какой версией HTML он имеет дело или может он работает не с HTML, а с xHTML? Как ему это понять, чтобы правильно отобразить документ.
Для того чтобы браузер понимал с какой версией HTML он работает, в структуре HTML документа используется декларация, для объявления декларации используется HTML тэг <!DOCTYPE>, мы подробно поговорим про декларацию и ее роль в структуре HTML документа в отдельной записи, сейчас важно понимать то, что она нужна для того, чтобы браузер понял, как интерпретировать код HTML.
В принципе, мы рассмотрели структуру HTML документа и довольноподробно поговорили о каждом элементе структуры и его назначении в HTML, но давайте все-таки напишем код.
Пример структуры HTML документа
Без примера структуры HTML документа публикация была бы не полной. Поэтому откройте папку HTML, которую мы создали в прошлой записи и создайте в ней папку Lesson 2. Затем откройте любой удобный для вас редактор кода и напишите в нем следующее:
<!DOCTYPE html> <html lang="ru-RU"> <head> <meta charset="UTF-8"> <title>Структура HTML документа</title> </head> <body> <p>Lorem ipsum dolor sit amet, consecteturadipisicingelit. Necessitatibusipsaquis, maioresevenietatqueillo rem autemblanditiisiusto sit eumeligendi culpa ullamdebitisinciduntofficiaofficiis, in provident.</p> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title>Структура HTML документа</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consecteturadipisicingelit. Necessitatibusipsaquis, maioresevenietatqueillo rem autemblanditiisiusto sit eumeligendi culpa ullamdebitisinciduntofficiaofficiis, in provident.</p>
</body>
</html> |
Теперь мы создали правильный HTML документ, описав его структуру, отображаться в браузере он будет примерно следующим образом.
Так выглядит HTML документ в браузере с правильно заданной структурой
Если вы откроете консоль и откроете исходный код страницы, то увидите, что структура HTML документа есть и там, и там, только в этот раз браузер не делал работу за нас. Так же на странице мы видим HTML заголовок и HTML параграф, о которых мы поговорим, когда начнем разбираться с типографией в HTML.
Так же обратите внимание на то, что на вкладке появился текст: «Структура HTML документа», это получилось благодаря тому, что внутри заголовка HTML документа мы использовали тэг <title>, который используется для того, чтобы давать имена HTML страницам. На картинке для примера я оставил вкладку, которая принадлежит странице из прошлой записи. Еще внутри заголовка есть мета-тэг с указанием кодировки документа.
Сравниваем структуру HTML документа со структурой HTTP протокола
Ни для кого не секрет, что в сети Интернет основным протоколом передачи данных является HTTP, который расшифровывается, как протокол передачи гипертекста и который был разработан одним и тем же человеком, что и HTML в ЦЕРНе.
Поэтому тут можно провести аналогию с HTTP протоколом, в котором есть HTTP сообщение, состоящее из служебной информации, которая прописывается в специальных полях HTTP заголовка и есть тело HTTP сообщения или HTTP объект, в котором передается полезная для пользователя информация. Согласитесь, что структура HTML документа очень похожа на структуру HTTP протокола.
Но если вам мало, то добавим: и HTTP запрос и HTTP ответ начинаются со статусной строки, если мы говорим про запрос, то в статусной строке указывается метод HTTP протокола, который говорит HTTP серверу о том, как выполнить запрос, а ответ сервера содержит специальный HTTP код состояния, который говорит клиенту о том, как он понял этот запрос. Это похоже на DOCTYPE?
Как браузер интерпретирует HTML документ
HTML и HTTP очень связаны между собой, если вы не знаете, то HTTP протокол синхронный, это означает, что во время HTTP соединения и клиент, и сервер обмениваются сообщениями по очереди. Сперва клиент отправляет запрос, потом сервер отправляет ответ на запрос, если клиенту нужно, он делает еще запрос, на который опять же отвечает сервер.
HTTP клиент в нашем случае – это браузер. По HTTP протоколу чаще всего передаются HTML документы. Из-за особенностей реализации HTTP протокола и структуры HTML документа браузеры реализованы так, что они читают и интерпретируют HTML код слева направо и сверху вниз: сначала браузер проверяет версию HTML, указанную в декларации, затем он видит тэг <html>, который говорит ему о том, что начался HTML документ.
Далее браузер видит тэг <head> и понимает, что сейчас он получит служебную информацию, которая ему нужна, чтобы правильно отобразить документ. Кстати, если браузер увидит, что вы подключаете какой-нибудь скрипт или таблицу стилей, то он будет делать запросы к серверу, чтобы получит недостающие файлы. Увидев закрывающий тэг </head> браузер понимает, что заголовок HTML закончился.
За тэгом <head> браузер видит тэг <body>, который говорит ему о том, что началось тело документа, которое нужно показать клиенту. Проанализировав тело, браузер увидит закрывающий тэг </body> и при этом поймет, что закончилось тело.
Об окончании документа браузер понимает по закрывающему тэгу </html>
Надеюсь, что данная статья помогла вам разобраться со структурой HTML документа и с тем, как обрабатывает браузер HTML код, если есть какие-то вопросы по структуре HTML документов – задавайте их в комментариях, разберемся вместе.
zametkinapolyah.ru
НОУ ИНТУИТ | Лекция | Основы языка HTML
Аннотация: В этой лекции рассматривается структура HTML-документа. Описывается создание и применение гиперссылок, списков, таблиц, фреймов, форм. Показаны мультимедийные возможности HTML.
HyperText Markup Language (HTML) - язык разметки гипертекста - предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.
Гипертекстовый документ - это текстовый файл, имеющий специальные метки, называемые тегами, которые впоследствии опознаются браузером и используются им для отображения содержимого файла на экране компьютера. С помощью этих меток можно выделять заголовки документа, изменять цвет, размер и начертание букв, вставлять графические изображения и таблицы. Но основным преимуществом гипертекста перед обычным текстом является возможность добавления к содержимому документа гиперссылок - специальных конструкций языка HTML, которые позволяют щелчком мыши перейти к просмотру другого документа.
Существует два способа создания гипертекстовых документов. Можно воспользоваться одним из WYSIWYG HTML-редакторов (например, Netscape Composer, основы работы с котором рассмотрены в разделе "Обработка текста на ЭВМ", Microsoft FrontPage, HotDog, или др.), для работы с которыми не требуется специальных знаний о внутренней структуре создаваемого документа. Этот способ позволяет создавать документы для WWW без знания языка HTML. HTML-редакторы автоматизируют создание гипертекстовых документов, избавляют от рутинной работы. Однако их возможности ограничены, они сильно увеличивают размер получаемого файла и не всегда полученный с их помощью результат соответствует ожиданиям разработчика. Но, безусловно, этот способ незаменим для новичков в деле подготовки гипертекстовых документов.
Альтернативой служит создание и разметка документа при помощи обычного редактора plain-текста (таких, как emacs или NotePad). При этом способе в текст вручную вставляются команды языка HTML. Создавая документы таким способом, вы точно знаете, что делаете.
Как уже отмечалось, HTML-документ содержит символьную информацию. Одна ее часть - собственно текст, т. е. данные, составляющие содержимое документа. Другая - теги (markup tags), называемые также флагами разметки, - специальные конструкции языка HTML, используемые для разметки документа и управляющие его отображением. Именно теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ. Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащие HTML-документы, приняты расширения .htm или .html.
Прописные и строчные буквы при записи тегов не различаются. В большинстве случаев теги используются парами. Пара состоит из открывающего (start tag) и закрывающего (end tag) тегов. Синтаксис открывающего тега:
<имя_тега [атрибуты]>
Прямые скобки, используемые в описании синтаксиса, означают, что данный элемент может отсутствовать. Имя закрывающего тега отличается от имени открывающего лишь тем, что перед ним ставится наклонная черта:
</имя_тега>
Атрибуты тега записываются в следующем формате:
имя[="значение"]
Кавычки при задании значения аргумента не обязательны и могут быть опущены. Для некоторых атрибутов значение может не указываться. У закрывающего тега атрибутов не бывает.
Действие любого парного тега начинается с того места, где встретился открывающий тег и заканчивается при встрече соответствующего закрывающего тега. Часто пару, состоящую из открывающего и закрывающего тегов, называют контейнером, а часть текста, окаймленную открывающим и закрывающим тегом, - элементом.
Последовательность символов, составляющая текст, может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например, +, #, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл: < (меньше), > (больше), & (амперсенд) и " (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов.
К специальным символам можно отнести и неразрывный пробел. Использование этого символа - один из способов увеличить расстояние между некоторыми словами в тексте. Обычные пробелы использовать для этих целей нельзя, так как группа подряд идущих пробелов интерпретируется браузером как один.
Каждая из таких зарезервированных последовательностей начинается символом амперсенда (&) и заканчивается точкой с запятой (;).
| < | символ < |
| > | символ > |
| & | символ & |
| " | символ " (кавычка) |
| неразрывный пробел |
Структура HTML-документа
Самым главным из тегов HTML является одноименный тег - <HTML>. Он должен всегда открывать ваш документ, так же, как тег </HTML> должен непременно стоять в последней его строке. Эти теги обозначают, что находящиеся между ними строки представляют единый гипертекстовый документ. Без этих тегов браузер или другая программа просмотра не в состоянии идентифицировать формат документа и правильно его интерпретировать.
Закрывающий тег так же важен, как и открывающий. Если, например, документ включен в электронное письмо, тег </HTML> дает команду программе просмотра прекратить интерпретацию текста, как HTML-кода.
HTML-документ состоит из двух частей: заголовок (head) и тело (body), расположенных в следующем порядке:
<HTML> <HEAD> ... </HEAD> <BODY> ... </BODY> </HTML>В HTML-документ можно включать комментарии, позволяющие скрыть часть текста от браузера. Все, что заключено между последовательностями символов <!- и ->, при просмотре страницы остается невидимым. Комментарии не могут быть вложенными друг в друга.
Заголовок документа
Включение в документ заголовочной части не является обязательным. Задачей заголовка является представление необходимой информации для браузера и сервера HTTP. Информация, размещенная внутри заголовка документа, обычно не выводится на экран (кроме названия документа).
Заголовок документа открывается тегом <HЕAD>, который обычно следует сразу же за тегом <HTML>. Закрывающий тег </HEAD> показывает конец этого раздела, между ними располагаются остальные теги заголовка документа.
Чаще всего в заголовок документа включают парный тег <TITLE> ... </TITLE>, определяющий название документа. Многие программы просмотра используют его как заголовок окна, в котором выводят документ. Программы, индексирующие документы в сети Интернет, используют название для идентификации страницы. Хорошее название должно быть достаточно длинным для того, чтобы можно было корректно указать соответствующую страницу, и в то же время оно должно помещаться в заголовке окна. Название документа вписывается между открывающим и закрывающим тегами.
Тело документа
В отличии от заголовка, тело документа является обязательным элементом, так как в нем располагается весь материал вашего документа (есть только одно исключение, с которым мы познакомимся далее, - когда документ содержит вместо тела группу фреймов). Тело документа размещается между тегами <BODY> и </BODY>. Все, что размещено между этими тегами, интерпретируется браузером в соответствии с правилами языка HTML, позволяющими корректно отображать страницу на экране монитора.
Тег <BODY> не только обозначает начало содержимого документа, но и задает его основные свойства: цвет фона, текста и многое другое. Эти свойства определяются с помощью атрибутов, которые приведены в таблице.
| ALINK | Определяет цвет активной ссылки |
| BACKGROUND | Указывает на URL-адрес изображения, которое используется в качестве фонового |
| BGCOLOR | Определяет цвет фона документа |
| LINK | Определяет цвет непосещенной ссылки |
| ТЕХТ | Определяет цвет текста |
| VLINK | Определяет цвет посещенной ссылки |
Пример
<HTML> <HEAD> <TITLE>Моя страничка</TITLE> </HEAD> <BODY TEXT=red BGCOLOR=white> Тело <!- Это комментарий -> документа </BODY> </HTML>www.intuit.ru
1. Основные понятия
23
HTML разработал Тим Бернерс-Ли (Tim Berners-Lee) в 90 -х годах прошлого столетия на основе работ Теда Нельсона (Ted Nelson), которому принадлежит концепция гипертекста. HTML разработан с учетом того, что информацию из сети могут использовать различные устройства: персональные компьютеры с экранами, обладающими различным разрешением и количеством цветов, сотовые телефоны, устройства для речевого ввода-вывода, компьютеры с высокой и низкой пропускной способностью и т.д.
Язык HTML(Hyper Text Markup Language) — это язык разметки гипертекста. Разметка заключается в том, что в обычный текст добавляются специальные командыHTML, описывающие, как должен выглядеть данный текст.Гипертекст– это расширенный текст, содержащий дополнительные элементы. Главный из них – это гипертекстовая ссылка (гиперссылка), щелчок на которой позволяет перейти к другому документу или к другому фрагменту того же документа. Вставляемые объекты (рисунки, видеоролики и т.д.) также рассматриваются как элементы гипертекста.HTML-документ – это файл с расширением htm илиhtml.
В документе HTMLобычный текст сочетается с элементами разметки, заключенными в угловые скобки < и >, например<html>, <head>, <title>, </title>. Такие элементы разметки называются тэгами (tags).
Тэги могут быть парными и непарными. Любой тэг начинается с левой угловой скобки <, после которой следует имя тэга, и правой угловой скобки >, например <html>. Парный тэг состоит изоткрывающего (стартового) тэга изакрывающего, у которого перед именем отображается символ "/" (слэш), например </html>. Кроме этого, большинство тэгов могут иметь необязательныеатрибуты, значение которых задается "по умолчанию" или явно. Атрибут тэга состоит из имени, знака равенства и значения, которое задается строкой символов. Значения атрибутов обычно заключаются в кавычки. Однако если эти значения используют только символы латинского алфавита, цифры и дефисы, то кавычки можно опустить. Может случиться так, что браузер не понимает данный тэг; в этом случае он его пропускает, но сообщение об ошибке не выдается.
В языке HTML не делают различия между большими и малыми буквами, так, что тэги <HEAD>, <head> и <Head> эквивалентны.
Все тэги делятся на две категории:
структурные тэги;
тэги разметки.
Рассмотрим пример простого HTML-документа:
<html>
<head>
<title>
Пример1
</title>
</head>
<body>
<h2> Всем привет!
</h2>
<p>
Я студент группы МГ-21 Петров П.П.
</p>
</body>
</html>
Для удобства просмотра документа здесь введены дополнительные отступы и пробелы, которые при просмотре документа браузером будут проигнорированы.
При просмотре в браузере мы увидим на экране следующий текст:
Всем привет!
Я студент группы МГ-21 Петров П.П.
Структурные тэги
Они описывают общие свойства документа, например, его название или используемую кодировку символов.
<html>...</html>- тэги, являющиеся признаком начала и конца документа
<head>...</head> - эта пара тэгов указывает на начало и конец заголовка документа (Web-страницы). Помимо наименования документа сюда включается служебная информация.
<title>...</title> - все, что находится между тэгами <title> и </title>, толкуется браузером как название документа. Текст, размещенный за тэгом <title>, отображается в заголовке окна браузера и печатается в верхнем углу каждой страницы при выводе документа на принтер. Рекомендуется давать название, не превышающее 64 символа.
<body>...</body> - эта пара тэгов указывает на начало и конец тела HTML-документа; все то, что заключено между этими тэгами, определяет информацию, отображаемую в окне браузера.
Комментарии
Файл HTML может содержать комментарии, поясняющие написанный HTML-код. Комментарии начинаются с последовательности <!-- и завершаются последовательностью-->. Комментарии игнорируются браузером и не влияют на представление документа на экране.
Например: <--! этот текст является комментарием-->
studfiles.net
Структура HTML-документа: основные теги, пример
HTML – это язык разметки сайта. Многие считают его программированием, но это не так. В HTML нет никаких переменных, вычислений, массивов и других элементов, присутствующих в любом языке программирования.
Пользуясь HTML, разработчик может создать только внешний вид сайта. Важно понимать, что ни один сайт не существует без разметки. HTML является базой создания веб-страниц. Весь остальной функционал добавляется различными языками программирования.
Создание html-документа
Создать простую страничку сайта можно в любом редакторе. Подойдет даже "Блокнот". Для начинающего разработчика рекомендуется использовать другие редакторы, у которых есть функции автоподстановки и другие подсказки. Благодаря этому можно создавать готовые таблицы, ссылки, изображения и другие элементы. А в "Блокноте" каждую букву приходится писать вручную.
Как правило, "Блокнот" используют только в тех случаях, когда под рукой нет других инструментов. Сначала создается текстовый документ, а потом сохраняется в формате html. Все страницы сайта должны быть с расширением html.
Язык html является иерархичным. То есть существует специальная структура html-документа. Что это такое? Рассмотрим ниже для наглядности.
Структура html-документа. Пример
Структура всегда одна и та же. Если вы захотите поменять что-то, браузер не сможет это обработать. В результате вы не получите то, что задумали.
На рисунке выше указана структура любого html-файла. Первый пункт указывает на тип файла. Этот тег указывается один раз. Если вы будете использовать специальные редакторы, то вся структура создастся автоматически. Вам нужно будет подправить стандартные значения.
Структура html-документа - основные теги:
Из этих трех тегов состоит каркас всего сайта. Обратите внимание на рисунок. Все эти теги имеют закрывающийся тег со знаком “/”. Если вы пишете от руки, привыкайте ставить сразу оба тега – открывающий и закрывающий.
Выше было сказано, что страницы сайтов имеют расширение .html. То есть если вы создадите текстовый документ, но при этом напишете правильный код, браузер всё равно отобразит вам просто текст. Никакого преобразования кода не будет.
Раздел head
На рисунке под пунктом 3 указан раздел head. В этом разделе указывается служебная информация. Например, можно указать кодировку (пункт 4) и заголовок страницы (пункт 5).
Заголовок должен быть всегда. Без него ни один поисковик не сможет определить название контента (текста) на веб-странице. А это плохо для продвижения сайта. Более того, в браузере наверху не будет указан заголовок страницы. Это неудобство для пользователя.
Структура html-документа такова, что заголовок <title> указывается только в разделе head. Если тег <title> указать в разделе body или после него, то обработчик на него не обратит внимания.
Кроме этого, в разделе head указывается информация для подключения скриптов, файлов стилей, инструкции для поисковых систем или любые другие данные, которые пользователь не должен видеть, но они важны для браузера или программистов.
Подключение стилей
Структура html-документа позволяет подключать стили различными способами. Более того, их можно писать индивидуально в каждом элементе. Но данный способ не рекомендуется, поскольку код становится слишком большим и неудобным.
Поисковые системы рекомендуют все стили выносить в отдельный файл, а в элементах просто использовать различные классы.
Подключается файл следующим образом.
<link rel = “stylesheet” href = “style.css” type = “text/css”>
В атрибуте href указывается путь до файла. Если в пути будет ошибка, то стили не загрузятся. Также обязателен атрибут type, который указывает, что это файл css.
Другим вариантом является определение стилей прямо в разделе head.
Но этот вариант также не очень рекомендуется. Эти методы сильно отличаются тем, что файл css может быть одним для всего сайта, и все изменения в нем будут мгновенно применяться ко всем страницам. А если вы используете метод, который указан на рисунке выше, то вам придется вносить изменения во все существующие страницы сайта.
Если создаваемый класс будет использоваться только на одной странице, тогда этот вариант вам подходит.
Подключение скриптов
Скрипты подключаются следующим образом.
<script type=“text/javascript” src=“main.js”></script>
Здесь обязательны два атрибута: type и src. В первом указываем, что это файл Javascript, а второй – где расположен файл. Если вы допустите опечатку, то ничего работать не будет.
Раздел body
Структура html-документа такова, что размещать содержание, которое будет видно пользователю, нужно только в разделе body. Название тега говорит само за себя.
Здесь указывается весь основной код страницы, который может включать неограниченное число элементов. Но чем длиннее код, тем дольше он будет обрабатываться.
Рассмотрим самые основные теги, которые можно использовать в области body. Основных не так много. Все остальные вы будете узнавать по мере роста ваших знаний и практики.
Основные теги
Структура html-документа требует обязательного порядка написания элементов. Теги всегда должны по краям обрамляться скобками <>. Без этого браузер не поймет, что это тег. После открывающейся скобки всегда следует имя элемента (тега). Если вы допустите пробел между < и именем, то браузер посчитает это текстом.
Рассмотрим на примере тега изображения. Обратите внимание, что этот тег не закрывающийся, в отличие от ссылок, абзаца и многих других.
Порядок атрибутов не имеет значения. Но их написание (оформление) очень важно. Всегда сначала идет имя атрибута, потом знак равенства, затем в кавычках пишется значение атрибута. Значение может быть разным – цифровое или текстовое.
Атрибут src во всех тегах указывает путь файла, который нужно подгружать. Атрибут alt во всех элементах указывает короткое описание. В данном случае загружается фотография bird.jpg с описанием – фотография птицы.
Кроме этого, в теге img, можно было указать размеры, только ширину или высоту, заголовок, выравнивание, класс стиля или рамку.
Рассмотрим другие основные теги, которые указываются в разделе body.
Тег | Назначение |
<a>…</a> | Ссылки |
<img> | Изображения |
<p>…</p> | Абзац |
<br> | Перенос текста на новую строку |
<strong>…</strong> | Жирный текст |
<i>…</i> | курсив |
<s>…</s> | Перечеркнутый текст |
<u>…</u> | Подчеркнутый текст |
<ol></ol>, <ul></ul> | Списки |
<table></table> | Таблицы |
Как всё это можно представить в голове
Начинающие разработчики не всегда сразу могут представить всё это умозрительно. Посмотрите несколько примеров структуры веб-страниц, и тогда вам точно станет понятно.
Имеет место быть такой вариант:
И такой:
Использование стилей
Как и говорилось вначале, стили можно подключать как файлом, так и указывать в разделе head. В любом случае описание классов происходит совершенно одинаково.
Например, можно указать стиль для заголовка. Тогда вам нужно написать h2 (поскольку стиль будет для заголовка второго уровня), открыть скобки и писать, какие свойства будут в этом элементе. Если вы знаете базовый английский, то проблем быть не должно. Все свойства названы человеческим языком.
Если хотите указать этот стиль сразу для нескольких элементов, то напишите их через запятую.
Результатом будет красный заголовок.
Вышеуказанные способы подходят для оформления стандартных элементов. Но также можно создавать и свои классы. Их название должно начинаться с точки, затем пишется любое произвольное имя.
Использовать их нужно вот так.
Обратите внимание: если вы указали настройки стилей для стандартного элемента, не нужно в дальнейшем писать слово class. Стиль будет применяться по умолчанию. В атрибуте class можно указать только те стили, которые у вас начинаются с точки.
fb.ru
HTML — язык разметки гипертекста Гипертекстовый документ Структура HTML-документа
Hyper Text Markup Language (HTML) — язык разметки гипертекста — предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.
Гипертекстовый документ — это текстовый файл, имеющий специальные метки, называемые тегами, которые впоследствии опознаются браузером и используются им для отображения содержимого файла па экране компьютера.
С помощью этих меток можно выделять заголовки документа, изменять цвет, размер и начертание букв, вставлять графические изображения и таблицы. Но основным преимуществом гипертекста перед обычным текстом является возможность добавления к содержимому документа гиперссылок — специальных конструкций языка HTML, которые позволяют щелчком мыши перейти к просмотру другого документа.
HTML-документ состоит из двух частей: собственно текста, т. е. данных, составляющих содержимое документа, и тегов — специальных конструкций языка HTML, используемых для разметки документа и управляющих его отображением. Теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ.
Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащих HTML-документы приняты расширения .htm или .html.
В большинстве случаев теги используются парами. Пара состоит из открывающего <имя_тега> и закрывающего </имя_тега> тегов. Действие любого парного тега начинается с того места, где встретился открывающий тег, и заканчивается при встрече соответствующего закрывающего тега. Часто пару, состоящую из открывающего и закрывающего тегов, называют контейнером, а часть текста, окаймленную открывающим и закрывающим тегом, — элементом.
Последовательность символов, составляющая текст может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например #, +, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл: (больше), & (амперсанд) и " (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов.
Структура HTML-документа
Самым главным из тегов HTML является одноименный тег <html>. Он всегда открывает документ, так же, как тег </html> должен непременно стоять в последней его строке. Эти теги обозначают, что находящиеся между ними строки представляют единый гипертекстовый документ. Без этих тегов браузер или другая программа просмотра не в состоянии идентифицировать формат документа и правильно его интерпретировать.
HTML-документ состоит из двух частей: заголовок (head) и тела (body), расположенных в следующем порядке:
<html> <head> Заголовок документа </head> <body> Тело документа </body> </html>Чаще всего в заголовок документа включают парный тег <title>... </title>, определяющий название документа. Многие программы просмотра используют его как заголовок окна, в котором выводят документ. Программы, индексирующие документы в сети Интернет, используют название для идентификации страницы. Хорошее название должно быть достаточно длинным для того, чтобы можно было корректно указать соответствующую страницу, и в то же время оно должно помещаться в заголовке окна. Название документа вписывается между открывающим и закрывающим тегами.
Тело документа является обязательным элементом, так как в нем располагается весь материал документа. Тело документа размещается между тегами <body> и </body>. Все, что размещено между этими тегами, интерпретируется браузером в соответствии с правилами языка HTML позволяющими корректно отображать страницу на экране монитора.
Текст в HTML разделяется на абзацы при помощи тега <р>. Он размещается в начале каждого абзаца, и программа просмотра, встречая его, отделяет абзацы друг от друга пустой строкой. Использование закрывающего тега </р> необязательно.
Если требуется «разорвать» текст, перенеся его остаток на новую строку, при этом, не выделяя нового абзаца, используется тег разрыва строки <BR>. Он заставляет программу просмотра выводить стоящие после него символы с новой строки. В отличие от тега абзаца, тег <BR> не добавляет пустую строку. У этого тега нет парного закрывающего тега.
Язык HTML поддерживает логическое н физическое форматирование содержимого документа. Логическое форматирование указывает на назначение данного фрагмента текста, а физическое форматирование задает его внешний вид.
При использовании логического форматирования текста браузером выделяются различные части текста в соответствии со структурой документа. Чтобы отобразить название, используется один из тегов заголовка. Заголовки в типичном документе разделяются по уровням. Язык HTML позволяет задать шесть уровней заголовков: h2 (заголовок первого уровня), h3, h4, h5, h5 и h6. Заголовок первого уровня имеет обычно больший размер и насыщенность по сравнению с заголовком второго уровня. Пример использования тегов заголовков:
<hl>l. Название главы</hl> <h3>l.l. Название раздела</h3>Теги физического форматирования непосредственно задают вид текста на экране браузера, например пара <b></b> выделяет текст полужирным начертанием, <u></u> задает подчеркивание текста, <font></font> управляет шрифтом текста.
Тег <img> вставляет изображение в документ, как если бы оно было просто одним большим символом. Пример применения тега:
<img src = "picture.gif">Для создания гипертекстовой ссылки используется пара тегов <а>... </а>. Фрагмент текста, изображение или любой другой объект, расположенный между этими тегами, отображается в окне браузера как гипертекстовая ссылка. Активация такого объекта приводит к загрузке в окно браузера нового документа или к отображению другой части текущей Web-страницы. Гипертекстовая ссылка формируется с помощью выражения:
<а href = "document.html">ссылка на документ</а>Href здесь является обязательным атрибутом, значение которого и есть URL-адрес запрашиваемого ресурса. Кавычки в задании значения атрибута href не обязательны. Если задается ссылка на документ на другом сервере, то вид гиперссылки такой:
<а href = "http://www.school.donetsk.ua/11.jpg">Фотография 11-А</а>С помощью различных тегов можно рисовать таблицы, форматировать текст, вставлять в документ изображения, видео- , звуковые файлы и прочее.
shkolo.ru
|
|
..:::Счетчики:::.. |
|
|
|
|
|
|
|
|