Загальні відомомсті
Гіпертекст — це електронний
документ, який містить гіперпосилання на інші документи.
Гіпертекстова технологія —
це інформаційна технологія, що базується на використанні гіпертекстів.
Web-сторінка —
це текст, написаний мовою HTML чи іншою, який призначений для перегляду
електронної інформації на екрані комп’ютера за допомогою браузера.
Web-дизайн — це сукупність
правил і рекомендацій, якими мають користуватися автори, якщо вони хочуть, щоб
їхні сторінки були інформативними і виглядали привабливо.
Тег — це команди
мови HTML. Теги бувають парними і одинарними. Теги позначають початок і кінець
області дії відповідної команди. Теги записують у кутових дужках. Тег, що
закриває область дії, має косу риску. Тег може містити параметри (або
атрибути.)
Теги
Структура HTML документів.
<HTML> — повідомляє
браузеру, що далі йде текст, який слід інтерпретувати як HTML документ.
<HEAD> — виділяють
заголовок документа, в якому міститься службова інформація.
<TITLE> ... </TITLE> —
виділяють назву сторінки, яка відображається в заголовку вікна браузера.
</HEAD>
<BODY> —
виділяють основну частину – “тіло” – web-сторінки.
<ADDRESS> . . . </ADDRESS> —
виділення контактної інформації – електронної або поштової адреси, телефону і
т.д. (контактна інформація може займати декілька рядків).
</BODY>
</HTML>
Управління кольором фону сторінки
<BODY bgcolor=”колір”> –
атрибут задає колір фону сторінки. Колір може бути заданий двома
способами: англійською назвою або 16-ковий кодом (RGB – код: для кожного
кольору виділено 2 розряди (256 значень) всього більше 1,6 млн. відтінків).
<BODY background=«назва файлу.gif»> –
атрибут заповнює сторінку графічним малюнком, графічний файл
потрібно розмістити в одній папці із сторінкою. Розширення графічного файлу має
бути gif або jpg (якщо в файла розширення jpeg тоді його потрібно вказати як
jpg).
Увага! Використовують
або кольоровий фон сторінки, або використовують фоновий графічний файл (два
види фону вказувати неможна!)
<BODY text=”колір ”> –
задає базовий колір шрифту для сторінки.
Розміщення інформації в таблиці
<TABLE> … </TABLE> –
тег, що описує таблицю.
аlign= – вирівнювання
таблиці по горизонталі (значення: Left, Center, Right).
width= — ширина таблиці (значення: число в
пікселях або число% у відсотках до ширини вікна
браузера).
height= — висота таблиці (значення: число в
пікселях або число% у відсотках до ширини вікна
браузера).
bgcolor= – колір
заливки елементів таблиці, задається стандартним чином.
border= – показує на
екрані сітку таблиці (значення: число –
товщина лінії), якщо параметр рівний 0 лінії не видно.
background=”URL” – адреса
файлу того, що містить малюнок (так само, як і для фонового малюнку
сторінки).
<TR> … </TR> –
визначають рядки таблиці.
<TD> … </TD> –
розбивають рядок на комірки.
align= – вирівнювання
тексту в комірці по горизонталі (значення: Left, Center,
Right).
valign= – вирівнювання
тексту в комірці по вертикалі (значення: Top –
по верхньому краю; Middle – по середині; Bottom – по
нижньому краю).
width= — ширина комірки (значення: число в
пікселях або число% у відсотках до ширини вікна
браузера).
height= — висота комірки (значення: число в
пікселях або число% у відсотках до висоти вікна
браузера).
colspan=n – об'єднання
комірок у рядку n – кількість об'єднуваних комірок.
rowspan=n – об'єднання
комірок в стовпці, n – кількість об'єднуваних
комірок.
cellspacing= – ширина
фронтальної грані сітки в пікселях (значення: число).
cellpadding= – ширина
порожнього простору навколо тексту в комірці (значення: число в
пікселях або число% у відсотках до ширини комірки).
bordercolor= – колір сітки таблиці,
задається стандартним чином.
bordercolordark= –
колір сітки з додатковим ефектом тривимірності, задається стандартним чином.
Форматування тексту в комірці може виконуватися
будь-яким способом тегами <FONT>, <P>.
Оформлення смислових частин сторінки
абзацами
<P>…</P> –
тег розбиває текст на параграфи (абзаци). Параграфи відділяються
порожнім рядком. Що закриває тег може не ставитися, тому що новий відкриваючий
тег параграфа має на увазі закриття попереднього параграфа.
<BR> – обриває рядок
і починає новий.
<NOBR>…</NOBR> – забороняє
перенос тексту на інший рядок, при довгих рядках у вікні браузера
з'являється смуга прокрутки – використовується для абревіатур, акронимів і
т.д..
<WBR>…</WBR> – дозволяє
розривати довгі слова (наприклад, при виведенні довгих медичних
термінів).
<!- - … - -> – тег
коментарю, текст в тегі на екран не виводиться, використовується авторами
для коментарів.
Тегі заголовків. Зміна розміру шрифту.
Вставка тексту один до одного
<Hn>…</Hn> –
тег керує розміром символів в заголовках (1≤n≤6), які
відображаються жирнішим шрифтом.
<BIG>...</BIG> – збільшує розмір
шрифту на 10% в порівнянні з базовим.
<SMALL>…</SMALL> – зменшує розмір
шрифту на 10% в порівнянні з базовим.
<PRE>…</PRE> –
позначає фрагмент тексту форматування якого здійснено наперед.Зручно
використовувати при виведенні програм на мовах програмування, при виведенні
тексту, що містить спеціальні символи, в деяких випадках замінює тег <NOBR>…</NOBR>
– атрибут
відступу на один символ (якщо потрібно зробити от ступ на декілька знаків –
друкуємо декілька разів цей атрибут, використовуючи знак ; (крапка
з комою))
Горизонтальні лінії
<HR> – тег
горизонтальної лінії, може бути засобом організації тексту і дизайну.
Запроваджується в будь-якому місці сторінки, автоматично виконує перехід на
новий рядок.
align=Left (Right,
Center) – вирівнювання лінії на сторінці.
size=n – товщина
лінії в пікселях (1n175) за умовчанням 2 пікселі.
color=”...” – колір
лінії задається назвою кольору або 16-ковим кодом див. Таблицю № 2.
width=n% – ширина
лінії у відсотках до ширини екрану.
noshade – атрибут без
параметра, показує об'ємні лінії, встановлюється за умовчанням.
shade – атрибут без
параметра показує контур лінії, якщо заданий колір, атрибут не
працює.
Параметри вирівнювання тексту
<Left> . ..</Left> – вирівнювання
тексту по лівому краю сторінки.
<Right> . ..</Right> – вирівнювання
тексту по правому краю сторінки.
<Center> ...<Center> – вирівнювання
тексту по середині сторінки.
<P align=Left >…</P> – align= Left – атрибут вирівнювання
тексту в межах параграфа [значення: Right, Center, Justify].
<BR> –
обриває рядок і починає новий.
clear=Left – вирівнювання
об'єктів щодо тексту [значення: None, Right, All].
Зміна зображення символів
<B>…</B> –
виділення напівжирним шрифтом.
<I>…</I>
– виділення курсивом.
<SUB>…</SUB> –
нижні індекси.
<SUP>…</SUP> –
верхні індекси.
Закреслення і підкреслення.
Виділення вставлених і видалених
фрагментів тексту
<S>…</S> –
закреслений текст
<U>…</U> –
підкреслений текст
<BLINK>...</BLINK> – мерехтіння в Internet Explorer не працює.
<DEL>…</DEL> –
виділяє текст (закресленням), який необхідно позначити як видалений
(застарілий).
<INS>…</INS> –
виділяє текст (підкресленням), який необхідно позначити як вставлений.
cite=URL – адреса джерела або
документа, в якому пояснюється причина змін.
datetime=2004-10-02 –
дата, коли були проведені зміни.
<ABBR>... </ABBR> –
використовується для виділення абревіатур.
<ACRONYM>...
</ACRONYM> – використовується при виділенні
акронімів (наприклад: і т.д.; і т.п.).
Завдання атрибутів окремим розділам
сторінки. Розмір символів
<BASEFONT > –
тег визначальний базовий стиль тексту сторінки.
size=n – установка фактичного
розміру шрифту£ (1 n £ 7), за умовчанням задається розмір 3.
size=k – встановлює відносний
розмір символів тексту (1£ nk £ 7).
color= – колір символів
face= – шрифт
<FONT>…</FONT> –
визначає стиль елементу сторінки, атрибути такі ж, як у тега <BASEFONT
.>.
<BDO .>…</BDO> –
дозволяє змінювати напрям тексту
dir=LTR – зліва направо (RTL –
справа наліво).
<BLOCKQUOTE>…</BLOCKQUOTE> –
позначає цитату, текст цитати розташовується з відступом від лівого краю вікна
і може використовуватися в самих різних випадках. Якщо необхідно, лапки
задаються явним чином
site=URL – адреса джерела
цитати, якщо вона з Інтернет.
<Q>…</Q> –
використовується для виділення цитати усередині абзацу.
Елемент рядок, що біжить
<MARQUEE> ... </ MARQUEE > –
рядок символів, що біжить.
bgcolor= колір –
колір фону (задається звичайним способом).
height= n – висота рядка в
пікселях (k% – висота рядка у відсотках до розміру вікна
браузера).
aling= . – вирівнювання (top –
по верхньому краю, middle – по центру, bottom –
по нижньому краю).
direction= . – напрям руху рядка (left, right).
behavior= . – поведінка рядка (scroll – безперервний рух, slide – вийшла і зупинилася,alternate – реверс)
hspase= . – зсув управо по
горизонталі в пікселях (значення: число).
vspase= . – порожній
простір вище і нижче за смугу в пікселях (значення: число).
loop= . – кількість
проходів рядка (значення: число).
scrollamount= . – швидкість руху
рядка (значення: число).
scrolldelay= . – часовий
інтервал між кроками в мілісекундах (значення: число), рядок
може рухатися ривками.
Створення списків на сторінці
<UL> … </UL> –
організація інформації у вигляді маркірованого списку.
type=circle –
тип маркера у вигляді кружка (disk – кільце, square –
квадратик).
<OL> … </OL> –
організація інформації у вигляді нумерованого списку.
start=”n” – номер з якого
починається нумерація
type=” … ” –
вид нумерації – A – заголовні латинські букви, а –
малі латинські букви, I - римські цифри заголовними
латинськими буквами, i – римські цифри малими
латинськими буквами, 1 – арабські цифри.
<LI> –
пункт списку і маркірованого і нумерованого.
Використання гіперпосилань на сторінці
<A>”Елемент”</A> – тег
гіперпосилання, ”Елемент” – об'єкт який грає роль посилання (текст
або малюнок);
href=URL – атрибут, вказуючий
адресу документа;
href=”http://www.netscape.com” –
посилання указує на документ що знаходиться мережі Інтернет;
href=”file:///C:/temp\text.txt” –
посилання указує на документ на локальному диску;
href=”myphoto.jpeg” –
посилання указує на документ що знаходиться в теці того ж рівня;
href=”mailto:kalamit@ecc.crimea.ua” –
викликає діалог відправки електронного повідомлення за вказаною адресою.
title=”Підпис до посилання” –
виводиться на екран при наведенні на посилання покажчика миші (якщо посилання
на великий документ або малюнок правила хорошого тону рекомендують указувати
тут розмір файлу);
Приклад: <A
href=”http://www.netscape.com”>”Сайт програми NetScape”</A>
Як посилання може використовуватися
малюнок:
<A
href=”http://www.mcp.com/que/”> <IMG SRC=”gifs.gif”> </A>
У тексті сторінки гіперпосилання
виділяються кольором, підкресленням, при наведенні на посилання покажчик миші
змінює вигляд. Тег BODY має атрибути, які дозволяють змінити
кольори посилань:
link=”.” – колір посилань, що
не використалися, на сторінці (задається стандартним способом);
vlink=”.” – колір посилань, що
використалися, на сторінці (задається стандартним способом);
alink=”.” – колір активного
посилання на сторінці (задається стандартним способом);
Гіперпосилання можуть використовуватися
і на одній сторінці або документі (дуже зручно, якщо документ великої). Для
такого документа необхідно описати і посилання і елементи, на які вони
указують.
<A name=”Lab1”><H2>”Мои
увлечения”</H2></A> – елемент (якір) –
розділ на сторінці, на який указує посилання.
<A href=”#Lab1”>”Увлечения”</A> –
посилання на розділ сторінки.
Вставка малюнка на сторінку
У Інтернет використовують графічні файли
формату JPG (JPEG) для розміщення картинок і фотографій і формату GIF для
розміщення динамічних зображень.
<IMG src=URL> – розміщення
картинки на сторінці, якщо картинка в тій же теці що і сторінка указується
її ім'я, наприклад: <IMG src=dog.jpeg> інакше указується
повна адреса:<IMG src=http://www.ecc.crimea.ua/dog.jpeg>
alt=”Підпис до
картинки” – виводиться на екран якщо у браузера відключений
режим показу картинок або картинка не знайдена;
title=”Підпис до картинки” –
виводиться на екран при наведенні на картинку покажчика миші;
align=”…” – позиціонування
картинки щодо тексту;
width=”…” – вертикальний
розмір картинки (значення: число) – задається в
пікселях;
height=”…” – горизонтальний
розмір картинки (значення: число) – задається в
пікселях, якщо заданий тільки один параметр, другий, – змінюється пропорційно
(зменшення розміру не скорочує часу завантаження).
Наприклад: <IMG src=dog.jpeg width=”300”
height=”200” alt=”Підпис до картинки”title=”Підпис до
картинки”>
Існує багато умов, що впливають на
перегляд Web-сторінок: кількість точок монітора, встановлений розмір вікна браузера
тощо, що призводить до спотворення виду сторінки. Рекомендується для
розташування картинок і тексту використовувати таблиці.
Комментариев нет:
Отправить комментарий