Данный материал был разработан в процессе проведения уроков по web-дизайну в 10-11 классах и уроков информатики в 8 классе по теме "Разработка web-сайтов с использованием языка разметки гипертекста HTML". Кроме того, данная разработка была использована в кружковой работе в 6-8 классах.
Основы web -дизайна Васильева-Пискарева Е. Ф. ГБОУ СОШ № 500
Слайд 2
Word Wide Web WWW (Web) – распределенная гипертекстовая система, хранящая и передающая файлы через Интернет объединяющая их в единую информационную систему. Web- страницы – специальные файлы, написанные, в основном, на языке HTML . HTML – HyperText Markup Language – язык разметки гипертекста.
Слайд 3
Язык HTML Теги – служебные слова языка HTML , заключенные в угловые скобки (« > » и « > »), служат для определения вида и содержания информации в окне браузера. Атрибуты тега - необязательные параметры тега, служащие для изменения его функций.
Слайд 4
Структура HTML -документа Заголовок документа – раздел структуры Web- страницы, содержит служебную информацию о документе в целом. Тело документа - раздел структуры Web- страницы, содержит информацию, которая практически полностью выводится в окне браузера. Урок 1 . Язык HTML . Структура HTML -документа .
Слайд 5
Форматирование HTML -документа Текст можно разделить тегами на смысловые блоки: заголовки, абзацы. Дополнительное разделение текста осуществляется переходом на новую строку и вставкой черты разного размера и цвета. Урок 2 . Форматирование HTML -документа Рекомендуется использовать вместе не более трех шрифтов: один для заголовков, второй для общего текста, и третий для выделения особой информации
Слайд 6
Списки в HTML -документе В языке HTML предусмотрен специальный набор тегов для представления информации в виде списков. В языке HTML предусмотрены следующие основные типы списков: маркированный, нумерованный, многоуровневый. Урок 3 . Списки в HTML -документе
Слайд 7
Управление цветом Цветовой круг Иттена В круге Иттена основой являются три цвета: синий , красный и жёлтый . Далее следуют цвета второго порядка, получаемые из смешения между собой основных: зелёный, оранжевый, фиолетовый (синий + красный = фиолетовый ; красный + желтый = оранжевый ; желтый + синий = зеленый ).
Слайд 8
Комплементарными , или дополнительными , контрастными , являются цвета, расположенные на противоположных сторонах цветового круга Иттена . Одно из главных правил — использование комплементарных цветов. В этом случае теплые оттенки сочетаются с холодными, создавая баланс и подчеркивая друг друга. Управление цветом Урок 4 . Управление цветом
Слайд 9
Создание web- странички Главный принцип современного веб-дизайна: одна страница – один экран. Информация, которую вы поместите на странице, должна быть интересна для ваших потенциальных читателей Урок 5. Разработка web -странички « Самопрезентация »
Слайд 10
Вставка изображений Обязательно задавайте реальные размеры всех изображений на web -странице. Атрибут ALT для тега изображения, согласно современным требованиям языка HTML , является обязательным. Урок 6 . Вставка изображений
Слайд 11
Бегущая строка Бегущая строка - самый простой способ анимации на web -странице. Тег marquee - специальный тег, который приводит в движение текст и оживляет картинки. Урок 7 . Создание бегущей строки
Слайд 12
Гиперссылки Не подчеркивайте другие элементы на экране. Старайтесь не выделять текстовые элементы тем же цветом, что и ссылки. Не записывайте как ссылку слишком большой текст. Не выделяйте цвет под ссылкой дополнительно (курсивом, размером, жирностью). Не располагайте несколько ссылок слишком близко друг к другу. Урок 9 . Гиперссылки Урок 10. Гиперссылки внутри документа
Слайд 13
Карты-изображения Карты позволяют задать любую форму области ссылки. Учитывая, что изображения по своей природе прямоугольны, сделать графическую ссылку сложной формы, например для указания географического района, без карт-изображений не представляется возможным. Как правило, в географической тематике карты-изображения и применяются наиболее часто. Урок 11 . Карты-изображения
Слайд 14
Организация информации на сайте На сайте могут быть использованы следующие структуры: Линейная структура – наиболее простой способ организации данных. Иерархическая структура – самый распространенный вариант размещения информации. Контекстно-зависимая структура Комбинированная структура - это сочетание нескольких предыдущих структур. Урок 12-13 . Создание сайта на свободную тему.
Слайд 15
Таблицы Таблицы — позволяют: расположить текст документа в нескольких колонках; расположить картинки и текст относительно друг друга Для того чтобы расположить отдельные блоки информации в определенных местах страницы, такую страницу очень часто представляют в виде совокупности табличных ячеек Таблица - инструментальное средство для точного позиционирования элементов на странице. Урок 14-15 . Таблицы Урок 16 . Создание web -страницы с помощью таблицы
Слайд 16
Фреймовая структура сайта Достоинства фреймов : быстрая загрузка страниц, точность размещение информации в окне браузера, простота разграничения страницы на области и изменения размеров областей. Недостатки фреймов : плохая индексация поисковыми системами, внутренние страницы нельзя добавить в «Избранное », несовместимость с разными версиями браузеров. Урок 17 . Фреймовая структура сайта . Урок 18-19 . Взаимодействие между фреймами .
Слайд 17
Каскадные таблицы стилей Каскадные таблицы стилей ( CSS) – это набор правил, описывающих форматирование разных фрагментов HTML -кода и хранящихся отдельно от него. Одно такое правило, отображающее форматирование какого-то одного фрагмента или однотипной группы фрагментов кода, называется стилем . Таблицы стилей описываются на особом языке CSS и хранятся в особых файлах, обычно с расширением . css , хотя могут быть внедрены непосредственно в web -страницу. Урок 25 . Каскадные таблицы стилей ( css ).
Слайд 18
Синтаксис записи стилей h 1 { font-family : Verdana } Селектор Свойство Значение Урок 26 Css . Шрифтовое и абзационное оформление.
Слайд 19
Встроенный стиль Это стиль для отдельного тега. Параметр style можно использовать в каждом отдельном теге, задавая его локальное оформление .
Урок 27 . Css . Цвет и фон. Урок 28 . Css . Свойства стиля списков.
Слайд 20
Внедренный стиль Это стиль для отдельного HTML -файла. Можно задать стиль для тега или группы тегов так, чтобы это определение работало во всем документе. Для этого достаточно записать определение в головной части документа между тегами < head> и . Урок 29 . Css . Форматирование рамок и отступов.
Слайд 21
Связанный стиль Это стиль для нескольких HTML -файлов. Таблица стилей записывается в отдельном файле. Для таких файлов используется расширение . css . Для подключения стилевой таблицы в разделе
… HTML- документа надо поместить ссылку: Урок 30 . Css . Абзацы. Гиперссылки. Размещение стилевой таблицы. Урок 31. Применение таблицы стилей к части страницы.
Слайд 22
Литература Хуторской А. В. Технология создания сайтов. Информатика и ИКТ. М.: Дрофа, 2007. Смирнова И. Е. Начала Web -дизайна. СПб.: БХВ-Петербург, 2005. Дуванов А. А. Web -конструирование. HTML . СПб.: БХВ-Петербург, 2005. Богомолова О. Б. Web -конструирование на HTML : практикум. М.: БИНОМ. Лаборатория знаний, 2008. Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова. СПб: Символ-Плюс, 2001.
Предварительный просмотр:
Урок 1. Язык HTML. Структура HTML-документа.
Урок 2. Форматирование HTML-документа.
Урок 3. Списки в HTML-документе.
Урок 4. Управление цветом.
Урок 5. Разработка web-странички «Самопрезентация».
Урок 6. Вставка изображений.
Урок 7. Создание бегущей строки.
Урок 8. Творческая работа «Совершенствование вида web-странички».
Урок 31. Применение таблицы стилей к части страницы.
Урок 32-34. Итоговая работа. Разработка сайта.
Предварительный просмотр:
HTML — язык разметки гипертекста
Hyper Text Markup Language (HTML) — язык разметки гипертекста — предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.
Гипертекстовый документ— это текстовый файл, имеющий специальные метки, называемые тегами, которые впоследствии опознаются браузером и используются им для отображения содержимого файла па экране компьютера.
С помощью этих меток можно выделять заголовки документа, изменять цвет, размер и начертание букв, вставлять графические изображения и таблицы. Но основным преимуществом гипертекста перед обычным текстом является возможность добавления к содержимому документа гиперссылок — специальных конструкций языка HTML, которые позволяют щелчком мыши перейти к просмотру другого документа.
HTML-документ состоит из двух частей: собственно текста, т. е. данных, составляющих содержимое документа, и тегов — специальных конструкций языка HTML, используемых для разметки документа и управляющих его отображением. Теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ.
Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащих HTML-документы приняты расширения .htm или .html.
В большинстве случаев теги используются парами. Пара состоит из открывающего <имя_тега> и закрывающего имя_тега> тегов. Действие любого парного тега начинается с того места, где встретился открывающий тег, и заканчивается при встрече соответствующего закрывающего тега. Часто пару, состоящую из открывающего и закрывающего тегов, называют контейнером, а часть текста, окаймленную открывающим и закрывающим тегом, — элементом.
Последовательность символов, составляющая текст может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например #, +, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл: < (меньше), > (больше), & (амперсанд) и " (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов.
Структура HTML-документа
Самым главным из тегов HTML является одноименный тег . Он всегда открывает документ, так же, как тег должен непременно стоять в последней его строке. Эти теги обозначают, что находящиеся между ними строки представляют единый гипертекстовый документ. Без этих тегов браузер или другая программа просмотра не в состоянии идентифицировать формат документа и правильно его интерпретировать.
HTML-документ состоит из двух частей: заголовок (head) и тела (body), расположенных в следующем порядке:
Заголовок документа
Тело документа
В блоке … описываются общие правила отображения HTML-документа и содержится вспомогательная информация о документе. Чаще всего в заголовок документа включают парный тег ... , определяющий название документа. Многие программы просмотра используют его как заголовок окна, в котором выводят документ. Программы, индексирующие документы в сети Интернет, используют название для идентификации страницы. Хорошее название должно быть достаточно длинным для того, чтобы можно было корректно указать соответствующую страницу, и в то же время оно должно помещаться в заголовке окна. Название документа вписывается между открывающим и закрывающим тегами.
Тело документа является обязательным элементом, так как в нем располагается весь материал документа. Тело документа размещается между тегами <body> и
. Все, что размещено между этими тегами, интерпретируется браузером в соответствии с правилами языка HTML позволяющими корректно отображать страницу на экране монитора.
Открывающие теги могут содержать атрибуты, т. е. дополнительную информацию о свойствах отображаемого на экране элемента. Атрибуты записываются внутри открывающего тега через пробел от его имени в виде отдельного ключевого слова или ключевого слова, знака «=» и параметра (значения атрибута).
Порядок следования атрибутов в теге не важен.
Атрибут действует от открывающего тега, в котором он задан, до закрывающего или только внутри внутри тега, если тег не имеет парного.
Предварительный просмотр:
Форматирование HTML-документа
Разделение текста на абзацы
Чтобы программа просмотра отделяла абзацы друг от друга, необходимо поместить открывающий тэг в начале каждого нового абзаца. Использование закрывающего тэга
необязательно, но во избежание путаницы желательно.
Для того, чтобы выровнять текст используется атрибут align с возможными значениями center, left, right и justify. Он, соответственно, выравнивает текст по центру, по левому краю, по правому краю и одновременно по двум краям сразу.
Заголовки
Для задания названий разделов и подразделов в HTML используются теги заголовков. Существуют шесть уровней заголовков и обозначаются они так:
< H1>< /H1> — заголовок первого уровня
< H2>< /H2> — заголовок второго уровня
< H3>< /H3> — заголовок третьего уровня
< H4>< /H4> — заголовок четвёртого уровня
< H5>< /H5> — заголовок пятого уровня
< H6>< /H6> — заголовок шестого уровня
Заголовки выделяются полужирным шрифтом и отделяются от остального текста пустой строкой. Самый крупный заголовок < H1>< /H1>, а самый маленький< H6>. Теги заголовков имеют атрибут align — выравнивание текста заголовка на странице (значения те же, что и для выравнивания обычного текста);
Перевод строки
Для того чтобы перейти на следующую строку в любом месте текущей строки, в HTML существует тэг разрыва строки <BR>. Он заставляет программу просмотра выводить стоящие после него символы с начала новой строки. В отличие от тэга абзаца, тэг <BR> не вставляет пустую строку и не имеет соответствующего закрывающего тэга.
Бывают случаи, когда возникает необходимость в противоположной операции - запретить перевод строки. Текст, заключенный между тэгами <NOBR> и NOBR>, будет гарантированно заключаться в одной строке без перевода на другую.
Горизонтальные линии
Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной части страницы.
Элемент <HR> позволяет провести горизонтальную линию в окне большинства программ просмотра. Этот тэг не является контейнером, поэтому не имеет закрывающего тэга. До и после линии автоматически вставляется пустая строка.
Тег < HR> имеет следующие атрибуты:
size— толщина полосы;
width — ширина полосы;
align — выравнивание;
color — цвет полосы;
Использование предварительно отформатированного текста
HTML имеет специальный тэг контейнер, в который можно включать предварительно отформатированный текст. При этом можно в большей степени контролировать вывод документа программой просмотра, правда, за счет некоторой потери гибкости.
Наиболее употребительным является контейнер <PRE>. Текст внутри него может записываться в любой форме. Универсальность этого контейнера позволяет создавать таблицы и ровные колонки текста. Другим важным применением является вывод на экран больших блоков программного кода, не позволяющий браузеру переформатировать их.
Самым большим недостатком контейнера <PRE> является возможность вывода преформатированного текста только моноширинным шрифтом. Это делает вид преформатированных cтрок слишком громоздким.
Теги форматирования символов
< B>< /B> — используется для выделения текста полужирным. вместо него рекомендуется использовать тег < strong>< /strong>.
< I>< /I> — используется для получения курсивного текста. Вместо этого тега рекомендуется использовать тег < em>< /em>.
< U>< /U> — позволит подчеркнуть текст.
< STRIKE>< /STRIKE> — делает текст перечёркнутым.
< SUB>< /SUB> — предназначен для выделения подстрочного текста (нижний индекс).
< SUP>< /SUP> — нужен для выделения надстрочного текста (верхнего индекса).
Для форматирования непосредственно шрифтов, в HTML есть тег . У этого тега существуют следующие атрибуты:
color — цвет текста шрифта;
face — гарнитура шрифта;
size — размер текста шрифта. Может быть задан абсолютным (от 1 до 6) либо относительным значением (от +1 до +6 и от -1 до -6). По умолчанию, размер текста равен 3. Если указать < font size="+1">< /font>, то текст, размещённый между тегами < font>и < /font>, будет отображаться увеличенным на 1 по сравнению с другим текстом. Аналогично и с -1.
Все теги форматирования являются парными и допускают вложенность друг в друга. Один тег должен находиться внутри другого и никак не пересекаться с другим.
Задания к уроку
Задание 1.
Преобразовать HTML-документ к следующему виду:
Самый большой заголовок
Заголовок2
Заголовок3
Заголовок4
Заголовок5
Самый маленький заголовок
Это шрифт 1
Это шрифт 2
Это шрифт 3
Это шрифт 4
Это шрифт 5
Это шрифт 6
Это шрифт 7
Задание 2.
Преобразовать HTML-документ к следующему виду:
Улучшенный HTML-документ
Сходство
Пит Хейн (перевод Н. А. Прохоровой)
Корова не похожа на лошадь.
А лошадь не похожа на корову.
Именно это сходство
Мы и берем за основу.
Задание 3.
Преобразовать HTML-документ к следующему виду:
Домашние животные
(Заголовок h1)
Собаки
(Заголовок h2)
Сторожевые
(выравнивание слева, полужирный шрифт)
Охотничьи
(выравнивание справа, полужирный шрифт)
Дрессировка
(выравнивание по центру, полужирный шрифт)
Клубы Выставки Площадки
(выравнивание по центру, размер шрифта 4, цвет шрифта красный)
Стихотворение
(цвет шрифта синий, выравнивание по центру)
По жизни я скромен,
Оваций не надо!
Но как же я классно
Смотрюсь у снаряда!
(выравнивание по левому краю, размер шрифта 2)
Предварительный просмотр:
Списки в HTML-документе
Маркированный список
Одним из типов списков, реализованных в языке HTML, является маркированный список. Иначе списки такого типа называют ненумерованными или неупорядоченными. Последнее название часто используется как формальный перевод названия соответствующего тега <UL>, с помощью которого и организуются списки такого типа в HTML-документах (UL — Unordered List, неупорядоченный список).
В маркированном списке для выделения его элементов используются специальные символы, называемые маркерами списка. Вид маркеров списка определяется браузером, причем при создании вложенных списков браузеры автоматически разнообразят вид маркеров различного уровня вложенности.
Для создания маркированного списка необходимо использовать тэг-контейнер <UL> UL>, внутри которого располагаются все элементы списка. Открывающий и закрывающий тэги списка обеспечивают перевод строки до и после списка, отделяя, таким образом, список от основного содержимого документа, поэтому здесь нет необходимости использовать теги абзаца <P> или принудительного перевода строки <BR>.
Каждый элемент списка должен начинаться тэгом <LI> (LI — List Item, элемент списка). Тег <LI> не нуждается в соответствующем закрывающем тэге, хотя его наличие в принципе не возбраняется. Браузеры обычно при отображении документа начинают каждый новый элемент списка с новой строчки.
Пример:
Знаки зодиака:
Овен
Телец
Близнецы
Рак
Лев
Дева
Весы
Скорпион
Стрелец
Козерог
Водолей
Рыбы
В тэге <UL> может быть указан параметр type. Он может принимать следующие значения: disc, circle и square. Этот параметр используется для принудительного задания вида маркеров списка. Конкретный вид маркера будет зависеть от используемого браузера. Типичными вариантами отображения являются следующие:
type = disc — маркеры отображаются закрашенными кружками;
type = circle — маркеры отображаются не закрашенными кружками;
type = square — маркеры отображаются закрашенными квадратиками.
Пример записи:
type = circle>.
Значением, используемым по умолчанию, является type = disc.
Нумерованный список
Другим типом списков, реализованных в языке HTML, является нумерованный список. Иначе списки такого типа называют упорядоченными. Последнее название часто используется как формальный перевод названия соответствующего тега , с помощью которого и организуются списки такого типа в HTML-документах (OL — Ordered List, упорядоченный список).
Списки данного типа обычно представляют собой упорядоченную последовательность отдельных элементов. Отличием от маркированных списков является то, что в нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер. Вид нумерации зависит от браузера и может задаваться параметрами тегов списка. В остальном реализация нумерованных списков во многом похожа на реализацию маркированных списков.
Для создания нумерованного списка следует использовать тэг-контейнер , внутри которого располагаются все элементы списка. Открывающий и закрывающий теги списка обеспечивают перевод строки до и после списка, отделяя таким образом список от основного содержимого документа.
Как и для маркированного списка, каждый элемент нумерованного списка должен начинаться тэгом <LI>.
Пример:
Наиболее яркие звезды, видимые с Земли:
Сириус
Канопус
Арктур
Альфа Центавра
Вега
Капелла
Ригель
Процион
Ахернар
Бета Центавра
Ветельгейзе
Альдебаран
В тэге может быть указан параметр type. Параметр type используется для задания вида нумерации списка. Может принимать следующие значения:
type= А — задает маркеры в виде прописных латинских букв;
type = а — задает маркеры в виде строчных латинских букв;
type= I — задает маркеры в виде больших римских цифр;
type= i — задает маркеры в виде маленьких римских цифр;
type= 1 — задает маркеры в виде арабских цифр.
По умолчанию всегда используется значение type = 1, т. е. нумерация при помощи арабских цифр. После номера элемента списка всегда дополнительно выводится знак "точка".
Вложенные списки
Бывают случаи, когда в элемент списка одного типа требуется включить целый список такого же типа или другого. При этом будут организованы многоуровневые или вложенные списки. В HTML допустимо произвольное вложение различных типов списков.
Пример:
Спутники некоторых планет
<UL>
<LI>Земпя
Луна
Mapc
Фобос
Деймос
Уран
Ариэль
Умбриэль
Титания
Оберон
Миранда
Нептун
Тритон
Нереида
Задания к уроку
Задание 1.
Размер шрифта первого заголовка – 6, второго – 5. Для обоих списков размер шрифта – 3.
Солнце должно быть:
Теплым
Круглым
Желтым
Снег должен быть:
Белым
Холодным
Пушистым
Задание 2.
Волшебник Изумрудного города
А. Волков
Содержание
Ураган
Дорога из желтого кирпича
Великий и Ужасный
Исполнение желаний
Задание 3.
Использование списков
Маркированный список удобен тогда, когда порядок элементов в нем не важен. Примеры:
Список продуктов для приготовления борща
Список команд исполнителя
Список школьных предметов
Нумерованный список особенно хорош для описания действий, в которых важен порядок следования. Примеры:
Рецепт приготовления борща
Программа для исполнителя
Расписание уроков
Задание 4.
Как сделать хороший HTML-документ
I Структурировать материал
Разбить материал на главы, параграфы, пункты
Придумать заголовки частей
II Продумать стиль оформления
Выбрать цвета
Выбрать цвет фона
Выбрать цвет основного текста
Выбрать цвета для выделения отдельных элементов документа
Зафиксировать способы оформления отдельных элементов
III Написать программу
IV Провести тестирование и отладку программы
Предварительный просмотр:
Способы задания цвета
В HTML существует два способа задания цвета: при помощи ключевых слов и в цветовой модели RGB.
Ключевые слова
Этот способ заключается в следующем: существуют 16 базовых цветов, которые можно записывать не только их цифровыми значениями, но и цветовыми именами.
RGB - шестнадцатеричная запись
Основные цвета red, green, blue – красный, зеленый и синий могут иметь условные значения от 00 до FF (их аналог в десятичном представлении - это числа от 0 до 255). Из сочетания трех цветов, каждому из которых присваивается одно из значений, получается необходимый цвет.
Например, белый цвет задается как #FFFFFF, а черный цвет – как #000000. Первые две цифры кода (двухзначное шестнадцатеричное число) определяют насыщенность красного, следующие две - насыщенность зеленого и последние две - синего.
Перед шестнадцатеричным числом, обозначающим цвет, ставят символ #. Он обязателен, а делается это для исключения путаницы в определении системы счисления.
Перечень базовых цветов
Цвет
Название
Шестнадцатеричное значение
Aqua
#00FFFF
Black
#000000
Blue
#0000FF
Fuchsia
#FF00FF
Gray
#808080
Green
#008000
Lime
#00FF00
Maroon
#800000
Navy
#000080
Olive
#808000
Purple
#800080
Red
#FF0000
Silver
#C0C0C0
Teal
#008080
White
#FFFFFF
Yellow
#FFFF00
Задание цвета фона для HTML документа
По умолчанию браузеры заполняют фон сплошным цветом, определенным настройкой браузера: серым, белым или черным. Пользователи по-разному настраивают цвета, поэтому иногда имеет смысл принудительно зафиксировать цвет фона или создать фоновое изображение. Если вы не позаботитесь об этом, в худшем случае пользователь не сможет прочитать синий текст на черном фоне.
Цвет фона определяется атрибутом bgcolor тега
. Например, тег, задающий цвет фона #FF1230, имеет вид:
bgcolor="#FF1230">
тег, задающий желтый цвет фона, имеет вид:
bgcolor="YELLOW">
Можно задать и цвет текста. Этой цели служит атрибут text тега >. тег, приведенный ниже, задает зеленый цвет фона и синий цвет текста:
="GREEN" text="BLUE">
Сочетание цветов.
При выборе цветовой гаммы для сайта, важно сделать это правильно, руководствуясь основными принципами теории цвета.
Хорошо когда у Вас есть чувство вкуса, и Вы без проблем можете подобрать цветовую схему сайта. Не все люди могут сделать это легко. Если вы хотите подобрать цвета в композиции, не опираясь на свое чутье, то вы можете использовать формальный подход к подбору цвета с помощью цветовой круга.
Существует несколько классических комбинаций цветов, подбираемых с помощью цветового круга Иттена.
Комплементарные (дополнительные) цвета
Комплементарными, или дополнительными, контрастными, являются цвета, расположенные на противоположных сторонах цветового круга Иттена.
Выглядит их сочетание очень живо и энергично, особенно при максимальной насыщенности цвета.
Классическая триада
Классическую триаду образуют три равноудаленных по цветовому кругу Иттена цвета. Такая композиция выглядит достаточно живой даже при использовании бледных и ненасыщенных цветов. Чтобы добиться гармоничности в триаде, возьмите один цвет за главный, а два других используйте для акцентов.
Аналоговая триада
Аналоговую цветовую схему образуют три соседних цвета в двенадцатичастном цветовом круге.
Аналоговая схема чаще всего встречается в природе, поэтому выглядит гармонично и приятно. При использовании этой схемы возможно выбрать один цвет главным, второй – поддерживающим, а третий использовать для акцентирования. Это может быть плавный переход оттенков одной четверти цветового круга.
Контрастная триада
Контрастная триада – вариант комплементарного сочетания цветов, только вместо противоположного цвета используются соседние для него цвета.
Выглядит эта схема почти настолько же контрастно, но не настолько напряженно. Если вы не уверены, что сможете правильно использовать комплементарные цвета – используйте контрастную триаду.
Прямоугольная схема
Прямоугольная схема состоит из четырех цветов, каждые два из которых – комплементарные.
Эта схема дает, пожалуй, самое большое количество вариаций входящих в нее цветов. Чтобы проще было сбалансировать прямоугольную схему, один цвет надо выбрать доминирующим, остальные – вспомогательными.
Квадратная схема
Квадратная схема практически повторяет прямоугольную схему, но цвета в ней равноудаленные по кругу. Здесь также стоит выбрать один доминирующий цвет.
Первые правила использования цветов, да и не только цветов, были созданы задолго до появления современного графического дизайна Леонардо да Винчи в его «Трактате о живописи». Но даже он уже говорил: «Если ты в своем творчестве хочешь руководствоваться только правилами, то никогда ничего не достигнешь, и в твоих произведениях будет царить путаница». Поэтому, дизайнеру можно пользоваться данными рекомендациями, но важнее следовать своей интуиции.
Задания к уроку
Задание 1.
Создать новую Web-страницу в редакторе Блокнот.
В элементе указать название странички «Цвет».
Сделать цвет фона черным.
Сделать надпись белым цветом «Спокойной ночи».
Вставить горизонтальную линию красного цвета.
Сделать надпись желтого цвета «Приятных сновидений».
Вставить горизонтальную линию синего цвета толщиной 10 пикселов длиной 50% от ширины экрана и выровнять ее по центру.
Задание 2.
Создать новую Web-страницу в редакторе Блокнот.
В элементе указать название странички «Графика».
Разместить на страничке рисунок футбольного мяча. Для этого скопировать в свою папку файл soccer.gif и указать его имя в теге .
Сделать подпись к рисунку «Футбольный мяч» с помощью атрибута alt.
Сделать рамку вокруг рисунка шириной 2 пиксела.
Над рисунком поместить заголовок «Мир футбола» самого большого размера и выровнять его по центру страницы.
Предварительный просмотр:
Разработка web-странички «Самопрезентация».
Задание.
Создайте простую веб-страницу о себе.
Постарайтесь отметить свои наиболее яркие черты и особенности.
Учтите, что информация, которую вы поместите на странице, должна быть интересна для ваших потенциальных читателей.
Подумайте, с какой целью вы хотите поместить свою страницу в сети Интернет.
Не забывайте главный принцип современного веб-дизайна: одна страница – один экран.
Задайте фон страницы, используя цвет или неяркое изображение.
Укажите свою фамилию и имя, выделите их полужирным увеличенным шрифтом.
Отделите линией основную информацию от второстепенной.
Укажите свои интересы.
Подумайте, что еще интересного вы сможете разместить на веб-странице и какими средствами сможете подчеркнуть особо значимую информацию.
Предварительный просмотр:
Вставка изображений
Для web разработок применимы изображения трех форматов: PNG, JPEG и GIF. Adobe Photoshop является специализированным средством по созданию графики для сайтов. С его помощью можно конвертировать один формат изображения в другой.
Для вставки изображения в HTML используется одиночный тэг
, где xxx.jpg - название файла изображения.
Как правило, картинка должна хранится в отдельной папке, например, picture.
Если картинка находится в папке picture, то html-код будет такой:
Если картинка находится на другом сайте в папке image, то будет так:
Существуют атрибуты для тэга IMG:
align- выравнивание по горизонтали.
Имеет значенияleft и right. Если изображение будет в тексте, этими значениями можно управлять обтеканием текста. Если картинка имеет выравнивание по левому краю, то текст будет обтекать её справа. Если картинка выровнена по правому краю, то соответственно текст будет слева.
hspace (horizontal space) - отступ по горизонтали от других объектов, картинок или текста.
Значения задаются в пикселях.
vspace (vertical space) - отступ по вертикали.
Также задаётся в пикселях.
height(высота) иwidth(ширина) - размер изображения в пикселях.
Эти атрибуты задают размеры изображения. Это помогает уменьшить время загрузки страницы. Получается как бы резервирование места под изображение, пока загружаются другие элементы. Всегда задавайте реальные размеры изображений!
Существует ещё несколько атрибутов, применяемых для изображений:
title - заголовок картинки.
При наведении мышки на изображение появляется его заголовок. Например:
alt - название изображения.
Выводит название изображения, если в браузере отключена графика или по каким то причинам картинка не смогла загрузиться. Пример кода:
border - рамка вокруг изображения
Создаёт рамку, значение задаётся в пикселях. Например, рамка толщиной 1 пиксель:
Фоновые изображения
Фоновое изображение заполняет собой все пространство элемента, для которого оно задано. Так, указав в теге <BODY> атрибут background="fon.gif", рисунком fon.gif будет залито все окно браузера.
Задавая фоновый рисунок документа, не забывайте указывать также параметр bgcolor. Это связано с тем, что у пользователя может быть отключена загрузка изображений и вашего красивого фона он не увидит. Тогда браузер и будет использовать параметр bgcolor.
Задание к уроку
Задание 1.
Создать новую Web-страницу в редакторе Блокнот.
В элементе указать название странички «Размер».
Сделать цвет фона зеленым.
Вставить изображение children.jpg, задав его размеры: ширина 100, высота 100 пикселов.
Открыть в Adobe Photoshop файл children.jpg. Удалить белый цвет фона и сохранить рисунок в формате gif.
Вставить на страничку файл children.gif так, чтобы одно изображение располагалось над другим.
Задание 2.
Создайте Web-страницу, отформатировав предложенный фрагмент текста в соответствии с образцом (используйте параметры hspace – задает поля слева и справа от рисунка; align – задает положение иллюстрации по отношению к соседним элементам документа). Для рисунков задайте параметр width=100. Сохраните файл.
Образец:
Алгоритмы
Формы (способы) записи алгоритма:
словесная,
графическая,
табличная,
программная.
Самый наглядный способ записи алгоритма – блок-схема.
Блок-схема – последовательность блоков, соединенных линиями передачи (ветвями).
Блоки – это геометрические фигуры, каждая из которых обозначает строго определенное действие.
Основные блоки
блок «процесс» (обозначает вычислительное действие);
блок «решение» (обозначает проверку выполнения условий);
блок «начало и останов» (обозначает начало и конец алгоритма);
блок «модификация» (обозначает начало цикла);
блок «ввод/вывод в общем виде» (обозначает ввод/вывод данных);
блок «документ» (обозначает вывод данных на печать).
Ввод/вывод в общем виде
Любой алгоритм может быть представлен в виде комбинации трех базовых (основных) структур:
следование,
ветвление,
цикл.
Блок ввода-вывода
Ветви – линии, соединяющие блоки. Они указывают направление выполнения действий. Нормальное направление сверху вниз и слева направо. При противоположном направлении на ветвях ставят стрелки.
Блок «решение»
Предварительный просмотр:
Создание бегущей строки
В HTML есть специальный тег для создания бегущей строки: . Синтаксис тега marquee:
Атрибуты и параметры тега marquee
bgcolor="цвет" - задает цвет фона контейнера. Если атрибут bgcolor не задан, то по умолчанию фоном будет цвет фона страницы.
behavior="параметр" - это один из самых важных атрибутов бегущий строки. Он задает параметр, по которому осуществляется поведение бегущей строки. Имеет параметры:
alternate - бегущая строка перемещается циклично: справа налево, далее слева направо (бегает между краями). Например:
scroll - бегущая строка перемещается за пределы области в том направлении, которое указывает атрибут direction (с параметром), а далее циклично повторяется.. Например:
slide - очень похож на scroll, однако в конце строка останавливается и больше не повторяется. Например:
direction="параметры" - задает направление движения бегущей строки. Принимает следующие параметры:
left - движение справа налево. Примечание: left установлено по умолчанию. Например:
right - движение слева направо. Например:
Задание к уроку
Создать новый html-документ, фоновый рисунок – файл cong.gif.
В первой строке написать текст «С Новым годом!», полужирный, цвет текста – белый.
Далее - пять «бегущих строк»:
Картинка xmastree.gif. Направление «бегущей строки» - налево, режим вывода – циклическая прокрутка.
Картинка snowgift.gif. Цвет фона – синий, направление – налево, режим вывода – циклическая прокрутка.
Картинка santaani.gif. Направление «бегущей строки» - направо, режим вывода – циклическая прокрутка.
Картинка sc1.gif. Направление «бегущей строки» - налево, режим вывода – выход и остановка.
Картинка hello.gif. Направление «бегущей строки» - налево, режим вывода – прыжки.
Предварительный просмотр:
Творческая работа «Совершенствование вида web-странички»
Задание.
Создайте в графическом редакторе свой логотип.
Поместите логотип на свою страницу.
Сделайте всплывающую надпись с вашим девизом.
Отсканируйте свою фотографию или используйте готовый файл.
Обработайте при необходимости изображение до приемлемых характеристик.
Вставьте фотографию на веб-страницу, разместите ее с любого края и добейтесь обтекания текста вокруг изображения, причем на некотором расстоянии.
Подумайте, какое еще изображение вы хотели бы разместить на веб-странице, чтобы не сильно увеличить объем файла, но повысить наглядность и информативность.
Предварительный просмотр:
Гиперссылки
При нажатии на гиперссылку происходит переход к заданному документу, который будет открыт в активном окне веб-браузера или в новом окне.
В качестве гиперссылки может выступать любой фрагмент видимого содержимого Web-страницы, т. е. и текст, и графические изображения. Для этого применяется тег <а> со своим закрывающим близнецом а>:
Атрибут href указывает адрес документа, на который следует перейти. А текст гиперссылки, расположенный между тегами и , виден посетителю веб-страницы
"Текст ссылки" не обязательно должен быть собственно текстом. Вы можете использовать изображение или любой другой HTML элемент.
Чтобы сделать любую картинку ссылкой, в HTML применяется тег , используемый для вставки изображений, который прописывается вместо текста ссылки:
Создавая почтовую ссылку, надо указать адрес e-mail, используя стандартный протокол передачи электронной почты mailto:
<ahref="mailto:admin@blogibiznes.ru">Текст ссылки на e-mail</a>
При щелчке по этой ссылке откроется программа для работы с электронной почтой, установленная у Вас по умолчанию, где уже будет заполнено поле “Кому”.
Любая гиперссылка на HTML-странице по умолчанию находится в одном из трех состояний:
Непосещенная ссылка – имеет синий цвет и подчеркивание.
Активная ссылка – принимает красный цвет во время между щелчком мыши по ссылке и началом загрузки новой страницы. Понятное дело, в таком состоянии она находится совсем недолго.
Посещенная ссылка – меняет свой цвет на фиолетовый после перехода по ней.
Изменить цвет гиперссылок в html-документе можно при помощи тега > и следующих его атрибутов:
На остальные страницы добавить ссылки К содержанию
Задание 3.
Заменить ссылки Продолжение истории, В начало, К содержанию соответствующими кнопками.
Предварительный просмотр:
Гиперссылки внутри документа
Иногда необходимо сделать гиперссылку в пределах одной страницы, например, для того, чтобы при чтении очень длинного текста, у нас была возможность быстрого перехода к какой-либо его части. Делаются такие переходы с помощью заранее установленных в теле статьи меток-закладок, называемых html якорями и специальных хеш-ссылок.
Для создания якоря сначала делаем закладку с любым именем (используются только латинские буквы, цифры, дефис и подчеркивание), задаваемым с помощью атрибута name тега :
<aname="Имя якоря"></a>
Между тегами и ничего не пишем, чтобы якорь не был виден в тексте.
Теперь надо сделать хеш-ссылку на якорь, где в качестве значения атрибута href пишем символ решетки (#) и выбранное Имя якоря:
<ahref="#Имя якоря">Текст ссылки на html якорь-закладку</a>
Таким образом можно делать гиперссылки, указывающие на области других страниц внутри сайта.
Задание к уроку
Создайте файл lesson10.htm. Отформатируйте предложенный фрагмент текста в соответствии с образцом. Используйте метки для ссылки на разделы о каждом языке программирования. Задайте цвета гиперссылок при помощи тега : синий цвет – для непосещенной ссылки, красный – для активной ссылки, пурпурный – для ранее посещенной («отработанной») ссылки. Сохраните файл.
Языки программирования
Язык С и С++;
Язык Pascal;
Basic;
Visual Basic;
FORTRAN;
ALGOL
Программирование появилось задолго до возникновения первых персональных ЭВМ.
Языком программирования ЭВМ первого поколения был язык машинных кодов (язык низкого уровня). Во втором поколении ЭВМ появились языки высокого уровня. Команды языка высокого уровня – это слова естественного языка.
Многообразие языков программирования отчасти объясняется многообразием задач, для решения которых создаются программы на этих языках.
Язык С и С++
Язык С – это самый распространенный язык программирования. На нем написано больше программ, чем на любом другом языке. Подавляющее большинство профессиональных программистов владеют им. Исторически этот язык неотделим от операционной системы UNIX, которая в наши дни переживает второе рождение. 1960-е гг. были эпохой становления операционных систем и языков программирования высокого уровня. Язык С с самого начала создавался так, чтобы на нем можно было решать системные задачи. Разработчики языка – Кеннет Томсон и Денис Ричи. В начале 1980-х гг. Бьерн Страуструп стал разрабатывать расширение языка под условным названием «С с классами». Первый коммерческий транслятор С++ появился в 1983 г. Одна из главных целей создания С++ - увеличить процент повторного использования уже написанного кода.
Язык Pascal
Основные концепции языка Pascal были разработаны в 1967 г. Профессором Никлаусом Виртом, и этот язык быстро превратился из средства обучения студентов программированию в инструмент для создания новых программных проектов. Язык назван в честь французского ученого Блеза Паскаля – создателя механических вычислительных машин.
Basic
Basic – один из самых старых языков программирования. Его создатели – Джон Кемени и Том Куртц, работавшие в Дортмундском колледже в 1964 г. Свой язык они назвали по первым буквам слов «Beginner's All Purpose Sumbolic Instructions Code». Basic был первым программным продуктом фирмы Microsoft, основанной Полом Аленом и Биллом Гейтсом в 1975 г. В дальнейшем он не только поставлялся как отдельная программа, но и «зашивался» в ПЗУ компьютеров.
Visual Basic
В середине 1980-х гг. фирма Microsoft разработала транслятор QuickBASIC. Вообще весий языка Basic существует несколько сотен. После появления Windows и визуальных средств разработки программ фирмой Microsoft была создана среда программирования Visual Basic
FORTRAN
FORTRAN – старейший язык программирования высокого уровня. В начале 1950-х гг. он был разработан исследовательской группой под руководством Джона Бекуса. Его название происходит от слов «FORMULA TRANSLATION». Первая версия системы FORTRAN для компьютера IBM была выпущена в 1957 г.
ALGOL
ALGOL – это также один из старейших языков программирования, универсальный язык программирования общего назначения. Его название происходит от слов «ALGORITMIC LANGUAGE». Он был разработан международной рабочей группой, состоящей из 30 человек, в 1969 г. Один из наиболее активных разработчиков языка ALGOL-68 – Чарльз Линдси.
Предварительный просмотр:
Карты-изображения
Реализация этой возможности позволяет привязывать гипертекстовые ссылки к различным областям изображения. Такой подход нагляднее, чем применение обыкновенных текстовых связей, поскольку пользователь может не читать словесное описание связи, а сразу понять ее смысл по графическому образу.
Карты-изображения предоставляют пользователям дружественный интерфейс для перехода на другие Web-страницы. Чтобы выполнить переход по такой ссылке, следует просто выбрать нужное место на изображении и щелкнуть мышью.
Карта-изображение внешне выглядит как обычное встроенное изображение, но при выборе с помощью курсора мыши той или иной области на этом изображении выполняется переход на другие страницы. Обычно на изображении указывается, где следует сделать щелчок, чтобы перейти на ту или иную страницу.
Карта-изображение фактически представляет собой обычное встроенное графическое изображение на Web-странице. Эти изображения могут иметь любой допустимый формат (GIF или JPG).
Рассмотрим пример.
Сделаем из этого рисунка навигационную карту, т.е. при щелчке по холодильнику будет осуществляться переход на страницу, посвященную холодильникам, при щелчках по пылесосу и стиральной машине на соответствующие им страницы.
Для этого надо описать области на этой картинке, которые будут ссылками. Для описания таких областей используются теги с единственным параметром name, который задает имя карты-ссылок и используется потом для ссылки на эту карту.
Карту надо подключить к картинке, для этого в тег <IMG>надо добавить параметр usemap, в качестве значения которого выступает имя карты после значка #:
Для описания конкретных областей внутри тегов используются теги . Этот тег имеет следующие параметры:
shape - определяет форму области, может принимать следующие значения:
rect - область в виде прямоугольника,
circle - область в виде круга,
poly - область в виде многоугольника,
default - вся область.
cootds - задает координаты отдельной области:
для rect задаются координаты верхнего левого и правого нижнего углов прямоугольника,
для circle задаются координаты центра круга и радиус,
для poly задаются координаты вершин многоугольника в нужном порядке.
href - определяет адрес ссылки.
target - применяется при использовании фреймов и указывает фрейм в который нужно загрузить страницу.
alt - задает альтернативный текст для области.
У нас три области, значит будет три тега: первый - прямоугольная область вокруг пылесоса, второй - прямоугольная область вокруг стиральной машины, третья - вокруг холодильника.
Теперь надо определиться с координатами этих областей. На самом деле это самый трудоемкий процесс. В нашем примере мы решили, что области будут прямоугольными и значительно облегчили себе задачу. Тем не менее, нам надо задать координаты верхнего левого и правого нижнего углов трех прямоугольников. Зададим координаты "на глаз". Ширина нашей картинки 188 пикселов, а высота - 192 пиксела. Примерно определим координаты. Теперь мы готовы добавить эти параметры в наши теги .
Порядок записи координат для атрибута coords будет таким:
1
Значит, нужно указать координаты рабочей области у прямоугольника верхний-левый и нижний-правый угол.
Задание к уроку
Создать карту-изображение на основе данной картинки (dog-kitten-large.jpg), состоящую из двух частей:
Для простоты разделить изображение на два равных прямоугольника. Создать две web-странички, посвященных, соответственно, кошке и собаке. На эти странички должны ссылаться обе части изображения.
Предварительный просмотр:
Создание сайта на свободную тему
Для организации информации на сайте могут быть использованы следующие структуры:
Линейная структура – наиболее простой способ организации данных. Представляет собой набор следующих друг за другом web-страниц.
Иерархическая структура – самый распространенный вариант размещения информации. Предусматривает создание главной страницы, на которой размещается меню со ссылками на разделы сайта, расположенные на отдельных страницах. Разделы могут содержать в себе подразделы и другую детальную информацию.
Контекстно-зависимая структура – ссылки на другие разделы сайта формируются в зависимости от определенных действий пользователя. К примерам такой структуры относятся элементы сайтов интернет-магазинов, поиск информации на сайтах по ключевым словам.
Комбинированная структура – это сочетание нескольких предыдущих структур. Например, на сайте может быть предусмотрена иерархическая структура, которая в определенных местах может содержать выполнение пошаговых действий (линейную структуру).
Задание
Продумать содержание страниц, структуру информации, логичность связей, цветовую палитру.
Нарисовать схему связей между страницами.
Продумать цели, задачи всего проекта: для кого он предназначен, как будет функционировать, чем отличаться от других сайтов.
Продумать критерии оценок web-страниц (удобство и логичность навигации, наглядность ссылок, дизайн текстовых и графических ссылок, подсказки, интерактивность).
Предварительный просмотр:
Таблицы
Каждая таблица должна начинаться тэгом
> и завершаться тэгом
. Внутри этой пары тегов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.
Каждая строка начинается тэгом
(Table Row) и завершается тэгом
. Отдельная ячейка в строке обрамляется парой тегов
> и
> (Table Data) или
и
> (Table Header). Тег
используется обычно для ячеек-заголовков таблицы, а <td> — для ячеек-данных. Различие в использовании заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейки. Содержимое ячеек типа <th> отображается полужирным (Bold) шрифтом и располагается по центру (align=center, valign=middle). Ячейки, определенные тэгом <td> по умолчанию отображают данные, выровненные влево (align =left) и посередине (valign=middle) в вертикальном направлении.
Тэги <td> и <th> не могут появляться вне описания строки таблицы <tr>.
Количество строк в таблице определяется числом открывающих тегов <tr>, а количество столбцов — максимальным количеством <td> или <th> среди всех строк. Часть ячеек могут не содержать никаких данных, такие ячейки описываются парой следующих подряд тегов — <td>, >. Если одна или несколько ячеек, располагающихся в конце какой-либо строки, не содержат данных, то их описание может быть опущено, а браузер автоматически добавит требуемое количество пустых ячеек. Отсюда следует, что построение таблиц, в которых в разных строчках располагается различное количество столбцов одного и того же размера, не разрешается.
Таблица может иметь заголовок, который заключается в пару тегов <caption> и >. Описание заголовка таблицы должно располагаться сразу же после тега <table> и до первого <tr>.
По умолчанию текст заголовка таблицы располагается над ней (align =top) и центрируется в горизонтальном направлении.
Пример простейшей таблицы, состоящей из двух строк и двух столбцов:
Ячейка 1 строки 1
Ячейка 2 строки 1
Ячейка 1 строки 2
Ячейка 2 строки 2
Атрибуты тегов <table>, <tr>, <td>
Атрибут align задает выравнивание содержимого всей таблицы, отдельной ее строки или отдельной ячейки по горизонтали.
...
…
...
Значение по умолчанию left
Атрибут background определяет изображение, которое будет использоваться в качестве фонового рисунка всей таблицы или ее отдельной ячейки. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты таблицы, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и содержимым таблицы. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.
...
...
Атрибут bgcolor устанавливает цвет фона всей таблицы, ее строки или отдельной ячейки. Можно использовать этот атрибут совместно с background, подобрав цвет фона близкий к фоновому рисунку.
...
...
...
Атрибут border устанавливает толщину рамки в пикселах. По умолчанию рамка изображается трехмерной, но если используется атрибут bordercolor тега <table>, то вид рамки меняется в зависимости от браузера. Численное значение параметра определяет толщину рамки в пикселах, рисуемую вокруг всей таблицы, однако на толщину рамок вокруг каждой ячейки это значение не влияет.
...
Значение по умолчанию 0.
Атрибут bordercolor устанавливает цвет рамки всей таблицы, ее строки или отдельной ячейки. Рамка обычно рисуется как трехмерная, добавление атрибутов bordercolor и border к тегу <table> создают однотонную линию.
...
...
...
Атрибут cellpadding. Определяет расстояние между границей ячейки и ее содержимым. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот атрибут не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.
...
Значение по умолчанию 0.
Атрибут cellspacing задает расстояние между внешними границами ячеек. Если установлен атрибут border, толщина границы принимается в расчет.
...
Значение по умолчанию 0.
Атрибут width – задает ширину всей таблицы, ее строки или ячейки. Значения задаются в пикселах или процентах от ширины окна.
Атрибут height - задает высоту строки таблицы. Значения задаются в пикселах или процентах от высоты окна.
Атрибут valign - выравнивает текст в ячейках по вертикали, может принимать значения: вверх (top), вниз (bottom), по середине (middle).
valign=…
Объединение ячеек таблицы
Чтобы объединить ячейки таблицы по горизонтали (столбцам) или по вертикали (строкам), в HTML применяются следующие атрибуты:
colspan— объединение ячеек по горизонтали (столбцам);
rowspan — объединение ячеек по вертикали (строкам).
Например, изменим наш HTML-код так:
< table border="1" cellpadding="10">
< tr>
< td colspan="2">Первая и вторая ячейки< /td>< td>Третья ячейка< /td>
Создайте файл tab1.htm. Создайте таблицу, написав в тегах следующую структуру:
ячейка 1
ячейка 2
ячейка 3
ячейка 4
ячейка 5
ячейка 6
Задание 2.
Откройте файл tab1.htm. Внесите новую информацию в ячейки таблицы.
Задайте в теге следующие параметры: ширина таблицы – 90%, расстояние между содержимым ячейки и рамкой – 5, расстояние между ячейками таблицы – 5, цвет линий разлиновки – зеленый, толщина линий разлиновки – 2, выравнивание во всех ячейках – по центру.
Задайте в теге
ширину ячейки равной 45%. Сохраните файл под тем же именем.
Создание Web-страниц
Глобальные компьютерные сети открыли пользователям компьютеров быстрый и легкий доступ к мировым источникам информации.
WWW (Word Wide Web) система навигации, поиска и доступа к мультимедийным ресурсам с помощью средств гипертекста.
Браузер – программа просмотра гипертекстовых страниц WWW.
Гипертекст – текст, содержащий связи с другими текстами, графической, видео- или звуковой информацией.
HTML (Hyper Text Marcup Language) – язык разметки гипертекста.
HTML-документы – это текстовые файлы, в которые встроены специальные теги.
Теги (tags) – команды языка HTML
Задание 3.
Создайте файл tab1_1.htm. Внесите в ячейки текст по образцу.
Задайте в теге следующие параметры: ширина таблицы – 90%, расстояние между содержимым ячейки и рамкой – 5, расстояние между ячейками таблицы – 5, толщина линий разлиновки – 2, выравнивание – по центру.
Задайте в теге
высоту строк равной 120, а в теге
- параметры: ширина ячейки – 50%, цвет фона – голубой или желтый соответственно, выравнивание – по центру.
Вставьте картинки в соответствующие ячейки. Сохраните файл.
Устройство компьютера
Компьютер – универсальное устройство для хранения, обработки, передачи информации.
Процессор – устройство, обеспечивающее преобразование информации и управление другими устройствами компьютера.
Оперативная память – устройство для хранения программ и данных, которые обрабатываются процессором в текущем сеансе работы. При выключении компьютера вся находящаяся в оперативной памяти информация стирается.
Устройства ввода информации – это аппаратные средства для преобразования информации из формы, понятной человеку в форму, воспринимаемую компьютером.
Устройства вывода – это аппаратные средства для преобразования компьютерного представления информации в форму, понятную человеку.
Устройства хранения информации (внешняя память) предназначены для долговременного хранения информации любого вида. Выключение питания компьютера не приводит к очистке внешней памяти.
Устройства для передачи информации преобразуют компьютерные данные в сигналы, пригодные для передачи по электрическим, оптическим и телефонным каналам.
Задание 4.
Создайте Web-страницу по образцу.
Основные устройства компьютера
Компьютер
Устройство ввода
Устройство памяти
Процессор
Устройство вывода
Задание 5.
Создайте файл tab2_1.htm. Создайтев нем таблицу по образцу.
Задайте в теге следующие параметры: расстояние между содержимым ячейки и рамкой – 3, расстояние между ячейками таблицы – 7, цвет линий рамки – сиреневый (#800080), толщина линий рамки – 2, выравнивание– по центру.
Задайте в теге заголовка
параметры: ширина ячейки с картинкой – 100 пикселей, ширина ячейки с текстом – 5%.
Ширина каждой картинки – 50 пикселей, выравнивание картинок – по центру соответствующей ячейки.
Устройства для ввода информации
Клавиатура
Мышь
Сканер
Микрофон
Задание 6.
Создайте файл tab2_2.htm. Создайтев нем таблицу по образцу (задайте высоту ячейки равной 5).
Задайте в теге следующие параметры: ширина таблицы – 90%, расстояние между содержимым ячейки и ее обрамлением – 3, расстояние между ячейками таблицы – 10, толщина линий разлиновки – 3, выравнивание – по центру.
Задайте в теге
параметры: ширина ячейки – 25%, цвет фона – желтый, выравнивание содержимого ячейки – по центру, цвет рамки – красный.
Устройство компьютера
Устройства для вывода информации
Монитор
Принтер
Колонки
Плоттер
Задание 7.
Создайте файл tab2_3.htm. Создайтев нем таблицу по образцу.
Задайте параметры: цвет фона ячейки – olive (#808000), цвет границы – светло-зеленый (lime, #00ff00).
Устройство компьютера
Модемы
Сетевая плата
Устройства для приема-передачи информации
Задание 8.
Создайте файл tab2_4.htm. Создайтев нем таблицу по образцу.
Задайте в теге следующие параметры: расстояние между содержимым ячейки и ее обрамлением – 3, расстояние между ячейками таблицы – 7, толщина линий разлиновки – 2, выравнивание– по центру.
Задайте в теге
параметры: выравнивание содержимого ячейки – по центру, цвет рамки – белый, высота ячейки – 4.
Устройство компьютера
Предварительный просмотр:
Создание web-страницы с помощью таблицы
Разметку web-страницы удобно производить с использованием таблицы. Возможны различные варианты разметки.
Разметка страницы производится с использованием таблицы шириной на весь экран, независимо от того, каково разрешение экрана (width=100%). В данном случае удобно создать таблицу, состоящую из двух строк и двух столбцов. Верхняя строка будет отведена под заголовок странички. Левый столбец будет отведен под меню web-сайта. При такой разметке страничка всегда будет занимать весь экран, независимо от разрешения экрана.
Рисунок.
Ширина ячейки – 15%
Название сайта.
Меню сайта
Текст.
Недостаток такой разметки: при уменьшении разрешения экрана сужаются рамки и текст сползает вниз. Если выбрать фиксированный размер таблицы, то при любом разрешении экрана таблица будет выглядеть неизменной.
Разметка страницы производится с использованием таблицы шириной760 пикселов, выровненной по центру экрана. При этом при разрешении экрана 800х600 пикселов страничка будет видна шириной практически во весь экран, а при разрешении 1024х768 и выше будет видна шириной 760 пикселов по центру экрана. В данном случае удобно создать таблицу, состоящую из трех строк и одного столбца. Верхняя строка будет отведена под заголовок странички, вторая строка будет отведена под меню web-сайта, а третья строка - под содержание странички.
Рисунок.
Ширина ячейки – 15%
Название сайта.
Меню сайта
Рисунок.
Текст.
Рисунок.
Текст или рисунок.
Текст.
Текстили рисунок.
Задание к уроку
Разместить в таблице web-страничку, созданную на уроках №5 и №8.
Предварительный просмотр:
Фреймовая структура сайта
Окно браузера может быть разделено на фреймы, т.е. на области расположенные рядом друг с другом. В каждую из этих областей можно загружать свои html-страницы.
Тег <frameset>
Тег <frameset> - заменяет тег <body> и используется для разделения экрана. Имеет закрывающий тег.
Атрибуты
cols. Делит экран по вертикали. Принимает значения в пикселях, в процентах или просто *. Значение * говорит о том, что конкретный столбец будет занимать всю остальную часть экрана
rows. Делит экран по горизонтали. Принимает значения в пикселях, в процентах или просто *. Значение * говорит о том, что конкретная строка будет занимать всю остальную часть экрана
frameborder. Определяет наличие рамок, т.е. границ фреймов. Принимает значения "yes" или "no".
border. Определяет ширину рамки в пикселях.
bordercolor. Определяет цвет рамок. По умолчанию (если используется стандартная цветовая схема системы Windows) границы фреймов имеют тусклый, серый оттенок. Но при желании можно выбрать любой другой цвет. При определении цвета можно выбрать как его название, так и числовой эквивалент в системе RGB. Например, BLUE или #0000FF.
Пример
Результат:
Чтобы создать строки внутри столбцов или столбцы внутри строк, потребуется вложенные контейнеры <frameset>…>.
Тег <frame>, помещенный в контейнер <frameset>…> определяет, что именно должно отображаться в конкретном фрейме. Не имеет закрывающего тега.
Атрибуты
src. Определяет URL, связанный с конкретным фреймом.
marginwidth. Определяет расстояние между содержимым фрейма и его границами справа и слева.
marginheight. Определяет расстояние между содержимым фрейма и его границами сверху и снизу.
scrolling. Определяет присутствие в окне фрейма полосы прокрутки. Может принимать значения "yes", "no" и "auto"(по умолчанию).
noresize. Определяет границы фрейма как "жестко закрепленные" и не позволяет пользователю изменить размеры окна фрейма. Причем фиксируются размеры всех фреймов, имеющих с закрепленным общую границу.
frameborder, border, bordercolor. Эти атрибуты связаны с рамками и аналогичны таким же в теге <frameset>.
name. Определяет имя окна фрейма. Единственный атрибут, не влияющий на внешний вид фрейма. Позволяет контролировать процесс загрузки фреймов. Если окно фрейма имеет уникальное имя, то к нему можно непосредственно обратиться из других фреймов. Присваивая имена окнам фреймов, надо помнить об одном ограничении: имя не должно начинаться с символа подчеркивания "_", иначе оно будет игнорироваться.
Пример
Взаимодействие между фреймами
С помощью тега гиперссылки можно загрузить документ в определенный фрейм.
Атрибуты
href. Определяет URL или имя нового документа, который вы хотите загрузить в определенное окно фрейма.
target. Определяет имя фрейма, в который будет загружен новый документ. Это имя должно быть присвоено фрейму атрибутом name в теге <frame>.
Имена фреймов не могут начинаться с символа подчеркивания, так как с него начинаются служебные имена, передающие браузеру особую информацию. Ниже перечислены специальные имена, каждое из которых используется для достижения определенного эффекта.
target=”_blank”. Документ загружается в новое окно браузера.
target=”_self”. Документ загружается в текущее окно.
target=”_parent”. Документ загружается в родительский фрейм. Обычно это фрейм, стоящий в контейнере <frameset>…> перед текущим. Если родительского фрейма нет, то значение "_parent" становится тождественным "_self".
target=”_top”. Документ загружается в самый верхний фрейм.
Задания к урокам
Задание 1.
Создайте файл fram.htm. Создайте требуемую структуру web-страницы по образцу. Соотношение высот горизонтальных фреймов – 20%, 50% и 30% соответственно. Второй горизонтальный фрейм разделите по ширине в пропорции 50:50%. Запретите изменение размеров фреймов. Сохраните файл.
Задание 2.
Создайте документы 1.htm, 2.htm, 3.htm и 4.htm по образцам. Откройте файл fram.htm. В каждый фрейм поместите документы в такой последовательности: 1.htm, 2.htm, 4.htm, 3.htm.
Образцы
1.htm:
DVD-технология
Изобретение технологии цифровой записи звука на CD позволило справиться с шумами, которые всегда присутствовали при воспроизведении звука с грампластинок. Появление DVD Audio с поддержкой многоканальной записи звука стало очередным шагом к нахождению решения, отвечающего высоким требованиям, предъявляемым к качеству записи и воспроизведения звука.
2.htm:
Изобретение в 1980 году компакт-диска было первым значительным шагом вперед в развитии цифровой технологии. Размеры компакт-диска поражали: 120 мм в диаметре и 1,2 мм толщиной, а емкость в 74 минуты была просто революционной, не говоря уже о качестве, которое нельзя было сравнить с качеством аудиокассет и грампластинок. Кроме того, информация на компакт-диске гораздо более устойчива к внешним воздействиям, и это означало, что информация на компакт-дисках может храниться в течение долгих лет. В 1985 году на рынке появились устройства для пользователей ПК, способные считывать информацию с компакт-дисков при помощи компьютера. На тот момент, когда емкость жесткого диска едва дотягивала до 30-40 Мбайт, емкость диска CD-ROM составляла небывалую цифру в 650 Мегабайт.
3.htm:
Подобно CD диску, DVD-диск также имеет размер 120 мм в диаметре. Подобно CD диску, толщина DVD-диска составляет 1,2 мм (состоит из двух подложек толщиной 0,6 мм, соединенных вместе). Новые DVD-плейеры поддерживают также стандарт существующих в настоящее время аудио-компакт-дисков. Компакт-дисковые плееры и CD-ROM-накопители используют красный лазер, который излучает свет с длиной волны 780 нанометров. А DVD-ROM дисководы используют лазер с длиной волны 650 и 635 нанометров.
4.htm:
DVD – сравнительно недавнее открытие в технологии цифровой записи информации – перевернет все представления о хранении информации и ее распространении. Аббревиатура “DVD”(Digital Versatile Disk) расшифровывается как «Цифровой Универсальный Диск» или как «Цифровой Видео Диск». Более яркие цвета, более четкое изображение и выдающееся качество звука – далеко не полный перечень преимуществ новой технологии. В DVD для обеспечения записи информации с более высокой плотностью используются области («питы») меньшего размера (pit – ямка, отверстие), дорожки более плотно расположены по отношению друг к другу, а также используется лазер с меньшей длиной волны. Функция коррекции ошибок, используемая в DVD, является более совершенной. Все это означает, что стандартный DVD-диск может содержать до 4,7 Гбайт информации – что в семь раз превышает объемы широко распространенных в настоящее время компакт-дисков, максимальный объем информации для которых составляет порядка 680 Мбайт на один диск.
Задание 3.
Создайте папку Frames, а в ней - файл index.htm с фреймами по образцу.
Образец:
Строки: 60 пикселей, *
Столбцы: 20%, *
В первой строке: страница-заголовок, запретить изменение размеров фреймов.
В первом столбце: страница-меню, запретить изменение размеров фреймов. Имя фрейма – Menu.
Во втором столбце: стартовая страница, имя фрейма – Work.
Задание 4.
Откройте папку Frames и создайте в ней web-страницы по образцам: 1.htm – заголовок, start.htm – стартовая страница, menu.htm – страница меню.
Образцы:
1.htm:
Компьютерные вирусы и антивирусные программы
Цвет фона и цвет текста - , .
Выравнивание по центру.
start.htm:
Вирусы
Троянские программы
Маскируясь под видом полезной программы, скрытно проникают на компьютер, чтобы похищать пароли и другую конфиденциальную информацию.
Вирусы-невидимки или «стелс-вирусы»
Перехватывают обращения антивирусных программ к пораженным файлам и подставляют вместо своего тела «незараженные участки.
Загрузочные вирусы
Изменяют содержимое загрузочного сектора дискет и жестких дисков. Легко обнаруживаются и уничтожаются.
Резидентные вирусы
Записывают свое тело в оперативную память при каждом запуске компьютера. Активны до выключения или перезагрузки компьютера.
Нерезидентные вирусы
Не заражают память компьютера, активны ограниченное время.
Используйте приведенный ниже фрагмент HTML-кода:
menu.htm:
Антивирусные программы
программы-доктора
программы-сторожа
программы-детекторы
программы-ревизоры
Цвет фона -
Задание 5.
Вставьте в HTML-код созданного ранее документа index.htm имена созданных web-страниц: заголовка (1.htm), страницы меню (menu.htm) и стартовой страницы (start.htm).
Задание 6.
Создайте web-страницы по образцам. Эти страницы должны загружаться в тот же фрейм взамен стартовой web-страницы start.htm.
Образцы:
doc.htm:
Доктора
Доктора могут обнаруживать и «лечить» зараженные файлы, удаляя из них тело вируса.
Программы-доктора
Norton AntiVirus
DoctorWeb
Panda AntiVirus
Касперский
Другие
r.htm:
Ревизоры
Ревизоры запоминают исходные состояния системных областей диска, каталогов и файлов и сразу после загрузки операционной системы производят сравнение (проверяется контрольная сумма файлов).
Программы-ревизоры
Andinf
Другие
c.htm:
Сторожа
Сторожа - небольшие резидентные (постоянно находящиеся в оперативной памяти) программы, подающие сигнал тревоги при обнаружении вируса, но не способные вылечить файлы.
Программы-сторожа
AntiVirus ToolkitPro Monitor
Другие
d.htm:
Детекторы
Детекторы производят поиск характерной для конкретного вируса последовательности байтов, поэтому они могут находить только известные им вирусы.
Создайте гиперссылки между фреймами (атрибут target). В данном случае этому атрибуту должно быть присвоено имя Work.
Задание 7.
Создайте обратные ссылки из web-страниц doc.htm, r.htm, c.htm и d.htm, загружающие во фрейм с именем Work снова стартовую страницу (start.htm).
Предварительный просмотр:
Каскадные таблицы стилей
Каскадные (многоуровневые) таблицы стилей - cascading style sheets (CSS) - это мощный стандарт на основе текстового формата, определяющий представление данных в браузере.
Если формат HTML предоставляет информацию о составе документа, то таблицы стилей сообщают, как он должен выглядеть. Таким образом, каскадные таблицы стилей дают возможность хранить содержимое отдельно от его представления.
Стиль включает все типы элементов дизайна: шрифт, фон, текст, цвета ссылок, поля и расположение объектов на странице.
CSS разрабатывались так, чтобы обеспечить больший уровень контроля над размещением текста и графики.
CSS предполагает 3 типа таблиц стилей - встроенные, внедренные (внутренние) и связанные (внешние).
Существует три метода для применения таблицы стилей к документу HTML:
Встроенный (Inline). Этот метод позволяет взять любой тег HTML и добавить к нему стиль. Использование встроенного метода предоставляет максимальный контроль над всеми свойствами web-страницы. Предположим, надо задать внешний вид отдельного абзаца. Можно просто добавить атрибут style к тегу абзаца, и браузер отобразит этот абзац с помощью параметров стиля, добавленного в код.
Внедренный (Embedded). Внедрение позволяет контролировать всю страницу HTML. При использовании тега
CSS. Шрифтовое и абзационное оформление
Параметры шрифтов
Семейство шрифта
Свойство font-family указывает приоритетный список шрифтов, используемых для отображения данного элемента или web-страницы. Если первый шрифт списка не установлен на компьютере, с которого выполняется доступ к сайту, ищется следующий шрифт списка, пока не будет найден подходящий.
Например:
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Стиль шрифта
Свойство font-style определяет normal, italic или oblique.
Например:
h2 {font-family: "Times New Roman", serif; font-style: italic;}
Вес шрифта
Свойство font-weight описывает, насколько толстым, или "тяжёлым", должен отображаться шрифт. Шрифт может быть normal (обычный),bold (полужирный), bolder (жирный). Некоторые браузеры поддерживают числовые значения 100-900 (в сотнях) для описания веса шрифта.
Размер шрифта устанавливается свойством font-size. Используются различные единицы измерения (например, пикселы и проценты) для описания размера шрифта.
Например:
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
'px' и 'pt' дают абсолютное значение размера шрифта, а '%' и 'em' - относительные.
Декоративный текст
Свойство text-decoration позволяет добавлять различные "декоративные эффекты". Например, можно подчеркнуть текст (underline), перечеркнуть (line-through) провести линию над текстом (overline).
Например:
h1 {text-decoration: underline;}
Интервал между буквами
Интервал между буквами текста можно специфицировать свойством letter-spacing. Значение - нужная величина.
Например:
h1 {letter-spacing: 6px;}
Режимы преобразования текста
Свойство text-transform может иметь значения: capitalize (первая буква каждого слова – заглавная), uppercase (все буквы заглавные), lovercase (все буквы строчные).
Сокращённая запись
Используя сокращенную запись font, можно указывать все свойства шрифта в одном стилевом правиле:
p {font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif;}
Используя сокращённую запись, код можно упростить:
p {font: italic bold 30px arial, sans-serif;}
Параметры абзацев
Отступы
Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки.
Например:
p {text-indent: 30px;}
Выравнивание текста
CSS-свойство text-align соответствует атрибуту выравнивания. Текст может быть выровнен left, right, center или justify.
Например:
p {text-align: justify;}
Задание к уроку
Создать web-страницу graphic.htm с использованием стилей шрифтового и абзационного форматирования. Ввести описание стилей h1, h2, p.
Для стиля h1 задать шрифт Verdana, размер – 24 пункта, жирный шрифт, выравнивание по центру;
Для стиля h2 задать шрифт Sans-serif, размер – 18 пунктов, жирный шрифт, выравнивание по левому краю;
Для стиля р задать шрифт Arial, размер – 14 пунктов, выравнивание по ширине.
Примените эти стили к тексту, чтобы отформатировать его по образцу.
Образец:
Растровая и векторная графика
Растровая графика
Растровое изображение формируется как матрица точек различного цвета (пикселей), которые образуют строки и столбцы. Каждый пиксель может принимать любой цвет из палитры, содержащей десятки тысяч или даже десятки миллионов цветов, поэтому растровые изображения обеспечивают высокую точность передачи цветов и полутонов.
Векторная графика
Векторные изображения формируются из объектов (точка, линия, окружность, прямоугольник и др.), которые называются графическими примитивами. Для каждого примитива задаются опорные координаты и цвет.
Предварительный просмотр:
CSS. Цвет и фон
Цвет элемента
Свойство color описывает цвет элемента.
Например:
h1 {color: #ff0000;}
Цвет фона элемента
Свойство background-color описывает цвет фона элемента.
Например:
body {background-color: #FFCC66;}
Фоновое изображение элемента
Свойство background-image определяет фоновое изображение элемента.
Например:
h1{background-image: url(pictures.gif)}
Повторение фонового изображения
Свойство background-repeate задает направление, в котором фоновое изображение будет повторяться.
Значения repeat-x и repeat-y устанавливают повторение фонового изображения по горизонтали и по вертикали соответственно.
Значение no-repeat отменяет повтор изображения.
Если свойство не указано или указано значение repeat, то фоновое изображение повторяется и по вертикали и по горизонтали. Свойство применимо ко всем элементам.
Например:
Свойства стиля списков.
Вид маркера.
Тип маркера для пункта списка указывается с помощью свойства list-style-type:
Создать web-страницу css.htm с использованием стилей текста, списков, фона и цвета. Ввести описание стилей body, h1, p и ul.
Для стиля body задать фоновую картинку r1.jpg, повторение рисунка по вертикали;
Для стиля h1 задать шрифт Sans-serif, размер – 28 пунктов, полужирный шрифт, выравнивание по центру, красный цвет;
Для стиля абзаца задать шрифт Arial, размер – 16 пунктов, отступ первой строки – 13 пунктов, выравнивание по ширине;
Для стиля маркированного списка задать вид маркера – квадрат, шрифт Times New Roman, размер – 18 пунктов.
Примените эти стили к тексту, чтобы отформатировать его по образцу.
Образец:
CSS в НТМL-коде
CSS – Cascading Style Sheets (каскадные таблицы стилей) – это средство, позволяющее разделить содержание и оформление web-документа и в том числе:
задавать поля, размери тип шрифта, цвет текста и фона для отдельных элементов страницы (абзацев, слоев, букв), оформлять красные строки, буквицы;
менять оформление целого сайта, состоящего из сотен файлов, не меняя HTML-код и редактируя всего лишь один CSS-файл;
уменьшать количество тегов в HTML-документе.
Задание 2
Создать web-страницу css1.htm с использованием стилей шрифта и текста. Ввести описание стилей body, h1, h2, p и оl. Примените эти стили к тексту, чтобы отформатировать его по образцу.
Стиль body: цвет фона – светло-голубой.
Стиль h1: тип шрифта Sans-serif, размер – 20 пунктов, полужирный шрифт, выравнивание по центру, красный цвет.
Стиль h2: тип шрифта Sans-serif, размер – 16 пунктов, выравнивание по центру, синий цвет, все буквы заглавные.
Стиль абзаца: шрифт Arial, размер – 16 пунктов, отступ первой строки – 13 пунктов, выравнивание по ширине.
Стиль нумерованного списка: тип нумерации в списке – римские заглавные цифры, шрифт Times New Roman, размер – 12 пунктов, выравнивание по ширине.
Образец:
Встраивание таблиц стилей в документ
Чтобы таблица стилей могла воздействовать на оформление документа, браузер должен «узнать» о ее существовании. Для этого ее необходимо связать с HTML-документом.
Существует четыре способа связывания документа и таблицы стилей:
Связывание – позволяет использовать одну таблицу стилей для форматирования многих страниц HTML.
Внедрение – позволяет задавать все стили непосредственно в самом документе.
Импортирование – позволяет встраивать в документ таблицу стилей, расположенную где-либо на сервере.
Встраивание в теги документа – позволяет менять форматирование конкретных элементов web-страницы.
Предварительный просмотр:
Css. Форматирование рамок и отступов
Свойства рамки
Толщина рамки
Свойство border-width определяет толщину рамки.
Значения:
Thin – тонкий;
Medium – средний;
Thick – толстый.
Например:
P { border-width: 20px}.
Свойства border-top-width, border-right-width, border-bottom-widt, border-left-width определяют толщину рамки сверху, справа, слева и снизу соответственно.
Цвет рамки
Свойство border-color определяет цвет рамки.
Например:
H1 { border- color: red}.
Вид рамки
Свойство border-style определяет вид рамки.
Значения:
None – нет рамки (по умолчанию);
Solid – обычная сплошная граница;
Double – двойная линия;
Dotted - точечная линия;
Groove – «вдавленная» граница;
Ridge – «выпуклая» граница.
Например:
p { border- style: dotted }.
Свойства отступа от рамки
Свойство padding-top определяет величину отступа от верхней рамки.
Например:
p { padding-top: 5mm}.
Свойства отступа от краев блока
Свойство margin определяет величину верхнего (margin-top), правого (margin-right), нижнего (margin-bottom), левого (margin-left) отступа.
Задания к уроку
Задание 1
Создать web-страницу по образцу с использованием стилей текста, списков, фона и цвета. Введите описание стилей body, h1, h2, p и ul:
Для стиля body задать фоновую картинку r1.jpg, повторение рисунка по всему фоновому пространству;
Для стиля h1 задать шрифт Verdana, размер – 20 пунктов, полужирный шрифт, выравнивание по центру, цвет:#4b0082, межбуквенный интервал – 10 пунктов;
Для стиля h2: тип шрифта Arial, размер – 16 пунктов, выравнивание по ширине, курсив;
Для стиля абзаца задать шрифт Arial, размер – 16 пунктов, отступ первой строки – 13 пунктов, выравнивание по ширине;
Для стиля маркированного списка задать вид маркера – круг, шрифт Times New Roman, размер – 18 пунктов
Примените эти стили к тексту, чтобы отформатировать его по образцу:
Образец:
Графический редактор
Графический редактор – прикладная программа для создания и обработки изображений. Рисунок, создаваемый с помощью графического редактора, формируется на экране, а затем может быть сохранен в файле. Среда любого графического редактора содержит:
рабочее поле;
меню инструментов;
палитры цветов и оттенков;
меню команд для работы с файлами и др.
Графический редактор позволяет включать в рисунок текст, используя буквы разных размеров и шрифтов.
Задание 2
Создать web-страницу по образцу с использованием стилей текста, списков, фона и цвета. Введите описание стилей body, h1, .t1, .p1, .t2, .p2, .t3, .p3, .t4, .p4, .t5, .p5, .t6 .p6, t7и p7:
стиль body – цвет: #faf3d2.
стиль h1 - шрифт Verdana, размер – 20 пунктов, цвет:#4b0082, полужирный шрифт, выравнивание по центру, межбуквенный интервал – 10 пунктов;
стиль .t1 – толщина рамки – 7 px, цвет синий, точечная линия;
стиль .p1 - шрифт Arial, размер – 12 пунктов, цвет - navy, полужирный шрифт, выравнивание по центру, межбуквенный интервал – 2 пункта;
стиль .t2 - толщина рамки – 10 px, цвет оливковый, двойная линия, отступ от краев – 20 px;
стиль .p2 - шрифт Verdana, размер – 12 пунктов, цвет – темно-бордовый, полужирный шрифт, выравнивание по центру, интервал между словами – 5 пунктов;
стиль .t3 - толщина рамки – 10 px, цвет красный, выпуклая линия;
стиль .p3 - шрифт Verdana, размер – 12 пунктов, полужирный шрифт, выравнивание по правому краю;
стиль .t4 - толщина рамки – 12 px, цвет ivory, вдавленная линия;
стиль .p4 - шрифт Monotyre, размер – 14 пунктов, цвет – синий, курсив, выравнивание по центру, интервал между словами – 4 пункта;
стиль .t5 - толщина рамки – 10 px, цвет красный, вдавленный элемент;
стиль .p5 - шрифт Verdana, размер – 12 пунктов, цвет – sienna, полужирный шрифт, выравнивание по центру, интервал между словами – -1 пункт;
стиль .t6 - толщина рамки – 7 px, цвет plum;
стиль .p6 - шрифт Monotype Corsiva, размер – 18 пунктов, цвет – зеленый, интервал между словами – -1 пункт;
стиль .t7 - толщина рамки – 10 px, цвет красный, выпуклый элемент;
стиль .p7 - шрифт Verdana, размер – 12 пунктов, цвет – синий, полужирный шрифт, выравнивание по центру, интервал между словами – 2 пункта;
Примените эти стили к тексту, чтобы отформатировать его по образцу:
Образец:
Электронная почта и другие услуги сетей
Электронная почта – это система обмена письмами между абонентами компьютерных сетей
Каждый абонент имеет свой почтовый ящик – поименованную область дисковой памяти на почтовом сервере, куда помещается входящая корреспонденция.
Почтовый ящик имеет уникальное имя; владелец получает доступ к своему почтовому ящику через пароль.
Электронное письмо – это текстовый файл, содержащий конверт с адресом получателя и текст письма.
Телеконференция – это система обмена информацией на определенную тему между абонентами сети. Абонент, подписавшийся на конференцию, получает все ее материалы в свой почтовый ящик.
Файловые архивы позволяют через Интернет пополнять программное обеспечение своего компьютера.
Среди других услуг сетей: доски объявлений, базы данных, формулы прямого общения, интернет-телефония.
При наведении курсора мыши на гиперссылку: a:hover.
Например: a:hover {color: gray}
Свойства абзацев
Первая строка абзаца
Цвет первой строки абзаца задается свойством fist-line.
Например: p: fist-line { color: red}
Первая буква (буквица)
Задается свойством fist-letter.
Например: p: fist-letter {color: green}
Способы размещения стилевых таблиц
Встроенный стиль (для отдельного тега)
Встроенный стиль применяется к любому тегу HTML с помощью атрибута style, например, следующим образом:
Здесь ровный по краям абзац
Этот способ связывания CSS с HTML-страницей рекомендуется применять в единичных случаях - если стиль планируется применить только к одному элементу только на одной странице сайта.
Внедренный стиль (для отдельного HTML-файла)
Таблица стилей CSS вписывается внутри контейнера , Прописывается такой контейнер между тегами в котором создаются правила для одной страницы HTML. Например:
Здесь прописаны правила для отображения ссылок и заголовков второго уровня на данной web-странице.
Связанный стиль (для нескольких HTML-файлов)
При использовании связанных стилей таблица стилей располагается в отдельном файле, как правило, с расширением .css, а для связывания документа с этим файлом применяется тег >. Данный тег помещается в контейнер <head>:
...
...
В теге указывается, что связываемый файл является таблицей стилей (rel="stylesheet"), формат этого файла – .css (type="text/css") и находится он в той же папке, что и файл html, либо имеет другой URL-адрес (href="my.css"). Очевидно, что эту строку можно прописать в любом (либо во всех) из html-файлов. Таким образом, единое стилевое оформление будет прописано для нескольких страниц сразу.
На одной и той же Web-странице могут использоваться и внутренние стили, и таблицы стилей обоих видов: внешние и внутренняя. В этом случае стиль, определенный во внутренней таблице, имеет приоритет перед стилем из внешней таблицы. Аналогично, внутренний стиль, помещенный внутрь тега, имеет приоритет перед и внутренней, и внешней таблицами стилей. Это и называется каскадностью.
Задания к уроку
Задание 1
Создать web-страницу по образцу с использованием размещения стилевой таблицы в отдельном файле. Введите описание стилей body, h1, .t1, .p1, .t2, .p2, .t3, .p3, .t4, .p4, .t5, .p5, .t6 .p6, t7и p7:
стиль body – цвет: #ffffe0;
стиль h1 - шрифт Verdana, размер – 20 пунктов, цвет:#ff7f50, полужирный шрифт, выравнивание по центру, межбуквенный интервал – 10 пунктов;
стиль h2 - шрифт Verdana, размер – 12 пунктов, цвет: темно-серый, полужирный шрифт, отступ первой строки – 10 пт.;
стиль h3 - шрифт Arial, размер – 12 пунктов, цвет:indigo, полужирный шрифт, выравнивание по центру;
стиль .t4 - толщина рамки – 12 px, цвет ivory, вдавленная линия;
стиль .p4 - шрифт Monotyre, размер – 14 пунктов, цвет – синий, курсив, выравнивание по центру, интервал между словами – 4 пункта;
Примените эти стили к тексту, чтобы отформатировать его по образцу:
Образец:
Интернет и Всемирная паутина
Inernet – это всемирная глобальная компьютерная сеть. World Wide Web – «всемирная паутина»: распределенная по всему миру информационная система с гиперсвязями, существующая на технической базе мировой сети Интернет. Web-страница – отдельный документ WWW. Web-сервер – компьютер в сети Интернет, хранящий web-страницы и соответствующее программное обеспечение для работы с ними. Домашняя страница – установленная в настройках браузера web-страница, по умолчанию загружаемая при запуске браузера.
Гипермедиа – система гиперсвязей между мультимедиа-документами. Web-браузер – клиент-программа для работы пользователя с WWW.
Поиск нужного документа в WWW может производиться: прямым указанием его адреса; путем перемещения по паутине гиперсвязей; с помощью поисковых программ. Киберпространство – это совокупность мировых систем телекоммуникаций и циркулирующей в них информации.
Задание 2
Создать web-страницу по образцу с использованием размещения стилевой таблицы в отдельном файле.
Образец:
Что такое модель?
Модель – это упрощенное подобие реального объекта. Свойства модели определяются целью, ради которой она создается.
Модели бывают материальными и информационными.
Информационная модельпредставляет собой описание моделируемого объекта. Прежде чем строить информационную модель, проводится системный анализ объектов моделирования.
Задача системного анализа – выделить существенные части, свойства, связи моделируемой системы, определить ее структуру.
Наглядным способом представления информационных моделей являются графические изображения: карты, чертежи, схемы, графики.
Предварительный просмотр:
Применение таблицы стилей к части страницы
Строковый элемент <span>
C помощью тега можно выделить любую идущую подряд часть текста. При использовании вместе с атрибутом class можно задать любые параметры текста только этой части документа. Например:
Купаниекрасногоконя.
Здесь слово «красного» будет иметь соответствующий цвет, как определено в классе second ранее. В указанном классе можно задать любое количество характеристик, и все они отобразятся в слове.
Блочный элемент <div>
Тег <div> играет роль универсального блока. Единственное свойство тега <div> заключается в том, что он оставляет промежуток до и после своего содержимого. Все, что находится между открывающим и закрывающим элементами этого тега воспринимается как один объект. При использовании с атрибутом class можно задать параметры содержимого только этой части документа.
Блок, определяемый тегом <div> обладает свойствами:
height – высоты;
width –ширины;
border – границы;
margin – отступа;
padding – набивки;
float – произвольного размещения;
clear – управления обтеканием.
Обтекание блока текстом
Аналогично изображению можно задать обтекание текстом блока
, только значения left и right надо присвоить атрибуту float, который определяет плавающий блок. Для этого в файл stiles.css надо вписать: div{ float: right}.
Позиционирование
Тег > указывает браузеру, относительно какого элемента располагать содержимое тега в окне Может принимать три значения:
absolute – координаты задаются относительно верхнего левого угла родительского элемента;
static - координаты задаются относительно верхнего левого угла страницы;
relative - координаты задаются относительно предыдущего элемента.
Задания к уроку
Задание 1.
Поместите все заголовки первого уровня в черную рамку с серым фоном и с утолщенными до 2 пунктов нижней и правой границами. А для конкретного заголовка выделите первые буквы всех слов серым цветом (#777777):
Заголовок Первого Уровня
Задание 2.
Задайте расположение блока <div> в центре любого экрана по горизонтали, если известно, что ширина блока – 20% от экрана.
Задание 3.
Создайте тень для надписи «Мы».
По теме: методические разработки, презентации и конспекты
Дизайн проект цветника на пришкольном участкеРазвитие профессиональной компетенции учащихся старших классов к практически значимой деятельности их становление и социальной компетенции посредство...
Слово "дизайн"происходит от итальянского слова disegno, которым в эпоху Возрождения обозначали проекты и идеи, лежащие в основе работы.В русский язык слово "дизайн" пришло из английского языка, в кото...
В занятии используется современная образовательная технология – технология модульного обучения учащихся. Это первое практическое занятие, которое тестирует уровень подготовки и креативного ...