Опорний_кнспект

можливе оформлення прайс-листа, контактні дані, реквізити компанії, карта проїзду. Тобто візитна картка компанії в Інтернет.

Корпоративний сайт — повніший опис діяльності компанії, містить повноцінну інформацію про компанію - її власника, послуги і продукцію, новини і події в житті компанії. Відрізняється від сайту-візитки повнотою представленої інформації, часто містить різні функціональні інструменти для роботи із змістом (пошук і фільтри, календарі подій, фотогалереї, корпоративні блоги, форуми). Може бути інтегрований з внутрішніми інформаційними системами компанії-власника (КИЦЬ, CRM, бухгалтерськими системами). Може містити закриті розділи для окремих груп користувачів — співробітників, ділерів і ін.

Інтернет-магазин — сайтом є каталог продукції, де клієнт може зробити замовлення на потрібні йому товари. При цьому використовуються різні системи розрахунків:

-пересилка товарів післяплатою

-автоматична пересилка рахунку факсом

-розрахунки за допомогою пластикових карт.

Каталог продукції — сайт відображає докладний опис товарів або послуг, технічні і споживчі дані, сертифікати, відгуки експертів і так далі На таких сайтах розміщується інформація, яка не поміщається в прайс-лист.

Промо-сайт — мета даного сайту реклама конкретної торгової марки або продукту, розміщується повна інформація про бренд, і рекламні акції, що проводяться (ігри, конкурси, вікторини, і так далі).

Сайт-квест — Інтернет-ресурс, на якому проходять змагання по розгадуванню логічних загадок і різних видів ігор.

Сайт-блог — Авторський інтернет-ресурс, на якому користувачі залишають свої повідомлення і обмінюються думками. "Блоггер" - людина сайт, що має, для взаємної комунікації.

3. Етапи проектування сайту.

Давайте розглянемо докладніше з яких етапів полягає процес створення веб-сайту. Детальне розуміння процесу створення сайту дасть нам можливість визначити хто чим займається на кожному етапі і кого виходячи з цього називати веб-сервером- дизайнером.

1. Технічне завдання (ТЗ)

Виходячи з чіткого розуміння мети, для якої створюється сайт, об'ємів сайту, його функціональності задаються основні параметри візуального уявлення і структури сайту. Етап закінчується після затвердження технічного завдання замовником. Займається менеджер проекту.

2. Структуризація інформації (юзабіліті)

Сюди входять форма і організація вмісту сайту. Включає широкий ряд питань від продумування логічної структури веб-сервером сторінок до вибору найбільш зручних форм подачі інформації. Займається дизайнер, менеджер проекту.

3. Графічне оформлення

У графічному редакторові компонуються візуальне простори сайту за допомогою графічних елементів як прикраса або навігація. Власне дизайном сторінки є графічний файл. Виконується дизайнером.

4. Верстка

На цій стадії графічне зображення нарізається на окремі елементи і з використанням технологій HTML і CSS трансформується в код, який можна проглядати за допомогою браузера. Виконується кодером, програмістом.

5. Вебмастерінг

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

Лекція 3

Тема: Основи мови HTML

Мета: визначити базові конструкції мови, структуру HTML –документа, вивчити основні теги для сторення HTML –документа.

План

1.Базові конструкції мови HTML

2.Структура HTML документа.

Ви вже переконалися, що за допомогою автоматизованих засобів, які надають у розпорядження користувача служби безкоштовного хостинга, створювати та адмініструвати веб-сайти надзвичайно просто. Крім того, це не потребує особливих знань із веб-дизайну. Однак у такому випадку ваші можливості обмежені, і ви не зможете створити сайт за своїми уподобаннями. Щоб мати змогу це зробити, потрібно опанувати спеціальну мову, призначену для розробки веб-сторінок. Тоді перед вами відкриються захоплюючі можливості щодо створення свого власного віртуального світу!

На даній лекції ви ознайомитеся із принципами створення веб-сторінок за допомогою мови HTML, навчитеся визначати структуру сторінок, розміщувати і форматувати текст, працювати з таблицями та фреймами, пов'язувати створені файли за допомогою гіперпосилань. Виконавши дві запропоновані практичні роботи, ви власноруч створите веб-сторінки — можливо, перші у вашому житті.

Для швидшого знайомства з HTML-кодом можна проглядати вподобану вам сторінку в режимі "В виде HTML". Для цього в браузері треба вибрати пункт меню "Вид" - "В виде HTML". Після цього відкриється нове вікно з початковим текстом HTML-кода. Проглядаючи готовий код HTML, ви дізнаєтеся, як теги мови застосовуються досвідченішими програмістами. Крім того, це один із способів подолання різних проблем, що виникають час від часу. Для швидкого створення простого сайту досить скористатися звичайним Блокнотом, не забуваючи зберігати результат, а для перегляду необхідно зберегти початковий текст з розширенням

.html, а потім проглянути збережений файл браузером, наприклад Internet Explorer, використовуючи команду "Відновити".

1. Базові конструкції мови HTML

Основною перевагою та особливістю веб-сторінок є те, що інформація, розміщена на них, має вигляд гіпертексту.

Гіпертекст — це текст, у який вбудовані спеціальні коди, що задають форматування тексту, наявність у ньому ілюстрацій, мультимедійних вставок та гіперпосилань.

Ці коди визначені у мові програмування HTML (Hyper Text Markup Language — мова гіпертекстової розмітки). Тобто веб-сторінка фактично є документом у форматі

HTML.

Процес вставляння в текст кодів HTML називають розміткою.

Браузери підтримують мову HTML і під час завантаження веб-сторінки читають

наявні у ній коди та виконують задані за їх допомогою операції (форматують текст, вставляють у нього зображення тощо). Таким чином, вигляд сторінки у вікні браузера залежить від того, які коди містяться у її документі.

Поняття тегу

Коди мови HTML, за допомогою яких розмічають вихідний текст, називають

тегами.

Під час відображення документа в браузері самих тегів не видно, але вони впливають на зовнішній вигляд документа. Усі теги починаються із символу < і закінчуються символом > — їх називають кутовими дужками.

Після відкритої кутової дужки розміщують ключове слово, яке вказує на призначення тегу. Регістр у назвах тегів не має значення, хоча загальновживаними є великі літери.

Приклади тегів HTML: <TITLE>, <BODY>, <TABLE>, </A>, <IMG>, </CENTER>.

Зазвичай тег впливає на певний фрагмент документа, наприклад на абзац. У таких випадках використовують пару тегів (відкриваючий і замикаючий). Перший із них задає ефект, а другий — припиняє його дію. Замикаючий тег починається із символу / (слеш).

Приклади парних тегів: <HTML></HTML>,

<В></В>,

<HEAD></HEAD>,

<НЗ></Н3>,

<ADDRESS></ADDRESS>,

<LI></LI>.

Деякі теги задають разовий ефект у місці своєї появи, тоді замикаючий тег не потрібен.

Приклади одинарних тегів:

<BR>, <HR>, <МЕТА>, <BASEFONT>, <FRAME>, <INPUT>.

Якщо між кутовими дужками помилково вказане ключове слово, яке відсутнє в мові HTML, то весь тег буде проігноровано.

Відкриваючі теги можуть містити атрибути, які впливають на ефект, створюваний тегом. Атрибути — це додаткові ключові слова, відокремлені від основного ключового слова тегу та один від одного символами пробілу.

Для деяких атрибутів слід задавати значення, яке відділяють від імені атрибута символом =. Значення атрибута беруть у лапки, але в багатьох випадках їх можна і не ставити. Замикаючі теги атрибутів не містять.

Приклади тегів з атрибутами:

<BODY BGCOLOR="#000000" TEXT="#FFFFFF" BACKGROUND="rain.gif"> <OPTION SELECTED>

<FRAME SCR="file.html" NORESIZE>

Для того щоб через деякий час ви або інша людина, яка переглядатиме код HTML, могла краще його зрозуміти, у текст вставляють примітки — коментарі. Вони починаються зі спеціального тегу <! —. Будь-який записаний після нього текст браузер розглядає як коментар і не відображає під час відтворення документа.

Закінчують коментар тегом —>. Коментар може містити будь-які символи, крім >, а отже, не може включати в себе теги.

2. Структура HTML-документа

HTML-документ складається з основного тексту і тегів розмітки. Фактично це звичайний текстовий файл, для створення і редагування якого можна використати будь-який текстовий редактор. Зазвичай HTML-документи містяться у файлах із розширенням .htm або .html.

Документ HTML має чітко визначену структуру.

•Починається з тегу <HTML> і закінчується відповідним йому тегом </HTML> , Така пара тегів повідомляє браузеру, що це HTML-документ.

•Містить два розділи — заголовків і тіла документа (розміщуються саме в такому порядку). Розділ заголовків помічений тегами <HEAD> і </HEAD> та містить Інформацію про документ загалом. Зокрема, він повинен містити в собі теги <TITLE> та </TITLE>, між якими розміщено текст, що відображатиметься в заголовку вікна браузера. Крім цього, у розділі заголовків може міститися тег <МЕТА>, призначений для технічного опису документа (це інформація для пошукових програм), а також тег <STYLE> для опису стилів (наборів параметрів форматування), використаних у документі.

•Сам текст документа міститься в його тілі, яке розташоване між тегами

<BODY> та </BODY>.

Отже, основну структуру HTML-документа визначають чотири парні теги. Їхня наявність передбачена у всіх таких документах;

<HTML>

<HEAD>

<ТІТLЕ>Заголовок документа</ТІТLЕ>

</HEAD>

<BODY>

Текст, що відображається на екрані

</BODY>

</HTML>

Для того щоб розбити текст на логічні частини, використовують заголовки. Мова HTML підтримує шість рівнів заголовків документів. Вони позначені тегами від <Н1>...</Н1> до <Н6>...</Н6>. На екрані ці заголовки відображаються різними шрифтами (зазвичай напівжирними). Хоча в мові HTML є теги форматування, які можуть змінювати зображення шрифту, користуватися ними для заголовків не рекомендовано.

Текст, що міститься всередині тегу заголовка, відображатиметься відповідно до його рівня. Найвищий рівень має заголовок Н1, найнижчий — Н6. Текст заголовка може бути вирівняний по центру, за правим а б о лівим краєм — для цього використовують атрибут A L I G N .

Наприклад:

< Н 2 ALIGN=center \ r i g h t \ l e f t > T e к с т з а г о л о в к а </Н2>

(тут символ \ означає можливість вибору між значеннями center, right або left). На рис. 3.1 показано заголовки різних рівнів.

Рис. 3.1. Заголовки різних рівнів

Для визначення звичайних абзаців у мові HTML використовують теги <Р> і </Р>. Текст, розміщений між ними, власне і буде одним абзацом. При цьому слід пам'ятати, що всі «зайві» пропуски між словами і переходи на новий рядок під час відтворення HTML-документа браузер ігнорує. Коли браузер відтворює вебсторінки, абзаци відділяються один від одного за допомогою відступів.

У разі переходу на новий рядок без створення абзацу використовується одинарний тег <BR>. Розділювачами в тексті можуть також бути горизонтальні лінії, які візуально відділяють різні частини документа, — їх створюють за допомогою одинарного тегу <HR>.

Кольори та зображення для всього документа і його тла задають за допомогою тегу <BODY>. Він може мати такі атрибути:

•BACKGROUND="URL" — замість URL вказують адресу малюнка, який має бути тлом для сторінки;

•BGC0L0R=значення — задає колір, який має бути фоновим для документа;

•ТЕХТ=значення — задає колір тексту;

•LINK=значення — визначає колір гіперпосилань у документі;

•ALINK=значення — задає колір гіперпосилань під час клацання;

•VLINK=значення — задає колір переглянутих гіперпосилань.

Браузер перетворює текст HTML-документа під час його виведення на екран, тобто ігнорує зайві пропуски, символи табуляції, символи кінця рядка, форматує текст відповідно до використаних тегів. Проте іноді виникає потреба у тому, щоб помістити в документ відформатований текст, для якого браузер повинен зберегти всі пропуски, навіть якщо кілька пропусків розміщені один за одним, знаки переносу на інший рядок, табуляції та інші символи форматування. Для цього використовують тег <PRE>TeKCT</PRE>. Втім, якщо браузер зустріне в такому тексті теги розмітки, вона буде відповідним чином застосована.

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

Перерахуємо основні теги фізичного форматування.

1.Тег <B> відображає текст напівжирним шрифтом. В більшості випадків рекомендується для цих цілей використовувати тег логічного форматування <STRONG>:

Це <B> напівжирний </B> шрифт.

2.Тег <I> відображає текст курсивом. Для більшості випадків замість цього тега рекомендується використовувати теги <EM>, <VAR> або <CITE>, оскільки вони краще відображають призначення тексту, що виділяється:

Виділення <I> курсивом </I>

3. Тег <TT> відображає текст моноширинним шрифтом. Аналогом цього тега є теги логічного форматування <CODE>, <SAMP>, або <KBD>:

Це <TT> моноширинний </TT>

4.Тег <U> відображає текст підкресленим шрифтом. Замість цього тега рекомендується використовувати теги

<STRONG> або <CITE>:

Приклад <U> підкреслення </U> тексту.

5.Теги <STRIKE> і <S> відображають текст, перекреслений горизонтальною лінією. Аналогом цих тегів является<DEL>:

Приклад <STRIKE> закресленого тексту <STRIKE>.

6.Тег <BIG> виводить текст шрифтом більшого розміру, чим непомічена частина тексту. Замість нього можна використовувати тег <STRONG> або теги заголовків :

Шрифт <BIG> більшого </BIG> розміру.

7.Тег <SMALL> виводить укладений в нього текст шрифтом меншого розміру, в порівнянні з рештою частини тексту:

Шрифт <SMALL> меншого </SMALL> розміру.

8.Тег <SUB> друкує текст нижче за рівень рядка і виводить його шрифтом меншого розміру. Рекомендується для друку математичних індексів:

Приклад шрифту для <SUB> нижнього </SUB> індексу.

9.Тег <SUP> друкує текст вище за рівень рядка і виводить його шрифтом меншого розміру. Цей тег можна використовувати для завдання ступенів чисел:

Приклад шрифту для <SUP> верхнього </SUP> індексу.

Зберемо всs приклади в один лістинг.

<HTML>

<HEAD>

<TITLE>Фізичне форматування тексту</TITLE>

</HEAD>

<BODY>

Це <B>напівжирний</B> шрифт.<BR> Виділення <I>курсивом</I><BR>

Це <TT>моноширинний</TT> шрифт.<BR> Приклад <U>підкресленого</U> тексту.<BR>

Приклад <STRIKE>закресленого</STRIKE> тексту.<BR> Шрифт <BIG>більшого</BIG> розміру.<BR>

Шрифт <SMALL>меншого</SMALL> розміру <BR> Приклад шрифту для <SUB>нижнього</SUB> індексу. <BR> Приклад шрифту для <SUP>верхнього</SUP> індексу. <BR>

</BODY>

</HTML>

Мал.1. Приклади фізичного форматування тексту

Теги фізичного форматування можуть бути вкладеними один в іншій. В цьому випадку важливо стежити за тим,

щоб теги одного призначення розташовувалися усередині тегів іншого призначення, наприклад:

<B><I>Этот текст буде виділений жирним курсивом.</I></B>

Перш ніж продовжити перерахування тегів фізичного форматування, поговоримо про завдання кольору.

2. Теги логічного форматування тексту

Перерахуємо основні теги логічного форматування і приведемо приклади їх використання.

1.Тег <ACRONYM> використовують для відмітки абревіатур, акронімів (акронім - вимовне слово, що складається з початкових букв словосполучення). Цей тег використовується з параметром TITLE, в якості якого можна вказати ―розшифровку‖ акроніма. Ця ―розшифровка‖ з'являється на екрані, коли курсор розташовується на акронімі. Приведемо приклад використання цього тега:

Рис.1. Приклад тега <ACRONYM>

2.Тег <CITE> використовують для відмітки цитат або назв книг і статей, посилань і так далі Такий текст зазвичай виводиться курсивом. Приклад використання цього тега:

<CITE>Ваш шанс </CITE>

єодна з найбільш популярних міських газет м. Суми.

3.Тег <CODE> відзначає свій текст як невеликий фрагмент програмного коду, який виводиться моноширинним шрифтом.

Зауваження. Моноширинним називається такий шрифт, у якого розміри символів однакові, тобто кожен символ має одну і ту ж ширину, яка не залежить від його зображення. Таким шрифтом є, наприклад, шрифт Courier.

Використання цього тега нічим не відрізняється від застосування тега <CITE>. Приклад простого оператора мови програмування Паскаль:

<CODE> WriteLn(‘Hello, World!’); </CODE>

4.Тег <DEL> відзначає текст як видалений, перекреслюючи його. Приклад використання:

<DEL> Цей текст перекреслений.</DEL>

5.Тег <DFN> відзначає свій текстовий фрагмент як визначення (DeFinitioN - визначення). Цим тегом можна відзначити термін, що перший раз зустрічається в тексті. Такий текст відображатиметься курсивом:

<DFN> Internet Explorer </DFN> - це популярний WEB–браузер.

6.Тег <INS> відзначає свій текст як вставку (INSertion - вставка). Відображається підкресленим шрифтом:

<INS> Цей текст є вставкою і буде підкреслений. </INS>

7.Тег <EM> (Emphasis – виділення, підкреслення) використовують для виділення важливих фрагментів тексту, які відображається курсивом, наприклад:

Приклад виділення <EM> окремих слів </EM> тексту.

8.Тег <KBD> відзначає текст як що вводиться з клавіатури, відображається моноширинним шрифтом:

Щоб запустити текстовий редактор, надрукуйте: <KBD> notepad </KBD>.

9.Тег <SAMP> відзначає текст як зразок (SAMPle – зразок, приклад). Використовується для відмітки результатів, що видаються програмами, також для виділення декількох символів моноширинним шрифтом:

Врезультаті роботи програми буде надруковано:

<SAMP> Hello, World! </SAMP>

10.Тег <STRONG> використовується для відображення важливих елементів тексту, відображається напівжирним шрифтом:

Місто Суми розташоване на річці <STRONG> Сумка </STRONG>

11. Тег <VAR> відзначає імена змінних програм, відображається курсивом:

Задайте значення змінної <VAR> N </VAR>

Мал.2.Приклади логічного форматування тексту

На малюнку видно, як при наведенні покажчика миші на текст, відмічений тегом <ACRONYM>, видається підказка. Вийшло?.. Швидше за все, немає. У вас, напевно, рядки в браузере розташовуються одна за одною, а не з нового рядка, як показано на малюнку 2. І це не дивлячись на те, що в тексті HTML -документа кожен рядок тексту розташовується з нового рядка!

Річ у тому, що браузер ігнорує переходи на новий рядок в тексті HTML -документа і сам

здійснює перехід на новий рядок залежно від розміру вікна, в якому виводиться Web-

страница. Для того, щоб змусити браузер здійснити перехід на новий рядок, потрібно скористатися тегом BR. Таким чином, текст, що знаходиться у файлі PR1.HTML може бути наступним:

<HTML>

<HEAD>

<TITLE> Логічне форматування тексту </TITLE>

</HEAD>

<BODY>

<ACRONYM TITLE="Машинобудівний коледж СумДУ">МКСумДУ</acronym> - провідний коледж міста Суми<br>

<CITE>Ваш шанс</CITE>

є одній з найбільш популярних міських газет м. Суми.<BR> <DEL>Этот текст перекреслений.</DEL><BR>

Приклад простого оператора мови програмування Паскаль: <BR> <CODE> WriteLn(‗Hello, World!‘) </CODE><BR>

<DFN>Internet Explorer</DFN> - це популярний WEB–браузер.<BR> <INS>Цей текст є вставкою і буде підкреслений.</INS>;<BR> Приклад виділення <EM>отдельных слов</EM> тексту.<BR>

Щоб запустити текстовий редактор, надрукуйте: <KBD>notepad</KBD>.<BR> В результаті роботи программмы будуть надруковано:

<SAMP>Hello, World!</SAMP><BR>

Місто Суми розташоване на річці <STRONG>Сумка.</STRONG><BR> Задайте значення змінної <VAR> N </VAR>.<BR>

</BODY>

</HTML>

Ви, напевно, звернули увагу на те, що деякі теги дають однаковий результат. Виникає питання: навіщо потрібно було придумувати таку різноманітність тегів форматування? Відповідь полягає в їх назві. Дивлячись на HTML-документ, програміст (користувач) по тексту повинен представляти, для чого використовується той або інший фрагмент. Досягти цього можна швидше, якщо запам'ятовувати слова, що мають сенс, чим безглузді букводрукувальні.

3. Способи завдання кольору і теги фізичного форматування <FONT> і <BASEFONT>.

Умові HTML колір може визначається двома способами:

числами в шістнадцятиричній системі числення. Колірна система базується на трьох основних кольорах – червоному, зеленому і синьому – і позначається RGB (по початкових буквах слів Red – червоний, Green – зелений, Blue - синій). Це означає, що кожен колір задається кількістю червоного, зеленого і синього кольору в нім. Ця кількість визначається значенням від 00 до FF (від 0 до 255 в десятковій системі числення). Наприклад, конструкція #FF0000 задає червоний колір, а #FFFFFF – білий (символ # говорить про те, що числа представляються в шістнадцятиричній системі числення);

мнемонічними позначеннями. Можна використовувати назви квітів, наприклад: Red (червоний), White (білий) і так далі.

Продовжимо перерахування тегів фізичного форматування.

Тег <FONT> дозволяє змінити шрифт, який використовує браузер для проглядання Web-сторінки. Це перший тег, для якого ми розглянемо параметри, що є у цього тега. Це:

FACE – задає назву шрифту, яким буде виводиться текст. Якщо такого шрифту немає, то значення параметра ігнорується. Можна задавати імена декількох шрифтів; в цьому випадку вони розділяються комами;