Контрольные вопросы - Кафедра информационных и

Лабораторная работа №1
1 Основы HTML и создания WEB сайта
Цель работы: изучить основы разработки WEB сайтов. Изучить
основные возможности языка HTML и методики создания HTML страниц.
Создать статический макет сайта.
Задание на лабораторную работу
В ходе выполнения данной лабораторной работы необходимо
ознакомиться с правилами написания HTML страниц, основными тегами HTML
и директивами CSS. Создать макет сайта для последующего наполнения и
доработки.
Краткие теоретические сведения
Язык разметки гипертекста (Hypertext Markup Language) - HTML, — это
компьютерный язык, лежащий в основе World Wide Web (Всемирной Паутины).
Создавая Web-сайт, вы используете HTML для размещения текста, рисунков,
анимации, видео- и аудиоклипов на отдельных Web-страницах, из которых,
собственно, и состоит сайт. Помимо этого, HTML позволяет помещать на
страницы гипертекстовые ссылки и интерактивные кнопки, которые соединяют
ваши Web-страницы с другими страницами того же Web-сайта, равно как и с
другими Web-сайтами по всему миру.
В первоначальном стандарте языка HTML описывался несложный язык, с
помощью которого можно было создавать содержащие один лишь текст.. Хотя
комитет по стандартам HTML, консорциум W3C (World Wide Web Consortium),
ввел множество новых инструкций (называемых дескрипторами (tags) и
атрибутами (attributes)) в язык HTML, все же даже самую "богатую" Webстраницу можно создать, набрав простые HTML-команды в документе,
подготовленном в текстовом редакторе. На Web-сайте W3C (www.w3.org)
можно найти полное описание различных Internet-технологий, включая HTTP,
HTML, XHTML (Extensible Hypertext Markup Language — расширяемый язык
разметки гипертекста), XML (Extensible Markup Language — расширяемый язык
разметки), CSS (Cascading Style Sheets — каскадные таблицы стилей) и т.д.
Также стоит рассмотреть использование каскадных таблиц стилей CSS для
задания единого форматирования всему сайту внутри кода страницы или в
отдельном файле. Для расширения возможностей в составе кода веб-страницы
используют программы – скрипты или сценарии (чаще это Javascript). Готовые
скрипты, выполняющие определенную функцию, можно скачать в Сети.
Цвет в HTML-документе задается дюжиной зарезервированных слов или
числом в шестнадцатеричной системе счисления (например, ff0000 – красный
цвет).
Готовый сайт размещается на сервере, он имеет уникальный адрес (IP-адрес,
например, 195.69.76.132 или доменное имя, например, kid.stu.cn.ua).
Просмотр веб-страниц осуществляется специальной программой – браузером
(от англ. browser —
просмотрщик).
Наиболее распространенными
браузерами являются Microsoft Internet Explorer, Mozilla Firefox, Opera.
Современные мобильные устройства позволяют установить (в качестве javaприложения) браузер Opera Mini, последняя версия позволяет просматривать
веб-страницы в уменьшенном виде с возможностью увеличения интересующих
фрагментов и перемещения по странице.
Веб-разработчик должен учитывать различия в отображении созданной
страницы в разных (хотя бы в самых распространенных) браузерах и привести
внешний вид сайта к независящему от выбора операционной системы и
программы просмотра.
Для создания сайтов используется множество приложений (веб-редакторов)
упрощающих работу веб-мастеру.
Quanta Plus (http://quanta.kdewebdev.org) – это среда разработки документов
на языках разметки, которая также поддерживает популярные сценарные языки,
используемые для веб-разработки, CSS и некоторые другие форматы,
разработанные W3C.
Этот HTML-редактор обеспечивает стандартные для программ этого
класса возможности набора и редактирования HTML, такие, как
автоматический ввод основных тегов и их атрибутов, подсветка синтаксиса,
предварительный просмотр веб-страницы и пр.
Чтобы запустить программу Quanta Plus из страндартного меню KDE
(должен быть установлен пакет kdewebdev! )
Главное меню — Разработка — Веб-разработка - Quanta Plus.
Рабочая область Quanta разделена на три сферы действия: глобальную,
локальную и проект. В зависимости от того, какая из них используется,
меняется набор отображаемых элементов управления.
Интерфейс Quanta Plus разделён на части:
1) строка меню;
2) редактор (рабочая область);
3) панели инструментов;
4) служебные панели;
5) информационные вкладки.
Чтобы создать новую страницу, нажмите следующую кнопку:
Рисунок 1.1 — Создание новой страницы.
Создать новый проект можно следующим образом:
Рисунок 1.2 — Создание нового проекта.
Можно указывать несколько вариантов рабочей области. Обычно в
промышленном варианте сайт храниться на одном из серверов в сети Интернет.
В нашем случае мозжно выбрать протокол Local и сайт будет храниться на
локальном носителе, или протокол ftp/fish и в качестве сервера указать
студенческий сервер kid.stu.cn.ua.
На заметку:
Рекомендуется использовать протокол fish ( безопастное подклбчение ssh ) и
полное имя сервера, для того, чтобы иметь возмодность редактировать сайт из
сети Интернет. Мастер создания проекта показан на рисунке 1.3.
Рисунок 1.3 — Мастер создания нового проекта
Далее запишем себя в авторы проекта и укажем кодировку, рекомендуется использовать
кодировку utf8. В последнем окне мастера можно загрузить файлы сервера, если таковые уже
имеются в каталоге нашего сайта.
После создания проекта нам нужно создать файлы в нашем проекте. Главный файл сайта
обычно называется index.html
Самый обычный HTML файл состоит как правило из следующих частей:
 Данные о типе документа (информация о используемой версии HTML)
 Заголовок (например информация о цели документа, его название и.т.п.)
 Тело (содержание документа, текст с заголовками, ссылками, графикой и.т.д.)
Пример файла показан на рисунке 1.4.
Рисунок 1.4 — Пример HTML страницы.
Как уже было сказано HTML файл состоит из тегов.
Тег — это специальный символ разметки, который применяется для
вставки различных элементов на веб-страницу таких как: рисунки, таблицы,
ссылки и др. и для изменения их вида. Для обозначения тегов используется
символ <тег>. Теги нечувствительны к регистру, поэтому запись <B> и <b>
эквивалентна. Теги бывают двух видов: парные, которые выделяют блок текста,
также называются еще контейнером
и одиночные. Контейнер требует
закрывающего тега, обозначаемого </тег>.
Поскольку одновременно возможно
использовать любое разумное
сочетание тегов, следует помнить об их вложенности. Один контейнер должен
находиться внутри другого, и никак не пересекаться
Правильное сочетание тегов:
<b><i>Полужирный курсивный текст</i></b>
Неправильное сочетание тегов:
<b><i>Полужирный курсивный текст</b></i>
В данном примере нарушена вложенность тегов один в другой. Хотя
браузер и отобразит пример корректно, самостоятельно «догадавшись», что от
него хотят, подобных ошибок следует избегать, поскольку они приводят к
замедлению работы страницы и к неправильной демонстрации страницы в
большинстве случаев.
Почти у каждого тега есть атрибуты.
Атрибут - это дополнительная настройка тега. Атрибуты вписываются
внутри тега после имени, но до закрывающей скобки >.
В итоге html тег в общем случае выглядит так
<тег атрибут1=значение1 атрибут2=значение2 ... /> - одиночный тег
<тег атрибут1=значение1> содержание </тег> - контейнерный тег
Для разных атрибутов у разных тегов определены разные значения по
умолчанию. Но в любом случае значения по умолчанию для тегов определены
так, чтобы теги "вели себя" самым ожидаемым образом.
Для контейнерных тегов, когда блоки начинают вкладываться друг в друга, то
значения по-умолчанию для внутренних тегов берутся из внешних.
Метатеги
Метатеги - это теги языка HTML, содержащие различную служебную
информацию. Метатеги размещаются в заголовке страницы (между тегами
<head> и </head> и имеют такой формат:
<meta name="имя" content="значение">
<meta http-equiv="имя" content="действие">
Условно метатеги можно разделить на три группы:
 содержащие управляющие команды для броузера;
<meta http-equiv="Content-type" content="text/html; charset=windows-1251">
Этот метатег говорит броузеру, в какой кодировке сделана страница. Вообще-то,
определять правильную кодировку должен либо сервер, либо броузер. Но не
всегда они бывают правильно настроены. И тогда посетитель, зайдя на
страницу, увидит вместо русского текста непонятные символы. Причем в
некоторых случаях не помогает даже явное переключение кодировки в
броузере.

содержащие управляющие команды для поисковых систем;
<meta name="description" content="описание страницы">
Именно "описание страницы" из этого метатега поисковые системы часто
показывают в результатах поиска, и от того, насколько это описание хорошее,
"зазывающее" и соответствующее тому, что хочет найти пользователь, во
многом зависит, перейдет ли он на ваш сайт или на соседний.

содержащие информацию о странице и ее авторе.
<meta name="site-created" content="10.11.2000">
Указывает дату создания сайта.
Рассмотрим пример тегов:
A — тег, создающий гиперссылку, пример на рисунке 1.5.
Рисунок 1.5 — Пример тега А.
Параметры
href
Задает адрес документа, на который следует перейти. По умолчанию
новый документ загружается в текущее окно браузера, однако это свойство
можно изменить с помощью параметра target. В качестве значения принимается
полный или относительный путь к файлу.
Пример:
<a href="http://kid.stu.cn.ua">Сайт кафедры ИКС</a>
name
Устанавливает имя якоря внутри документа.
Вначале следует задать в соответствующем месте закладку и установить
ее имя при помощи параметра name тега <А>. Имя ссылки на закладку
начинается символом #, после чего идет название закладки. Название
выбирается любое, соответствующее тематике. Можно также делать ссылку на
закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в
адресе ссылки надлежит указать ее адрес и в конце добавить символ решетки #
и имя закладки.
Между тегами <a name=...> и </a> текст писать не обязательно, так как
требуется лишь указать местоположение перехода по ссылке. Также вместо
текста ссылки можно использовать картинку.
Синтаксис
<a name="закладка">...</a>
Пример:
<p><a name="top">Валидация</a></p>
<p>Валидацией будем называть проверку документа на соответствие веб-стандартам и
выявление существующих ошибок. Соответственно, валидным является такой веб-документ,
который прошел подобную процедуру и не имеет замечаний по коду.</p>
<p><a href="#top">Наверх</a></p>
target
Имя окна или фрейма, куда браузер будет загружать документ.
Синтаксис
<a target="имя окна">...</a>
Аргументы
В качестве аргумента используется имя окна или фрейма, заданное параметром
name. Если установлено несуществующее имя, то будет открыто новое окно. В
качестве зарезервированных имен используются следующие.
_blank
Загружает страницу в новое окно браузера.
_self
Загружает страницу в текущее окно.
_parent
Загружает страницу во фрейм-родитель, если фреймов нет, то этот
параметр работает как _self.
_top
Отменяет все фреймы и загружает страницу в полном окне браузера, если
фреймов нет, то этот параметр работает как _self
Пример:
<a href="http://kid.stu.cn.ua" target=_self >Сайт кафедры ИКС</a>
<a href="http://kid.stu.cn.ua" target=_self >Сайт кафедры ИКС</a>
title
Добавляет всплывающую подсказку к тексту ссылки.
Общий пример:
<a href="http://kid.stu.cn.ua" target=''_self'' title=''Сайт кафедры ИКС'' >Сайт кафедры ИКС</a>
Другие теги
Все теги можно посмотреть в справочнике по тегам.
B
Устанавливает жирное начертание шрифта.
BODY
Элемент BODY предназначен для хранения содержания веб-страницы
(контента), отображаемого в окне браузера.
BR
Тег BR устанавливает перевод строки в месте, где этот тег встречается.
HR
Рисует горизонтальную линию, которая по своему виду зависит от
используемых параметров, а также браузера.
IMG
Тег IMG предназначен для отображения на веб-странице изображений в
графическом формате GIF, JPEG или PNG.
P
Определяет текстовый параграф. Тег P является блочным элементом,
перед ним всегда добавляется пустая строка, параграфы текста идущие друг за
другом разделяются между собой вертикальным промежутком.
TABLE
Элемент TABLE служит контейнером для элементов, определяющих
содержимое таблицы. Любая таблица состоит из строк и ячеек, которые
задаются с помощью тегов TR и TD.
UL
Тег UL устанавливает маркированный список. Каждый элемент списка
должен начинаться с тега LI.
CSS
Под термином CSS мы понимаем фразу "Каскадные Таблицы Стилей".
Они внедряются в HTML-код и не требуют никаких специальных редакторов и
компиляторов, ведь интерпретируются оные обычным браузером.
Каскадные таблицы стилей представляют собой описания различных
HTML-элементов и созданы они для расширения свойств последних. Впервые
стили были предложены WWW Consorcium'ом в рамках разработки
спецификации HTML 3.0
Возможности CSS более широки чем у просто го HTML . С их помощью
мы получаем возможность более изысканно и удобно оформить свой Web-сайт.
Синтаксис CSS довольно прост в изучении, поэтому освоение каскадных
стилей является делом достаточно легким, но весьма и весьма полезным.
Рассмотрим простой пример.
Возьмем типичную таблицу HTML и
поставим атрибут border="1". После интерпретации данного кода браузером мы
получим самый обыкновенный результат, к которому привык наш опытный
глаз. Другое дело, что таблицы подобного рода не совместимы ни с одним мало-
мальски хорошим дизайном. Какую красоту несет в себе псевдо-трехмерная
линия, представляющая собой границу? Вот тут и приходят на помощь CSS, по
средствам которых можно без лишних движений оформить любую таблицу на
свой вкус.
На сегодняшний день, без знаний CSS создать красивый сайт просто
невозможно, ведь при помощи стилей, мы можем настроить любые тонкости
каждого элемента.
Использование стилей
<STYLE TYPE=”text/css”>
Описание стилей форматирования
</STYLE>
В контейнер тэгов <STYLE> заключены описания различных
элементов. Атрибут TYPE указывает тип стилей, но является
необязательным. Тем не менее, во избежание всяких
казусов, рекомендуется ставить оный, в виду того, что
старые браузеры могут неправильно отобразить CSS.
Чаще всего каскадные таблицы располагаются в шапке документа, но здесь
имеются исключения. Чаще всего создают отдельные файлы, как, например,
style.css. Они служат для того, чтобы не перенасыщать страницу CSS-кодом,
загружая его из этих самых файлов.
Элементом таблицы стилей является стиль, пример стиля:
имя элемента {свойство: значение;}
Здесь «имя элемента» - это название какого-либо HTML-тега, чьи
свойства мы желаем задать. Для простоты и наглядности возьмем элемент
BODY и попытаюсь с помощью стилей сделать фон страницы желтым.
Нижеследующий код заключен в шапке документа, то есть между тегами
<HEAD> и </HEAD>.
<STYLE TYPE=”text/css”>
BODY {background-color: yellow;}
</STYLE>
Данное свойство можно задать и при помощи атрибута тега, рассмотрим
пример с расширением свойств тегов, результат на рисунке 1.6.
<HTML><HEAD>
<STYLE TYPE="text/css">
<!-- BODY {background-color: gray;}
H1 {
background-color: blue;
font-size: 200%;
color: black;
text-align: center;
}
--></STYLE>
</HEAD><BODY>
<H1>Это заглавие</H1></BODY>
</HTML>
Рисунок 1.6 — Пример работы CSS.
Таким образом, задан фоновый цвет элемента H1. Размер текста был
определен свойством font-size, значение которого можно указать, как в
процентах, так и в пикселях, например font-size: 8;
Как видно из примера, использование CSS существенно облегчает процесс
форматирования Web-страниц, и в этом заключается их главное преимущество.
Рассмотрим различные способы определения стилей. В рассмотренном ранее
примере стили объявлялись в специальном теге <STYLE>, но это не всегда
удобно.
Стиль можно определить внутри какого-либо HTML-тега. Выглядит это
следующим образом:
<P style=”text-align: center; font-style: italic; font-size: 5pt;”>
Действие такого стиля ограничивается элементом, в котором он прописан.
Данный способ рекомендуется использовать в крайних, единичных случаях.
Чаще всего каскадные стили загружают из внешнего файла. Это делается
следующим образом:
<link href=”style.css” type=”text/css” rel=”stylesheet”>
Последний атрибут дает понять браузеру, что содержимое файла style.css –
ничто иное, как таблицы стилей. Такой способ очень удобен и является одним
из самых предпочтительных. style.css – это текстовый файл, содержащий только
описания элементов. Здесь не должно быть никаких контейнеров и тегов.
Пример:
P{
text-indent: 15;
font-size: 20;
}
В HTML файле в котором будет использоваться такая таблица стилей все
абзацы будут иметь отступ 15 пикселей в начале, и шрифт 20 кегля.
Установку стилей для одного тега можно применять многократно.
font, P {font-size: 20;}
P, H1 {color: darkgreen;}
Стоит отметить, что установки стиля, заданные во внешнем файле имеют
меньший приоритет, чем настройки стиля в конкретном файле. Настройки
заданные в атрибуте «style» элемента имеют наивысший приоритет.
Существуют еще 2 способа определения стилей, а именно: через классы и
идентификаторы.
Предположим, вам необходимо задать свойства для тега P, но каждый абзац
должен быть отличным от предыдущего. Достигнуть данной цели известными
нам способами невозможно, вот тут-то и приходят на помощь классы. Давайте
посмотрим на очередной листинг:
<STYLE TYPE="text/css">
<!-p.one {background-color: #D6D2DD; font-style: regular; font-size: 15;}
p.two {background-color: #D1DED7; font-style: bold; font-size: 20;}
p.three {background-color: #DDD8D2; font-style: italic; font-size: 25;}
-->
</STYLE>
<BODY>
<P class="one"> CSS имеет очень простой синтаксис, но открывает нам новые грани, недоступные при
стандартной HTML-верстке.
<P class="two"> Зная CSS, вы сможете создать по-настоящему красивый сайт.
<P class="three"> Не забывайте просматривать исходники других сайтов, разбор которых поможет вам
приобрести необходимый опыт.
</BODY>
Результат выполнения такого кода в браузере выглядит следующим
образом:
Как видите, в данном случае описываемый элемент разделен на 2 сектора:
тег.имя-класса. У каждого класса есть свои свойства, которые Вы задаете в
фигурных скобках. Для того чтобы CSS вступили в действие, необходимо
вызвать класс в теге, который вы описывали. Делается это с помощью атрибута
class=”имя-класса”. Это очень удобный способ, который применяется почти
повсеместно.
Иногда возникают случаи, когда требуется создать класс, не привязанный
к определенному тегу. В предыдущем случае имя .one принадлежало элементу
P, но такая ситуация не всегда приемлема. В этих случаях определение тега
нужно опустить, на пример:
<STYLE>
.one {color: green;}
.two {color: blue;}
</STYLE>
После объявления стилей, их необходимо вызвать. В нашем случае, классы
становятся очень гибкими, и вызывать их можно в любом теге с атрибутом
class=”…”. К примеру:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.one {color: green;}
.two {color: blue;}
</STYLE>
</HEAD>
<BODY>
<Div class="one">Текст, написанный зеленым цветом.
<P class="two">Абзац, написанный синим цветом.
<HR class="one">
</BODY>
</HTML>
Результат на рисунке:
Идентификаторы
Объект нашего разбора применяется не столь часто, как изученные выше
классы, однако пренебрегать им не стоит. Любой идентификатор начинается с
префикса #id. Например:
#idFontArial {font-family: Arial;}
Затем вызываем идентификатор в HTML документе:
<P id=idFontArial>Шрифт с гарнитурой Arial</P>
Атрибут id задает уникальный идентификатор элемента в HTML
документе. Уникальность заключается в том, что его можно использовать в
документе только один раз.
Свободное позиционирование.
Если в HTML Web-мастер не имеет возможности тыкать текст, куда угодно
(без применения таблиц), то CSS решает проблему и делает это весьма
эффективно. Существует специальный параметр, имя которому Position. Он
может принимать 2 значения, а именно: absolute и relative. В первом случае мы
задаем абсолютное положение элемента, а во втором – его место относительно
начального.
Предлагаю вам рассмотреть один достаточно примитивный листинг и
поэкспериментировать с ним:
<HTML>
<HEAD>
<Style>
.1 {position: absolute; top: 37; left:17;}
.2 {position: absolute; top: 40; left:20; color: red;}
</Style>
</HEAD>
<BODY>
<H1 class="1">Это заглавие.</H1>
<H1 class="2">Это заглавие.</H1>
</BODY>
</HTML>
Результат представлен на рисунке:
Рисунок - свободное позиционирование.
Онлайн сервисы подбора цветовых схем и цветовой
гаммы сайта, цветовые решения для сайтов,
генераторы цвета
На благо дизайнеров разработаны и успешно функционируют бесплатные
онлайн сервисы подбора цветовых решений. Желтым фоном выделены самые
простые и удобные.







Kuler от Adobe (http://kuler.adobe.com/) - Адобе Кулер - самый мощный на
текущий момент онлайн сервис подбора цветовых решений. Kuler - цветовой
миксер от Adobe Labs, создание цветных палитр, рейтинг палитр,
подборка цветовой гаммы для проектов, поддерживается экспорт палитр в
продукты компании Adobe.
Color schemes generator 2 (http://wellstyled.com/tools/colorscheme2/index-en.html)цветовые темы 2
4096 Color Wheel (http://www.ficml.org/jemimap/style/color/wheel.html) - колесо из
4096 цветов, для выбора необходимой цветовой палитры
Color Schemer Online v2 (http://www.colorschemer.com/online.html) - подбора
цветовой гаммы онлайн
ColorMatch Redux - автоматическая генерация цветовой палитры по одному
первоначальному цвету
Technicolor (http://www.stylephreak.com/cm.php) - автоматический подбор палитры
и автоматическая раскраска веб страницы
armadaboard.com/color (http://www.armadaboard.com/color.htm) - таблица названий
цветов HTML
Порядок выполнения работы
1. Ознакомиться с заданием на лабораторную работу.
2. Создать проект сайта в среде Quanta+. Создание можно проводить как в
локальной директории (рекомендуется использовать собственный FLASH
-диск) так и
используя учетную запись студенческого сервера (
рекомендуется использовать подключение FISH).
3. На практике рассмотреть различные функциональные возможности среды
Quanta+, автоматические подстановки тегов, редактор CSS и системы
меню.
4. Разработать макет сайта согласно варианту задания. Варианты задания
выбираются по последней цифре зачетки. Реализация одного и того же
варианта не может быть одинаковой.
Задание по вариантам смотреть в приложении.
5. Составить отчет о выполнения лабораторной работы.
Содержимое отчета
Название и тема лабораторной работы.
Цель лабораторной работы.
Краткие теоретические сведения, все перепечатывать не надо.
Ход выполнения работы: последовательность выполненных действий, а
не переписанный из данного документа.
5. Исходные тексты макета и снимки окна браузера.
6. Анализ полученных результатов: особенности полученных результатов, с
какими трудностями пришлось столкнуться в ходе выполнения работы и
т.д.
7. Выводы.
1.
2.
3.
4.
Контрольные вопросы
Уровень сложности 1
1. Что такое HTML, его назначение и средства описания.
2. Что такое тэг ? пример тэга.
3. Что такое атрибут? пример атрибута.
4. Как создать таблицу, какие теги Вы можете использовать.
5. Приведите 10 примеров тегов и опишите их функцию.
6. Что такое метатеги, как их использовать.
7. Структура html-документа.
8. Что такое CSS, его назначение и средства описания.
9. Как вставить стили CSS в HTML файл (три способа).
10.Как задать стиль для какого-либо тэга?
11.Как задать стиль для class ? как его использовать в HTML ?
12.Как задать стиль для id ? как его использовать в HTML ?
Уровень сложности 2
13.Написать фрагмент HTML страницы, разбивая текст на 3 колонки.
14.Написать обязательные теги HTML страницы.
15.Создать CSS стиль для всех тегов H1...H3, задать цвет текста красный,
цвет фона зеленый, и правильно его применить.
16. Создать CSS класс с такими атрибутами: цвет текста: синий, отступ слева
20 пикселей. и правильно его применить.
17.Создать CSS класс с такими атрибутами: фон синий, с картинкой
повторяющейся по горизонтали, отступы слева 10 пикселей, справа 20
пикселей, сверху и снизу 0 пикселей.
18.Задать стиль абзаца для одного строго определенного тега с уникальным
идентификатором.
19.Написать свойства CSS изменения цвета ссылки при наведении на неё в
элементе ненумерованного списка в строго определенном теге с
уникальным идентификатором.
Уровень сложности 3
20.Выполнить интерпретацию HTML и CSS кода.
ПРИЛОЖЕНИЕ — ВАРИАНТЫ ЗАДАНИЯ
Задание на лабораторную работу:
Для всех:
Создать страничку, структура которой соответствует указанной в снимке экрана
(название файла будет указано). Все остальные детали смотрите в своем
варианте
Название странички должно быть у каждого свое.
Задать метатеги указывающие кодировку и авторство. Остальные метатеги
согласно заданию.
Цвета для страницы используйте те, которые указаны для каждого варианта
Текст основного текста после слов «Приветствую Вас у себя на сайте»может
быть любым.
Использует CSS как можно «полней»
Ссылки для установки (ссылки должны быть рабочие)
http://www.ofMyCity.com - Черниговский портал www.ofMyCity.com
http://korrespondent.net/- Корреспондент - новости Украины
http://football.ua - football.ua - вся правда о футболе
http://kid.stu.cn.ua/ - Сайт кафедры ИКС
http://htmlbook.ru/ - htmlbook.ru - все о CSS и HTML
http://www.ficml.org/jemimap/style/color/wheel.html" - 4096 Color Wheel
http://www.armadaboard.com/color.htm - таблица названий цветов HTML
В основной блок сайта ( самый большой) вставить свой вариант задания (текст
) и картинку.
Вариант 1
1. файл var1.jpg
2. использованные цвета - #ffffff (фон), #cccccc (заголовки и линии),
#FFFFCC (фон), #BA7000 (фон разделов со ссылками, названия
страницы), #000000 — основной текст
3. в CSS описаны свойства ссылок, фон тела, свойства заголовков и т.д., с
привязкой к тегам.
4. CSS находится в отдельном файле и «подгружается» в страницу
5. ссылки открываются в новой вкладке
6. В главный блок вставить картинку var1.jpg с подобранными под размер
станицы размерами.
Вариант 2
1. файл var2.jpg
2. использованные цвета - #ffffff (фон), #008000 (заголовки), #B0E0E6 (фон),
#9ACD32 (фон разделов со ссылками, названия страницы), #000000 —
основной текст
3.
4. CSS -cтили определяются внутри конкретного HTML-тэга.
5. Ссылки открываются в текущее окно.
6. При наведении на ссылку появляется «подсказка»
7. В главный блок вставить картинку var2.jpg с подобранными под размер
станицы размерами.
Вариант 3
1. файл var3.jpg
2. цвета: фоновые - #F0E68C, #ffffff, разделы и название страницы:
#9ACD32
3. ссылки и название страницы выровнять по центру
4. CSS -cтили определяются в заголовке
5. должны быть «рабочие» метатеги
6. В главный блок вставить картинку var3.jpg с подобранными под размер
станицы размерами.
Вариант 4
1. файл var4.jpg
2. цвета: фоновые - #ffffff, разделы и фон шапки: #ffd700
3. ссылки и название страницы выровнять по центру
4. CSS находится в отдельном файле и «подгружается» в страницу
5. стили заданы классами
6. вставить «рабочие» метатеги
7. В главный блок вставить картинку var4.jpg с подобранными под размер
станицы размерами.
Вариант 5
1. файл var5.jpg
2. страница разбивается на 3 колонки
3. CSS -cтили определяются в заголовке
4. цвета: фоновые и заголовки- #8b008b, для блоков ссылок: #d3d3d3
5. при верстке используем таблицы
6. В главный блок вставить картинку var5.jpg с подобранными под размер
станицы размерами.
Вариант 6
1. файл var6.jpg
2. страница разбивается на 3 колонки
3. CSS-cтили определяются в отдельном файле
4. цвета: заголовки- #8b008b, для блоков ссылок: #d3d3d3
5. при верстке используем блоки (div)
6. цвет фона в шапке меняем на зеленый
7. В главный блок вставить картинку var6.jpg с подобранными под размер
станицы размерами.
Вариант 7
1. файл var7.jpg
2. использованные цвета - #ffffff (фон), #cdcdcd (заголовки и линии),
#FFFFCC (фон), #CD7B29 (фон разделов со ссылками, названия
страницы), #000000 — основной текст
3. в CSS описаны свойства ссылок, фон тела, свойства заголовков и т.д. с
использованием классов.
4. CSS находится в одном файле с HTML страницей
5. ссылки открываются в том же окне.
6. В главный блок вставить картинку var7.jpg с подобранными под размер
станицы размерами.
Вариант 8
1. файл var8.jpg
2. страница разбивается на 3 колонки
3. CSS-cтили определяются в отдельном файле
4. цвета: заголовки- #780078, для блоков ссылок: #AEAEAE
5. при верстке таблицы
6. цвет фона в шапке меняем на зеленый
7. В главный блок вставить картинку var8.jpg с подобранными под размер
станицы размерами.
Вариант 9
1. файл var9.jpg
2. цвета: фоновые - #ffffff, разделы и фон шапки: #BDA100
3. ссылки и название страницы выровнять по правому краю
4.
5.
6.
7.
CSS находится в том же файле , что и HTML страница
стили заданы идентификаторами (id) элементов.
вставить «рабочие» метатеги
В главный блок вставить картинку var9.jpg с подобранными под размер
станицы размерами.
Вариант 10
1. файл var10.jpg
2. использованные цвета - #ffffff (фон), #008000 (заголовки), #B0E0E6 (фон),
#9ACD32 (фон разделов со ссылками, названия страницы), #000000 —
основной текст
3.
4. CSS -cтили определяются подгружаются из внешнего файла.
5. Ссылки открываются в новое окно.
6. При наведении на ссылку появляется «подсказка»
7. В главный блок вставить картинку var10.jpg с подобранными под размер
станицы размерами.
Вариант 11
1. файл var11.jpg
2. цвета: фоновые - #E0D783, #ffffff, разделы и название страницы:
#8FBF2E
3. ссылки и название страницы выровнять по левому краю
4. CSS -cтили определяются отдельном файле и включаются в основную
страницу.
5. должны быть «рабочие» метатеги
6. В главный блок вставить картинку var11.jpg с подобранными под размер
станицы размерами.
Вариант 12
7. файл var12.jpg
8. страница разбивается на 3 колонки
9. CSS -cтили определяются отдельном файле и включаются в основную
страницу.
10.цвета: фоновые и заголовки- #7D007D, для блоков ссылок: #d4d4d4
11.при верстке используем div
12.В главный блок вставить картинку var12.jpg с подобранными под размер
станицы размерами.