Файл: Основы программирования на языке HTML (Синтаксис и теги HTML).pdf

HTML (от англ. Hyper Text Markup Language — «язык гипертекстовой разметки») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML. Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.

Язык HTML является приложением SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879.

Язык XHTML является более строгим вариантом HTML, он следует всем ограничениям XML и, фактически, XHTML можно воспринимать как приложение языка XML к области разметки гипертекста.

Во всемирной паутине HTML-страницы, как правило, передаются браузерам от сервера по протоколам HTTP или HTTPS, в виде простого текста или с использованием шифрования.

2. Ступени развития HTML

HTML 2.0 - Стандарт был утвержден в ноябре 1944 г. организацией IETF (Internet Engineering Task Force ). В нем были расширены возможности предыдущей версии языка и он получил широкое распространение как у профессионалов, так и любителей.

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

HTML 3.2 (кодовое наименование проекта: “Wilbur”) – Был опубликован и начал широко использоваться с мая 1996 г., получил официальное утвержден в 1997 г. Получил популярность из-за совместимости с HTML 2.0.

HTML 4.0 (кодовое наименование проекта: “Cougar ”) – последняя версия языка. В нем реализованы многие распространенные концепции Web -дизайна и приняты некоторые средства HTML 3.2. Самым значительным отличием HTML 4.0 от предыдущих версий является кодировка Unicode , тег “ Object”, позволяющий работать с мультимедиа ( в т.ч. с видеоклипами и звуком) и др.

HTML5 вводит несколько новых элементов и атрибутов, которые отражают типичное использование разметки на современных веб-сайтах. Некоторые из них — семантические замены для использования универсальных блочных (<div>) и строчных (<span>) элементов, например, <nav> (блок навигации по сайту), <footer>(обычно относится к нижней части страницы или последней строке HTML кода) или <audio> и <video> вместо <object>

3. Представление о языке гипертекстовой разметки HTML

Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими браузерами Web, как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, который предоставляется Opera, Google Chrome, Mozilla Firefox, Internet Explorer или другими браузерами.

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

HTML был ратифицирован World Wide Web Consortium. Он поддерживается всеми браузерами.

Поскольку HTML-документы записываются в ASCI I-формате, то для ее создания может использован любой текстовый редактор.

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

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

Знание HTML необходимо по пяти причинам.

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

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

В-третьих, HTML непрерывно развивается, поэтому программы типа MS FrontPage все время отстают от новейших возможностей языка.

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

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

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

1) на данном сайте, то есть в папке, содержащей все htm-файлы, графику, звук, анимацию, видеофильмы, программы;

2) вне сайта в других в папках на данном компьютере;

3) в системе World Wide Web, то есть на других Web-серверах;

4) в Internet на серверах других типов(FTP, Gopher).

Применение механизма гипертекстовых ссылок создает всемирное единое информационное пространство, из которого сотрудники торговой фирмы получают нужные им сведения. Стандарт HTML, как и все другие стандарты, имеющие отношение к Web, разрабатывается под эгидой консорциума World Wide Web Consortium (W3C). Спецификации стандартов и проекты новых предложений можно найти по адресу http://www.w3.org. Самая последняя разработка рабочей группы по HTML в W3C - рабочий проект HTML 4.0. Кроме HTML, Web-мастера используют и другие языки, например, Java (Ява), Perl, Си.

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

4. Синтаксис и теги HTML

Общий синтаксис написания тегов следующий

<имя_тега атрибут1="значение" арибут2="значение">

<имя_тега атрибут1="значение" арибут2="значение">…</имя_тега>

Таким образом, теги бывают двух видов:

•одиночные (одиночный тег используется самостоятельно)

•парные (парный тег может включать внутри себя другие теги или текст)

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

Все теги начинаются символом '<' и заканчиваются символом '>'. Обычно имеется пара тегов - стартовый (открывающий) и завершающий (закрывающий) тег (похоже на открывающиеся и закрывающиеся скобки в математике), между которыми помещается размечаемая информация:

Ниже представлен код Web-страницы который выполнен на языке HTML и на этом примере разберем его структуру

<! DOCTYPE HTML "-//W3C//DTD HTML4.01 Transitional//en">
<html>
<head>
<titlе>Структура web документа</title>
<meta html-equiv="Content-Type"Content="text/html;charset=windows-1251">
<meta name="Keywords" content="soft">
<meta name="discription" content="soft">
</head>
<body bgcolor = #FFFFFF>
<a name ="list"></a>

Переход в <a href="#list1">Конец документа</a> <p>

Переход к <a href="#list2"><b>первая ссылка <b></a></p>

<НR>

<Н1>Заголовок 1</h1>

<Н2>Заголовок 2</h2>

<НЗ>Заголовок 3</h3>

<Н4>Заголовок 4</h4>

<Н5>Заголовок 5</h5>

<Н6>Заголовок 6</h6>

<НR>

Здесь расположена <b>первая ссылка </b><а name =" list2"></a>

<НR>

<р>Здесь должен располагаться<br> основной текст web страницы. <br>

<НR>

<а name="list1"</a><p>

Переход в <а href ="#list">Начало документа</a>

</body>

</html>

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

<HTМL> </html>

Обозначение документа на языке HTML. Одно из принципов языка является многоуровневое вложение элементов. Данный элемент является самым внешним, так как между его начальным и конечным тегам должна находиться вся Web-страница. По идеи, этот элемент можно рассматривать как формальность. Он имеет атрибуты version, lang и dir, которыми в данном случае редко кто пользуется, и допускает вложение элементов HEAD, BODY FRAMESET и других, определяющих общую структуру Web-страницы. Естественно, что конечным тегом </html> заканчиваются все подобные документы.

<HEАD> </head>

Область заголовка Web-страницы. Другими словами, ее первая часть. Так же, как и предыдущий элемент, HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты lang и dir.

<TITLЕ> </title>

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

<МЕТА>

Этот элемент содержит служебную информацию, которая не отражается при просмотре Web-страницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый элемент МЕТА содержит два основных атрибута, первый из которых определяет тип данных, а второй — содержание.

<BОDY><body>

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

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

background="путь к файлу фона"

Более простое оформление фона сводится к заданию его цвета:

bgcolor="#FFFFFF"

Цвет фона задается тремя двухразрядными шестнадцатеричными числами, которые определяют интенсивность красного, зеленого и синего цветов (rbg).

Так как можно изменить фон страницы можно и изменить цвет текста. Для этого имеется следующий атрибут

text=" #RRGGBB"

Для задания цвета текста гиперссылок используется следующий атрибут:

link="#RRGGBB"

Можно также указать изменение цвета для последней выбранной пользователем гиперссылки:

Tiling "#RRGGBB"

5. Заголовки HTML

<Н1></H1>

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

<Н1>Заголовок</H1>

<Н2>Заголовок</H2>

<Н3>Заголовок</H3>

<Н4>Заголовок</H4>

<Н5>Заголовок</H5>

<Н6>Заголовок</H6>

Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок. Для заголовков можно использовать атрибут, задающий выравнивание влево, по центру или вправо:

align="left" align="center" align="right"

Для создания нового абзаца используется тэг <P>, а для перехода на новую строчку без создания абзаца - тэг <BR> т.е происходит перенос. Эти тэги закрывать не обязательно. Конечно, если не использовать в тэге <P> элемент ALIGN, которым может задаваться выравнивание абзаца:

<Р ALIGN=LEFT>По левому краю</P>

<Р ALIGN=CENTER>По центру</P>

<Р ALIGN=RIGHT>По правому краю</P>

<Р ALIGN=JUSTIFY>Текст, находящийся между этими элементами выравнивается по ширине</P>

<НR>

Горизонтальная линия (horizontal rule) - очень распространенный элемент. Во-первых, потому что с его помощью очень легко и удобно делить страницу на части. Во-вторых, потому что выбор подобных элементов оформления у автора страницы очень небольшой. Элемент не имеет конечного тега, но имеет ряд атрибутов для выравнивания влево, по центру, вправо, по ширине:

align="left" align="center" align="right" align="justify"

<А> </а>

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

<а name="метка">Произвольный текст</a>