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

Ячейки таблицы могут содержать текст, изображения, вложенные таблицы и т.д. Не следует оставлять ячейки таблицы незаполненными; если какая-то ячейка должна выглядеть пустой, поместите в нее неразрывный пробел.

Помещаемый в ячейки таблицы текст по умолчанию автоматически размещается браузером; текст выводится слово за словом; при достижении правой границы ячейки очередное слово переносится на новую строку.

Ячейки таблицы могут охватывать несколько строк или столбцов;при описании таких ячеек используется атрибуты ROWSPAN (ячейка, тег которой содержит данный атрибут, "растягивается" на указанное количество строк) и COLSPAN (ячейка "растягивается" на несколько столбцов). Приведем пример организации таблицы с объединенными ячейками:

< TR >

< TD ROWSPAN=2> 1-1 TD >

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

Атрибуты тегазадают параметры таблицы в целом:

Атрибуты тегазадают параметры данного ряда (при возникновении противоречий атрибуты, заданные в теге, отменяются). Выравнивание содержимого ячеек;возможны значенияleft, right и center

BACKGROUND = url

Фоновое изображение для ячеек данного ряда таблицы

BGCOLOR = цвет

Фоновый цвет для ячеек данного ряда

BORDER = значение

Толщина рамки, обрамляющей ячейки данного ряда;BORDER=0 обозначает невидимую рамку

VALIGN = значение

Вертикальное выравнивание содержимого ячеек;возможны значения top, center и bottom

Атрибуты тега задают параметры данной ячейки(при возникновении противоречий атрибуты, заданные в тегах и, отменяются).

При работе с таблицами учтите, что указанное значение атрибута WIDTHво многих случаях лишь "принимается к сведению" браузером. Заданные пропорции в точности выдерживаются редко, браузер старается отобразить таблицу как можно лучше (в его понимании).

Бегущая строка

Использование бегущей строки на веб-странице делает ее более динамичной, позволяет создать эффект движения объекта. Создается бегущая строка с помощью тега < MARQUEE > … MARQUEE >.

Между < MARQUEE > и MARQUEE > могут располагаться текстовые фрагменты и рисунки. Текст может быть отформатирован с помощью соответствующих тегов, а рисунок вставляется с использованием .

Горизонтальная линия

Горизонтальная линия задается тэгом R > и не требует закрывающего тэга. По умолчанию линия проводится по всей ширине страницы и выглядит примерно так:

Определяет длину линии в пикселях или процентах от ширины окна браузера

SIZE = значение

Определяет толщину линии в пикселях

ALIGN = значение

Определяет выравнивание горизонтальной линии. Параметр может принимать следующие значения:

left - по левому краю,

right - по правому краю,

center - по центру (используется по умолчанию)

NOSHADE

Определяет способ закраски линии как сплошной. Параметр является флагом и не требует указания значения. Без данного параметра линия отображается объемной

COLOR = цвет

Определяет цвет линии (действует только в Internet Explorer )

HTML (Hyper Text Markup Language) — это язык текстовой разметки. Текстовый документ, который был составлен с его помощью, содержит не только сам текст, но и специальные символы – дескрипторы или как ещё их называют «теги», которые несут информацию об различных участках текста – размер шрифта, выделения, цвет и т.д.

Данный язык разработал Тим Бернерс-Ли в конце 80-х. Идея его разработки заключалась в том, чтобы люди, не имеющие знаний программирования и вёрстки, могли обмениваться технической информацией, текстами, таблицами, которые бы без искажений отображались на устройствах имеющих различные технические характеристику и оснащённость.

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

Поначалу существовало масса неофициальных стандартов HTML. Но с лавинообразным расширением интернета, разработчики программного обеспечения были вынуждены прибегать к общепринятым средствам передачи информации. Постепенно язык HTML обзаводился новыми возможностями – создание и отображение таблиц, математических формул. Добавлялись нестандартные элементы. С появлением HTML 4.0 некоторые элементы получили определение как устаревшие и не рекомендованные. В 1997 году HTML 4 стал стандартизированным.

Сейчас в стадии разработки находится HTML 5. Желание разработчиков сгруппировать единый язык разметки синтаксически корректный для структурирования и отображения содержимого Интернета. Он расширяет и улучшает разметку для документов и сложных веб-приложений. В HTML 5 множество особенностей и новшеств, которые служат для облегчённого ввода и управления мультимедийными объектами. Для просмотра видеороликов на , теперь нет надобности в применении Flash плеера.

Почти все веб-сайты в Интернете созданы с помощью языка разметки HTML. Но в разных браузерах одна и та же веб-страница может выглядеть по-разному. Спецификация HTML 5 определяет чёткие требования к браузерам и документам. Применяемые браузерами алгоритмы для исправления ошибок способствуют построению правильной объектной модели.

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

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

Что такое HTML и для чего он предназначен - 3.7 out of 5 based on 3 votes

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

HTML расшифровывается как, Hyper Text Markup Language, что можно перевести как язык гипертекстовой разметки. При помощи данного языка создаются интернет страницы.

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

И так каким же образом при помощи языка HTML мы можем редактировать текст? Дело в том, что язык ХТМЛ состоит из тэгов (tags). Каждый тэг определяет, каким образом будет выглядеть текст на вашей страничке.

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

Поэтому сам код вы не видите, браузер на экран вашего монитора выводит уже готовый отформатированный текст и графику. Если же вы хотите увидеть сам html код и теги, с помощью которых происходит форматирование текста, который Вы сейчас читаете, то пройдите в вашем браузере Internet Explorer в пункт меню > вид и из раскрывающегося списка выберите пункт > источник. Смотрите на рисунок.

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

Но на самом деле ХТМЛ теги могут не только форматировать текст, с помощью них вы можете вставлять изображение на страницу, создавать таблицы, создавать ссылки и многое другое.

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

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

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

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

Тэгов естественно много и каждый из них выполняет свои определенные функции. Примерно по такому принципу работают и все остальные теги и весь ХТМЛ в целом. Когда вы запрашиваете какой – либо документ из интернета ваш браузер загружает html код интерпретирует его должным образом и выводит вам на экран уже готовый отформатированный текст, графику, таблицы и т. д.

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

Для создания ХТМЛ страниц можно использовать специальные программы, такие как , а можно создавать страницы при помощи простого текстового редактора, который имеется в любой версии Windows.

Начнём с того, что HyperText Markup Language (HTML) - язык определения (разметки) гипертекста.

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

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

и

Заголовок

Текст между тэгами и становится гиперссылкой на ресурс, указанный в атрибуте href тэга :

<имя_элемента имя_атрибута1="значение_атрибута1" имя_атрибута2="значение_атрибута2"...> Текст

Варианты определения элемента:

Элемент без атрибутов и содержимого, оформленный как самозакрывающийся тег:

Элемент, вложенный в другой элемент:

Поиск

Совокупность таких обозначений и правил их использования и образует язык разметки гипертекста HTML. Этот язык в его первоначальном варианте был предложен в 1989 году английским физиком Тимом Бернерс-Ли. В 1994 году Бернерс-Ли основал консорциум WWW - с основной целью определить стандарты для HTML и позднее для XHTML. Его члены ответственны за создание чернового варианта стандарта, организацию его обсуждения и за внесение изменений в первоначальный вариант, учитывая замечания и предложения, поступившие от интернет-сообщества, чтобы удовлетворить пожелания большинства. В настоящее время помимо HTML и XHTML в сферу ответственности консорциума WWW (W3C) входит стандартизация любых технологий, относящихся к сети (веб-технологий). Он занимается HTTP, каскадными таблицами стилей и расширяемым языком разметки (Extensible Markup Language, XML) так же, как и связанными с ними стандартами адресации в сети. Кроме того, W3C рассматривает проекты стандартов для расширений существующих веб-технологий.

В 1990-е годы консорциумом был выпущен ряд рекомендаций, касающихся HTML. Термин "рекомендация" отличается от термина "стандарт" (стандартами занимаются государственные и международные организации по стандартизации), однако в веб-индустрии рекомендации W3C, как правило, считаются фактическими стандартами, и о них говорят как о стандартах. Выпуская рекомендацию, W3C гарантирует, что её содержимое было представлено на рассмотрение общественности и членов рабочей группы, тщательно протестировано и ратифицировано на финальной стадии.

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

В принципе, если в html-файле (файле с расширением html или htm) написать произвольный текст безо всякой структуры, то браузер, вероятно, нормально его отобразит (браузеры "стараются" даже неправильные html-документы отобразить по возможности верно).

Упражнение. Проверьте это.

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

На первом месте HTML-документа, согласно стандарту (здесь и далее под стандартом подразумевается стандарт HTML 4.01), находится определение типа документа (ОТД).

HTML 4.01 специфицирует три ОТД: строгое, переходное и ОТД для набора фреймов.

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

§ документ может быть написан в строгом соответствии с рекомендациями стандарта (которые предписывают отказываться от ряда элементов и атрибутов, унаследованных от предыдущих версий HTML и пользоваться вместо этого новыми, оптимизированными средствами);

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

Вставляя ОТД в HTML-документ, следует ввести в его начало следующий текст:

Строгое ОТД:

Переходное ОТД:

ОТД для набора фреймов:

На практике наиболее широко используется переходное ОТД: фреймами веб-разработчики пользуются всё реже, а следовать строгому ОТД труднее, чем переходному (без каких-либо преимуществ взамен).

Если вообще опустить ОТД, то браузер сам сделает предположение о том, согласно каким правилам отображать документ.

Непосредственно за ОТД должен следовать единственный в документе элемент наивысшего (корневого) уровня - элемент html (директива!DOCTYPE элементом не считается):

Раздел head ("шапка")

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

Пример минимального раздела head:

Элемент title - единственный обязательный элемент раздела head.

Метаданные могут включать в себя информацию об авторах, ключевых словах документа и т.п., например:

Эти данные не видит пользователь, просматривающий страницу, но могут анализировать поисковые роботы.

О стилях и скриптах речь пойдёт подробно в последующих лекциях.

Раздел body ("тело документа")

Здесь размещается основное содержимое документа. Выглядит это, например, так:

Hello, World!

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

Пример пустого, но корректного документа HTML 4.01 Transitional:

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

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

Особенность описания документа средствами языка HTML связана с принципиальной невозможностью достижения абсолютной точности воспроизведения исходного документа. Предполагается, что документ будет широко доступен в Интернете, и поэтому неизвестно, как будет организовано его воспроизведение. Документ может быть представлен на графическом экране, выведен в чисто текстовом виде или просто «прочитан» программой синтеза речи. Разметка HTML во всех этих случаях должна быть принята во внимание. Поэтому ! язык HTML предназначен не для форматирования документа, а для его функциональной разметки . Под разметкой понимается использование специальных кодов, легко отделяемых от смыслового содержания документа и используемых для реализации гипертекста. Применение этих кодов подчиняется строгим правилам, определяемым спецификацией языка HTML.Например, документы обычно начинаются с заголовков. Свойство части документа «быть заголовком» - это не особенность форматирования документа, а характеристика его содержания. Конкретное средство отображения документа (браузер) выбирает свой способ пред­ставления части документа, описанной как заголовок.

Теги HTML

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

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

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

Тэги можно разделить на две большие группы.

Тэги одной группы, называемые контейнерами , воздействуют на часть документа, заключенную между ними. Они имеют два компонента: открывающий (начальный) и закрывающий (конечный). Закрывающий тэг имеет то же название, что и открывающий, но перед его названием ставится косая черта (символ / (слэш)). Между открывающим и закрывающим тэгами могут располагаться текст или другие тэги.

Автономные (одиночные) тэги не имеют конечного компонента. Они вызывают однократное действие или при их интерпретации в отображаемый документ вставляется тот или иной объект. Например, тэг вызывает вставку рисунка из файла pict.gif.

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

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

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

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

Теги связываются с определенным фрагментом документа и указывают способ внешнего представления содержания этих фрагментов и их интерпретации Web-клиентом.

С функциональной точки зрения теги HTML можно распределить по следующим категориям:

Теги описания структуры документа и информации о нем, например, аннотации, списка ключевых слов и т.п.;

Теги, использующиеся для логической структуризации текста документа, например, для выделения заголовков, разбиения на абзацы, выделения цитат, создания списков, таблиц и т.п.;

Теги форматирования текста, описывающие параметры шрифтов, цвета и т.п.;

Теги организации гиперссылок;

Теги, устанавливающие связи HTML-файла с внешними объектами, например, графическими, звуковыми файлами и т.п.;

Теги создания форм, обеспечивающие возможность пользователю вводить информацию и передавать ее Web-серверу;

Базовый вариант языка HTML обладает рядом недостатков:

Отсутствие средств, позволяющих динамически управлять внешним видом документа;

Отсутствие средств, позволяющих легко менять внешнее оформление Web-документов без переделки самого документа, например, таблиц стилей;

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

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

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

Эффект применения тега может видоизменяться путем добавления атрибутов. В парных тегах атрибуты добавляются только к открывающему тегу.

! Атрибуты представляют собой дополнительные ключевые слова, отделяемые от ключевого слова, определяющего тег, и от других атрибутов пробелами и размещаемые до завершающего тег символа «>». Способ применения некоторых атрибутов требует указания значения атрибута. Значение атрибута отделяется от ключевого слова атрибута символом «=» (знак равенства) и заключается в кавычки.

Атрибуты элемента определяют его свойства.

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

– задает светло-синий фон для документа,

текст – парный тэг, дает указание Браузеру вывести заключенный в "контейнер" текст символами, увеличенными относительно базового размера (SIZE="+2") и красного цвета (COLOR="RED").

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

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