Тема 2 Правила побудови html-документів Основи Web-дизайну з курсу Сучасні Internet-технології, НУДПСУ
« Назад
Тема 2. ПРАВИЛА ПОБУДОВИ HTML-ДОКУМЕНТІВ
2.1. Визначення загальних параметрівПершим тегом, з якого слід починати опис HTML-документа, є тег <html>, який завжди починатє опис документа, а завершує опис тег </html>. Тобто тег <html> є тегом-контейнером для всієї HTML-сторінки. Сам документ є звичайним текстовим ASCII-файлом і може складатися із двох розділів - заголовка та змістовної частини. Розділ заголовка відкривається тегом <head> і закривається тегом </head>. Задачею заголовка є надання браузер інформації, необхідної для коректного відображення HTML-сторінки. Теги, що знаходяться всередині розділу заголовка (крім назви документа), на екрані не відображаються. Назву документа визначають за допомогою тегу-контейнера <title>. Наприклад: <title> Назва HTML-сторінки </title> Змістовна частина документа, що не містить фреймів, визначається тегом-контейнером <body>. Тобто весь текст та всі теги змістовної частини документа знаходяться між тегами <body> та </body>. Таким чином, для визначення простої HTML-сторінки досить написати: <html><head><title> Заголовок моєї Web-сторінки</title> </head><body> Зміст Web-сторінки </body></html> Відображення цієї сторінки у вікні браузера подане на рис. 2.1. Зазначимо, що у розділі заголовка досить часто використовується тег <meta>, за допомогою якого вирішують деякі типові задачі: 1. Визначення кодування тексту HTML-сторінки. Наприклад, визначення того, що кодування тексту HTML-сторінки, задане у найпоширенішому серед вітчизняних користувачів форматі windows-1251, можливо здійснити так: <META http-equiv=Content-Type content="text/html; charset=windows-1251"> 2. Визначення основних слів, що використовуються пошуковими системами. Наприклад, визначення слів “економіка” та “торгівля” можливо здійснити так: <META name="keywords" content="економіка, торгівля"> 3. Визначення опису HTML-сторінки у пошуковій системі. Наприклад: <META name="description" content = "сайт, присвячений економіці та торгівлі ">. 4. Відображення у браузері визначеної HTML-сторінки. Наприклад, для переходу на HTML-сторінку 1.html через 20 секунд після відображення поточної HTML-сторінки необхідно: <meta http-equiv="refresh" content="20;URL=untitled1.html"> Також необхідно зазначити, що тег <body> може мати ряд необов’язкових параметрів (див. табл. 2.1), які визначають форматування всієї HTML-сторінки. Таблиця 2.1 Параметри тегу <body>
Наприклад, для визначення документа з текстом зеленого кольору та відсутністю смуг прокрутки слід написати: <body text="green" scroll="0">
2.2. Форматування текстуФорматування тексту засобами HTML реалізується за допомогою спеціальних тегів. Усі теги форматування тексту використовуються тільки у розділі <body> і є парними. Найчастіше використовуються такі: - тег <b> - призначений для відображення тексту напівжирним шрифтом. Наприклад: <b>Це напівжирний шрифт</b>; - тег <i> - призначений для відображення тексту курсивом. Наприклад: <i>Це курсив</i>; - тег <u> - призначений для відображення тексту підкресленим. Наприклад: <u>Це підкреслений текст</u>; - тег <s> - призначений для відображення тексту перекресленими символами. Наприклад: <s>Це перекреслені символи</s>; - тег <sub> - призначений для відображення тексту у вигляді верхнього індексу. Наприклад: <sub>Верхній індекс </sub>; - тег <sup> - призначений для відображення тексту у вигляді нижнього індексу. Наприклад: <sup>Нижній індекс </sup>. - теги <sub> та <sup> зручно використовувати для зображення формул. Всі теги форматування тексту можуть бути вкладені один у інший. Це дозволяє проводити комбінований показ тексту. Наприклад, для того, щоб текст був набраний курсивом та був підкресленим, необхідно: <i><u>Приклад підкресленого курсиву</u></i> Порядок вкладення тегів один у інший значення не має. Наприклад, попередній приклад коректно записати і так: <u><i>Приклад підкресленого курсиву</i></u> Зміна зовнішнього вигляду тексту у вікні браузера при використанні наведених тегів форматування показана на рис. 2.2. Тег <font> - призначений для визначення параметрів шрифту. За допомогою цього тегу можливо визначити колір символів, їх розмір та тип шрифту. Зміна параметрів шрифту відбувається за допомогою змін параметрів тегу color, size та face. Параметр color. Дозволяє змінювати колір символів. Наприклад, визначення зеленого кольору символів можливо реалізувати так: <font color="green">Цей текст зеленого кольору/font> Зазначимо, що кольор тексту, визначений за допомогою цього тегу, має пріоритет над кольором, визначеним за допомогою тегу <body>. Тобто, якщо у тегу <body text="red"> визначено, що колір тексту червоний, а у тегу <font color="yellow"> заданий жовтий колір, то на всій HTML-сторінці текст буде червоний, але блок, обмежений тегом <font>, буде жовтого кольору. Параметр face. Дозволяє задати тип шрифту, яким браузер буде виводити текст. Для цього як значення параметра необхідно вказати назву шрифту. Наприклад, зображення тексту шрифтом Courier New можливо реалізувати так: <font face="Courier New"> Використовуємо шрифт Courier New</font> Зазначимо, якщо на комп’ютері користувача такого шрифту немає, то браузер буде використовувати стандартний шрифт. Крім того, можливо задати не одну, а декілька назв шрифтів, розділених комами. Якщо на комп’ютері користувача не буде першого шрифту, то браузер намагатиметься знайти шрифт за номером два і так далі. Наприклад: <font face="Arial,Helvetica, sans-serif">Використовуємо шрифт Arial, якщо такого нема, то Helvetica і так далі.</font> Параметр size. Дозволяє визначити розмір символів. Розмір задається у умовних одиницях від 1 до 7. Фактичний розмір умовних одиниць залежить від характеристик екрану комп’ютера користувача та настройок браузера. Цифра один відповідає найменшим символам, а 7 - найбільшим. Розмір символів при стандартних установках 3. Розмір символів можливо вказувати як у абсолютних, так і у відносних величинах. Синтаксис запису наступний: <font size=x>Визначення символів у абсолютних величинах</font> <font size=± x> Визначення символів у відносних величинах</font> У першому випадку х ¾ це цифра від 1 до 7, тобто величина символів у умовних одиницях. У другому випадку х може бути як додатнім, так і від’ємним числом. Причому знак + або – треба вказувати обов’язково. Величина х буде показувати на скільки умовних одиниць повинна змінитись величина символів відносно поточного значення. Наприклад, зображення тексту з розміром символів 7 та 1 можливо реалізувати так: <font size=7>Визначення символів розміром 7</font> <font size=1>Визначення символів розміром 1</font> Зменшення символів на одну умовну одиницю відносно поточного значення: <font size=-1> Зменшення символів на 1 умовну одиницю </font> Збільшення символів на одну умовну одиницю відносно поточного значення: <font size=+1> Збільшення символів на 1 умовну одиницю </font> Приклади використання параметрів face та size подані на рис.2.3. Тег <basefont> використовується для визначення параметрів шрифту, які будуть використовуватись як стандартних при перегляді HTML-сторінки. Параметри тегу <basefont> ті самі, що і для тегу <font>. Зміна параметрів <basefont> розповсюджується на ту частину HTML-сторінки, яка розміщена нижче тегу <basefont>. При сумісному використанні тегу <basefont> з <font> пріоритет має тег <font>. На відміну від <font> тег <basefont> не має закриваючого тегу. Його дія розповсюджується до кінця HTML-сторінки або до ще одного тегу <basefont>. Наприклад, визначення шрифту розміром 4 за допомогою тегу <basefont> можна здійснити так: <basefont size=4>Використання тегу basefont Зазначимо, що теги <font> та <basefont> належать до послідовних тегів, а тому не можуть включати у себе теги рівня блоку, наприклад, <table> або <tr>. 2.3. Використання тегів заголовківТеги заголовків (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) призначені для виділення на екрані користувача певних фрагментів тексту HTML-сторінки. Виділення тексту реалізується за рахунок зміни розмірів та "жирності" тексту. Тегу h1 відповідає найбільший розмір тексту, а h6 - найменший розмір. Особливістю даних тегів є вставка порожнього рядка до і після виділеного фрагменту тексту. Наприклад, для виділення у тексті HTML-сторінки трьох фрагментів тексту як заголовків 1, 3 та 6 рівнів необхідно: <body> Звичайний текст. <h1> Заголовок 1 рівня </h1> Звичайний текст. <h3> Заголовок 3 рівня </h3> Звичайний текст. <h6> Заголовок 6 рівня </h6> Звичайний текст.</body> Відповідне відображення HTML-сторінки у вікні браузера подане на рис. 2.4. Всі вказані теги є парними та можуть використовуватись з необов’язковим параметром align, який служить для горизонтального вирівнювання тексту. Можливі значення параметра align показані у табл. 2.2. Таблиця 2.2 Значення параметра align
Зазначимо, якщо параметр align не заданий, то використовується вирівнювання заголовку по центру вікна браузера. Розглянемо приклад визначення на HTML-сторінці чотирьох заголовків третього рівня з різними параметрами вирівнювання. Для цього у розділі необхідно записати: <body> Звичайний текст. <h3 align="center"> Заголовок вирівнюється по лівій стороні вікна браузера</h3> Звичайний текст. <h3 align="center"> Заголовок вирівнюється по центру вікна браузера</h3> Звичайний текст. <h3 align="right"> Заголовок вирівнюється по правій стороні вікна браузера</h3> Звичайний текст. <h3 align="justify"> Заголовок вирівнюється по ширині вікна браузера. Візуально відрізняється від left тільки у тому випадку, коли текст заголовку містить більше двох рядків тексту. </h3> Звичайний текст. </body> Відповідне відображення у вікні браузера подане на рис. 2.5.
2.4. Форматування HTML-документаТег <br> використовується для примусового переводу рядка. Необхідність використання даного тегу пояснюється тим, що при відображенні текстових документів перенесення тексту із одного рядка у інший відбувається автоматично та залежить у основному від розмірів шрифту та розмірів вікна браузера. При цьому переведення рядка може здійснюватись тільки за символами, що розділяють окремі слова. Розглянемо приклад запису виразів "Перший рядок" та "Другий рядок" у двох різних рядках. Відповідний HTML-код такий: <body> Перший рядок <br> Другий рядок </body> Парний тег <nobr> на відміну від тегу <br> використовується для заборони переводу рядка. Наприклад, для гарантованого розміщення у одному рядку виразу "Цей текст повинен відображатись у одному рядку" необхідно: <nobr> Цей текст повинен відображатись у одному рядку </nobr> Якщо даний текст не буде вміщуватись у одному рядку, то у вікні браузера з’явиться горизонтальна смуга прокрутки. Тег <p> призначений для розділу тексту HTML-сторінки на окремі абзаци. Даний тег є тегом-контейнером та може використовуватись з необов’язковим параметром align. Значення параметра align та наслідки його використання для абзаців ті самі, що і для заголовків, див. табл. 2.2. Зазначимо, що візуально у вікні браузера абзац буде відділятись від іншого тексту за допомогою порожніх рядків та можливої зміни горизонтального вирівнювання. Наведемо приклад використання тегу <p>: <body> Звичайний текст <p align="center"> Абзац з горизонтальним вирівнюванням - "по центру" </p> </body> Відповідне вікно браузера подане на рис. 2.6. Парний тег <center> призначений для горизонтального вирівнювання елементів HTML-сторінки по середені вікна браузера. Наведемо приклад його використання: <body> Звичайний текст <center> Текст з горизонтальним вирівнюванням - "по центру" </center> Звичайний текст </body> Зазначимо, що у специфікаціях чинних стандартів HTML тег <center> позначений як не бажаний для використання, хоча і підтримується практично всіма розповсюдженими браузерами. Тег-контейнер <pre> використовується для визначення попередньо відформатованого тексту. Текст, розміщений між тегами <pre> та </pre>, буде виведений у вікні браузера із збереженням деяких параметрів форматування, виконаних за допомогою текстових редакторів. Зазначимо, що у середині контейнера <pre> не можна використовувати деякі важливі та широко вживані теги. Тому використання цього тегу досить обмежене. Тег <hr> призначений для виведення у вікні браузера горизонтальної лінії, до і після якої вставляються порожні рядки. Необов’язкові параметри тегу <hr> та їх призначення наведені у табл. 2.3. Таблиця 2.3 Параметри тегу <hr>
Наприклад, для визначення лінії червоного кольору товщиною 2 пікселі, довжиною 400 пікселів, без рельєфу необхідно: <hr color="red" size=2 width=400 noshade>
2.5. Використання коментарів та спеціальних символівУ деяких випадках необхідно не показувати у вікні браузера частину HTML-коду сторінки, тобто "закоментувати" цей код. Для цього використовуються теги коментарів <!-- та -->. Наприклад: <!-- Цей текст не буде відображатись у вікні браузера --> Як відомо, при створенні HTML-сторінки повинні застосовуватись тільки символи, що входять до базової частини таблиці кодів ASCII. Проте деякі спеціальні символи ( наприклад, пробіл ) не входять до цієї частини таблиці. У випадку використання вказаних спеціальних символів необхідно застосовувати спеціальні HTML-коди (див. табл. 2.4.) Таблиця 2.4 Коди спеціальних символів
Контрольні запитання
З повагою ІЦ “KURSOVIKS”! |