Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Структура html-документу
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
Текст, що відображається на екрані
</body>
</html>
Заголовки
<h1>… <h6> текст </h1>…</h6>
Вирівнювання заголовків – атрибут align
<h2 align=center \ right \ left>Teкст заголовка</h2>.
Абзац
<p>абзац </p>
Вирівнювання абзаців
<p align="center">текст</p>
<p align="left">текст</p>
<p align="right">текст</p>
<p align="justify">текст</p>
Після </p> автоматично здійснюється перехід на новий рядок
Просте вирівнювання по центру
<center> текст </center>
Коли не потрібен перехід на новий рядок використовують тег
<div></div>
<div align="center"> текст </div> …
Один абзац не може містити в собі інші абзаци та тег <div></div>.
Однак тег <div></div> може містити в собі абзаци, наприклад
<div align="right">
<p>текст первого абзаца</p>
<p>текст второго абзаца</p>
<p>текст третьего абзаца</p>
</div>
<br> - перехід на новий рядок без створення абзацу
<hr> горизонтальна лінія
Атрибути горизонтальної лінії
<Hr align="right"> (center або left)
<Hr width="30%"> (ширина лінії у процентах або пікселях)
<Hr size="6"> (товщина лінії)
<Hr NoShade> (відміна об’ємності)
<Hr color="cc0000"> (колір лінії, лише у IE)
Спецсимволи
< - <
> - >
" - "
- пробел
& - &
<!—коментарі для пояснень-->
Атрибути тегу <body>
background="url" — замість url вказують адресу малюнка, який має бути тлом для сторінки;
bgcolor=значення — задає колір, який має бути фоновим для документа;
text=значення — задає колір тексту;
link=значення — визначає колір гіперпосилань у документі;
alink=значення — задає колір гіперпосилань під час клацання;
vlink =значення — задає колір переглянутих гіперпосилань.
Якщо потрібно помістити в документ відформатований текст, для якого браузер повинен зберегти всі пропуски, навіть якщо кілька пропусків розміщені один за одним, знаки переносу на інший рядок, табуляції та інші символи форматування, використовують тег <pre>текст</pre>.
Теги форматування тексту
<b> та </b> Напівжирне накреслення
<i> та </i> Курсивне накреслення
<u> та </u> Підкреслене
<s> та </s> Перекреслене
<sup> та </sup> Верхній індекс
<sub> та </sub>
параметри шрифту
тег <basefont> задає гарнітуру (рисунок), розмір і колір шрифту. Цей тег одинарний, діє на весь текст, розміщений нижче, і має такі атрибути.
face="значення" — гарнітура.
size=”значення” — розмір шрифту (ціле число від 1 до 7).
color=”значення” — колір шрифту.
Значення атрибутів size та color можна записувати без лапок.
тег <font атрибути>Текст</font>.
Атрибути цього тегу такі самі, як у тегу <basefont>, за винятком атрибута size: його значення зі знаком мінус (або плюс) означає, що розмір шрифту буде зменшено (чи збільшено) на відповідну величину відносно заданого за умовчанням або у тегу <basefont>. Значення без знака задає абсолютний розмір шрифту.
Інші теги
<big>Teкст</big> — збільшення розміру шрифту. Розмір символів тексту збільшується на одиницю відносно поточного рівня.
<small>Teкст</small> — зменшення розміру шрифту. Розмір символів зменшується на одиницю відносно поточного рівня.
<em>Текст</em> — виділення важливих фрагментів тексту. Текст відображатиметься курсивом.
<del>Teкст</del> — створення перекресленого тексту. Текст буде перекреслено горизонтальною лінією.
<marquee> «рухомий рядок» </marquee> —додають до веб-сторінки «рухомий рядок» із тексту, розташованого між ними.
Списки
Невпорядковані списки
<ul>
<li>перший елемент списку
<li>другий елемент списку
<li>…
</ul>
Тег <ul> може мати атрибут type , який визначає тип маркеру елементів списку
Цей атрибут набуває таких значень:
disk — зафарбоване коло;
circle — коло;
square — маленький чорний квадрат.
Впорядковані списки
<ol>
<li>Перша дія
<li>Друга дія
<li>…
</ol>
Тег <ol> може мати атрибут type, який визначає тип нумерації. Цей атрибут набуває таких значень:
• А — велика літера;
• а — мала літера;
• І — велика римська цифра;
• і — мала римська цифра;
• 1 — арабська цифра.
За допомогою атрибута start можна задати відмінний від одиниці початковий номер елемента, наприклад <ol type="1" start="5">
Списки визначень
<dl>
<dt>Термін 1</dt>
<dd>Визначення 1</dd>
<dt>Термін 2</dt>
<dd>Визначення 2</dd>
</dl>
Гіперпосилання
теги <а> текст посилання </а>, визначивши для тегу <а> атрибут href. Його значенням має бути адреса url, на яку вказує посилання..
зовнішнє (абсолютне) посилання <а href="http://www.microsoft.com/">Microsoft</a>
внутрішнє (відносне) посилання <а href="main.htm"> моя особиста сторінка </а>
посилання на якір
<а href="#olenap"> кінці цієї сторінки</а>
…
<а name="olenap" href="mailto:olena@zirka.Iviv.ua"> 0lena@zirka.lviv.ua </a>
Таблиці
<table></table>
<tr></tr> - рядок таблиці
<td></td> - стовпчик (клітинка) таблиці
<th></th> - аголовки рядків або стовпчиків
<caption> </caption> - заголовок таблиці (атрибут align може мати значення top/bottom – заголовок перед або після таблиці)
Приклад – таблиця із 2 рядками і 2-ма стовпчиками
<table>
<tr>
<td>Перша клітинка</td>
<td>Друга клітинка</td>
</tr>
<tr>
<td>-Перша клітинка</td>
<td>-Друга клітинка</td>
</tr>
</table>
Для оформлення зовнішньої рамки таблиці можна використовувати атрибут FRAME тегу <TABLE>. Його значення визначають, що браузер відображатиме:
• box — всі чотири сторони рамки;
• above — лише верхню межу рамки;
• below — лише нижню межу;
• lhs — лише ліву межу;
• rhs — лише праву межу;
• hside s — верхню й нижню межі рамки;
• vsides — ліву й праву межі рамки;
• void — зовнішня рамка не відображатиметься.
Відображення розділювальних ліній між стовпцями та рядками таблиці визначають за допомогою атрибута RULES тегу <TABLE>. Він може набувати таких значень:
• all — відображати всі вертикальні та горизонтальні лінії;
• rows — лише горизонтальні лінії між рядками;
• cols — лише вертикальні лінії між стовпцями;
• none — не показувати розділювальних ліній.
Атрибути
bgcolor="колір" (може застосовуватись і до тегів <table> та <tr>)
align="center"… (стандартні значення вирівнювання по горизонталі)
valign ="middle" (top, bottom) (вирівнювання по вертикалі)
height="висота в пікселях або відсотках "
width="ширина в пікселях або відсотках"
сolspan ="кількість стовпчиків" – кількість стовпчиків, які займає дана клітинка
rowspan="кількість рядків" – кількість рядків, які займає дана клітинка
Можна позбавитись від простору між клітинками таблиці. Для цього використовують атрибут cellspacing <table cellspacing="0">
Для створення рамки таблиці використовують атрибут border="товщина в пікселях"
bordercolor="колір"
bordercolorlight — колір світлої частини рамки;
bordercolordark — колір темної частини рамки.
Робота із зображеннями
<img src=” …. ”>
Може мати наступні атрибути:
height, width – висота та ширина (у відсотках або пікселях)
alt – опис зображення
align – вирівнювання (l e f t — зображення розміщене в лівій частині сторінки, текст обтікає його з правого боку; • r i g h t — зображення розміщене у правій частині сторінки, текст обтікає його з лівого боку; • top — обтікання немає, зображення розміщене в тексті, відповідний рядок якого вирівняно за верхньою межею малюнка; • bottom — обтікання немає, зображення розміщене в тексті, відповідний рядок якого вирівняно за нижньою межею малюнка; • middle — обтікання немає, зображення розміщене в тексті, відповідний рядок якого вирівняно по середній лінії малюнка.)
vspace, hspace – відстань по горизонталі та вертикалі між малюнком та текстом
title – підказка, яка спливає при наведенні на зображення курсором
Карти-зображення (карти-посилання, навігаційні карти)
у тегу <img> визначають атрибут src, щоб задати зображення, і атрибут usemap, значенням якого є ім'я карти (має починатися символом #). власне карту створюють за допомогою тегу <mар> з атрибутом name, який містить ім'я карти (визначене в атрибуті usemap, але без символу #) та тегу </mар>. Між ними записують теги <area>, які задають параметри гарячих областей. При цьому використовують такі атрибути:
• href — визначає гіперпосилання, пов'язане з областю;
• alt – опис області зображення, вказаної координатами;
• title – підказка, яка спливає при наведенні на вказану область курсором;
• shape — визначає форму області (його значеннями можуть бути: • rect — прямокутник; • polygone або poly — багатокутник; • c i r c l e — коло; • coords — містить координати області у вигляді взятого в лапки списку чисел, розділених комою)
<img src="../files/109/bluerects.gif" usemap="#karta1">
……………………..
<map name="karta1">
<area href="drugoy_document.html" shape="rect" coords="25,36,114,98">
<area href="drugoy_document2.html" shape="circle" coords="46,48,35" alt=" маленьке коло " title=”маленьке коло”>
<area href="drugoy_document3.html" shape="poly" coords="168,9,232,29,200,97, 223, 129, 153, 119">
</map>
Фрейми
Фрейми – блоки або вікна веб-сторінки
Структура головного документу (main.html, index.html), що містить фрейми
<html>
<head>
<title>…..</title>
</head>
<frameset>……..</frameset>
</html>
<frameset></frameset> - задає розділ веб-сторінки на вікна, має атрибути rows=”…” cols=”…”, які задають поділ документа на ряди та колонки (в пік селях або відсотках)
Те, що міститься у кожному фреймі, та яким чином воно буде відображатися у вікні, задає тег <frame> </frame> , він має наступні атрибути:
src="../files/109/….." - шлях до того файлу, який буде відображатись у фреймі
scrolling="…." - відображення полоси прокручування (no – заборона її відображення, auto – можна не прописувати)
noresize – заборона зміни розміру фрейму користувачем
border="…" – задає ширину меж фреймів
bordercolor= “…” – задає колір меж фремів
marginwidth="…" marginheight="…." – встановлення ширини полів фреймів
name=”…” – задає ім’я фрейму (якщо воно задано, то при посиланні на документ, який повинен відкритися у даному вікні, використовується у тегу посилання атрибут <a …. target=”…”> значення цього атрибуту – ім’я, яке попередньо вказали для даного фрейму)
Вбудовані фрейми задаються тегом <iframe> </iframe>
<iframe src="../files/109/…." width="…." height="…" scrolling="…" frameborder="…."></iframe>