|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
1.3. Як написати веб-сторінку Як же приступити до створення веб-сторінки? Взагалі кажучи, головне - придумати і уявити собі те, що на цій сторінці повинно міститися. У цій книзі ми більше не звертатимемо вашу увагу на цей момент, проте варто пам'ятати, що приведені приклади є лише ілюстрацією можливостей, а вже як ці можливості застосовувати - вирішувати тільки вам. У будь-якому випадку ніколи не варто застосовувати той або інший трюк тільки ради того, щоб його застосувати. Завжди виходите із змісту, стилю оформлення і зручності користувача. Отже, почнемо. В принципі, навіть якщо написати простій текст в будь-якому текстовому редакторові, то він вже може відображатися програмою проглядання веб-стравіц. Наприклад, скористайтеся програмою Блокнот (Пуск > Програми > Стандартні > Блокнот) і напишіть: Домашня сторінка Сергія Сергіїва. Сергій Сергіїв - письменник гуморист, автор 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>, у атрибутах якого повинна бути вказана версія мови і деяка інша інформація. Отже в коректному вигляді наша сторіночка виглядатиме от так:
мал. 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 надає такі можливості створення веб-сторінок, яких не було в попередніх версіях. І хоча деякі старі програми перегляду не в силах адекватно відобразити сторінки, написані з використанням особливостей нової версії, все ж таки переважна більшість читачів сьогодні користуються новими броузерамі. Ми орієнтуватимемося саме на них.
https://stol-kirov.ru/ | Познайте тайны катаны мурамаса и её жуткие легенды в нашей статье.
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
|