Мова HTML
Загальні відомомсті
Гіпертекст — це електронний документ, який містить гіперпосилання на інші документи.
Гіпертекстова технологія — це інформаційна технологія, що базується на використанні гіпертекстів.
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-сторінок: кількість точок монітора, встановлений розмір вікна браузера тощо, що призводить до спотворення виду сторінки. Рекомендується для розташування картинок і тексту використовувати таблиці.
Головна ДАЛІ
|