- •Практические работы по html и css
- •1. Html–документ. Абзацы, разрывы строк, выравнивание
- •1 Структура html-документа
- •2 Выравнивание абзацев. Старый стиль
- •3 Использование языка css
- •Результат практической работы
- •2. Заголовки. Теги strong, em, span
- •Результат практической работы
- •3. Подключение внешней таблицы стилей. Отступы и обтекание
- •4. Тег Div. Вставка в html-документ изображений, их свойства и оформление
- •5. Создание и оформление гипертекстовых ссылок
- •Примерный результат практической работы
- •6. Создание шаблона сайта
- •7. Оформление таблиц с помощью css
- •Ответ к заданиям Задание 1.
- •Задание 2.
- •8. Упражнение на использование верхнего и нижнего регистров
- •9. Списки
- •Пример результата практической работы
3 Использование языка css
Абзацы правильнее выравнивать с помощью CSS (языка описания внешнего вида HTML-документа). Для этого в отдельном файле или контейнере headопределяют стили оформления для различных элементов. Например, разделheadможет содержать такой контейнерstyle:
<styletype="text/css">
.rt {text-align:right;}
.jtf {text-align:justify;}
</style>
Далее следует указать желаемые стили для абзацев. Точка говорит о том, что мы имеем дело с классом. Следовательно, в теге p должно быть записано, например, так: <p class="rt">…
Задание 5. Удалите ранее добавленный атрибут align у абзацев. Выровняйте абзацы, используя язык CSS.
Результат практической работы
<html>
<head>
<title>ЭВМ – электронно-вычислительная машина</title>
<style type="text/css">
.rt {text-align:right;}
.jtf {text-align:justify;}
</style>
</head>
<body>
<pclass="jtf">Появление персональных компьютеров в начале семидесятых годов(параллельно с постепенной эволюцией крупных ЭВМ)сейчас расценивают как революционный переворот. Масштабы его влияния на человеческое общество сравнивают с последствиями от изобретения книгопечатания.</p>
<pclass="rt">В мире уже сейчас имеются миллионы и миллиарды ЭВМ.<br/>Их число продолжает неуклонно расти!</p>
</body>
<html>
2. Заголовки. Теги strong, em, span
Задание 1.
Создайте html-страницу с текстом представленным ниже. При этом для создания структуры документа используйте следующие теги разметки: p– абзац;h1– заголовок 1-го уровня;h2– заголовок 2-го уровня.
Системы счисления Системы счисления — это способ записи чисел. Обычно, числа записываются с помощью специальных знаков (цифр), но бывают исключения. Например, в арабской системе счисления используются цифры (0, 1, 2, 3, 4, 5, 6, 7, 8, 9), а в римской — некоторые латинские прописные буквы (I, V, X, L, C, D, M). Арабская и римская системы счисления имеют еще одно существенное отличие. Арабская система счисления является позиционной, а римская — непозиционной. Сравнение позиционной и непозиционной систем счисления В позиционных системах счисления количество, обозначаемое цифрой в числе, зависит от ее позиции, а в непозиционных системах счисления "вес" цифры не зависит от ее позиции. Например: 11 – здесь первая единица обозначает десять, а вторая – 1. II – здесь обе единицы обозначают единицу. 345, 259, 521 – здесь цифра 5 в первом случае обозначает 5, во втором – 50, а в третьем – 500. XXV, XVI, VII – здесь, где бы ни стояла цифра V, она везде обозначает пять единиц. Другими словами, величина, обозначаемая знаком V, не зависит от его позиции. |
Задание 2.
Обрамите текст, выделенный жирным шрифтом на образце выше, контейнером strong, а выделенный курсивом —em. Посмотрите результат в браузере.
Задание 3.
Создайте в контейнере headследующую таблицу стилей:
<style type="text/css">
span {font-family: Arial;}
span.blue {color: #00008b;}
span.red {color: #b22222;}
</style>
Заключите в соответствующие контейнеры spanтекст, выделенный красным и синим цветом на образце (при этом не забудьте указывать классы — см. предыдущее занятие). Посмотрите результат в браузере.
Задание 4.
Добавьте в код стиль для заголовков:
h1, h2 {
background-color: #003399;
color: white;
}
Посмотрите результат.