Web–технологии, языки и средства создания Web–приложений

       <HR> — горизонтальная линия

       <BLOCKQUOTE>  </BLOCKQUOTE> — цитата. Выделение заданного текста как цитаты.

       <PRE> </PRE> — режим предпросмотра. При этом текст заключается в рамку и выводиться не форматированным (то есть все теги, кроме </PRE>, игнорируются, но при этом переводы строки ставятся там, где они присутсвуют в исходном документе).

       <DIV>  </DIV> — блок текста (как правило, применяется для использования каскадных стилей CSS)

       <SPAN>  </SPAN> — строка (как правило, применяется для использования каскадных стилей CSS)

       Теги  форматирования текста

       <EM> </EM> — выделение символа, на который падает ударение (обычно отображается курсивом)

       <STRONG> </STRONG> — выделение символа, на который падает усиленное ударение (обычно отображается жирным текстом)

       <I>  </I> — выделение текста курсивом

       <B>  </B> — выделение текста жирным шрифтом

       <U>  </U> — подчёркивание текста

       <S>  </S> — зачёркивание текста.

       <STRIKE>  </STRIKE> — то же самое, что <S> … </S>

       <BIG>  </BIG> — увеличение шрифта

       <SMALL>  </SMALL> — уменьшение шрифта

       <BLINK>  </BLINK> — мигающий текст.

       <MARQUEE>  </MARQUEE> — сдвигающийся по экрану текст.

       <SUB>   </SUB> — вывод текста под строкой. Например, H<SUB>2</SUB>O отобразиться в виде текста H2O.

       <SUP>  </SUP> — вывод текста над строкой. Например, E=mc<SUP>2</SUP> отобразиться в виде текста E=mc2.

       <FONT атрибуты>  </FONT> — задание атрибутов у используемого шрифта. Атрибуты могут быть следующими:

       COLOR=color — указание цвета. Цвет может быть указан шестнадцатеричным числом в формате #rrggbb (первые 2 шестнадцатеричные цифры указывают интесивность красного, следующие 2 — зелёного, последние 2 — синего) или названием самого цвета.

       FACE=указываем имя шрифта

       SIZE=позволяет именить размер шрифта. Размеры могут быть от 1 до 7, по умолчанию размер 3.

       SIZE=+размер или SIZE=–размер — размер больше или меньше стандартного. Например, SIZE=+2 указывает размер на 2 больше стандарта, то есть размер 5.

       Списки

       Данная  конструкция

       <UL>

          <LI> первый элемент списка </LI>

          <LI> второй элемент  списка </LI>

          <LI> третий элемент  списка </LI>

        </UL> 

       создаёт список вида: 

• первый  элемент
• второй элемент
• третий элемент

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

       Объекты

       EMBED — вставка объектов различных типов

       APPLET — вставка Java–апплетов

       SCRIPT — вставка различных скриптов, например JavaScript 

       Изображения

       IMG – тег для вставки изображения. Это не закрывающийся тег.

       SRC – имя локального файла или путь к нему в виде URL

       ALT – текст картинки (отобразится, в виде текста, если не удалось отобразить картинку)

       TITLE – подсказка (показывается при попадании курсора в область картинки)

       WIDTH, HEIGHT – размеры изображения (выводимое изображение будет масштабировано до указанных размеров)

       ALIGN – обтекание текста  

       Таблицы

       TABLE — тег создание таблицы. Тег имеет следующие параметры:

       BORDER — задает толщину границ у таблицы

       CELLSPACING — задает расстояние от ячейки до ячейки

       CAPTION — задает заголовок таблицы (необязательный тег)

       TR — добавление строки в таблицы

       TH — задает заголовок столбца (необязательный тег)

       TD — добавление ячейки таблицы

       WIDTH, HEIGHT – размеры таблицы  

       Формы

       Формы ввода данных могут быть самымы разнообразными. Поэтому рассмотрим только основные теги:

       FORM — тег для создания формы

       INPUT — добавление элемента ввода

       TEXTAREA — добавление текстового поля

       SELECT — добавление списка (как правило, это выпадающее меню)

       OPTION — пункт списка  

       Символы

       Некоторые символы не могут быть выведены напрямую. Для их вывода требуется использовать их определения, например, символ апмерсанд & в коде HTML будет иметь вид &amp, символ меньше < будет иметь вид &lt, символ больше > будет &gt. Это органиченение введено, так как эти символы уже используются в языке HTML как служебные.

       Любая HTML–страница должна иметь обозначение начала и конца документа обрамленные тегами <html> и </html> соответственно. Внутри них должны находиться теги заголовка <head> и </head>, и теги, обозначающие тело документа <body> и </body>. А внутри них могут быть произвольные комбинации из групп тегов опписанных ранее.

       Также рассмотрим Extensible Hypertext Markup Language(XHTML) это расширяемый язык разметки гипертекста. Стоит отметить, что язык XHTML это ни описание самого языка, а список отличий XHTML от HTML. Рассмотрим основные отличия HTML и XHTML. В XHTML все используемые теги должны иметь закрывающий тег. Теги, не имеющие закрывающего тега  должны оканчиваться символом / . Например тег <br>, должен иметь закрывающий его тег <br />. В XHTML допусткается писать теги и их аттрибуты только строчными буквами. В XHTML очень строгая проверка синтаксиса не допускается использовать < и &, даже в URL, вместо них должны быть &lt и &amp. Браузеры, обнаружив ошибку синтаксиса в XHTML, должны преркратить его обработку и вывести ошибку на экран. В стандарте HTML браузер должен попытаться отобразить запрашиваемый документ. Стоит отметить, что XHTML расширяемый язык – засчет указания типа документа и возможности использовать свои теги.

        

       Как мы видим, язык разметки HTML предоставляет широкие возможности для отображения информации, для этого в нем содержиться большое количество тегов для различного форматирования выводимой информации. Язык XHTML очень похож на HTML, но более строгий, грамматические правила в XHTML менее сложные, и как следствие при созданий Web–страниц будет меньше ошибок.  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

3. Dynamic HTML

     Dynamic HTML или DHTML — так принято называть связку языка HTML, каскадных таблиц стилей, скриптового языка и объектной модели документов. Скриптовым языком может выступать JavaScript или VisualBasic, но именно первый язык получил большую популярность и сегодня используется повсеместно. При помощи DHTML можно создавать интерактивные Web страницы, он позволяет легко и гибко обрабатывать данные запроса и формировать динамический ответ. DHTML может быть использован для реализации интерфейса Drag’n’Drop. На его основе создаются игры и другие интерактивные сервисы. Стоит отметить, что для реализации принципов DHTML достаточно лишь браузера, который будет обрабатывать содержимое страницы. То есть, нет необходимости, например, в обращениях к базе данных.

1. Каскадные таблицы стилей

       Рассмотрим  подробнее каскадные таблицы стилей – CSS (Cascading Style Sheets). Это стандарт позволяющий задавать описание внешнего вида некоторых элементов страницы на HTML. CSS используется при создании Web–страниц для определения шрифта, цвета, расположения и прочих атрибутов, используемых в документе, элементов.

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

     Описание  стиля на CSS при открытии страницы может быть взято из разных мест: оно может быть встроенным стилем — это блоки CSS внутри страницы на языке HTML. 

     <style type="text/css">

         body {

             color: green;

         }

      </style> 

 Из  отдельного файла .css, в котором описывается таблица стиля, на этот файл делается ссылка внутри страницы: 

     <link rel="stylesheet" type="text/css" href="style.css" /> 
 

Это может  быть Inline–стиль, при этом в HTML документе информация о стиле элемента указывается как атрибут style. 

<p style="font–size: 21px; color: green;">Выводимый текст</p> 

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

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

     селектор, селектор {

       свойство1: значение;

       свойство2: значение;

       свойство3: значение;

     } 

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