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

Основы программирования на языке HTML (Язык HTML и его назначение).

Содержание:

Введение

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

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

Объект исследования: веб-сайт.

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

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

Задачи:

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

Методы исследования: изучение литературы, анализ, синтез, классификация, обобщение и моделирование.

Глава 1. Язык гипертекстовой разметки HTML как средство создания гипертекстовых документов

Язык HTML и его назначение

Язык HTML (Hyper Text Markup Language) – язык разметки гипертекста. Этот язык был разработан Тимом Бернерсом-Ли в рамках создания проекта распределённой гипертекстовой системы, которая была названа World Wide Web (WWW) или Всемирная паутина. HTML предназначен для написания гипертекстовых документов, публикуемых в World Wide Web. Опыт создания веб-сайтов показывает, что овладение базовым языком HTML намного упрощает процесс создания сайтов. Он так же расширяет возможности дальнейшего применения специализированных пакетов прикладных программ (ППП) и редакторов. Язык HTML является основой построения сайтов. В этом языке нет особых сложностей. Обыкновенный текст заключается в теги, что позволяет браузеру отображать набранную страницу. [9,c.3]

Цель языка HTML заключается в обеспечении смысла и структуры контента. Этот язык не предназначен для создания инструкции о том, как должен выглядеть контент документа (его представления) [8,с.76]

Большинство документов имеют стандартные элементы, такие, как заголовок, параграфы или списки. Используя тэги HTML вы можете обозначать данные элементы, обеспечивая WEB-браузеры минимальной информацией для отображения данных элементов, сохраняя в целом общую структуру и информационную полноту документов. Все что необходимо, чтобы прочитать HTML-документ - это WEB-браузер, который интерпретирует тэги HTML и воспроизводит на экране документ в виде, который ему придает автор. [15]

HTML описывает браузеру структуру документа: где заголовки, где начинаются новые абзацы, какой текст нужно подчеркнуть и т. д. Получив эту информацию, браузер использует встроенные в него по умолчанию правила о том, как отображать каждый из этих элементов. [11, с.40]

Структура Web-страницы и Web-сайта

Информация, доступная пользователям Internet, располагается на компьютерах (Web-серверах), на которых установлено специальное программное обеспечение. Значительная часть этой информации организована в виде Web-сайтов. Почти каждый сайт имеет пользовательскую и серверную часть. Пользовательская (или клиентская) часть (англ. frontend) строится на html-разметке, css-стилях и javascript-е. HTML нужен для отображения контента сайта: тексты, заголовки, изображения, таблицы, текстовые блоки, нумерованные и ненумерованные списки.[1, c.41]

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

Клиентская часть - это графический интерфейс. Это то, что видит пользователь на странице.

Графический интерфейс отображается в браузере. Пользователь взаимодействует с веб-приложением именно через браузер, создавая запросы (переход по ссылкам и т. д.). Запросы обрабатываются на стороне пользователя, как правило, через браузер. Результат выполнения программы или скрипта зависит от браузера пользователя и может по-разному выполняться на разных его версиях. Серверная часть веб-приложения - это программа или скрипт на сервере, обрабатывающая запросы браузера, который использует пользователь. При каждом переходе пользователя по ссылке браузер отправляет запрос к серверу. Сервер обрабатывает этот запрос, вызывая некоторый скрипт, который формирует веб-страничку, описанную языком HTML, и отсылает клиенту по сети. Браузер тут же отображает полученный результат в виде очередной веб-страницы. [1, c.42]

Страница на которую попадает пользователь, когда вводит www-адрес (или URL) данного сайта, должен называться index.html или welcome.html. Остальные страницы сайта (если они есть) могут иметь произвольные имена (но обязательно без символа «#» и состоящие из латинских букв, иначе могут возникнуть проблемы при их размещении на сервере), а пользователь будет попадать на них по ссылкам с основной страницы. Содержимое файла Web-страницы заключается в тег <HTML> . . .</HTML> - это указывает браузеру, что текст представляет собой HTML-документ, содержит в себе теги, которые браузер должен выявить, распознать и правильно интерпретировать. Внутри этого контейнера обычно располагаются только листинги скриптов, если они имеются на данной странице. [6, c.25]

Язык HTML всегда развивался в ходе дискуссии между разработчиками браузеров, авторами Web-страниц, разработчиками стандартов и другими людьми, которые сначала заинтересовались этим "разговором об угловых скобках", а потом и включились в него сами. Большинство успешных версий HTML представляют собой "ретроспецификации", стремящиеся одновременно актуализировать все то, что к моменту их выхода стало фактическим стандартом, и одновременно задать правильное направление дальнейшего развития. [7, c.31]

Интернет — страница обычно состоит из двух частей: заголовка (HEAD) и тела (BODY). Эта базовая структура в простейшем виде, ее можно наглядно показать.

<HTML> Начало тега HTML – документа

<HEAD> Начало тега заголовка

<TITLE> начало тега строки — названия страницы

… строка названия страницы

</TITLE> конец тега строки — названия страницы

</HEAD> конец тега заголовка

<BODY> начало тега тела страницы

… тело (всё содержимое) страницы

</BODY> конец тега тела страницы

</HTML> конец тега HTML – документа

Таким образом, чтобы превратить имеющийся текст в готовую Web-страницу, достаточно лишь заключить весь этот текст в тег <BODY>, добавить сверху строку-название, заключённую в «двойной» тег <HEAD><TITLE>… </TITLE> <HEAD/>, а потом всё это заключать в общий тег <HTML> … </HTML>, тогда браузер воспринимает такую запись совершенно правильно и выдаёт в своём окне необходимый текст.

Чтобы создать страницу, следует сначала использовать эти теги.

Указанная строка-название будет выводиться в заголовке окна браузера, когда данная страница будет в нём просматриваться, а также (уже после размещения этой страницы в Интернете) в списках, выдаваемых поисковыми серверами, и в списке «Избранное» браузера, если эта страница будет туда помещена. [6, c.25]

Вывод к первой главе

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

Глава 2. Создание Web- страниц с помощью языка HTML

Для того, чтобы сайт был удобен в использовании, нужно начинать с основ языка HTML, иными словами создавать сайт с нуля. Сейчас помимо HTML созданы другие языки программирования, на основе которых строиться основная часть сайтов, например PHP, PITON и т. п. В использовании они просты и удобны, избавляют от рутинной деятельности. Но для того, чтобы пользоваться этими языками программирования со стороны сервера, создавать сайты автоматически, нужно изучит HTML. [9, c.3]

2.1. Размещение и оформление текста

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

Для разработки web-страниц сайта можно использовать следующие инструментальные средства.

1) Текстовые редакторы для работы с “чистым” HTML-кодом. Поскольку HTML-документ представляет собой текстовый файл, его можно подготовить в простейшем текстовом редакторе, например, в блокноте (notepad), но при этом все команды разметки придется вводить вручную.

2) Программные средства, которые имеют специальные встроенные компоненты для конвертирования данных, созданных в этих продуктах, в HTML формат. Например, программы широко используемого пакета MS Office, начиная с версии 97, позволяет сохранить документ в формате HTML. При этом сохраняются, насколько это возможно, особенности форматирования символов и абзацев, изображения, таблицы, списки и так далее. Многие современные графические редакторы предоставляют возможность сохранить коллекцию картинок в виде HTML-документа. Надо отметить, что при таком конвертировании исходный текст HTML-документа получается крайне избыточным и нуждается в коррекции.

3) Специализированные программные средства - web-редакторы, предназначенные специально для разработки web-сайтов.

Применение современного программного обеспечения при разработке web-сайтов [3, c.26]

Основные положения

Основу HTML-документов составляют обычные текстовые файлы, отдельные символы в которых представлены в ASCII-кодировке. Эти файлы доступны для просмотра и редактирования в любом редакторе текстов. Отличием HTML-издания от обычного текста является то, что в нем присутствуют специальные команды - теги, которые указывают правила форматирования документа. Недостатком этого формата является чувствительность к используемым в издании шрифтам: отсутствие нужного шрифта на пользовательском компьютере вызывает затруднения при просмотре документа, связанные с необходимостью замены отсутствующей шрифтовой гарнитуры. [12,c.119]

Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа: <TITLE> Заголовок документа </TITLE>

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

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

HTML не реагирует на регистр символов, описывающих тэг, и приведенный ранее пример может выглядеть следующим образом: <title> Заголовок документа </title>

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

Структура документа

Когда WEB-браузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом <HTML>. Данный тэг сообщает WEB-браузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ будет выглядеть так: <HTML> ...тело документа... </HTML> [15]

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

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

Рассмотрим общие принципы структурного форматирования текста, а затем перейдем непосредственно к управлению его внешним видом. Для начала разберем, как создать заголовок сайта. [10, c.40]

Заголовки

Заголовки – важный элемент сайта, они помогают систематизировать текст. В HTML доступно создание заголовков разных уровней, поэтому очень легко выделять смысловые темы и подтемы. Текст, присутствующий в заголовках, влияет на индексацию сайта поисковыми системами, так как многие работы при поиске обращают внимание на содержимое заголовков, имеющихся на сайте. [4, c.61]

Фактически в HTML существует шесть уровней заголовков, от h i до h6. Когда вы добавляете к контенту заголовки, браузер использует их для формирования структуры документа страницы. Вспомогательные устройства, такие как программы экранного доступа, используют структуру документа, чтобы помочь пользователям быстро просматривать страницу и перемещаться по ней. Кроме того, поисковые системы рассматривают уровни заголовка как часть написанных для них алгоритмов (информация в заголовках высших уровней имеет больший вес). В силу этих причин рекомендуется начать с заголовка l-ro уровня (h i) и двигаться вниз по порядку (см. примечание), создавая логическую иерархию или структуру документа.[8, c.90]

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

left — по левому краю;

right — по правому краю;

center — по центру;

justify — по ширине (для заголовков длиннее строки).

Для заголовков можно задать атрибут TITLE, значение которого — «текст всплывающей подсказки» (той всплывающей подсказки, которая появляется при наведении курсора мыши на заголовок).

В листинге 1.17 представлен пример кода для создания разных типов заголовков и для различного вида выравнивания.

Листинг 1.17. Заголовки

<html>

<head>

<title>Создание заголовков</title>

</head>

<body>

<h1 align="center">Заголовок 1 уровня</h1>

<h2 align="justify">Заголовок 2 уровня</h2>

<h3 align="left">Заголовок 3 уровня</h3>

<h4 align="right">Заголовок 4 уровня</h4>

<h5>Заголовок 5 уровня</h5>

<h6 title="заголовок 6 уровня">Заголовок 6 уровня</h6>

</body>

</html>

При отображении заголовок всегда начинается с новой строки и после него всегда начинается новая строка (это отделяет заголовок от остального текста).

Для управления другими элементами отображения заголовков, например: цветом или шрифтом, используется язык CSS. Поэтому в тегах <H1…6> разрешается использовать атрибуты STYLE и CLASS, которые подключают стили.

После того как вы создадите заголовки, можно добавить к ним обычный текст, который надо логически разбить на абзацы. [10, c.40]

Абзацы

Основная функция абзацев состоит в том, чтобы без изменения выдерживать создаваемую автором уникальную структуру текста. Например, на части делятся журналы, книги, газеты и разделы в колонках. Таким же образом структурируются тексты и в HTML. Благодаря этому они приобретают более понятную логическую структуру, которая не только становится удобна для восприятия, но и корректно отображается в браузерах. Разделение фрагментов текста в HTML выполняется при помощи тегов, в результате чего по вертикали появляется небольшой отступ (отбивка) между абзацами. [28]

Чтобы выделить абзац в HTML, мы используем не «Enter», а тег <р>. Абзац начинается с открывающегося тега и заканчивается закрывающимся тегом </p>. [26]

Для управления внешним видом текста абзацев используются в основном таблицы стилей. Однако незначительно текст можно отредактировать с помощью HTML. Для тега <P> можно задать атрибут, определяющий выравнивание, — ALIGN. Этот атрибут может принимать несколько значений. Значения атрибута ALIGN следующие.

center — выравнивание по центру. При таком виде выравнивания текст располагается в центре экрана, образуя неровные края. Не стоит использовать это выравнивание для текстов больших объемов, поскольку читать такой текст неудобно;

left — выравнивание по левому краю.

right — выравнивание по правому краю.

justify — выравнивание по ширине.

Кроме выравнивания для абзаца, можно задать текст всплывающей подсказки,

которая появляется при наведении указателя мыши на текст. Подсказка создается

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

Листинг 1.18. Создание абзацев

<html>

<head>

<title>Абзацы</title>

</head>

<body>

<p align="center" title="Абзац, выровненный по центру">Это небольшой заголовочный абзац, выровненный по центру</p>

<p align="right" title="Абзац, выровненный по правому краю">Здесь эпиграф</p>

<p align="left" title="Абзац, выровненный по левому краю">Этот абзац с текстом выровнен по левому краю, поэтому края с правого края будут рваными</p>

<p align="justify" title="Абзац, выровненный по ширине">Этот абзац с основным текстом, выровненный по ширине. Края этого абзаца прилегают к краям окна

браузера.</p>

</body>

</html>

Для дальнейшего оформления текста абзацев применяются каскадные таблицы стилей. Тег <P> позволяет использовать атрибуты STYLE и CLASS.[10, c.40]

Обрывы строк

Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца <p>, использование тега <br> не добавляет пустой отступ перед строкой. Если текст, в котором используется перевод строки, обтекает плавающий элемент, то с помощью атрибута clear тега <br> можно сделать так, чтобы следующая строка начиналась ниже элемента.[17]

Он не требует закрывающего тега, однако рекомендуется записывать его как <BR />, чтобы все программы отображали его корректно.

Листинг 1.19. Обрыв строки

<html>

<head>

<title>Обрыв строки</title>

</head>

<body>

Наша Таня громко плачет,<br />

Уронила в речку мячик.<br />

</body>

</html>

Есть еще один вариант применения тега <BR>. Его используют, когда надо задать обтекание текстом таблицы, изображения или любого другого плавающего элемента страницы (то есть элемента, для которого задан атрибут ALIGN). Для этого применяется атрибут CLEAR. Значения атрибута CLEAR следующие:

all — запрещает обтекание элемента с двух сторон;

left — запрещает обтекание с левой стороны плавающего объекта, расположенного после тега;

right — запрещает обтекание с правой стороны плавающего объекта, расположенного после тега;

none — отменяет свойство.

Если обтекание запрещено, то текст, следующий за тегом <BR>, будет отображаться на строке после плавающего объекта.

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

то есть гарантировать, что текст ни в коем случае не будет переноситься на новую

строку. Для создания таких неразрывных строк используется тег <NOBR>, который

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

В некоторых случаях строка может оказаться очень длинной и неудобной для

чтения, поэтому внутри тегов <NOBR> можно использовать тег <WBR>, который

указывает на место возможного переноса строки.

Листинг 1.20. Запрет переноса строки

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Обрыв строки</title>

</head>

<body>

<nobr>Это очень важная строка, ее ни в коем случае нельзя переносить на

другую строчку, однако в этом месте <wbr> возможно сделать перенос.</nobr>

</body>

</html>[10, c.40]

Ссылки

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

Обычные ссылки (<a href>) просто указывают на другую страницу. Отношения ссылок предоставляют способ объяснить, почему вы указываете на другую страницу. Эти слова дают один из следующих вариантов завершения предложения "я ссылаюсь на другую страницу, потому что ..."

...она представляет собой таблицу стилей, которая содержит правила CSS, которые ваш браузер должен применить к этому документу;
...это канал (feed), который содержит ту же информацию, что и данная страница, но в стандартном формате, на который возможна подписка;
...это перевод данной страницы на другой язык;
...она содержит ту же информацию, что и данная страница, но в формате PDF;
...это следующая глава онлайновой книги, частью которой является и данная страница. [7, c.31]

Между собой ссылки различаются на внешние и внутренние, а также на текстовые и графические. Внешние ссылки ведут за «пределы» html-страницы, внутренние на различные части этой же страницы. Текстовые ссылки представляют из себя текст (по-умолчанию, он выделен синим цветом и подчёркнут), а графические, в качестве объекта, по которому нужно щелкнуть для перехода, содержат какую-либо картинку. Все эти разновидности ссылок создаются в HTML с помощью тега < A>< /A> (сокращение от англ. anchor — якорь). Рассмотрим его поподробнее.[33]

Внешние ссылки

Основой внешних ссылок является URL-адрес объекта, на который вы хотите сослаться. Для создания ссылок в HTML служит тег <A>, который требует закрывающий тег. В блоке этих тегов располагается текст или другой объект, который будет выделяться как ссылка. На самом деле для того, чтобы сообщить человеку, что в каком-то месте сайта расположена ссылка, совершенно не обязательно писать адрес страницы. Язык HTML дает возможность «замаскировать» адрес под текст ссылки, который описывает, что увидит пользователь, перейдя по ней. Отдельно находится адрес страницы, на которую вы попадете при щелчке кнопкой мыши на ссылке.

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

Листинг 1.28. Создание ссылок

<html>

<head>

<title>Ссылки</title>

<body>

</body>

</html>

Текст ссылки, как правило, отображается подчеркнутым, а при наведении на ссылку курсор меняет вид. Когда посетитель сайта щелкнет кнопкой мыши на ссылке, он перейдет на страницу, которая указывается в качестве адреса ссылки. [10, c.56]

Внутренние ссылки

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

Чтобы создать такую ссылку, сначала нужно определить место, к которому ссылка приводит. Это делается с помощью атрибута name элемента A. Необходимый кусок текста заключается в элемент A. Хотя совершенно не обязательно помещать туда текст, можно просто установить теги этого элемента в месте, к которому браузер должен переходить при щелчке кнопкой мыши на ссылке.

В качестве значения атрибута name можно взять любое имя, желательно, чтобы оно характеризовало текущее место, так вам самим будет проще пользоваться метками.[4,c.77]

Затем надо создать ссылку на эту метку. Ссылка на внутреннюю метку создается

так же, как и ссылка на внешний документ, только вместо URL-адреса желаемой

страницы надо ввести адрес метки в таком виде: #met1, где met1 — имя метки. При щелчке кнопкой мыши на ссылке браузер автоматически перейдет к месту,

указанному меткой.

Листинг 1.29. Внутренние ссылки

<html>

<head>

<title>Ссылки</title>

<body>

<a name="met2">Это метка для перехода 2</a><br />

<a href="#met1">Кликните для перехода к метке 1</a><br />

<a href="#met2">Кликните для перехода к метке 2</a><br />

<a name="met1">Это метка для перехода 1</a>

</body>

</html> [4, c.78]

Общие моменты при создании внешних и внутренних ссылок.

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

Первый атрибут - target (от англ. "target" ‒ «цель, мишень») указывает место (фрейм или окно браузера) в которое должен быть загружен, указанный в гиперссылке документ.[31]

Значения атрибута TARGET следующие:

_blank — страница открывается в новом окне браузера;

_parent — страница загружается во фрейм-родитель;

_self — страница загружается в текущее окно;

_top — страница загружается в полное окно браузера.

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

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

Листинг 1.30. Ссылки с дополнительными атрибутами

<html>

<head>

<title>Ссылки</title>

<body>

<a href="aboutme.html" target="_blank" title="Пройдя по ссылке, вы сможете

узнать обо мне">Обо мне</a>

</body>

</html> [4, c.79]

Форматирование текста

Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста.[18]

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

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

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

логические, так и физические теги.

Разберем подробнее теги форматирования текста. Начнем с рассмотрения логических тегов.

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

Теги логического форматирования определяют не внешний вид текста, а его тип,

в зависимости от которого браузер применяет тот или иной вид внешнего форматирования. Все рассматриваемые ниже теги являются контейнерами и требуют

закрывающий тег. Тег <ABBR> определяет текст как аббревиатуру с помощью атрибута TITLE [4,c.81]

Практически ко всем тегам применим атрибут title - всплывающая подсказка, так вот если Вы в тексте выделяете некую аббревиатуру, старайтесь давать к ней расшифровку, используя данный атрибут.[34]

Пример:

Тег <ACRONYM> указывает, что текст является акронимом.

Тег <CITE> отмечает небольшую цитату или сноску, взятую из другого источника.

Тег <CODE> указывает на программный код, который может содержать, например, переменные, функции или небольшие куски программы. Такой текст обычно выводится моноширинным шрифтом. [4,c.82]

Тег <DEL> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. Браузеры обычно помечают текст в контейнере <del> как перечеркнутый.[20]

TZD — это указатель часового пояса. Он может принимать два типа значений. Первый тип значений — это указатель Z, указывающий, что время задается относительно нулевого часового пояса (иначе говоря, он обозначает время UTC — Coordinated Universal Time, универсальное время). Второй тип значений имеет формат +чч.мм или –чч.мм, который задает сдвиг вперед (+) или назад (–) указанного времени относительно времени UTC. Браузеры отображают такой текст как зачеркнутый.

Тег <DFN> выделяет текст как определение. Этот тег можно использовать, если новый термин встречается в тексте впервые и тут же дается его определение. Браузер отображает такой текст курсивом.[10, c.62]

Тег <INS> Тег <ins> в HTML указывает фрагмент текста, который был добавлен в новой версии документа (ранее его не было). Причина добавления/изменения фрагмента может содержаться в документе указанном в атрибуте cite тега <ins>, а дата/время добавления - в атрибуте datetime.[32]

Браузеры такой текст отображают как подчеркнутый.

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

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

Тег <SAMP> определяет выделенный текст как пример, обычно используется для

выделения результатов работы программы. Браузер выделяет этот текст моноширинным шрифтом.

Тег <STRONG> предназначен для постановки акцента на тексте. Такой текст браузеры выделяют полужирным шрифтом.

Тег <VAR> используется для выделения переменных из программ. Браузер отмечает такой текст курсивом. [4,c.84]

2.2. Вставка изображения в документ

Для добавления изображения в документ применяется тег <img>, его атрибут src определяет путь к графическому файлу, который должен быть в формате GIF, PNG или JPEG. Также для тега <img> необходимо указать обязательный атрибут alt, он описывает альтернативный текст видимый в процессе загрузки изображения или при отключении картинок в браузере. [19]

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

Для встраивания изображений в HTML-документ применяется тег <IMG>. Его

обязательный атрибут — атрибут SRC, значением которого является адрес встраиваемого изображения.

Простейший вариант записи для включения картинки выглядит следующим

образом: <IMG SRC="image.jpg">

При такой записи размер картинки на экране будет соответствовать ее реальному

размеру. [10,c.89]

Размер изображения

Если необходимо изменить размер изображения, то лучше воспользоваться специальными программами. В случае, когда размер изображения изменяется незначительно, допустимо применять атрибуты тега <IMG>. [4, c.114]

Если для элемента <img> не задать атрибуты width и height, то браузер самостоятельно определит ширину и высоту изображения после загрузки файла и покажет его в исходном размере. Рисунок в формате SVG браузеры, за исключением IE, выводят на всю доступную ширину.

Изменение масштаба и пропорций изображения делается как через атрибуты <img>, так и через стили.[35]

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

Листинг 1.46. Задание размеров изображения

<html>

<head

<title>Встраивание изображения</title>

</head>

<body>

Задана только ширина в пикселах <br />

Задана ширина в процентах<br />

Ширина и высота заданы непропорционально (изображение искажается)<br />

</body>

</html>

В листинге 1.46 для первого изображения задается только ширина, а высота вычисляется автоматически, для второго изображения размер определяется в процентах, а для третьего изображения устанавливаются неверные размеры, которые искажают картинку. Если изменять размеры не нужно, то следует задать размеры картинки, соответствующие реальности, или вовсе их не указывать. Это позволит избежать искажений и ускорит обработку картинки браузером. [4,c.115]

Выравнивание изображения

Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается атрибутом align тега <img>. [21]

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

Горизонтальное выравнивание:

left — по левому краю;

right — по правому краю.

Вертикальное выравнивание:

top — выравнивание верхней границы картинки по самому высокому элементу

строки;

texttop — выравнивание верхней границы картинки по самому высокому

элементу текста;

middle — середина изображения выравнивается по базовой линии строки;

absmiddle — середина изображения выравнивается по середине строки;

baseline и bottom — нижняя граница изображения выравнивается по базовой

линии строки;

absbottom — нижняя граница изображения выравнивается по нижней границе текущей строки. [10,c.91]

Листинг 1.47. Выравнивание картинки по вертикали

<html>

<head>

<title>Встраивание изображения</title>

</head>

<body>

<img src="image.jpg" width="70" align="top"/>Выравнивание по самому верхнему элементу в строке<br />

<img src="image.jpg" width="70" align="absbottom"/>Нижняя граница изображения выравнивается по нижней границе текущей строки<br />

<img src="image.jpg" width="70" align="bottom"/>Нижняя граница изображения

выранивается по базовой линии строки<br />

<img src="image.jpg" width="70" align="middle"/>Середина изображения выравнивается по базовой линии строки<br /> </body>

</html>

Листинг 1.48. Выравнивание картинки по горизонтали

<html>

<head>

<title>Встраивание изображения</title>

</head>

<body>

<img src="image.jpg" width="100" align="right" />. [4,c.118]

Рамка вокруг изображения

Изображение можно отделить от текста рамкой. Делается это с помощью атрибута BORDER, значение которого указывает ширину рамки в пикселах. [4,c.118]

По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется. [22]

Листинг 1.49. Задание рамки вокруг изображения

<html>

<head>

<title>Встраивание изображения</title>

</head>

<body>

<img src="image.jpg" width="100" align="right" vspace="10" hspace="10"

border="20"/>текст

</body>

</html> [4,c.119]

Альтернативный текст

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

Листинг 1.50. Альтернативный текст

<html>

<head>

<title>Встраивание изображения</title>

</head>

<body>

<img src="image.jpg" width="100" align="right" vspace="50" hspace="50"

alt="Фотография кошки"/>

</body>

</html>

Альтернативный текст появляется при наведении указателя мыши на картинку.

Вместо картинки отображается поясняющий текст, а при наведении курсора на

изображение появляется всплывающая подсказка.[10.c.96]

2.3. Работа с таблицами

В HTML-документах можно задавать таблицы. Каждая таблица должна начинаться тегом <table>, а если для таблицы требуется внешняя рамка, то с параметром border (возможны варианты: border или border=ширина_рамки), и заканчиваться тегом </table>.

Таблицы задаются построчно. Каждая строка начинается тегом <tr> и заканчивается тегом </tr>. Каждая графа (т.е. ячейка, клетка) в строке с данными должна начинаться тегом <td> и заканчиваться тегом </td> (этот тег необязателен, но желателен). При этом ширина столбцов подбирается автоматически по максимальной ширине одной из клеток столбца. [5,c.424]

Ячейки таблицы

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

<body>

<table>

</table>

</body>

HTML тег <th> (table header) применяется в таблицах внутри тегов <tr> для создания заголовочной ячейки. Текст введенный в заголовочную ячейку по умолчанию отображается жирным шрифтом и выравнивается по центру ячейки. [4,c.125]

Содержимым тега <th> может быть все, что можно поместить в тело HTML-документа, включая изображения, текст, формы, ссылки и тд. и даже другие таблицы. Браузер автоматически создаст таблицу нужного размера для корректного отображения содержимого всех ячеек.[30]

Например, запись <TH> Текст заголовка </TH> приведет к форматированию текста внутри тега полужирным шрифтом.

Листинг 1.39. Код простой HTML-таблицы, состоящей из трех строк и трех столбцов

<html>

<head>

<title>Простая HTML-таблица</title>

<head>

<body>

<table>

<caption>Это заголовок таблицы</caption>

<tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>

<tr><td>Ячейка 2x1 </td><td>Ячейка

2x2 </td><td>Ячейка 2x3 </td></tr>

<tr><td>Ячейка 3x1 </td><td>Ячейка

3x2 </td><td>Ячейка 3x3 </td></tr>

</table>

</body>

</html>[10,c.75]

Границы таблицы

В рассмотренном выше примере таблица и ячейки не имеют видимых границ. Граница таблицы создается при помощи атрибута border тега <table>. Ширина границы указывается в пикселах. Если атрибут border не указан, то таблица выводится без видимой рамки. Атрибут bordercolor позволяет задать цвет границы таблицы, указав код цвета. Добавим к уже созданной таблице границу черного цвета шириной четыре пиксела. Для этого заменим строку <table> на <table border="4" bordercolor="#000000">

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

Листинг 1.40. Код HTML-таблицы с нестандартными расстояниями между ячейками

и границей

<html>

<head>

<title>Простая HTML-таблица</title>

<head>

<body>

<caption>Это заголовок таблицы</caption>

<tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>

<tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>

<tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>

</table>

</body>

</html>

Атрибут frame — определяет, какие стороны рамки окружающей таблицу, будут видны. Возможные значения: [27]

rules. Атрибут frame может принимать следующие значения:

Above — отображается только верхняя линия границы;

Below — отображается только нижняя линия границы;

Box или Border — отображается только внешняя граница таблицы;

Hsides — отображаются только горизонтальные линии границы;

Lhs — отображается только левая линия границы;

Rhs — отображается только правая линия границы;

Void — внешняя граница таблицы не отображается;

Vsides — отображаются только вертикальные линии границы.

Frame и rules — это новые атрибуты в HTML, которые поддерживаются только последними версиями браузеров. Атрибут rules может иметь следующие значения:

All — отображается граница вокруг каждой ячейки;

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

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

None — границы между ячейками не отображаются;

Rows — отображаются только горизонтальные границы между группами строк.

Листинг 1.41. Код HTML-таблицы с частичным отображением линий внешней и внутренней границ

<html>

<head>

<title>Простая HTML-таблица</title>

<head>

<body>

<table border="4" bordercolor="#000000" cellspacing="0" cellpadding="10"

frame= Hsides rules= Cols>

<caption>Склонение слова пиксел по падежам </caption>

<tr><th>Падеж</th><th>Пример </th></tr>

<tr><td>Им. </td><td>пиксел </td></tr>

<tr><td>Рд. </td><td>пиксела </td></tr>

<tr><td>Дт. </td><td>пикселу </td></tr>

<tr><td>Вт. </td><td>пиксел </td></tr>

<tr><td>Тв. </td><td>пикселом </td></tr>

<tr><td>Пр. </td><td>о пикселе </td></tr>

</table>

</body>

</html>

Как вы видите, у этой таблицы отображаются горизонтальные линии внешних и вертикальные линии внутренней границ, так как именно эти значения мы задали атрибутам frame и rules.[10,c.79]

2.4 Списки

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

Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью парного тега <ul></ul>. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.[25]

Такой список называется также ненумерованным, или неупорядоченным, потому что для его элементов последовательность не важна. Этот список можно использовать для перечисления объектов или их свойств. Для создания маркированных списков HTML предусматривает тег <UL>. Он требует закрывающий тег, а элементы списка находятся внутри блока тегов <UL>. Каждый элемент начинается с тега <LI>. У тега <UL> есть атрибут TYPE, определяющий вид маркера списка. Значения атрибута TYPE следующие:

circle — создает маркер в виде круга, белого внутри;

square — создает маркер в виде квадрата;

disc — создает маркер в виде закрашенного черным круга.

Листинг 1.21. Маркированные списки

<html

<head>

<title>списки</tite>

<body>

<li>Венера</li>

<li>Земля</li>

<li>Юпитер</li>

</ul>

<li>Венера</li>

<li>Земля</li>

<li>Юпитер</li>

</ul>

<li>Венера</li>

<li>Земля</li>

<li>Юпитер</li>

</ul>

</body>

</html>

Листинг 1.22. Список с разными маркерами

<html>

<head>

<title>Списки</title>

<body>

<ul>

<li type="circle">Земля</li>

<li type="square">Солнце</li>

<li type="circle">Венера</li>

</ul>

</body>

</html>

В примере разные маркеры отмечают объекты разных типов. Иногда удобнее создавать собственные маркеры для списков, чтобы их внешний вид соответствовал стилю вашего сайта и вашим желаниям. Для этого в HTML есть возможность создать список с графическими маркерами — вместо тега <LI> можно подставить картинку с изображением. Тег <UL> укажет браузеру, что нужно сделать отступ, а с помощью тега <BR> — перевод строки.

Листинг 1.23. Список с графическими маркерами

<html>

<head>

<title>Списки</title>

<body>

<ul>

<img src="marker.jpg" />Венера<br />

<img src="marker.jpg" />Земля<br />

</ul>

</body>[10,c. 48]

Нумерованный список

Нумерованный список создаётся с помощью парного тега <ol></ol>. Каждый пункт списка также создаётся с помощью элемента <li>. Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны. [25]

Список определений — это особый вид списка, который применяется для форматирования словарей и в случаях, когда необходимо пояснить значения терминов. Особенность списка определения следует из его функций. Элемент такого списка всегда состоит из двух частей: первая часть задает определяемое слово, а вторая описание или расшифровку термина. При этом форматирование осуществляется таким образом, что описание термина отображается с отступом от края экрана и, возможно, с пропуском строки от определения. Для организации списков определений служит тег <DL> — это тег-контейнер, внутри которого находятся определение и описание термина. У этого тега нет атрибутов, кроме стандартных STYLE и CLASS, с помощью которых к определению можно подключить стили. Чтобы внести информацию внутри тега-контейнера <DL>, надо задать теги <DT> и <DD>. Тег <DT> используется для того, чтобы задать определение. Никаких особенных атрибутов он не имеет.

Списки определений создаются с помощью тега <dl></dl>. Для добавления термина применяется тег <dt></dt>, а для вставки определения — тег <dd></dd>.[25]

Тег <DD> используется для описания термина из тега <DT>. Особых атрибутов в нем также не предусмотрено. Чтобы изменить вид информации, представленной в этом теге, надо использовать таблицы стилей. [10,c.53].

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

Зачастую возможностей простых списков не хватает, например, при создании оглавления никак не обойтись без вложенных пунктов. Разметка для вложенного списка будет следующей[38]

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

2.5 Ссылки

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

Внешние ссылки

Внешние ссылки — это ссылки на объекты, расположенные вне текущей страницы. Это могут быть другие страницы сайта, картинки, мультимедиа-приложения и иные сайты. Основой внешних ссылок является URL-адрес объекта, на который вы хотите сослаться. [4, c.247]

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.[21]

Для создания ссылок в HTML служит тег <A>, который требует закрывающий тег. В блоке этих тегов располагается текст или другой объект, который будет выделяться как ссылка. На самом деле для того, чтобы сообщить человеку, что в каком-то месте сайта расположена ссылка, совершенно не обязательно писать адрес страницы. Язык HTML дает возможность «замаскировать» адрес под текст ссылки, который описывает, что увидит пользователь, перейдя по ней. Отдельно находится адрес страницы, на которую вы попадете при щелчке кнопкой мыши на ссылке. Между тегами <A> и </A> располагается текст ссылки, а адрес документа для перехода записывается в теге <A> в качестве значения атрибута HREF. Таким образом, пользователь сможет быстро и легко перемещаться по сайту. Ему абсолютно все равно, где находится документ, на который указывает ссылка, он видит только текст описания.

Листинг 1.28. Создание ссылок

<html>

<head>

<title>Ссылки</title>

<body>

</body>

Внутренние ссылки

Чтобы создать такую ссылку, сначала нужно определить место, к которому приводит ссылка. Это делается с помощью атрибута NAME тега <A>. Необходимый отрывок текста заключается в блок тега <A>. Однако совершенно не обязательно брать внутрь этого тега текст — можно просто установить его на месте, к которому браузер должен переходить при щелчке кнопкой мыши на ссылке.

В качестве значения атрибута NAME можно взять любое имя. Желательно, чтобы оно характеризовало текущее место — так вам самим будет проще пользоваться метками. Затем надо создать ссылку на эту метку. Ссылка на внутреннюю метку создается

так же, как и ссылка на внешний документ, только вместо URL-адреса желаемой

страницы надо ввести адрес метки в таком виде: #met1, где met1 — имя метки.

При щелчке кнопкой мыши на ссылке браузер автоматически перейдет к месту,

указанному меткой.

Листинг 1.29. Внутренние ссылки

<html>

<head>

<title>Ссылки</title>

<body>

<a name="met2">Это метка для перехода 2</a><br />

<a href="#met1">Кликните для перехода к метке 1</a><br />

<a href="#met2">Кликните для перехода к метке 2</a><br />

<a name="met1">Это метка для перехода 1</a>

</body>

</html>

Как вы видите, внутренние ссылки при отображении ничем не отличаются от внешних ссылок, а текст, отмеченный как метка, не выделяется.

Синтаксис внутренних ссылок такой же, как и у внешних, поэтому атрибуты тега <A> одинаковы для обоих типов.

Общие моменты при создании внешних и внутренних ссылок

Все немногочисленные атрибуты тега <A> можно применять при создании как

внешних, так и внутренних ссылок. Тег <A> имеет два вспомогательных атрибута.

Первый атрибут — TARGET. [78]

Атрибут target (от англ. "target" ‒ «цель, мишень») указывает место (фрейм или окно браузера) в которое должен быть загружен, указанный в гиперссылке документ.[32]

Значения атрибута TARGET следующие:

_blank — страница открывается в новом окне браузера;

_parent — страница загружается во фрейм-родитель;

_self — страница загружается в текущее окно;

_top — страница загружается в полное окно браузера.

мыши на ссылке. [4,c.79]

HTML-элемент заголовка (<title>) определяет заголовок документа, который отображается в заголовке окна браузера или на вкладке страницы. Он содержит только текст, а теги внутри элемента игнорируются.[16]Значением атрибута является текст всплывающей подсказки.

Листинг 1.30. Ссылки с дополнительными атрибутами

<html>

<head>

<title>Ссылки</title>

<body>

<a href="aboutme.html" target="_blank" title="Пройдя по ссылке, вы сможете

узнать обо мне">Обо мне</a>

</body>

</html>

Всплывающая подсказка помогает посетителю страницы решить, нужно ли ему переходить по ссылке. Любая ссылка, как внешняя, так и внутренняя, может приводить к изображению. Другими словами, новая страница будет открываться при щелчке кнопкой мыши на картинке. Можно, например, создать миниатюрные копии фотографий, при щелчке кнопкой мыши на которые будет открываться фотография большего размера. Для создания ссылки-изображения достаточно поместить картинку внутрь тега <A>. В листинге 1.31 представлен пример создания ссылки-изображения.

Листинг 1.31. Ссылки-изображения

<html>

<head>

<title>Ссылки</title>

<body>

<a href="mypetfoto.html" target="_

blank" title="Пройдя по ссылке, вы

сможете увидеть фото моего зверя"><img

src="mypetfotomini.jpg" /></a>

</body>

</html>

Вы можете создать ссылку любого вида на каждый объект. Следите за тем, чтобы ссылки имели понятные названия, соответствующие содержанию документов, появляющихся при щелчке кнопкой мыши на них. Это гарантирует, что посетители будут довольны сайтом и в дальнейшем снова зайдут на него. [4,c.81]

Вывод по второй главе.

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

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

Глава 3. Алгоритм практической работы

3.1. Подготовка

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

3.2. Создание сайта

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

Ниже предоставляю документ созданный с помощью языка гипертекстовой разметки HTML.

<html>

<head>

<title>Цветы </title>

</head>

<body>

<h1 align="center">Цветы</h1>

<br>

<p align="right" title=>"Цветы - стихи природы"</p>

<br>

<p align="left" title="Абзац, выровненный по левому краю">Цветок - самый простой способ, показать любимому человеку свои чувства и эмоции. Когда мы видим красивый цветок, мы чувствуем себя счастливыми. Чудесные цветы могут вызвать улыбку даже у тех людей, кому сейчас тяжело. Ниже рассказано о пяти самых красивых цветах .</p>

<a href="#razdel1"><li>Аквилегия колумбийская</li> </a>.

<a href="#razdel2"><li>Альстрёмерии</li></a>.

<a href="#razdel3"> <li>Африканские маргаритки</li> </a>.

<a href="#razdel4"> <li>Белый лотос</li> </a>.

<a href="#razdel5"> <li>Бромелия</li> </a>.

</ul>

<a name="razdel1"> <h2 align="center">Аквилегия колумбийская</h2> </a>

<br>

<p align="center" title="Абзац, выровненный по центру">Это чудо растет в высоких скалистых горах, на высоте около 4200 метров. Очень редко можно увидеть эти цветы в продаже,<br /> и даже если вы нашли их где-нибудь в магазине, вам придется заплатить довольно высокую цену.</p>

<br>

<a name="razdel2"> <h2 align="center">Альстрёмерии</h2> </a>

<p align="center" title="Абзац, выровненный по центру">Перуанские лилии или Альстрёмерии насчитывают более чем 50 уникальных сортов. Научное название этого растения - альстромерия.<br /> Цветок произрастает в Южной Америке и очень любим местными ценителями флоры.</p>

<br>

<a name="razdel3"> <h2 align="center">Африканские маргаритки</h2> </a>

<p align="center" title="Абзац, выровненный по центру">Африканские маргаритки - красивые цветы, которые принадлежат к семейству календуловых. Есть примерно около 50 видов африканских маргариток,<br /> а их расцветка бывает фиолетовой, розовой, желтой, кремовой, белой и лиловой.<br /> Маргаритки - типичные для Африки цветы, предпочитающие расти в теплых солнечных местах.</p>

<br>

<a name="razdel4"> <h2 align="center">Белый лотос</h2> </a>

<p align="center" title="Абзац, выровненный по центру">Белый лотос называют египетской белой кувшинкой или тигровым лотосом. Вид происходит из семейства Nymphaeaceae и растет<br /> в различных частях Северной Азии и Восточной Африки. Цветки плавают на воде, опираясь на широкие листья.</p>

<br>

<a name="razdel5"><h2 align="center">Бромелия</h2> </a>

<p align="center" title="Абзац, выровненный по центру">Бромелия принадлежит к семейству бромелиевые. Они широко распространены по всей Вест-Индии и Латинской Америке. <br />Цветы имеют очень глубокую чашечку, которая является их особенностью. Вид назван в честь шведского ботаника и врача по имени Олоф Бромелиус.</p>

<br>

<table>

<caption>Семейство </caption>

<tr><th>Номер</th><th>Название</th><th>Семейство</th></tr>

<tr><td> 1.</td><td>Аквилегия колумбийская</td><td>Лютиковые </td></tr>

<tr><td> 2.</td><td>Альстрёмерии </td><td>Альстрёмериевые </td></tr>

<tr><td> 3.</td><td>Африканские маргаритки </td><td>Астровые </td></tr>

<tr><td> 4.</td><td>Белый лотос </td><td>Лотосовые </td></tr>

<tr><td> 5.</td><td>Бромелия </td><td>Бромелиевые</td></tr>

</table>

</body>

</html>

Заключение

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

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

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

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

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

3. Теоретически процесс создания сайта был рассмотрен и изучен. Определились основы написания сайта и основные моменты, которые были рассмотрены во второй главе.

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

Разработанный сайт включает в себя приемы работы с языком HTML, рассмотренные в теории.

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

Библиография

Борсук Н.А. Анализ средств разработки web- страниц // Международный научный журнал «Символ науки». – 2016. -№11. – С.41.
Джамса Крис. Эффективный самоучитель по креативному Web-дизайну. HTML, XHTML, CSS,JavaScript, PHP, ASP, ActiveX. Текст, графика, звук и анимация. Пер с англ./Крис Джамса, Конрад Кинг, Энди Андерсон - М.: ООО "ДиаСофтЮП", 2005.- 672 с.
Зайцева Е.А. Учебно-методическое пособие ГОУ ВПО «Тамбовский государственный технический университет», Педагогический Интернет-клуб, 2007. – С.31.
Квинт И. Создаем сайты с помощью HTML, XHTML и CSS. 4-е изд. – СПб.: Питер,2017.-464 с.
Монахов В.В. Язык программирования Java и среда NetBeans. – 3-е изд., перераб. и доп.- СПб.: БХБ-Петербург, 2011.-704 с
Петюшкин А. Html. Экспресс-Курс:книга/А. Петюшкин.-Спб.: Бхв-Петербург, 2010. -25с.
Пилгрим М. Погружение в HTML5: перев. с англ. — СПб.: БХВ-Петербург, 2011. — 304 с.: ил.
Роббинс Дж. P 58 HTML5, CSS3 и JavaScript. Исчерпывающее руководство / Дженнифер Роббинс; [пер. с англ. М. А. Райтман]. — 4-е издание. — М. : Эксмо, 2014. — 528 с. + DVD. — (Мировой компьютерный бестселлер).
Степаньян В. В. Особенности методики обучения созданию сайтов и порталов для коммерческого использования // Концепт. – 2014. – С. 3.
Ташков П. А. Веб-мастеринг на 100 %: HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка. — СПб.: Питер, 2010. — 512 с.
Фримен Элизабет Фримен Эрик Изучаем НТМL, CSS и ХНТМL Москва, - 2012. – С. 40.
Шмаков М. С. Электронное издание по курсу «Метрология и технические измерения» Жилищное право [Электронный ресурс] : актуальные вопросы законодательства : электрон. журн. 2007. № 1. URL: http://www.gilpravo.ru (Дата обращения: 02.02.2020).
BASICWEB.RU https://basicweb.ru/html/ssilki.php (Дата обращения: 01.02.2020)
Лекция 5. Язык для создания гипертекстовых документов в среде WEB - HyperText Markup Language (HTML) URL: http://bookwu.net/book_kompyuternye-seti_863/20_lekciya-5.-yazyk-dlya-sozdaniya-gipertekstovyh-dokumentov-v-srede-web-hypertext-markup-language-html (Дата обращения: 01.02.2020)
Компьютерная документация от А до Я. URL: http://www.compdoc.ru/internet/html/htmlbook/ (Дата обращения: 05.02.2020)
Веб-технологии для разработчиков URL:https://developer.mozilla.org/ru/docs/Web/HTML/Element/title (Дата обращения: 01.02.2020)
Самоучитель HTML URL: http://htmlbook.ru/html/br (Дата обращения: 01.02.2020)
Самоучитель HTML URL: http://htmlbook.ru/content/formatirovanie-teksta (Дата обращения: 01.02.2020)
Самоучитель HTML URL: http://htmlbook.ru/faq/kak-dobavit-kartinku-na-veb-stranitsu (Дата обращения: 11.02.2020)
Самоучитель HTML URL: http://htmlbook.ru/html/del (Дата обращения: 11.02.2020)
Самоучитель HTML URL: http://htmlbook.ru/html/img/align (Дата обращения: 11.02.2020)
Погружение в HTML5 URL: https://html5book.ru/css-border (Дата обращения: 10.02.2020)
Самоучитель HTML URL: http://htmlbook.ru/samhtml/spiski (Дата обращения: 10.02.2020)
Погружение в HTML5 URL: https://html5book.ru/html-lists (Дата обращения: 01.02.2020)
Погружение в HTML5 URL: https://html5book.ru/html-lists#part2 (Дата обращения: 05.02.2020)
Интернет технологии URL:https://www.internet-technologies.ru/articles/abzac-v-html.html (Дата обращения: 05.02.2020)
HTML справочник URL: http://mpbox.ru/html/attributes/frame.html (Дата обращения: 01.02.2020)
Интернет компания R52 URL:http://prodvizhenie.r52.ru/ru/blog/abzatc_v_html/ (Дата обращения: 11.02.2020)
HTML URL: http://programmerbook.ru/html/a/target/ (Дата обращения: 10.02.2020)
Самоучитель и справочник по HTML, CSS, JavaScript и PHP URL: https://puzzleweb.ru/html/tag_th.php (Дата обращения: 10.02.2020)
HTML URL: http://programmerbook.ru/html/a/target/ (Дата обращения: 01.02.2020)
Справочник тегов HTML URL: https://guruweba.com/html/teg-ins-html-dobavlennyy-tekst/ (Дата обращения: 01.02.2020)
Гиперссылки в HTML URL:http://www.seoded.ru/beginner/html/giperssilki.html#ixzz6Dag5ATot (Дата обращения: 11.02.2020)
Учебник HTML URL: http://www.webremeslo.ru/html/glava14.html (Дата обращения: 10.02.2020)
HTML5 и CSS3 на примерах URL: https://webref.ru/layout/html5-css3/img/scale (Дата обращения: 11.02.2020)
Справочник HTML URL: https://webref.ru/html/img/alt (Дата обращения: 05.02.2020)
В помощь веб - мастеру URL: https://wm-help.net/lib/b/book/2723332583/32 (Дата обращения: 10.02.2020)
Погружение в HTML5 URL: https://html5book.ru/html-lists#part4 (Дата обращения: 05.02.2020)