Преподаватель который помогает студентам и школьникам в учёбе.

Основы программирования на языке HTML

Содержание:

ВВЕДЕНИЕ

HTML это аббревиатура от слов HyperText Markup Language - язык гипертекстовой разметки, который предназначен для написания гипертекстовых документов, публикуемых в World Wide Web (WEB).

HTML был создан Тимом Бернерсом-Ли, сотрудником Европейского института физики элементарных частиц (CERN) в 1991-1992 годах, он был основан на языке SGML -Standart Generalized Markup Language (стандартный обобщенный язык разметки). Основной принцип SGML - внедрение в текст управляющих конструкций, которые разделяли элементы структуры, но не содержали информации о том, как эти структуры должны отображаться. Из-за отсутствия средств, позволяющих отображать информацию в соответствии с SGML разметкой, данный язык не был широко востребован. В сентябре 1993 года группа программистов Национального центра суперкомпьютерных приложений США (NCSA) выпустила первый (и на долгое время единственный) графический браузер Mosaic, благодаря которому язык HTML получил широкое распространение. Официальной спецификации HTML 1.0 не было принято до 1995 года существовало множество неофициальных стандартов HTML. В сентябре 1995 года организацией Internet Engineering Task Force (IETF) был принят стандарт HTML 2.0. Стандарт HTML 2.0 вобрал в себя всю сложившуюся к 1994 году практику создания веб-сайтов.

В начале 1997 года международной организацией Консорциума Всемирной паутины (World Wide Web Consortium, W3C) был принят стандарт 3.2 этого языка (версия 3.0 была совместима со второй версией, но ее реализация была сложна для браузеров того времени; версия 3.1 официально никогда не предлагалась). В 1997 году консорциум W3C опубликовал версию HTML 4.0 в качестве рекомендации, которая включила дополнительные специальные расширения браузеров, но попыталась также рационализировать и очистить HTML. Многие элементы и атрибуты (в основном касающиеся визуального оформления) были помечены как не рекомендуемые. В конце 1999 года была утверждена спецификация 4.01. которая и используется в настоящее время Основное новшество последнего стандарта состоит в появлении каскадных таблиц стилей (CSS - Cascading Style Sheets). Работа над черновой версией спецификации HTML 5 началась в марте 2008 года. Для этого была сформирована специальная группа, объединившая порядка пятисот участников, среди которых специалисты таких компаний, как Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, BEA Systems, Cisco, France Telecom и Hewlett-Packard.

Литература, используемая в написания работы — это учебные пособия и наиболее популярные (бестселлеры) книги по технологиям программирования HTML и веб дизайна. Учебные пособия рекомендованы студентам, изучающим такие дисциплины, как основы интернет-технологий, интернет-программирование, мировые информационные ресурсы и цифровые библиотеки.

С 28 октября 2014 года W3C официально рекомендует использовать HTML5.

Цель работы: изучение основы программирования на языке HTML.

Задачи исследования:

Проанализировать литературу по теме курсовой работы.
Рассмотреть основы языка гипертекстовой разметки HTML.
Изучить структуру HTML документа.
Охарактеризовать основные компоненты языка HTML (теги).
Выявить особенности работы с языком гипертекстовой разметки HTML.

1. Основы языка HTML

Всемирная паутина World Wide Web (WWW) соткана из Web-страниц, которые создаются с помощью так называемого языка разметки гипертекста HTML (Hypertext Markup Language). Хотя многие говорят о программировании на этом языке, HTML вовсе не является языком программирования в традиционном понимании. HTML — язык разметки документа. При разработке HTML-документа выполняется разметка текстового документа точно так же, как это делает редактор при помощи красного карандаша. Эти пометки служат для указания формы представления информации, содержащейся в документе: где, будут заголовки, что выделить цветом или может подчеркнуть, а где будут находиться иллюстрации.

HTML язык представляет собой совокупность команд, которые называемых тегами (от английского слова tag). Их добавление в простой тестовый документ позволяет получить единообразно оформленные и связанные между собой ссылками «web-страницы». Документ же при этом получает название гипертекстового, как содержащего внутри себя ссылки на другие документы. [1, c. 19]

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

Отметим одну важную особенность этого языка. HTML является подмножеством мощного языка SGML (Standard Generalized Markup Language), широко используемого в издательской деятельности (на нем, например, готовятся и печатаются журналы Physical Review и Physical Review Letters). Основная задача SGML - определить, как автору следует разметить текст и указать положение рисунков, чтобы издатель, не перенабирая текст, а изменив лишь несколько строк в стилевых файлах, мог изменять формат текста (например, переходить к набору в две колонки) и получать при этом полиграфический совершенный результат. Основной выигрыш от использования этих языков состоит в переносимости текста между разными издательскими системами. Эта же особенность - приоритет читателя над автором - в значительной степени сохраняется и в HTML. Так, читая документ, пользователи могут устанавливать способы выделения текста, гарнитуру и размер шрифтов по своему вкусу; они могут отменить просмотр рисунков. Компьютеры пользователей могут иметь экраны разных размеров с разным разрешением, в результате чего максимальное количество символов, выводимых в строке, будет различным и т. д. Всю эту адаптацию к условиям пользователя и выполняет программа просмотра. При этом, если текст HTML был написан неправильно, вид документа в окне программы просмотра может исказиться до неузнаваемости. Ясное понимание этой особенности языка HTML и следование формальным правилам разметки текста позволит создавать документы, хорошо выглядящие во всех программах просмотра на разных типах компьютеров. [2, c. 5]

Для просмотра HTML-документов используются специальные программы, которые называют браузерами. Они позволяют интерпретировать файлы, размеченные по правилам языка HTML, форматировать их в виде Web-страниц и отображать на экране компьютера пользователя. Существует большое количество программ-браузеров, разработанных различными компаниями, каждый из которых имеет свои уникальные особенности. На сегодняшний день наибольшей популярностью пользуются Google Chrome, Firefox, Internet Explorer и Opera. [1, c. 19]

Создавая web-страницы, стоит помнить об огромном разнообразии представленных средств отображения гипертекста, и добиваться корректного (универсального) отображения во всех браузерах, просматривая страницы в большинстве из них и соответствующим образом корректируя. [1, c. 20]

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

текст;
специальные последовательности символов;
флаги разметки.

Графическая и звуковая информация, включаемая в HTML-документ при помощи специальных команд, хранится в отдельных файлах. Программы просмотра HTML-документов, такие как, например, Microsoft Internet Explorer пли Google Chrome, интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащих HTML-документы, принято расширение .htm или .html.

Последовательность символов, составляющая текст, может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр и специальных символов (например, +, #, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл:

< (Less Than);

> (Greater Than);

& (Ampersand);

" (Double Quote).

Символ табуляции, символ возврата каретки и символ перехода на новую строку считаются эквивалентными пробелу, а несколько следующих друг за другом пробелов и/или табуляций, и/или символов возврата каретки, и/или символов перехода на новую строку эквивалентны одному пробелу, за исключением случая предварительно отформатированного текста. [2, c 6]

Если необходимо включить в текст какой-либо из четырех зарезервированных символов < > & ”, который, как было сказано выше, не может быть помещен в текст непосредственно, следует закодировать его специальной последовательностью символов. Каждая специальная последовательность начинается амперсандом (&) и заканчивается точкой с запятой (;). Зарезервированные символы представляются следующими последовательностями:

< <

> >

& &

" "

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

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

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

<тег атрибут1=’'значение" атрибут2="значение">...</тег> <тег параметр1="значение" параметр2="значение’’> <тег параметр1="значение" параметр2="значение’’> ...</тег>

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

Парные теги, называемые по-другому контейнеры, состоят из двух частей — открывающий и закрывающий тег. Открывающий тег обозначается, как и одиночный — <тег>, а в закрывающем — используется слеш — </тег>. Допускается вкладывать в контейнер другие теги, однако следует соблюдать их порядок вложенности. Таким образом, действовать необходимо, как в детской игре «Матрешка». [1, c. 22]

Непарный флаг вызывает "единичное" действие в том месте, где он встречается. Например, флаг <BR> служит для перехода на новую строку при выводе текста. [2, c. 8]

Для изменения некоторых, установленных по умолчанию, значений стилевых элементов предназначены атрибуты (параметры) к тегам Атрибут и его значение пишется внутри треугольных скобок через пробел от основного служебного слова [3, c. 3]

Многие флаги могут включать дополнительные параметры, или атрибуты, модифицирующие эффект данного флага, например, <Р> - флаг начала параграфа, <Р ALIGN=CENTER> флаг начала параграфа, выровненного по центру окна. [2, c. 8]

Существует определенная иерархия вложенности тегов. Например, тег <title> должен находиться внутри контейнера <head> и нигде иначе. Чтобы не возникло ошибки, следите за тем, чтобы теги располагались в коде правильно. Если теги между собой равноценны в иерархии связи, то их последовательность не имеет значения. Так, можно поменять местами теги <title> и <meta>, на конечном результате это никак не скажется.

Работая с закрывающими тегами, стоит помнить также и следующее: закрывающий тег бывает обязательным или не обязательным. Обязательный закрывающий тег должен присутствовать всегда, иначе это приведет к ошибке при отображении документа. Необязательный закрывающий тег говорит о том, что разработчик может его, как добавить, так и опустить, к ошибке это не приведет. Однако рекомендуем закрывать все подобные теги, включая необязательные, это дисциплинирует, создает более стройный и строгий код, который легко модифицировать. [1, c 23]

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

Любые теги, а также их параметры нечувствительны к регистру, поэтому форму записи вы вольны выбирать сами, как писать — <BR>, <Br> или <br>. В любом случае рекомендуется придерживаться выбранной формы записи на протяжении всех страниц сайта. Заметим также, что текст, полностью набранный прописными символами, читается хуже, чем текст со строчными символами или смешанный.

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

Если какой-либо тег или его параметр был написан неверно, то браузер проигнорирует подобный тег и будет отображать текст так, словно тега и не было. [1, c. 24]

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

Типичный HTML-документ имеет головную часть (<HEAD>) и тело (<BODY>). Начало документа отмечается флагом <HTML>, а конец – флагом </HTML>. [2, c. 8]

Сначала мы объявляем, что перед нами web-страница, используя теги <HTML> и </HTML>. Данная пара тегов является самой внешней, между его начальным и конечным тегами должна находиться вся Web-страница.

Раздел HTML определяет специфику документа, содержание которого будет интерпретироваться браузером, дает браузеру информацию о том, что документ разработан с помощью языка разметки HTML. Чаще всего тэг <HTML> используется без параметров. Большинство современных браузеров могут опознать документ и не содержащий тэгов <HTML> </HTML>, все же их употребление крайне желательно. [1, c. 25]

В тоже время, <!DOCTYPE html> - Тип документа. Готово. И никаких громоздких строк, которые даже самым опытным веб-разработчикам приходится вырезать и вставлять. Никаких URL-адресов. Никаких номеров версий. Ничего лишнего. Такое объявление типа скорее напоминает не правило, а заклинание: оно предназначено для тех браузеров, которым для перехода в стандартный режим требуется указание типа документа, а такой код является одновременно и кратким, и надежным. Мы записали его в верхнем регистре — для совместимости как с HTML, так и с XML, и я рекомендую вам поступать так же.

Далее определим кодировку символов документа. Если этого не сделать, появляется неясная, но реальная угроза безопасности. Кодировка должна быть указана в первых 512 байтах документа; лучше всего использовать UTF-8 (если нет серьезных оснований для выбора другой кодировки).

<!DOCTYPE html>

Посмотрите внимательно на тег <meta>. Если вы привыкли к XHTML, то заметите три странности. Во-первых, этот тег гораздо короче (раньше он бы выглядел так: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">). Старый вариант остается допустимым, однако новый использовать все же предпочтительнее, поскольку он везде работает и его проще напечатать.

Вы также заметите, что я не использовал кавычки для атрибута charset="utf-8". Кроме того, я не закрыл тег <meta charset=utf-8 />. [4, c. 24]

Итак, как мы уже говорили, у страницы есть «голова». Так же, как и у человека, от названия которой и произошло название тега <HEAD>, она расположена над «телом». И также существует она в единственном экземпляре. Все, что здесь размещено, на странице мы практически не увидим, но, тем не менее, эта информация очень важна. Именно здесь определяется и имя страницы, и на каком языке она будет «разговаривать», да и вообще вся система управления, подобно нервной системе, также находится «в голове». Иногда этот тег называет также заголовков страницы. [1, c. 25] Головная часть документа является служебной. Она обычно включает в себя название документа <title>. Кроме того, в нее часто помещается <МЕТА>-информация - ключевые слова и описание документа, которые читаются некоторыми программами-роботами. [2, c. 8] Содержимое элемента HEAD не отображается напрямую на веб-странице, за исключением элемента TITLE, устанавливающего заголовок веб-страницы. Раздел HEAD может содержать в себе следующие элементы: TITLE, МЕТА, BASE, LINK, STYLE, SCRIPT и OBJECT. В лекции мы дадим лишь основные подходы к работе с перечисленными элементами. Более подробно ознакомиться с ними можно в Спецификации HTML. [5, c. 45]

Подробнее о тегах заголовка <HEAD>

<TITLE></TITLE> - тег предназначен для указания имени созданному электронному документу. Следует помнить, что под именем документа в данном случае имеется в виду не файловое наименование, а название, отображаемое в заголовке окна браузера.

Название может иметь неограниченную длину и содержать любые символы, кроме некоторых зарезервированных (желательно не более 60 символов). [1, c. 26]

По умолчанию этот текст используется при создании закладки (bookmark) для документа. Избегайте безликих названий (Home Page, Index и т. д.).

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

Например, если адрес документа указан как <base href="http://www. narfu.ru/dirl">, то при добавлении рисунков достаточно использовать относительный адрес <img src="images/lada.gif">.

При этом полный путь к изображению будет http://www.narfu.ru/dirl/images/lada.gif, что позволяет браузеру всегда находить графический файл, независимо от того, где находится текущая web-страница.

Также можно применять и иерархическую систему пути с двумя точками. Так, если изображение добавляется как <img src="../images/lada.gif">, то полный путь к файлу будет http://www. narfu.ru/images/lada.gif.

Тег имеет один обязательный параметр HREF, после которого указывается полный URL-адрес документа.

<BASE HREF="http://ww.narfu.ru/’’> [1, c. 27]

Тег BASE используется для явного задания полного URL-адреса документа. Это бывает полезно ввиду того, что общепринятым стилем задания гипертекстовых ссылок является их относительная адресация. То есть при задании ссылки на документ указывается не полный его URL-адрес, а его месторасположение относительно текущего адреса. Элемент BASE как раз и Использование элемента BASE позволяет поддерживать относительные ссылки в том случае, когда HTML-документ перемещен, а все остальные документы, на которые он ссылается, остались на прежнем месте. Адрес документа поменялся, однако при активизации относительной ссылки, она будет взята браузером относительно исходного адреса, прописанного в элементе BAS

Тег BASE можно использовать и в заголовке, и в теле документа, причем несколько раз. Область действия элемента определяется от места его задания и до конца документа или до следующего объявления элемента BASE, если таковой имеется. [5, c. 49]

<LINK> - устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. Он состоит из URL-адреса и параметров, конкретизирующих отношения документов. Заголовок документа может содержать любое количество тэгов <LINK>.

Возможные параметры тега <LINK>:

HREF-путь к связываемому файлу.

MEDIA-определяет устройство, для которого следует применять стилевое оформление.

REL-определяет отношения между текущим документом и файлом, на который делается ссылка.

TYPE MIME-тип данных подключаемого файла.

<МЕТА>, так называемые Мета - определения. Они предназначены для описания внутренних свойств HTML-файла, не отражающихся при просмотре Web-страницы, но использующихся для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Один из немногих тегов, не являющихся парным.

Каждый элемент МЕТА содержит два основных параметра, первый из которых определяет тип данных (NAME, HTTP-EQUIV), а второй — содержание (CONTENT). Также иногда используется и дополнительный параметр URL. Заголовок документа может содержать любое количество тэгов МЕТА. [1, c. 28]

Метатеги предназначены для помещения в код веб-страницы информации о ней самой. Эта информация используется поисковыми системами Интернета, браузерами и редакторами веб-страниц Она никак не отображается в окне веб-обозревателя. [3, с 60]

<STYLE></STYLE>, необязательный тег. Тег <style> применяется для определения стилей элементов web-страницы. Тег <style> необходимо также использовать внутри контейнера <head>. Можно задавать более чем один тег <style>, но желательно переносить описания в отдельные файлы *.css «таблицы описания стилей».

<SCRIPT></SCRIPT> - содержит код исполняемых сценариев (скриптов). [1, с. 32] Тег SCRIPT предназначен для добавления так называемых клиентских сценариев - сценариев, которые выполняются браузером и написаны на языке JavaScript. JavaScript добавляет динамическое поведение в статические документы HTML, например, эффекты анимации, или проверку данных формы, или другие функции, которые запускаются, когда пользователь выполняет определенные действия.

Тег SCRIPT может располагаться в заголовке или теле HTML-документа в неограниченном количестве. Когда браузер встречает такой сценарий, он прекращает разбор оставшегося документа, пока не выполнит код сценария. Поэтому, чтобы гарантировать, что код JavaScript будет доступен до загрузки основного документа, его необходимо поместить в раздел HEAD. [6, c. 53]

Один из самых важных компонентов любого HTML-документа, в нем располагается содержательная часть, которая выводится браузером на экран монитора пользователя. Внутри элемента BODY можно использовать все элементы, предназначенные для дизайна Web-страницы. [1, с. 32] Определяет "видимую" часть HTML-документа. В документе должно быть только одно тело. [2, c. 9]

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

Все параметры, которые задаются с помощью тега <BODY> можно разделить на четыре группы:

параметры фона,
параметры текста,
параметры гиперссылок,
параметры границ документа.

Параметры фона

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

BGCOLOR - определение цвета фона

BACKGROUND - указание полного пути нахождения фонового рисунка

BGPROPERTIES - изменение свойств фона (например, фиксирование фонового рисунка) не поддерживается Firefox

Параметры текста

Из параметров текста документа в большей степени применяется только один — TEXT. Он задает цвет основного текста на странице (значение параметра может быть введено аналогично цвету фона документа как с помощью словесного задания цвета, так и в шестнадцатеричном представлении или раскладке цветов rgb):

<BODY TEXT="black"> [1, c. 34]

Параметры гиперссылок

С помощью тега <BODY> возможно также задать, как будут выглядеть гиперссылки на странице. За это отвечают следующие параметры:

ALINK - устанавливает цвет активной ссылки. (Ссылка становится активной, когда на нее нажимают курсором мыши или выделяют с помощью клавиатуры).

LINK - определяет цвет не посещённых ссылок

VLINK - определяет цвет посещенных ссылок, т.е., таких ссылок, на которые пользователь уже «нажимал».

Параметры границ документа

Эти параметры определяют отступы от края документа до содержимой страницы. Значения задаются в пикселях, значение по умолчанию 10 пикселей. Синтаксис употребления параметров:

TOPMARGIN от верхнего края

BOTTOMMARGIN от нижнего края

LEFTMARGIN от левого края

RIGHTMARGIN от правого края от правого края [1, c. 35]

Каждая веб-страница начинается с тега <html> и заканчивается им же </html>. Каждый html-документ состоит из двух частей: head и body. В этой главе мы рассмотрели структуру html страницы и основные теги для ее формирования.

3. Форматирование текста, документа

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

При верстке веб-страницы текст размечают тегами. Теги добавляют тексту дополнительное значение и позволяют браузерам правильно отображать структуру страницы. [6, с. 44]

В этой главе мы заострим внимание на том, как добавить разметку к тексту, выводимому на страницы. Разметку можно разделить на:

• структурную разметку — элементы, которые вы можете использовать для описания и заголовков и абзацев;

• семантическую разметку, предоставляющую дополнительную информацию, например, на какое слово или словосочетание в предложении делается логическое ударение, является ли какой-то написанный текст цитатой, какова расшифровка акронима и т.д. [6, с. 44]

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

Но, тем не менее, работая с текстом, на веб-странице стоит помнить ряд правил:

1. О расстановке пробелов и переносе строк.

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

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

Исключением из этого правила является тег <рге>, внутри которого любое число пробелов отображается именно так, как оно указано в коде.

2. О переносах в тексте.

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

3. Текст размещается по всей ширине окна браузера.

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

- Если же в тексте нет знаков пробела или дефиса, браузер отобразит ее в одну строку, добавив горизонтальную полосу прокрутки, если она шире окна браузера. [1, c. 38]

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

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

В группу тегов логического форматирования входят теги, отображающие на экране монитора элементы документа, таким образом, как установлено по умолчанию в спецификации языка разметки HTML. Переопределить их параметры или свойства нельзя, за исключением ситуаций использования стилевых шаблонов CSS и обособления тегами физического форматирования. Основное предназначение этих тегов — логическое выделение отдельных элементов HTML. [1, c. 39]

Структурное форматирование.

Абзацы <p>

Для создания абзаца заключите текст в открывающий <р> и закрывающий </р> теги. По умолчанию браузер автоматически отобразит каждый абзац с новой строки, при этом абзацы будут несколько отстоять друг от друга. Абзац состоит из одного или нескольких предложений, формирующих самодостаточную часть какого-либо высказывания. Абзац начинается с красной строки. [6, c. 47] Разбиение текста на отдельные абзацы, выражающие законченную мысль, — один из первых принципов составления любых документов. HTML-документы не являются исключением из этого правила. При создании документов с помощью текстовых редакторов разбиение на абзацы выполняется вводом символа перевода строки. Большинство редакторов реализует это при нажатии клавиши <Enter>. Как уже было сказано выше, в HTML-доку ментах символы перевода строки не приводят к образованию нового абзаца. [1, c. 40]

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

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

- ALIGN="Ieft" — текст выровнен по левому краю (значение параметра, принятое по умолчанию);

- ALIGN="center" — текст располагается посередине окна браузера. Не рекомендуется при работе с большими фрагментами текста, т. к. из-за различной длины слов восприятие абзаца затрудняется;

- ALIGN="right" — выравнивание текста по правому краю. Идеально подходит для создания эпиграфов, подписей, заголовков и пр. При работе с большими текстовыми фрагментами нежелательно;

ALIGN="justify" — выравнивание по ширине окна браузера. Это значение является общепринятым стандартом оформления текстовых блоков делового содержания. [1, c. 43]

Перевод строки <BR>.

Как мы уже рассмотрели раньше, браузер автоматически начинает каждый абзац с новой строки, однако если необходимо добавить перевод строки в пределах какого-либо абзаца, то нам понадобится вставить специальный тег — <br />. [6, c. 51] Этот тег из немногих, не является парным и поэтому не соответствующего закрывающего тэга. В его размещения строка заканчивается, а оставшийся один имеет месте текст печатается с новой строки. Например, такой подход может использоваться для создания структур типа списков без использования специальных тэгов разметки списка или как в нашем примере для оформления стихотворения. Для переноса на конкретное число строк тег ставится нужное количество раз. [1, c. 44]

Отступы, Пробелы.

Верстальщики веб-страниц часто добавляют дополнительные пробелы в код или даже помещают некоторые элементы на новые строки с целью повышения удобочитаемости кода.

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

Довольно часто можно столкнуться с тем, что создатели веб-страниц пользуются сворачиванием пробелов, чтобы расставить необходимые отступы в исходном коде страниц для повышения удобочитаемости. [6, c 50] В HTML размер отступа определяется кодовой конструкцией  , которая визуально представляет собой обычный пробел. Создавая текст в документе, не обязательно между каждым словом вставлять  . — браузер и так поймет, что нужно сделать отступ. Но если вам потребуется сделать отступ большего размера, и вы прямо в коде создадите несколько пробелов, браузер интерпретирует такие пропуски в виде единственного пробела. [1, c 43]

Запрет перевода строки <NOBR>.

Тег этот парный и по своему действию является прямой противоположностью предыдущего. Текст, размеченный этим тэгом, будет гарантированно располагаться в одной строке, независимо от ее длины. Если при этом получающаяся строка будет выходить за пределы окна просмотра браузера, то появится горизонтальная полоса прокрутки. [1, c 44]

Выделение отдельных слов, фраз, предложений.

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

Отображение полужирным шрифтом <B> (<STRONG>).

Чтобы выделить текст полужирным начертанием шрифта, нужно поместить его между тегами <B> и < /b> Элемент <b> также обозначает фрагмент текста (например, ключевые слова), внешний вид которого будет отличаться от основного текста абзаца. При этом использование данного элемента не добавляет дополнительных значений к тексту. [6, c.48]

Отображение курсивом <I> (<EM>)

Чтобы отобразить текст с курсивным начертанием шрифта, его следует поместить между тегами <i> и </ i>.

Элемент <i> определяет фрагмент текста, отличающийся от основного текста, например, технические термины, иностранные слова и прочие виды включений в текст, которые принято выделять курсивом. [6, c.48]

Шрифт текста <FONT>

Одним из основных тегов физического форматирования текста, отображающий свойства шрифтов является <FONT>. Тег является парным, для него могут использоваться следующие параметры:

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

Значение параметра - название шрифта, которое должно в точности совпадать с названием шрифта, имеющего у пользователя. Если такого шрифта не будет найдено, то данное указание будет проигнорировано и будет использован шрифт, установленный по умолчанию. [1, c 45]

SIZE - служит для указания размеров шрифта в условных единицах от 1 до 7. Конкретный размер шрифта зависит от браузера, по умолчанию - значение 3. Размер шрифта указывается как абсолютной величиной (SIZE=2), так и относительной (SIZE=+1).

COLOR - служит для указания цвета шрифта. Значения могут быть заданы словами, числом в шестнадцатеричной системе, тройкой чисел RGB

Подстрочные <SUP> и надстрочные знаки <SUB>

Элемент <sup> используется для выделения символов, которые должны быть отображены как надстрочные, к примеру, ряд математических понятий, таких как возведение в степень (2² и т.п.).

Элемент <sub> используется для отображения символов как подстрочных. Подстрочные символы, как правило, используются в химических формулах, таких как Н₂О. [6, c. 49]

В завершение разговора о тегах физического форматирования стоит добавить, что разные теги могут использоваться одновременно в отношении одного текстового фрагмента. Например, часть текста и даже отдельного слова может быть написана и курсивом, и жирным начертанием, да еще подчеркнута и т. д. Единственное, о чем следует помнить, это сохранение последовательности указания закрывающих тегов. Другими словами, не рекомендуется, открыв фрагмент текста тегами <В> и <FONT>, закрывать HTML-конструкцию в том же порядке (т. е. порядок закрывающих тегов должен быть обратным) -должен работать эффект «Матрешки». [1, c. 46]

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

Заголовок <H1>, <H2> … <H6>

В языке HTML существует шесть уровней заголовков:

<H1> используется для основных заголовков;

с <H2> по <H6> — для подзаголовков.

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

Браузеры отображают содержимое элементов-заголовков шрифтом разного размера. Текст заголовка <H1> выводится самым крупным шрифтом, текст заголовка <H6> — самым мелким. Кегль шрифта, используемый разными браузерами для отображения заголовков разного уровня, незначительно отличается. Кроме того, пользователи также могут отрегулировать кегль шрифта отображаемого текста. [6, c. 46]

Зачеркнутый <DEL>

Используется для обозначения удаленного текста.

Имеет необязательные для указания параметры DATETIME (дата удаления -YYYY-MMDDThh :mm:ssTZD, часовой пояс Time Zone) и CITE (URL-адрес документа удаления).

- источник причины [1, c. 49]

Подчеркивание <INS>

Используется для обозначения вставленного текста. Имеет необязательные для указания параметры DATETIME (дата вставки -YYYY-MMDDThh :mm:ssTZD, часовой пояс Time Zone) и CITE (URL-адрес документа - подробности внесенных дополнений). [1, c. 49]

Цитаты <BLOCKQUOTE>, <Q>

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

Элемент <q> принято использовать для более коротких цитат, помещающихся внутри абзаца текста. Изначально предполагалось, что браузеры будут заключать содержимое элемента <q> в кавычки, однако Internet Explorer этого не делает, потому многие избегают использовать данный элемент.

Для обоих элементов может быть указан атрибут cite*, указывающий, с какого сайта позаимствована та или иная цитата. Значение этого атрибута — URL-адрес сайта, содержащего более подробную информацию об источнике цитирования. [6, c. 55]

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

Чтобы визуально разделить темы книги или сцены пьесы, с помощью тега <hr /> вы можете добавить в текст горизонтальную линию. В языке HTML существует несколько элементов, не содержащих текста между открывающим и закрывающим тегами. Их принято называть пустыми элементами. Написание таких тегов отличается от стандартного. Обычно пустой элемент состоит только из одного тега, перед правой, закрывающей скобкой которого вставляются пробел и слеш. Некоторые верстальщики веб-страниц опускают пробел и слеш, хотя их указание и рекомендуется для следования спецификации. [6, c. 51]

Центрирование.

Центрирование любых элементов HTML-документа может быть осуществлено с помощью тега <CENTER>. Все данные, размещенные внутри этого парного тега, подлежат горизонтальному выравниванию посередине окна браузера. В сущности, тег <CENTER> представляет собой аналог значения ALIGN="center" того тега, результат отображения которого будет отцентрирован на экране монитора. [1, c. 51]

Комментарии.

Если горизонтальная линия является визуальным разделителем фрагментов текста, то комментарии невидимы на экране монитора, но в то же время могут нести большой объем информации.

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

Любой HTML-комментарий должен начинаться с конструкции <! — и заканчиваться —>. Между ними может находиться любой текст, цифры, символы и прочее, за исключением тегов.

<! — Начало блока новостей —> Код блока новостей...

<! — Окончание блока новостей —>

При всем удобстве включения в HTML-код комментариев необходимо помнить, что просмотреть код электронного документа может практически любой пользователь Интернета, открыв Web-страницу в текстовом редакторе. Поэтому размещать в комментариях информацию конфиденциального, коммерческого или личного характера не рекомендуется. [1, c. 53]

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

4. Изображения, графика

Существует достаточно много оснований, чтобы добавить на веб-страницу какое-либо изображение. Этим изображением может быть, например, логотип, фотография, иллюстрация, схема или диаграмма. [6, c. 92]

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

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

Изображения могут сделать текст вашего документа более содержательным. Представьте некий сухой HTML-документ, содержащим, например, описание придуманного вами технического устройства. Если он состоит из одного текста, то многим покажется скучным и порой непонятным. А если его «разбавить» несколькими иллюстрациями, размещенными в нужных местах, документ станет более читабельным и визуально привлекательным. [1, c. 59]

Изображения на Web-страницах могут использоваться двумя способами: в качестве фонового изображения, на котором располагаются элементы основного встраиваемые в документ. [1, c. 60]

Существует много способов описания графической информации, соответственно имеется значительное количество форматов хранения графических файлов, — порядка нескольких десятков.

Все форматы хранения графической информации можно разделить на два типа: векторный и растровый.

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

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

Растровая графика предполагает хранение данных о каждой точке изображения. Для отображения растровой графики не требуется сложных математических расчетов, достаточно лишь получить данные о каждой точке и отобразить их на экране. Все наши фотографии, сделанные на современных фотоаппаратах, сохраняются именно в растровых форматах. При масштабировании растровой графики обычно происходит потеря разрешения, что ухудшает качество изображения. [1, c. 62]

Графические форматы

В Web используются три графических формата: GIF, JPEG, PNG.

Все эти форматы сохраняют сжатое изображение.

Сжатие осуществляется за счёт отбрасывания несущественной информации и поиска в рисунке повторяющихся фрагментов.

Формат GIF

Формат GIF подходит для сохранения изображений с ограниченным количеством цветов и большими областями, заполненными сплошным цветом. [2, c.42] Стандарт был разработан компанией CompuServe Inc. для передачи графической информации в пределах определенных компьютерных сетей (разработка велась еще до появления Интернета). [1, c. 63]

Формат JPEG

Формат JPEG был разработан специально для сохранения фотографий. JPEG не подходит для сохранения изображений со сплошными областями и множеством деталей. [2, c.42]

В стандарте применен специальный алгоритм компрессии данных — при повышении степени сжатия качество изображения ухудшается за счет изъятия «ненужной» информации (в отличие от алгоритма сжатия GIF, который позволяет производить подобную процедуру практически без потерь).

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

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

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

Файлы формата JPG, в отличие от файлов формата GIF, не могут иметь несколько изображений, которые будут при просмотре сменять друг друга. [1, c. 64]

Формат PNG

Формат PNG был разработан как альтернатива GIF. Формат PNG -единственный из распространенных форматов, позволяющий получать полноцветные изображения с прозрачным фоном. PNG подходит для сохранения фотографий, на которых недопустимы никакие потери. Помимо этого, PNG используется на изображениях со сплошными областями. [2, c.42] Стандарт разрабатывался с учетом особенностей Интернета. PNG вобрал в себя наиболее сильные стороны двух предыдущих стандартов и исключил их недостатки.

В стандарте реализованы следующие средства:

прозрачный фон;
построчное чередование;
сжатие без потерь и др.

Однако PNG, несмотря на свои преимущества, не получил пока такого признания пользователями Интернета, как стандарты GIF и JPEG (одна из возможных причин — отсутствие поддержки анимации). В Сети можно встретить графические файлы с расширением png, но достаточно редко. [1, c. 65]

Добавление изображения <IMG>

Для добавления изображения на страницу воспользуйтесь элементом <img>. Он является пустым (то есть без закрывающего тега). Для него должны быть указаны следующие два атрибута. [6, c.96]

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

Alt - Данный атрибут предоставляет текстовое описание изображения, выводимое на экран в случае, если нет возможности показать само изображение. Текст, указываемый в значении атрибута alt, часто называют замещающим текстом. Он должен представлять собой точное описание изображения, чтобы оно могло быть распознано программным обеспечением экранного доступа (используемым людьми с нарушением зрения) и поисковыми системами.

Если вы используете изображение лишь как декорацию для улучшения оформления сайта (и оно не несет никакой смысловой нагрузки, как, например, графический разделитель — горизонтальная линия), используйте атрибут alt с пустым значением (между кавычек не должно быть никакого текста). [6, c.96]

Задание размеров выводимого изображения

Единственным обязательным параметров тега <IMG> является, как уже было описано выше, SRC. Использование остальных параметров не обязательно, однако рекомендуется по ряду причин.

Так, параметры WIDTH и HEIGHT:

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

Значения параметров WIDTH и HEIGHT могут указываться как в пикселах, так и в процентах от размеров окна просмотра. Последний вариант дает команду браузеру растянуть или сузить рисунок в соответствии с размерами окна страницы.

Любой из этих параметров может быть опущен. Если задан только один из параметров, то при загрузке рисунка второй параметр будет вычисляться автоматически из условий сохранения пропорций. [1, c.69]

Выравнивание изображения по горизонтали ALIGN

Align

Атрибут align раньше использовался для обозначения того, как остальные части страницы должны обтекать изображение. Этот атрибут был исключен из стандарта HTML5 — при создании новых сайтов для выравнивания изображений нужно использовать каскадные таблицы стилей CSS (о чем вы прочтете в главе 16).

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

Left – это значение выравнивает изображение по левому краю (позволяя тексту обтекать его справа).

Right - это значение выравнивает изображение по правому краю (позволяя тексту обтекать его слева). [6, c.100]

Выравнивание изображения по вертикали ALIGN

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

Top - то значение выравнивает первую строку текста с верхней границей изображения.

Middle - то значение устанавливает выравнивание первой строки текста относительно середины изображения.

Bottom - это значение выравнивает первую строку текста относительно нижней границы изображения.

В этой главе мы рассмотрели добавление изображения с использованием тега <IMG>. Форматы добавляемого изображение и его форматирование на станице, размеры расположение, обтекание текстом. [6, c.101]

5. Ссылки, гиперссылки

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

Чаще всего вы будете встречаться со ссылками следующих типов:

ссылки с одного сайта на другой;
ссылки с одной страницы сайта на другую страницу этого же сайта;
ссылки с одной части страницы на другую часть этой же страницы;
ссылки, открывающие новое окно браузера;
ссылки, запускающие программу для отправки электронных писем, установленную на вашем компьютере, и тем самым позволяющие отправить письмо на определенный адрес электронной почты. [6, c.74]

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

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

При наведении курсора мыши на гиперссылку, ее указатель принимает вид «ладони». [2, c.32]

Ссылки <A>

Ссылки создаются с помощью элемента <а> и атрибута href. Значением атрибута href является страница, на которую вы собираетесь переадресовать посетителя, когда он щелкнет мышью по ссылке.

Можно щелкнуть по любому слову текста, помещенного между открывающим <а> и закрывающим </а> тегами элемента, после чего произойдет переход на страницу, адрес которой указан в значении атрибута href.

При ссылке на другой сайт значением атрибута href должен быть полный, или абсолютный, URL-адрес этого сайта.

По умолчанию браузеры отображают текст ссылки синим цветом с подчеркиванием. [6, c.78]

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

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

экранного доступа.) Чтобы создать хороший текст ссылки, подумайте над тем, какие запросы станут использовать люди при поиске страницы с информацией, на которую вы ссылаетесь. Например, вместо текста наподобие «места, где можно переночевать», напишите что-то более конкретное, например, «гостиницы Москвы». [6, c.77]

Итак, указатель ссылки описывается парным тегом <А>, а адрес перехода реализован с помощью параметра HREF этого тега. Все, что находится между <А> и </А>, и является указателем ссылки или, как еще говорят, «гиперссылкой».

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

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

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

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

При этом относительный указатель будет работать по-другому, если в HTML-документе используется тэг <BASE>. Он располагается в начале документа в разделе HEAD и содержит URL-адрес, относительно которого в документе построена вся адресация. Это указание влияет на любой тэг документа, в котором используется относительная адресация. [1, c.112]

Ссылки на электронную почту

Для создания ссылки, которая запускала бы программу электронной почты, установленную на компьютере посетителя, и позволяла бы отправить электронное письмо на указанный вами адрес, вам нужно будет воспользоваться элементом <а>. Однако теперь значение атрибута href должно начинаться со слова mailto:, после которого необходимо указать адрес электронной почты, на который посетитель должен будет отправить свое письмо. На рисунке справа вы можете увидеть ссылку на электронную почту, которая выглядит как обычная ссылка, но при щелчке мышью по ней она запускает программу для отправки электронной почты и создает новое письмо, в адресной строке которого будет введен адрес, указанный вами при создании ссылки. [6, c. 84]

Открытие ссылок в новом окне

Чтобы создать ссылку, открывающую страницу в новом окне браузера, вы можете воспользоваться атрибутом target открывающего тега элемента <а>. Значение этого атрибута должно быть установлено в _ blank.

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

В обычной ситуации следует избегать открытия ссылок в новом окне, однако если вы используете этот прием, то будет не лишним заранее предупредить посетителя, что страница откроется в новом окне. [6, c. 85]

Ссылки создаются с помощью тега <A>, для обозначения адреса страницы, на которую указывает ссылка, используется атрибут href. Для создания ссылок на страницы собственного сайта лучше всего использовать относительные URL-адреса.

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

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

6. Списки

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

Упорядоченные списки — это списки, каждый элемент которых имеет порядковый номер.
Неупорядоченные списки — это списки, рядом с каждым элементом которых помещается маркер (а не цифровые или буквенные символы, обозначающие порядковый номер).
Списки определений состоят из набора понятий и сопровождающих их определений. [6, c. 64]

Упорядоченные списки (Нумерованные списки)

Одним из типов списков, реализованных в языке HTML, является нумерованный (упорядоченный) список. Последнее название произошло от формального перевода названия соответствующего тэга <OL>, с помощью которого и организуются списки такого типа в HTML-доку ментах (OL — Ordered List, упорядоченный список). Списки данного типа обычно представляют собой упорядоченную последовательность отдельных элементов. Отличием от маркированных списков является то, что в нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер. Вид нумерации зависит от браузера и может задаваться параметрами тэгов списка.

Каждый элемент нумерованного списка должен располагаться в отдельной паре тегов <LI>... </LI> (List Item — элемент списка). Хотя последнее время его применяют и как одиночный.

Открывающий и закрывающий тэги списка <OL> и </OL> обеспечивают отступ до и после списка, отделяя, таким образом, его от основного содержимого документа. [1, c. 77]

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

Иногда при просмотре существующих страниц вы будете встречать аргумент type в элементе <о1>, который используется для указания типа нумерации (буквы, римские и арабские цифры и т.п.). [6, c. 66]

Неупорядоченные списки (Маркированные списки)

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

Для разметки маркированных списков в HTML применяется тот же принцип, что и для нумерованных списков, только вместо дескриптора <OL> используется дескриптор <UL>. Как нетрудно догадаться его название происходит от английского «unordered list» — «неупорядоченный список».

Что получится, если в рассмотренном выше примере заменить дескриптор <OL> на <UL>? Нумерация исчезнет, а вместо цифр в начале каждой строки появятся характерные жирные точки.

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

В тэге <UL> может быть указан аналогичный параметр TYPE, используемый для задания типа маркера.

Конкретный вид маркера будет зависеть от используемого браузера.

Типичными вариантами отображения являются следующие:

TYPE = disc — маркеры отображаются закрашенными кружками;
TYPE = circle — маркеры отображаются не закрашенными кружками;
TYPE = square — маркеры отображаются закрашенными квадратиками. [1, c. 81]

Списки определений

Список определений создается с помощью элемента <dl> и, как правило, содержит набор понятий и их определений.

Внутри элемента <dl> вы зачастую сможете увидеть пары элементов <dt> и <dd>.

<dt> - используется для обозначения понятия (термина).

<dd> - используется для определения понятия.

Иногда вы можете столкнуться со списками, в которых два понятия имеют одно определение или где для одного понятия приводится несколько определений. [6, c. 68]

Вложенные списки

Внутри элемента <li> допустимо создание вложенного списка, или списка второго уровня.

Браузеры отображают вложенные списки с большим отступом по сравнению с основным, или родительским, списком. Кроме того, браузер, как правило, также изменяет вид маркеров вложенного неупорядоченного списка. [6, c. 69]

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

В качестве совета добавим, что при составлении сложных вложенных списков особое внимание следует уделять корректному указанию закрывающих тегов </UL> и </OL>. Для того чтобы не запутаться в разветвленной структуре HTML-кода вложенных списков, каждый последующий уровень вложенности лучше всего отделять от предыдущего небольшим отступом от левого края документа. [1, c. 82]

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

7. Таблицы

Табличное представление данных

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

Таблица состоит из строк, строки состоят из ячеек. Ячейки могут содержать текст и рисунки. Для добавления таблицы на Web-страницу используется тег <table>. Этот элемент служит контейнером для элементов <tr>, определяющих строки таблицы. Каждая строка служит контейнером для элементов <th> или <td>, определяющих ячейки. Содержимое элемента <th>, в отличие от <td>, выводится жирным шрифтом и выравнивается по центру. [2, c. 79]

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

Сетка помогает воспринимать большие объемы данных путем соотнесения их с подписями по обеим осям. Отдельный блок сетки называется ячейкой таблицы. С помощью языка HTML таблицы пишутся построчно. [6, c. 125]

Первая версия языка HTML не предусматривала специальных средств для отображения таблиц, так как была в основном предназначена для написания простого текста. С развитием сфер применения HTML-документов стала актуальной задача представления данных, для которых типично наличие ряда строк и столбцов. Создание документов, содержащих выровненные по колонкам данные, на первых порах осуществлялось использованием «преформатированного» текста, внутри которого необходимое выравнивание обеспечивалось введением нужного количества пробелов. Напомним, что текст внутри пары тэгов <PRE> и </PRE> выводится моноширинным шрифтом, и все пробелы и символы табуляции являются значащими. Работа по выравниванию такого текста выполнялась вручную, что существенно замедляло создание документов. Поддержка табличного представления данных стала стандартом де-факто, поскольку изначально была реализована во всех ведущих браузерах и лишь по прошествии значительного времени была закреплена в спецификации HTML 3.2. [1, c. 88]

<table>

Для создания таблиц используется элемент <table>. Контент таблицы описывается построчно. [6, c. 126]

Каждая таблица должна начинаться тэгом <TABLE> и завершаться тэгом </TABLE>. Внутри этой пары тэгов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются отдельные ячейки.

Для задания строк используется тег <TR> (от английского «Table Row» - строка таблицы), внутри которого расположены ячейки <TD> (от английского «Table Data» - данные, или содержимое таблицы). После того как встретится новый элемент TR, начнется описание следующей строки, и т. д. до конца таблицы (тега </TABLE>).

Завершающие коды </TR>, </TD> могут быть опущены. Однако все же рекомендуется их указывать для предотвращения ошибок, которые могут возникнуть при создании сложных вложенных таблиц. Завершающий тэг таблицы </TABLE> является обязательным. [1, c. 88]

<tr> - открывающий тег <tr> обозначает начало новой строки таблицы. После него помещаются элементы <td>, каждый из которых соответствует отдельной ячейке в этой строке. Конец строки обозначается закрывающим тегом </tr>.

<td> - каждая ячейка таблицы должна быть представлена элементом <td>. Конец ячейки обозначается закрывающим тегом </td>. Некоторые браузеры автоматически создают линии вокруг таблиц и/или ячеек. [6, c. 126]

Элемент <th> используется точно так же, как и элемент <td>, однако его назначение — создание заголовка строки или столбца.

Помните, что даже если ячейка не содержит данных, то вы все равно должны представить ее пустым элементом <td> или <th>, в противном случае таблица будет некорректно отображена в браузере. Употребление элемента <th> помогает людям, использующим программы экранного доступа, улучшает результативность индексирования таблиц поисковыми системами, а еще этот элемент помогает управлять оформлением таблиц при использовании CSS. Как правило, браузеры выделяют полужирным шрифтом содержимое элемента <th> и выравнивают его по центру ячейки. [6, c. 127]

Отображение рамок и их цвет (границы и заливка)

Итак, для того чтобы отобразить линии сетки таблицы, и вокруг всей таблицы необходимо указать параметр BORDER для тега <TABLE>. Можно указать просто BORDER или задать ему численное значение.

Например, <TABLE BORDER> или c TABLE BORDER=3>.

Численное значение параметра определяет толщину рамки в пикселях, рисуемую вокруг всей таблицы, однако на толщину рамок вокруг каждой ячейки это значение не влияет. При отсутствии численного значения оно принимается равным 1. Расположить ячейки как можно ближе друг к другу возможно заданием BORDER=0, что означает отсутствие рамок. Это значение и принято по умолчанию. Возможность независимого управления отображением рамки вокруг всей таблицы и рамками вокруг ячеек пока отсутствует.

По умолчанию рамка черно-серая, для того чтобы изменить ее цвет используется параметр BORDERCOLOR. Значение указывается в шестнадцатеричном формате (например, #FFCCOO), раскладке rgb (например, rgb( 100,200,4)) или в виде наименования (например, green).

Если в ячейке ничего нет, то рамки вокруг нее тоже не будет, как ни старайтесь. Для того чтобы ячейка выглядела пустой, но имела рамку, нужно «положить» в нее нечто невидимое. Как правило, такими «невидимыми» объектами являются неразрывный пробел   тег принудительного переноса строки <BR> или прозрачный GIF-файл размером 1x1 пиксель. [1, c. 90]

Атрибут border используется с элементами <table> и <th> для установки ширины границы в пикселах.

Атрибут bgcolor используется для установки цвета всей таблицы либо отдельных ячеек. Его значением, как правило, является шестнадцатеричный код цвета. В этом примере мы не использовали CSS, только атрибуты border и bgcolor языка HTML. При создании нового сайта для настройки оформления таблиц рекомендуется использовать CSS, а не эти атрибуты. [6, c. 133]

Выравнивание таблицы и элементов в ячейках таблицы

Стандарт HTML позволяет задать горизонтальное

выравнивание всей таблицы относительно ширины HTML-документа. За это отвечает аналогичный работе с текстом и картинками параметр ALIGN.

Существует три возможных значения параметра ALIGN:

align="left" - выравнивание таблицы по левому краю документа. Значение принято по умолчанию и в случае отсутствия параметра ALIGN таблице будет присвоено именно это значение;
align="right" - выравнивание таблицы по правой границе документа;
align="center" — центрирование таблицы относительно ширины документа.

Помимо функции выравнивания таблицы по горизонтали документа, параметр ALIGN позволяет получать эффект «обтекания» таблицы текстом аналогично «обтеканию» рисунков.

Для получения такого эффекта нужно выбрать тип выравнивания таблицы (в данном случае, кроме центрирования), назначить ширину таблицы менее 100% или зафиксировать ее (подробнее об изменении параметра ширины таблицы будет рассказано чуть позже). Текст, который должен огибать таблицу, размещается сразу же после закрывающего тега </TABLE>. [1, c. 92]

Каждую отдельную ячейку внутри таблицы можно рассматривать как область для независимого форматирования. Все правила, которые действуют для управления отображением текста, могут быть использованы для форматирования текста внутри ячейки. Внутри ячейки допустимо использование практически всех элементов HTML, которые могут появляться внутри тела документа <BODY>, в том числе тэги, управляющие расположением текста - <р>, <BR>, <HR>, коды заголовков — от <Н1> до <Н6>, тэги форматирования символов — <В>, <I>, <STRONG>, <BIG>, <ЕМ>, <FONT SIZE>, <FONT COLOR>, тэги вставки графических изображений <IMG>, гипертекстовых ссылок <А> и т. д. [1, c. 93]

Размеры таблицы и ячеек

Для того чтобы вид страницы не так сильно зависел от размеров окна браузера, в дескрипторе <TABLE> задают минимальную ширину и высоту таблицы. Для этого используются параметры WIDTH и HEIGHT, соответственно. Габариты задаются как в абсолютных значениях (в пикселях), так и в относительных (в процентах от ширины окна).

Расстояние между ячейками и внутренние отступы

Для того чтобы понять, что такое расстояние между ячейками присмотримся внимательнее к Web-таблицам. В отличие от других, знакомых нам таблиц, их рамки двойные — каждая ячейка как бы заключена в собственное «окошко». Между соседними «окошками» обычно имеется некий зазор.

Ширину этого зазора по вертикали и горизонтали определяет параметр CELLSPACING. Значение параметра указывается в пикселях, и по умолчанию равно нулю. При конструкции CELLSPACING="O" ячейки таблицы сольются. [1, c. 96]

Объединение столбцов

Атрибут colspan может быть использован с элементами <th> и <td> для обозначения, сколько столбцов должна занимать ячейка.

Длинные таблицы

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

<thead> - заголовки таблицы должны быть помещены в элемент <thead>.

<tbody> - основное содержимое (тело) таблицы должно находиться внутри элемента <tbody>.

<tfoot> - последняя, завершающая, строка таблицы должна быть указана внутри элемента <tfoot>. [6, c. 130]

В этой главе мы рассмотрели, как добавить на HTML документ (страницу) таблицы. Для их добавления используется тег <table>. Таблица размещается на странице построчно. Каждая строка создается с помощью тега <tr>. Внутри каждой строки есть несколько элементов <td>, представляющих ячейки (или тегов <th>, если данная строка — это шапка таблицы). Рассмотрели, как можно форматировать таблицу и данные в ячейках.

ЗАКЛЮЧЕНИЕ

За время выполнения курсовой работы были изучены основы программирования на языке HTML и история его появления. Были рассмотрены его возможности и спецификации. Изучена структура HTML документов, теги, формирующие документ и их свойства. Рассмотрены основные принцы форматирования текста и вывода графики. Изучены списки и гиперссылки, которые помогают сделать удобными и интерактивными страницы сайтов. А также изучили как формируются таблицы и табличный вывод данных. Данная работа представляет минимальны набор знаний что бы получить представление о языке HTML и позволит создать свою первую страничку в интернете.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

Пархимович, М.Н. Основы интернет-технологий: учебное пособие / М.Н. Пархимович, А.А. Липницкий, В.А. Некрасова; Сев. (Арктич.) федер. ун-т. - Архангельск: ИПЦ САФУ, 2013.-366 с.
Костюк А.И., Гушанский С.М., Поленов М.Ю., Катаев Б.В. Информационные технологии. HTML и XHTML: учебное пособие. - Таганрог: Изд-во ЮФУ, 2015. - 131 с.
Диков А. В. Веб-технологии HTML и CSS (Учебное пособие). — М.: Директ-Медиа, 2012.
Лоусон Б., Шарп Р. Изучаем HTML5. Библиотека специалиста. 2-е изд. —СПб.: Питер, 2012.
Лекции по современным веб-технологиям/ Л.В. Кузнецова - М.: Национальный Открытый Университет "ИНТУИТ", 2010
Дакетт Д. HTML и CSS. Разработка и дизайн веб-сайтов / Джон Дакетт; [пер. с англ. М. А. Райтмана]. - М.: Эксмо, 2017