|
|
диплом. другий розділ. Розділ можливості html 1 Мова розмітки
РОЗДІЛ 2. МОЖЛИВОСТІ HTML
2.1 Мова розмітки
Різні мови розмітки використовувалися століттями, а в наші роки їх почали використовувати в комп'ютерних системах. Дуже популярний сучасний приклад мови розмітки, яка використовується в комп'ютері — це HTML, одна з найпоширеніших мов у Всесвітній мережі.
HTML (HyperText Markup Language) – це стандартна мова розмітки гіпертекстових документів. Суть розмітки полягає в тому, - що це набір спеціальних інструкцій, які називають тегами, призначені вони для формування в документах якої-небудь структури і визначення відношень між її різними елементами. Тобто вона надає документу структуру визначену тегами: глави, розділи, абзаци, списки, малюнки, таблиці, колонтитули, зміст та інше. За бажанням в кожному блоці можна змінити шрифт, розмір символів, обрати будь-який колір тексту, чи виділити його курсивом та зробити напівжирним.
Загалом розмітка складається з чотирьох основних компонентів – це елементи (теги та їхні атрибути, зміст), базові типи даних, символьні мнемоніки та декларації типу документа.
З самого початку web-сторінки обов’язково потрібно визначати декларацію типу документа за допомогою елемента DOCTYPE. В тому випадку, якщо цього не зробити ваш HTML документ буде не повноцінним і більшість браузерів будуть відображати його на свій розсуд.
 Далі йде шапка документа, яка знаходиться в межах елемента head, в якій записано усі загальні технічні відомості або якась додаткова інформація
про документ, яка не відтворюється в браузері. Після шапки створюється тіло
всього документа, яке знаходиться в елементах body або frameset. В ньому міститься основна інформація документа.
Це приклад загальної структури HTML-документа.(Рисунок 2.1)
Рисунок 2.1
Також базові компоненти розмітки HTM – це елементи. Кожен з таких елементів має дві основні властивості: атрибути та зміст. У кожного елемента є початковий та кінцевий тег. Атрибути елемента записуються в початковому тегу одразу після назви елемента, контент елемента записується між його двома тегами. Наприклад: контент елемента. Але деякі елементи не містять контенту, тож і не мають кінцевого тега.
 Елемент може не мати початкового та кінцевого тега (наприклад, елемент head), проте він завжди буде представлений в документі.
Елементи розмітки також поділяються на певні типи:
 елементи структурної розмітки – ці елементи описують призначення тексту свого контенту. Вони не зазначають ніякого візуального відтворення тексту, проте більшість браузерів мають стандартні стилі форматування для кожного елемента;
елементи візуальної розмітки – застосовуються для опису візуальних ефектів тексту, не зазначаючи при цьому функції тексту свого контенту;
елементи розмітки гіпертексту - застосовуються для з'єднання частин документа з іншими документами.
Кожен з елементів має свої атрибути. Атрибут показує шлях браузеру, вказує тегу куди розмістити текст, який повинен бути список і т.д. Атрибути бувають конкретними - потрібний для конкретного тегу, і загальними або спільними, які використовуються для абзацу, для заголовку чи для таблиці. Ось деякі із загальних атрибутів:
атрибут accesskey. Він дозволяє отримати доступ до елементу за допомогою поєднання клавіш із заданою в атрибуті буквою або цифрою. Браузери при цьому використовують різні комбінації клавіш. Наприклад, для accesskey = "s" працюють такі поєднання:
Chrome: Alt + S
Opera: Shift + Esc, S
атрибут class. Визначає стильовий клас, який дозволяє зв'язати певний тег зі стильовим оформленням;
атрибут contenteditable. Повідомляє, що елемент доступний для редагування користувачем - можна видаляти текст і вводити новий;
атрибут contextmenu – встановлює контекстне меню для елемента;
атрибут spellcheck. Вказує браузеру перевіряти чи ні правопис і граматику в тексті;
атрибут title. Описує вміст елемента у вигляді підказки, яка з'являється при наведенні курсору на елемент. Вид цієї підказки залежить від браузера, налаштувань операційної системи і не може бути змінений за допомогою HTML-коду.
Усі атрибути елементів мають також важливе значення при створенні документу, за допомогою своїх можливостей, адже вони розширюють можливості самих елементів (тегів) і дозволяють зручно управляти різними настройками відображення елементів web-сторінки.
 2.2 Теги та атрибути
Теги - це один з головних елементів мови розмітки гіпертексту, тобто це мітки, які ми використовуємо для вказівки браузеру, як він повинен буде показати web-сайт. Написані вони можуть бути тільки на англійській мові. Всі теги мають однаковий формат: вони починаються знаком "<" і закінчуються знаком ">". Усі теги поділяються на певні види:
відкриваючий тег - тег, який стоїть на початку тексту;
закриваючий тег - тег, що стоїть в кінці. Різниця між цими двома тегами полягає в тому, що в закриваючому перед символами в кутових дужках стоїть слеш «/»;
одиночні теги - теги, які не мають закриваючого тега. Наприклад до них відноситься тег
.
Умовно всі теги також поділяються і на основні типи, але варто враховувати, що один і той же тег може одночасно належати різним групам:
теги заголовка документа
блокові елементи
вбудовані елементи
універсальні елементи
списки
таблиці
Теги верхнього рівня призначені для формування структури web-сторінки і визначення розділу заголовка і тіла документа:
 тег - призначений для зберігання елементів, мета яких - допомогти браузеру в роботі з даними. Також в ньому знаходяться метатеги, які використовуються для зберігання інформації, призначеної для браузерів і пошукових систем;
тег - призначений для зберігання змісту web-сторінки, що відображається у вікні браузера.
До тегів заголовка документа відносяться елементи, які розташовуються в контейнері . Всі ці теги безпосередньо не відображаються у вікні браузера, за винятком тега :<br /><ul> <li/> <br /><TITLE> - використовується для відображення рядка тексту в лівому верхньому кутку вікна браузера. Такий рядок повідомляє користувачеві назву сайту і іншу інформацію, яку додає розробник;<br /><li/> <br /> - метатеги використовують для зберігання інформації <br /></ul> <br />Блокові елементи займають всю доступну ширину, висота елемента визначається його вмістом, і він завжди починається з нового рядка:<br /><ul> <li/> <br /><BLOCKQUOTE> - використовують для виділення довгих цитат всередині документа. Текст, позначений цим тегом, відображається як вирівняний блок з відступами зліва і справа, а також з порожнім простором зверху і знизу;<br /><li/> <br /><br />- визначає абзац тексту.<br /></ul> <br />Вбудованими називають елементи, які є частиною іншого елемента. Вони використовуються для зміни вигляду тексту або його виділення:<br /><ul> <li/> <br /><b> - визначає <a href="/rozdil-robota-z-abzacami-chastina-formatuvannya-shriftu-ta-abz/index.html" title="Розділ Робота з абзацами. Частина Форматування шрифту та абзаців">жирне накреслення шрифту</a>;<br /><li/> <br /><BIG> - збільшує розмір шрифту на одиницю в порівнянні зі звичайним текстом;<br /><li/> <br /><img> - призначений для відображення на web-сторінці зображень в графічному форматі GIF, JPEG або PNG.<br /></ul> <br /><img src="660361_html_2acbe77806665407.gif" align="left" hspace="14" vspace="2"/> Універсальні елементи можуть використовуватися як блокові, так і вбудовані:<br /><ul> <li/> <br /><DEL> - використовується для виділення тексту, який був видалений у новій версії документа. Таке форматування дозволяє відстежити, які відбулись зміни в тексті документа.<br /></ul> <br />Списком називають взаємопов'язаний набір фраз, які починаються з маркера або цифри. Списки надають можливість упорядкувати і різні дані і представити їх в зручному для користувача вигляді:<br /><ul> <li/> <br /><ol> - встановлює нумерований список;<br /><li/> <br /><ul> - встановлює маркований список.<br /></ul> <br />Таблиця складається з рядків і стовпців ячійок, які можуть містити текст і малюнки. Таблиці використовують для впорядкування табличних даних:<br /><ul> <li/> <br /><table> - використовується як контейнер для елементів, які визначають вміст таблиці;<br /><li/> <br /><td> - створює одну ячейку таблиці.<br /></ul> <br />Велике значення для тегів мають атрибути – це певні властивості, які дають тегу додаткові можливості форматування тексту. HTML атрибут складається з імені атрибута і значення, між ім'ям і значенням (текстові значення записують в лапках) вказується знак дорівнює. Наприклад, можна виділити фрагмент тексту якимось шрифтом, використовуючи тег і вказавши в цьому тезі назву шрифту і його розмір: оформляється текст </ font>. Писати атрибути можна в будь-якій послідовності і так само, як і теги їх можна вказувати в один або декілька рядків. До кожного тега потрібно правильно обрати атрибут, бо в кожного з них він свій. Кожен атрибут тега відноситься до певного типу, наприклад: текст, число, шлях до файлу та інші. Всі атрибути поділяються на види:<br /><ul> <li/> <br /><img src="660361_html_172949477d3c5896.gif" align="left" hspace="14" vspace="2"/> універсальні атрибути<br /><li/> <br />атрибути подій<br /><li/> <br />унікальні HTML атрибути<br /><li/> <br />атрибути зі значенням<br /><li/> <br />атрибути без значення<br /></ul> <br />Універсальні атрибути застосовуються майже до всіх тегів, тому вони виділені в окрему групу, щоб не повторювати їх для всіх тегів. Ось деякі з них:<br /><ul> <li/> <br />атрибут hidden - за допомогою цього атрибута можна приховати <br /></ul> <br />HTML елемент і його вміст на сторінці;<br /><ul> <li/> <br />атрибут id - дозволяє задати ідентифікатор для HTML елемента. Ідентифікатор повинен бути унікальним і не має повторюватися всередині HTML документа;<br /><li/> <br />атрибут style – він потрібен для того, щоб задати CSS правила в HTML документі для конкретного елемента сторінки.<br /></ul> <br />HTML атрибути подій зазвичай використовують для того, щоб викликати який-небудь код на виконання, коли користувач робить певні дії, хоча це не завжди так. Також ці атрибути часто використовують разом з HTML формами. Приклади атрибутів подій:<br /><ul> <li/> <br />onload - подія яка свідчить, що <a href="/zanyatie-2-dokument-i-ego-funkcii-voprosi-dlya-samopodgotovki/index.html" title="Занятие №2 Документ и его функции Вопросы для самоподготовки: Дайте определение понятию «документ»">документ завантажений</a>;<br /><li/> <br />onmouseover - подія, яке означає, що курсор наводиться на елемент;<br /><li/> <br />onselect - ця подія говорить про те, виділений текст в поле форми;<br /><li/> <br />onunload - подія закриття вікна.<br /></ul> <br />Є теги для яких наявність унікального атрибута є головною умовою для його правильної роботи. Наприклад тег картинки <img> залишиться простим тегом, якщо в його атрибуті src не вказати шлях до потрібної картинки.<br /><br /><img src="660361_html_e9f9d00919cca665.gif" align="left" hspace="14" vspace="2"/> Атрибути зі значенням - для більшості атрибутів в HTML можна задати своє значення, а у деяких атрибутах можна задати навіть кілька значень розділяючи їх пробілами. Наприклад, атрибут class може мати відразу кілька значень. <br /><br />Атрибути без значення – не всі атрибути мають своє значення, сам факт визначення атрибута може повідомити браузеру, що з цим елементом зв'язується певна поведінка. <br /><br /><b><span id='2.3_Фрейми_та_атрибути'>2.3 Фрейми та атрибути</span></b><br /><br />Не мале значення в мові HTML мають фрейми. Фрейми розділяють вікно браузера на окремі області, розташовані поруч один з одним. У кожну з таких областей завантажується самостійна web-сторінка. Усі фрейми універсальні і незалежні один від одного, кожен з фреймів розміщених на сторінці може мати свою адресу. При натисканні на будь-яке з посилань, розташованих в одному фреймі, можна продовжувати бачити сторінки в іншому місці. Для створення фрейму ми повинні скористатись тегом <frame> - він повинен знаходитись у тегі <frameset> ( він заміняє тег <body>) який задає спосіб розмітки сторінки на окремі області. В кожну з таких областей завантажується самостійна web-сторінка. Обов’язково для кожного фрейму потрібно задати HTML-документ, який буде відображено в ньому, за допомогою <frame> та його атрибутів:<br /><ul> <li/> <br />src — задає назву файлу, яка відображатиметься у фреймі;<br /><li/> <br />name — задає назву фрейму;<br /><li/> <br />scrolling — визначає наявність або відсутність смуг прокручування у вікні фрейму;<br /><li/> <br />noresize — забороняє користувачу змінювати розміри фрейму;<br /><li/> <br />border — визначає ширину розділювальної смуги між фреймами у пікселях;<br /><li/> <br />bordercolor — визначає колір розділювальної смуги між фреймами;<br /></ul> <br /><img src="660361_html_4dbdb90e08815c6f.gif" align="left" hspace="14" vspace="2"/> Фрейми можна розташовувати поруч по горизонталі або один над одним по вертикалі. У першому випадку використовують атрибут cols, а в другому — атрибут rows. Для поділу вікна на <a href="/peredaj-daleshe-vmesto-predisloviya-bmoya-cele-sdelate-tak-cht/index.html" title="Передай дальше вместо предисловия bМоя цель сделать так, чтобы в России появилось ещё больше по-настоящему толковых и амбициозных проектов">фрейми через кому записують числа</a>, які визначають розміри фреймів зліва направо або згори донизу. Розміри фреймів вимірюють у пікселях або відсотках від розміру екрана(Рисунок 2.2). <br /><br />Якщо потрібно зазначити, що фрейм займає те місце, яке залишилося, використовують символ * замість числа. Наприклад тег <frameset rows="150, *"> задає поділ вікна на два горизонтальні фрейми, один з яких має висоту 150 пікселів, a другий займає місце, яке залишилося. Також можна використовувати одночасний і горизонтальний, і вертикальний поділ вікна на фрейми, за допомогою вкладення тегів <frameset>…</frameset> один в один. Ще існують вбудовані фрейми, їх можна вбудувати у будь-яке місце web-сторінки. Цей фрейм описують тегом <IFRAME>…</IFRAME>, який має такі ж атрибути вирівнювання, як і графічне зображення:<br /><ul> <li/> <br />align — задає вирівнювання тексту навколо фрейма;<br /><li/> <br />width — задає ширину фрейма;<br /><li/> <br />height — задає висоту фрейма;<br /><li/> <br />hspace — задає відступ по горизонталі;<br /><li/> <br />vspace — задає відступ по вертикалі та інші.<br /></ul> <br /><img src="660361_html_f03782b130265681.jpg" name="ð ð¸ññð½ð¾ðº 1" align="bottom" vspace="1" width="266" height="247" border="0"/> <br /><br />Рисунок 2.2<br /><br /><img src="660361_html_9fc735c3f96ac756.gif" align="left" hspace="14" vspace="2"/> Раніше фрейми часто використовувалися для навігації по web-сайту. При цьому навігаційна сторінка розташовувалась в одному вікні, а сторінки з текстом - в іншому. <br /><br />Усі фрейми мають як багато переваг, так і багато недоліків.<br /><br />Переваги:<br /><ul> <li/> <br />простота у використанні<br /><li/> <br />сторінки з фреймами завантажуються швидше<br /><li/> <br />дуже зручне розміщення інформації<br /><li/> <br />можливість зміни розміру областей<br /></ul> <br />Недоліки:<br /><ul> <li/> <br />навігація<br /><li/> <br />погана індексація пошуковими системами<br /><li/> <br />немає можливості додати внутрішні сторінки в «Закладки»<br /><li/> <br />несумісність з різними браузерами<br /></ul> <br /><b>2.4 CSS</b><br /><br />Каскадні таблиці стилів (Cascading Style Sheets) — це спеціальна мова, яку використовують для запису оформлення сторінок, написаних мовами розмітки даних. CSS працює з шрифтами, кольором, полями, рядками, висотою, шириною, фоновими зображеннями, позиціонуванням елементів і багатьма іншими речами. Різниця між HTML та CSS полягає в тому, що HTML використовується для структурування вмісту сторінки, а CSS - для форматування цього структурованого вмісту. Отже стилі дають нам можливість розділити етапи створення html-файлу й удосконалити зовнішній вигляд сторінки. У використанні CSS дуже багато переваг, наприклад: відображання одного і того ж документа в різних стилях; декілька дизайнів сторінки для різних пристроїв; простота зміни дизайну; додаткові можливості оформлення та багато чого іншого. Стилі складаються зі списку правил.<br /><br /><img src="660361_html_1674a2c933abf2a3.gif" align="left" hspace="14" vspace="2"/> <br /><br />Кожне правило має один або більше селектор (selector) та блок визначення (declaration block). Сам блок визначення складається із оточеного фігурними дужками списку властивостей. <br /><br />Селектор визначає, до якого елементу застосовувати те чи інше CSS-правило. <a href="/elementi-elektrichnih-kil-mojute-buti-linijnimi-ta-nelinijnimi/index.html" title="Елементи електричних кіл можуть бути лінійними та нелінійними, зосередженими і">Селекторами можуть бути елементи</a>, їх класи і ідентифікатори, а також псевдокласи і псевдоелементи. <br /><br />Види селекторів<br /><ul> <li/> <br />Універсальний селектор - відповідає будь-якому HTML-елементу. Також селектор може використовуватися в комбінації з псевдокласом або псевдоелементами.<br /><li/> <br />Селектор елемента - дозволяє форматувати всі елементи даного типу на всіх сторінках сайту.<br /><li/> <br />Селектор класу – дають можливість задавати стилі для одного і більше елементів з однаковим ім'ям класу, розміщених в різних місцях сторінки або на різних сторінках сайту.<br /><li/> <br />Селектор ідентифікатора – форматує один конкретний елемент.<br /><li/> <br />Селектор потомка – цей селектор застосовує стилі до елементів, розташованих всередині елемента-контейнера.<br /><li/> <br />Дочірній селектор - дозволяє застосувати стилі тільки, якщо дочірній елемент йде відразу за батьківським елементом і між ними немає інших елементів.<br /><li/> <br />Сестринський селектор - дозволяє обрати елементи з групи елементів одного рівня.<br /><li/> <br />Селектор атрибута - вибирає елементи на основі імені атрибута або значення атрибута.<br /><li/> <br /><img src="660361_html_65749fa7d7fed13e.gif" align="left" hspace="14" vspace="2"/> Селектор псевдокласу - це класи, які майже не прикріплені до HTML-тегами. Вони дозволяють застосувати CSS-правила до елементів<br /></ul> <br />при здійсненні події або підпорядковується певним правилом.<br /><ul> <li/> <br />Селектор структурних псевдокласів типу - вказують на конкретний тип дочірнього тега.<br /><li/> <br />Селектор псевдоелемента - використовується для додавання вмісту, яке генерується за допомогою властивості content.<br /><li/> <br />Комбінація селекторів – використовується для більш точного набору елементів.<br /><li/> <br />Угруповання селекторів - дає можливість один і той же стиль одночасно застосувати до кількох елементів.<br /><li/> <br />Спадкування – це механізм, за допомогою якого деякі властивості передаються від предка до його потомка. В багатьох випадках це зручно, бо не потрібно ставити розмір шрифту і сімейство шрифтів для кожного елемента web-сторінки.<br /></ul> <br /><img src="660361_html_3df87f5e0807374a.gif" align="left" hspace="14" vspace="2"/> Для того, щоб створити взаємодію таблиці стилів з html-файлом є декілька способів: зв’язування, імпортування, вбудовування (або використання стильових класів). Під час зв’язування таблицю стилів створюють і зберігають в окремому файлі з розширенням ".css". Цю таблицю називають зовнішньою. Щоб зв'язати основний файл з таблицею стилів, у середині тега <head> застосовують одинарний тег <link> з інформацією про таблицю. Імпортування, це майже теж саме, що й зв’язування, але взаємодію файлів забезпечують засобами тегу <style> і команди @import URL. Таблицю, яку створено для конкретного html-файлу і її розташовано у цьому файлі за допомогою контейнера <style>, називають вбудованою. Стилі також мають дуже велику кількість своїх властивостей з їхнім <a href="/variant-fonetika--ce-rozdil-movoznavstva-sho-vivchaye-zvukovij/index.html" title="Варіант фонетика – це розділ мовознавства, що вивчає звуковий склад мови">значенням та призначенням</a>, наприклад: background-color – колір тла; font-size – розмір шрифту; line-height – відстань між рядками; display – відображення елемента в документі та багато інших. <br /><br /><img src="660361_html_b1771f0a1a3e48e3.gif" align="left" hspace="14" vspace="2"/> <b><span id='2.5_Кросбраузерність'>2.5 Кросбраузерність</span></b><br /><br />Поняття кросбраузерності з’явилося у зв’язку з тим, що на даний момент існує дуже багато браузерів та їх версій, які відрізняються одна від одної за своїми функціями і можливостями. Для того, щоб сайт однаково виглядав і в Google Chrome, і в FireFox, і в Opera, потрібно з самого початку роботи над ним подбати про кросбраузерність. З самого початку потрібно обрати з якими саме браузерами повинен буде працювати ваш сайт. <br /><br />Найпростіший способ перевірки сайту на кросбраузерність – це ручна перевірка. Якщо на вашому комп’ютері встановлено хоча б три різних браузери, потрібно відкрити свій сайт в них і подивитись, як він буде виглядати. Також можна відкрити сайт на інших пристроях, наприклад мобільному телефоні чи планшеті. А для більш детальної перевірки потрібно скористатись спеціальними програмами та інструментами. Наприклад сервіс Browsershots.org - треба зайти на сайт, з переліку всіх браузерів обрати потрібні і надіслати свій сайт на аналіз. В кінці ми отримуємо скриншот сайту з обраних браузерів. Такі сервіси бувають платними та безкоштовними. </style></style></link></head></frameset></frame></body></frameset></frame></td></table></del></big></blockquote> |
|
|
Скачать 365.44 Kb.