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