Создайте Ваш сайт учителя Курсы ПК и ППК Видеоуроки Олимпиады Вебинары для учителей
Данное электронное учебное пособие помогает научиться создавать Web - сайты с использованием языка разметки текста HTML в простейшем текстовом редакторе Блокнот.
. Дидактические цели ЭУП:
Министерство образования Тульской области
Государственное профессиональное образовательное учреждение
Тульской области
«Донской колледж информационных технологий»
Назначение и основные понятия
Структура HTML-документа
Форматирование текста
Электронное учебное пособие
Работа с изображениями
Коммуникационные технологии и разработка Web – сайтов
Создание ссылок
Навигационные карты
Использование таблиц
Сбор информации с помощью форм
Разработчик
преподаватель специальных дисциплин
Демихова Ирина Юрьевна
Создание фреймов
2014 год
Назначение и основные понятия
Web – страницы создаются с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language) . В обычный текстовый документ вставляются управляющие символы – HTML-теги , которые определяют вид Web – страницы при ее просмотре в браузере.
Если мы загрузим какой-нибудь сайт и выберем в главном меню обозревателя команду Вид | Просмотр HTML-кода, то откроется окно Блокнота и в нем отобразится текст документа, написанный на HTML – на языке разметки гипертекста.
HTML-документы представляют собой текстовые файлы, в которые встроены специальные команды.
Теги (tags) – команды языка HTML
Для файлов, являющихся HTML-документами, принято расширение htm или html .
2
Назначение и основные понятия
Формат тэга:
У многих тэгов есть свои атрибуты. Их назначение – уточнять тэги, более подробно описывать действия над текстом, графикой или другими объектами.
Атрибуты можно записывать в произвольном порядке через пробел. Значения атрибутов можно не заключать в кавычки и даже лучше не заключать (если это не два слова!), чтобы не запутаться, т.к. непарные кавычки – это ошибка, из-за которой команда не выполняется.
Особенность создания HTML-документа – в том, что создается он в Блокноте, а просматривать его можно в окне обозревателя, например, Internet Explorer.
Каждый раз, внося изменения в текст HTML-документа, следует его сохранять и обновлять в окне Internet Explorer, выбирая соответствующую команду или кнопку на панели инструментов , или клавишу .
Сообщения об ошибках, допущенных в формате тэгов, не появляются.
Ошибки нужно искать самостоятельно, если результат при просмотре сайта не соответствует ожидаемому!
3
Структура HTML-документа
Тэги заключаются в угловые скобки и могут быть одиночными или парными. Парные тэги содержат открывающиеся и закрывающиеся тэги ( такая пара называется контейнером). Закрывающийся тэг содержит прямой слэш (/) перед обозначением. Тэги могут записываться как прописными, так и сточными буквами.
HTML-код страницы помещается внутрь контейнера . Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web – страница разделяется на две логические части: заголовок и содержание.
Заголовок Web-страницы заключается в контейнер и содержит название страницы и справочную информацию о станице, которая используется браузером для ее правильного отображения.
Название страницы помещается в контейнер и при просмотре отображается в верхней строке окна браузера.
Отображаемое в браузере содержание страницы помещается в контейнер .
Созданную Web – страницу необходимо сохранить в виде файла с расширением htm . В качестве расширения файла Web – страницы можно также использовать html . Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.
Моя первая страница
… тело документа
…
Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе, и имя Web-страницы, которое высвечивается в верхней строке браузера. Имя Web- страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами.
4
– отмена полужирного шрифта. – курсив. – отмена курсива. – подчёркивание. – отмена подчёркивания. – полужирный шрифт. – отмена полужирного шрифта. Введя в Блокноте HTML-код и сохранив файл в формате html, можно запустить его, и в окне Internet Explorer отобразится содержание документа. 5" width="640"
Форматирование текста
При использовании лишь рассмотренных выше тэгов страница будет выглядеть на слишком привлекательно – мелкий шрифт черного цвета на белом фоне. С помощью следующих тэгов можно задать различные параметры форматирования текста.
ЗАГОЛОВКИ
Размер шрифта заголовков задается парами тэгов от (самый крупный) до (самый мелкий).
Для форматирования заголовков используются следующие пары тэгов:
– полужирный шрифт.
– отмена полужирного шрифта.
– курсив.
– отмена курсива.
– подчёркивание.
– отмена подчёркивания.
– полужирный шрифт.
– отмена полужирного шрифта.
Введя в Блокноте HTML-код и сохранив файл в формате html, можно запустить его, и в окне Internet Explorer отобразится содержание документа.
5
– изменение шрифта. FONT – отмена действия шрифта. Атрибуты: FACE = “ название шрифта” – изменение гарнитуры (начертания) шрифта (например, FACE=“Arial”). SIZE = размер шрифта – изменение размера шрифта фрагмента текста, используется в середине строки, т.к. после окончания своего действия не разбивает строку (например, SIZE=4). Атрибуты могут перечисляться через пробел в произвольном порядке. Лучше не использовать «экзотические» шрифты, которых может не оказаться у пользователя при просмотре вашего сайта. В этом случае они автоматически будут заменяться на стандартные. 6" width="640"
Форматирование текста
ШРИФТЫ
Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. С помощью тэга и его атрибутов можно задать параметры форматирования шрифта.
FONT – изменение шрифта.
FONT – отмена действия шрифта.
Атрибуты:
FACE = “ название шрифта” – изменение гарнитуры (начертания) шрифта (например, FACE=“Arial”).
SIZE = размер шрифта – изменение размера шрифта фрагмента текста, используется в середине строки, т.к. после окончания своего действия не разбивает строку (например, SIZE=4).
Атрибуты могут перечисляться через пробел в произвольном порядке.
Лучше не использовать «экзотические» шрифты, которых может не оказаться у пользователя при просмотре вашего сайта. В этом случае они автоматически будут заменяться на стандартные.
6
Форматирование текста
COLOR = « название цвета или его шестнадцатеричный код» изменение цвета текста.
Например, чтобы в окне обозревателя текст отображался красным цветом, нужно ввести в HTML-код такую команду:
текст
7
Форматирование текста
Шестнадцатеричное представление цвета использует RGB- формат “#RRGGBB” , где две первые шестнадцатеричные цифры задают интенсивность красного (Red) , две следующие - интенсивность зеленого (Green) и две последние – интенсивность синего (Blue) цветов. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная – FF. Например синий цвет задается значением “#0000FF” .
Для изменения цвета можно использовать таблицу цветовых оттенков.
8
– переход на следующую строку. PRE – отображение без изменения форматирования. PRE – отмена отображения без изменения форматирования. Пример действия этого тега: первый абзац отображается так, как введен в блокноте, т.к. на него распространяется действие тега, а второй абзац отображается произвольным образом. – текст сдвигается вверх (верхний индекс). SUP – отмена сдвига. – текст сдвигается вниз (нижний индекс). – отмена сдвига. 9" width="640"
Форматирование текста
Горизонтальная линия
Заголовок целесообразно отделять от остального содержания страницы горизонтальной линией с помощью одиночного тэга .
Атрибуты тега
SIZE = “ толщина линии” в пикселях
WIDTH = “ширина линии” в пикселях или 80%
LEFT
ALIGN = RIGHT
CENTER
Абзацы.
BR – переход на следующую строку.
PRE – отображение без изменения форматирования.
PRE – отмена отображения без изменения форматирования.
Пример действия этого тега:
первый абзац отображается так, как введен в блокноте, т.к. на него распространяется действие тега, а второй абзац отображается произвольным образом.
– текст сдвигается вверх (верхний индекс).
SUP – отмена сдвига.
– текст сдвигается вниз (нижний индекс).
– отмена сдвига.
9
Форматирование текста
Разделение текста на абзацы производится с помощью контейнера . При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и параметры форматирования шрифта.
Атрибуты тега
для выравнивания текста
Атрибуту ALIGN может быть присвоено одно из 4-х значений:
LEFT
ALIGN = RIGHT
CENTER
JUSTIFY
Позволяет выравнивать текст :
Пример записи и результат действия этого тега с различными значениями атрибутов.
10
Если графический файл находится на локальном компьютере в той же папке, что и файл Web – страницы, то в качестве значения атрибута SRC достаточно указать только имя файла. SRC = “computer.jpg” Если файл находится в другой папке на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в многоуровневой системе папок. Есть различия в написании полного имени файла в операционных системах Windows и Linux. Рассмотрим на примере операционной системы Windows: SRC = “С:\computer \ computer.jpg” Если файл находится на удаленном сервере в Интернете, то должен быть указан Интернет – адрес этого файла. Например: SRC = “http:/www.server.ru/computer.jpg” Все файлы с изображениями должны находиться в том же каталоге, что и HTML-документ, или в качестве значения атрибута IMG кроме имени файла и расширения имени файла нужно указывать путь к файлу. 11" width="640"
Работа с изображениями
Вставка графических изображений
На Web – страницы можно помещать изображения, хранящиеся в графических файлах трех форматов – GIF, JPEG, PNG .
Для вставки изображения используется тэг с атрибутом SRC , который указывает на место хранения файла на локальном компьютере или в Интернете.
SRC = “имя файла. расширение “
Если графический файл находится на локальном компьютере в той же папке, что и файл Web – страницы, то в качестве значения атрибута SRC достаточно указать только имя файла.
SRC = “computer.jpg”
Если файл находится в другой папке на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в многоуровневой системе папок. Есть различия в написании полного имени файла в операционных системах Windows и Linux. Рассмотрим на примере операционной системы Windows:
SRC = “С:\computer \ computer.jpg”
Если файл находится на удаленном сервере в Интернете, то должен быть указан Интернет – адрес этого файла. Например:
SRC = “http:/www.server.ru/computer.jpg”
Все файлы с изображениями должны находиться в том же каталоге, что и HTML-документ, или в качестве значения атрибута IMG кроме имени файла и расширения имени файла нужно указывать путь к файлу.
11
Работа с изображениями
Атрибуты тега
SRC = “имя файла. расширение”
ALT = “название картинки или поясняющий текст”
Используется в качестве текстового описания к данному изображению, появляется при наведении указателя мыши на картинку.
WIDTH = “ширина” (в пикселях или в %)
HIGHT = “высота” (в пикселях или в %)
BORDER = “число” в пикселях
Определяет рамку вокруг изображения.
HSPACE = “число” в пикселях
VSPACE = “число” в пикселях
Определяют горизонтальный и вертикальный отступ вокруг изображения соответственно .
Пример записи и результат действия этого тега с различными значениями атрибутов.
12
Работа с изображениями
Положение рисунка относительно текста.
Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN , который может принимать пять различных значение:
Атрибут ALIGN
LEFT
ALIGN = RIGHT
CENTER
Используется, чтобы сдвинуть картинку к левому, правому краю, по центру и установить обтекание картинки текстом.
Атрибут CLEAR
LEFT
CLEAR = RIGHT
ALL
Используется, чтобы очистить поле слева, справа или с обеих сторон графического объекта, а затем продолжить текст в пустой области за объектом.
Пример записи и результат действия тега с различными значениями атрибутов.
Если картинка не отображается, возможно неправильно указано имя файла, его расширение, или файл отсутствует в нужной папке.
13
14" width="640"
Работа с изображениями
Вставка альтернативного текста.
Пользователи иногда, в целях экономии времени, отключают в браузере загрузку графических изображение и читают только тексты. Чтобы не терялся смысл страницы, вместо рисунка должен выводиться альтернативный текст.
Альтернативный текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:
SRC = “computer.jpg” ALIGN = “right”
ALT = “Компьютер”
14
активный текст или изображение Если файл находится в другой папке, то нужно указывать путь к нему. Если создается ссылка на ресурс Интернета, то нужно указать его URL: = “ URL-адрес”активный текст или изображение Можно организовать сообщение по электронной почте = “ mailto:адрес электронной почты”активный текст или изображение Атрибуты тега для задания цвета ссылок LINK = “ цвет или код цвета” - задает цвет ссылки. VLINK = “ цвет или код цвета” - задает цвет просмотренной ссылки Пример записи и результат действия тегов с использованием изображения в качестве гиперссылки. 15" width="640"
Создание ссылок
Гиперссылки, размещенные на Web – странице, позволяют загружать в браузер другие Web – страницы, хранящиеся на локальном компьютере или в Интернете. Гиперссылка состоит из двух частей: адреса и указателя ссылки .
Гиперссылка создается с помощью универсального тэга, и его атрибута HREF, указывающего, в каком файле хранится загружаемая Web – страница.
= “имя файла. расширение” активный
текст или изображение
Если файл находится в другой папке, то нужно указывать путь к нему.
Если создается ссылка на ресурс Интернета, то нужно указать его URL:
= “ URL-адрес”активный текст или изображение
Можно организовать сообщение по электронной почте
= “ mailto:адрес электронной почты”активный текст или изображение
Атрибуты тега для задания цвета ссылок
LINK = “ цвет или код цвета” - задает цвет ссылки.
VLINK = “ цвет или код цвета” - задает цвет просмотренной ссылки
Пример записи и результат действия тегов с использованием изображения в качестве гиперссылки.
15
активный текст или изображение Создает ссылку на метку в текущем HTML-документе: = “ имя метки” начало текстового фрагмента Можно также создать ссылку на метку в другом документе: = “ имя файла # имя метки” активный текст или изображение Пример записи и результат действия тэгов. 16" width="640"
Создание ссылок
Ссылки на метки
Можно организовать ссылку на другую часть
этого же документа, если предварительно расставить в начале таких частей метки.
= “ #имя метки”активный текст или изображение
Создает ссылку на метку в текущем HTML-документе:
= “ имя метки” начало текстового фрагмента
Можно также создать ссылку на метку в другом документе:
= “ имя файла # имя метки” активный текст или изображение
Пример записи и результат действия тэгов.
16
Навигационные карты
Можно создавать ссылки с разных частей одного изображения, если предварительно выделить эти части (области) и определить их координаты. Такое изображение называют картой (map).
Изображения-карты часто используют для показа расположения помещений на планах и перехода по ссылке к описанию выбранного помещения.
Тег, который позволяет определить карту:
Между открывающим и закрывающим тегами определяются области карты при помощи тега
Для каждой области карты должен быть создан свой элемент , который должен включать атрибут, определяющий ссылку HREF= “адрес ссылки”
Атрибуты тега
Задаётся имя изображения-карты при помощи атрибута NAME.
NAME = имя
17
Навигационные карты
Атрибуты тега
alt = название области изображения-карты
Это атрибут для задания текста, заменяющего изображение-карту, не является обязательным.
Атрибут, определяющий форму области на карте:
rect
SHAPE = poly
сircle
point
COORDS =“x,y,x1,y1”
Описывает координаты прямоугольника rect (значения атрибута – координаты левого верхнего угла прямоугольника и правого нижнего).
COORDS =“x,y,x1,y1… xn,yn”
Описывает координаты многоугольника poly (значения атрибута – пары координат всех вершин многоугольника).
COORDS =“x,y,r”
Описывает координаты сircle (значения атрибута – координаты центра окружности и радиус).
COORDS =“x,y”
Описывает координаты точки point (значения атрибута – её координаты).
Определение координат областей для
изображения-карты.
Для определения координат можно использовать графический редактор Paint. Красными точками показаны координаты верхней левой точки необходимой области и правой нижней точки:
shape="rect" coords="235, 226, 341, 257"
18
Навигационные карты
Как связать карту с изображением
Для создания навигационной карты необходимо выполнить следующие два шага.
Воспользоваться тэгом , чтобы описать навигационную карту, включая области и гиперссылки.
Воспользоваться тэгом , атрибуты которого идентифицируют изображение и соответствующую ему карту.
Установить соответствие между изображением и картой с помощью атрибута usemap тэга .
В качестве значения атрибута usemap используется имя карты, заданное в атрибуте name тэга . Если описание карты расположено на той же станице, что и ссылка на изображение (как обычно и бывает), имени карты должен предшествовать символ цифры (#).
Например:
19
– начало заголовка таблицы. – конец заголовка таблицы. Заголовок располагается прямо по центру относительно ширины таблицы. (Table Header) – начало заголовков столбцов или строк таблицы. – конец заголовков столбцов или строк таблицы. (Table Row) – начало строки таблицы. – конец строки таблицы. – начало ячейки таблицы. – конец ячейки таблицы. Пример записи и результат действия тегов с различными значениями атрибутов. 20" width="640"
Использование таблиц
Формирование таблицы
– начало таблицы.
– конец таблицы.
– начало заголовка таблицы.
– конец заголовка таблицы.
Заголовок располагается прямо по центру относительно ширины таблицы.
(Table Row) – начало строки таблицы. – конец строки таблицы.
Пример записи и результат действия тегов с различными значениями атрибутов.
20
Использование таблиц
Атрибуты тега
Позволяет задать, какой документ (HTML-документ, текстовый, графический и т.д.) будет загружаться в отдельный кадр. Использование тега исключает использование тега ! Определяя структуру, кадры задают сверху вниз и слева направо. 26" width="640"
