Geum.ru

Лекція 1 "введення у дисципліну"

Вид материалаЛекція

Содержание


Теги визначення функціональних розділів документа
Головний заголовок Підзаголовок
Гіпертекстові посилання.
Малюнки на web-сторінках
Альтернативний текст
Виділення елементів тексту
Створення списків
Упорядкований список
Подобный материал:
1   ...   9   10   11   12   13   14   15   16   17




Заголовок документа, що<br /> <br /> відображається у вікні броузера <br /> <br />





Тіло документа





Пара тегов повідомляє броузеру, що перед ним документ HTML. Розділ заголовків вміщений між тегами і містить інформацію про документ в цілому. Зокрема, цей розділ повинен містити всередині себе теги , між якими розміщають "офіційний" заголовок документів. Сам текст документа розташовується в тілі документа, що розташовується між тегами <BODY>. <br /><br /><br /> ТЕГИ ВИЗНАЧЕННЯ ФУНКЦІОНАЛЬНИХ РОЗДІЛІВ ДОКУМЕНТА <br /> <br />У більшості звичайних документів основними функціональними розділами є заголовки й абзаци. <br /> <br />Для позначення абзаців використовується парний тег <br /> - Paragraph. У мові HTML немає засобів для створення абзацного відступу, тому для зручності читання тексту між абзацами вводиться порожній рядок. <br /> <br />Якщо необхідно перейти на наступний й рядок без створення абзаца (тобто без виведення додаткового порожнього рядка), використовується тег <br /> - перехід на наступний рядок без створення абзаца. <br /> <br />Для більш виразного поділу частин документа використовується горизонтальна лінія, утворювана одиночним тегом <HR> (Horizontal Record> - вивести горизонтальну розділову смугу. <br /> <br />Мова підтримує шість рівнів внутрішніх заголовків документа. Вони позначаються парними тегами від <h2> до <h6>. Реально на екрані монітора всі ці заголовки відображаються шрифтами різного розміру і полужирним написанням. <br /> <br />Приклад: <br /> <br /> <h2>Головний заголовок</h2> <br /> <br /><h2>Підзаголовок</h2> <br /> <br /><br /> Всередині абзаца всі рядки відображаються <br /> <br />разом, незважаючи на те, що у вихідному <br /> <br />документі вони відділені <br /><br /><br /><HR><br /> <br />Цей текст розбитий <br /> на два рядки. <br /><br /><br />Відображуваний текст будет мати вигляд: <br /> <br />Головний заголовок <br /> <br />Підзаголовок <br /><br /><br />Всередині абзаца всі рядки відображаються разом, незважаючи на те, що у вихідному документі вони відділені <br /><br /><br />---------------------------<br /> <br />Цей текст розбитий<br /> <br /> на два рядки. <br /><br /> ГІПЕРТЕКСТОВІ ПОСИЛАННЯ. <br /> <br /> Для створення гіпертекстового посилання (Hyper REFerence) використовується код A (address) і атрибут HREF= URL-адреса. Команда має такий вигляд: <br /> <br /> текст посилання <br /> <br />Посилання - це текст, що позначає документ (текст) на який посилаються. При відображенні документа броузером текст посилання звичайно підкреслюється і зображується синім кольором, а курсор при пппадання на посилання змінює свій вигляд (звичайно, це кисть руки з витягнутим вказівним пальцем). Клацання по посиланню призводить до переходу по заданій адресі URL (Uniform Resource Locator - універсальний покажчик ресурсу). <br /><br /><br />Гіпертекстові посилання можуть вказувати на текст, що знаходиться всередині сторінки, на Web- сторінку або файл, що знаходиться на місцевому або будь-якому іншому Web-вузлі. Відповідно до цого, посилання називають внутрішнім або зовнішніми. Для зовнішніх посилань необхідно вказувати повну адресу документа, включаючи назву протоколу й адресу Web-узла: <br /> <br />"http:/www/microsoft. com". Для внутрішніх посилань достатньо зазначити тільки відносний шлях пошуку документа. <br /><br /><br />При посиланні на фрагменти тексту всередині Web- сторінки цей фрагмент помічається (прийнято називати мітку якорем). Для мітки якоря використовують парний тег <a>, але замість атрибута посилання HREF= використовується атрибут NAME= . Значенням цього атрибута є ім'я якоря - послідовність латинських букв і цифр (без пропусків і спеціальних символів). <br /><br /><br />Для посилання на встановлений якір, в кінці адреси URL, після імені документа, через символ (# -решітка) вказується ім'я якоря. <br /> <br />Приклад: <br /><br />. . . . . . . . . . . . . . . . . . <br /> <br /><a name="address"ім\'я якоря <br /><br /><br /> МАЛЮНКИ НА WEB-СТОРІНКАХ<br /> <br /> Ілюстрації відіграють важливу роль в оформленні Web-сторінок. Самі малюнки зберігаються в окремих файлах поза документом HTML, але відображаються броузером всередині Web-сторінки. <br /> <br />Для розміщення малюнків у документі служить одиночний тег <img> ( Image - малюнок). Цей тег містить обов'язковий атрибут SRC=, значенням якого є адреса URL файла зображення, записаний в абсолютній або відносній формі. При завантаженні документа, малюнок також завантажується і відображається в тому місці документа, де розташований тег малюнка. <br /> <br />Зображення переноситься на Web-сторінку зі зберіганням розміру. Якщо при компонуванні зображення необхідно його перемаштабувати, потрібні розміри малюнка можна задати за допомогою атрибутів WIDTH= (ширина) і HEIGHT= (висота). Значення цих атрибутів визначають ширину і висоту зображення на Web-сторінці в пікселях. <br /> <br />Використовуючи ілюстрації в документах, необхідно пам'ятати про два моменти. По-перше, Web-сторінка може відображатися броузером, що не має засобів для показу зображень. По-друге, користувачі часто відключають показ малюнків, щоб прискорити прийом документа. І в тому й в іншому випадку бажано дати можливість дізнатися, що ж зображено на картинці, якщо її не можна побачити. Для цієї мети передбачений альтернативний текст. <br /> <br /> <i> Альтернативний текст</i> - це більш-менш докладний опис малюнка, який броузер може вивести замість самого малюнка. Альтернативний текст задається в тегі <img> значенням спеціального атрибута ALT= "альтернативний текст". <br /><br /><br /> ВИДІЛЕННЯ ЕЛЕМЕНТІВ ТЕКСТУ <br /> <br />Звичайно прийнято виділяти елементи тексту курсивом, напівжирним шрифтом, розміром. У мові HTML фрагменти тексту, що виділяються, поміщаються у парні теги <EM> і <b>. У першому випадку передбачається, що текст буде виділений курсивом, у другому випадку - напівжирним шрифтом. Якщо броузер з якоїсь причини не має можливості застосувати шрифтові ефекти, те все одно якийсь ефект буде гарантований. <br /> <br />Приклади: <br /> <br /><br /><EM>Цей текст буде виділений курсивом</EM> <br /> <br /><b>Більш сильне виділення</b> <br /><br /><br />Відображення тексту HTML документа <br /> <br /><i>Цей текст буде виділений курсивом</i>. <b>Більш сильне виділення </b> <br /> <br /> СТВОРЕННЯ СПИСКІВ <br /> <br />При створенні документів використовують три типи списків:<br /> <ul> <li>упорядковані (нумеровані);<br /> <li>неупорядковані (маркіровані); <br /> <li>списки визначень. <br /> </ul> <br />Елементам упорядкованого списку передують номера. У якості номерів можуть використовуватися арабські або римські цифри, латинські букви (як у верхньому, так і нижньому регістрі). <br /> <br />Маркіровані списки позначаються маркерами у вигляді чорного кружка або квадратика. <br /> <br />Список визначень складається з термінів, що визначаються, і відповідних визначень. Термін, що визначається, завжди починається з початку рядка і якимсь чином виділяється. Визначення зображуються на екрані монітора з відступом від лівого краю. <br /> <br /><b> Упорядкований список</b> розташовується між парним тегом <br /> <br /><ol> - Order List. Елементи списку розміщуються між парним тегом <li> - List Inner. Тег, що закривається, можна опустити, тому що в цьому випадку ясно, де він повинен розташовуватися. <br /> <br /><b>Маркірований список</b> розташовується між парним тегом <br /> <br /><ul> - Unorder List. Елементи списку також розташовуються між парним тегом <li> - List Inner. <br /> <br />Приклад: <br /> <br />Склад комп'ютера <br /> <br /><ul><li>Зовнішні пристрої <br /> <br /><ol><li>Принтер <br /> <br /> <li>Сканер <br /> <br /></ol><br /> <br /><li>Внутрішні пристрої <br /> <br /><ol><li>Мікропроцесор <br /> <br /> <li>ОЗП <br /> <br /></ol><br /> <br /></ul><br /> <br />При відображенні броузер представить текст у такому вигляді: <br /> <br />Склад комп'ютера <br /> <ul> <li>Зовнішні пристрої <br /> </ul> <ol> <li>Принтер <br /> <li>Сканер <br /> </ol> <ul> <li>Внутрішні пристрої <br /> </ul> <ol> <li>Мікропроцесор <br /> <li>ОЗП <br /> </ol> <br /><br /><b>Список визначень</b> розташовується між парним тегом <br /> <br /><DL> - Definition List. Термін, що визначається, помічається тегом <DT> - Definition Term, а визначення - тегом <DD>. Теги, що закриваються, можна опускати. <br /> <br />Приклад: <br /> <br /><DL><br /> <br /><DT><b>Ярличок</b> <br /> <br /><DD>Елемент управління для переходу між робочими аркушами в робочій книзі Excel <br /> <br /></DL><br /> <br />На екрані монітора броузер представить текст у такому вигляді: <br /> <br /><b>Ярличок </b> <br /> <br />Елемент управління для переходу між робочими аркушами в робочій книзі Excel <br /><br /><br />ВИСНОВОК <br /> <br /> <b>Створення документів HTML носить творчий характер. Величезна різноманітність комп'ютерів, підключених до Інтернету, призводить до того, що заздалегідь неможливо передбачити, як буде виглядати документ на екрані конкретного користувача. Але, притримуючись достатньо простих правил, можна створити гарний документ HTML. </b> <br /> <br />До таких правил варто віднести такі:<br /> <ul> <li>зміст документа більш важливий, ніж його зовнішній вигляд;<br /> <li>не зловживати елементами оформлення, особливо різноманітними кольорами і шрифтами; <br /> <li>пам'ятайте, що графічні зображення і мультимедійні файли суттєво уповільнюють завантаження сторінок;<br /> <li>розміщення найважливішої інформації у верхній частині сторінки дозволяє Вашим клієнтам із користю проводити час, протягом якого відбувається завантаження документа. <br /> </ul> </dd></dt></dd></dt></dl></b></em></a></a></h6></h2></body>