Шаблон документа
Шаблон документа
Шаблон документа
Шаблон документа
Шаблон документа
Шаблон документа
Шаблон документа
Цветовое оформление
в начало каждого нового абзаца вашего текста, и программа просмотра отделит абзацы друг от друга пустой строкой.
Форматирование текста
…
Форматирование текста
There will never be
Another one like you
There will never be
Another one who can
Do the things you do....
Форматирование текста
Структурирование текста
Структурирование текста
Структурирование текста
Применяется для вывода небольшого куска программного кода (для больших листингов используется тег ) шрифтом фиксированной ширины.
Этот элемент обычно используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст курсивом.
Элемент, выделяющий шрифтом фиксированной ширины текст, вводимый пользователем с клавиатуры.
Используется для выделения нескольких символов шрифтом фиксированной ширины.
Этот элемент обычно используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст полужирным шрифтом.
Используется для отметки имен переменных. Обычно такой текст отображается курсивом.
Логическое форматирование
Слайд 25Возможно, вам захочется включить в документ какую-либо длинную цитату. Для выделения
цитаты из основного текста в HTML существует элемент . Этот элемент является контейнером и может содержать любые форматирующие теги.
Современные браузеры реагируют на элемент смещением текста цитаты вправо. Некоторые текстовые программы просмотра обозначают цитату символами >, располагающимися в крайнем левом столбце экрана. Так как сегодня большинство браузеров являются графическими программами, элемент < blockquote > позволяет авторам внести в текст некоторое визуальное разнообразие.
Элемент blockquote
Слайд 26Последней "инстанцией" определения внешнего вида вашего документа, как отмечалось уже неоднократно,
является программа просмотра читателя. Вы имеете ограниченные возможности повлиять на этот процесс с помощью элементов физического форматирования:
Выделяет текст полужирным шрифтом.
Выделяет текст курсивом.
Выводит текст шрифтом фиксированной ширины.
Элемент подчёркивания.
Элемент зачеркивания. Отображается текст, перечеркнутый горизонтальной линией.
Выводит текст шрифтом большего размера.
Выводит текст шрифтом меньшего размера.
Сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера.
Сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера.
Физическое форматирование
Слайд 28Элемент font представляет собой контейнер, т. е. требует как открывающего, так
и закрывающего тегов. После стартового тега обязательно идет указание атрибутов, без которых элемент не оказывает никакого влияния на текст, помещенный в контейнер. Элемент font может использоваться внутри любого другого текстового контейнера.
Имеет следующие атрибуты:
face – позволяет указать тип шрифта, которым программа просмотра выведет ваш текст (если таким располагает пользователь). Параметром атрибута служит название шрифта, которое должно в точности совпадать с названием шрифта, имеющегося у пользователя.
size – служит для указания размера шрифта в условных единицах от 1 до 7. Размер может быть указан как абсолютной величиной (size="5"), так и относительной (size="+2"). Последний метод чаще употребляется вместе с basefont.
Color – устанавливает цвет шрифта.
Синтаксис:
Тег FONT
Слайд 29Тег служит для указания размера, типа и цвета шрифта, стандартных
для данного документа. Эти величины обязательны для всего документа, если только не переназначаются при помощи элемента font.
После закрытия элемента font значения тэга восстанавливаются. Значения атрибутов basefont могут быть изменены другим тегом в любом месте документа. Обратите внимание, что это не контейнер и закрывающего тега не существует.
Тег использует те же самые атрибуты, что и элемент font.
Тег BASEFONT
Слайд 30Рассмотрим пример:
Шаблон
This text is before the BASEFONT tag.
is after the BASEFONT tag.
Size changes are relative to the basefont
SIZE.
This text is after the closing font tag
Тег BASEFONT
Слайд 31Различают форматы растровых и векторных изображений. Растровые изображения хранятся в файлах
с расширениями jpg, gif, bmp, tiff, png, psd. Векторные – swf, cdr, max, ai.
В веб - разработке используются JPEG, PNG и GIF для растровой графики и SWF для векторной. Все три формата для растровой графики используют сжатие графической информации.
Формат GIF позволяет создавать анимированные картинки. Этот формат является сжатым, и допустимое количество цветов в нем 256. Сжатие происходит без потерь, т.е. изображение записывается без каких-либо преобразований.
Формат JPEG также является сжатым, и применяется для изображений требующих большое количество цветов вплоть до 16 млн. Сжатие происходит после оптимизации и поэтому происходят потери в качестве. Размер файла сильно зависит от требуемого качества изображения, которое может иметь около 12 уровней качества (от очень плохого до наилучшего).
Стандарт PNG позволяет создавать изображения в 16 млн. цветов без потери в качестве. Но из-за этого занимает намного больше места, чем JPEG.
Форматы изображений
Слайд 32Для того, чтобы вставить в документ изображение необходимо воспользоваться тегом
совместно с атрибутом src, поместив их в нужное место вашего HTML-документа.
Синтаксис:
По умолчанию браузер выводит изображение немедленно после текста или другого объекта, описанного предыдущими инструкциями.
Помимо атрибута src тег имеет следующие атрибуты:
alt - Этот атрибут задает текст, который будет изображаться вместо картинки, если она не загрузилась или не отображается. Как правило в тексте указывается краткое описание изображения.
Вставка графики
Слайд 33align Задает расположение рисунка в окне браузера и его выравнивание относительно
текущей строки. Имеет следующие значения:
top - Выравнивает верхний край изображения по верхнему краю текущей строки.
middle Выравнивает центр изображения по базовой линии текущей строки.
Вставка графики
Слайд 34bottom Установка по умолчанию. Выравнивает нижний край изображения по базовой линии
текущей строки.
left Выравнивает изображение по левому краю окна браузера.
right Выравнивает изображение по правому краю окна браузера.
width - задает ширину области в пикселях, отводимой в окне под изображение.
height - задает высоту области в пикселях, отводимой в окне под изображение.
Вставка графики
Слайд 35hspace Используется для указания ширины пространства слева и справа от изображения
в пикселях.
vspace Используется для указания ширины пространства сверху и снизу от изображения в пикселях. Как правило по умолчанию равно 0. Но может быть и иным.
border Задает толщину рамки, которой будет обрисовываться изображение. Если изображение не является ссылкой, то оно по умолчанию не окружается рамкой. Если же это изображение-ссылка, то толщина рамки будет равна 2. Рамка иногда может портить стиль вашей страницы, тогда используйте border=0.
Вставка графики
Слайд 37Основы работы с видео и звуком
Предусмотрено два тега для работы с
аудио и видео соответственно:
Слайд 38Видео добавляется аналогичным образом:
Атрибуты тега :
autoplay – при
его добавлении, воспроизведение файла начинается сразу же после загрузки страницы;
controls – добавляет панель управления к видео;
height – задает высоту области, для воспроизведения видео.
loop – воспроизведение аудио повторяется с начала, после его завершения;
poster – указывает путь к изображению, пока видео не воспроизводится, или недоступно;
preload – используется для загрузки аудиофайла вместе с загрузкой самой страницы, игнорируется, если использован autoplay;
src – задает путь к файлу для воспроизведения.
width – задает ширину области, для воспроизведения видео.
Слайд 39Гиперссылки являются основным элементом HTML, позволяющим связывать отдельные страницы в единое
электронное издание. Гиперссылка состоит из двух частей. Первая из них – это то, что вы видите на WEB-странице; она называется указатель (anchor). Вторая часть, дающая инструкцию браузеру, называется адресной частью ссылки (URL-адресом, URL reference). Когда вы щелкаете мышью по указателю ссылки, браузер загружает документ, адрес которого определяется URL-aдpecoм. Составные части ссылки рассмотрены ниже. Кодируется гиперссылка с помощью тега :
Синтаксис:
Указатель
УКАЗАТЕЛИ:
Указателем ссылки может быть слово, группа слов или изображение. Текстовый указатель как правило представляется браузером синим цветом и подчеркивается. Графический указатель не подчеркиваются и не выделяется цветом, но вокруг него можно сделать рамку. Для того, чтобы задать графический указатель, надо вместо текста между тегами … вставить нужное изображение с помощью тега
.
Синтаксис:
Гиперссылки
Слайд 40Помимо атрибута href у тега имеются еще атрибуты:
title - предоставляет
читателю дополнительную информацию.
Синтаксис:
target позволяет определить окно, в которое будет загружен документ. Имеет следующие значения:
Имя окна. Имя окна задаваемое пользователем, в котором будет открыт документ; при этом проверяется, имеется ли окно браузера с данным именем, если таковое отсутствует, то окно создается и в него загружается документ.
_blank документ загружается в новое окно браузера
_parent документ загружается в окно браузера, породившее данное.
_self загрузка документа осуществляется в то же окно.
_top при работе с фреймами задание этого значения приводит к тому, что документ, на который указывает гиперссылка, загружается в окно вместо набора фреймов
Синтаксис:
Гиперссылки
Слайд 41Для построения внутренней ссылки сначала нужно создать якорь, показывающий место назначения.
Например, если вы хотите сделать ссылку на текст в середине документа, нужно разместить там якорь и дать ему имя при помощи атрибута name тега . При этом атрибут href не используется, и браузер не выделяет содержимое тега <а>.
После того как якорь получил имя, можно приступить к созданию ссылки на него. Для этого, вместо указания в атрибуте href адреса документа, как это делалось ранее, поместим туда имя якоря со специальным префиксом (#), говорящим о том, что это внутренняя ссылка.
Гиперссылки
Слайд 42Создание ссылки на электронную почту так же просто, как и на
другую страницу.
Вместо http, определяющего Web-адрес, нужно ввести адрес электронной почты после слова mailto:
Send me E-mail.
Эта ссылка ничем не будет отличаться от остальных гипертекстовых ссылок вашего документа.
Гиперссылки
Слайд 43В HTML список состоит из тега-контейнера списка, определяющего его тип, и
стандартных тегов , предваряющих каждый пункт списка. Упорядоченный список используется для нумерованного перечисления отдельных пунктов или указания последовательности каких-то действий. Когда программа просмотра встречает тег упорядоченного списка, она последовательно нумерует пункты списка: 1, 2, 3 и т.д.
Упорядоченный список открывается тегом , а каждый его пункт начинается стандартным тегом - . Для создания заголовка списка используется специальный тег
. Список закрывается тегом
. Открывающий и закрывающий теги обеспечивают перевод строки до и после списка, отделяя таким образом список от остального текста, поэтому здесь нет необходимости использовать теги абзаца . Упорядоченные списки допускают вложения друг в друга.
Списки в HTML
Слайд 45Атрибуты тега
type="A" Устанавливает маркер в виде прописных букв.
type="а" Устанавливает маркер
в виде строчных букв.
type=«I" Устанавливает маркер в виде больших римских цифр.
type="i" Устанавливает маркер в виде маленьких римских цифр.
type="1" Устанавливает маркер в виде арабских цифр.
start="n" Устанавливает начальный маркер в текущем списке.
Использование разных типов маркеров позволяет лучше выделять один список из другого.
Списки в HTML
Слайд 46Неупорядоченный список вместо буквенной или цифровой нумерации предполагает использование различных символов,
называемых маркерами списка (bullets).
Как и в упорядоченных списках, здесь также обеспечивается перевод строки до и после списка, а также допускается вложенность списков. Список располагается внутри контейнера ul. Программы просмотра создают автоматический отступ для вложенных списков и сами разнообразят маркеры, вид которых зависит от типа программы.
Маркированный список имеет единственный атрибут type, который устанавливает вид маркера. Данный атрибут допускает три значения : disc, square и circle.
Списки в HTML
Слайд 47Списки определений, также называемые словарями специальных терминов (глоссариями), являются особым видом
списков HTML. Они представляют текст в форме словарной статьи, состоящей из определяемого термина и абзаца, раскрывающего его значение.
Элемент списка определений dl является контейнером и обеспечивает отделение списка от остального текста пустыми строками. Внутри контейнера тегом помечается определяемый термин, а тегом – абзац с его определением. Текст, стоящий за тегом , выводится отдельным абзацем с отступом вниз на одну или две строки (зависит от типа программы просмотра) относительно определяемого термина.
Списки в HTML
Слайд 48Для того, чтобы определить таблицу нужно воспользоваться тегом
Тег представляет
собой тег-контейнер, в котором размещается содержимое таблицы. Таблица строится по строкам: для обозначения строки используется контейнер , для обозначения заголовков столбцов (строк) – контейнер , а для данных в ячейках – контейнер . Заголовки выделяются полужирным шрифтом и центрируются в своих ячейках.
В дополнении к этим тегам используются следующие атрибуты:
align Задает выравнивание, допустимые значения: left-по левому краю, right-по правому краю, center-по центру. Задание этого атрибута в теге приводит к выравниванию таблицы относительно окна браузера, а в тегах или отражается на содержимом ячеек таблицы.
bgcolor Используется в тегах , ,. Задает цвет фона.
border Используется в теге . Задает толщину рамки таблицы. Если задать border="0", то границы ячеек становятся невидимыми
cellpadding Атрибут тега
, задает расстояние между границами и содержимым ячеек в пикселях
cellspacing Атрибут тега
, задает расстояние между ячейками таблицы в пикселях.
Основы построения таблиц
Слайд 49colspan Атрибут тега .Значение атрибута определяет сколько столбцов таблицы будет
занимать данная ячейка.
rowspan Атрибут тега
.Значение атрибута определяет сколько строк таблицы будет занимать данная ячейка
height Атрибут тега . Задает высоту таблицы
width Атрибут тега
. Задает ширину таблицы
valign Атрибут тега и ), либо заполнить ее специальным символом пустого пространства ().
Основы построения таблиц
Слайд 54До сих пор мы считали, что в каждый момент времени в
окне браузера может отображаться только один документ. Фреймы же позволяют нам открыть в окне браузера - не один, а одновременно несколько документов.
Для того, чтобы браузер показал одновременно несколько документов, надо создать специальный фрейм-документ, в котором мы укажем, сколько документов откроется в одном окне браузера, сколько места будет занимать каждый и каким образом они будут располагаться относительно друг друга.
Для описания набора фреймов используется контейнер ...
В этом случае шаблон странички будет выглядеть следующим образом:
Заголовок документа
Фреймы
Слайд 55Тег поддерживает два атрибута: cols и rows, один из которых
обязательно необходимо включить в определение набора фреймов. Формат определения набора фреймов имеет вид:
Или
Атрибут cols предписывает браузеру разбить экран на несколько вертикальных фреймов, ширина которых определяется аргументами cols. Каждый аргумент отделяется от другого запятой. Вы можете определить ширину каждого фрейма либо непосредственно в пикселях, либо в процентах от оставшегося места, либо с помощью звездочки (*). При использовании звездочки, браузер отводит данному фрейму максимально возможную ширину.
Следующее определение набора фреймов
Создает три вертикальных фрейма, самый левый из которых имеет ширину 100 пикселей, второй - 50% от ширины окна браузера, а третий занимает оставшееся пространство.
Данный набор фреймов будет выглядеть следующим образом:
Фреймы
Слайд 57Атрибут rows выполняет те же функции, что и атрибут cols, за
исключением того, что он создает горизонтальные фреймы.
Если Вы теперь самостоятельно попытаетесь воспроизвести последний пример, закодировав теги , то обнаружите, что фреймы не отображаются. Такой результат связан с тем, что не определено содержимое для набора фреймов.
Чтобы определить его, надо воспользоваться тегом вместе с атрибутом src.
Синтаксис:
Для предыдущего примера описание фреймов имеет вид :
Слайд 58scrolling Регулирует появление полос прокруток. Имеет три значения:
auto Если содержимое фрейма
занимает больше места, чем ему отведено, то браузер автоматически добавляет вертикальную и горизонтальную полосы прокрутки, чтобы пользователь мог просмотреть оставшуюся часть документа в фрейме.
no В данном случае полосы прокрутки не будут появляться ни при каких обстоятельствах
yes Полосы прокрутки будут появляться всегда вне зависимости от потребности в них.
noresize По умолчанию, пользователь может менять положение границ фреймов, перетаскивая их с помощью мыши. Для блокировки изменения размеров фрейма и предотвращения перемещения границ используется данный атрибут
marginheight Позволяет указать размер верхнего и нижнего полей фрейма
marginwidth Позволяет указать размер левого и правого полей фрейма
name Имя фрейма.
Фреймы
Слайд 59Решим теперь вопрос о том, как работать с гиперссылками в HTML-страницах
с фреймами. Если например в левом фрейме создать гиперссылку:
Документ 1,
то документ doc.html будет загружен в тот же фрейм. Для того, что бы загрузить документ в другом фрейме, нужно воспользоваться атрибутом target= " имя фрейма " тега
Фреймы
Слайд 61В HTML существует три тега для создания различного типа полей в
форме: задает вертикальное выравнивание содержимого в ячейках. Допустимые значения: top-по верхней границе ячейки, middle-по центру, bottom-по нижней границе.
В ячейках таблицы можно помещать любые допустимые конструкции HTML в том числе и картинки и другие таблицы.
Наличие в ячейках данных необязательно. Создать пустую ячейку можно двумя способами: ничем не заполнять ее контейнер (