Партнерка на США и Канаду по недвижимости, выплаты в крипто
- 30% recurring commission
- Выплаты в USDT
- Вывод каждую неделю
- Комиссия до 5 лет за каждого referral
Упражнение 2.
Создайте HTML – документ, по предложенному образцу. Таблица должна содержать строку с заглавиями, строку с текстом и строку с картинками.
|
Создайте HTML – документ, по предложенному образцу. Таблица прижата к правому краю, столбцы занимают 20% и 30% экрана соответственно.
|
Урок 13. Создание сложных таблиц.
Простые таблицы — довольно большая редкость. Гораздо чаще встречаются сложные таблицы, в которых ячейки располагаются одновременно в нескольких соседних столбцах или строках. Для объединения ячеек используют следующие атрибуты тэга <TD>:
· COLSPAN – сообщает программе просмотра, что нужно раздвинуть клетку таблицы на несколько столбцов. Например, если нужно объединить ячейки двух столбцов, напишем colspan =2.
· ROWSPAN – сообщает программе просмотра, что нужно раздвинуть клетку таблицы на несколько строк. Например, rowspan =2 растягивает клетку таблицы на две строки.
Фрагмент создания таблицы с различной шириной строк и столбцов.
<H1 align=center> Сложная таблица</H1>
<TABLE border=10 width=100%>
<TR>
<TD rowspan=2> большая ячейка A
<TD> маленькая ячейка 1
<TD> маленькая ячейка 2
</TR>
<TR>
<TD colspan=2> большая ячейка B
</TR>
</TABLE>
|
Упражнение 1.
Создайте HTML – документ, по предложенному образцу.
|
Упражнение 2.
Начало | ||
| Если enter западает На чужой клавиатуре, Ты облей ее кефиром, А потом помой под душем, Посильнее вдарь ей ломом, | |
Стукни пару раз об стенку, Со стола швырни-ка на пол, Походи по ней ногами… На чужих клавиатурах Это очень помогает! | ||
Конец |
Атрибут border тега <TABLE> устанавливает ширину бордюра (рамки таблицы) и может принимать любое значение от 0 до 10.
Ширина бордюра = 0 обозначает его отсутствие.
Упражнение 3.
<TABLE width="100 %" border=0>
<TR>
<TD colspan=4 bgcolor="lightblue">
</TR>
<TR>
<TD colspan=4 align=center>
Таблица цветов
</TR>
…
<TR>
<TD width=25%>
|
<TD width=25%>blue
<TD width=15% bgcolor="blue" >
<TD>
</TR>
…
Урок 14. Оформление таблиц.
Атрибут border тега <TABLE> управляет отображением всех границ таблицы, однако с его помощью можно установить толщину только внешней рамки таблицы. Для задания параметров внешних и внутренних границ используютя атрибуты frame и rules.
Атрибут frame тега <TABLE> задает отображение внешней рамки и может принимать следующие значения:
box все линии внешней рамки;
void внешняя рамка не отображается;
hsides только верхняя и нижняя линия рамки;
vsides только левая и правая линии рамки;
lhs только левая линия рамки;
rhs только правая линия рамки.
Атрибут rules тега <TABLE> задает отображение внутренней рамки и может принимать следующие значения:
none все линии внутренней рамки не отображаются;
rows отображаются только горизонтальные линии между строками;
cols отображаются только вертикальные линии между столбцами;
all отображаются все внутренние рамки.
|
Рамки таблиц отображаются в виде двойной линии, расстояние между которыми по умолчанию устанавливается в 2 пиксела.
Атрибут cellspacing тега <TABLE> изменяет это расстояние.
Атрибут bordercolor тега <TABLE> задает цвет внешней рамки.
Атрибут bordercolor тегов <TR>, <TH> и <TD> задает цвет внутренних рамок.
|
Упражнение 1.
Создайте HTML – документ, по предложенному образцу.
Внешняя рамка – синяя, внутренние – красные, расстояние между внутренней и внешней границами – 12 pt.
|
Создайте HTML – документ, по предложенному образцу.
Таблица занимает 70% окна браузера и прижата к левому краю.
Внешняя рамка – зеленая, шириной 10pt. внутренние – красные.
|
ТЕМА 7. ФОРМЫ
Урок 15. Создание форм.
Любой пользователь знаком с такими элементами управления, как кнопки, переключатели, флажки, выпадающие списки. С их помощью простая Web-страничка превращается в интерактивную.
Объединение логически связанных между собой элементов управления в HTML-документе называется формой.
Для создания формы применяется тег-контейнер <FORM></FORM> с атрибутом action=” ”, в котором содержится адрес, по которому будут отправлены данные с формы.
Внутри тега <FORM> могут размещаться элементы управления, которые создаются тегом <INPUT>. Атрибут type задает тип элемента.
<INPUT type=”text”> - создание текстового поля.
<INPUT type=”checkbox”> - создание переключателей-флажков(þ).
<INPUT type=”radio”> - создание кнопок выбора(¤).
<INPUT type=”submit”> - создание кнопки, для отправки данных из формы.
<INPUT type=”reset”> - создание кнопки для очистки полей формы.
Тег <TEXTAREA cols=n rows= m> - создание многострочного текстового поля. Его атрибуты задают количество столбцов и строчек в поле.
Для создания выпадающих списков используется тег-контейнер <SELECT>. Элементы списка задаются тегом <OPTION>.
Все элементы управления имеют атрибут name, который определяет имя элемента при передаче данных из формы, а также позволяет объединить переключатели и кнопки выбора в группы. Атрибут checked отвечает за установку флажка или переключателя.
Коротко о главном:
<FORM></FORM> - создание формы <INPUT> - создание элементов управления <SELECT> - создание выпадающих списков <TEXTAREA cols=n rows= m> - создание многострочного текстового поля. |
Упражнение 1.
…
<HR>
Уважаемые покупатели!!!<BR>
Чтобы заказать книгу в нашем магазине, Вы должны зарегистрироваться.<BR>
Заполните, пожалуйста, форму и сделайте запись в книге посетителей.
<FORM action="">
<PRE>
Фамилия: <INPUT type="text" size=60>
Имя: <INPUT type="text" size=60>
<BR> <BR>
</PRE>
Образование:
<INPUT type="radio" name="obr" checked>Высшее
<INPUT type="radio" name="obr">Среднее
<BR><BR>
Интересующий раздел:
<SELECT type="text">
<OPTION selected>Детская
<OPTION>Научная
<OPTION>Справочная
<OPTION>Художественная
</SELECT>
<BR><BR>
Книга посетителей:<BR>
<TEXTAREA rows=3 cols=60>Оставьте отзывы о нашем магазине</TEXTAREA>
<BR><BR>
<INPUT type="submit">
<INPUT type="reset">
…
Упражнение 2.
Упражнение 3.
Приложение 1. FRONT PAGE
Введение
Сегодня вниманию разработчиков Web-сайтов предлагаются сотни разнообразных инструментов разработки для WWW, и острая конкуренция в этой области весьма благоприятно сказывается на их качестве. К вашим услугам HTML-редакторы, требующие досконального знания HTML, графические пакеты, предполагающие наличие некоторого опыта работы в HTML, и, наконец, безусловный лидер в этой области — FrontPage, позволяющий вообще не знать HTML (или знать его в минимальном объеме). Первенство FrontPage среди инструментов Web-дизайна обусловлено тем, что с его помощью создание профессиональных Web-сайтов для Internet и intranet становится неправдоподобно легким делом.
Включив FrontPage в состав Office, компания Microsoft тем самым заявила, что отныне создание Web-сайтов переходит из занятия только для профессионалов во вполне будничное занятие офисного работника, точно такого же, как набор документа в Word или создание таблицы в Excel. Тем более что внешний вид программы практически полностью совпадает с внешним видом Word.
Окно программы FrontPage 2003
FrontPage позволяет создавать страницы в трех режимах: в режиме конструктора, в режиме с разделением и в режиме кода.
Конструктор позволяет сосредоточиться на визуальном создании Web-страниц. В этом режиме нет необходимости помнить HTML-теги, атрибуты, бесконечные наборы свойств CSS. Все элементы страницы создаются с помощью мыши. Нужна таблица, пожалуйста, нажали кнопку Добавить таблицу, выбрали количество строк и столбцов и таблица готова.
Режим кода позволяет вводить теги вручную. Здесь вы можете либо добавить новые элементы страницы, используя свои знания языка гипертекстовой разметки, либо исправить то, что было сделано в режиме конструктора. Естественно, что для работы с кодом необходимо владение HTML, без этого, увы, никуда не деться.
Режим с разделением представляет собой некий гибрид двух предыдущих способов создания и редактирования HTML-документов. При его использовании окно программы делится на две части, в одной отображается код страницы, а в другой – ее визуальное содержимое.
Кроме того, существует еще один режим под названием Просмотр. С его помощью можно увидеть, как будет отображаться страница в браузере. Режим конструктора для этой же цели не подходит. Документ будет выглядеть в нем несколько по-другому. Поэтому следует периодически при создании WEB-страницы тестировать ее в режиме Просмотра.
Создание WEB-узла из шаблона
Вместе с программой FrontPage поставляет набор заготовок-шаблонов типичных сайтов, которые на основе, которых можно создать собственное творение. Поэтому если у вас нет большого опыта WEB-конструирования, то рекомендуется воспользоваться готовым шаблоном, который правильно скомпонует ваш сайт, а вам останется лишь наполнить его содержанием. Итак, чтобы создать WEB-узел из шаблона необходимо выполнить команду меню Файл\ Создать и на панели Создание в Области задач выбрать пункт Другие шаблоны веб-узлов.
Создание сайта из шаблона
Появится окно со списком доступных шаблонов.
Набор шаблонов
Будем строить сайт на основе шаблона веб-узла технической поддержки, который предназначен для производителей программного обеспечения. Поэтому выберите соответствующий значок и нажмите кнопку ОК. Автоматически сгенерируется новый узел.
Готовый веб-узел
FrontPage предлагает несколько режимов просмотра узла, кнопки переключения между ними находятся в нижней части окна.
Кнопки переключения режимов просмотра веб-узла
· Папки – список папок и файлов web-узла с их подробными характеристиками, подобный списку окна Проводника Windows;
· Удаленный веб-узел можно использовать для публикации всего веб-узла или выборочной публикации отдельных файлов;
· Отчеты – статистическая информация об узле и отдельных его компонентах;
· Переходы – редактор структуры web-узла, позволяющий в графическом режиме изменять связи и перестраивать гиперссылки;
· Гиперссылки – список web-страниц узла и схема гиперссылок выделенной страницы;
· Задачи – список задач, связанных с определенными файлами, которые нужно не забыть выполнить для завершения разработки узла.
Чтобы отредактировать отдельную страницу нужно дважды щелкнуть мышью на ее имени в списке.
При создании сайта из шаблона вам может не понравиться созданная структура связей. С помощью режима просмотра Переходы можно увидеть общую схему узла, добавить или разорвать определенные ссылки, скорректировать правила размещения ссылок в панелях навигации web-страниц.
Режим просмотра Переходы
В этом режиме каждая страница отображается в виде прямоугольника, линии связывающие страницы символизируют взаимную подчиненность. Для переключения ориентации отображения прямоугольников книжная\ альбомная можно пользоваться соответствующей кнопкой на панели инструментов. Чтобы перейти к редактированию какой-либо страницы, достаточно дважды щелкнуть по соответствующему прямоугольнику. При этом страница откроется в новой закладке.
Открытие страницы в новой закладке
Для перехода по ссылкам режиме конструктора при щелчке мышью нужно удерживать клавишу Ctrl.
Режим просмотра гиперссылок позволяет просматривать дерево гиперссылок и проверять работоспособность внутренних и внешних ссылок узла.
1. Чтобы вывести дерево гиперссылок, перейдите на вкладку веб-узел и щелкните в на кнопке Гиперссылки. На экран будет выведен список папок и дерево гиперссылок. Обратите внимание в списке папок на миниатюру файла index. htm в виде домика. Это файл домашней страницы.
2. В панели списка папок щелкните на файле whatsnew. htm
FrontPage поместит значок выбранной страницы в середину окна и линиями покажет все ссылки, имеющиеся на этой странице.
Просмотр гиперссылок
Каждый web-узел строится на основе определенной схемы, задающей однотипное оформление всем стандартным элементам страниц. При разработке узла в любой момент можно сменить схему. Для этого следует выполнить следующие шаги.
1. Выберите команду Формат\ Тема. В Области задач откроется список доступных схем.
2. В списке схем подыщите ту расцветку, которая больше всех подходит для разрабатываемого узла, например, выберите вариант Ирис.
Выбранная тема применится к выделенной странице. Чтобы применить ее ко всем страницам узла, нужно в режиме Папки выделить их все и применить подходящую тему.
Выбор темы для страницы
Теперь узел можно закрыть командой меню Файл\ Закрыть узел, подтверждая сохранение.
Редактирование WEB-узла
Теперь необходимо разобраться с тем, как с помощью FrontPage совершать такие операции как:
· форматировать текст;
· строить таблицы и списки;
· настраивать гиперссылки и закладки;
· добавлять рисунки;
· изменять фон web-страницы;
· просматривать HTML-код;
· проверять страницу в браузере.
В основе практически любой web-страницы лежит текст. Его можно делить на абзацы, оформлять в виде пунктов маркированных списков или помещать в ячейки таблиц. Правильное форматирование текста во многом определяет удобство восприятия информации.
Изменение текста
На страницах, созданных мастером web-узла, расположены комментарии и текстовые местозаполнители, которые нужно заменить реальным содержанием. Давайте приведем к надлежащему виду одну из страницы узла. Остальные файлы вы можете модифицировать самостоятельно.
1. Чтобы открыть уже созданный web-узел выберите команду Файл\ Открыть веб-узел, выделите в окне диалога открытия узла папку с вашим узлом и щелкните на кнопке Открыть (Open).
2. Переключитесь в режим переходов.
Режим переходов
3. Дважды щелкните на прямоугольнике страницы Продукты. Выбранная web-страница откроется в режиме конструктора, который позволяет изменять содержание документов Web.
4. Щелчком выделите комментарий, расположенный в верхней части страницы, и введите текст «Продукты компании MBI отличаются высоким качеством и надежностью!»
Замена комментариев
5. Выделите слово MBI и щелкните на кнопке Полужирный панели инструментов Форматирование.
6. Раскройте палитру кнопки Цвет текста и выберите в ней красный квадрат.
7. В раскрывающемся списке Размер шрифта (Font Size) выберите пункт 4 (14pt). Теперь слово MBI выделено жирным крупным шрифтом красного цвета.
8. Щелкните правее восклицательного знака.
9. Выберите команду Вставка > Горизонтальная линия. Текст первого абзаца окажется отделенным от остального содержания линией. Горизонтальная линия – это единственный графический элемент, который можно «нарисовать» на web-странице. Любые другие фигуры (наклонные линии, окружности, прямоугольники) размещаются только в виде файлов формата GIF или JPG, подготовленных в графическом редакторе или с помощью инструментов Frontpage.
10. Названия ссылок Продукт 1, Продукт 2, Продукт 3 замените более осмысленными, например, Шаблоны визиток, Печать бланков, Учет кадров.
Использование таблиц
Справа от ссылок поместим краткое описание продуктов. Документы в формате HTML не поддерживают размещение текста в несколько колонок, поэтому для наших целей будем использовать таблицы.
1. Переместите курсор после строки «Ресурсы технической поддержки».
2. Выберите команду Таблиц\ Вставить\ Таблица.
3. Введите в счетчик Число строк открывшегося окна диалога цифру 3.
4. Щелкните на кнопке ОК.
Скопируйте ссылки в первую колонку таблицы по одной в ячейку, а во второй колонке поместите краткое описание программных продуктов.
Создание таблицы
Использование ссылок
По умолчанию ссылки в таблице ведут на сайт компании Microsoft. Чтобы изменить место перехода по ссылке, достаточно щелкнуть по ней правой кнопкой мыши и из контекстного меню выбрать пункт Свойства гиперссылки. В появившемся окне необходимо указать страницу, на которую будет осуществлен переход при нажатии на ссылку.
Задания места назначения гиперссылки
Вставка рисунков
Для вставки рисунка в страницу необходимо выбрать пункт меню Встака\ Рисунок\Из файла. Так как графические файлы, используемые в HTML, хранятся в GIF, JPEG или PNG форматах, то при сохранении узла FrontPage спросит в каком формате картинку сохранить.
Сохранение картинки
Нажатие на кнопку Тип графических файлов позволит выбрать подходящий формат изображения. Причем FrontPage автоматически подсчитает размер, который будет занимать картинка в выбранном формате.
Выбор формата для картинки
Настройка панели навигации
Для настройки меню необходимо щелкнуть по нему правой кнопкой мыши и выбрать пункт Свойства Панель ссылок. Появившееся окно позволит настроить навигацию на странице подходящим для вас способом.
Настройка Панели ссылок
Приложение 2. HTML-элементы | ||
Элемент | Описание | Атрибуты |
<! -...-> | Комментарий | |
<!DOCTYPE> | Описание типа документа | |
<А> | Гиперссылка | href, name, target |
<B> | Вывод полужирным шрифтом | |
<BGSOUND> | Фоновый звук для всей страницы | balance, loop, src, volume |
<BIG> | Вывод текста шрифтом, крупнее базового шрифта | |
<BLOCKQUOTE> | Длинная цитата | |
<BODY> | Содержимое документа | alink, link, vlink, text, background, bgcolor |
<BR> | Принудительный разрыв строки | |
<BUTTON> | Кнопка | type, value, name |
<CAPTION> | Подпись к таблице или рисунку | align |
<CENTER> | Выравнивание по центру с учетом полей | |
<CITE> | Цитата, выводимая курсивом | |
<DIV> | Блок, логическая единица документа, удобная для назначения стиля и языка, применения сценария | |
<DL> | Создание списка определений | |
<DT> | Определяемый термин в списке определений | |
<EM> | Выделение текста (обычно курсивом) | |
<EMBED> | Внедренный объект | autostart, hidden |
<FIELDSET> | Группа элементов управления в форме | |
<FONT> | Локальное изменение шрифта | color, face, size |
<FORM> | Создание формы с элементами управления | action, enctype, method, name, target |
<FRAME> | Создание фрейма | frameborder, name, noresize, scrolling, src |
<FRAMESET> | Набор фреймов | cols, rows |
<H1> до <Н6> | Заголовки документа от первого до шестого уровня | align |
<HEAD> | Заголовочная часть документа | |
<HR> | Горизонтальная линия | align, color, size, width, noshade |
<HTML> | Определение материала как HTML-документа | |
<I> | Вывод курсивом | |
<IFRAME> | Плавающий фрейм | dir, frameborder, height, name, scrolling, src, width |
<IMG> | Вставка изображения, видеоролика, анимации | align, alt, border, dynsrc, src, title |
<INPUT> | Элемент ввода | src, type, value |
<LABEL> | Подпись к элементу формы | |
<LEGEND> | Подпись к группе элементов формы | align |
<LI> | Строка списка, созданного элементами <OL>, <UL> | |
<MARQUEE> | Бегущая строка | behavior, direction, height, hspace, loop, scrolldelay, vspace, width |
<META> | Общая информация о документе | |
<NOFRAMES> | Альтернативное содержимое для браузеров, которые не поддерживают фреймы | |
<OL> | Создание нумерованного (упорядоченного) списка | type |
<OPTION> | Пункт раскрывающегося списка, созданного элементом <select> | selected |
<P> | Абзац текста | align |
<PRE> | Указание на предварительно отформатированный текст | |
<S> | Вывод перечеркнутым шрифтом (краткая форма записи элемента<STRIKE>) | |
<SCRIPT> | Программа, составленная на языке сценария | |
<SELECT> | Раскрывающийся список (список вариантов выбора) | multiple, size |
<SMALL> | Вывод текста шрифтом, мельче базового шрифта | |
<STRONG> | Логический элемент, указывающий на важность текста и выводимый полужирным шрифтом | |
<STYLE> | Вставка в документ стилевых правил | |
<SUB> | Нижний индекс | |
<SUP> | Верхний индекс | |
<TABLE> | Создание таблицы | align, background, bgcolor, border, bordercolor, cellpadding, cellspacing, rules, width |
<TD> | Ячейка данных в таблице | align, background, bgcolor, bordercolor, colspan, height, rowspan, width |
<TH> | Ячейка заголовка таблицы | align, background, bgcolor, bordercolor, colspan, height, rowspan, width |
<TITLE> | Название документа | |
<TR> | Строка таблицы | align, bgcolor, bordercolor |
<TT> | Печатный текст, выводимый моноширинным шрифтом | |
<U> | Вывод подчеркнутым шрифтом | |
<UL> | Создание маркированного (неупорядоченного) списка | type |
Приложение 3. Коды специальных символов
Символ | Числовой код | Именной код | Описание |
! | ! | Восклицательный знак | |
“ | " | " | Двойные кавычки |
% | % | Процент | |
& | & | & | Амперсанд |
( | ( | Левая круглая скобка | |
) | ) | Правая круглая скобка | |
* | * | Звездочка | |
< | < | < | Знак «меньше» |
> | > | > | Знак «больше» |
= | = | ≡ | Знак «равно» |
? | ? | Вопросительный знак | |
© | | Неразрывный пробел | |
Ὸ |   | Короткий пробел | |
  |   | Длинный пробел | |
§ | § | § | Параграф |
© | © | © | Знак авторского права |
® | ® | ® | Знак зарегистрированной торговой марки |
« | « | « | Левые кавычки |
» | » | » | Правые кавычки |
± | ± | ± | Знак «плюс-минус» |
€ | € | € | Знак евро |
$ | $ | Знак доллара | |
∞ | ∞ | ∞ | Знак бесконечности |
√ | √ | √ | Квадратный корень |
≠ | ≠ | ≠ | Знак неравенства |
↔ | ↔ | ↔ | Стрелка «влево-вправо» |
Литература
1. , «Самоучитель по созданию Web-страниц: HTML, JavaScript и Dynamic HTML», Киев, «А. С.К.» 2002
2. Дидре Хейз «Освой самостоятельно HTML и XHTML. 10 минут на урок», Перевод с английского. М. Издательский дом «Вильямс», 2004
3. М. Дубаков «Создание Web –страниц: искусство верстки», Минск знание», 2004
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 |
