Язык разметки html понятие назначение. Назначение языка HTML

Базовые конструкции языка HTML.

HTML (HyperText Markup Language, язык гипертекстовой разметки) - специальные инструкции браузеру, с помощью которых создаются Веб-страницы.

Т. е. Web-страницы - это документы в формате HTML, содержащие текст и специальные тэги (дескрипторы) HTML. По большому счету тэги HTML необходимы для форматирования текста (т. е. придания ему нужного вида), который "понимает" браузер. Документы HTML хранятся в виде файлов с расширением. htm или. html.

Тэги HTML сообщают браузеру информацию о структуре и особенностях форматирования Веб-страницы. Каждый тэг содержит определенную инструкцию и заключается в угловые скобки <>. Большинство тэгов состоят из открывающей и закрывающей частей и воздействуют на текст, заключенный внутри.

Для более быстрого знакомства с HTML-кодом можно просматривать понравившуюся вам страницу в режиме "В виде HTML". Для этого в браузере надо выбрать пункт меню "Вид" - "В виде HTML".

После этого откроется новое окно с исходным текстом HTML-кода. Просматривая готовый код HTML, вы узнаете, как тэги языка применяются более опытными программистами. Кроме того, это один из способов преодоления различных проблем, возникающих время от времени.

Как создаются Web-страницы

Язык HTML определяет набор специальных команд, называемых тегами и используемых для задания форматирования или назначения тех или иных элементов Web-страницы. Особые теги используются для размещения на Web-страницах графических изображений, аудио - и видеоклипов и прочих так называемых внедренных объектов.

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

Язык гипер-текстовой разметки HTML очень прост в освоении. Его изучение можно сравнить с изучением какого либо лингвистического языка. Если, например в основной единицей является, слово, то в HTML этой минимальной единицей является тег. По существу это есть команды языка разметки веб-страниц html. Любая web-страница, любой сайт состоит из текста, графики и т. д. И все эти радости контролируют маленткие и незаметные тэги. Теги - это то, благодаря чему текст и картинки вместо бессмысленного месива представляют из себя жестко структурированную конструкцию. Именно благодаря тегам текст на сайте радует посетителя разнообразием размеров и цветов, именно теги позволяют чудесным рисункам стоять на предназначенном для них месте при любом разрешении экрана и размере окна браузера. Возможности тегов безграничны, их количество огромно

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

Любой HTML документ, который передается браузеру, должен состоять из некоторых обязательных частей:

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

Таким образом структура простого HTML документа выглядит примерно так:

Структура HTML документа

- Начало документа

ЗАГОЛОВОК ДОКУМЕНТА

ТЕЛО ДОКУМЕНТА

- Конец документа

Элементы HTML

Большинство, но не все теги HTML спарены так, что за открывающим тегом следует соответствующий закрывающий тег, а между ними содержится текст или другие теги, например:

Foreword<⁄H1>

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

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

Атрибуты

Для каждого тега определяется множество возможных атрибутов. Большинство тегов допускает один или несколько атрибутов, однако атрибутов может и совсем не быть. Спецификация атрибута состоит из расположенных в следующем порядке:

    имени атрибута, например WIDTH знак равенства (=) значения атрибута, которое задается строкой символов, например, "80".

Всегда полезно заключить значение атрибута в кавычки, используя либо одинарные ("80"), либо двойные кавычки ("80"). Строка в кавычках не должна содержать такие же кавычки внутри себя. Так, если дата заключена в двойные кавычки, используйте одинарные кавычки для последующего заключения в кавычки, и наоборот. Предпочтительно использование двойных кавычек, так как для глаза человека бывает трудно отличить одинарные кавычки от символов, подобных символам акцентирования.

Вы можете также опустить кавычки для значений атрибутов, которые состоят только из следующих символов (обратитесь к технической концепции имени):

    символов английского (A - Z, a - z) цифр (0 - 9) промежутков времени дефисов (-)

Таким образом, WIDTH=80 и ALIGN=CENTER - разрешенное сокращение для WIDTH="80" и ALIGN="CENTER". Ссылка на URL, например, HREF=foo. htm, допустима, однако, когда URL используется с атрибутами, он должен быть закавычен, например HREF="http://www. hut. fi/". Существуют некоторые броузеры, которые допускают отсутствие кавычек или наличие элементов с открывающими кавычками без закрывающих. Однако, такую практику лучше не применять.

Создание абзаца, символов пробела, заголовка

Веб-браузеры обычно не принимают во внимание те символы перевода строки, которые вносятся в текст пользователем на этапе ее формирования. Для начала нового абзаца служит тэг (тег)

После открытия страницы в окне Веб-браузера все абзацы ее текста, помеченные тэгом (тегом)

Разделяются пустыми строками, что улучшает ее компоновку и внешний вид.

По умолчанию браузер обычно форматирует абзац с выравниванием по левому полю. Для принудительного выравнивания служит атрибут align. С его помощью абзацы могут быть выровнены влево, вправо, по центру и по ширине.

Пример:

абзац выровнен влево...

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

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

абзац выровнен по ширине...

Отображение в браузере:

абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево

абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо

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

абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине

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

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

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

Веб-браузеры обычно игнорируют дополнительные символы пробела, введенные в текст страницы. Для этого используется команда  . Эта команда создает неделимое пустое пространство между элементами страницы, будь то графика или текст. Следует учитывать тот факт, что использование   вместо пробела между двумя соседними словами гарантирует, что оба слова не будут разнесены по разным строкам в окне браузера - они будут расположены всегда рядом.


Назначение языка HTML

Теги HTML

Атрибуты тегов

Основные понятия, связанные с определением языка HTML

Все Web-страницы Интернета имеют одну общую черту - они созданы с помощью средств языка HTML.

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

HTML - это язык разметки гипертекста. Он определяет правила, согласно которым обычный текст представляется в виде Web-страниц.

Язык HTML появился одновременно со службой World Wide Web и развивался вместе с ней, постепенно вбирая в себя новые черты, которые позволяли создавать все более и более впечатляющие Web-страницы.

Он является основой World Wide Web и одновременно причиной ее широчайшей популярности. Смысл и назначение языка HTML можно понять, исходя из его названия.

Как было сказано выше Гипертекст - это текст, в который встроены специальные коды, управляющие дополнительными элементами, такими как форматирование, иллюстрации, мультимедийные вставки и гиперссылки на другие документы.

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

Разметка, может быть, простой или сложной, но в любом случае исходный текст сохраняется в документе в неизменном виде.

Но самое важное слово в этом описании - язык .

HTML представляет собой компьютерный язык, в некотором смысле родственный языкам программирования. Он включает достаточно строгие правила, которые необходимо соблюдать, чтобы получить правильные результаты.

Назначение языка HTML

Несмотря на то, что Web-страницы появляются на экране компьютера в отформатированном виде, язык HTML не предназначен для форматирования документов, поскольку жесткое задание оформления и точное позиционирование элементов текста на странице приводит к ограничениям, недопустимым в Интернете.

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



Может быть, текст появится на экране компьютера, работающего в системе Windows в окне одного из современных браузеров. Может быть, это будет текстовый браузер (неспособный отображать графику), работающий в системе MS-DOS. Возможно, текст доку­мента вообще не будет отображаться на экране, а будет воспроизводиться вслух с помощью синтезатора речи. Для слепого пользователя документ может выводиться на специальное устройство шрифтом Брайля.

В связи с необходимостью подготавливать документы для столь разнообразных устройств язык HTML не предназначен для описания формата документа. Он служит для функциональной разметки документа, то есть позволяет определить назначение фрагментов текста.

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

Язык HTML все-таки имеет некоторые команды форматирования, но общий курс на разделение содержания и оформления документа выдерживается четко. В последней версии HTML- 4.0 использовать команды форматирования, как правило, не рекомендуются.

Тэги HTML

Коды языка HTML, с помощью которых выполняется разметка исходного текста, называются тэгами.

Тэг - это набор символов. Все теги начинаются с символа «меньше» (<) и заканчиваются символом «больше» (>). Пару этих символов иногда называют угловыми скобками. После открывающей угловой скобки идет ключевое слово, определяющее тэг.

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

Как правило, один тег HTML воздействует только на часть документа, например на абзац. В таких случаях используют парные тэги: открывающий и закрывающий. Открывающий тэг создает эффект, а закрывающий - прекращает его действие. Закрывающие тэги начинаются с символа косой черты (/).

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

Если по ошибке в теге указано ключевое слово, отсутствующее в языке HTML, то тэг игнорируется целиком.

При отображении документа в браузере сами теги не отображаются, но влияют на способ отображения документа.

Атрибуты тегов

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

Некоторые атрибуты требуют указания значения атрибута. Это значение отделяется от ключевого слова знаком равенства (=). Значение атрибута должно заключаться в кавычки, но во многих случаях эти кавычки могут опускаться без какого-либо вреда. Закрывающие тэги никогда не содержат атрибутов.

Примеры использования тегов HTML:

Общий заголовок

Заголовок окна

<Н1>Крупный текст

<Н2>Средний текст

<Р> Эти строки изображаются слитно, несмотря на то, что в документе они отделены друг от друга

<Р> Закрывающий тэг абзаца не обязателен.

<Р>Тэг начала абзаца более важен, чем реальный переход на новую строку.

Текст после горизонтальной линейки
разбит на две строки.

Примеры парных тэгов HTML:

...

...

...

Примеры одиночных тэгов HTML:

...

... ... ... …

Примеры тэгов HTML с атрибутами:

...

...

Перечень основных понятий: Язык HTML. Теги HTML.

Ключевые моменты: . Основные понятия, связанные с определением языка HTML. Назначение языка HTML. Теги HTML. Атрибуты тегов.

Вопросы к самопроверке:

1. Что такое HTML?

2. Что такое гипертекст?

3. Что понимается под разметкой?

4. Что представляет собой HTML?

5. Для чего не предназначен HTML?

6. Как называют коды языка HTML, с помощью которого выполняется разметка исходного текста?

7. Что такое Тэг?

8. В каких случаях используют парные тэги?

9. Что такое атрибуты?

10. Что требуют некоторые атрибуты?

Язык HTML (Hyper Text Markup Language) - язык гипертексто­вой разметки документа, служит для написания Web-сайтов. Язык HTML позволяет:

    создавать и редактировать Web-сайты, в том числе домашнюю Web-страницу, которую можно затем разместить в Интернете;

    редактировать документы HTML, полученные из Интернета, так чтобы функционировали все внедренные в документ объекты (картинки, анимации и т.д.);

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

Основные понятия языка html

Элемент - это конструкция языка HTML, или контейнер, со­держащий данные.

Web -страница представляет собой набор элементов.

Тег (Tag) - это стартовый и конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. Теги заключаются в угловые скобки, например: < HTML >. Конечный тег, если он предусмотрен синтаксисом языка, снабжает­ся косой чертой: HTML > .

Фрейм (Frame) - область гипертекстового документа со своими полосами прокрутки. Фреймы позволяют разбивать страницы Hi прямоугольные области, в каждой из которых отображается свои собственная страница. Вы можете разместить один или несколько

фреймов на странице (такая страница называется страницей фрей­мов или фреймсет (frameset)).

Форма (Form) - область гипертекстового документа, кото­рая необходима для организации обратной связи с посетителями сайта.

Апплет (Applet) - небольшая прикладная программа, передавае­мая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.

Скрипт (Script) - программа, включенная в состав Web-страни­цы для расширения ее возможностей.

Размещение (UpLoad) - копирование документа с компьютера клиента на Web-сервер - используется при создании собственной Web-страницы (т.е. при ее опубликовании).

Пиксел (Pixel) - наименьшая цветная точка экрана монитора.

Общая структура простейшего документа html

Общая структура простейшего документа HTML такова:

<COMMENT> Koмментарий>

< TITLE > Название документаL Е >

HEAD >

< BODY >

Здесь расположен текст самого документа HTML.

BODY >

HTML >

Дадим пояснения указанным тегам документа HTML.

< COMMENT > - комментарий к документу. Не является обяза­тельным.

< HTML > - идентификатор всего блока HTML-команд.

< HEAD > - идентификатор заголовка документа HTML .

< TITLE > - идентификатор заголовка окна просмотра.

< BODY > - идентификатор HTML -команд документа для про­смотра.

Три основных тега < HTML >, < HEAD > и < BODY > передают броузеру основную информацию для идентификации и организа­ ции документа.

Все указанные теги - парные, т.е. каждый из них заканчивается конечным тегом с косой чертой. Все команды можно писать как с маленькой, так и с большой буквы.

<МЕТА> - непарный тег применяется для указания подробной информации о документе.

HTML - язык разметки гипертекста, который сделал интернет таким, каким мы его знаем и любим. Именно благодаря этому замечательному инструменту сайты выглядят красиво и современно, а также обеспечивается удобство их использования. Язык HTML просто компонует элементы веб-страницы в удобный для пользователя вариант. Его работа сравнима с тем, что делают типа MS Word или OpenOffice. Они превращают безликую массу букв в документ, в котором есть абзацы, жирный текст, курсив, таблицы и даже изображения. Примерно то же самое делает язык HTML, с той лишь разницей, что его документы отображаются в браузере, да и возможности этого инструмента гораздо шире, чем у текстового редактора. Для разметки используются теги — специальные команды, описывающие структуру веб-страницы. Они заключены в угловые скобки - <тег>, чтобы браузер мог отличить их от общей массы текста. Далее мы рассмотрим основы HTML для начинающих.

Визуальные редакторы

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

Все эти программы создают много ненужных тегов, которые делают конечный вариант страницы громоздким и неоптимальным. Конечно, в наш век скоростного интернета это имеет меньшее значение, чем раньше, но есть ряд причин, по которым лаконичный и грамотно написанный сайт получается более практичным, чем его собрат, созданный в визуальном редакторе. Веб-страница, сделанная в такой программе, будет плохо обрабатываться поисковыми роботами, так как для них важен каждый килобайт кода, а громоздкий и нелогичный код с кучей едва ли придётся им по вкусу. Помимо этого, редакторы часто отстают от времени, становясь неактуальными, а тратить ресурсы на их развитие нецелесообразно, так как ни один профессионал не пользуется этими продуктами. Поэтому каждый, кто хочет работать в сфере создания сайтов, должен знать основы HTML.

Теги

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

Встречаются также одиночные теги, которые не нужно закрывать. В них содержимое находится внутри, так же как и может быть прописан для большинства HTML-тегов и задаёт свойства элемента. Обозначается он в открывающем теге и выглядит примерно так: атрибут=«...», где вместо точек находится значение атрибута. Знание тегов является первым и самым важным шагом для освоения HTML. Основы этого искусства также подразумевают понимание структуры веб-страницы.

Структура документа

Каждый документ HTML имеет соответствующее расширение, например, Index.html. Так браузер сможет понять, с чем он имеет дело, и правильно отобразит страницу. Все файлы, используемые для создания сайта, желательно хранить в одной директории, что в дальнейшем существенно облегчит вам жизнь. Основы языка разметки гипертекста HTML предполагают чёткое понимание структуры документа. Начинается он с тега , сообщающего браузеру версию HTML, которая используется в этом документе. На данный момент актуальна пятая версия языка, так что тут не нужно ничего выдумывать, можно смело вставлять приведённый выше тег в начало любой страницы.

Потом идут основные парные структуры, составляющие «скелет» сайта. Первый тег, в который вложены все остальные — .... Всё, что находится за его пределами, не распознаётся браузером как веб-страница, так что он открывает документ и закрывает его. Этот тег является обязательным для любого документа. В нём также содержатся ещё несколько обязательных тегов, которые будут рассмотрены ниже.

Head

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

Link

Знание основ HTML также предполагает использование каскадных стилей оформления, или css. В них задаются свойства элементов, которые будут отображены на странице. Современный подход к этой задаче предполагает вынесение таких характеристик, как цвет, высота и местоположение элемента, во внешний файл для большего удобства. Для подключения css-файла используется тег . В готовом виде это выглядит примерно вот так: , где href указывает на местоположение файла, а type - на его тип.

Body

Именно в этой части HTML-документа создаётся видимая часть страницы. Всё, что делается внутри «тела», будет показано браузером. В используется огромное количество тегов HTML. Основы — это форматирование текста, работа со ссылками и простейшие инструменты для структурирования веб-страницы. Чтобы приступить к работе в HTML, достаточно знать основные теги и уметь ими пользоваться. Ниже приведены самые популярные из них: