- •Пояснительная записка
- •Введение html редакторы
- •Что такое html?
- •Кто создал html?
- •При помощи чего создаются html-страницы?
- •Визуальные редакторы или wysiwyg (What You See Is What You Get — Что видишь, то и получаешь)
- •Текстовые html-редакторы
- •Урок 1. Как устроен сайт. Делаем первую страницу.
- •Урок 2. Оформляем html-страницу и форматируем текст.
- •Шаг 1. Меняем фон html-страницы и цвет текста
- •Шаг 2. Форматируем текст
- •Урок 3. Располагаем элементы на странице.
- •Урок 4. Соединяем html-страницы между собой.
- •Урок 5. Структура html документа
- •Заголовок документа - тег head и его элементы
- •Тело документа - тег body
- •Урок 6. Форматирование текста
- •Теги разделения на абзацы и переноса строки
- •Теги, выделяющие текст курсивом
- •Теги, выделяющие текст полужирным шрифтом
- •Теги, выделяющие текст подчеркиванием
- •Теги, выводящие текст моноширинным шрифтом
- •Теги, выводящие текст в верхнем и нижнем индексах
- •Тег font и его параметры
- •Совместное использование тегов
- •Урок 7. Форматирование текста (продолжение).
- •Теги, делающие текст заголовками
- •Теги разделения на абзацы и переноса строки
- •Теги, выделяющие текст курсивом
- •Теги, выделяющие текст полужирным шрифтом
- •Теги, выделяющие текст подчеркиванием
- •Теги, выводящие текст моноширинным шрифтом
- •Теги, выводящие текст в верхнем и нижнем индексах
- •Тег font и его параметры
- •Совместное использование тегов
- •Урок 8. Специальные символы.
- •Урок 9. Ссылки в html.
- •Ссылка - тег a
- •Урок 10. Создание списков.
- •Нумерованные списки
- •Маркированные списки
- •Списки определений
- •Вложенные списки
- •Списки списков
- •Урок 11. Работа с изображениями.
- •Размеры изображений
- •Отделение изображения от текста
- •Альтернативный текст
- •Изображение в качестве ссылки
- •Урок 12. Работа с таблицами - тег table.
- •Создаем таблицу
- •Оформляем строки (tr) и ячейки (td)
- •Атрибуты таблиц
- •Атрибуты ячеек
- •Урок 13. Работа с таблицами сложной структуры.
- •Тег colspan - объединение столбцов
- •Вложенные таблицы
- •Специальные символы
- •Домашнее задание №1.
- •Домашнее задание №2.
- •Домашнее задание №3.
- •Домашнее задание №4.
- •Домашнее задание №5.
- •Домашнее задание №6.
- •Домашнее задание №7.
- •Домашнее задание №8.
- •Домашнее задание №9.
- •Домашнее задание №10.
- •Домашнее задание №11.
- •Домашнее задание №12.
- •Домашнее задание №13.
- •Домашнее задание №14.
- •Домашнее задание №15.
- •Домашнее задание №16.
- •Домашнее задание №17.
- •Домашнее задание №18.
- •Домашнее задание №19.
- •Домашнее задание №20.
- •Домашнее задание №21.
Домашнее задание №5.
Сделайте так, чтобы фон страницы был черного цвета, а текст — белого.
Создайте заголовок статьи и двух ее разделов. Укажите для них шрифт Verdana и пусть второй подзаголовок располагается по центру страницы.
Напишите под первым и вторым заголовком по параграфу, а под третьим — цитату, состоящую из двух параграфов.
Выделите в первом параграфе две цитаты и пусть одна будет написана жирным шрифтом, а вторая — курсивом.
Сделайте в самом последнем параграфе пять обрывов строки и пусть текст в нем располагается по центру страницы.
Домашнее задание №6.
Создайте заголовок статьи и два подзаголовка. Пусть заголовок статьи располагается по центру.
В начале каждого подзаголовка поставьте знак параграфа и выделите этот знак красным цветом.
Создайте под каждым заголовком по одному параграфу.
Напишите в первом параграфе слова: Яблоко, Груша, Слива и Когерентность. Зачеркните лишнее слово и расставьте в них ударения.
Во втором параграфе напишите четыре слова и поставьте между ними стрелки, указывающие вправо.
Напишите в третьем параграфе формулу неопределенного интеграла — ∫ ƒ(t)dt и через тире напишите «Это неопределенный интеграл». Пусть у формулы будет шрифт 120%.
Домашнее задание №7.
Создайте заголовки статьи, раздела и подраздела. Расположите их все по центру.
Установите на всей странице шрифт Arial, а для заголовков — Courier.
Пусть размер шрифта на всей странице будет 85% от размера в браузере по умолчанию. А у заголовков 145%, 125% и 110% соответственно, от размера шрифта на странице.
Напишите под первым заголовком параграф, под вторым — длинную цитату, под третьим — стихотворение. И пусть стихотворение располагается по центру страницы.
Выделите жирным шрифтом три слова в цитате.
Под заголовком статьи во всю ширину страницы нарисуйте горизонтальную линию красного цвета толщиной три пикселя.
Сверху и снизу стихотворения нарисуйте линии толщиной в один пиксель черного цвета. Пусть ширина верхней линии будет примерно равна ширине стиха, а нижней — в два раза меньше.
Уберите у линий ненужные рамки.
Домашнее задание №8.
Немного усложним. Для выполнения задания вы можете использовать любые теги, но только три <DIV> и два <SPAN>. Атрибуты вы должны указывать тоже только внутри этих тегов, за исключением «шапки» документа — там все, как обычно.
Создайте заголовок статьи и двух ее разделов.
В каждом разделе напишите по два параграфа, а под заголовком статьи не надо.
Пусть заголовки разделов будут написаны шрифтом Tahoma синего цвета.
Пусть шрифт первых двух параграфов будет с размером 90%, а вторых двух — 80% и располагается по центру.
В последнем параграфе выделите три фразы — две красным цветом, а одну подчеркнутым шрифтом.
Хотя я и говорил, что запоминать наизусть все уроки не нужно, но что-то же должно было уже отложиться в ваших головках. Давайте-ка проверим.
Что такое блочные и встроенные типы элементов и что значит «один тег содержит другой»?
К какому типу относятся данные теги, и какие типы они могут содержать: <P>, <DIV>, <STRONG>, <BLOCKQUOTE>, <BODY>, <BR>?
Что значит выравнивание содержимого HTML-элементов и к каким типам тегов его можно применять?
Что такое атрибут style, почему мы часто используем именно его вместо других атрибутов и сколько раз его можно указывать в одном теге?