Лабораторна робота
Хід роботи:
- При виконанні лабораторної роботи, для пошуку необхідних тегів та параметрів рекомендовано користуватись сайтом.
- Створіть html-документ prizvyshe_css.html з довільним текстом, що містить два окремих заголовки першого рівня (використовуйте контейнер <H1>), заголовок другого рівня (використовуйте контейнер <H2>) та абзац (використовуйте контейнер <P>).
Перегляньте результат у браузері.
- В папці з Вашим документом створіть файл style.css наступного змісту:
<![CDATA[
body {
font-family: Arial, Verdana, sans-serif;
font-size: 11pt;
background-color: #f0f0f0;
color: #333;
}
h1 {
color: #a52a2a;
font-size: 24pt;
font-family: Georgia, Times, serif;
font-weight: normal;
}
h2 {
color: #a55f55;
font-size: 18pt;
font-family: Georgia, Times, serif;
font-weight: normal;
}
p {
text-align: justify;
margin-left: 60px;
margin-right: 10px;
border-left: 1px solid #999;
border-bottom: 1px solid #999;
padding-left: 10px;
padding-bottom: 10px;
}
]]>
- Відкрийте файл prizvyshe_css.html та добавте в контейнер <head> рядок: <link rel="stylesheet" href="style.css">. Збережіть файл. Перегляньте результат в браузері.
- Відредагуйте файл style.css наступним чином:
- Для тексту абзацу задайте шрифт Times New Roman;
- Колір фону зелений;
- Колір основного тексту синій;
- Розмір основного шрифту 14pt;
- Колір заголовку жовтий;
- Колір заголовку другого рівня оливковий;
- Розмір шрифту заголовку 30pt;
- Шрифт заголовку Verdana;
- Вирівнювання тексту в абзаці по центру;
- Задайте товщину всієї лінії 3px;
- Колір лінії білий.
Та збережіть його під назвою style_1.css. В документі prizvyshe_css.html підключіть новий файл стилів. Перевірте зміни в браузері.
- В документі prizvyshe_css.html оберіть файл стилів style.css. В контейнер <HEAD> добавте наступний контейнер:
<![CDATA[
<style>
H1 {
font-size: 30pt;
font-family: Helvetica, Arial, sans-serif;
color: red;
}
</style>
]]>
Перевірте зміни в браузері. Поясніть чому відбулися зміни.
- В документі prizvyshe_css.html в контейнері <BODY> тег першого заголовку першого рівня <H1> замініть на тег <H1 style="font-size: 27pt; font-family: monospace; color: #cd66cc">. Перевірте зміни в браузері. Поясніть чому вони відбулися.
Контрольні запитання:
- Як в текстовий документ можна вставити малюнок?
- Як може розміщуватися малюнок в текстовому документі?
- Як можна змінити розміри та положення малюнка.
- Як оформити текст у вигляді колонок?
- Чи можна задати згенерованому змісту фоновий колір?