Мова розмітки гіпертексту HTML (проект)

Частина 2

Вставка звукових файлів на сторінку

<bgsound src=»назва звукового файлу.mp3″> — відтворення звукового файлу при відкритті сторінки

<embed src=»назва звукового файлу.mp3″> — відтворення звукового файлу при відкритті сторінки, при цьому з’являється панель регулювання відтворення

<a href=»назва звукового файлу.mp3″> — посилання на звуковий файл (аналогічно до гіперпосилань)

 

Деякі кольори

#F0F8FF

aliceBlue

Блідо-голубий

#808080

gray

Сірий

#00FFFF

aqua

Синій

#008000

green

Зелений

#7FFFD4

aquamarine

Аквамарин

#ADFF2F

greenyellow

Жовто-зелений

#F0FFFF

azure

Блакить

#4B0082

indigo

Індиго

#F5F5DC

beige

Бежевий

#F0E68C

khaki

Хакі

#000000

black

Чорний

#FFE4B5

moccasin

Болотний

#0000FF

blue

Блакитний

#FFA500

orange

Оранжевий

#A52A2A

brown

Коричневий

#FFDAB9

peachpuff

Персиковий

#D2691E

chocolate

Шоколадний

#CD853F

peru

Коричневий

#FF7F50

coral

Кораловий

#FFC0CB

pink

Рожевий

#6495ED

cornflowerblue

Волошковий

#DDA0DD

plum

Сливовий

#FFF8DC

cornsilk

Темно-зелений

#2E8B57

seagreen

Морської хвилі

#DC143C

cornsilk

Малиновий

#FFF5EE

seashell

Морської піни

#00FFFF

cyan

Ціан (неоновий)

#A0522D

sienna

Охра

#00008B

darkblue

Темно-блакитний

#C0C0C0

silver

Сріблястий

#006400

darkgreen

Темно-зелений

#FFFAFA

snow

Сніжний

#BDB76B

darkkhaki

Темний хакі

#00FF7F

springgreen

Весняний зелений

#228B22

forestgreen

Лісовий зелений

#FF6347

tomato

Томатний

#FFD700

gold

Золотий

#40E0D0

turquoise

Бірюзовий

#F5DEB3

wheat

Пшеничний

#EE82EE

violet

Фіолетовий

#FFFFFF

white

Білий

#FFFF00

yellow

Жовтий

#000080

Navy

Ультрамарин

#9ACD32

yellowgreen

Жовто-зелений

Коди спецсимволів

«

Пряма лапка

&#34

&quot

³

Ступінь 3

179

&#179

&sup3

&

Амперсанд

&#38

&amp

µ

Знак «мікро»

181

&#181

&micro

Дефіс

&#45

 

Знак абзацу

182

&#182

&para

<

Знак «менший»

&#60

&lt

·

Крапка-маркер

183

&#183

&middot

>

Знак «більший»

&#62

&gt

¹

Ступінь 1

185

&#185

&sup1

Торгова марка

1&#53

&trade

»

Права лапка

187

&#187

&raquo

¢

Цент

&#162

&cent

¼

Одна четверта

188

&#188

&frac14

£

Фунт

&#163

&pound

½

Одна друга

189

&#189

&frac12

¤

Знак валюти

&#164

&curren

´

Знак множення

215

&#215

&times

¥

Йена

&#165

&yen

¸

Знак ділення

247

&#247

&divide

¦

Вертикальна межа

&#166

&brvbar

 

 

 

 

 

§

Знак параграфа

&#167

&sect

 

Табулятор

9

&#9

 

©

Знак копирайта

&#169

 

 

Кінець рядка

10

&#10

 

«

Ліва лапка

&#171

&laquo

 

Кінець сторінки

12

&#12

 

¬

Знак заперечення

&#172

&not

 

Пропуск

32

&#32

 

®

Знак «зареєстровано»

&#174

&reg

 

Нерозривний пропуск

160

&#160

&nbsp

°

Знак градуса

&#176

&deg

 

М’яке перенесення

173

&#173

 

±

Знак «плюс мінус»

&#177

&plusmn

 

Пропуск нульової ширини

8203

&#8203

 

²

Ступінь 2

&#178

&sup2

 

 

 

Мова розмітки гіпертексту HTML (проект)

Частина 1

Для виконання проекту учень (група учнів) обирає тему, заздалегідь визначену вчителем. За темою проекту створюється 3 веб-сторінки.

Необхідно:

1. Знайти всю необхідну інформацію щодо теми сайту (текстова, графічна, статистична, звукова тощо).

2. Створити папку, в якій буде розміщена сторінка та вся інформація, що буде наповнювати сторінку.

3. Кожна сторінка складається з частин, в яких розміщується певна інформація. Рекомендується до початку створення сторінки на мові HTML намалювати на окремому аркуші паперу структуру кожної сторінки у вигляді таблиці, розмістити інформацію у комірках таблиці.

4. Створити таблицю (використовуючи об’єднання комірок).

5. Наповнити сторінку інформацією, використовуючи теги та атрибути оформлення сторінки, тексту, окремих літер, таблиці, малюнків, гіперпосилань, біжучих рядків тощо. Ці теги та атрибути подаються нижче.

6. На останній сторінці розмістити інформацію про авторський колектив та автора кожної окремої сторінки.

7. Сторінки всіх учасників групи зібрати в одну папку, оформивши відповідним чином переходи (гіперпосилання) з однієї сторінки на іншу.

 

Створити в програмі Блокнот файл, зберегти його з розширенням 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>

&nbsp; – атрибут відступу на один символ (якщо потрібно зробити от ступ на декілька знаків – друкуємо декілька разів цей атрибут, використовуючи знак ; (крапка з комою))

 

Горизонтальні лінії

<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-сторінок: кількість точок монітора, встановлений розмір вікна браузера тощо, що призводить до спотворення виду сторінки. Рекомендується для розташування картинок і тексту використовувати таблиці.