Главная | Обратная связь | Поможем написать вашу работу!

Форсирование обрыва строки: элемент BR

Описание: принудительно обрывает (оканчивает) текущую строку текста, но абзац не заканчивается.

Начальный тег: необходим

Конечный тег: запрещён

Пример:

<p> Первая строка абзаца<br>	Печатает абзац такого вида:Первая строка абзацаВторая строка абзаца.
Вторая строка абзаца.

Изменение шрифта текста: элемент FONT

Описание: определяет вид, размер и цвет шрифта для текста.

Начальный тег: необходим

Конечный тег: необходим

Определения атрибутов:

size = number – у станавливает размер шрифта. Возможные значения:

· Целое число от 1 до 7. Устанавливает шрифт в определённый фиксированный размер, представление которого зависит от браузера пользователя.

· Относительное увеличение размера шрифта. "+1" означает: на один размер больше. "-3" означает: на три размера меньше. Все размеры находятся в пределах шкалы от 1 до 7

color = color – устанавливает цвет текста

face = string – задает имя шрифта

Пример:

<font size=’1’ color=’black’ face=’Tahoma’> Строка</font>

Печатает слово «Строка» черным цветом, шрифт «Tahoma» размером 1.

Элементы стиля шрифта: TT, I, B, BIG, SMALL, STRIKE, S и U

Описание:

TT: моноширинный текст, телетайп.

I: курсив.

B: полужирный.

BIG: "большой" шрифт.

SMALL: "малый" шрифт.

STRIKE и S: зачёркнутый текст.

U: подчёркнутый.

Начальный тег: необходим

Конечный тег: необходим

Примеры:

<b>bold</b>	полужирный
<i>italic</i>	курсив
<b><i>bold italic</i></b>	полужирный курсив
<tt>teletype text</tt>	телетайп
<big>big</big>	"большой" шрифт
<small>small</small>	"малый" шрифт

Подиндекс и надиндекс: элементы SUB и SUP

Описание: переводит текст в нижний и верхний регистр

Начальный тег: необходим

Конечный тег: необходим

Примеры:

H<sub>2</sub>O	H₂O
E = mc<sup>2</sup>	E=mc²

Бегущая строка: элемент MARQUEE

Описание: создания бегущей строки

Начальный тег: необходим

Конечный тег: необходим

Определения атрибутов:

bgcolor = color –цвет фона бегущей строки

loop = number – число повторов анимации бегущей строки (значение может быть целым или infinite – текст будет продолжать бегать пока читатель не перейдет на новую страницу)

direction = left|right|up|down – определяет направление: left (по умолчанию) – справа налево, right – слева направо, up – снизу вверх, down – сверху вниз.

scrollamount = number – скорость движения строки. (Рекомендуется ставить скорость "1", в этом случае строка выглядит более удобочитаемо и не дёргается).

scrolldelay = number – задаёт временной интервал между шагами бегущей строки.

width = number – ширина бегущей строки в пикселях.

height = number – высота бегущей строки. (Если вы делаете бегущую строку в одну строчку, то можно высоту не указывать, она сама подбирается под размер букв).

Примеры:

<marquee>Бегущая строка</marquee>	Надпись «Бегущая строка» двигается влево
<marquee direction=”right” scrollamount=1 scrolldelay=20>Бегущая строка</marquee>	Надпись «Бегущая строка» двигается вправо со скоростью равной 1 и с временным интервалом 20.

Горизонтальные линии: элемент HR

Описание: описывает горизонтальную линию

Начальный тег: необходим

Конечный тег: запрещён

Определения атрибутов:

align = left|center|right – определяет горизонтальное выравнивание линии.

size = number – определяет высоту линии.

width = number – определяет ширину линии. Значение может быть числовым и в процентах от ширины окна браузера.

color = color – устанавливает цвет линии.

Примеры:

<HR align="center">	Линия, расположенная по центру и шириной 50% от размера окна.
<HR size="5" align="left" color=”#ff0000”>	Красная линия, расположенная слева, высотой 5 точек и шириной 100 точек.

Задания.

1. Запустить программу Блокнот и открыть документ index. html.

2. Изменить документ так, чтобы надпись «Колледж «Права и экономики» была заголовком первого уровня и выровнена по центру, надпись специальности – заголовком второго уровня, также выровнена по центру.

3. Добавить в документ параграф: Привет, меня зовут …. Сейчас мы изучаем язык HTML (Hypertext Markup Language).

4. Добавить в документ параграф: Мой адрес …, выровненный по правому краю.

5. Установить для слова Привет размер 5, цвет – желтый.

6. Для всего оставшегося параграфа: размер 4, цвет – maroon.

7. После слова привет вставить принудительный обрыв строки

8. Для последнего абзаца установить шрифт: размер 2, цвет – зеленый.

9. Для слова Привет установить шрифт Impact.

10. Для своей фамилии, имен, отчества установить шрифт Arial Black.

11. Подчеркнуть фамилию, имя, отчество.

12. Слово Привет написать курсивом.

13. Большим шрифтом выделить специальность.

14. Слово HTML зачеркнуть.

15. После слова HTML добавить предложение: Еще мы знаем немного математики, например, разность кубов вычисляется по формуле: a³- b³=(a- b)*(a²+ ab+ b²), а сумма членов арифметической прогрессии равна: S_n=(a₁+ a_n)/2.

16. Сделать строку Фамилия, имя, отчество бегущей, установив цвет фона gray, направление слева направо.

17. Нарисовать линию на всю ширину экрана под надписью Колледж «Права и экономики»

Лабораторная работа №3

«Работа со списками»

Цели:

научиться работать со списками;
научиться структурировать документ.

Организация текста внутри документа. HTML позволяет определять внешний вид целых абзацев текста. Абзацы можно организовывать в списки, выводить их на экран в отформатированном виде, или увеличивать левое поле. Разберем все по порядку.

Ненумерованные списки: <UL>... </UL>.

Описание: описывают ненумерованный список.

Начальный тег: необходим

Конечный тег: необходим

Определения атрибутов:

type = disc|circle|square – задает стиль меток для данного списка: circle (кружок), disc (закрашенный кружок, по умолчанию) или square (квадрат).

Нумерованные списки: < O L>... </ O L>.

Описание: описывают нумерованный список.

Начальный тег: необходим

Конечный тег: необходим

Определения атрибутов:

type = 1 | a| A| i| I – задает стиль меток для данного списка: 1(арабские цифры, по умолчанию), a (латинский алфавит, нижний регистр) или A (латинский алфавит, верхний регистр), i (римский алфавит, нижний регистр), I (римский алфавит, верхний регистр).

start = number – устанавливает номер первого элемента упорядоченного списка. По умолчанию это "1". Заметьте, что, хотя значением этого атрибута является целое число, соответствующие метки могут быть нечисловыми.
Так, если стиль элемента списка это латинские буквы в верхнем регистре (A, B, C,...), start=3 означает "C". Если стиль – это римские цифры в нижнем регистре, start=3 означает "iii" и т.д.

Каждый элемент обоих списков должен быть определен тэгом <LI>.

Элемент нумерованного и ненумерованного списков: <L I >.

Описание: описывают элемент списка.

Начальный тег: необходим

Конечный тег: не обязателен

Определения атрибутов:

value = число – устанавливает номер текущего элемента списка. Заметьте, что, хотя значением этого атрибута является целое число, соответствующие метки могут быть нечисловыми (см. атрибут start).

Примеры:

<UL type=”disc”> <LI> первый элемент списка...</LI> <LI> второй элемент списка... </UL>	· первый элемент списка... · второй элемент списка...
<OL type=”1”> <LI value=10> первый элемент списка... <LI> второй элемент списка... </OL>	10. первый элемент списка... 11. второй элемент списка...
<OL type=”i” start=”5”> <LI> первый элемент списка...</LI> <LI value=”10”> второй элемент списка... <LI> третий элемент списка... </OL>	V. первый элемент списка... X. второй элемент списка... третий элемент списка... XI. третий элемент списка...

Задания.

Запустить программу Блокнот.
В новом документе оформить документ следующим образом (картинку можно вставить любую. Замечание: 1) найдите на винчестере нужную Вам картинку и скопируйте ее в свою папку, 2) файл назовите obomne. html и сохраните его в своей папке):

Кратко о себе:

1.Фамилия

2.Имя

3.Отчество

4.Дата рождения.

5.Место рождения.

6.Факультет.

7.Группа.

8.Хобби:

· Первый интерес

· Второй интерес

· Третий интерес

9.Знание компьютера:

o первая программа

o вторая программа

o третья программа

Для своей странички установить фон.
Строка «Кратко о себе» должна быть написана 7 шрифтом, цвет установить по своему усмотрению, шрифт – полужирный курсив и оформить ее в виде бегущей строки.
Строки, обозначенные цифрами, должны быть написаны 5 размером шрифта, цвет выбрать по своему усмотрению.
Хобби и название известных Вам компьютерных программ должны быть написаны 4 размером шрифта, цвет выбрать по своему усмотрению.
Под строкой Отчество провести линию синего цвета, ширина которой равна 3, во всю страницу.
Внизу страницы провести линию, под которой написать справа адрес своей электронной почты.

Лабораторная работа №4

«Работа со ссылками»

Цели:

научиться работать со ссылками;
научиться структурировать документ.

1. Основные сведения. Существует три типа ссылок: внутристраничные – они задают переходы в пределах одной страницы; внутрисистемные – ссылки между страницами в пределах одного и того же сервера; и межсистемные – ссылки на страницы, расположенные на удаленных узлах Web. Для определения ссылок предназначен специальный тег, который называется Anchor (якорь).

Элемент А.

Описание: определяет ссылку или якорь.

Начальный тег: необходим

Конечный тег: необходим

Определения атрибутов:

name = “строка” – именует текущий якорь, который может стать якорем назначения для другой гиперссылки. Значением этого атрибута должно быть уникальное имя якоря. Областью видимости этого имени является текущий документ.

href = “строка” – определяет размещение ресурса Web, определяя таким образом ссылку с текущего элемента на якорь назначения, определённый этим атрибутом.

Примеры:

<a name=”info”>Информация</a>	Создается метка с именем info.
<a href=”http://www.cspu.ru”>ЧГПУ</a>	Создается ссылка на сайт ЧГПУ.

Цвет ссылки можно задать при помощи атрибутов тэга BODY:

link = “color” – устанавливает цвет непосещённых гиперссылок.

vlink = “color” – устанавливает цвет посещённых гиперссылок.

alink = “color” – устанавливает цвет гиперссылок при выборе пользователем.

Пример:

Цвет непосещенных гиперссылок – красный, посещенных – синий.

Для указания ссылки на электронный ящик в значение атрибута href должно быть “mailto:имя_электронного_ящика”.

Пример:

<a href=”mailto:roman@cspi.urc.ac.ru”>Напишите мне</a>

Создается ссылка «Напишите мне», щелкнув по которой, можно написать и отправить письмо.

1.1. Внутристраничные ссылки:

1.1.1. Создать имя (метку) для точки назначения, в которую должен осуществляться переход. Метка создается с помощью тега якоря, используя его атрибут NAME (например, <A NAME=”info”> Дополнительная информация </A>). Фраза "Дополнительная информация" при этом никак не будут выделены в тексте документа.

1.1.2. Для создания гиперссылки на эту точку документа используется тег <A> с атрибутом HREF=, при этом к имени якоря присоединяется знак #: <A HREF=”#info”> Просмотр дополнительной информации </A>. Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента (в нашем случае фразы Просмотр дополнительной информации), при нажатии на который произойдет переход к строчке Дополнительна информация.

1.2. Внутрисистемные ссылки:

1.2.1. В файле, в который мы хотим перейти необходимо создать метку аналогично п. 1.1.1.

1.2.2. Создать гиперссылку аналогично п. 1.1.2, только имя якоря присоединяется к имени файла через знак # (Кратко о моих увлечениях и хобби можно посмотреть <A HREF=”obomne.html#info”> здесь </A>). При нажатии на выделенный фрагмент произойдет переход строчке #info в файле с именем obomne.html.

1.2.3. Задание: В файл index. html добавить абзац «Кратко о моих увлечениях и хобби можно посмотреть здесь» после абзаца со словами «Еще мы изучаем математику …».

1.2.4. В начале файла obomne. html фразу «Кратко о себе» заключить в теги < A NAME=” info”> и < A>.

1.2.5. В документе main. html слово «здесь» оформить гиперссылкой на документ obomne. html на якорь «info»

1.2.6. Изменить цвет непосещенных гиперссылок на красный, а посещенных на черный.

1.2.7. Опробовать действие гиперссылки.

1.2.8. В файл obomne. html внизу страницы поместить абзац, состоящий из одного слова «Назад», выровненного по центру.

1.2.9. Организовать обратный переход.

1.3. Межсистемные ссылки. Используя эти ссылки можно установить связь с любой страницей на любом узле Web.

1.3.1. В этом случае необходимо создать только гиперссылку, например, ссылка на сервер фирмы Microsoft выглядит следующем образом: <A HREF="http://www. microsoft. com"> Переход на сервер компании Microsoft </ A>. При нажатии на выделенный фрагмент произойдет переход на сервер фирмы Microsoft.

1.3.2. Задание: в документ main. html добавить абзац «Здесь вы можете посмотреть сервер Челябинского государственного педагогического университета».

1.3.3. Оформить абзац по своему усмотрению.

1.3.4. Оформить абзац как гиперссылку на адрес http:// www. preco. ru.

1.3.5. Адрес e - mail внизу страницы сделать ссылкой. Теперь пользователь сможет отправлять электронные письма по этому адресу.

1.3.6. В документе obomne. html добавить гиперссылку на сервер Челябинского государственного педагогического университета и отправку электронной почты.

Лабораторная работа №5

«Графика и мультимедиа»

Цели:

научиться работать с рисунками;
научиться структурировать документ с элементами мультимедиа.

1. Изображения в HTML-документе.

Вставка изображения в HTML-страницу осуществляется с помощью тэга <IMG>.

Тэг < IMG>.

Описание: внедряет изображение в текущий документ в месте определения элемента.

Начальный тег: необходим.

Конечный тег: запрещен.

Определения атрибутов:

src = “строка” – задающая путь в структуре каталогов до файла с изображением (наиболее распространённые форматы изображений: GIF, JPEG и PNG);

alt = “строка” – определяет альтернативный текст (который появляется при наведении курсора мыши на изображение);

width = “число” – определяет ширину объекта (изображения);

height = “число” – определяет высоту объекта. Для уменьшения времени загрузки страницы с графикой полезно указывать размер изображения. Если он известен еще до загрузки страницы, то браузер может отвести рамку для картинки, а затем загружать текст на страницу. Пока загружается графика, посетитель страницы может начать читать текст.

border = “число” – определяет ширину рамки вокруг объекта;

align = “bottom|middle|top|left|right” – определяет позицию объекта по отношению к окружающему тексту (bottom – низ объекта должен быть выровнен вертикально по текущей базовой линии (по умолчанию), middle – центр объекта должен быть выровнен вертикально по текущей базовой линии, top - верх объекта должен быть выровнен вертикально по верхней границе текущей строки, left – прижимает объект к левому краю, right – прижимает объект к правому краю).

Примеры:

<img src=”pic1.jpg” ProductID="100”" w:st="on">100” height=”100” align=”right”>	Вставить картинку pic1.jpg размером 100х100 и обтеканием текстом слева
<img src=”pic1.jpg” border=”2”>	Вставить картинку с рамкой шириной 2 пикселя.

1.1. Задание:

1.1.1. В графическом редакторе нарисовать эмблему Вашей специальности или колледжа и сохранить его под именем emblem. jpg в Вашей папке.

1.1.2. В файл index. html вверху страницы по середине вставить картинку emblem. jpg и ее подписать «Эмблема колледжа (или специальности) …», ширина рамки – 5 пикселов.

1.1.3. Внизу страницы расположить фотографию Колледжа (файл College.jpg). Установить соответствующую высоту, ширину и толщину рамки, выравнивание по левому краю и рядом по середине фотографию, сделать подпись «Колледж Права и экономики».

1.1.4. В броузере отключить отображение графики (используя систему помощи броузера) и заново просмотреть созданный документ.

1.1.5. Нарисовать в графическом редакторе рисунок, в котором красиво написать «Назад».

1.1.6. Создать новый документ, назвав который photos. html, где разместите свою фотографию и сделать подпись к ней. Внизу страницы по середине сделать надпись «Назад», которую оформить в виде гиперссылки на документ index. html.

1.1.7. В документе index. html сделать гиперссылку на файл photos. html, добавив абзац «Здесь вы можете посмотреть мою фотографию».

1.1.8. В документе photos. html внизу страницы рядом с надписью «Назад» расположить картинку, которую оформить в виде гиперссылки на главную страницу.

2. Создание анимированных gif -файлов на примере Corel Photo - Paint.

2.1. Создать ролик, в котором буква за буквой появляется надпись «Группа …» (название Вашей группы), для этого:

2.1.1. Запустите графический редактор Corel Photo- Paint.

2.1.2. Выберите пункт меню Файл|Новый.

2.1.3. Установите размеры изображения 400 x50 пикселов, режим – 8-ми битная палитра, цвет фона установите по своему усмотрению, поставьте флажок «Создать фильм», количество кадров оставьте равным 1.

2.1.4. Выбрать инструмент текст и в левом нижнем углу написать заглавную букву «Ф». Установить цвет и размер буквы.

2.1.5. Выделить букву и выполнить команду меню Объект|Комбинировать->Склеить объекты с фоном.

2.1.6. Выполнить команду меню Фильм|Вставить кадр. Отметить опцию «Копировать текущий кадр» и нажать ОК. Таким образом появится второй кадр точно такой же как первый.

2.1.7. На новый кадр добавить следующую букву другого цвета (можно ее расположить по дуге, относительно других букв). Перейти к п. 2.1.5.

2.1.8. Аналогично выполнить действия для каждой буквы.

2.1.9. После создания последнего кадра. Сохранить документ как GIF.

2.2. Добавьте изображение на все страницы вверху.

3. Звук и видео. Вы можете добавить на свою страничку звуки или видеоклипы. Они могут запускаться автоматически при загрузке странички. Для этого используется тег <EMBED>, который предназначен для встраивания объектов в документ.

Описание: внедряет объект текущий документ в месте определения элемента.

Начальный тег: необходим.

Конечный тег: необходим.

Определения атрибутов:

autostart = “true|false” – определяет автозапуск звука или видеоклипа;

repeat = “true|false” – определяет после проигрывания записи начинать ли заново;

width = “число” – определяет ширину объекта (изображения);

height = “число” – определяет высоту объекта.

border = “число” – определяет ширину рамки вокруг объекта;

align = “center|left|right” – расположение пульта управления.

Примеры:

Проигрывать WAV файл со стандартным пультом управления, автостартом и с разрешением повтора

3.1.1. Задание:

3.1.1.1. На жестком диске найти файлы с разрешением avi и скопировать один из них в свою папку.

3.1.1.2. Поместить на страничку выбранное видео.

Практическая работа №1

«Работа с каскадными таблицами стилей»

Цели:

научиться работать с каскадными таблицами стилей;
изучить основные методы работы с CSS, селекторы, атрибуты.

Задание

Оформить подготовленный структурированный гипертекст, представленный в файле index.html в соответствии со стилем представленным на рисунке index.bmp

При выполнении работы допускается использовать «песочницу» http://cssdesk.com/

и справочник http://htmlbook.ru/css

Для подробного освоения темы по «margin» и «padding» рекомендуется прочитать:

http://habrahabr.ru/blogs/css/121810/

http://habrahabr.ru/blogs/css/123250/

Исходный HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Template</title>

@import "style.css";

</style>

</head>

<body>

<ul>

<li><a href=#>ARTICLES</a></li>

<li><a href=#>GALLERY</a></li>

<li><a href=#>AFFILIATES</a></li>

<li><a href=#>SUPPORT</a></li>

<li><a href=#>CONTACT</a></li>

</ul>

</div>

<h2>Top Articles:</h2>

<ul>

<li><a href=#>NoHeader Template</a></li>

<li><a href=#>Consectetuer adipiscing elit</a></li>

<li><a href=#>Lorem ipsum dolor sit amet</a></li>

<li><a href=#>dolor sit amet consectet</a></li>

</ul>

<hr />

<h2>Links</h2>

<ul>

<li><a href="htmlbook.ru/samcss">htmlbook.ru/samcss</a></li>

</ul>

<hr />

</div>

<h2><a href=#>Try sNews 1.4!</a></h2>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer euismod ante non diam. Sed eleifend odio sed quam. Sed vulputate, <a href=#>turpis at tincidunt</a> porttitor, est elit consequat metus, non dignissim augue mauris quis arcu. Phasellus faucibus blandit eros. Curabitur porttitor ante non est. Maecenas dolor. Aenean egestas sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed suscipit, nisi sit amet pharetra malesuada, sem velit laoreet sem, vitae iaculis diam neque consequat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tincidunt eros non quam. Mauris a magna sit amet libero accumsan auctor. Aenean nec urna non dui lobortis viverra...

<p class="date">Posted by Avenir <img src="more.gif" alt="" />

<a href=#>Comments (2)</a> <img src="timeicon.gif" alt="" /> 21.02.</p>

<br />

<h2><a href=#>Heading Item</a></h2>

<p class="date">Posted by James <img src="more.gif" alt="" />

<a href=#>Comments (7)</a> <img src="timeicon.gif" alt="" /> 18.01.</p>

<br />

<div class="boxad"> Your Ads here...sNews is a completly free PHP and MySQL driven tool for publishing and maintaining news articles on a website.</div>

</div>

</div>

</body>

</html>

Требуемый стиль:

Ход работы

1. Для селектора «body»:

- установить цвет фона тела страницы #7D8085 используя свойство «background» селектора «body»;

- установить шрифт тела страницы 74% Arial, Sans-Serif используя свойство «font»;

2. Для селектора (класса) «.toph»:

- установить неповторяющийся фоновый рисунок «top.jpg», без полей, высотой 39px, с выравниванием по центру используя свойства «background», «height», «margin», «padding»;

3. Для селектора (класса) «.content»:

- установить повторяющийся фоновый рисунок «bg.jpg», без полей, шириной 800px, с выравниванием по центру используя свойства «background», «width», «margin», «padding»;

4. Для селектора (класса) «.title»:

- установить неповторяющийся фоновый рисунок «logo.jpg» c выравниванием по левой стороне используя свойство «background»;

- с полями от верхнего края 10px, от левого 40px, высотой 28px используя свойства «height», «padding»;

- установить размер шрифта 140%, полужирный, цвет #F29900 используя свойство «font»;

5. Для селектора (класса) «.right»:

- установить обтекание слева используя свойство «float»;

- с отступом от правого края 15px, и полем от правого края 1em используя свойства «margin», «padding»;

- установить размер шрифта 95%, полужирный, используя свойство «font»;

- установить ширину слоя 170px, используя свойство «width»;

6. Для селектора (класса) «.footer»:

- установить запрет на обтекание одновременно с правого и левого края используя свойство «clear»;

- установить неповторяющийся фоновый рисунок «bot.jpg» c выравниванием по центру стороне используя свойство «background»;

- установить выравнивание текста по центру используя свойство «text-align»;

- установить высоту слоя в 37px, используя свойство «height»;

- установить автоматическую ширину слоя «auto», используя свойство «width»;

7. Для селектора (класса) «.center»:

- установить обтекание справа, используя свойство «float»;

- установить ширину слоя 530px, используя свойство «width»;

- установить размер шрифта 95%, полужирный, используя свойство «font»;

- установить цвет текста #FFF;

- установить поля и отступы соответственно «margin: 0px 0 5px 35px; padding: 0;»;

8. Установить цвет ссылок для центрального блока:

- цвет основной ссылки #F29900 используя селекторы «.center a»;

- цвет ссылки под курсором #FFF используя селекторы «.center a:hover»;

9. Установить для блока «date»:

- цвет основного текста #ccc

- выравнивание текста по правому краю, используя свойство «text»

- поля и отступы соответственно «margin: 4px 0 5px 0; padding: 0.4em 0 0 0;»

- верхнюю границу блока толщиной в 1px цветом #555, используя свойство «border»;

10. Установить цвет ссылки в #ccc, используя свойство «color» селектора «.date a»;

11. Установить цвет ссылки в #7D8085, используя свойство «color» селектора «.right a»;

12. Установить цвет тегов параграфа и ссылок в #888, используя свойство «color» селекторов «p» и «а»;

13. Для селектора «а»:

- установить наследование фона, используя свойство «background» с параметром «inherit»;

- выключить стили текста, используя свойство «text-decoration»;

14. Для селектора «p» установить отступы и поля соответственно «margin: 0 0 5px 0; padding: 0;»

15. Для селектора «hr»:

- установить высоту 1px;

- установить основной и фоновый цвет в #eee;

- убрать «border»;

16. Для селектора заголовка «h1»:

- убрать отступы и поля;

- установить цвет в #FFF;

- установить жирный шрифт размера 1.8em, гарнитур Arial, Sans-Serif;

- установить наследование фона, используя свойство «background» с параметром «inherit»;

-установить свойство letter-spacing равным «-1px»;

17. Установить цвет для ссылок «а» находящихся в заголовке «h1» в #FFF, и установить для них наследование фона.

18. Для селектора заголовка «h2»:

- установить наследование цвета фона, используя свойство «background» с параметром «inherit»;

- установить отступы и поля согласно «margin: 10px 0 10px 0; padding:0;»

- установить основной цвет в #F29900;

- установить размер шрифта 140%, жирный;

19. Установить цвет для ссылок «а» находящихся в заголовке «h2» в #F29955. Для ссылок под курсором установить тот же цвет и убрать подчёркивание.

20. Применить стили элементов списка согласно инструкциям и вставить комментарии действия свойств:

ul { margin: 5px 0 20px 15px;

padding: 0;

list-style: none;

}

li { list-style-type: square;

color: #F29900;

margin: 0 0 0px 0;

padding: 0 0 0 0px;

}

li a { color: #7D8085; }

li a:hover { color: #F29900; }

21. Выполнить применение указанных стилей тремя методами: связанным, глобальным и внутренним

22. Дополнительно:

- рассмотреть работу базовых макетов построения сайта представленных в http://htmlbook.ru/layout

- ознакомиться с материалами статьи http://habrahabr.ru/blogs/css/126207/

Практическая работа №2

«Экспорт стилей и валидация»

Цели:

научиться экспортировать стили;
научиться структурировать документ.

Ход работы

Используя материал предыдущей работы выполнить следующее задание:

1. Сменить заголовок с «GRAY» на «CSS», подобрать логотип.

2. Перенести из учебника материал, по числу пунктов меню начиная с введения.

3. Выполнить хотя бы одно абсолютное и относительное позиционирование (http://ru.html.net/tutorials/css/lesson14.php).

4. Сделать хотя бы один плавающий блок – картинку (см. http://ru.html.net/tutorials/css/lesson13.php)

5. Сделать наслоение (http://ru.html.net/tutorials/css/lesson15.php)

6. Указать у всех используемых шрифтов родовые имена и объяснить зачем это нужно. (http://ru.html.net/tutorials/css/lesson4.php)

7. Выполнить экспорт стилей в файл и осуществить его подключение

8. Выполнить валидацию файла стиля (см. http://ru.html.net/tutorials/css/lesson16.php)

Лабораторная работа №1

«Знакомство с синтаксисом языка»

Цели:

ознакомиться с синтаксисом языка;
иметь представление о методах ввода/вывода информации;
знать способы объявления переменных;
уметь применять полученные знания на практике.

⇐ Предыдущая 123 4 5 6 7 Следующая ⇒

Воспользуйтесь поиском по сайту: