Практичне завдання № 3
Тема: Створення резюме засобами HTML та СSS
Мета: придбання практичних умінь та навичок розробити резюме засобами
HTML та СSS
Завдання до виконання роботи
Результатом виконання нижче приведеного завдання Вашого варіанту повинно бути створене резюме на мові HTML.
1. Розробите власне професійне резюме (назване також curriculum vitae) у
вигляді HTML-документа відповідно до шаблону вашого варіанту: варіант 1,
варіант 2, варіант 3, варіант 4 (таблиця розподілу варіантів). Для редагування
HTML-коду використовуйте Sublime Text, Microsoft Expression Web або простий текстовий редактор. Постарайтеся, щоб HTML-документ, що розробляється, виглядав у web-браузері максимально аналогічно шаблону (досить перевіряти тільки в браузері MS Internet Explorer).
Основні пункти, які мають бути присутніми в даному документі:
Особиста інформація
o прізвище, ім'я, по батькові
o вік
o стать
o фото
o сімейний стан
Контактна інформація
o Адреса
o телефон домашній
o телефон мобільний
o e-mail
o web-сторінка
Цілі
o цілі/посади, мінімальний розмір заробітної плати, на які претендує подавець резюме
Освіта
o список, упорядкований у зворотній хронологічній послідовності (включає рік початку та закінчення навчання, навчальний
заклад, кваліфікацію за дипломом)
Професійні навички
o список навичок (наприклад, операційні системи, середовища
програмування, мови програмування, апаратні платформи)
Досвід роботи
o список, упорядкований у зворотній хронологічній послідовності (включає роки роботи, установу, посаду)
Нагороди
o відомості про нагороди (гранти, перемога в конкурсах, олімпіадах та ін.)
Мови
o знання мов (навички читання, письма, розмови)
Інтереси
o хобі
2. Перевірте ваш HTML-документ на відповідність специфікації вибраної версії HTML за допомогою The W3C Markup Validation Service .
3. Розробіть таблицю стилів для HTML-документа. Таблиця стилів повинна бути розміщена в окремому файлі.
4. Перевірте ваш CSS-документ на відповідність специфікації вибраної
версії CSS за допомогою The W3C CSS Validation Service.
2
Варіанти завдань
№
з/п
1,
5,
9,
13,
17,
21,
25
Резюме
3
2,
6,
10,
14,
18,
22,
26
4
3,
7,
11,
15,
19,
23,
27
5
4,
8,
12,
16,
20,
24,
28
6
Приклад виконання завдання
У прикладі наведено код створення власного резюме, використовуючи
чистий HTML і CSS, оскільки дизайн відмінно виглядає на всіх екранах з різною роздільною здатністю.
По суті, такий стиль резюме - це документ, який використовується і
створюється людиною для представлення свого досвіду, а також навичок та
досягнень. В основному люди створюють своє резюме за допомогою графічного програмного забезпечення, як ілюстратор, фотошоп. Тепер з'явилася можливість створити онлайн-резюме, використовуючи такі коди як HTML, CSS, і це
буде ідеальний формат для онлайн-презентації.
Наприклад, ви працюєте фрілансером, де безумовно йде конкуренція чи
суперництво за нові проекти. Тут виникає питання про те, як можна найкращим способом, а головне коротко і швидко надати всі основні відомості та навички по роботі, включаючи досвід потенційного роботодавця. І найкращим
форматом виступає на онлайн резюме. У наведеному нижче прикладі показано
як побудувати адаптивне односторінкове резюме.
HTML Код:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Responsive Resume Template</title>
<meta name="viewport" content="width=device-width, initialscale=1, maximum-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/aj
ax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="style.css">
7
</head>
<body>
<div class="resume-wrapper">
<section class="profile section-padding">
<div class="container">
<div class="picture-resume-wrapper">
<div class="picture-resume">
<span><img src="https://secure.gravatar.com/avatar/24a495e3a
7316e619af62445f1a86886?s=96&d=mm&r=g" alt="" /></span>
<svg version="1.1" viewBox="0 0 350 350">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="
blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1
0 0 0 0 0 1 0 0 0 0 0 21 -9" result="cm" />
</filter>
</defs>
<g filter="url(#goo)" >
<circle id="main_circle" class="st0" cx="171.5" cy="175.6" r
="130"/>
<circle id="circle" class="bubble0
st1" cx="171.5" cy="175.6" r="122.7"/>
<circle id="circle" class="bubble1
st1" cx="171.5" cy="175.6" r="122.7"/>
<circle id="circle" class="bubble2
st1" cx="171.5" cy="175.6" r="122.7"/>
<circle id="circle" class="bubble3
st1" cx="171.5" cy="175.6" r="122.7"/>
<circle id="circle" class="bubble4
st1" cx="171.5" cy="175.6" r="122.7"/>
<circle id="circle" class="bubble5
st1" cx="171.5" cy="175.6" r="122.7"/>
<circle id="circle" class="bubble6
st1" cx="171.5" cy="175.6" r="122.7"/>
<circle id="circle" class="bubble7
st1" cx="171.5" cy="175.6" r="122.7"/>
<circle id="circle" class="bubble8
st1" cx="171.5" cy="175.6" r="122.7"/>
<circle id="circle" class="bubble9
st1" cx="171.5" cy="175.6" r="122.7"/>
<circle id="circle" class="bubble10
8
st1" cx="171.5" cy="175.6" r="122.7"/>
</g>
</svg>
</div>
<div class="clearfix"></div>
</div>
<div class="name-wrapper">
<h1>Название</h1>
</div>
<div class="clearfix"></div>
<div class="contact-info clearfix">
<ul class="list-titles">
<li>Call</li>
<li>Mail</li>
<li>Web</li>
<li>Home</li>
</ul>
<ul class="list-content ">
<li>+91 123 456 7890</li>
<li>contact@zornet.ru</li>
<li><a href="#">http://zornet.ru/</a></li>
<li>Дели, Индия</li>
</ul>
</div>
<div class="contact-presentation">
<p><span class="bold">Lorem</span> Теперь вам нужно оптимизировать свое присутствие в Интернете, чтобы люди могли легко
найти вас в поисковых системах. Что еще более важно, люди,
живущие в вашем бизнесе. </p>
</div>
<div class="contact-social clearfix">
<ul class="list-titles">
<li>Twitter</li>
<li>Dribbble</li>
<li>Codepen</li>
</ul>
<ul class="list-content">
<li><a href="">@zornet.ru</a></li>
<li><a href="">@zornet.ru</a></li>
<li><a href="">@zornet.ru</a></li>
</ul>
</div>
</div>
</section>
<section class="experience section-padding">
<div class="container">
<h3 class="experience-title">Сайт zornet.ru</h3>
9
<div class="experience-wrapper">
<div class="company-wrapper clearfix">
<div class="experience-title">Сайт zornet.ru</div>
<div class="time">Сайт zornet.ru</div>
</div>
<div class="job-wrapper clearfix">
<div class="experience-title">Как оптимизировать контент для
голосового поиска </div>
<div class="company-description">
<p>Согласно исследованию Statista, в 2020 году на устройствах по всему миру будет использоваться 4,2 миллиарда голосовых
помощников. 4,2 миллиарда. Это более половины населения мира.</p>
</div>
</div>
<div class="company-wrapper clearfix">
<div class="experience-title">Сайт zornet.ru</div>
<div class="time">Nov 2020 - Название</div>
</div>
<div class="job-wrapper clearfix">
<div class="experience-title">Как структурировать</div>
<div class="company-description">
<p>Как структурировать сообщения в блогах, которые понравятся поисковым системам и читателям</p>
</div>
</div>
<div class="company-wrapper clearfix">
<div class="experience-title">Сайт zornet.ru</div>
<div class="time">Nov 2009 - Nov 2010</div>
</div>
<div class="job-wrapper clearfix">
<div class="experience-title">Сайт zornet.ru </div>
<div class="company-description">
<p>С момента его создания в 2001 году мы использовали его
для бесконечного количества целей.</p>
</div>
</div>
</div>
<div class="section-wrapper clearfix">
<h3 class="section-title">Название</h3>
<ul>
10
<li
<li
<li
<li
<li
<li
class="skill-percentage">HTML / HTML5</li>
class="skill-percentage">CSS / CSS3 / SASS / LESS</li>
class="skill-percentage">Javascript</li>
class="skill-percentage">Jquery</li>
class="skill-percentage">Wordpress</li>
class="skill-percentage">PHP</li>
</ul>
</div>
<div class="section-wrapper clearfix">
<h3 class="section-title">Название</h3>
<p>Не требуется глобальная пандемия, чтобы осознать важность
присутствия в Интернете для любого типа бизнеса, большого или
малого. </p>
<p>Не требуется глобальная пандемия, чтобы осознать важность
присутствия в Интернете для любого типа бизнеса, большого или
малого. </p>
</div>
</div>
</section>
<div class="clearfix"></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.
0/TweenMax.min.js'></script>
<script src="function.js"></script>
</body>
</html>
CSS Код:
@import url(https://fonts.googleapis.com/css?family=Varela+Rou
nd);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:
400,300,600,700);
*, *::after, *::before {
box-sizing: border-box;
}
html, body {
height: 100%;
}
11
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.5em;
}
a {
color: #66cc99;
text-decoration: none;
}
.clearfix::after, .clearfix::before {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
.bold {
color: #4a4e51;
font-weight: 400;
}
.resume-wrapper {
position: relative;
text-align: center;
height: 100%;
}
.container {
min-height: 600px;
}
.profile {
background: #fff;
width: 40%;
float: left;
color: #9099a0;
}
@media (max-width: 850px) {
.profile {
width: 100%;
}
}
.profile .name-wrapper {
float: left;
width: 60%;
12
}
.profile h1 {
font-size: 2.5em;
text-align: left;
font-family: 'Varela Round', sans-serif;
color: #4a4e51;
text-transform: uppercase;
line-height: 1em;
padding-top: 40px;
}
@media (max-width: 1200px) {
.profile h1 {
padding-top: 20px;
}
}
@media (max-width: 450px) {
.profile h1 {
font-size: 1.8em;
padding-top: 20px;
}
}
.profile li {
margin-bottom: 10px;
}
.profile .picture-resume-wrapper {
width: 40%;
display: block;
float: left;
}
@media (max-width: 1200px) {
.profile .picture-resume-wrapper {
width: 100%;
}
}
.profile .picture-resume {
width: 220px;
height: 220px;
background-size: cover;
border-radius: 50%;
margin-right: 0px;
display: table;
position: relative;
vertical-align: middle;
}
.profile .picture-resume span {
display: table-cell;
vertical-align: middle;
position: relative;
margin: 0 auto;
13
z-index: 10;
text-align: center;
}
.profile .picture-resume img {
border-radius: 50%;
width: 130px;
}
@media (max-width: 1500px) {
.profile .picture-resume img {
width: 80px;
}
}
@media (max-width: 1200px) {
.profile .picture-resume img {
width: 120px;
height: 120px;
}
}
@media (max-width: 1500px) {
.profile .picture-resume {
width: 150px;
height: 150px;
}
}
@media (max-width: 1200px) {
.profile .picture-resume {
width: 200px;
height: 200px;
}
}
@media (max-width: 450px) {
.profile .picture-resume {
width: 180px;
height: 180px;
}
}
.profile .contact-info {
margin-top: 100px;
font-weight: 300;
}
@media (max-width: 1200px) {
.profile .contact-info {
margin-top: 70px;
}
}
@media (max-width: 450px) {
.profile .contact-info {
margin-top: 50px;
}
14
}
.profile .list-titles {
float: left;
text-align: left;
font-weight: 600;
width: 40%;
color: #4a4e51;
}
.profile .list-content {
float: left;
width: 60%;
text-align: left;
font-weight: 300;
}
.profile .contact-presentation {
text-align: left;
font-weight: 300;
margin-top: 100px;
margin-bottom: 100px;
}
@media (max-width: 1200px) {
.profile .contact-presentation {
margin-top: 70px;
margin-bottom: 70px;
}
}
@media (max-width: 850px) {
.profile .contact-presentation {
margin-top: 50px;
margin-bottom: 50px;
}
}
.profile svg {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.profile .st0, .profile .st1 {
fill: #66cc99;
}
.experience {
background: #3d3e42;
width: 60%;
float: left;
position: relative;
color: #9099a0;
font-weight: 300;
15
min-height: 100%;
min-height: 100vh;
}
@media (max-width: 850px) {
.experience {
width: 100%;
}
}
.experience h3.experience-title {
color: #66cc99;
text-align: left;
text-transform: uppercase;
font-size: 1.2em;
margin-bottom: 20px;
font-weight: 400;
}
.experience .company-wrapper {
width: 30%;
float: left;
text-align: left;
padding-right: 5%;
margin-bottom: 60px;
}
@media (max-width: 450px) {
.experience .company-wrapper {
width: 100%;
margin-bottom: 20px;
}
}
.experience .job-wrapper {
width: 70%;
float: left;
text-align: left;
padding-right: 5%;
margin-bottom: 60px;
}
@media (max-width: 450px) {
.experience .job-wrapper {
width: 100%;
margin-bottom: 40px;
}
}
.experience .experience-title {
color: white;
margin-bottom: 15px;
}
.section-padding {
padding: 60px 60px 40px 40px;
16
}
@media (max-width: 850px) {
.section-padding {
padding: 80px 15% 40px 10%;
}
}
@media (max-width: 450px) {
.section-padding {
padding: 40px 10% 20px 5%;
}
}
.section-wrapper {
width: 50%;
float: left;
text-align: left;
color: #9099a0;
font-weight: 300;
margin-bottom: 20px;
}
@media (max-width: 450px) {
.section-wrapper {
width: 100%;
}
}
.section-wrapper:nth-child(3) {
padding-right: 8%;
}
.section-wrapper h3.section-title {
color: #66cc99;
text-align: left;
text-transform: uppercase;
font-size: 1.2em;
margin-bottom: 20px;
font-weight: 400;
}
.section-wrapper .skill-percentage {
margin-bottom: 10px;
position: relative;
}
.section-wrapper .skill-percentage::after {
content: "";
width: 100%;
height: 6px;
background: #4a4e51;
display: block;
margin-top: 3px;
}
.section-wrapper .skill-percentage::before {
17
content: "";
height: 6px;
background: #66cc99;
position: absolute;
margin-top: 3px;
bottom: 0;
}
.section-wrapper .skill-percentage:nth-child(1)::before
width: 80%;
-webkit-animation: skill_1 0.6s ease;
animation: skill_1 0.6s ease;
}
.section-wrapper .skill-percentage:nth-child(2)::before
width: 90%;
-webkit-animation: skill_2 0.6s ease;
animation: skill_2 0.6s ease;
}
.section-wrapper .skill-percentage:nth-child(3)::before
width: 50%;
-webkit-animation: skill_3 0.6s ease;
animation: skill_3 0.6s ease;
}
.section-wrapper .skill-percentage:nth-child(4)::before
width: 60%;
-webkit-animation: skill_4 0.6s ease;
animation: skill_4 0.6s ease;
}
.section-wrapper .skill-percentage:nth-child(5)::before
width: 70%;
-webkit-animation: skill_5 0.6s ease;
animation: skill_5 0.6s ease;
}
.section-wrapper .skill-percentage:nth-child(6)::before
width: 70%;
-webkit-animation: skill_6 0.6s ease;
animation: skill_6 0.6s ease;
}
.section-wrapper .skill-percentage:nth-child(7)::before
width: 70%;
-webkit-animation: skill_6 0.6s ease;
animation: skill_6 0.6s ease;
}
@-webkit-keyframes skill_1 {
from {
width: 0%;
}
to {
width: 80%;
18
{
{
{
{
{
{
{
}
}
@keyframes skill_1
from {
width: 0%;
}
to {
width: 80%;
}
}
@-webkit-keyframes
from {
width: 0%;
}
to {
width: 90%;
}
}
@keyframes skill_2
from {
width: 0%;
}
to {
width: 90%;
}
}
@-webkit-keyframes
from {
width: 0%;
}
to {
width: 50%;
}
}
@keyframes skill_3
from {
width: 0%;
}
to {
width: 50%;
}
}
@-webkit-keyframes
from {
width: 0%;
}
to {
width: 60%;
{
skill_2 {
{
skill_3 {
{
skill_4 {
19
}
}
@keyframes skill_4
from {
width: 0%;
}
to {
width: 60%;
}
}
@-webkit-keyframes
from {
width: 0%;
}
to {
width: 70%;
}
}
@keyframes skill_5
from {
width: 0%;
}
to {
width: 70%;
}
}
@-webkit-keyframes
from {
width: 0%;
}
to {
width: 70%;
}
}
@keyframes skill_6
from {
width: 0%;
}
to {
width: 70%;
}
}
@-webkit-keyframes
from {
width: 0%;
}
to {
width: 70%;
}
20
{
skill_5 {
{
skill_6 {
{
skill_7 {
}
@keyframes skill_7 {
from {
width: 0%;
}
to {
width: 70%;
}
}
Матеріали
1.
2.
3.
4.
5.
6.
Справочник по HTML и CSS
W3Schools. HTML Tutorial - (HTML5 Compliant)
W3Schools. CSS Tutorial
W3C. HTML Current Status
The W3C Markup Validation Service
The W3C CSS Validation Service
Теоретичні відомості
1 Основні положення WWW
WWW – це розподілена інформаційна система мультимедіа, заснована на гіпертексті. Розподілена інформаційна система: інформація зберігається на величезній безлічі
так званих WWW-серверів (servers). Тобто комп'ютерів, на яких встановлене спеціальне
програмне забезпечення і які об'єднані в мережу Internet. Користувачі, що мають доступ
до мережі, отримують цю інформацію за допомогою програм-клієнтів, програм перегляду WWW-документів. При цьому програма перегляду посилає по комп'ютерній мережі запит серверу, що зберігає файл з необхідним документом. У відповідь на запит
сервер висилає програмі перегляду цей необхідний файл або повідомлення про відмову,
якщо файл по тих або інших причинах недоступний. Взаємодія клієнт-сервер відбувається за певними правилами, або, як кажуть інакше, протоколу. Протокол, прийнятий в
WWW, називається HyperText Transfer Protocol, скорочено – HTTP. Мультимедіа: інформація включає в себе не тільки текст, але і двох- і трьохмірну графіку, відео і звук.
Гіпертекст: інформація в WWW представляється у вигляді документів, кожний з
яких може містити як внутрішні перехресні посилання, так і посилання на інші документи, що зберігаються на тому ж самому або на будь-якому іншому сервері.
Щоб реалізувати всі ці можливості, була розроблена спеціальна мова, названа
HyperText Markup Language (HTML), тобто, Мова Розмітки Гіпертекста. Документ, написаний на HTML, являє собою текстовий файл, що містить власне текст, що несе інформацію читачеві, і дескриптори розмітки. Останні являють собою певні послідовності
символів, що є інструкціями для програми перегляду; згідно з цими інструкціями програма розташовує текст на екрані, включає в нього малюнки, що зберігаються в окремих
21
графічних файлах, і формує гіперзв'язки з іншими документами або ресурсами Internet.
Таким чином, файл на мові HTML набуває вигляд WWW-документа тільки тоді, коли він
інтерпретується програмою перегляду.
Сервери WWW. Інформація зберігається на сервері WWW у вигляді сторінок, на
яких крім тексту можуть знаходитися самі різні об'єкти. Це графічні зображення, аудіоі відео ролики, форми для введення даних, інтерактивні додатки і т.і.
Сторінки сервера WWW також містять посилання на інші сторінки, оформлені або
як спеціальним образом виділені текстові рядки, або як графічні об'єкти або органи
управління. Сторінка може посилатися на сторінки, розташовані не тільки на тому ж
самому сервері WWW, але і на будь-якому іншому сервері, підключеному до мережі
Internet. У тому числі можливі посилання на сервери FTP, Gopher і конференції сервера
новин, електронні поштові адреси (для відправки повідомлень в процесі перегляду сторінки).
Сторінки сервера WWW можуть містити не тільки статичну, незмінну інформацію,
але і динамічну. Наприклад, на такій сторінці може бути розміщена форма для виконання запитів до бази даних. Результат такого запиту буде динамічно сформований у
вигляді сторінки, яка з'явиться на екрані користувача.
Більш того сервер WWW може вирішувати будь-яку задачу, приймаючи будь-які
дані від видаленого користувача, обробляючи їх і передаючи зворотно. На сторінках
сервера WWW організуються дискусії в реальному часі, як текстові, так і голосові. Є
можливість проведення в реальному часі відео конференцій. Словом, можливостей
багато, вони обмежуються тільки фантазією розробників сторінок сервера WWW і, звичайно, рівнем досягнень сучасних технологій передачі і обробки даних.
Робота з сервером WWW досить прозора і не більш складна, ніж робота з електронною довідковою системою, вбудованою в Microsoft Windows.
Сервер WWW зберігає в своїх каталогах текстові файли сторінок, які посилаються
видаленим користувачам, а також всі інші файли, на які є посилання в сторінках (наприклад, файли з графічними зображеннями).
Текстові файли сторінок готуються з використанням спеціальної мови розмітки гіпертекста HTML (Hyper Text Markup Language).
Користувач встановлює з'єднання з сервером WWW через мережу Internet за допомогою спеціальної програми перегляду сторінок WWW – броузера. При установці з'єднання користувач вказує адресу сервера WWW. Додатково він може указати шлях до
файла сторінки WWW (адреса сторінки WWW), яка повинна бути відображена відразу
після підключення до сервера.
Якщо шлях до файла сторінок не вказаний, сервер WWW посилає клієнту (тобто
користувачеві) сторінку (документ HTML), яка відображається за умовчанням, або список що всіх є в головному каталозі сервера WWW сторінок і каталогів.
Отримана текстова сторінка (складена на мові HTML) інтерпретується навігатором
і відображається у вікні останнього. Потім з'єднання з сервером розривається. Якщо на
сторінці є графічні зображення, навігатор повторно встановлює з'єднання з сервером,
отримуючи від нього файли графічних зображень. При отриманні кожного такого файлу з'єднання спочатку встановлюється, а потім розривається.
Крім адреси навігатор може посилати в сервер WWW додаткову інформацію, введену користувачем. Така інформація може бути оброблена сервером WWW (точніше
кажучи, його розширенням). Результат обробки відсилається користувачеві зворотно у
вигляді сторінки HTML.
Статичні і динамічні документи HTML. Сервер WWW здатний не тільки зберігати статичну інформацію, але і взаємодіяти з видаленим користувачем в інтерактив-
22
ному режимі. При цьому користувач може заповнити яку-небудь форму, що містить
поля для введення цифрової або символьної інформації, і передати її серверу (просто
натиснувши на певну кнопку, розташовану на формі).
Сервер, отримавши дані з полів форми, запустить створене спеціально для цієї форми програмне розширення, яке обробить отримані дані, динамічно сформує документ
HTML і поверне його користувачеві.
Дана схема не накладає ніяких обмежень на вигляд обробки, що виконується або на
вигляд сформованого динамічно документа HTML. Тому сервер WWW може бути використаний для рішення практично довільних задач, що вимагають обробки даних,
отриманих від видаленого користувача.
Документи HTML, які створюються описаним вище образом, називаються динамічними документами. Сервер WWW, що містить поряд зі статичними динамічні документи, часто називають активним..
Додатки CGI і ISAPI дозволяють організувати зв'язок між документами HTML і системами управління базами даних (СУБД). У результаті ви можете створювати форми,
призначені для виконання звернень до баз даних (запитів, оновлень і т. і.).
Можливо створити програми Java і розмістити посилання на них в документах
HTML. Такі програми є підмножиною програм Java і називаються аплетами (applets).
Початковий текст програм, складених на мові програмування JavaScnpt або
VBScript вставляється безпосередньо в документ HTML, тому для їх розробки не потрібні спеціальні засоби (виключаючи, можливо, відладчик).
2 Основні теги мови HTML
У загальному вигляді структуру Веб-сторінки можливо представити таким чином:
<!DOCTYPE HTML PUBLIC"……..">
<HTML>
<HEAD>
(заголовок документа)
<TITLE> заголовок сторінки </TITLE>
</HEAD>
<BODY>
(тіло документа)
</BODY>
</HTML>
Документ HTML може починатися з оператора <!DOCTYPE>, який є оператором
прологу і визначає, за допомогою якої версії мови HTML створена Веб-сторінка.
<!DOCTYPE HTML PUBLIC ".//W3C//DTD HTML 3.2//EN">
Тут W3C – назва організації, що розробила стандарт. Слово DTD (Document Type
Definition) означає визначення типу документа.
Оператор прологу <!DOCTYPE> може бути відсутнім в документах HTML. Такі документи будуть нормально відображатися у вікні навігатора. Однак оператор
<!DOCTYPE> може надати допомогу навігатору при відображенні сторінки, оскільки
він дозволяє визначити версію мови HTML, використану при підготовці сторінки.
Услід за оператором прологу слідує тіло документа HTML, обмежене операторами
<HTML> і </HTML>.
23
Заголовок документа виділяється операторами <HEAD> і </HEAD>. Він може містити інші оператори і займати декілька рядків. За допомогою операторів <TITLE> і
</TITLE> тут задається рядок заголовка сторінки, який відображається в заголовку головного вікна навігатора. Кожний документ HTML повинен мати рядок заголовка, визначений вказаним вище способом. Цей рядок ідентифікує документ і відображається
навігатором не тільки в заголовку головного вікна, але і в інших місцях, наприклад в
списку відвіданих сторінок.
Тіло документа займає одну або декілька (можливо, досить багато) рядків. Воно виділяється операторами <BODY> і </BODY>.
Реальні сторінки HTML складаються з декількох параграфів тексту, які виділяються
операторами <Р> і </Р>.
Оператор <Р> може мати параметри, що визначають різні характеристики параграфа.
Перехід на новий рядок (без створення абзацу) – тег <br>/
Мова HTML дозволяє включати в документ різні оператори для шрифтового виділення окремих символів, слів або параграфів тексту.
Зміна розміру шрифту. Шрифт збільшеного розміру застосовується, як правило,
для виділення заголовків або важливих слів в тексті. Другорядна інформація для економії місця часто оформляється шрифтом зменшеного розміру.
За допомогою операторів <BIG> і <SMALL> можливо відповідно збільшити і зменшити висоту символів тексту. Ці оператори використовуються в парі з операторами
</ВIG> і </SMALL>, наприклад:
<ВIG> Добро пожалувати в мир серверів WWW!</BIG>
Оператор <BASEFONT> призначений для зміни базового розміру шрифту, його зображення і кольору. Параметри, що визначають зображення шрифту і колір символів,
ми розглянемо трохи пізніше. Що ж до базового розміру шрифту, то він задається параметром SIZE:
<Р><ВASEFONT SIZE=3>Розмір шрифту рівний 3
За допомогою оператора <FONT> з параметром SIZE можна змінити поточний розмір шрифту, як вказавши його точне значення, так і відносно базового значення, заданого оператором <BASEFONT>.
Також мова Html підтримує шість рівнів внутрішніх заголовків. Вони позначаються
тегами від <Н1> -- </Н1> до <Н6> ---</Н6>.
Колір тексту і фону сторінки. Кольорові сторінки виглядають набагато привабливішими сірих або чорно-білих. Мова HTML дозволяє вказувати колір фону, тексту,
полів посилань на інші документи HTML і т. і.
Колір окремих елементів документа HTML визначається відповідними параметрами
операторів, що створюють ці елементи. Як значення операторам необхідно передавати або
чисельне значення окремих компонент кольору, або символічну назву кольору.
Чисельне значення вказується у вигляді #RRGGBB, де RR визначає зміст червоної
компоненти кольору, GG – зеленої, а ВВ – блакитної.
Зміст компонент може змінюватися в діапазоні від 0 до FF (шістнадцятирічне значення). Наприклад, значення #FF0000 відповідає чистому червоному кольору, а значення #00FF00 – чистому зеленому кольору. Якщо ви обмежите себе тільки 256 кольорами,
то зможете вказувати колір символічно.
За замовчуванням навігатори відображають фон документів HTML сірим кольором.
За допомогою параметра BGCOLOR оператора <BODY> ви можете змінити колір фону
документа HTML, значно поліпшивши його зовнішній вигляд:
24
<BODY BGCOLOR=#FFFF00>
Колір тексту легко змінити в операторі <FONT>, задаючи параметр COLOR. У приведеному нижче фрагменті документа текстовий рядок відображається червоним кольором:
<FONT COLOR=RED> Червоний колір
Фізичне форматування символів. У мові HTML визначені оператори так званого
фізичного форматування символів тексту. Ці оператори визначають зовнішній вигляд
символів явним образом:
Оператори
Опис
<В>, </В>
Виділення жирним шрифтом
<I>, </I>
Виділення похилим шрифтом
<U>, </U>
Виділення підкресленням
<STRIKE>, </STRIKE> Виділення перекресленням
<TT>, </ТТ>
Оформлення шрифтом з фіксованою шириною букв
<BIG>, </BIG>
Текст з великим розміром букв
<SMALL>, </SMALL> Текст з малим розміром букв
<BLINK>, </BLINK>
Блимаючий текст
<SUB>, </SUB>
Підрядковий індекс
<SUP>, </SUP>
Надрядковий індекс
За допомогою параметра FACE оператора <FONT> можливо указати конкретні назви шрифтів, з використанням яких повинен відображатися текст.
<FONT FACE="Arial Cyr, Arial, Helv DL">Шрифт гельветика
Для того щоб включити в документ HTML горизонтальну розділову лінію, потрібно
використати оператор <HR>. Цей оператор має ряд параметрів, що визначають зовнішній вигляд лінії: ALIGN, COLOR, NOSHADE, SIZE, WIDTH.
Організація списків. Списки зустрічаються в документах дуже часто. Звичайно
списки бувають нумерованими і ненумерованими (маркірованими). У останньому випадку кожний елемент списку виділяється яким-небудь символом, звичайно чорною точкою. Для створення списків в мові HTML визначені оператори <UL>, <OL>, а для елементів списків – <LI>.
Для створення маркірованого списку призначений оператор <UL>, який використовується в парі з оператором </UL>, що закриває список. Можливо додати в оператор
<LI> параметр TYPE Цей параметр визначає зовнішній вигляд символу, який використовується для виділення рядка в списку, і може мати наступні значення:Circle – Кругла
точка; Square – Чорний квадрат
Для створення нумерованих списків призначений оператор <OL>, який необхідно
використовувати разом з оператором </OL>. Нумерований список створюється аналогічно щойно розглянутому маркірованому списку. Кожний рядок в списку повинен бути
відмічений оператором <LІ>.
У операторі <OL> можливо вказувати перераховані нижче параметри:
Параметр
Опис
START
TYPE
А
а
I
i
Початковий номер для списку
Тип нумерації:
великими буквами;
малими буквами;
прописними римськими цифрами;
рядковими римськими цифрами;
25
1
арабськими цифрами.
Розміщення графічних зображень. Для розміщення графічних зображень всередині тексту або таблиць можна скористатися оператором <IMG>. Для цього оператора
можливо вказувати ряд параметрів, що визначають адресу файлу із зображенням, вирівнювання тексту, розташованого біля зображення, і т. і.
Параметр
Опис
SRC
Адреса UR.L файла з графічним зображенням
ALT
Текстовий рядок, який відображається замість графічного зображення в тих випадках, коли навігатор не може показувати графічні зображення або коли таку можливість відключена
ALIGN
HEIGHT
WIDTH
Вирівнювання тексту відносно графічного зображення:
LEFT вздовж лівому кордону;
RIGHT вздовж правому кордону;
ТОР вздовж верхньому кордону;
MIDDLE по центру зображення;
BOTTOM вздовж нижньому кордону;
Висота зображення, пікселі, %
Ширина зображення, пікселі, %
BORDER
HSPACE
Ширина рамки навколо зображення в пікселях
Ширина вільного простору, який повинен відділяти зображення від тексту по горизонталі, пікселі
VSPACE
Ширина вільного простору, який повинен відділяти зображення від тексту по вертикалі, пікселі
Адреса URL файла, що містить так звану карту зображення, яка використовується
для сегментованой графіки.
USEMAP
ISMAP
Цей параметр вказує, що дане зображення є сегментованим
Слід зазначити, що для оформлення документів HTML використовуються практично тільки кілька форматів графічних файлів. Перший формат – це формат обміну графікою GIF (Graphics Interchange Format), другий – JPEG, третій – PNG.
Таблиці в web-документах. Таблиці в Веб-документах не тільки використовуються
в звичайному сенсі, а і є інструментом структурування документа. У них можуть розміщатися текстові й числові значення, зображення, блоки й гіперпосилання.
Таблиці Html, як і списки, створюють за принципом вкладення елементів, тобто задається головний тег <table>, що визначає таблицю в цілому, і в нього вкладаються
елементи структури таблиці.
У тексті документа HTML таблиця визначається між командами <TABLE> і
</TABLE>. У найпростішому разі рядка таблиці обмежуються командами <TR> і
</TR>, а стовпці (осередки рядка) – командами <TD> і </TD>, наприклад:
<ТАВLЕ>
<TR><TD>000</TD><TD>001</TD><TD>002</TD </TR>
<TR><TD>010</TD><TD>011</TD><TD>012</TD </TR>
<TR><TD>100</TD><TD>101</TD><TD>102</TD> </TR>
</TABLE>
26
Для оператора <TABLE>, яким відмічається початок таблиці, можливо указати численні параметри, що визначають зовнішній вигляд таблиці загалом. Нижче приведені
найбільш важливі з них:
Параметр
Опис
ALIGN
Визначає вирівнювання таблиці. Допустимо вказувати наступні значення:
LEFT таблиця вирівнюється по лівому краю вікна перегляду;
CENTER центрування таблиці;
RIGHT вирівнювання по правому краю;
JUSTIFY вирівнювання по лівому і правому краю
BACKGROUND
Растрове графічне зображення, яке використовується як фон для відображення того, що міститься в таблиці.
Колір фону для таблиці
Установка товщини рамки в пікселях
Установка кольору рамки. Цей параметр використовується разом з
параметром BORDER
BGCOLOR
BORDER
BORDERCOLOR
BORDERCOLORDARK Темний колір, який використовується для тривимірного виділення
рамки
BORDERCOLORLIGHT Світлий колір, який використовується для тривимірного виділення
рамки
Відстань між краями елемента таблиці і вмістом цього осередку
CELLPADDING
Відстань між рамкою таблиці і елементами цієї таблиці
CELLSPACING
Кількість стовпців в таблиці
COLS
Параметр визначає вирівнювання таблиці по вертикалі. Допустимі наVALIGN
ступні значення:
ТОР вирівнювання вздовж верхньому кордону;
MIDDLE вирівнювання по середині вікна;
BOTTOM вирівнювання вздовж нижньому кордону;
BASELINE вирівнювання по базовій лінії тексту
WIDTH
Ширина таблиці в пікселях або в процентах від ширини вікна перегляду навігатора
Оператор <TR> призначений для створення рядків таблиці. Для нього можливо вказати ряд параметрів, що визначають зовнішній вигляд рядка:
Параметр
ALIGN
BORDERCOLOR
BORDERCOLORDARK
Опис
Цей параметр визначає вирівнювання тексту в елементах таблиці.
Допустимо вказувати наступні значення:
LEFT текст вирівнюється по лівому краю;
CENTER центрування (використовується за умовчанням);
RIGHT вирівнювання по правому краю;
JUSTIFY вирівнювання по лівому і правому краю
Установка кольору рамки. Цей параметр використовується разом з
параметром BORDER оператора <TABLE>
Темний колір, який використовується для трьохмірного виділення
рамки рядка
27
BORDERCOLORLIGHT
NOWRAP
VALIGN
Світлий колір, який використовується для трьохмірного виділення
рамки рядка
Якщо текст в рядку не вміщується по горизонталі у вікні перегляду
навігатора, він не переноситься на наступний рядок, тобто не згортається
Параметр визначає вирівнювання тексту в рядку по вертикалі. Допустимі наступні значення:
ТОР вирівнювання вздовж верхньому кордону осередку;
MIDDLE вирівнювання по центру осередку;
BOTTOM вирівнювання вздовж нижньому кордону осередку;
BASELINE вирівнювання по базовій лінії тексту
За допомогою оператора <TD> визначаються елементи таблиці. Для нього можливо
указати наступні значення:
Параметр
Опис
Цей параметр визначає вирівнювання тексту в елементах таблиці. Допустимо вказувати наступні значення:
LEFT текст вирівнюється по лівому краю;
CENTER центрування (використовується за умовчанням);
RIGHT вирівнювання по правому краю;
JUSTIFY вирівнювання по лівому і правому краю
BORDERCOLOR
Установка кольору рамки. Цей параметр використовується разом з
параметром BORDER оператора <TABLE>
BACKGROUND
Растрове графічне зображення, яке використовується як фон для відображення що міститься осередку
BGCOLOR
Колір фону для осередку
BORDERCOLORDARK Темний колір, який використовується для трьохмірного виділення рамки навколо осередку
BORDERCOLORLIGHT Світлий колір, який використовується для трьохмірного виділення
рамки навколо осередку
COLSPAN
За допомогою цього параметра можливо указати, що елемент займає
декілька сусідніх осередків, розташованих праворуч або зліва в тій же
колонці. Значення параметра визначає кількість осередків, що об'єднуються
HEIGHT
Висота осередку в пікселях
NOWRAP
Якщо текст в осередку не вміщується по горизонталі у вікні перегляду
навігатора, він не переноситься на наступний рядок, тобто не згортається
ROWSPAN
Аналогічне COLSPAN, але для рядків таблиці
VALIGN
Параметр визначає вирівнювання тексту в осередку по вертикалі. Допустимі наступні значення:
ТОР вирівнювання вздовж верхньому кордону осередку;
MIDDLE вирівнювання по центру осередку;
BOTTOM вирівнювання вздовж нижньому кордону осередку;
BASELINE вирівнювання по базовій лінії тексту
WIDTH
Ширина осередку в пікселях
ALIGN
Між операторами <TD> і </TD> можливо розмістити текстовий рядок або будьякий інший об'єкт, наприклад посилання на графічне зображення.
28
Для того щоб створити пустий осередок з рамкою, запишіть в нього символ безпреривного пропуску:
<TD>&nbsp;</TD>
За допомогою оператора <CAPTION> можна забезпечити таблицю підписом, розташованим зверху над таблицею або знизу під таблицею. Для оператора <CAPTION> визначений параметр ALIGN. Цей параметр може мати значення ТОР або BOTTOM. У першому випадку підпис буде розташований над таблицею, а у другому – під таблицею.
За допомогою параметра VALIGN, який може мати значення ТОР або BOTTOM,
можна перетворити напис в підпис.
Для об'єднання елементів таблиці, розташованих в одному і тому ж рядку, можна
скористатися параметром COLSPAN. Аналогічно для об'єднання осередків, розташованих в одному і тому ж рядку, використовується параметр ROWSPAN.
Створення гіперпосилань. Існує два основних типи гіперпосилань, які містяться
на Веб-сторінках, – внутрішні і зовнішні.
Внутрішні гіперпосилання – це посилання на об’єкти в межах одного документа. За
їх допомогою можна переміщуватися всередині однієї Веб-сторінки. Зовнішні гіперпосилання – це посилання на віддалені Html-файли або ресурси мережі Інтернет.
Зовнішні посилання. Документи HTML передаються із серверу WWW віддаленим
користувачам за допомогою протоколу HTTP. Для посилання на мережні ресурси через
протокол HTTP застосовується така форма універсального ідентифікатора ресурсів
URL: http://host[:port][path]
Посилання створюється за допомогою тега <А>, що використовується в парі з тегом
</А>. Між цими тегами розташовується текст посилання, що відображається у вікні
перегляду навігатора і виділяється підкресленням, а також зміною цвіту. Формат вказівки для зовнішнього посилання такий:
<A href=ім’я файла> текст посилання </A>
Після виконання такої вказівки на екран виводиться посилання: текст посилання,
на який здійснюється посилання.
Основні параметри оператора <А>
Параметр
HREF
NAME
TARGET
TITLE
Опис
Адреса URL файла документа HTML або іншого об'єкта, на який зроблене
посилання в операторі <А>. Якщо в адресі не зазначений шлях, пошук файла
буде виконуватися в тому ж каталозі, де находится поточний документ
Ім'я посилання в документі HTML. Використовується для організації посилань
усередині того самого документа HTML
Параметр TARGET задає ім'я вікна, у який повинен бути завантажений
документ. Цей параметр використовується при роботі з фреймами.
Назва, що з'явиться у вікні навігатора при виборі посилання на об'єкт. Зручно
при організації посилань на графічні зображення й аналогічні об'єкти, що не
мають назв
Якщо документ HTML має велику довжину, є сенс організувати посилання на його
окремі логічно самостійні частини, розташувавши їх, наприклад, на початку документа.
Такі посилання називають локальними посиланнями в документі.
Для здійснення гіпертекстового переходу всередині документа використовуються
два теги <A>. Перший тег з параметром href є джерелом переходу, тобто посиланням,
29
яке вказує, куди слід перейти; другий – із параметром name – приймачем, тобто позначкою, яка фіксує місце переходу.
Тег <A href=#назва мітки > текст посилання </A> задає перехід на позначку, яка
має ім’я назва_мітки і знаходиться в документі. Тут # – ключовий символ, який вказує,
що використовується позначка, а не файл. Мітка – ім’я для позначки, яке вибирає користувач. Текст – фрагмент, який буде відображатися на екрані як посилання.
Для того, щоб посилання спрацювало, необхідно, щоб у цьому ж документі існував
елемент <A name= назва мітки > текст </A>.
Назва мітки – це довільний текст, який не з’являється на екрані й однозначно визначає місце переходу. Якщо на сторінці є кілька міток, то всі вони повинні мати різні
назви.
Посилання у виді текстових рядків зручні, тому що після відвідування відповідних
сторінок вони змінюють свій колір. Проте більш привабливо виглядають посилання,
оформлені з використанням графічних зображень. Можна вставити між операторами
<А> і </А> графічне зображення невеличкого розміру. При цьому воно буде
використане як область посилання. Якщо клацнути лівою клавішею миші по цій
області, відбудеться завантаження об'єкта, зазначеного в посиланні.
Для того щоб використати картинку як посилання, достатньо записати елемент посилання в основному документі:
<A href=ім’я файла> <Img src=ім’я графічного файлу </A>.
Форми та їх елементи. У документі HTML, що створюється для введення інформації, призначеної для опрацювання, частіше всього розміщується форма введення даних.
Ця форма складається з необхідних елементів управління: полів редагування текстової
інформації, перемикачів, списків і т. і. Найбільш форма введення схожа на звичні діалогові вікна операційної системи Microsoft Windows. Кожному елементу управління присвоюється довільне ім'я. Крім того, у цій формі повинна бути кнопка, яку варто натиснути після заповнення форми.
Коли користувач заповнює форму і натискає зазначену кнопку, дані передаються
додатку CGI, шлях до якого задається в заголовку форми. Цей додаток одержує через
протокол HTTP дані з полів форми у виді пар значень ім'я поля/значення.
Після опрацювання отриманих даних додаток CGI створює документ HTML і записує його в стандартний устрій виводу stdout. Цей документ автоматично передається
віддаленому користувачу.
Створення форм. Кожна форма містить елементи управління, за допомогою яких
користувач може вводити текстові або числові значення, вибирати рядок зі списків. У
формі можуть розташовуватися перемикачі, звичайні або графічні кнопки.
Опис форми. Для того щоб зробити форму в документі HTML, ви повинні скористатися оператором <FORM>. Цей оператор застосовується в парі з оператором
</FORM>, що завершує опис форми. Між операторами <FORM> і </FORM> знаходяться описи елементів управління у виді операторів <INPUT>, <TEXTAREA> і <SELECT>
із відповідними параметрами.
От приклад визначення найпростішої форми:
<html>
<head>
<title> пример простейшей формы </title>
</head>
<body>
30
<FORM METHOD=GET ACTI0N="http://......form.exe">
<h3>Пример формы <h3>
<TABLE>
<TR> <INPUT TYPE=text NAME="text1" VALUE="Sample of text1"> </TR>
<TR> <INPUT TYPE=text NAME=text2" VALUE="Sample of text2"> </TR>
<TR> <INPUT TYPE=submit VALUE="Send"> </TR>
</TABLE> </FORM> </body>
</html>
Перерахуємо припустимі параметри оператора <FORM>:
Параметр
ACTION
METHOD
Опис
Адреса URL для виконання дій над формою
Засіб передачі даних із форми в сервер WWW
Параметр ACTION визначає, яка дія буде виконана над формою, після того як користувач її заповнить і передасть серверу WWW. У прикладі, приведеному вище, у якості
значення для параметра ACTION ми зазначили шлях до програми CGI, що буде виконувати опрацювання даних.
За допомогою параметра METHOD ви можете вибрати один із двох методів передачі даних із форми серверу WWW.
Створення елементів управління для форми. Для створення у формі різноманітних елементів управління (текстових полів, перемикачів, кнопок і т. і.) використовуються оператори <INPUT>, <TEXTAREA> і <SELECT>.
Оператор <INPUT>. Оператор <INPUT> призначений для вставки у форму таких
елементів керування, як текстові поля, перемикачі, кнопки (звичайні й у виді графічних
зображень), а також елементів керування для передачі локального файлу через навігатор у віддалений сервер WWW.
Перерахуємо параметри оператора <INPUT>:
Параметр
TYPE
NAME
VALUE
CHECKED
SIZE
MAXLENGTH
ALIGN
SRC
Опис
Тип елемента керування. У залежності від значення цього параметра будуть створюватися різноманітні елементи керування (кнопки, перемикачі і
т.і.)
Ім'я елемента керування. Це ім'я посилається програмі опрацювання форми і використовується для визначення стана елемента керування (для перемикачів) або одержання інших даних (наприклад, для одержання рядка,
введеного в текстовому полі)
Початковий стан або початкове значення для елемента керування. Використовується для ініціалізації елемента керування при початковому відображенні форми
Цей параметр використовується для встановлення початкового значення
перемикачів
Ширина поля для введення текстової інформації в символах. По умовчанню поле має ширину 20 символів
Максимальна кількість символів, що можна ввести в поле редагування
текстової інформації.
Вирівнювання тексту, розташованого біля форми
Адреса URL графічного зображення, якщо воно використовується в елементі керування
31
Параметр TYPE визначає тип утворюваного елемента керування і може мати такі
значення:
Значення
Тип елемента керування параметра TYPE
TEXT
PASSWORD
CHECKBOX
RADIO
FILE
BUTTON
SUBMIT
RESET
IMAGE
HIDDEN
Однострочне поле для введення текстової інформації. Розмір цього поля
визначається параметрами SIZE і MAXLENGTH
Цей елемент керування призначений для введення такої інформації, як паролі. Він аналогічний елементу керування типу TEXT, але відрізняється тим,
що текст, уведений користувачем, не відображається на екрані
Перемикач типу Check Box. Призначений для використання в наборі незалежних друг від друга перемикачів або окремо
Перемикач для групи залежних перемикачів. Використовується для вибору
одного значення з декількох
Елемент керування для вибору і передача файлу. Це значення використовується по-різному різними навігаторами
Кнопка з заданим написом
Кнопка, що призначена для посилки даних із заповненої форми серверу
WWW. Напис на цій кнопці також можна задавати
За допомогою цієї кнопки користувач може скинути вміст поляж запровадження і стан перемикачів у їхні початкові значення, задані операторами
VALUE
Для посилки даних із форми в сервер ви можете використовувати не тільки
кнопку типу SUBMIT, але і довільне графічне зображення, задане параметром SRC. Відповідний графічний елемент керування має тип IMAGE.
Сховане поле, що не відображається. Вміст цього поля посилається серверу і
може бути проаналізован.
Оператор <TEXTAREA>. Оператор <INPUT> із параметром TYPE, що має значення TEXT, дозволяє вставити у форму поле редагування текстового рядка. Якщо ж
вам потрібно ввести багатострочний текст, краще скористатися оператором
<TEXTAREA>, що застосовується разом з оператором </TEXTAREA>.
Зауважимо, що, хоча параметр TYPE оператора <INPUT> дозволяє задати багатострочне поле редагування з типом TEXTAREA, створене в такий спосіб поле працює як
однострочне.
Для оператора <TEXTAREA> можна задати 3 параметри:
Параметр
Опис
NAME
Ім'я багатострочного поля, що посилається програмі опрацювання форми і
використовується для одержання введених рядків тексту.
ROWS
Розмір поля по вертикалі (у рядках).
COLS
Розмір поля по горизонталі (у символах).
Оператор <SELECT>. За допомогою оператора <SELECT> можна вставити у форму заздалегідь проініціалізований список довільних текстових рядків. Обраний рядок
пересилається серверу WWW разом із вмістом інших полів форми.
Для оператора <SELECT> визначено 2 параметра – NAME і SIZE. Параметр NAME
задає ім'я списку, що передається серверу WWW у парі з обраним рядком. За допомогою параметра SIZE можна задати висоту списку в рядках.
Нижче наведено приклад використання оператора <SELECT>:
<SELECT NAME="number">
<ОРТIОN>Перший
<OPTIОN SELЕСТЕD>Другий
<ОРТIОN>Третій
<OРТIОN>Останній
32
</SELECT>
Для запису рядків у список тут використовується оператор <OPTION>. Рядок, відзначений параметром SELECTED, буде обрано в списку за замовченням.
3 Каскадні таблиці стилів CSS
Мова CSS призначена для опису способу відображення вмісту документів за допомогою пристроїв виводу. Існує можливість створювати такі описи з урахуванням специфіки цих пристроїв.
В даний час існує три версії стандарту CSS: CSS1, CSS2 і CSS3. Остання версія знаходиться на етапі обговорення, перша підтримана останніми версіями всіх популярних
браузеров.
Таблиці стилів будуються відповідно до певного порядку (синтаксиса), інакше вони
не можуть нормально працювати. Таблиці стилів складаються з певних частин:
Селектор {властивість:значення}
Опис
Правило
Селектор (Selector). Селектор – це елемент, до якого застосовуватимуться стилі, що
призначаються. Це може бути тег, клас або ідентифікатор об'єкту гіпертекстового документа.
Властивість (Property). Властивість визначає одну або декілька характеристик селектора. Властивості задають формат відображення селектора: відступи, шрифти, вирівнювання, розміри і т. і.
Значення (Value). Значення – це фактичні числові або рядкові константи, що визначають властивість селектора.
Опис (Declaration) – сукупність властивостей і їх значень.
Правило (Rule) – повний опис стилю (селектор + опис).
Таким чином, таблиця стилів – це набір правил, що задають значення властивостей
селекторів, перерахованих в цій таблиці. Загальний синтаксис опису правила виглядає
так: селектор[, селектор[, ...]] { властивість: значення;}
Регістр символів значення не має, порядок перерахування селекторів в таблиці і
властивостей у визначенні не регламентований.
Правила CSS. Отже, каскадна таблиця стилів – це набір правил форматування тегов
HTML. Приведемо декілька прикладів написання таких правил:
Основний текст з вирівнюванням по ширині, абзацний відступ 30px, гарнітура
(шрифт) – Serif, кегль (розмір шрифту) – 14px:
p { text-align: justify; text-indent: 30px;
font-family: Serif; font-size: 14px; }
Це правило буде застосовано до всіх тегів <p>.
Синій колір для заголовків з першого по третій рівень:
h1, h2, h3 {color: blue; /* теж саме, що і #0000FF */
}
Внутрішні відступи зліва і справа для блоків (<div>), заголовків таблиць і елементів
таблиць встановити в 10px і залити фон жовтим кольором:
div, th, td {padding-left: 10px; padding-right: 10px;
33
background-color: yellow;
}
Всі посилання в документі відображати чорним кольором і напівжирним шрифтом,
а в основному тексті і списках – звичайним, а також виділяти їх зеленим кольором і
підкреслювати тільки при наведенні курсору (у описі правил використаний псевдоклас
a:hover).
а {color: black; font-weight: bold;}
p, li {font-weight: normal; text-decoration: none;}
p a:hover, li a:hover {
color: #00FF00; text-decoration: underline;
Коментарі в мові CSS починаються з /* і закінчуються */.
Класи. Стандарт CSS представляє можливості створення іменованих стилів – стильових класів. Це дозволяє відповісти на такій, наприклад, питання: Як застосувати
різні стилі до одного і того ж селектора?
Припустимо, що в документі вам потрібно два різні види основного тексту – один
без відступу, другий – з лівим відступом і шрифтом червоного кольору. Для цього потрібно створити правила для кожного з них, наприклад так:
p {margin-left: 0;}
p.warn {margin-left: 40px; color: #FF0000;}
Для застосування створеного класу його ім'я потрібно вказати в атрибуті class для
вибраних абзаців:
<p class=”warn”> Червоний текст з відступом слева</p>
Загальний синтаксис опису класу: селектор.ім’я_класа { опис}
При створенні класу селектор можна не указувати, тоді це правило можна застосовувати до будь-якого селектора, що підтримує той же набір властивостей.
Наприклад, правило: .solid_blue {color: blue;}
Використання:
<p class=”solid_blue”> Синій текст абзацу </p>
<li class=”solid_blue”> Синій текст елементу списку </li>
Ідентифікатори. В якості селектора може виступати ідентифікатор елементу гіпертексту, вказаний в атрибуті id. Для призначення стилів таким елементам використовується синтаксис, аналогічний опису класів, але замість крапки ставиться знак #. Наприклад:
div#content { position: absolute; top: 10px; left: 10%;
right: 10%; border: solid 1px silver;}
...
<div id="content">Текст</div>
Слід пам'ятати, що ідентифікатори елементів повинні бути унікальні в межах документа.
Псевдокласи. У CSS є таке поняття як псевдоклас. На відміну від звичайного класу,
дія псевдокласу розповсюджується не на весь текст, до якого застосований даний стиль,
а лише на його частину і можливо лише в певному стані. Щоб було зрозуміліше, давайте розберемо ефект, при якому посилання підкреслюються лише при наведенні на них
курсору. Ось фрагмент таблиці стилів, який дозволяє досягати вищеописаного ефекту:
а { text-decoration: none; }
a:hover { text-decoration: underline;}
34
Верхня строчка – це перевизначення стандартного тега <a>, яке забороняє підкреслювати посилання, а ось нижня – це визначення стилю для псевдокласу hover, який
описує стиль посилання в мить, коли курсор знаходиться на ньому.
А ось і інший приклад псевдокласу – визначення буквиці спочатку абзацу:
p:first-letter { font-size: 200\%; font-weight: bold; }
І в тому, і в іншому випадку дія стилю розповсюджується або на певний стан (користувач збирається клацнути по посиланню), або на фрагмент тексту (змінюється тільки
перша буква абзацу). У цьому і полягає сенс псевдокласів.
Для гіперпосилань можна вказати наступні псевдокласи (їх назви указують після
двокрапки):
- link – звичайне гіперпосилання
- visited – гіперпосилання, по якому відбувався перехід
- active – активне гіперпосилання (виділена клацанням)
- hover – гіперпосилання, над яким знаходиться курсор
- focus – гіперпосилання, що знаходиться у фокусі
Вказівка псевдоелементів (також після двокрапки):
- first-line для тега <p> вибирає перший рядок
- first-letter для тега <p> вибирає перший символ
- before указує текст, який буде вставлений до елементу
- after указує текст, який буде вставлений після елементу
Додатково можна вказати мову після двокрапки, наприклад:
h1:lang(ru)
Групування властивостей. Групування (grouping) полягає в об'єднанні значень
споріднених властивостей. При цьому таблиця стилів стає компактнішою, але пред'являються жорсткіші вимоги до опису правил. Нижче приведений приклад звичайного
стилю, що задає відступи:
div { margin-left: 10px; margin-top: 5px; margin-right:
40px; margin-bottom: 15px; }
Це ж правило можна переписати з групуванням в наступному вигляді:
div {margin: 5px 40px 15px 10px;} /*порядок: top right bottom left*/
Обидва стилі відображатимуться однаково.
Використання на web-сторінках. Існує три способи застосування таблиці стилів до
документа HTML:
– Вбудовування (Inline). Цей метод дозволяє застосувати стиль до заданого тегу
HTML.
– Впровадження (Embedded). Впровадження дозволяє управляти стилями сторінки
цілком.
– Скріплення (Linked або External). Зв'язана таблиця стилів дозволяє винести опис
стилів в зовнішній файл, посилаючись на який можна контролювати відображення всіх
сторінок сайту.
Вбудовані стилі. Вбудовування стилів надає максимальний контроль над всіма
елементами web-сторінки. Вбудований стиль застосовується до будь-якого тегу HTML
за допомогою атрибуту style таким чином:
35
<p style="font: 12pt Courier"> Це текст з кеглем 12 пунктів і
гарнітурою Courier </р>
Вбудовані стилі корисні, коли необхідна тонка настройка відображення деякого
елементу сторінки або невеликої web-сторінки.
Впроваджені стилі. Впроваджені стилі використовують тег <style>, який зазвичай
розміщують в заголовку HTML-документа (<head>...</head>):
<html>
<head>
...
<style>
правила CSS
</style>
...
</head>
<body>
...
Атрибути тега <style>:
- type задає тип мови (у нашому випадку це завжди text/css).
- media задає тип пристрою. Можливі значення:
- all (за умовчанням) відповідає будь-якому пристрою
- tty відповідає пристроям з моноширінним шрифтом (деякі принтери, факси)
- tv відповідає телевізору (маленька роздільна здатність, мала кількість кольорів, проблеми скролінгу)
- projection відповідає проекторам
- haldheld відповідає кишеньковим пристроям (малі роздільна здатність, екран,
кольори і т. і.)
- print відповідає режиму preview (для друку)
- braille відповідає пристроям для сліпих
- aural відповідає синтезаторам мови
Зв'язані таблиці стилів. Зв'язані (linked), або зовнішні (external) таблиці стилів –
найбільш зручне рішення, коли йдеться про оформлення цілого сайту. Опис правил
поміщається в окремий файл (зазвичай, але не обов'язково, з розширенням .css). За допомогою тега <link> виконується пов'язання цієї таблиці стилів з кожною сторінкою, де
її необхідно застосувати, наприклад так:
<link rel=stylesheet href="sample.css" type="text/css">
Будь-яка сторінка, що містить такий зв'язок, буде оформлена відповідно до стилів,
вказаних у файлі sample.css. Слід зазначити, що файл із стилями фізично може знаходитися на іншому web-сервері, тоді в href потрібно вказати абсолютний шлях до нього.
Способи завдання констант і властивості. Для вказівки розмірів використовують
наступні одиниці: in (дюйми), cm (сантиметри), mm (міліметри), pt (1/72 дюйми), pc
(12pt), em (розмір шрифту), ex (розмір букви "x"), px (розмір пікселя). Власне розмір
задається у вигляді десяткового числа з роздільником у вигляді крапки. Перед числом
може стояти знак + або -.
URL задаються у вигляді конструкції url(). Усередині дужок в лапках задається власне адреса.
36
Колір задається або назвою, або числовим кодом (#шістнадцятирічний код), або у
вигляді трійки (rgb(255,255,255)). Можливо також використовувати системні значення:
ActiveBorder – рамка активного вікна, ActiveCaption – заголовок активного вікна,
AppWorkspace – колір фону багатодокументного інтерфейсу, Background – фон робочого столу, ButtonFace – колір переднього плану тривимірних елементів, ButtonHighlight –
темна тінь для тривимірних елементів (для країв, виступаючих з світлої основи),
ButtonShadow – колір тіні для тривимірних елементів, ButtonText – текст кнопки.
CaptionText – текст заголовка, боксу і в боксі прокручуваного списку, GrayText – сірий
("недоступний") текст. Це колір встановлений в (#шістнадцятирічний код) 0 на той випадок, якщо поточний дисплей не підтримує суцільний сірий колір, Highlight – об'єкт(и), виділений в елементі управління, HighlightText – текст об'єкту(ів), виділеного в
елементі управління, InactiveBorder – рамка неактивного вікна, InactiveCaption – заголовок неактивного вікна. InactiveCaptionText – колір тексту неактивного заголовка,
InfoBackground – колір фону елементів підказки, InfoText – колір тексту елементів підказки, Menu – фон меню, MenuText – текст меню, Scrollbar – сіра область прокрутки,
ThreeDDarkShadow – темна тінь для тривимірних елементів дисплея, ThreeDFace – колір
переднього плану для тривимірних елементів дисплея, ThreeDHighlight – колір підсвічування для тривимірних елементів дисплея, ThreeDLightShadow – світлий колір для тривимірних
елементів дисплея (для країв, виступаючих з світлої основи), ThreeDShadow – темна тінь для
тривимірних елементів дисплея, Window – фон вікна, WindowFrame – кадр вікна,
WindowText – текст у вікнах.
Властивості
Межі, відступи і поля
– margin,margin-left,margin-right,margin-top,margin-bottom задають відступи навколо
елементу (відступи від рамки до охоплюючого боксу з відповідного боку). При вказівці
розміру у відсотках, використовують як базу розмір охоплюючого блоку. У разі використання margin можна вказати одне значення (для всіх полів), два значення (перше –
для верхнього і нижнього, друге – для лівого і правого), три значення (перше – для верхнього, друге – для лівого і правого, третє – для нижнього), чотири значення (верхнє,
праве, нижнє, ліве).
– padding,padding-left,padding-right,padding-top,padding-botton задають відстані від
вмісту до рамки.
– border-width, border-top-width, border-right-width, border-left-width, border-bottomwidth задають ширину ліній рамок. Можна вказати їх або у вигляді довжини (але не у
відсотках), або значення thin, medium, thick.
– border-color, border-top-color, border-left-color, border-right-color, border-bottomcolor задають кольори рамок. Окрім власне кольори можна вказати значення transparent
(прозора рамка)
– border-style, border-top-style, border-left-style, border-right-style, border-bottom-style
задають стиль рамки. Значення: none (розмір буде 0), hidden (майже завжди, те ж, що
none), dotted – рамка з крапок, dashed – рамка з пунктирних ліній, solid – рамка з суцільної лінії, double – подвійна суцільна лінія, groove – вирізана лінія, ridge – виступаюча
лінія, inset – лінія, що втиснула, outset – опукла лінія.
– border, border-top, border-bottom, border-left, border-right дозволяють встановлювати
всі атрибути рамок в порядку: розмір, стиль, колір. Перший варіант дозволяє встановлювати тільки однакові значення для всіх сторін.
37
Розміри боксів задаються за допомогою атрибутів width і height (не відносяться до
елементів таблиць). Можна також задавати мінімальні і максимальні розміри (minwidth, max-width, min-height, max-height). Для max-* можна указувати значення none
(немає обмежень).
line-height
задає висоту рядка. У відсотках вона дається щодо звичайного розміру рядка. Якщо
розмір менше реального, то частини символів виходять за межі блоку.
vertical-align
задає вирівнювання елементів рівня тексту. Значення: baseline – базова лінія повинна співпадати, middle – вирівнювання середньої точки боксу з базової лінії + половиною
висоти батьківського елементу, sub – знижує базову лінію боксу до звичайного нижнього індексу, super - верхнього, text-top - вирівнює верх боксу з верхом шрифту батьківського елементу, text-bottom – те ж, але з низом; завдання значення у відсотках або у вигляді довжини піднімає (+) або опускає (-) базову лінію, top – верх елементу вирівнюється по верху рядка, низ елементу вирівнювається по низу рядка.
overflow
В деяких випадках вміст боксу має великі розміри, чим сам бокс. Для управління
розміщенням в цьому випадку використовується атрибут overflow. Можливі значення:
visible (вміст відображається поза межами боксу (зокрема)), hidden (вміст усікається),
scroll (вміст усікається, але з'являється також смуга прокрутки), auto (автоматичний режим
для смуг прокрутки).
Для вказівки меж виведення усіченого зображення можна використовувати параметр clip. Його можливі значення – це auto і rect (top right bottom left), де вказані зсуви
області висновку від відповідних меж боксу.
visibility
дозволяє задавати спосіб виведення боксу: auto (звичайний спосіб), hidden (невидимий). Ця властивість часто використовується спільно з JavaScript для створення динамічного меню.
Списки. Для настройки відображення списків можна використовувати властивості
list-style-type із значеннями, що були перераховані вище як стилі лічильника, list-styleimage із значенням – url картинки, list-style-position – значення inside або outside, від
яких залежить розташування тексту після маркера (він буде повністю зміщений або
тільки в першому рядку).
За допомогою властивості list-style можна вказати всі вказані значення (list-styletype, list-style-image, list-style-position).
Кольори і фон. Колір тексту задається за допомогою властивості color, колір фону –
background-color (можливе значення transparent). backgroud-image задає картинку для
фону, background-repeat управляє повторенням картинки фону (repeat, repeat-x, repeat-y і
none задають розмноження по горизонталі і вертикалі одночасно, тільки по горизонталі,
тільки по вертикалі і відсутність розмноження). background-attachment має значення
scroll (фон прокручується разом з вмістом), fixed (не прокручується). bacground-position
дозволяє указувати дві довжини (можна у відсотках) – зсуви до позиції фонового малюнка або значення top, center, bottom (для позиціонування по вертикалі), left, center, right
(по горизонталі).
Властивість background задає всі значення для фону в наступному порядку:
background-color,
background-image,
background-repeat,
background-attachment,
background-position.
38
Шрифти. font-family задає сімейство шрифтів. Крім власне назв шрифтів можна
указувати узагальнені назви serif (шрифти мають загини або зарубки), sans-serif (відсутність зарубок), cursive (зв'язуються закінчення символів, схожі на прописні), fantasy
(декоративні), monospace (моноширинні).
font-style задає нахил шрифту (normal, italic, oblique)
font-variant дозволяє використовувати шрифти, в яких рядкові букви, - зменшені заголовні (small-caps, normal)
font-weight задає товщину букв. Це значення від 100 до 900 (кратні 100), normal
(400), bold (700), bolder (збільшення), lighter (зменшення)
font-stretch (ширина букв):ultra-condensed, extra-condensed, condensed, semicondensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded, wider (ширше)
font-size задає розмір шрифту: xx-small, x-small, small, medium, large, x-large, xx-large
– різні абсолютні розміри, larger, smaller – відносні, можливе завдання в довжині і відсотках.
font-size-adjust задає відношення розміру шрифту до висоти рядкових букв.
font задає наступні властивості шрифту: font-size, font-variant, font-weight, font-size,
line-height (після /), font-family. Якщо задається хоч один з цих параметрів, то повинен
бути вказаний font-size і font-family. Можна задати один з системних шрифтів: caption,
icon, menu, message-box, small-caption, status-bar.
Контури для шрифтів: outline-width, outline-style і outline-color мають ті ж значення,
що і border-* (окрім hidden для -style). outline задає відразу всі ці параметри.
Текст. text-indent задає відступ першого рядка (можна у відсотках)
text-align задає вирівнювання (left, right, center, justify).
text-decoration має значення none, underline (підкреслення), overline (надчеркиваніє),
line-through (закреслення), blink (мигання – може не бути).
text-shadow описує ефект тіні. Значення: колір, потім дві довжини (зсув) і радіус). Їх
може бути декілька.
letter-spacing і word-spacing задають відстань між символами і словами. Звичайне
значение&bnsp;- normal.
text-transform має значення capitalize (перший символ кожного слова заголовний),
uppercase (всі символи слова заголовні), lowercase (рядкові), none.
white-space задає розмір пропуску і може управляти його обробкою (pre – відсутність
стиснення послідовних пропусків, nowrap – відсутність переходу на новий рядок).
Деякі зауваження про таблиці. У колонок можна вказати значення visibility:
collapse. В цьому випадку стовпець зникає. caption-side указує вирівнювання у заголовка таблиці (left, right, top, bottom).
table-layout дозволяє задавати алгоритм виведення таблиць auto або fixed (виведення
таблиці не залежить від вмісту)
border-collapse має значення collapse (стискаються рамки), separate (роздільні рамки).
border-spacing задає відстань між роздільними рамками (по горизонталі і вертикалі)
empty-cells задає спосіб виведення порожніх осередків (show, hide)
Блокова модель. Будь-який HTML-елемент є блоком. Структура окремого блоку показана на рис. 1.1.
39
Рисунок 1.1 – Структура блока в CSS
Блок складається з контентной частини, яка може бути оточена відступами, рамками
і полями. Кожен блок може мати фіксовану ширину (width) і висоту (height). Як видно з
рисунка, загальна ширина контейнера складається з ширини окремих компонентів:
Ширина контейнера = margin-left + border-left + padding-left + width + padding-right
+ border-right + margin-left.
Всі параметри, представлені на рис. 1.1, можна задати за допомогою CSS (причому
абсолютно аналогічними властивостями),а ширину контентної частини – властивістю
width. За замовчуванням і поля, і відступи, і рамки відсутні, тобто мають величину, рівну нулю. В цьому випадку ширина контентної частини рівна ширині всього блоку. Якщо ж властивість "width" не встановлена, то ширина контентної частини визначається
контейнером. Будь-який елемент має контейнер.
Контейнер елементу – це елемент блокового рівня, що є найближчим предком
даного елементу.
Властивості блока
width: – ширина
height: – висота
margin-top: – зверху
margin-right: – праворуч
margin-bottom:– знизу
margin-left: – ліворуч
padding-top: – зверху
padding-right: – праворуч
padding-bottom:– знизу
padding-left: – ліворуч
40
Ширина, висота блоку задаються або значенням, або
у відсотках щодо батьківського контейнера.
Розміри зони полий навколо блоку, задаються або
значенням, або у відсотках щодо ширини контейнера.
Розміри зони відступів усередині блоку, задаються
або значенням, або у відсотках щодо ширини контейнера.
border-top-style: – зверху
border-right-style:– праворуч
border-bottom-style: – знизу
border-left-style: – ліворуч
Стиль лінії межі. Може приймати наступні значення:
none (немає), dotted (пунктир), dashed (штрихпунктир), solid (суцільна), double подвійна суцільна),
groove (межа, що втиснула), ridge (опукла межа),
inset (блок, що втиснув), outset (опуклий блок)
Якщо стилі ліній межі не задані, то всі інші властивості межі не вплинуть на відображення блоку.
border-top-width: – зверху
border-right-width: – праворуч
border-bottom-width: – знизу
border-left-width: – ліворуч
border-top-color: – зверху
border-right-color: – праворуч
border-bottom-color: – знизу
border-left-color: – ліворуч
Розмір зони межі блоку, задається або значенням, або
спеціальним словом: thin, medium, thick medium.
Колір межі, задається або значенням кольору, або
transparent
float: – визначає плаваючий блок тексту, приймає значення left (блок притиснутий
до лівої межі елементу, що охоплює блок), rigth (блок притиснутий до правої межі елементу, що охоплює блок), both (текст може обтікати блок з обох боків).
clear: – забороняє наявність плаваючих блоків біля блоку тексту, може приймати
значення: right, left, none, both.
Властивості позиціонування
position: задає алгоритм позиціонування. Може приймати значення: static – звичайний блок, задані властивості top і left ігноруються,
relative – властивості top і left зміщують блок щодо його нормального положення в
загальному потоці даних;
absolute – блок вилучається з потоку даних і позиціонується відповідно до властивостей top, left, right або bottom щодо найближчого по вкладеності того, що вміщає його
контейнера, що позиціонується;
fixed – блок позиціонується як і у разі значення absolute, а потім фіксується щодо
деякого об'єкту.
top: – вертикальний зсув блоку щодо верху контейнера (значення або відсоток щодо
висоти контейнера).
right: – горизонтальний зсув блоку щодо правої межі контейнера (значення або відсоток щодо ширини контейнера).
bottom: – вертикальний зсув блоку щодо низу контейнера (значення або відсоток
щодо висоти контейнера).
left: – горизонтальний зсув блоку щодо лівої межі контейнера (значення або відсоток щодо ширини контейнера).
z-index: – позиційний рівень блоку; блок з великою властивістю z-index розташовується над блоком з меншою властивістю z-index, auto – властивість z-index привласнюється в порядку опису елементів в початковому коді.
Властивості відображення
overflow: – визначає тип усікання вмісту блоку із заданою шириною і висотою. Можливі значення visible (все одно видно), hidden (усічено за розмірами), scroll (усічено,
але є можливість прокрутки).
41
clip: – визначає яка частина елементу видна. Рабтаєт якщо вказано позиціонування.
Можливі значення: auto (показувати все), rect(<top> <right> <bottom> <left>) – опис
координат видимої прямокутної області.
visibility: – визначає видимість блоку. Можливі значення: visible (видимий блок),
hidden (блок не відображається, але залишається порожнє місце, яке б він зайняв).
Властивості списків.
list-style-type: – тип списку. Можливі значення: square – у вигляді маркера використовуємо квадрат, disk – диск, circle – круг, lower-roman – рядкові римські букви, upperroman – заголовні римські букви, lower-alpha – рядкові латинські букви, upper-alpha –
заголовні латинські букви.
list-style-image:url(адреса зображення) – замість маркерів буде зображення.
Контрольні питання
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
42
Що таке WWW?
Який протокол використовується для передавання даних в WWW?
Для чого призначена мова HTML?
Що таке тег? Що таке аплет?
Які структурні тегі вам відомі? Для чого вони призначені?
Які теги використовуються для оформлення тексту? Які їх параметри?
Які типи списків можливо відображати на web-сторінках?
Яким чином здійснюється розміщення графічних зображень?
Які теги застосовуються для створення таблиць? Перелічите їх основні параметри.
За допомогою якого тега створюються посилання? Які параметри цього тега?
Для чого призначені форми на web-сторінках? Які елементи управління можуть містити форми? Які теги та їх параметри використовують для створення
форм та елементів управління?
Що таке CSS?
Яким чином додати параметри стильового оформлення до Web-сторінки?
Синтаксис селектору. Приклади
Що таке блок в CSS? Які різновиди блоків існують?
Які параметри блоків вам відомі?