Пояснения к работе

Универсальный язык разметки гипертекста html (hyper text markup language) нашёл самое широкое распространение для представления в www (world wide web) web -страниц, электронных книг, презентаций и др.

Htmlне является языком программирования, так как он не содержит команд – главной компоненты любого языка программирования. Файлы с html − кодом представляют собой обычные текстовые файлы, которые может прочитать как человек, так и компьютер. Благодаря этому, разрабатывать Web-страницы можно в любой операционной системе, используя разнообразные приложения (Word, Far, NotePad, Windows Commander и др.).

Для просмотра Web-страниц, написанных на html, могут использоваться, например, браузеры типов Internet Explorer,Netscape Navigator или Opera. Для того чтобы браузер воспринимал содержимое текстового файла как html − код, его расширение должно быть.html или.htm.

Гипертекстовый документ состоит из заголовка head и тела body документа. Ниже на рис.1 приведён пример простейшего гипертекста и соответствующая ему web-страница.

Html является описательным языком разметки документов, в нем используются указатели разметки (теги). Теговая модель описывает документ как совокупность контейнеров, каждый из которых начинается и заканчивается тегами, то есть документ html представляет собой обычный АSСII − файл, с добавленными в него управляющими html−кодами (тегами). Текст тега заключается в угловые скобки (" < " и " > ").

Для ряда тегов характерно наличие атрибутов, которые могут иметь конкретные значения, устанавливаемые для изменения функции тега. Атрибуты тега следуют за именем и отделяются друг от друга одним или несколькими знаками табуляции, пробелами или символами возврата к началу строки. Порядок записи атрибутов в теге значения не имеет. Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Если значение атрибута — одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в одинарные или двойные кавычки, особенно если они содержат несколько разделенных пробелами слов. Длина значения атрибута ограничена 1024 символами. Регистр символов в именах тегов и атрибутов не учитывается, чего нельзя сказать о значениях атрибутов. Например, особенно важно использовать нужный регистр при вводе URL (Universe Resource Locator − унифицированный указатель ресурса), других документов в качестве значения атрибута href.

Рис. 1. Гипертекст и соответствующая ему web-страница

Чаще всего элементы разметки html или html − контейнеры состоят из начального и конечного компонентов, между которыми размещаются текст и другие элементы документа. Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта (/) (например, для тега стиля шрифта — курсив < i > закрывающая пара представляет собой < /i >, а для тега заголовка < title > закрывающей парой будет < /title >). Конечные теги никогда не содержат атрибутов. По своему значению теги близки к понятию скобок "begin/end" в универсальных языках программирования, которые задают области действия имен локальных переменных и т.п. Теги определяют область действия правил интерпретации текстовых документов.

Все теги html по их назначению и области действия можно разделить на следующие основные группы:

− определяющие структуру документа;

− оформление блоков гипертекста (параграфы, списки, таблицы, картинки);

− гипертекстовые ссылки и закладки;

− формы для организации диалога;

− вызов программ.

Рассмотрим синтаксис тегов некоторых из перечисленных групп.

Теги, определяющие структуру документа:

1. < html > … Вся страница html … < /html >. Этими двумя тегами должна начинаться и заканчиваться web - страница.

2. < head > …Заголовок… < /head >. Заголовок html − документа является необязательным элементом разметки. В него включают тег < title > и др.

3. < title > … Имя … < /title >. Элемент разметки title служит для именования документа в World Wide Web и является необязательным элементом разметки. Роботы многих поисковых систем используют содержание элемента title для создания поискового образа документа. Слова из title попадают в индекс поисковой системы. Из этих соображений элемент title всегда рекомендуется использовать на страницах web-страницы.

4. < body > …Содержимое html страницы… </ body >. Между этими двумя тегами располагается всё, что будет отображено на web-странице. Среди атрибутов тега < body > следует упомянуть bgcolor, который применяется для задания фона web-страницы. Он может, например, принимать значения: aqua, black, blue, gray, green, fuchsia, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow и др.

Теги, оформляющие блоки гипертекста:

1. < p > …Содержимое абзаца… < /p >. Создаётся абзац с пробелами до и после. Использовать закрывающий тег не обязательно, но рекомендуется. У тега < p > может быть всего один, отвечающий за выравнивание текста, аргумент Align, который принимает одно из четырёх значений: Left, Right, Center или Justify.

2. < h1 > …Заголовок… < /h1 > − < h6 > …Заголовок… < /h6 >. Этот тег делает заголовок жирным. Заголовки уровня 1 – больше, а заголовки уровня 6 – меньше, чем обычный текст. У этого тега может также быть всего один, отвечающий за выравнивание текста, аргумент Align ( выравнивание ). Align может принимать одно из следующих значений:

− left − выравнивание текста по левому краю (по умолчанию);

− right − выравнивание текста по правому краю;

− center − выравнивание текста по центру.

3. < br > − разрыв текущей строки и переход на следующую. Это одиночный тег.

4. < nobr > …Текст… < /nobr > − не даёт возможность браузеру разрывать Текст. Если Текст не умещается на экране, то посетителю web-страницы придётся воспользоваться полосой прокрутки; если текст не умещается в колонке, то она расширяется.

5. < font > …Текст… < /font > − устанавливает гарнитуру (шрифт), его цвет и размер шрифта для Текст. Для установления шрифта используется атрибут face. Для задания цвета используют атрибут с форматом color=#RRGGBB ( от английских слов Red, Green, Blue), где RR, GG и BB − шестнадцатеричные числа, обозначают яркости каждой составляющей. Вторая форма записи атрибута проще: color= Color, где Color − одно из слов английского языка, обозначающего цвет. Размер указывается цифрами от 1 до 7 − для этого применяют атрибут size. По умолчанию обычно стоит 3. Пример. <font size=6 face=Arial color=#0000ff> Структура гипертекстовой сети </font>.

6. < b > …Текст… < /b > или < strong > …Текст… < /strong > − пишет Текст жирно.

7. < i > …Текст… < /i > или < em > …Текст… < /em > − пишет Текст наклонно.

8. < u > …Текст… < /u > − подчёркивает Текст.

9. < hr > − отображает горизонтальную линию поперёк текста;

10. < !-- …Текст… -- > − браузер рассматривает Текст как комментарий и не выводит его на экран.

11. < ol > …Список… < /ol >, < li > …Элемент списка… < /li >. Эти две пары тегов отображают нумерованный список. У тега < ol > могут быть два атрибута: start и type. Первый из них задает первый номер списка (по умолчанию 1), а второй – выбирает систему нумерации (возможные значения: A – большими латинскими буквами, a – малыми латинскими буквами, I – большими римскими цифрами, i – малыми римскими цифрами, 1 – арабскими цифрами).

12. < ul > …Список… < /ul >, < li > …Элемент списка… < /li >. Эти две пары тегов отображают маркированный список. У тега < ul > может быть только один атрибут − type. Он может принимать одно из тёх значений: circle, disc и square.

13. < img > − отображает рисунок формата GIF, JPEG или PNG. Тег имеет следующие атрибуты:

− src − его значение задаёт имя файла, в котором находится изображение, и путь к нему. Задавая путь, нужно руководствоваться правилами, принятыми для записи URL. В частности, имена папок и файлов разделяются прямыми косыми чертами, а строчные и прописные буквы различаются;

− width и height − определяют высоту и ширину изображения в пикселях или процентах от размера окна (в последнем случае надо указывать символ %);

− align − используется для выравнивания картинки относительно текста по горизонтали (значения left и right) вертикали (значения: absbottom, absmiddle, baseline, bottom, middle, texttop и top). Для отмены обтекания изображения текстом применяют тег < br > с атрибутом clear, который может принимать значения: right, left и all;

− alt − используется для снабжения изображений комментирующими надписями, которые появляются рядом с указателем мыши, наведённым на изображение;

− border − определяет толщину чёрной рамки картинки в пикселях (по умолчанию толщина равна 2);

− hspace и vspace − определяют горизонтальный и вертикальный отступы между изображением и текстом в пикселях;

14. < table > …Таблица… < /table > − создают таблицу. Таблица состоит из строк, а строки состоят из столбцов. Тег < table > имеет следующие атрибуты:

− align − определяет горизонтальное выравнивание таблицы относительно окна;

− bgcolor − определяет цвет фона;

− border − определяет толщину рамки в пикселях (по умолчанию 0);

− bordercolor − определяет цвет рамки;

− cellpadding − определяет расстояние между рамкой и содержимым ячейки таблицы в пикселях;

− cellspacing − определяет расстояние между рамками ячеек;

− height – определяет минимальную высоту таблицы;

− width – определяет минимальную ширину таблицы.

15. < caption > …Заголовок таблицы… < /caption > − добавляют к таблице её заголовок.

16. < tr > …Содержимое строки… < /tr > − задают содержимое строки. Тег имеет следующие атрибуты: align, bgcolor, bordercolor, height, width и др. Перечисленные атрибуты выполняют те же функции, что и для тега < table >, но уже для строки таблицы.

17. < td > …Содержимое столбца… < /td > − задают содержимое столбца. Тег имеет следующие атрибуты: align, bgcolor, bordercolor, height, width и др. Перечисленные атрибуты выполняют те же функции, что и для тега < table >, но уже ячейки таблицы. Атрибуты colspan и rowspan позволяют объединять столбцы и строки соответственно.

Пример использования тегов < table > - < /table >, < caption > -< /caption >, < tr > - < /tr > и < td > - < /td > показан ниже на рис. 2.

Рис. 2. Гипертекст с таблицей и соответствующая ему web-страница

Теги, обеспечивающие гиперссылки:

1. < a > …Гиперссылка… < /a > − обеспечивает гиперссылку на другую страницу или файл. Пример. < a href=second.htm >Запустите второй html-документ< /a > − отображается подчёркнутая гиперссылка (Запустите второй html-документ) на Web-страницу с названием second.htm в том же каталоге.

Пример того, как работают рассмотренные выше теги, может дать рис. 3.

Структура гипертекстовой сети задается гипертекстовыми ссылками. Гипертекстовая ссылка − это адрес другого HTML−документа или информационного ресурса Internet, который тематически, логически или каким-либо другим способом связан с документом, в котором ссылка определена. Абзац выделяется не “красной строкой”, а большими интервалами между строками.

Рис. 3. Гипертекст и соответствующая ему web-страница

---

Дата добавления: 2015-11-14