|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Як написати веб-сторінку Як же приступити до створення веб-сторінки? Взагалі кажучи, головне - придумати і уявити собі те, що на цій сторінці повинно міститися. У цій книзі ми більше не будемо звертати вашу увагу на цей момент, однак варто пам'ятати, що наведені приклади є лише ілюстрацією можливостей, а вже як ці можливості застосовувати - вирішувати тільки вам. У будь-якому випадку ніколи не варто застосовувати той чи інший трюк тільки заради того, щоб його застосувати. Завжди виходите зі змісту, стилю оформлення та зручності користувача. Отже, почнемо. У принципі, навіть якщо написати простий текст в будь-якому текстовому редакторі, то він вже може відображатися програмою перегляду веб-стравіц. Наприклад, скористайтеся програмою Блокнот (Пуск> Програми> Стандартні> Блокнот) і напишіть: Домашня сторінка Сергія Сергєєва. Сергій Сергєєв - письменник гуморист, автор 20 оповідань. У житті великий любитель собак і комп'ютерних ігор. Тепер збережете цей файл з розширенням імені. Html.
Рис. 1.2. Простий текст, завантажений в броузер Теги HTML Користувач побачить цю сторіночку так, як показано на рис. 1.2. Це вже щось, хоча і не дуже привабливо: по-перше, зникло форматування тексту (абзаци), по-друге, - як-то нудно виглядає. Крім того, є такі строгі броузери, які взагалі не відобразять цей текст, якщо не побачать в ньому підтвердження того, що він написаний на мові HTML (мові гіпертекстової розмітки, на якій і пишуться веб-сторінки). Розширення. Html такий броузер може порахувати недостатнім підтвердженням, тому доведеться написати кілька додаткових рядків: <HTML> <BODY> Домашня сторінка Сергія Сергєєва Сергій Сергєєв - письменник-гуморист, автор 20 оповідань. У житті великий любитель собак і комп'ютерних ігор. </ BODY> </ HTML> Слова, укладені в кутові дужки є службовими словами мови HTML. Їх прийнято називати тегами (tags). Теги ніколи не відображаються під час перегляду сторінки - вони служать для управління оформленням. Існують різні транскрипції слова browser, що означає просто програму перегляду веб-страніп. Деякі пишуть "броузер", а інші - "браузер". Ми будемо дотримуватися другого варіанту. Тег <HTML>, який ви бачите в першому рядку, означає, що наш текст дійсно написаний на мові HTML. Більшість тегів мови HTML - парні. Вони обов'язково вимагає присутності закриває тега. Наприклад, в цьому прикладі в першому рядку стоїть відкриває тег <HTML>, а в останній - що закриває тег </ HTML>. Все, що розташоване між ними, вважається. HTML-документом. У мові HTML абсолютно не має значення, рядковими або прописними буквами записані теги. Можна написати </ HTML> або <html> - для броузера це одне і те ж. Проте прийнято писати теги HTML прописними літерами, щоб вони краще виділялися на тлі основного тексту. У розглянутому прикладі ви бачите ще один тег - <BODY>. Все, що розташоване між ним і його закриває тегом (</ BODY>), вважається "тілом" документа і відображається на екрані. HTML,-документи, крім "тіла", зазвичай містять ще і заголовок, в якому поміщена різна службова інформація. Заголовок розташовується між тегами <HEAD> і </ HEAD>.Наприклад, наступний код буде відображений в броузері так, як показано на рис. 1.3. <HTML> <HEAD> <ТIТLЕ> Домашня сторінка Сергія Сергєєва </ TITLE> </ HEAD> <BODY> Домашня сторінка Сергія Сергєєва. Сергій Сергєєв - письменник-гуморист, автор 20 оповідань. У житті великий любитель собак і комп'ютерних ігор. </ BODY> </ HTML>
Рис. 1.3. Найпростіша сторінка: текст і заголовок Зверніть увагу на те, що в заголовку вікна броузера також з'явилися слова "Домашня сторінка Сергія Сергєєва". Це сталося тому, що в розділі заголовка <HEAD> ми помістили цей текст між тегами <TITLE> і </ TITLE> Тепер згадаємо про те, що при відображенні в броузері наш текст втратив форматування. Це сталося тому, що броузер ігнорує переклад рядка. Проте якщо ви все ж хочете бачити свій текст з таким же розбиттям на рядки, яке було в редакторові Блокнот, потрібно укласти його між тегами <PRE> і </ PRE>: <HTML> <HEAD> <ТIТLЕ> Домашня сторінка Сергія Сергєєва </ ТIТLЕ> </ HEAD> <BODY> <PRE> Домашня сторінка Сергія Сергєєва Сергій Сергєєв - письменник-гуморист, автор 20 оповідань. У житті великий любитель собак і комп'ютерних ігор. </ PRE> </ BODY> </ HTML> Результат показаний на рис. 1.4. Вже краще, чи не так? Однак є два моменти, через які ми не радили б без крайньої необхідності вживати тег <PRE>. По-перше, як видно з малюнка, текст тепер відображається так званим моноширінним шрифтом, схожим на шрифт друкарської машинки. Більшість броузерів відображають текст,
Рис. 1.4. Сторінка, відформатована за допомогою тега <PRE> укладений між тегами <PRE> і </ PRE>, саме так. По-друге (і це головне), в тому, що броузер ігнорує розбиття тексту на рядки, є свій глибокий сенс. Наприклад, написаний рядок може не поміститися у вікні перегляду, і тоді, якщо б не було тега <PRE>, броузер автоматично переніс би її частину на наступний рядок, щоб користувачеві було зручно читати весь текст. Тег <PRE> не дозволяє цього зробити, і якщо рядок "вилізе" за межі вікна перегляду, то для її читання доведеться скористатися горизонтальною смугою прокрутки, що незручно і зазвичай дратує. Іншими словами, якщо ви використовуєте тег <PRE>, вам доведеться спеціально піклуватися про довжину рядків, а це скрутно, оскільки ніхто заздалегідь не знає, який розмір вікна броузера буде у користувача. Без тега <PRE> броузер поклопочеться про зручність перегляду сам (це буде проілюстровано далі на рис. 1.6). Для форматування тексту існує безліч спеціальних тегів. Зараз розглянемо найпростіший з них - тег <BR>. У тому місці, де він стоїть, відбувається примусовий перехід на новий рядок. (Причому в початковому записі можна продовжувати текст на цьому ж рядку - це не має значення.) Тег <BR> не має закриває парного тега, він уживається сам по собі. Ось як зберегти наше форматування тексту без використання тега <PRE> <HTML> <HEAD> <ТIТLЕ> Домашня сторінка Сергія Сергєєва. </ TITLE> </ HEAD> <BODY> Домашня сторінка Сергія Сергєєва. <BR> <BR> Сергій Сергєєв - письменник-гуморист, автор 20 оповідань. <BR> У житті великий любитель собак і комп'ютерних ігор. </ BODY> </ HTML> Результат показаний на рис. 1.5. Як бачите, форматування тексту збережено, шрифт залишився пропорційним і не перетворився на моноширинний, а крім того, якщо користувач чому-небудь буде переглядати сторінку в дуже вузькому вікні, він все одно побачить весь текст (рис. 1.6). І, нарешті, ще одна деталь: іноді броузери або інші програми обробки вимагають, щоб на початку HTML-документа обов'язково стояв службовий тег <! DOCTYPE>, у атрибутах якого повинна бути вказана версія мови і деяка інша інформація. Так що в коректному вигляді наша сторінка буде виглядати ось так:
рuc. 1.5. Сторінка з найпростішим
Рис. 1.6. Та ж сторінка в форматуванням тексту вузькому вікні броузера <! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.0 Transitional / / EN"> <HTML> <HEAD> <ТIТLЕ> Домашня сторінка Сергія Сергєєва </ TITLE> </ HEAD> <BODY> Домашня сторінка Сергія Сергєєва <BR> <BR> Сергій Сергєєв - письменник-гуморист, автор 20 оповідань. <BR> У житті великий любитель собак і комп'ютерних ігор. </ BODY> </ HTML> У даному випадку в першому рядку стоїть вказівка, що в документі використана версія 4.0 мови HTML. Надалі ми будемо орієнтуватися саме на неї, хоча наведений вище приклад з таким же успіхом міг би бути написаний і з використанням версії 3.2, і навіть більш ранньою. Проте HTML 4.0 надає такі можливості створення веб-сторінок, яких не було в попередніх версіях. І хоча деякі старі програми перегляду не в змозі адекватно відобразити сторінки, написані з використанням особливостей нової версії, все ж переважна більшість читачів сьогодні користуються новими браузерами. Ми будемо орієнтуватися саме на них. |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|