ГОСУДАРСТВЕННОЕ УЧРЕЖДЕНИЕ
ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ
«БЕЛОРУССКО-РОССИЙСКИЙ УНИВЕРСИТЕТ»
Кафедра «Программное обеспечение информационных технологий»
ТЕХНОЛОГИЯ ИНТЕРНЕТ-ПРОГРАММИРОВАНИЯ
Методические рекомендации к лабораторным работам для студентов направления подготовки 09.03.01 «Автоматизированные системы обработки информации и управления»
Часть 1
Могилев 2017
УДК 004.42
ББК 32.97
И 74
Рекомендовано к изданию
учебно-методическим отделом
Белорусско-Российского университета
Одобрено кафедрой «Программное обеспечение информационных технологий» «18» апреля 2017 г., протокол № 8
Составитель канд. техн. наук, доц. Э. И. Ясюкович
Рецензент канд. техн. наук, доц. И. В. Лесковец
Методические рекомендации содержат базовые сведения по основам информатики, некоторые приемы работы по офисным информационным технологиям, а также задания для выполнения лабораторных работ.
Учебно-методическое издание
ИНФОРМАТИКА
Часть 2
Ответственный за выпуск К. В. Овсянников
Технический редактор А. А. Подошевко
Компьютерная верстка И. Н. Береснева
Подписано в печать . Формат 60х84/16. Бумага офсетная. Гарнитура Таймс.
Печать трафаретная. Усл. печ. л. Уч.-изд. л. . Тираж 66 экз. Заказ №
Издатель и полиграфическое исполнение:
Государственное учреждение высшего профессионального образования
«Белорусско-Российский университет».
Свидетельство о государственной регистрации издателя,
изготовителя, распространителя печатных изданий
№ 1/156 от 24.01.2014.
Пр. Мира, 43, 212000, Могилев.
ГУ ВПО «Белорусско-Российский
университет», 2016
Содержание
Введение
Целью изучения дисциплины является приобретение специальных знаний, умений и практических навыков, необходимых инженеру по информационным технологиям в разработки интернет приложений.
Методические рекомендации предназначены для изучения основ технологии Интернет- программирования и состоят из 17 лабораторных работ. В каждой работе излагается краткий теоретический материал по вопросам соответствующей темы, предлагаются технологии решения типовых задач, приводятся задания для выполнения работ, а также контрольные вопросы, ответив на которые студент может проверить уровень полученных знаний.
Первая три лабораторные работы посвящены изучению языка HTML каскадной таблицы стилей CSS. Следующие три работы ориентированы на изучение основ использования языка JavaScript.
Каждая работа рассчитана на 2 ч, а ее цель соответствует названию.
Выполнение каждой работы производится в следующем порядке:
ознакомится с теоретическими положениями работы;
из таблицы «Варианты заданий для выполнения работы» согласно варианту, указанному преподавателем, выбрать задание и исходные данные, выполнить приведенные задания и оформить рукописный отчет.
Отчет должен содержать: название и цель работы; постановку задачи, исходные данные; использованные технологии; результаты выполнения, анализ полученных результатов и выводы. В отчете можно отразить также ответы на наиболее сложные вопросы, приведенные в конце каждой работы.
1 Лабораторная работа № 1. Разработка HTML-страницы
Цель работы: приобретение навыков создания простейших Web-документов;
Язык HTML (HyperText Markup Language – язык разметки гипертекста) – это язык, на котором создаются Web-страницы.
Простейший документ HTML имеет следующую структуру:
<!DocType>
<html>
<head>
<title>Простейший Web-документ</title>
</head>
<body>
Текст документа
</body>
</html>
HTML не реагирует на регистр символов, описывающих теги.
HTML документ начинается тегом <!DocType…>, определяющим используемую версию HTML. Затем записывается сам HTML документ, который заключается в теги <html> </html> и состоит из двух частей: раздела <head> </head> , описывающего общие свойства документа, такие как заголовок, автор документа и т д., и раздела <body> </body>, определяющего содержание, структуру и вид тела документа в окне Web-браузером.
Обычно основой документа является раздел head, в коnором содержится вся техническая информация, таблицы стилей и т. д.
Основное содержимое сайта формируется в разделе body: текст, таблицы, картинки и многие другие элементы.
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML <!DOCTYPE…>, которая обычно выглядит примерно так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.
Далее обозначается начало и конец документа тегами <html> и </html>. Внутри этих тегов должны находиться теги заголовка (<head></head>) и тела (<body></body>) документа.
Варианты DOCTYPE для HTML 4.01
Строгий (Strict): не содержит элементов, помеченных как «устаревшие» или «не одобряемые» (deprecated).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
С фреймами (Frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
В HTML 5 используется только один вариант DOCTYPE:
<!DOCTYPE HTML>
Таблица 1.1 – Основные теги HTML
Тег |
Описание |
<!--...--> |
Используется для добавления комментариев. |
<!DOCTYPE> |
Объявляет тип документа и предоставляет основную информацию для браузера – его язык и версия. |
<a> |
Создаёт гипертекстовые ссылки. |
<abbr> |
Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title. |
<address> |
Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом. |
<area> |
Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега<map>. |
<article> |
Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий. |
<aside> |
Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта. |
<audio> |
Загружает звуковой контент на веб-страницу. |
<b> |
Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному. |
<base> |
Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде. |
<bdi> |
Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста. |
<bdo> |
Отображает текст в направлении, указанном в атрибуте dir, переопределяя текущее направление написания текста. |
<blockquote> |
Выделяет текст как цитату, применяется для описания больших цитат. |
<body> |
Представляет тело документа (содержимое, не относящееся к метаданным документа). |
<br> |
Перенос текста на новую строку. |
<button> |
Создает интерактивную кнопку. Внутрь тега можно поместить содержимое — текст или изображение. |
<canvas> |
Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript. |
<caption> |
Добавляет подпись к таблице. Вставляется сразу после тега<table>. |
<cite> |
Используется для указания источника цитирования. Отображается курсивом. |
<code> |
Представляет фрагмент программного кода, отображается шрифтом семейства monospace. |
<col> |
Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа. |
<colgroup> |
Создает структурную группу столбцов, выделяющую множество логически однородных ячеек. |
<datalist> |
Элемент-контейнер для выпадающего списка элемента <input>. Варианты значений помещаются в элементы <option>. |
<dd> |
Используется для описания термина из тега <dt>. |
<del> |
Помечает текст как удаленный, перечёркивая его. |
<details> |
Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в тег<summary>. |
<dfn> |
Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина. |
<div> |
Тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями. |
<dl> |
Тег-контейнер, внутри которого находятся термин и его описание. |
<dt> |
Используется для задания термина. |
<em> |
Выделяет важные фрагменты текста, отображая их курсивом. |
<embed> |
Тег-контейнер для встраивания внешнего интерактивного контента или плагина. |
<fieldset> |
Группирует связанные элементы в форме, рисуя рамку вокруг них. |
<figcaption> |
Заголовок/подпись для элемента <figure>. |
<figure> |
Самодостаточный тег-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью. |
<footer> |
Определяет завершающую область (нижний колонтитул) документа или раздела. |
<form> |
Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action. |
<h1-h6> |
Создают заголовки шести уровней для связанных с ними разделов. |
<head> |
Элемент-контейнер для метаданных HTML-документа, таких как<title>, <meta>, <script>, <link>, <style>. |
<header> |
Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе. |
<hr> |
Горизонтальная линия для тематического разделения параграфов. |
<html> |
Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов. |
<i> |
Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент. |
<iframe> |
Создает встроенный фрейм, загружая в текущий HTML-документ другой документ. |
<img> |
Встраивает изображения в HTML-документ с помощью атрибутаsrc, значением которого является адрес встраиваемого изображения. |
<input> |
Создает многофункциональные поля формы, в которые пользователь может вводить данные. |
<ins> |
Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ. |
<kbd> |
Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace. |
<keygen> |
Генерирует пару ключей – закрытый и открытый. При отправке формы, закрытый ключ хранится локально, и открытый ключ отправляется на сервер. Работает внутри тега <form>. |
<label> |
Добавляет текстовую метку для элемента <input>. |
<legend> |
Заголовок элементов формы, сгруппированных с помощью элемента <fieldset>. |
<li> |
Элемент маркированного или нумерованного списка. |
<link> |
Определяет отношения между документом и внешним ресурсом. Также используется для подключения внешних таблиц стилей. |
<main> |
Контейнер для основного уникального содержимого документа. На одной странице должно быть не более одного элемента <main>. |
<map> |
Создаёт активные области на карте-изображении. Является контейнером для элементов <area>. |
<mark> |
Выделяет фрагменты текста, помечая их желтым фоном. |
<meta> |
Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке<head> может быть несколько тегов <meta>, так как в зависимости от используемых атрибутов они несут разную информацию. |
<meter> |
Индикатор измерения в заданном диапазоне. |
<nav> |
Раздел документа, содержащий навигационные ссылки по сайту. |
<noscript> |
Определяет секцию, не поддерживающую сценарий (скрипт). |
<object> |
Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег<param>. |
<ol> |
Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная. |
<optgroup> |
Контейнер с заголовком для группы элементов <option>. |
<option> |
Определяет вариант/опцию для выбора в раскрывающемся списке<select>, <optgroup> или <datalist>. |
<output> |
Поле для вывода результата вычисления, рассчитанного с помощью скрипта. |
<p> |
Параграфы в тексте. |
<param> |
Определяет параметры для плагинов, встраиваемых с помощью элемента <object>. |
<pre> |
Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д. |
<progress> |
Индикатор выполнения задачи любого рода. |
<q> |
Определяет краткую цитату. |
<ruby> |
Контейнер для Восточно-Азиатских символов и их расшифровки. |
<rb> |
Определяет вложенный в него текст как базовый компонент аннотации. |
<rt> |
Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе <ruby>, выводится уменьшенным шрифтом. |
<rtc> |
Отмечает вложенный в него текст как дополнительную аннотацию. |
<rp> |
Выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>. |
<s> |
Отображает текст, не являющийся актуальным, перечеркнутым. |
<samp> |
Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом. |
<script> |
Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src. |
<section> |
Определяет логическую область (раздел) страницы, обычно с заголовком. |
<select> |
Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в <option>. |
<small> |
Отображает текст шрифтом меньшего размера. |
<source> |
Указывает местоположение и тип альтернативных медиа ресурсов для элементов <video> и <audio>. |
<span> |
Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов. |
<strong> |
Расставляет акценты в тексте, выделяя полужирным. |
<style> |
Подключает встраиваемые таблицы стилей. |
<sub> |
Задает подстрочное написание символов, например, индекса элемента в химических формулах. |
<summary> |
Создаёт видимый заголовок для тега <details>. Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка. |
<sup> |
Задает надстрочное написание символов. |
<table> |
Тег для создания таблицы. |
<tbody> |
Определяет тело таблицы. |
<td> |
Создает ячейку таблицы. |
<textarea> |
Создает большие поля для ввода текста. |
<tfoot> |
Определяет нижний колонтитул таблицы. |
<th> |
Создает заголовок ячейки таблицы. |
<thead> |
Определяет заголовок таблицы. |
<time> |
Определяет дату/время. |
<title> |
Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия. |
<tr> |
Создает строку таблицы. |
<track> |
Добавляет субтитры для элементов <audio> и <video>. |
<u> |
Выделяет отрывок текста подчёркиванием, без дополнительного акцента. |
<ul> |
Создает маркированный список. |
<var> |
Выделяет переменные из программ, отображая их курсивом. |
<video> |
Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg. |
<wbr> |
Указывает браузеру возможное место разрыва длинной строки. |
Основные теги (элементы) HTML
Тег <head> открывает раздел заголовка документа, содержащего обязательный контейнер <title> </title>, а тег </head> раздел заголовка закрывает.
Задача заголовка заключается в том, чтобы предоставить информацию приложению, которое интерпретирует документ. За исключением элемента Title, элементы, расположенные внутри элемента head, не видны читателю документа.
Элемент meta в разделе head позволяет автору документа указать информацию, расположенную вне документа HTML. Мета-информацию можно использовать в браузере для выполнения действий, которые пока еще не поддерживаются официальной спецификацией HTML. Как правило, элементы meta не нужны для простого документа HTML, однако следует помнить об их существовании и использовать, когда появится опыт и страницы станут более сложными.
В настоящее время элемент meta чаще всего используется, благодаря его свойству Keywords – ключевые слова. Во многих поисковых системах используются слова, определенные в этом элементе, для составления указателя документа.
В разделе head могут присутствовать два дополнительных элемента: Script, для добавления в страницы сценариев интерактивного управления, и элемент Style для добавления различных стилей.
Универсальные атрибуты
Универсальные атрибуты применяются практически ко всем тегам, поэтому выделены в отдельную группу, чтобы не повторять их для всех тегов.
accesskey – позволяет получить доступ к элементу с помощью заданного сочетания клавиш.
class – определяет имя класса, которое позволяет связать тег со стилевым оформлением.
contenteditable – сообщает, что элемент доступен для редактирования пользователем.
contextmenu – устанавливает контекстное меню для элемента.
dir – задает направление и отображение текста — слева направо или справа налево.
hidden – скрывает содержимое элемента от просмотра.
id
Указывает имя стилевого идентификатора.
lang – браузер использует значение параметра для правильного отображения некоторых национальных символов.
spellcheck – указывает браузеру проверять или нет правописание и грамматику в тексте.
style - применяется для определения стиля элемента с помощью правил CSS.
tabindex – устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab.
title – описывает содержимое элемента в виде всплывающей подсказки.
xml:lang – этот атрибут по своему действию похож на lang, но применяется только в XHTML-документах и указывает язык всего текста или его фрагмента.
Пример тега <head>
Пример 1. Написание заголовка документа
<.html>
<.head>
<.title>Обучение языку HTML - пример</title>
<.meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<.meta name="Keywords" lang=ru content="заголовок, метатеги, язык, HTML">
<.meta name="Description" content="Обучение тегам заголовка языка HTML">
<.link rel="author" href="#">
<./head>
<.body>
Пример заголовка страницы, где нифига не видно ничего, но вообще он очень важен
<./body>
<./html>
Разложим теперь по полочкам все то, что мы написали в примере. Первый и обязательный элемент заголовка это контейнер, задающий имя документа, отображаемое в самой верхней строчке окна браузера.
Далее следует последовательность
тегов, задающих так называемую мета (или внешнюю) информацию о документе. У
тегов наиболее часто используются следующие атрибуты:
HTTP-EQUIV - задать имя мета-записи в документе;
NAME - задать имя дополнительной мета-записи (по умолчанию NAME=HTTP-EQUIV);
CONTENT - присвоить значение мета-записи заданной атрибутом NAME или HTTP-EQUIV;
LANG - язык описания значений мета-записи;
Представляете ли вы, как реально работают поисковые службы сети Интернет?
Многие поисковики (к счастью, не все) индексируют только начальные страницы сайтов. Как правило индексированию подвергаются следующие элементы документа: заголовок
<.TITLE>, заголовки уровней от
<.h1>
до
<.h6>
включительно в теле документа, и ключевые слова заданные в
-теге.
Представьте сами, если у вас на главной страничке будет графическая или flash-заставка (даже самая супер-пуперская) и пустые ссылки на страницы, допустим ваших любимых сайтов или друзей, какой индекс-описание сформирует поисковик? Да никакой.
Поэтому надо очень серьёзно относиться к выбору названия вашей страницы, структурированию сайта, и использованию внутреннего описания вашего произведения (метатегам).
В нашем примере первый
тег описывает тип и кодировку содержимого нашего веб-примера.
Два следующих
тега служат для передачи информации о содержании веб-документа поисковым службам в сети Интернет.
Тег задает список ключевых слов, содержащихся в документе, их языка.
Тег является словесным описанием содержимого документа.
Далее следует тег
<.BASE HREF="URL">, задающий базовый адрес данного документа. Это необходимо для поддержания работоспособности относительных ссылок, в случае миграции документа по сети, или изменения каталога его загрузки. При отсутствии тега
относительные ссылки в документе определяются от адреса его загрузки.
Завершает наш заголовок тег
Данный тег не отображает информацию в окне броузера и предназначен для формирования различных типов отношений между документами и другими объектами. Данные отношения помогают разработчикам ориентироваться в структуре сложного документа и используются поисковыми системами. Рассмотрим, какие бывают отношения и как они задаются. У тега наиболее часто используются следующие атрибуты:
REV - отношение текущего документом с другим, заданным HREF (обратное REL);
REL - отношение между документом заданным HREF и текущим документом (обратное REV);
HREF - задает URL документа или объекта;
LANG - языковая версия;
MEDIA - назначение документа (Print/Screen);
TYPE - тип содержимого связанного объекта (листа стилей);
Данный тег довольно редко используется, как правило его применение ограничивается привязкой листа стилей (stylesheet) к документу , но в HTML-документах со сложной иерархической структурой иногда встречается множество тегов
с довольно запутанным синтаксисом. Наиболее понятные из них связи типа: следующий/предыдущий (next/prev), документ/автор (author), документ/оглавление (index). В нашем примере тег
использован для формирования связи именно "документ/автор".
Вот еще несколько примеров использования отношений в документах:
- означает что документ chapter7.htm предыдущий по отношению к документу (chapter8.htm) содержащему заданную данным тегом связь;
- означает что документ chapter9.htm следующий по отношению к документу (chapter8.htm) содержащему заданную данным тегом связь;
- обратное отношение, которое говорит о том, что документ (chapter10.htm), содержащий заданную данным тегом связь, является следующим для chapter9.htm;
- означает, что для печати текущего документа использовать лист стилей из style/PrintStyle.css;
Ну вот, с основными моментами заголовка, думаю разобрались. Думаю, теперь вам понятно, почему я предлагал пока пропустить этот раздел, и вернуться к нему чуть позже. Но, если вы его прошли, то тем лучше, дальше будет меньше материала для изучения. От головы переходим к телу.
Тег<body
Основная часть Web-документа размещается в разделе Body, которая интерпретируется в соответствии с набором правил, сообщающих браузеру о содержимом Web-документа.
Тег <BODY> определяет тело документа и содержит различные атрибуты для определения цвета фона документа, цвета текста, цвета ссылок и т.д. Формат записи тега <BODY>:
<BODY параметр1=данные1, параметр2=данные2...>
текст документа
</BODY>
В качестве параметров тега Body могут использоваться следующие:
– bgcolor – определяет цвет фона для тела документа;
– text - определяет цвет, используемый при выводе на экран текста из данного документа;
– background – определяет адрес URL, откуда будет браться изображение для фона текущего документа;
– link – определяет цвет, который будет использоваться при выводе на экран текста из еще не выбранных вами гипертекстовых связей;
– vlink – определяет цвет, который будет использоваться при выводе на экран текста из уже проверенных вами гипертекстовых связей;
– alink – задает цвет, которым будут выделяться в тексте гипертекстовые связи в тот момент, когда пользователь щелкает по ним клавишей мыши.
Коды некоторых цветов в формате RGB (Red, Green, Blue) (0-FF, 0-FF, 0-FF,):
Элемент <body> имеет большое количество важных для определения общего вида документа атрибутов. В таблице1.1 перечислены эти атрибуты и их назначение.
Таблица 1.1 – Атрибуты элемента body и их назначение
Атрибут |
Назначение |
Alink |
Определяет цвет ссылки |
Background |
Указывает URL изображения, который используется в качестве фона документа |
Bgcolor |
Определяет цвет фона документа |
Bgproperties |
Если Bgproperties = fixed, то изображение фона не будет прокручиваться (только в IE) |
Leftmargin |
Определяет ширину левого поля в пикселях |
Link |
Определяет цвет ссылки, которая не была посещена |
Text |
Определяет цвет текста |
Topmargin |
Определяет ширину верхнего поля в пикселях |
Vlink |
Определяет цвет ссылки, которая была посещена |
Заполнение фона. Один из популярных способов оформления документа HTML состоит в использовании отображаемого под текстом документа фонового изображения, сформированного в виде небольшого графического файла.
Обычно для фона выбирают небольшие изображения, из которых создается узор в окне браузера. Для этой цели особенно популярна имитация различных фактур: кирпичи, мрамор, ткань или фон, соответствующий тематике страницы.
Как бы не были привлекательны фоновые изображения, их не увидят те пользователи, которые отключили их автоматическую загрузку. Поэтому, чтобы страница легко читалась, целесообразно в атрибуте bgcolor настроить цвет фона, даже если читатель не видит рисунок фона.
Один из важных элементов в документе HTML является элемент Address. В нем можно указать автора документа и сообщить, как с ним связаться. Здесь также можно поместить информацию об авторских правах на материал, содержащийся на странице. Элемент Address обычно помещается либо в начале, либо в конце документа и состоит из текста, расположенного между открывающим и закрывающим дескрипторами <address> </address>. Текст внутри элемента Address обычно отображается курсивом, например:
<!DocType>
<html>
<head>
<title>Простейший Web-документ</title>
</head>
<body>
<!-- Пример address 05.09.2017 -->
<address>
Сайт создан Ивановым Сергеем
</address>
Текст документа
</body>
</html>
Атрибут bgproperties может интерпретировать только браузер Microsoft Internet Explorer. fixed – единственное допустимое значение для этого атрибута. Если bgproperties=fixed, то рисунок фона не будет прокручиваться вместе с текстом. Эту возможность желательно использовать для фона в виде обоев, а также для фона в виде водяных знаков.
Комментарии в HTML-документах.
В документ HTML можно добавить комментарии, которые не будут видны читателю. Комментарий начинается дескриптором <!-- и заканчивается -->. Например, при добавлении нового материала в документ в комментарии можно указать дату новой редакции. Однако не следует злоупотреблять комментариями и использовать их для большого количества элементов документа HTML.
Тег <div> позволяет выделить в структуре документа несколько разделов. Он является блочным тегом, функционирующим во многом подобно тегу <p>. Если закрывающий тег </P> опущен, то <div> эффективно заменяет его и начинает новый абзац. Он поддерживает атрибут align, который указывает тип выравнивания left, center или right, поэтому с его помощью можно, например, выровнять по центру блок текста и графики. Каждый следующий раздел игнорирует, заданное для предыдущего раздела, значение атрибута align. Синтаксис:
<div align = тип> Текст раздела </div>
Контейнер раздела <div> </div> можно использовать для выравнивания целого блока элементов страницы.
Тег <span> позволяет выделить некоторое количество текста для последующего его форматирования, но в отличие от <div> не начинает новый абзац. Синтаксис:
<span> Текст </span>
Тег <em>
<em> (акцент) используется для выделения фрагмента текста, имеющего большое значение. Обычно такой фрагмент выделяется курсивом.
Тег < samp>
<samp> (образец) используется для выделения знаков, на которых автор хочет акцентировать внимание читателя. Для текста, к которому относится этот элемент, обычно используется моно ширинный шрифт, например
Буквы <samp>AEIOU</samp> обозначают гласные звуки английского языка.
Тег <strong>
<strong> (важный) используется для выделения очень важного фрагмента текста. Текст, к которому применен этот элемент, обычно выделяется полужирным шрифтом, например
Запомните главное правило: <strong>He паникуйте</strong>!
Элементы физического форматирования.
HTML оставляет оформление внешнего вида документа на усмотрение браузера. Рассмотрим, как использовать элементы физического форматирования, определяющие вид текста в браузере.
В HTML Имеются следующие элементы физического форматирования.
– <В> (полужирный) – выделяет текст полужирным шрифтом;
– <I> (курсив) – отображает текст курсивом;
– <TT> (телетайп) – отображает текст шрифтом печатной машинки;
– <U> (подчеркивание) – выделяет текст в окне браузера подчеркиванием;
– <STRIKE> (зачеркивание) – проводит горизонтальную линию по средине строки текста;
– <BIG> (крупный) – отображает текст шрифтом большого размера;
– <SMALL> (мелкий) – отображает текст шрифтом меньшего размера;
– <SUB> (нижний индекс) – отображает фрагмент текста в виде нижнего индекса и отображает его с использованием шрифта меньшего размера;
– <SUP> (верхний индекс) – отображает фрагмент текста в виде верхнего индекса и отображает его мелким шрифтом.
<html>
<head>
<title>Начало HTML</title>
</head>
<body background=77.jpg bgcolor green>
<br>
<hr color=green width=55%>
<br>
<!-- em - выделение курсивом значимых фрагментов -->
<font size=6>
<center>
<b><em>Горацио</em></b>
</center>
</font>
<br><br>
<font size=5 color=red>
Буквы <SAMP>AEIOU aeiou</SAMP> обозначают гласные звуки английского языка
<br><br>
Запомните главное правило: <STRONG>He паникуйте</STRONG>
<br><br>
Текст<b> жирный<b/> строка
<br><br>
Текст<i> курсив</i> строка
<br><br>
Текст<tt> печат-я маш</tt> строка
<br><br>
Текст<u> подчеркивание</u> строка
<br><br>
Текст<strike> зачеркивание</strike> строка
<br><br>
Текст<small> мелкого размера</small> строка
<br><br>
Текст<big> большого размера</big> строка
<br><br>
Текст<sub> нижний индекс</sub> строка
<br><br>
Текст<sup> верхний индекс</sup> строка
<br><br>
</font>
</body>
</html>
Шрифты. Тег <font>.
Тег <FONT> используется для выделения особым шрифтом слова или текста. С ним применяются два атрибута size и color. Некоторые браузеры поддерживают атрибут face, позволяющий задать любой из перечня шрифтов. Если браузер не находит заданный шрифт, то используется шрифт, заданный по умолчанию. Синтаксис: <FONT size=n color="цвет"> Текст </FONT>
или <FONT face=имя color="цвет"> Текст </FONT>
Тег font является контейнером, который открывается дескриптором <font>и закрывается дескриптором </font>. Если в открывающем дескрипторе не указаны атрибуты, то элемент font не будет оказывать никакого воздействия.
С помощью атрибутов face (название шрифта), size (размер) и color (цвет) можно радикально изменить внешний вида текста в документах.
Название, указанное в атрибуте, должно точно совпадать с названием шрифта на компьютере пользователя. В противном случае браузер игнорирует этот атрибут и использует шрифт, заданный читателем по умолчанию. Прописные и строчные буквы в названии шрифта игнорируются, а пробелы являются обязательными.
Если не известно, какие шрифты могут быть на компьютере читателя, то в атрибуте face можно указать несколько названий шрифтов через запятую. Это особенно удобно, поскольку похожие шрифты могут иметь различные названия в разных OS, например в Windows и в Macintosh. Браузер просматривает список шрифтов слева направо и использует первый подходящий шрифт.
<html>
<head>
<title>Пример выбора шрифта</title>
</head>
<body>
<font face=″Arial″, ″Helvetica″>
Это пример выбора шрифта <font>
</body>
</html>
Атрибут size элемента font позволяет указать высоту знаков текста. Размер шрифта указывается в условных единицах от 1 до 7, причем эта шкала основана на шрифте обычного стиля, которому соответствует значение 3. Атрибут size можно использовать двумя различными способами: указать абсолютный размер шрифта, например size=5, или относительный размер, например size=+2. Второй способ чаще применяется в том случае, если был указан основной шрифт basefont.
Атрибут color используется для указания цвета текста. Он воспринимает либо шестнадцатеричное значение RGB, либо стандартные названия цветов. Примеры определения в документе размера шрифта и его цвета:
<font size=5 color="FF0000">
<font size=5 color="GREEN">
Тег <basefont>
Дескриптор <basefont> служит для установления стандартного размера шрифта, гарнитуры и цвета текста в документе. Параметры, указанные в дескрипторе <basefont>, действуют во всем документе, пока эти установки не будут перекрыты элементом font. После закрытия элемента font характеристики basefont вновь вступают в силу. Атрибуты basefont можно изменить с помощью другого дескриптора <basefont> в любом месте документа. У тега <basefont> нет закрывающего тега.
В элементе basefont используются атрибуты size и color подобно тому, как они используются в элементе font.
HTML формы
Браузеры позволяют пользователю, заполнив специальную форму, возвращающую полученное значение, выполнять некоторые действия на WWW-сервере. Когда форма интерпретируется Web-браузером, создаются специальные экранные элементы GUI, такие, как: поля ввода, checkboxes, radiobuttons, выпадающие меню, скроллируемые списки, кнопки и т.д.
Формы начинаются тегом <form> и завершаются тегом </form>.
<form method="get|post" action="url">
Элементы_формы_и_другие_элементы_HTML
</form>
где method – метод посылки сообщения с данными из формы. В зависимости от используемого метода можно посылать результаты ввода данных в форму двумя путями:
get: информация из формы добавляется в конец URL, который был указан в описании заголовка формы. Использование метода GET не рекомендуется;
post: данный метод передает всю информацию о форме немедленно после обращения к указанному URL.
Ваша CGI-программа получает данные из формы в стандартный поток ввода. Сервер не будет пересылать вам сообщение об окончании пересылки данных в стандартный поток ввода; вместо этого используется переменная среды CONTENT_LENGTH для определения, какое количество данных вам необходимо считать из стандартного потока ввода. Данный метод рекомендуется к использованию.
action – описывает URL, который будет вызываться для обработки формы и почти всегда указывает на -программу, обрабатывающую данную форму.
CGI- (Common Gateway Interface) – .
Теги Формы
Тег <textarea> используется для формирования ограниченной рамкой области для ввода строк текста. Атрибуты тега <textarea> описывают:
- name – имя поля ввода – вводимого значения;
- rows – высота поля ввода в символах;
- cols – ширина поля ввода в символах.
Если необходимо, чтобы в поле ввода по умолчанию выдавался какой-либо текст, то необходимо вставить его внутри тегов <textarea> и </textarea>. Пример использования тега <textarea>:
<textarea name="address" rows=10 cols=50>
Москва,
Дмитровкое шоссе,
д.9б, офис 448
</textarea>
Закрывающий тег </textarea> необходим даже тогда, когда поле ввода изначально пустое.
Отправление файлов при помощи форм
Формы можно использовать для отправки не только небольших информационных сообщений в виде параметров, но и для отправки файлов.
Поскольку данная возможность требует поддержки получения файлов WEB-сервером, то, соответственно, необходимо, чтобы сервер поддерживал получение файлов!
Например:
<html>
<head>
<title> Form</title>
<head>
<body>
<br>
<hr width= 50% color=green size=2>
<br>
<form method="get" action="url">
<textarea name="address" rows=10 cols=50>
Москва,
Дмитровкое шоссе,
д.9б, офис 448
</textarea>
</form>
<br><br>
<form method="get" enctype="multipart/form-data" action="url"
method=post>
Отправить данный файл:
<input name="userfile" type="file">
<p>
<input type="submit" value="Отправить файл">
</form>
</body>
</html>
Тег <input> относится к тегам форм и используется для внедрения в форму кнопок, графических изображений, флажков, переключателей, паролей и текстовых полей ввода – одной строки текста или одного слова.
Несмотря на внешние отличия форм, все они пересылают сценарию CGI данные в виде пар имя: значение.
Атрибуты тега <input>:
– checked – означает, что checkbox или radiobutton будет выбран;
– maxlength – определяет количество символов, которое пользователи могут ввести в поле ввода. При превышении количества допустимых символов браузер реагирует на попытку ввода нового символа звуковым сигналом и не дает его ввести. Его не следует путать с атрибутом size. Если maxlength больше чем size, то в поле осуществляется скроллинг. По умолчанию значение maxlength равно бесконечности;
– name – имя поля ввода. Используется как уникальный идентификатор поля, по которому, впоследствии, можно получить данные, помещенные пользователем в это поле;
– size – определяет визуальный размер поля ввода на экране в символах;
– src – URL, указывающий на картинку. Используется совместно с атрибутом image;
– value – присваивает полю значение по умолчанию или значение, которое будет выбрано при использовании типа radio (для типа radio данный атрибут обязателен);
– type – определяет тип поля ввода. По умолчанию это простое поле ввода для одной строки текста. Остальные типы должны быть явно указаны:
checkbox – используется для простых логических (boolean) значений. значение, ассоциированное с именем данного поля, которое будет передаваться в вызываемую cgi-программу, может принимать значение on или off.
hidden – поля данного типа не отображаются броузером и не дают пользователю изменять присвоенные данному полю по умолчанию значение. это поле используется для передачи в cgi-программу статической информации, как то id пользователя, пароля или другой информации.
image – данный тип поля ввода позволяет вам связывать графический рисунок с именем поля. при нажатии мышью на какую-либо часть рисунка будет немедленно вызвана ассоциированная форме cgi-программа. значения, присвоенные переменной name будут выглядеть так - создается две новых переменных: первая имеет имя, обозначенное в поле name с добавлением .x в конце имени. в эту переменную будет помещена x-координата точки в пикселах ( считая началом координат левый верхний угол рисунка), на которую указывал курсор мыши в момент нажатия, а переменная с именем, содержащимся в name и добавленным .y, будет содержать y-координату. все значения атрибута value игнорируются. само описание картинки осуществляется через атрибут src и по синтаксису совпадает с тегом <img>.
password – то же самое, что и атрибут text, но вводимое пользователем значение не отображается броузером на экране.
radio – данный атрибут позволяет вводить одно значение из нескольких альтернатив. для создания набора альтернатив вам необходимо создать несколько полей ввода с атрибутом type="radio" с разными значениями атрибута value, но с одинаковыми значениями атрибута name. в cgi-программу будет передано значение типа name=value, причем value примет значение атрибута value того поля ввода, которое в данный момент будет выбрано (будет активным). при выборе одного из полей ввода типа radio все остальные поля данного типа с тем же именем (атрибут name) автоматически станут невыбранными на экране.
reset – данный тип обозначает кнопку, при нажатии которой все поля формы примут значения, описанные для них по умолчанию.
submit – данный тип обозначает кнопку, при нажатии которой будет вызвана cgi-программа (или url), описанная в заголовке формы. атрибут value может содержать строку, которая будет высвечена на кнопке.
text – данный тип поля ввода описывает однострочное поле ввода. используйте атрибуты maxlength и size для определения максимальной длинны вводимого значения в символах и размера отображаемого поля ввода на экране (по умолчанию принимается 20 символов).
Тег <select> позволяет пользователю выбрать значение из фиксированного списка значений, обычно представленных выпадающим меню.
Тег <select> может принимать форму раскрывающегося списка или меню элементов. имеет вложенный тег <option> и атрибуты:
name. задаёт имя;
size задаёт максимальное количество элементов списка, одновременно отображаемых на экране;
multiple задаёт возможность одновременного выбора нескольких значений.
Тег <select> имеет один или более параметров между стартовым тегом <select> и завершающим </select>. по умолчанию, первый элемент отображается в строке выбора. вот пример тега <select>:
<form>
<select name=group>
<option> at 386
<option> at 486
<option> at 586
</select>
</form>
Тег <select single> – это то же самое, что и <select>, но на экране пользователь видит одновременно несколько элементов выбора (три по умолчанию). если их больше, то предоставляется автоматический вертикальный скроллинг. количество одновременно отображаемых элементов определяется атрибутом size, например:
<form>
<select single name=group size=4>
<option> at 386
<option> at 486
<option> at 586
<option> pentium pro
</select>
</form>
Тег <select multiple> похож на тег <select single>, но пользователь может одновременно выбрать более чем один элемент списка. атрибут size определяет количество одновременно видимых на экране элементов, атрибут multiple - максимальное количество одновременно выбранных элементов. пример:
<form>
<select single name=group size=4 multiple=2>
<option> at 386
<option> at 486
<option> at 586
<option> pentium pro
</select>
</form>
Если выбрано одновременно несколько значений, то серверу передаютс соответствующее выбранному количество параметров name=value с одинаковыми значениями name, но разными value.
Пример 2. Использование формы
<form method=post action=«email»>
<input type=checkbox> – в <form> создается элемент ввода «опция»;
<input type=file> – в <form> создается элемент ввода «выбор файла»;
<input type=hidden> – в форме создается скрытый элемент;
<input type=image> – создается элемент ввода «изображение»;
<input type=password> – создается элемент ввода текста с обеспечением защиты содержимого;
<input type=radio> – создается элемент ввода «селекторная кнопка»;
<input type=reset> – создается кнопка сброса;
<input type=submit> – создается кнопка передачи;
<input type=text> – создается элемент ввода текста;
Тег option – с помощью конструкции тегов <option> определяется меню внутри элемента <select>;
Тег select – начальный и конечный теги определяют меню с несколькими вариантами выбора или список;
Тег textarea – многострочная область ввода текста в форме;
</form>
Тег <IMG>
Тег <IMG> Используется для вставки в тело документа графического изображения. Под графическим изображением подразумевают: маленькие пиктограммы, рисунки, графические объекты и карты изображений, занимающие большую часть окна браузера. Кроме того, тег <IMG> поддерживает различные атрибуты, определяющие расположение изображения относительно окружающего текста и содержания Web страницы в целом. Изображение может выравниваться по левой, правой, верхней или нижней границе строки или располагаться в центре окна. Синтаксис:
<IMG src="URL атрибуты">
<img src =... al t=... align =... width =... height= ...border = ... hspace =... vspace=...>
Пример: <img src=“ship.gif” alt=“Белорусско-Российский университет” align=left width=70 height=50 border=2 hspace=3 vspace=3> |
Описание атрибутов тега img: src – путь к файлу; alt – текст подписи; align – выравнивание; width – ширина; height – высота; border – толщина контура; hspace – отступ текста по горизонтали от изображения; vspace – отступ текста по вертикали от изображения |
Тег <object>
Тег <object> вставляет в документ графическое изображение, видео клип, апплет Java, или элемент управления ActiveX. Можно сказать, что он пришел на смену тегу <applet> т.к. с помощью последнего можно вставить только лишь апплет Java. Единый для всех объектов и модулей тег <object> функционально замещает тег IMG и при необходимости может расширяться.
Тег <table>
Тег <table> используется с целью внедрения таблиц в Web-страницу. Они удобны тем, что браузер сам прорисовывает рамку таблицы. Размер рамки может задаваться, как фиксировано, так и автоматически согласовываться с размерами окна просмотра браузера и с размерами, находящегося в ячейках текста и рисунков. Кроме того таблицы позволяют решать чисто дизайнерские задачи: выравнивать части таблицы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением, разбивать текст на колонки и т.д.
В этом случае следует предостеречь от совершения очень распространенной ошибки, когда для выравнивания текста и задания отступов дизайнеры вставляют всю страницу в одну единственную таблицу, но забывают о такой особенности, что содержимое таблицы не прорисовывается частями и посетителю придется ждать пока загрузится все содержимое таблицы, особенно досадно, если общий объем текста достаточно велик.
Следует иметь в виду, что само по себе использование таблиц для визуального форматирования есть нарушение принципа, которого рекомендует придерживаться W3C – таблицы должны использоваться только для внедрения таблиц, а позиционировать теги необходимо при помощи слоев.
При создании таблиц используется принцип вложения: между тегами <table> и </table> задается заголовок вне рамки таблицы <caption>, создается ряд тегов <tr>, определяющих начало строки, а внутри этих тегов размещаются теги <td>, описывающие ячейки, и <th>, описывающие заглавные ячейки.
<!DOCTYPE html>
<html>
<head>
<title>Пример выбора шрифта</title>
</head>
<body>
<font size=5>
<UL>
<LI> рука
<LI> нога
<LI> голова
</UL>
</font>
<font face=″Arial″, ″Helvetica″ size=6>
Это пример выбора шрифта <font>
<br><br>
<font size=7>
<table border=1 width=20%>
<tr>
<td>11</td><td>22</td><td>44</td>
</tr>
<tr>
<td colspan=3 align=center>55</td>
</tr>
</table>
</font>
</body>
</html>
Гиперссылки. Тег <A>
<a href=... title=...> текст или указатель на объект</a>
Примеры
<a href=“my.html”>Щелкните по этой ссылке</a>
<a href=“ship.gif” title=“Корабль моей мечты”> Ничего кораблик!!!</a>
<a href=“mailto:maryia@study.minsk.by”>Письмо</a>
Абсолютный и относительный путь
../abc/xyz.html
Файл HTML с именем xyz.html находится в подкаталоге abc каталога, лежащего на один уровень выше текущего;
../../abc/xyz.html
Файл HTML с именем xyz.html находится в подкаталоге abc каталога, лежащего на два уровня выше текущего
Теги списков
Существует три основных вида списков в HTML-документе:
нуменрованный
ненуменрованный
список описаний (определений)
Вы можете создавать вложенные списки, используя различные теги списков или повторяя одни внутри других. Для этого просто необходимо разместить одну пару тегов (стартовый и завершающий) внутри другой. Будут ли элементы вложенного списка иметь те же маркеры, обозначающие элемент списка - зависит от браузера. Более подробно смотри в разделе "Вложенные списки".
Нумерованные списки
В пронумерованном списке браузер автоматически вставляет номера элементов по порядку. Это означает, что если вы удалите один или несколько элементов пронумерованного списка, то остальные номера автоматически будут пересчитаны.
Пронумерованный список начинается стартовым тегом <ol> и завершается тегом </ol>. Каждый элемент списка начинается с тега <li>. Например:
<ol>
<li> Программирование
<li> Алгоритмизация
<li> Проектирование
</ol>
Программирование
Алгоритмизация
Проектирование
Тег <ol> может иметь параметры:
<ol type=A|a|I|i|1 start=n>
где:
type
Вид счетчика:
A - большие латинские буквы (A,B,C...)
a - маленькие латинские буквы (a,b,c...)
I - большие римские цифры (I,II,III...)
i - маленькие римские цифры (i,ii,iii...)
1 - обычные цифры (1,2,3...)
start=n
Число, с которого начинается отсчет
Например:
<ol type=i start=15>
<li> Программирование
<li> Алгоритмизация
<li> Проектирование
</ol>
Программирование
Алгоритмизация
Проектирование
Ненумерованные списки.
Для ненумерованных списков броузер обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь броузера.
Пронумерованный список начинается стартовым тегом <ul> и завершается тегом </ul>. Каждый элемент списка начинается с тега <li>. Например:
<ul>
<li> Программирование
<li> Алгоритмизация
<li> Проектирование
</ul>
Программирование
Алгоритмизация
Проектирование
Тег <ul> может иметь параметр:
<ul type=disc|circle|square>
Тип тега <ul> определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square). Например:
<ul type=square>
<li> Программирование
<li> Алгоритмизация
<li> Проектирование
</ul>
Программирование
Алгоритмизация
Проектирование
Вложенные списки
Дадим пример вложенных списков:
<html>
<head>
<title> Список сотрудников </title>
</head>
<body>
<h2> Список сотрудников нашей фирмы </h2>
<h3> Составлено : 30 июля 1996 года </h3>
Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании. <p>
Список может быть использован только в служебных целях. <P>
<ol>
<li> Дирекция
<ul>
<li> Иванов И.И.
<li> Петров К.В.
</ul>
<li> Отдел маркетинга
<ul>
<li> Варшавская Е.Л.
<li> Самсонов Д.М.
</ul>
</ol>
</body>
</html>
Вот, что вы увидите на экране браузера: