Язык разметки HTML: идея, кроссплатформенность



Язык разметки HTML: идея, кроссплатформенность.

Определение языка HTML (Hyper Text Markup Language): базовый язык для документов сети Internet, кроме того, это – универсальный формат для передачи данных в интегрированных системах.

Цели, поставленные перед разработчиками языка, были следующие.

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

2)правила формирования такого гипертекста должны быть ориентированы на человека, а не на какое-то программное средство, т.к. во-первых, нельзя связываться ни с какой фирмой-производителем программного обеспечения, а во-вторых,HTML – должен  быть живым развивающимся языком, чтобы отвечать на изменяющиеся потребности пользователей сетиInternet.

Конечно, вторая цель не достижима абсолютно, т.к. читаетhtml – текст не человек, а программа – браузер. Очевидно, что и процесс составления гипертекста тоже автоматизируют те или иные программы, например,Homesite.  Но т.к. стандартHTML часто изменяется, вспомогательные программы не всегда успевают за ним.

Internet охватывает все большее число сторон нашей жизни. Умение прочесть, составить или слегка изменить существующийweb - документ с каждым днем становится все более необходимым. Кроме того, для организацийweb-представительство в наши дни – необходимое средство коммуникации с партнерами, клиентами, потенциальными покупателями товаров и услуг. Грамотно составленноеweb-представительство может выступать в роли мощной рекламы. Таким образом, специалист в области, далекой от информационных технологий, должен достаточно ясно представлять, чего можно ожидать отweb-сайта, какие требования предъявлять разработчику. А специалист по информационным системам должен уметь составлять такие сайты, используя новейшиеweb-технологии.

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

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

HTML можно перевести так: язык разметки с возможностью создания гипертекста.Заметим, что базовыйHTML – статичный текст. Чтобы внести на страницу динамические элементы (например, выпадающие меню), требуется написать программу на скрипт языке, например,JavaScript, или использоватьJava-апплеты, вставленные вhtml-код страницы. Можно также использовать программный код, написанный разработчиками некоторой технологии, и поставляемый в виде библиотек.

В настоящее время часто вместоhtml-кода браузеру передаетсяxml-код. Мы немного познакомимся и с ним.

Красота, да и удобочитаемость сайта зависят от разметки и оформления. Последнее на современных сайтах достигается путем использования каскадных листов стилей –CSS.

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

Язык разметки HTML, синтаксис

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

Пусть есть текст:

«Мама мыла раму, а котик играл с клубком. Мальчик забрал у котика клубок».

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

«Мама мыла раму <дальше показ курсивом>, а котик играл с клубком. </закончить показ курсивом> Мальчик забрал у котика клубок.»

В языкеHTML указания  называются тегами. Браузер выполняет указания-теги, то есть, не показывая их, производит изменения текста. Поэтому на экране мы увидим следующее:

«Мама мыла раму, а котик играл с клубком. Мальчик забрал у котика клубок».

Тег – команда в угловых скобках. Имя тега – первое, что пишется после открывающей угловой скобки, без пробелов перед ним! Существуют теги одиночные и теги контейнеры. Одиночные теги – некоторая команда браузеру, выполняемая в том месте, где указана, например, команда «нарисовать линию»:

<HR>

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

<P> Мама мыла раму.</P>.

У тега могут быть атрибуты. Атрибут дополняет и поясняет тег. Порядок  атрибутов не важен. Например, у тегаHR есть атрибутWIDTH, обозначающий ширину линии,SIZE – толщину линии,ALIGN – расположение (выравнивание) иCOLOR – цвет. Значения атрибутов конкретизируют заданную характеристику. Синтаксическое правило звучит следующим образом: после имени тега может следовать, по крайней мере, один пробел, затем, через пробелы, могут следовать тройки:атрибут, символ «=», значение.Значение рекомендуется заключать в кавычки, хотя стандартHTML позволяет значения, состоящие только из латинских букв и цифр, не заключать в кавычки.

<HR WIDTH=200 COLOR=RED SIZE=3 ALIGN=CENTER>

Изображение на экране будет примерно следующим.

_____________________________________

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

<P>Мама мыла раму.

<P>Дочка играла с мячиком.

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

<FRAME SRC=”FR.HTM” NORESIZE>

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

Пример ошибочной записи:

<DIV>пример блока

<P>с вложенным абзацем

</DIV>

</P>

Пример правильной записи:

<DIV> пример блока

<P> с вложенным абзацем

</P>

</DIV>

Кроме тегов и простого текста вHTML-коде могут встретиться так называемые символьные объекты илиEscape последовательности: именованные и нумерованные сущности. Они нужны для представления в документе символов, запрещенных синтаксически или физически, а также символов, которые невозможно ввести с клавиатуры. Например,

Символ на экране браузера

Запись в тексте наHTML

<

&lt;

"

&quote;

&copy;

!

&#33;

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

Очень важное замечание! Цель браузера – показать клиенту вашу страницу. Обычная реакция браузера на ошибку – попытка исправить ошибку, а если не удалось, то пропустить не понятные для него слова или теги. Это и хорошо и плохо. Так как, с одной стороны, в результате браузер постарается показать пользователю максимум текста, но, с другой стороны, в этот текст может попасть часть с тегами и скриптами или не попасть собственно текст, если его браузер воспримет, например, как комментарий. Разработчику сайта такое поведение браузера очень мешает. Будьте готовы к тому, что сначала браузер будет старательно исправлять ваши ошибки, но через некоторое время он запутается, и у вас перестанут работать ранее работавшие фрагменты. Поэтому совет: не делайте ошибок, а лучше используйте современные редакторы, осведомленные оhtml-правилах, и указывающие вам на ошибки.

Базовая структура html-документа. Местоположение документа.

Каждыйhtml-документ должен иметь некоторые заголовочные теги в начале и завершающие теги в конце, хотя значения атрибутов тегов могут быть разными.

В самое начало документа ставится тег <HTML>, соответственно, в конец документа – закрывающий тег </HTML>. Заголовок HTML-файла находится в обязательной секции <HEAD>, которая должна находиться в самом начале, то есть сразу после тега <HTML>. Вслед за контейнеромHEAD следует собственно тело документа – контейнерBODY.

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

Еще один тег, включаемый в контейнер HEAD, - тег <BASE параметры>. Это - тег для указания URL документа. Он сообщает браузеру базовый адрес страницы, после чего все адреса внутри страницы могут быть заданы как относительные, так как базовый становится текущим. Тег имеет такие параметры: HREF - указывает базовый URL для документа (URL должен быть указан в полной форме) и TARGET - указывает окно для отображения документов, на которые ссылается данный документ.

<STYLE>  тег, в который вы будете вкладывать описания листов стилей.

<META атрибуты> - тег, который используется для включения в документ некой специфичной информации для поисковых программ, каталогизаторов и т. д. Кроме того, у него есть несколько полезных атрибутов, позволяющих страницам автоматически обновляться  и сменять друг друга через определенные промежутки времени. Атрибут  HTTP-EQUIV="refresh'' - указывает браузеру, что нужно перепрыгнуть на страничку, указанную в атрибуте CONTENT через указанный там же промежуток времени. Таким образом несложно задать переадресацию или периодические обновления. CONTENT="number; url=URL'', здесьnumber - задает временной интервал, аurl – адрес перехода. NAME="description'' или NAME="keywords'' - указывает серверу, как интерпретировать параметр CONTENT - как описание документа или как список ключевых слов. Значение атрибута CONTENT «text» или список значений. У атрибута CONTENT два смысла: один для команды HTTP-EQUIV="refresh'', другой для команды NAME. В последнем случае значение атрибута определяет либо описание документа, если атрибут NAME имеет значение "description'', либо список разделенных запятыми ключевых слов, если атрибут NAME равен"keywords''.

Минимальная структураhtml-документа следующая.

<HTML>

<HEAD>

<TITLE>мойсайт</TITLE>

</HEAD>

<BODY>

моя первая страничка

</BODY>

</HTML>

Сайт – это много файлов. некоторые из них содержатhtml-код. Некоторые – описание стилей, некоторые – скрипт-программы. Еще могут быть файлы с изображениями, звуковые файлы и другие. Для хранения всех этих файлов рекомендуется создать каталог. В каталоге могут быть подкаталоги для хранения однотипной информации.

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

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

Наконец, если вы работаете в локальной или в глобальной сети, вам необходимо расположить ваши файлы в том месте, которое определит для вас администраторweb-хостинга. При выполнении лабораторных работ в институте, вы можете поместить папку с вашим сайтом по адресу «z:/webworks». Чтобы перейти на сайт, необходимо открыть браузер и либо воспользоваться информацией на специально подготовленной для васhome-страничке, либо перейти по адресу«http:10.33.32.2\\webworks».

Итак, создайтеhtml-текст минимальной требуемой структуры в специализированном для создания сайтов или в произвольном текстовом редакторе, например, в «Блокноте» (Notepad и т.п.). Сохраните файл с именем «index.htm» в подготовленной папке. Заметим, что расширение должно бытьhtm илиhtml. Имя может быть произвольным, но по сложившемуся в мире стандарту, главная страница сайта должна иметь имяindex. Откройте ваш сайт.

Особенности браузеров. Необходимость создания кроссбраузерного web-сайта.

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

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

Теги html, head, title, body, p, ol, ul, li, table, img.

Тегиhtml,head иtitle мы уже рассмотрели раньше. Здесь заметим то, что у этих тегов есть еще атрибуты  и вложенные теги. Так у тегаhtml есть атрибутlang, значение которого сообщает браузеру, на каком языке написана страница, например, «ru».

У тегаhead может быть вложенный тегbasefont. Атрибуты этого тега определяют умалчиваемый шрифт страницы:size – размер шрифта,face – название шрифта,color – цвет шрифта.

В базовой структуре документа указан тегbody. Внутрь этого контейнерного тега помещается все теги страницы.

Сначала рассмотрим тегp, обозначающий абзац.Браузер перед текстом и после текста, помещенного в абзац, делает широкий междустрочный промежуток. Текст абзаца не пишется с красной строки, но вы сможете это сделать позже, когда научитесь работать со стилями.Атрибутalign позволяет  выровнять текст абзаца по левому краю экрана (значениеleft), по правому (right), или по центру (center). По умолчанию – значениеleft.

<palign=”right”>Поле большое, зеленый лесок.</p>

<palign=”right”>Сколько весною путей и дорог!</p>

<palign=”center”>Хорошо на свете! Солнышко, свети</p>

<palign=”center”>Пожелай нам, ветер, доброго пути!</p>

<p>Доброго, доброго, доброго пути.</p>

<p>Самого-самого доброго пути.</p>

Этот текст в браузере будет выглядеть так:

Поле большое, зеленый лесок.

Сколько весною путей и дорог!

Хорошо на свете! Солнышко, свети!

Пожелай нам, ветер, доброго пути!

Доброго, доброго, доброго пути.

Самого-самого доброго пути.

Вернемся к тегуbody. У него может быть достаточно много атрибутов.Атрибутомtitle вы можете задать текст всплывающей подсказки, появляющийся при остановке мыши на экране. Атрибутtitle разрешается писать в любом теге, не только вbody.Если он написан и вbody и в каком-нибудь тегеp, расположенном внутриbody, то при наведении мыши на абзац будет показана всплывающая подсказка, указанная в тегеp, а в любом другом месте – указанная в тегеbody.

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

Атрибутbgcolor тегаbody определяет цвет фона страницы. Цвет задается тремя однозначными или двузначными шестнадцатеричными числами. Первое число задает интенсивность  красного цвета, второе – интенсивность зеленого, третье – интенсивность синего цвета. Вы уже знаете об этом методе задания цвета:RGB. Для некоторых цветов придуманы названия, хотя рекомендуется применять числовое значение для единообразия.

Атрибутtext задает цвет текста.

Можно задать умалчиваемые отступы текста страницы от границ экрана:leftmargin (слева),rightmargin (справа),topmargin (сверху) иbottommargin (снизу). Заметим, что отступ сверху почему-то виден только на первом экране сайта, а снизу – на последнем.

Полезное свойствоbackground, при помощи которого можно положить на фон картинку. Не стоит брать для этого красивый вид, для фона хорошо подходят так называемые текстуры: небольшие файлы с неярким часто в стиле графики рисунком. Дело в том, что на фоне из текстур хорошо читается основное содержимое сайта. Кроме того, браузер использует картинку как обои, т.е. дублирует её по горизонтали и по вертикали. Для обычной картинки получаемый эффект не красив.

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

На странице часто может потребоваться список. Вhtml предусмотрено два вида списков: нумерованный – тегol и маркированный – тегul. Это контейнерные теги. Пункты списков обоих видов оформляются при помощи тегаli. Можно построить и вложенный список, если внутри одного контейнераol илиul использовать другой контейнер.

<ul> Экзамены

  <ul TYPE=disc>1 курс

<li> 1 семестр

      <ol>

          <li>история</li>

          <li>физика</li>

          <li>математика</li>

      </ol>

     </li>

     <li> 2 семестр

        <ol>

          <li>физика</li>

          <li>информатика</li>

          <li>технология программирования</li>

        </ol>

</li>

  </ul>

  <ul TYPE=disc> 2 курс

    <li> 3 семестр

      <ol>

          <li>архитектура ЭВМ</li>

          <li>метрология</li>

          <li>химия</li>

      </ol>

     </li>

     <li> 4 семестр

        <ol>

          <li>операционные системы</li>

          <li>инфокоммуникационные системы и сети</li>

        </ol>

     </li>

  </ul>

</ul>

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

Таблицы вhtml – это, прежде всего, тэг-контейнерtable, внутри которого располагаются теги-контейнеры строкиtr. Наконец, в строке может быть некоторое количество тегов ячеекtd илиth.

Таблица вhtml – это набор ячеек, возможно с внешней границей, распределенный по строкам. Такое понимание несколько отличается от уже привычного для нас представления (в текстовых редакторах).В отличие от таблицы вMSWord вhtml мы не объединяем ячейки, а растягиваем их на два или более столбца и на две или более строчки при помощи атрибутов colspan и rowspan. Растянутая ячейка считается принадлежащей тому месту таблицы, где расположен её левый верхний угол. В результате получается, что в описании таблица в разных строках и столбцах описывается разное количество ячеек.

<tableborder="4">

<tr><tdcolspan=2>длинная</td><td>обычная</td><td>oбычная</td>

<tr><td>oбычная</td><tdcolspan=2rowspan=2>длинная и широкая</td><td>oбычная</td>

<tr><td>oбычная</td><td>oбычная</td>

<tr><td>oбычная</td><td>oбычная</td><td>oбычная</td><td>oбычная</td>

</table>

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

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

<tableborder="2"bordercolor="00ffff">

<tr>

   <td  bgcolor="00dddd">

      <ol>

<li>Всем-всем-всем</li>

          <li>архитектура ЭВМ</li>

          <li>метрология</li>

<li>химия</li>

      </ol>

   </td>

<td>

      <p>На нашем сайте вы можете найти всю нужную вам информацию о проведении экзаменационной сессии.</p>

      <p>Общие правила читайте на странице "Всем-всем-всем"</p>

   </td>

   <td>

      <fontsize=1>

      <p>В качестве формы отчетности по учебному плану в 4 семестре предусмотрен экзамен. </p>

      <p>К экзамену допускается студент, защитивший на минимально допустимый балл все пункты,  указанные в промежуточной отчетности.</p>

       <p>В случае пропуска занятий по уважительной причине разрешается сдача не защищенных вовремя заданий.</p>

       </font>

   </td>

 </tr>

</table>

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

Некоторые атрибуты: bgcolor - цвет фона, border – толщина границ, bordercolor – цвет границ,width – ширина,height – высота,background – фоновая картинка,valign – выравнивание текста в ячейках по вертикали. Атрибутalign делает таблицу обтекаемой. Есть еще несколько атрибутов, но здесь о них не будет сказано, изучите их самостоятельно по справочникам.

Изображение можно поместить на страницу, воспользовавшись тегомimg. У этого тега атрибутsrc определяет имя файла-картинки, атрибутalt задает текст, который покажет браузер в случае, если пользователь отключит показ изображений.

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




Похожие работы, которые могут быть Вам интерестны.

1. Изменение атрибутов html-объектов. Таймер

2. Разработка каталога продукции с применением технологий My SQL, HTML и PHP

3. Идея журналистского произведения

4. Идея и сущность пространственной фототриангуляци

5. Идея жилого блока -Total Furnishing Unit

6. БИЗНЕС-ИДЕЯ И БИЗНЕС-ПЛАН КАК ИНСТРУМЕНТЫ ПРЕДПРИНИМАТЕЛЬСКОЙ ДЕЯТЕЛЬНОСТИ

7. Язык как инструмент социальной власти

8. Язык Post Script и формат PDF

9. Язык, речь и речевая деятельность

10. Язык животные и людей: сравнительный анализ