Основы создания HTML и CSS документов в программе Aptana Studio 3. 4 страница
2. Задать первый абзац: выравнивание по центру, цвет текста задать в RGB-палитре (250,250,210), размер шрифта равен 6 миллиметрам, тип шрифта Arial Black, слово первый выделить курсивом. Текст абзаца "Это первый абзац, выровненный по центру, цвет текста в RGB-палитре (250,250,210), размер шрифта равен 6 миллиметрам, тип шрифта Arial Black, слово первый выделить курсивом "
3. Задать второй абзац: выравнивание по ширине, цвет текста задать в шестнадцатеричном написании 1188bb, размер шрифта равен 5 точкам, тип шрифта Century Schoolbook, слово Это сделать жирным. Текст абзаца "Это второй абзац, выровненный по ширине, цвет текста в шестнадцатеричном написании 1188bb, размер шрифта равен 5 точкам, тип шрифта Century Schoolbook, слово Это сделать жирным "
5. Варианты заданий на списки
Вариант
1. font-size
II. font-variant
3. text-transform
- lowercase
преобразует текст в строчные буквы
- uppercase
преобразует текст в прописные буквы
o capitalize
преобразует все начальные буквы слов в прописные
IV. text-decoration
B. underline
подчеркивание
С. line-through
зачеркивание (оно используется, к примеру, чтобы выделить
неверные или неактуальные идеи в тексте)
iv. overline
надчеркивание (добавляет линию над текстом)
e. none
удаляет любой вид линий
Е. line-height
III. pt
Единицами измерения служат точки
XV. %
Единицами измерения служат проценты
13 font-weight
Вариант
A. font-size
II. font-variant
C. text-transform
o lowercase
преобразует текст в строчные буквы
§ uppercase
преобразует текст в прописные буквы
o capitalize
преобразует все начальные буквы слов в прописные
IV. text-decoration
c. underline
подчеркивание
d. line-through
зачеркивание (оно используется, к примеру, чтобы выделить
неверные или неактуальные идеи в тексте)
vi. overline
надчеркивание (добавляет линию над текстом)
g. none
удаляет любой вид линий
Е. line-height
3. pt
Единицами измерения служат точки
4 %
Единицами измерения служат проценты
7 font-weight
Вариант
a. font-size
b. font-variant
c. text-transform
V. lowercase
преобразует текст в строчные буквы
VI. uppercase
преобразует текст в прописные буквы
vii. capitalize
преобразует все начальные буквы слов в прописные
4 text-decoration
a. underline
подчеркивание
b. line-through
зачеркивание (оно используется, к примеру, чтобы выделить
неверные или неактуальные идеи в тексте)
c. overline
надчеркивание (добавляет линию над текстом)
d. none
удаляет любой вид линий
H. line-height
b. pt
Единицами измерения служат точки
5 %
Единицами измерения служат проценты
e. font-weight
Вариант
1. font-size
2. font-variant
ii. text-transform
c lowercase
преобразует текст в строчные буквы
d. uppercase
преобразует текст в прописные буквы
e. capitalize
преобразует все начальные буквы слов в прописные
1. text-decoration
a. underline
подчеркивание
III. line-through
зачеркивание (оно используется, к примеру, чтобы выделить
неверные или неактуальные идеи в тексте)
iv. overline
надчеркивание (добавляет линию над текстом)
V. none
удаляет любой вид линий
b. line-height
5. pt
Единицами измерения служат точки
7. %
Единицами измерения служат проценты
· font-weight
Вариант
i. font-size
ii. font-variant
iii. text-transform
3. lowercase
преобразует текст в строчные буквы
4. uppercase
преобразует текст в прописные буквы
5. capitalize
преобразует все начальные буквы слов в прописные
o text-decoration
IV. underline
подчеркивание
V. line-through
зачеркивание (оно используется, к примеру, чтобы выделить
неверные или неактуальные идеи в тексте)
VI. overline
надчеркивание (добавляет линию над текстом)
vii. none
удаляет любой вид линий
c. line-height
b. pt
Единицами измерения служат точки
d. %
Единицами измерения служат проценты
§ font-weight
Вариант
d. font-size
e. font-variant
f. text-transform
VI. lowercase
преобразует текст в строчные буквы
VII. uppercase
преобразует текст в прописные буквы
viii. capitalize
преобразует все начальные буквы слов в прописные
B. text-decoration
d. underline
подчеркивание
· line-through
зачеркивание (оно используется, к примеру, чтобы выделить
неверные или неактуальные идеи в тексте)
i. overline
надчеркивание (добавляет линию над текстом)
e. none
удаляет любой вид линий
J. line-height
c. pt
Единицами измерения служат точки
i. %
Единицами измерения служат проценты
f. font-weight
Вариант
B. font-size
III. font-variant
C. text-transform
o lowercase
преобразует текст в строчные буквы
§ uppercase
преобразует текст в прописные буквы
· capitalize
преобразует все начальные буквы слов в прописные
V. text-decoration
С. underline
подчеркивание
D. line-through
зачеркивание (оно используется, к примеру, чтобы выделить
неверные или неактуальные идеи в тексте)
VI. overline
надчеркивание (добавляет линию над текстом)
g. none
удаляет любой вид линий
F. line-height
4. pt
Единицами измерения служат точки
5. %
Единицами измерения служат проценты
ix. font-weight
Вариант
e. font-size
g. font-variant
h. text-transform
VIII. lowercase
преобразует текст в строчные буквы
IX. uppercase
преобразует текст в прописные буквы
x. capitalize
преобразует все начальные буквы слов в прописные
11. text-decoration
f. underline
подчеркивание
g. line-through
зачеркивание (оно используется, к примеру, чтобы выделить
неверные или неактуальные идеи в тексте)
i. overline
надчеркивание (добавляет линию над текстом)
· none
удаляет любой вид линий
L. line-height
2. pt
Единицами измерения служат точки
9. %
Единицами измерения служат проценты
e. font-weight
Вариант
h. font-size
i. font-variant
j. text-transform
3. lowercase
преобразует текст в строчные буквы
4. uppercase
преобразует текст в прописные буквы
5. capitalize
преобразует все начальные буквы слов в прописные
k. text-decoration
a. underline
подчеркивание
b. line-through
зачеркивание (оно используется, к примеру, чтобы выделить
неверные или неактуальные идеи в тексте)
iii. overline
надчеркивание (добавляет линию над текстом)
d. none
удаляет любой вид линий
· line-height
II. pt
Единицами измерения служат точки
VI. %
Единицами измерения служат проценты
l. font-weight
Вариант
· font-size
· font-variant
· text-transform
I. lowercase
преобразует текст в строчные буквы
II. uppercase
преобразует текст в прописные буквы
iii. capitalize
преобразует все начальные буквы слов в прописные
m. text-decoration
5. underline
подчеркивание
6. line-through
зачеркивание (оно используется, к примеру, чтобы выделить
неверные или неактуальные идеи в тексте)
A. overline
надчеркивание (добавляет линию над текстом)
8. none
удаляет любой вид линий
· line-height
b. pt
Единицами измерения служат точки
e. %
Единицами измерения служат проценты
i. font-weight
Вариант
· font-size
ii. font-variant
· text-transform
A. lowercase
преобразует текст в строчные буквы
D. uppercase
преобразует текст в прописные буквы
E. capitalize
преобразует все начальные буквы слов в прописные
o text-decoration
2. underline
подчеркивание
iii. line-through
зачеркивание (оно используется, к примеру, чтобы выделить
неверные или неактуальные идеи в тексте)
4. overline
надчеркивание (добавляет линию над текстом)
5. none
удаляет любой вид линий
· line-height
II. pt
Единицами измерения служат точки
V. %
Единицами измерения служат проценты
· font-weight
Вариант
I. font-size
II. font-variant
III. text-transform
b. lowercase
преобразует текст в строчные буквы
c. uppercase
преобразует текст в прописные буквы
iv. capitalize
преобразует все начальные буквы слов в прописные
IV. text-decoration
1. underline
подчеркивание
B. line-through
зачеркивание (оно используется, к примеру, чтобы выделить
неверные или неактуальные идеи в тексте)
3. overline
надчеркивание (добавляет линию над текстом)
4. none
удаляет любой вид линий
VIII. line-height
§ pt
Единицами измерения служат точки
· %
Единицами измерения служат проценты
IX. font-weight
6. Варианты заданий на таблицы
Во всех таблицах сделать: ширину 20%, высоту 200, совпадение границ, значение border равное 1. Задание выполнить с использованием двух файлов html и css.
| 1 Вариант 1,4,10-цвет фона синий, цвет шрифта белый 3,5,9-цвет фона желтый, цвет шрифта красный 2,6,8-цвет фона голубой, цвет шрифта зеленый 7-цвет фона красный, размер шрифта 20 точек | 2 вариант 1,3,9-цвет фона черный, цвет шрифта белый 2,5,7-цвет фона коричневый, цвет шрифта желтый 4,6,10-цвет фона красный, цвет шрифта зеленый 8-цвет фона синий, размер шрифта 20 точек | ||||||||||||||||||||||||||||
| 3 вариант 1,6,7-цвет фона синий, цвет шрифта желтый 2,5,9-цвет фона малиновый, цвет шрифта зеленый 3,4,8-цвет фона серый, цвет шрифта голубой 10-цвет фона желтый, размер шрифта 14 точек | 4 вариант 2,3,8-цвет фона синий, цвет шрифта белый 1,5,7-цвет фона зеленый, цвет шрифта красный 4,6,10-цвет фона желтый, цвет шрифта малиновый 9-цвет фона голубой, размер шрифта 14 точек | ||||||||||||||||||||||||||||
| 5 вариант 1,2,7-цвет фона красный, цвет шрифта желтый 3,4,8-цвет фона черный, цвет шрифта белый 5,6,9-цвет фона голубой, цвет шрифта зеленый 10-цвет фона зеленый, размер шрифта 14 точек | 6 вариант 2,6,9-цвет фона желтый, цвет шрифта коричневый 1,4,7-цвет фона зеленый, цвет шрифта голубой 5,8,10-цвет фона синий, цвет шрифта белый 3-цвет фона малиновый, размер шрифта 14 точек | ||||||||||||||||||||||||||||
| 7 вариант 4,5,9-цвет фона малиновый, цвет шрифта синий 1,3,7-цвет фона желтый, цвет шрифта красный 6,8,10-цвет фона синий, цвет шрифта голубой 2-цвет фона серый, размер шрифта 14 точек | 8 вариант 1,6,8-цвет фона желтый, цвет шрифта синий 2,4,9-цвет фона синий, цвет шрифта белый 3,5,10-цвет фона серый, цвет шрифта малиновый 7-цвет фона зеленый, размер шрифта 14 точек | ||||||||||||||||||||||||||||
| 9 вариант 2,5,7-цвет фона синий, цвет шрифта белый 3,4,9-цвет фона голубой, цвет шрифта зеленый 6,8,10-цвет фона желтый, цвет шрифта коричневый 1-цвет фона красный, размер шрифта 14 точек | 10 вариант 4,6,10-цвет фона красный, цвет шрифта белый 1,3,8-цвет фона зеленый, цвет шрифта желтый 2,5,9-цвет фона голубой, цвет шрифта синий 7-цвет фона синий, размер шрифта 14 точек |
| 11 вариант 1,4,5-цвет фона зеленый, цвет шрифта красный 2,5,6-цвет фона черный, цвет шрифта малиновый 3,7,10-цвет фона синий, цвет шрифта белый 8-цвет фона голубой, размер шрифта 14 точек | 12 вариант 3,4,10-цвет фона синий, цвет шрифта красный 1,2,7-цвет фона зеленый, цвет шрифта голубой 5,8,9-цвет фона розовый, цвет шрифта коричневый 6-цвет фона малиновый, размер шрифта 14 точек |
Список литературы
1 Кастро Э. HTML и CSS для создания Web-страниц. Издательство: «Издательская группа АСТ», 2006, – 144 c.
2 Клонингер К. Свежие стили Web-дизайна: как сделать из вашего сайта «конфетку»: «Издательство ДМК Пресс», 2009. – 250 с.(1)
3 Комолова Н., Яковлева Е. "HTML. Самоучитель "2-е издание. Издательство: Питер, 2011 г.
4 Рева О. Н. "Использование HTML, JavaScript и CSS. Руководство Web-дизайнера " Издательство: Эксмо, 2008 г.
5 Тихонов А.И. Динамический HTML. – М.: ЗАО «Издательство БИНОМ», 2001. – 496 с.
6 Роберт Агулар "HTML и CSS. Основа любого сайта " Издательство: Эксмо, 2010 г.
7 Чак Муссиано и Билл Кеннеди "HTML и XHTML. Подробное руководство" 6-е издание. Издательство: Символ-Плюс, 2008 г.
8 Эрик А. Мейер "CSS. Каскадные таблицы стилей. Подробное руководство " 3-е издание. Издательство: Символ-Плюс, 2008 г.
Содержание
Введение. 3
Часть 1. Основы создания HTML и CSS документов. 4
1. Структура HTML документа. 4
2. Создание HTML-документа. 5
3. Просмотр документа в окне браузера. 6
4. Разметка текста с помощью HTML. 7
4.1. Абзац. 7
4.2. Атрибуты тегов. 7
4.3. Заголовки. 9
4.4. Списки. 9
4.4.1 Неупорядоченный список. 9
4.4.2 Упорядоченный список. 10
4.4.3 Многоуровневый список. 11
4.4.4 Список определений. 12
4.5. Теги strong и b. 12
4.6. Теги em и i 13
4.7. Теги br и hr. 13
4.8. Тег mark. 13
4.9. Ссылки. 14
4.9.1 Абсолютные адреса. 14
4.9.2 Относительные адреса. 14
4.9.3 Ссылка с якорем.. 15
4.9.4 Всплывающая подсказка. 15
4.10. Вставка изображения. 16
4.10.1 Размеры изображения. 16
4.10.2 Альтернативный текст. 16
4.10.3 Изображение-ссылка. 17
4.11. Таблицы.. 17
4.11.1 Выравнивание содержимого ячеек. 21
4.11.2 Объединение ячеек в таблице. 22
4.11.3 Заголовок таблицы.. 27
4.11.4 Расстояние между ячейками. 28
5. CSS. 29
5.1. Селекторы.. 33
5.2. Краткий перечень CSS-команд. 44
Часть 2. Задания на лабораторные работы.. 49
1. Форматирование текста. 49
2. Списки. 54
3. Таблицы.. 64
4. Варианты заданий на форматирование текста. 70
5. Варианты заданий на списки. 76
6. Варианты заданий на таблицы.. 88
Список литературы.. 92
УЧЕБНОЕ ИЗДАНИЕ