- •Практична робота № 7 мова гіпертекстової розмітки – html Загальні відомості
- •Види тегів в html
- •Основні теги мови html
- •Основні кольори
- •Завдання № 7 Тема: Підготовка найпростішого гіпертекстового документа засобами програми Блокнот
- •Частина 1. Основні теги оформлення тексту документа й малюнків.
- •Неистовой судьбы - иль против моря
- •Частина 2. Робота з таблицями, створення гіперпосилань
- •Контролі питання
Практична робота № 7 мова гіпертекстової розмітки – html Загальні відомості
В 1990 році Тім Бернерс-Лі, програміст Європейської лабораторії фізики елементарних часток, написав програму під назвою редактор гіпертексту (hypertext), яка дозволяла виділяти одним клацанням миші інформацію в тексті документа для посилання на інші документи, що перебувають у мережі. Так зародився віртуальний простір, що одержав назву World Wide Web (Всесвітня павутина).
Мова, яка використовується для створення таких документів одержала назву HTML (Hyper Text Markup Language) – мова розмітки гіпертекстів, а програми для інтерпретації HTML - файлів, формування їх у вигляді Web-сторінок і відображення на екрані комп'ютера користувача називали Браузер (Browser).
Бурхливий розвиток мережі Інтернет привело до появи величезного числа Web-серверів, призначених для розміщення й обслуговування Wed-сайтів (логічно зв'язаних груп Web-сторінок), що належать як приватним особам, так і організаціям. А розроблювачі Браузерів, прагнучи зробити Web-сайти більш привабливими й динамічними, постійно модернізують HTML. Тому той самий HTML-документ у різних Браузерах може виглядати по-різному.
Стандартизацією мови HTML займається організація, названа World Wide Web Consortium (скорочено - W3C), а серед розроблювачів Браузерів лідируючі місця займають компанії Netscape і Microsoft. У цей час останньою специфікацією W3C є версія HTML 4.0, базові конструкції якої розглядаються далі.
Види тегів в html
HTML-документ являє собою текстовий ASCII-файл, що містить власне текст, який повинен бути відображений у вікні Браузера, і команди розмітки – HTML-теги, що визначають зовнішній вигляд документа при його інтерпретації у вікні Браузера.
HTML-тег записується в кутових дужках (<>) і складається з імені, за яким може слідувати список атрибутів (для більшості тегів необов'язковий). Імена й атрибути являють собою англійські слова й абревіатури й майже завжди їхній зміст прозорий. Записувати теги можна в будь-якому регістрі - прописними або малими літерами.
Теги можна розділити на дві великі групи.
Теги однієї групи, що звуться контейнерами, впливають на частину документа, розміщену між ними. Вони мають два компоненти: відкриваючий (початковий) і закриваючий (кінцевий). Закриваючий тег має таку ж назву, що й відкриваючий, але перед його назвою ставиться похила риска (символ /). Між відкриваючим і закриваючим тегами може розташовуватися текст або інші теги.
Автономні (одиночні) теги не мають кінцевого компонента. Вони викликають одноразову дію або при їхній інтерпретації у відображуваний документ вставляється той чи інший об'єкт. Наприклад, тег <IMG SRC="pict.gif">, викликає вставку малюнка з файла pict.gif.
Теги можуть мати уточнюючі параметри – атрибути. Атрибути записуються всередині автономного тега, а в контейнері тільки у відкриваючій частині. У списку атрибути відділяються один від одного пробілами. Послідовність атрибутів не істотна. Значення атрибутів вказуються після знака рівності в лапках. Лапки потрібно ставити обов'язково, якщо значення атрибута містить пробіли.
Приклади тегів з атрибутами:
<BODY BGCOLOR="LIGHTBLUE"> - задає світло-синій фон для документа,
<FONT SIZE=+2 COLOR=RED> текст </FONT> - парний тег, дає вказівку Браузеру викликає розміщений в «контейнері» текст символами, збільшеними відносно базового розміру (SIZE=+2) і червоного кольору (COLOR=RED).
Теги, що визначають структуру HTML-документа
HTML-документ розміщується в тегах <HTML> і </HTML>. Між цими тегами знаходяться дві секції: секція заголовку (між тегами <HEAD> і </HEAD>) і секція тіла документа (між тегами <BODY> і </BODY>).
Секція заголовка містить опис параметрів, використовуваних при відображенні документа, але, що не відображаються безпосередньо у вікні оглядача.
Секція тіла документа містить текст, призначений для відображення оглядача і теги, що вказують на спосіб форматування тексту, визначають графічне оформлення документа, задають параметри гіперпосилань і так далі.
Наприклад:
<HTML>
<HEAD>
<ТIТLE>Пример НТМL-документа</ТIТLE>
</HEAD>
<BODY>
Простой HTML-документ
</BODY>
</HTML>
Браузер відображає цей документ, виводячи у своєму вікні стрічку тексту: Самый простой HTML-документ, розміщену в секції тіла документа. Завдяки наявності тега <ТIТLE> в заголовку вікна Браузера буде виведено не ім’я файлу, а заголовок, який зазвичай містить смислове значення. В даному випадку заголовок вікна Браузера буде: Пример НТМL-документа.
Основні теги HTML
Основні теги мови HTML наведені в додатку 7.1.
Коментарі – текст коментарів розміщується в тегу <!-- ….текст комментария…. --> і не відображається у вікні Браузера.
Символьні примітиви – конструкції, що заміняють службові символи мови HTML (зазвичай починаються з амперсанта – символа &):
пробіл - символ менше (<) - < більше (>) - > дорівнює (=) - " амперсант (&) - & і інші.
Колір тексту і фон документа.
Колір основного тексту, колір посилань і фон документа описуються в початковому тегу тіла документа <BODY > за допомогою атрибутів.
Значення кольору можна задавати в одній із двох форм. Перша форма використовує задання кольору в RGB – палітрі (Red-Green-Blue). Код кольору вказується шістнадцятирічними числами, що задають інтенсивність відповідної складової (за двома розрядами). Наприклад, ярко-червоний має код – FF0000, ярко-зелений – 00FF00, чорний колір 000000, білий – FFFFFF. При виборі кольору перед шістнадцятирічним числом ставиться символ #.
Можливе задання кольору за допомогою імен. Таблиця основних кольорів наведена в додатку 7.2. Кожній назві кольору відповідає відповідна RGB – тріада. Наприклад, кольору navy - #000080.
Тегі форматування тексту
Для форматування тексту HTML-документа передбачено дві групи тегов, названі логічними й фізичними тегами форматування.
Теги логічної групи позначають своїми іменами структурні групи текстових фрагментів. Наприклад, тег <CODE> вказує на програмний код, тег <STRONG> - сильне виділення. Фрагменти з логічним форматуванням Браузер відображає відповідним чином відповідно до його можливостей.
Теги фізичного форматування вказують Браузеру як відобразити текстовий фрагмент згідно до бажань автора. Наприклад, тег <B> використовується для відображення тексту напівжирним курсивом (що звичайно відповідає логічному тегу <STRONG>)).
Сучасні Браузери підтримують і ті, й інші теги форматування. Однак з виходом специфікації HTML 4.0, перевага віддається логічному форматуванню, оскільки був проголошений принцип відділення структури документа від його подання.
Інші параметри шрифту наводяться в додатку 7.1.
Текст виводиться у вікні Браузера безперервне слово за словом, при цьому весь матеріал з пробілами відображається як один пробіл. Тому для перекладу рядка й вставки додаткового інтервалу з пробілом необхідно використовувати спеціальні засоби.
Символьний примітив   – один пробіл.
Тег <BR> (з англійської break) – вставка нової стрічки.
Тег <P> (з англійської paragraph) – починає абзац з нової стрічки, відокремлюючи від попередньої подвійним між стрічковим інтервалом.
Текст, що міститься між тегами <PRE> </PRE > (з англійської preformatted), відображається так, як він був відформатований попередньо, зі всіма пробілами, переносами стрічок.
Теги виду <Hn> ….</Hn> оформляють текст, що міститься в них, у вигляді Заголовку n-рівня. Значення n може змінюватися від 1 (найбільше) до 6 (найменше). Так само, як і тег абзацу <P>, тег Заголовка перериває текстовий потік і відділяє його пустою стрічкою.
Теги <H1>, <H2>, <H6> можуть мати атрибут вирівнювання ALIGN зі значеннями LEFT (за замовчуванням), CENTER, RIGHT і JUSTIFY.
Списки
HTML дозволяє створювати нумеровані і маркіровані списки.
Фрагмент тексту, що являє список, розміщується в тегах:
<OL> …. </OL> впорядкований список (ordered list),
<UL> ….</UL> невпорядкований список (unordered list),
<DL> ….</DL> список визначень (definition list).
Кожний елемент списку розміщується в тегах <LI> ….</LI> (з англійської list item).
Тег нумерованого списку може мати параметр TYPE= , що визначає вид нумерації, і START= , який задає початкове значення першого елемента списку (не залежно від типу вказується цифрою).
TYPE=A – задає маркери у вигляді прописних латинських букв;
TYPE=a – маркери – стрічкові латинські букви;
TYPE=I – маркери у вигляді великих римських цифр;
TYPE=i – маркери у вигляді маленьких римських цифр;
TYPE=1 – маркери – арабські цифри (за замовчуванням).
В тегах маркірованого списку параметр TYPE вказує тип маркера: замальовані кружечки – disc, не замальовані кружечки – circle, замальовані квадратики – square.
Графічні зображення. Графические изображения.
Тег <IMG> вставляє зображення в текстовий потік. Закриваючого компонента тег не має.
Обов'язковим атрибутом його є SRC=url (адреса графічного файлу, може бути відносною або абсолютною). Для прискорення завантаження Web-сторінки з малюнками рекомендується в тегу малюнка вказувати його розміри атрибутами HEIGHT і WIDTH. Це дозволяє Браузеру ще до повного завантаження малюнка виконати розмітку екрана й завантажити текст.
Основні необов'язкові атрибути наведені в табл. 7.1.
Таблиця 7.1
Атрибут |
Призначення атрибута |
ALT=текст |
Альтернативний текст, який виводиться в режимі Браузера без завантаження зображення |
BORDER= значення |
Товщина рамки, що обрамляє, в пікселях |
HEIGHT= значення |
Висота зображення в пікселях або у відсотках від висоти вікна Браузера |
WIDTH= значення |
Ширина зображення в пікселях або у відсотках від ширини вікна Браузера |
HSPACE= значення |
Вільний простір зліва і справа від зображення в пікселях |
VSPASE= значення |
Вільний простір зверху і знизу від зображення в пікселях |
ALIGN= значення |
Вирівнювання зображення по горизонталі й по вертикалі. Значення задаються атрибутами TOP, MIDDLE, BOTTOM. При застосуванні цих значень вставлене зображення розриває текстовий потік. Якщо задані значення LEFT або RIGHT, зображення буде відповідним чином вирівняне по горизонталі, а текст буде обтікати його. |
Гіперпосилання
Зв’язок між HTML-документами і фрагментами документів здійснюється за допомогою тегів <A> …</A> (з англійської anchor- якір).
Тег <A> застосовується у двох формах – для переходу на інший документ на його початок, або для переходу до пойменованого фрагменту (якорю) того ж або другого документа.
В першому випадку обов’язковим атрибутом являється HREF=url – адреса цільового документа.
Текст і зображення, розміщені між тегами <A> …</A>, стають активною зоною, чутливою до клацання миші, яке викликає завантаження цільового документа. Текст гіперпосилання виділяється підкресленням і кольором, зазначеним як значення атрибута LINK тега BODY, або кольором за замовчуванням.
В другому випадку – при створенні якоря (помітки чи закладки) фрагментта – обов’язковим є атрибут NAME=#имя, де ім’я – ідентифікатор фрагмента (якоря).
Приклад. Нехай в документі report.htm була визначена закладка: <A NAME=”CHEPTER2”> </A>.
Тоді гіперпосилання на цю закладку із другого документа, що знаходиться в цьому ж каталозі, буде виглядати наступним чином:
<A HREF="report.htm#CHEPTER2"> перехід до Глави 2 </A>.
Таблиці.
Таблиці в HTML-документах використовуються не стільки для того, щоб розташовувати дані в обрамлених комірках, скільки з метою позиціонування фрагментів тексту й зображення один навпроти одного, створення багатовіконного тексту, обтікання малюнків і т.п
Основні теги таблиць: <TABLE> …< /TABLE > - початок і кінець роботи;
<TR> …</TR> - початок і кінець стрічки;
<TD> …</TD> - початок і кінець комірки.
Комірки таблиці можуть містити будь-які дані, допустимі в HTML-документі, у тому числі і вкладені таблиці. Не слід залишати комірки таблиці незаповненими. Якщо за задумом комірка повинна виглядати порожньою, слід розташувати в ній хоча б нерозривний пробіл -  .
Для оформлення таблиць можуть бути використані атрибути, що вказуються в тегах <TABLE>, <TR> і <TD>. Основні з них перераховані в додатку7.1.
Додаток 7.1