Файл: Языки гипертекстовой разметки(Язык гипертекстовой разметки ).pdf

В отличие от большинства текстовых процессоров, в html-документе обычно игнорируются символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости). Тэг <br> извещает браузер о разрыве строки. Однако браузер разделяет абзацы только при наличии тэга <p>. Ниже перечислены дополнительные параметры выравнивания содержимого тэга <p>^[24].

<p align="left/ center/ right /justufy"> - позволяют выравнивать абзац по левому краю, центру, по правому краю и по ширине соответственно.

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

Элемент тега a обозначает "якорь/anchor", а атрибут href (от "hypertext reference/гипертекстовая ссылка") - место, на которое выполняется переход по данной ссылке, при этом "http://" всегда должно входить в состав URL.

При ссылках между страницами на одном сайте, полный адрес документа ("http://") указывать необязательно.

Для создания ссылки-перехода внутри самой страницы используется атрибут id и символ "#". Так сначала посредством тега <h1 id="heading1">heading 1</h1> маркируется элемент, на который необходимо сделать переход. А посредством тега <a href="#heading1">Ссылка на heading 1</a> создана ссылка на этот элемент^[25].

Если необходимо сделать ссылку на e-mail адрес, используется следующий тег:

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

Также, при создании списка будет полезны следующие тэги. Существует три основных вида списков в html-документе:

1. Пронумерованный список создаётся с помощью парного тега <ol></ol>. Каждый пункт списка также создаётся с помощью элемента <li>.

2. Маркированный список представляет собой неупорядоченный список. Создаётся с помощью парного тега <ul></ul>.

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

Одна из наиболее привлекательных черт web - возможность включения ссылок на графические и иные типы данных в html - документ. Делается это при помощи тэга <img...>. Использование данного тэга позволяет значительно улучшить внешний вид и функциональность документов^[26].

Существует несколько способов использования графики в html-документах. Основной - это внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Это наиболее используемая техника при проектировании документов, называемая иногда «inline image». Синтаксис тэга:

Для того, чтобы поместить на страницу сайта изображение, необходимо использовать тэг img src, где src ("source") указывает размещение изображения. Следует отметить, что тэг img не требует наличия закрывающего тэга.

Чтобы загрузить файлы изображений, необходима программа редактирования файлов изображений (Paint Shop Pro, PhotoShop, Macromedia Fireworks, Irfan View (бесплатная)).

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

При вставке изображений, как правило, используют атрибуты width и height для установки ширины и высоты изображения, при этом значение указывается в пикселах. Например: <img src="logo.gif" width="32" height="32">

Язык HTML поддерживает два вида форматирования документа^[27]:

- логическое, указывающее на назначение определенного фрагмента текста, при котором выделяются части текста в соответствии со структурой документа (заголовки шести уровней);

- физическое, задающее внешний вид текста (тип и размер шрифта). Например, тег <b> выделяет текст полужирным начертанием, <u> - подчеркивание текста.

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

Например, тег <body style="background-color:#ff0000;"> сигнализирует браузеру о выводе страницы красного цвета, при этом использован шестнадцатиричном формате (HEX), где каждому цвету соответствует свое 16-ричное число. Но можно использовать и английские названия цветов, например, <body style="background-color: red;">.

Для вставки таблиц используются 3 базовых тэга:

- <table> - начало и конец таблицы;

- <tr> - "table row/ряд таблицы", начинает и заканчивает горизонтальный ряд ячеек;

- <td> - "table data/табличные данные" - начинает и заканчивает каждую ячейку ряда таблицы.

Тег <div></div> представляет собой блочный элемент, на котором можно построить весь сайт. Использование блоков <div> является универсальным способом вставки изображения, делает код более читабельным. Применяя блоки <div> можно достичь максимально комфортных условий для показа контента.

Следует отметить, что если задавать стили блокам текста непосредственно в самом коде каждого <div>, то код разрастается. В целях упрощения работы были разработаны каскадные таблицы стилей СSS (Cascading Style Sheets), представляющие собой формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Так создается файл CSS, который является единым файлом стилей для всего сайта и подключается ко всему сайту, а, следовательно, и задает свойства стилей для всех блоков и всего шаблона^[28].

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

2. Пример работы с HTML: верстка вебстраницы

Чтобы показать на примере действие языка гипертекстовой разметки создадим на HTML небольшую по содержанию условную веб-страничку. Т.е., покажем как при помощи языка HTML разместить выдаваемую в странице браузера текстовую, графическую и ссылочную информацию именно в том виде, как нам нужно – например, создадим часть, внешне похожей на оригинальную страничку, странички личного кабинета студента МФПУ, например – мою.

Вообще, создание веб-страниц (сайтов) возможно несколькими способами: от ручного, например, в обычном блокноте (что не продуктивно), до полу-автоматического (например, визуальный HTML-редактор Dreamweaver и т.п.) и полностью автоматического (веб-конструкторы типа uCoz, WIX и т.п.)

Т.к., наша страничка не будет увязана ни с CMS и с базами данных, то структура каталогов для размещения файлов будет проста и условна: корневой каталог webpage, в нем будет храниться наша страничка .html; в корневом каталоге вложен каталог img для файлов изображений. Таблицы CSS отсутствуют, файлы скриптов отсутствуют. Использована табличная верстка.

Для создания HTML-странички используем текстовый редактор Notepad, просмотр результата осуществляем в Mozilla Firefox ESR 52.5.0.

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

Первым тэгом определим тип документа как HTML^[29]:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Тэгом <head> создадим контейнер, в котором мы разместим мета-тэг о типе и кодировке страницы, тэг <title> устанавливающий заголовок окна веб-страницы, и вместо подключения CSS-документа, некоторые стилевые оформления текста (класс .whitetext, цвет белый, начертание полужирное); шрифт ссылок белого цвета, без декора; цвет фона страницы светло-серый:

<head>

<title>Пример работы с HTML</title>

.whitetext {

color: #FFF;

font-weight: bold;

}

a:link {

text-decoration: none;

color: #FFF;

}

a:visited {

text-decoration: none;

color: #FFF;

}

a:hover {

text-decoration: none;

color: #FFF;

}

a:active {

text-decoration: none;

color: #FFF;

}

body {

background-color: #f3f2ef;

}

</style>

</head>

Теперь, в контейнере body, задаваемом одноименным тэгом начнем размещать контент.

Под размещение контента будут создаваться таблицы с шириной 940рх (отталкиваясь от ширины оригинального баннера «student_discount.jpg», размещенного на оригинальной страничке).

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

Зададим ширину 940рх (table width="940"), толщину границы ячеек 0 (border="0") и выравнивание по центру (align="center")

<body>

Далее, сделаем разбивку на ячейки (по количеству элементов к размещению) – на 3 ячейки и начнем размещать контент:

В этой ячейке мы разместили логотип МФПУ и задали гиперссылку с логотипа на главную страницу Мегакампуса. Параметры ячейки подобраны под параметры картинки-логотипа:

<tr>

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

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

</tr>

</table>

В следующей таблице мы разместим меню с присвоенными гиперссылками на внешние ресурсы:

<td align="center" bgcolor="#FF0000"><a href="http://my.megacampus.ru/announce">Объявления</a></td>

<td align="center" bgcolor="#FF0000"><a href="http://my.megacampus.ru/student/up">Обучение</a></td>

<td align="center" bgcolor="#FF0000"><a href="http://my.megacampus.ru/schedule/academ">Расписание</a></td>

<td align="center" bgcolor="#FF0000"><a href="http://my.megacampus.ru/finance">Платежи</a></td>

<td align="center" bgcolor="#FF0000"><a href="http://my.megacampus.ru/docfiles/student">Документы</a></td>

<td align="center" bgcolor="#FF0000">Библиотека</td>

</tr>

В следующей таблице разместим графические элементы, имитирующие элементы навигации страницы-оригинала:

<tr>

</tr>

<tr>

В следующей таблице разместим рекламный баннер как на странице-оригинале, и, также присвоим ему гиперссылку на внешний ресурс:

<tr>

</tr>

<tr>

</tr>

Уже теперь, (если проставим закрывающие тэги </table>, </body> и </html>) при просмотре через браузер, мы получим следующий внешний вид, напоминающий оригинал – Рисунок 2.1:

Рисунок 2.1

Можно продолжить заполнение страницы и разместить весь контент идентичный странице-оригиналу, но это не требуется. Основная цель – показать на примере действие разметки, и мы её достигли: мы разместили и текстовую, и гипертекстовую (ссылки), и графическую информацию на странице именно так и именно в том виде как должен видеть её пользователь (как оригинал страницы ЛК на Мегакампусе).

В Приложении 2 размещён полный листинг получившейся страницы.

В Приложении 3 размещён архив «webpage.rar», в котором приведена страница, созданная для примера. Необходимо распаковать архив и запустить файл «primer.html»

Итак, подытожим:

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

- как правило, теги используются парами, состоящими из открывающего <имя_тега> и закрывающего </имя_тега> тегов, которые иначе называют контейнером. Основными тегами, используемыми HTML, являются html, head, body. Тегом html определяется все содержание документа. Внутри head размещается служебная информация, которая не видна на открытой веб-странице, необходимая браузеру для корректной интерпретации html документа и поиске браузерами. Вся информация, которая отображается на веб-странице, помещается между закрывающим и открывающим тегами body;

Смотрите также файлы

Система психологических средств невербального общения личности.pdf

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

Процессор персонального компьютера. Назначение, функции, классификация процессора (Архитектура ПК и назначение процессора).pdf

Языки гипертекстовой разметки (Структура HTML-документа).pdf

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

Файл: Языки гипертекстовой разметки(Язык гипертекстовой разметки ).pdf

2. Пример работы с HTML: верстка вебстраницы

Смотрите также файлы

Информация

Списки файлов

Дополнительно