HTML
1. Web-сторінки. Основні поняття
Web-сторінка є елементарною частиною Всесвітньої Павутини (World Wide
Web, www). WWW, у свою чергу, - одна з можливостей комп'ютерної мережі
Internet, що зв'язує комп'ютери по всьому світу.
Вся інформація www зберігається у вигляді окремих документів. В основі кожноготакого документа лежить текст, який може бути оформлений різнимишрифтами, стилями і т. п. У тексті можуть бути розміщені ілюстрації,таблиці, відео-кліпи, також можливе додавання фонової звукової доріжки.
Основна властивість документів у Всесвітній Павутині - наявність посилань наінші документи, що знаходяться в Мережі. Такі посилання називають гіперпосиланнями
(hyperlink), вони дозволяють при перегляді швидко переходити від одногодокумента до іншого, і тим самим пов'язують всі документи в єдине ціле.
Документи, про які йде мова, називаються web-сторінками. Вміст web -сторінок часто називають гіпертекстом.
Набір сторінок, об'єднаних загальною тематикою, називається сайтом (web site).
Зазвичай весь сайт цілком зберігається на одному комп'ютері мережі, званому web -сервером. Досить часто сервери містять кілька сайтів.
У кожного об'єкта, до якого можна отримати доступ через Internet (вЗокрема, у сайтів і окремих web-сторінок) є свою адресу в мережі,який називається інакше уніфікованим адресою ресурсу (Uniform Resource
Locator, URL).
Розглянемо приклад адреси для web-сайту: http://www.uni-vologda.ac.ru (сайт
ВДПУ). Перша частина адреси ( "http://") - назва протоколу, за якимпотрібно проводити передачу даних по Мережі. Протокол - набір правил, яківизначають, у якому вигляді дані повинні передаватися по мережі. Для різнихвидів даних використовуються різні протоколи. У разі web-сторінокзастосовується протокол передачі гіпертексту (HyperText Tranfer Protocol,
HTTP). Для передачі довільних файлів по Мережі використовується протоколпередачі файлів (File Transfer Protocol, FTP). Існують і іншіпротоколи (Gopher, Telnet і т. д.).
За ім'ям протоколу в адресу слід власне адресу, яку краще читатисправа наліво. Частина "ru" означає, що сайт знаходиться в Росії, вонаназивається доменом (група сайтів) першого рівня. Домен 1-ого рівня можебути географічним (ru - Росія, us - США, uk - Великобританія, ger -
Німеччина, ua - Україна і т. п.) або тематичними (com - комерційний сайт,edu - освіта, gov - уряд, net - мережеві служби, mil - військовесправу і оборона і т. п.). Всередині домену першого рівня знаходиться домендругого рівня, у нашому випадку - "ac" це значить, що сайт має відношеннядо освіти і науки. У принципі можливі домени третього і більш високихрівнів. Зліва в адресі міститься назва самого сайту ( "uni-vologda").
Іноді, для того щоб підкреслити те, що адреса належить до Всесвітньої
Павутині, додають частину "www".
Для перегляду web-сторінки використовуються спеціальні програми, які називаютьсябраузерами (web browser). Вони дозволяють завантажувати з Мережі для переглядусторінки із заданим адресою та переходити від документа до іншого погіперпосиланнями. Найбільш відомими є браузери Netscape Navigatorфірми Netscape і Internet Explorer фірми Microsoft.
2. Поняття мови HTML
Наша мета полягає в тому, щоб навчитися створювати власні сторінки для
WWW. Для цього доведеться познайомитися з правилами, відповідно доякими сторінки зберігаються на диску комп'ютера. Будь-яка сторінка представленау вигляді окремого текстового файла, який можна створити будь-яким текстовимредактором. Так як документ може містити не тільки текст, але йбезліч інших елементів (шрифтове оформлення тексту, ілюстрації і т.п.), то в текст вбудовуються спеціальні керуючі конструкції,звані тегами. Весь набір правил, за якими потрібно створювати файл з web -сторінкою і записувати окремі теги, називається мовою розміткигіпертексту (HyperText Markup Language, HTML). Браузери при відкритті файлуу форматі HTML здатні розшифрувати теги і показати сторінку в своєму вікнітак, як вона була задумана творцем. В операційній системі Windowsфайли web сторінок, повинні мати розширення "htm" або "html". При навчанніправилами HTML немає необхідності розміщувати наші сторінки на діючий сайтв Internet, достатньо зберігати їх у вигляді файлів на конкретній робочоїстанції або на сервері локальної мережі.
3. Структура файлу у форматі HTML
У першу чергу нам потрібно створити файл з розширенням "htm" або
"Html" і відкрити його для редагування в текстовому редакторі (працюючи під
Windows, можна використовувати стандартну програму "Блокнот").
Текст для HTML-документа набирається в тому вигляді, в якому його маєпоказати браузер, а при виділення фрагментів, які призначені длярозмітки документа (тегів), використовуються кутові дужки (знаки "більше" і
"Менше"), наприклад:.
Будь-який документ HTML починається з відкриваючого тега і закінчуєтьсявідповідним йому закриває тегом. Закриває тег відрізняєтьсявід закриває наявністю косою риси перед назвою тега. У мові HTML немаєвідмінностей між великими та малими літерами при записі тегів, однак прийнятозаписувати відкриває тег великими літерами, а закриває - малими. Частинадокумента, яка знаходиться в межах від відкриваючого до відповідногойому закриває тега, називається контейнером (to contain - містити що -небудь). Теги, у яких є що закриває і відкриває варіанти записуназиваються парними, а ті, які використовуються тільки в одному виді
(наприклад, тег), називаються непарні. Весь файл web-сторінки - це посуті справи один великий контейнер HTML (так як починається з ізакінчується).
Усередині контейнера HTML послідовно записуються два контейнери:
1. . . . (заголовок документа). Всередині цього контейнера записуються параметри, загальні для всієї сторінки. Для прикладу можна помістити сюди контейнер, що дозволяє розмістити текст для відображення в заголовку вікна браузера.
2. . . . (тіло документа). Цей контейнер містить все те, що повинен показати браузер всередині свого вікна при відкритті документа. Якщо документ містить лише текст, то цей текст потрібно записувати саме тут, якщо є інші елементи (графіка, таблиці, посилання і т. д.), то вони вставляються в текст за допомогою тегів, які будуть розглянуті пізніше.
Розглянемо найпростіший приклад тексту, який може бути використаний вяк HTML-документа:
Найпростіша web-сторінка
Те, що ви зараз читаєте у вікні браузера, записано в контейнері BODY усередині HTML-файлу.
4. Способи оформлення тексту в HTML
У першу чергу, відзначимо кілька особливостей поведінки більшостібраузерів при відображенні тексту, набраного всередині контейнера BODY.
1. Прогалини між словами в кількості більше одного замінюються одним пробілом
2. Символи переходу на новий рядок ігноруються, а точніше замінюються пробілом. Браузер виконує переклад рядка автоматично в той момент, коли рядок досягає правого краю вікна.
3. Якщо є необхідність вставити в будь-якому місці в тексті примусове переведення на новий рядок, то можна використовувати непарний тег. Він розриває поточний рядок, а текст, наступний за цим місцем в HTML-файлі, продовжує з нового рядка.
4. Крім тега розриву рядка є тег початку нового абзацу, (від слова paragraph - абзац). Відмінність його від полягає в тому, що тег абзацу крім розриву рядка вставляє нову порожню рядок. Зазвичай він використовується як непарний, хоча не заборонено ставити в кінці абзацу закриває тег.
5. Якщо потрібно зберегти всі пробіли та символи переведення рядка, які записані в HTML-файлі, то відповідну частину тексту можна помістити в контейнер. . . .
4.1. Логічні стилі для оформлення тексту
При відображенні тексту часто буває необхідно деякі фрагменти виділитиособливим чином. У тексті часто зустрічаються заголовки різного ступеняважливості, адреси електронної пошти та вузлів web, верхні і нижні індекси,цитати і т. п. Щоб виділяти ці фрагменти, їх потрібно поміщати впевні контейнери, кожний з яких призначений для однієївизначеної мети, або, іншими словами, визначає логічний стиль. Одині той же логічний стиль може відображатися на різних браузерах по -різному. Нижче перераховані деякі стилі.
1. Контейнер. . . . Сюди поміщають ті фрази, які служать заголовками першого рівня, тобто, найбільш важливі заголовки
(наприклад назви глав в книзі). Зовні вони найчастіше виглядають як текст збільшеного розміру і напівжирного. Крім цього контейнера є і контейнери H2, H3, ... H6, що дозволяють використовувати ще п'ять рівнів заголовків.
2. . . . . Цей контейнер дозволяє особливо оформити адресу (поштову, адреса сайту, електронної пошти і т. д.).
3. Контейнери STRONG (посилене виділення) і EM (від англ. Emphasis - наголос). Сюди поміщають текст, що містить важливі думки, терміни і т. п. Стиль STRONG зазвичай відображається браузерами з використанням напівжирного, а EM - курсивом.
4. Для запису текстів програм і тексту, введеного з клавіатури, можна використовувати три контейнери: CODE (код програми), SAMP (sample - приклад) і KBD (keyboard - клавіатура). Всі вони можуть відображатися по-різному, але спільне у них - використання моноширинних шрифту
(наприклад, Courier), всі букви в якому мають однакову ширину.
Такий шрифт дозволяє різним рядок не зміщуватися щодо один одного, символи з однаковим номером у рядку завжди знаходяться на одній вертикальній прямій.
5. Можливе виділення тексту за допомогою зменшеного і збільшеного шрифтів, для цього застосовуються контейнери BIG і SMALL.
6. Якщо фрагмент тексту повинен бути показаний як верхній індекс, то для його виділення використовується контейнер SUP, а для нижнього індексу -
SUB. Наприклад, для того, щоб записати y = x2, буде потрібно в HTML-текст помістити таку строчку: y = x2.
4.2. Фізичні стилі
На відміну від логічних, ці стилі не оформляють текст за його призначенням, авказують зовнішній вигляд символів, що відображаються браузером:
1. Курсив. Текст, який повинен бути виділений курсивом, поміщається в контейнер ....
2. Жирний - контейнер ....
3. Підкреслений - ....
4. Закреслений - ....
5. Шрифт друкарської машинки (моно) - ....< br>Якщо потрібно застосувати до тексту відразу дві фізичні стилю, то можна одинконтейнер вкласти в інший, наприклад: Жирний курсив.
4.3. Горизонтальне вирівнювання тексту
За замовчуванням браузери вирівнюють текст по лівому краю вікна. Іноді, тим неменше, потрібно помістити фрагмент тексту по центру або по правому краювікна. У першому випадку для центрування тексту (або інших об'єктів)досить помістити фрагмент всередину контейнера CENTER.
Якщо потрібно вказати ліве або праве вирівнювання, то можна використовуватидодаткові можливості тега, наприклад: Правевирівнювання. Тут додатковий елемент ALIGN тега P називаєтьсяатрибутом, а RIGHT - значенням атрибута. Взагалі кажучи, теги можутьмістити кілька атрибутів, розділених пробілами, бувають атрибути беззначень (наприклад:, в цьому тезі єатрибут NORESIZE, для якого не потрібно значення).
Крім значення RIGHT у атрибуту ALIGN є, очевидно, і значення LEFT.
Встановлене в тезі вирівнювання буде діяти протягом усьогоабзацу, до тих пір, поки не зустрінеться тег або наступний тег.
Атрибут ALIGN підтримується не тільки для тега абзацу, але і для всіх тегівшести заголовків (, ...), в результаті заголовок буде вирівняний повашим бажанням. Його дія поширюється тільки до відповідногозакриваючого тега (, ...).
4.4. Керування розміром шрифту
На нашому рівні володіння мовою HTML можливе управління розміром літертільки з використанням заголовків різного рівня, однак існуєможливість вказувати розмір шрифту явним чином.
У HTML розмір тексту задається цілим числом від 1 до 7 (1 - найдрібніший, 7 --самий великий). За замовчуванням основний текст сторінки має розмір 3. Длятого щоб задати інший основний розмір, потрібно використовувати тег
. У атрибуті SIZE цього тегу вказується новий розмір основногошрифту. Такий розмір буде встановлений для тексту, що знаходиться після тега
. Приклад: Це текст розміру 5.
При необхідності можна для частини тексту замовити інший розмір шрифту здопомогою тега у якого також є атрибут SIZE. Ця міткавикористовуватися і як парний (тоді розмір буде застосований до закриваєтега), і як непарний (розмір застосовується до наступного тега або).
Відмінність тега від полягає в наступному: у атрибуті SIZE тега можна вказувати збільшення або зменшення розміру шрифтущодо розміру основного тексту сторінки. Для цього використовуютьсязнаки «+» і «-». Наприклад, запис означає «встановити розміршрифту на 2 більше основного », а означає« на 1 менше ».
4.5. Управління кольором і гарнітурою шрифту
Крім розміру шрифту тег дозволяє задати колір символів і вибратигарнітуру (тобто спосіб накреслення букв із числа встановлених вопераційній системі варіантів). Для цього використовуються атрибути COLOR і
FACE.
В якості значення для атрибуту COLOR можна вказувати:
1. Одне зі стандартних назв кольору в лапках, а саме: BLACK, NAVY,
SILVER, BLUE, MAROON, PURPLE, RED, FUCHSIA, GREEN, TEAL, LIME, AQUA,
OLIVE , GRAY, YELLOW, WHITE;
2. Числовий код кольору, що складається з інтенсивностей трьох кольорів: червоного, зеленого і синього. Він задається в наступному вигляді:
COLOR = "# RRGGBB", де замість літер RR, GG і BB потрібно записувати кількість червоної, зеленої і синьої «фарби» відповідно. Ці кількості записуються у вигляді шістнадцятиричних чисел від 00 до FF (в десятковій системі це інтервал від 0 до 255). Наприклад, якщо потрібно отримати помаранчевий колір тексту, можна вказати COLOR = "# FF8000".
Як значення для атрибуту FACE в лапках вказують назву шрифту,наприклад: FACE = "Arial Cyr".
Приклад використання відомих нам атрибутів тега:
... ТЕКСТ ... .
4.6. Управління розбивкою тексту на рядки
Як нам вже відомо, браузер автоматично переносить текст на новурядок, як тільки текст досягне правого краю вікна. Для того щоб
«Достроково» зробити перенесення рядка ми можемо використовувати теги або.
У деяких випадках краще дозволити тексту вийти за межівидимої частини вікна, ніж дозволити йому опинитися в різних рядках. Щобзаборонити автоматичний перехід на новий рядок потрібно поміститивідповідний фрагмент тексту в контейнер NOBR. Всередині цього контейнераможна вказати ті місця, в яких все-таки можна перейти на новий рядок,це робиться за допомогою тега.
Приклад використання і:
Цей текст не може бути розбитий браузером на рядки автоматично. Ми дозволимо йому зробити перенесення тільки після цієї пропозиції. А цей фрагмент також заборонено розривати.
4.7. Вставка спеціальних символів у документ HTML
Деякі символи не може бути показана у вікні браузера, просто набравши їх утекстовому редакторі. До них належать, наприклад знаки «», оскількиїх браузер вважає символами початку і кінця тегів. Якщо все-таки виникланеобхідність показати такі спеціальні символи, то їх замінюють такийпослідовністю: спочатку пишуть знак амперсанда (&), потім буквенепозначення спецсимволів, а в кінці - крапку з комою. Для знаків «»використовуються літерні позначення «lt» і «gt» (less than - більше, ніж
...; Greater than - більше, ніж ... ). Наприклад якщо потрібно показати вбраузері «A> B», то в тексті HTML будемо записувати: «A
