Основные теги html. Параграфы.
Если ввести большой объем текста, то читать его будет очень неудобно, так как текст будет отображен сплошной кашей. Логичнее разбить его на параграфы, как в книге, которые повышают читабельность текста, и кроме того выделяют смысловые блоки.
Можно видеть, что по умолчанию текст каждого параграфа выводится в виде отдельного блока. Каждый из таких блоков отделяется от предыдущих и последующих блоков страницы пустой строкой. Однако отображение параграфа браузером может быть легко изменено посредством таблицы стилей.
Можно заметить, что параграфы можно записывать без закрывающего тега </p>, однако лучше этого не делать, в следующей версии HTML не позволит пропустить ни один не закрывающий тег.
В разных браузерах на разных мониторах с разным разрешением страница будет отображаться по-разному, поэтому не стоит форматировать при помощи добавления пустых строк и пробелов. Любое число пробелов заменяется одним.
Использование пустых параграфов <p> для вставки пустых строк является плохим стилем, вместо этого используйте тег <br/>.
Теги заголовков в html.
Заголовки определяются с помощью тегов от <h1> до <h6>. <h1> определяет заголовок самого большого размера, а <h6> определяет заголовок самого маленького размера.
<h1>Это заголовок первого уровня</h1>
<h2>Это заголовок второго уровня</h2>
<h3>Это заголовок третьего уровня</h3>
<h4>Это заголовок четвертого уровня</h4>
<h5>Это заголовок пятого уровня</h5>
<h6>Это заголовок шестого уровня</h6>
Заголовки автоматически отделяются дополнительными промежутками от остальных элементов документа.
Тег переноса строк в html.
Для переноса внутри параграфа используется тег <br>, который выполняет принудительный перенос строки.
Тег <br> не имеет закрывающего тега. Поэтому для совместимости с будущими версиями стандарта рекомендуется следующее написание тега <br/>
Тег горизонтальной линейки в html.
Разделять различные элементы можно при помощи горизонтальной линейки, для этого используйте тег <hr>.
Тег <hr> не имеет закрывающего тега. Поэтому для совместимости с будущими версиями стандарта рекомендуется следующее написание тега <hr/>. Для этого тега определен ряд атрибутов, но они являются устаревшими. И хотя их применение возможно, но консорциум W3C их использовать не рекомендует. Вместо них следует использовать таблицы стилей.
Основные теги и их описание в html.
<html> Определяет документ HTML <body> Определяет основную часть или тело документа <h1> -- <h6> Определяет заголовки с 1 по 6 <p> Определяет параграф <br> Вставляет единичный перенос строки <hr> Определяет горизонтальную линейку <!--> Определяет комментарий
Графічні об'єкти і гіперпосилання вставляння графічних файлів.
Графічні зображення, такі як фотографії, картинки, піктограми тощо, зберігаються на серверах в окремих файлах з розширеннями bmp, jpg, gif та іншими і відображаються на web-сторінці за допомогою тега <IMG> з параметрами:
<IMG SRC = "адреса графічного файлу"
ALT = "альтернативний текст"
ALIGN = "left"
WIDTH = 240 HEIGHT = 200>
Дія тега. Обов'язковим є лише перший параметр SRC. Альтернативний текст – це текст, який виводитиметься замість картинки, якщо браузер не може прийняти графічний файл або якщо режим відображення графіки вимкнено. Параметр ALIGN задає місце розташування картинки на екрані, а параметри WIDTH і HEIGHT – її розміри за шириною і висотою в пікселях або відсотках.
Зображення можна подати в рамці. Це рекомендують робити, якщо його використовуватимуть як гіперпосилання. Для створення рамки навколо зображення призначений параметр BORDER="товщина рамки в пікселях".
Праворуч і ліворуч від картинки, яку обгортає текст, можна зробити вільний простір:
HSPACE = "кількість пікселів". Можна створити вільний простір також над і під рисунком:
VSPACE = "кількість пікселів".
За допомогою тега IMG можна вставити також відеофільм, який запускатиметься в момент відкриття web-сторінки:
<IMG DYNSRC="адреса відеофайлу">.
Адреси файлів.
Для виклику віддалених файлів, тобто файлів, які є на серверах у мережі Інтернет, адресу записують із зазначенням назви протоколу доступу http і URL-адреси файлу, наприклад,
SRC = "http://www.polynet.lviv.ua/ourpage.htm".
Для доступу до файлів на локальному диску використовують протокол доступу file: SRC = "file:///диск:/шлях до файлу".
Наприклад, SRC= "file:///d:/mycatalog/mypage.htm". Назву протоколу можна інколи не писати,
наприклад, SRC = "c:/windows98/forest.bmp".
Якщо графічні чи інші файли є в тому ж каталозі, що основний html-файл, то достатньо зазначити лише назву файлу, наприклад, SRC = "myfoto.gif". Якщо файл є в деякому сусідньому каталозі images, то шлях до нього подають так: "../images/myfoto.gif". Отже, тег IMG може мати такий вигляд:
<IMG SRC="c:/windows98/forest.bmp" ALТ="Ліс">.
Вставка гіперпосилань.
Гіперпосилання є двох видів:
1) на файл;
2) на деяке місце на певній сторінці:
• початок сторінки (top),
• кінець сторінки (bottom),
• позначений текст.
Гіперпосилання вставляють за допомогою парного тега
<А параметр>...</А>, де параметр HREF = "адреса файлу". Тут замість адреси можуть бути слова top чи bottom чи текст, що є позначкою.
Гіперпосиланням може бути текст або картинка.
Розглянемо випадок, коли гіперпосиланням є текст. Нехай у реченні "Мене звуть Світлана" слово "Світлана" потрібно зробити гіперпосиланням на файл "file2.htm" чи "newinf.htm", що містить додаткові відомості про Світлану. Це роблять так:
Мене звуть <А HREF = "newinf.htm"> Світлана </А>.
У наслідок цього на web-сторінці слово Світлана буде підкреслене і зображене іншим кольором.
Параметри LINK, VLINK, ALINK тега BODY.
Колір Гіперпосилання визначають у тезі BODY параметрами:
LINK = "колір" Колір Гіперпосилання
VLINK = "колір" Змінює колір Гіперпосилання після першого його використання
ALINK = "колір" Змінює колір активізованого гіперпосилання
Як деяке графічне зображення зробити гіперпосиланням? Для цього в середині тега <А>...</А> потрібно використати тег IMG. Наприклад, щоб фотографія Світлани, що є у файлі "svitlana.gif", була в рамці й стала гіперпосиланням на файл newinf.htm, пишуть так:
<А HREF = "newinf.htm">
<IMG SRC = "svitlana.gif" BORDER = 8>
Клацнувши на web-сторінці на фотографії Світлани, відкриємо файл newinf.htm з додатковою інформацією про неї.
Будь-яку піктограму (картинку) можна вставити автономно чи як Гіперпосилання, оскільки вона зберігається також у графічному файлі.
Інший тип гіперпосилань – посилання в межах сторінки. Насамперед потрібно позначити місце на сторінці, куди відбуватиметься перехід. Якщо з деякого місця перехід має виконуватися на початок сторінки, то в те місце html-файлу, що відповідає точці посилання, вводять тег, який називається якорем #:
<А NAME= «#noчaток» </A>.
Аналогічно позначають деяке місце в кінці файлу:
<А NAME="#кінець” </A>.
Якір можна кинути в будь-якому місці тексту так:
<А NAME="#моя позначка" </A>.
Тепер на сторінці розміщують гіперпосилання на створені позначки (якори) так:
<А HREF= "#початок" або "#кінець" або "#моя позначка"> текст гіперпосилання </A>
Якщо одна сторінка займає декілька екранів, то в кінці сторінки можна вставити гіперпосилання для переходу на початок, наприклад, розглянемо фрагмент тексту:
А тепер можете перейти <А НRЕF = "#початок"> на початок </А> сторінки.
На екрані браузера отримаємо речення з гіперпосиланням:
А тепер можна перейти на початок сторінки.
Вставка звуку і відеозображення.
Важливо пам'ятати, що звукові файли мають розширення назв au, wav, mid, midi, га, а відеофайли – avi, mpeg. Щоб вставити звук чи відео, достатньо як значення параметра HREF у тезі гіперпосилання задати шлях до відповідного звукового чи відеофайлу, який вже є на диску, наприклад, так:
Тепер А HREF = "mysound.wav"> послухайте мене (150К) </А>.
Текст «послухайте мене (150К)» стане гіперпосиланням, клацнувши на якому можна почути привітання, застереження, деяку інформацію, яка була заздалегідь записана, наприклад, за допомогою програми Фонограф у файл "mysound.wav" обсягом 150 Кбайт. Оскільки звукові та відеофайли завантажуються повільно, рекомендують зазначати у гіперпосиланнях їхні обсяги в кілобайтах.
Щоб звуковий чи відеоефект повторювався декілька разів, у тезі <А> використовують параметр LOOP=n, де п -кількість повторень.
Щоб звук з деякого файлу пролунав у момент запуску сторінки, потрібно використати тег <BGSOUND SRC = "адреса звукового файлу">.
Інший спосіб – використайте тег <EMBED SRC="aдpeca звукового файлу"> і, крім звукового ефекту, отримаєте на екрані магнітофонну панель для регулювання тривалості й сили звуку, припинення звучання, продовження тощо.
Поняття про динамічні ефекти.
Динамічними називаються ефекти, коли графічні зображення на web-сторінці змінюються з часом, елементи сторінки змінюють розміри або навіть свій зміст після клацання над ними мишею, текст "біжить" уздовж екрана тощо.
Розглянемо ефект рухомого тексту у смузі, що має висоту HEIGHT= "висота в пікселях" і фон BGCOLOR ="колір фону".
Ефект створюється за допомогою парного тега <MARQUEE>...</MARQUEE>, а саме:
<MARQUEE BGCOLOR="green" HEIGHT = 40> Хай завжди буде Сoнцe! </MARQUEE>
Текст "Хай завжди буде сонце!" буде рухатись в смузі справа наліво, заходитиме за край екрана і з'являтиметься справа. Цей тег варто застосовувати до заголовків сторінки.
Ефект відбивання від країв екрана забезпечує параметр BEHAVIOR = "alternate", а зупинити рядок біля лівого краю екрана може значення цього параметра "slide".
Значення "right" параметра DIRECTION забезпечить ефект руху у протилежний бік.
Обмеження кількості проходів задається параметром LOOP = п, де п - кількість проходів.
Смугу можна відцентрувати за допомогою параметрів HSPASE і VSPACE.
Швидкість руху задає параметр SCROLLAMOUNT= п, де п – конкретне значення, яке вибирають з діапазону від 1 (повільно) до 10 (швидко).
Зауваження. Інші динамічні ефекти створюють за допомогою процедур з використанням мов програмування Visual Basic Script чи JavaScript. Немає єдиного стандарту мови HTML. Деякі теги чи їхні параметри не діють у всіх браузерах. Деякі теги і параметри для різних браузерів називаються по-різному. Якщо в написанні тега, назви параметра чи в його значенні допущено синтаксичну помилку, то тег чи параметр не діятимуть.
Література
В.А. Баженов та ін. Інформатика. Комп'ютерна техніка. Комп'ютерні технології. Підручник для студентів вищих навчальних закладів освіти. К.: Каравела, 2-ге видання, 2008 р.-640 с.
Дибкова A.M. Посібник. Інформатика. Комп'ютерна техніка. К.: Академвидав, 2007 р. - 416 с.
Г.Г. Злобін Основи інформатики, комп'ютерної техніки і комп'ютерних технологій. - К.: Каравела, 2007 р. - 240 с.
Руденко В.Д., Макарчук О.М., Пантдажоглу М.О. Практичний курс інформатики / За ред. Мадзігона В.М. – К .: Фенікс, 2000.
Я. М. Глинський Інформатика. Алгоритмізація і програмування. - Львів, Деол, 2005 р. - 257 с.
Кеннет Г. Основы сетей Windows./ Пер. с англ. - СПб.: Диалектика, 1999. - 368с.