2015-08-21
470
Насамперед необхідно внести фрагмент коду, за допомогою якого буде оголошений тип документа та ідентифікована версія мови. Це здійснюється за допомогою стандартної узагальненої мови розмітки, і відоме як оголошення DOCTYPE. Наприклад, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">, є вбудований у документ процесора HomeSite.
Для ознайомлення з HTML-кодом Web-сторінки можна переглянути вже створені Web-сторінки.
Для того, щоб переглянути код HTML, потрібно завантажити програму Web-браузера, вибрати і відкрити Web-сторінку, HTML-код якої цікавить, відкрити меню „Вид”, вибрати елемент „У вигляді HTML”.
< html >
Після оголошення DOCTYPE створення документа починається з кореневого елемента. Кожна сторінка починається з дескриптора < html >. Цей дескриптор описує документ як Web-сторінку, виконану у форматі HTML. Елемент html повинен мати відкриваючий та закриваючий теги – <html > і </html >. Цей елемент також є вбудований у документ процесора HomeSite.
< head >
Елемент < head > містить всі елементи, які необхідні для відображення та виконання документа, але які не відображаються у вікні браузера. Щоб створити розділ < head >, необхідно додати теги < head > безпосередньо за відкриваючим тегом < html >. У елемента head немає обов’язкових атрибутів, а є тільки відкриваючий та закриваючий теги. Всередині розділу head можна розміщати декілька дескрипторів: title, meta, script, style, link.
< title >
Дескриптор title є єдиним обов’язковим елементом розділу head. У стрічці заголовка браузера відображається будь-який текст, що міститься у цьому елементі, разом з назвою браузера, яка додається в кінці тексту. Наприклад, <title>npe.com - Кафедра НПЕ, ІТРЕ, „Львівська політехніка</title>.
<meta>
Цей елемент використовується для оголошення кодування документа. Кодування документа означає установлення набору символів для сторінок. Зазвичай застосовують набір символів ISO 8859-1. Зараз існує кодування UTF-8 (Unicode), яке являє собою універсальніший формат і використовує стандарт, відмінний від ISO. Якщо документ створюється не латиницею, то бажано використовувати набори символів ISO, а не набори Unicode.
Наприклад, використання елемента < meta > для оголошення кодування Unicode та ISO (в кириллиці):
< meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”/>;
< meta http-equiv=”Content-Type” content=”text/html; charset= ISO 8859-5”/>.
Елемент meta можна використовувати для визначення ключових слів, опису сайту, а також указівки автора, наприклад:
<meta name="keywords" content="Вуз, електроніка, інтегральні мікросхеми " />
<meta name="Сайт кафедри напівпровідникової електроніки />
<meta name="Author" content="Кеньо Г.В.." />
Елемент script дозволяє вставляти скрипти безпосередньо в документ, а також за його допомогою вказується посилання на необхідний для використання скрипт. Використовується за необхідності.
Елемент style дозволяє розміщувати інформацію про стиль прямо на сторінці. Стиль, інформація про який розміщена таким чином, називається вбудованим. Використовується за необхідності
Елемент link найчастіше використовується для виконання зв’язування з зовнішньою таблицею стилів або для, наприклад, зв’язування зі значком сайту.
< body >
Дескриптор <body> – це те місце, де відбуваються всі дії. Це той елемент, де буде розміщений вміст і відбудеться розмітка сторінки за допомогою мови HTML для структурування вмісту відповідним чином. Елемент <body> розміщений в елементі < html >, безпосередньо за елементом < head > і має відкриваючий та закриваючий теги.
Коментарі HTML (<!-- -->)
Коментарі дозволяють тимчасово приховати вміст або розмітку, зробити зрозумілішим документ. Для цього використовується дескриптор <!-- -->. Все, що необхідно приховати або подати у вигляді керування, розміщується між відкриваючою та закриваючою частиною коментарію.
Наприклад:
<!—
<p> Це не відобразиться браузером</p>
-->
<p> Це відобразиться браузером</p>
Створення абзацу (<p> </p>)
Web-браузер не відображає ті символи переводу стрічки або створення абзацу, які вводяться у текст на етапі формування сторінки за допомогою текстового редактора. Щоби вказати початок нового абзацу, потрібно задати дескриптор <p> який має відкриваючий та закриваючий теги.
Після відкривання сторінки у вікні Web-браузера всі абзаци її тексту, помічені дескриптором <p>, розділяються пустими стрічками.
По замовчуванню більшість Web-браузерів форматує абзаци, вирівнюючи їх уліво. Атрибут align=”?” дозволяє примусово змінити ознаку вирівнювання. Абзаци можуть бути вирівняні вліво, вправо, по центру та по ширині. Для цього замість? потрібно вставити left, right, center або justify відповідно.
Наприклад:
<p align=” right” > Цей абзац буде вирівняний вправо </p>
Перехід до нової стрічки ( < BR > )
Дескриптор < BR > повідомляє Web-браузеру про те, що слід припинити розміщення тексту та інших елементів сторінки у межах поточної стрічки і перейти до нової стрічки. Тег <BR> є корисний для розділення коротких фрагментів тексту (поштових адрес, віршів). Дескриптор <BR> не має закриваючого тегу. Дескриптор <BR> застосовують для примусового розміщення вбудованих елементів (графічні зображення, положення яких не повинне вибиратись браузером автоматично) у визначеному місці сторінки. Дескриптор <BR> буває зручним у тих випадках, коли необхідно збільшити пусті ділянки між окремими елементами сторінки.
Наприклад,
Вставка символів прогалин ( )
Web-браузери зазвичай ігнорують додаткові символи прогалин, введені у текст сторінки. Якщо необхідно обов’язково задати додаткові символи прогалини, потрібно використати команду .
Прогалини – зручний засіб задавання відступу для першої стрічки абзацу. Їх використовують для виділення деяких елементів Web-сторінки, наприклад, графічних об’єктів. Вставка символу прогалини між двома зображеннями дозволяють запобігти такій ситуації, коли дві картинки можуть бути сприйняті як одна велика.
Команда створює неподільний пустий простір між елементами сторінки. Ввід замість символу прогалини між сусідніми словами гарантує, що обидва слова не будуть рознесені по різних стрічках у вікні браузера – програма обов’язково розташує їх поруч.
Наприклад:
<p> Відступ перед першою стрічкою абзацу.</p>
відобразиться у Web-браузері:
Відступ перед першою стрічкою абзацу.
Створення заголовків ( < H? >)
Стандарт HTML передбачає можливість використання заголовків шести рівнів вкладеності. Заголовки рівня 1 (позначаються дескриптором < H1 >) відображаються найбільшим шрифтом, а рівня 6 (<H1>0 – найменшим. Заголовки, що позначаються дескрипторами <H1>, <H2>, <H3>. Використовують за прямим призначенням, а теги <H5>, <H6> часто застосовують для виділення фрагментів тексту, які містять відомості про авторські права або іншу інформацію офіційного характеру. Шрифт заголовків, що форматуються за допомогою дескриптора <H4>, як правило, не відрізняється за розміром від розміру шрифту основного тексту.
Web-браузер відображає заголовки напівжирним шрифтом, додаючи над і під ним пусті стрічки. Більшість браузерів за замовчуванням вирівнюють текст заголовків вліво. Атрибут ALIGN дозвиляє відступити від цього правила.
Наприклад,
<H1>Це заголовок 1-го рівня </H1>
<H3>Це заголовок 2-го рівня </H3>
відобразиться у Web-браузері:
Це заголовок 1-го рівня
Це заголовок 2-го рівня
Попереднє форматування тексту (<pre>)
Зазвичай Web-браузери ігнорують пусті стрічки та надлишкові прогалини всередині тексту сторінки. Дескриптор <pre> задає браузеру зберігати в недоторканості пусті ділянки тексту Web-сторінки, набраного вами у текстовому редакторі або процесорі.
Web-браузери відображають попередньо відформатований текст за допомогою моноширінних шрифтів (наприклад Courier), де кожному символу відводиться ділянка однакового розміру. Бажаючи скористатись засобами попереднього форматування, потрібно використовувати для вводу відповідних фрагментів тексту один із моноширінних шрифтів, щоб наперед передбачити результат відображення сторінки у вікні браузера.
Попереднє форматування – зручний засіб для створення простих таблиць. Введіть текст таблиці, вирівняйте його за допомогою прогалин (на використовуйте символів табуляції), а потім помітьте його тегами <pre> і </pre>.
