Непарні теги та &–послідовності

Самостійна робота № 2

Тема: Загальні принципи створення сайтів. Вивчення мови розмітки гіпертекстів HTML.

Мета: Ознайомитись з технологією створення Web-сайтів. Вивчення мови розмітки гіпертексту HTML. Вивчити основні теги Web-документу.

Звіт про виконання роботи має містити:

- виконане практичне завдання;

- відповіді на контрольні питання;

- висновок.

Теоретичні відомості

Як влаштований HTML–документ

HTML-документ – це текстовий файл з розширенням *.htm (Unix-системи можуть містити файли з розширенням *.html).

Текстовий редактор, наприклад, WordPad або Notepade (Блокнот) використовується для підготовки HTML-файлів, а оглядач, наприклад, Internet Explorer – як інструмент контролю за зробленим.

Приклад 1. У текстовому редакторі, наприклад WordPad або Notepade (Блокнот) введіть простий HTML-документ:

<html> <head> <title> Приклад 1 </title> </head> <body> <H1> Початок! </H1> <P> Це найпростіший приклад HTML-документа. </P> <P> Цей sample.htm-файл може бути одночасно відкритий і у Notepad (або WordPad), і у Internet Explorer. Збережіть зміни в Notepad (Файл–Сохранить). Відкрийте sample.htm у Internet Explorer, щоб побачити зміни реалізовані у HTML-документі. </P> </body> </html>

Для зручності читання були введені абзаци, але у HTML це не обов'язково. Браузери ігнорують символи кінця рядку і пропуски у HTML–файлах. Змініть sample1.htm таким чином і збережіть зміни:

<html> <head> <title>Приклад 1 </title> </head> <body> <H1> Початок! </H1> <P>Це найпростіший приклад HTML–документа..</P> <P> Цей sample.htm–файл може бути одночасно відкритий і у Notepad (або WordPad), і у Internet Explorer. Збережіть зміни в Notepad (Файл–Сохранить). Необхідно відкрити sample.htm у Internet Explorer, щоб побачити зміни реалізовані у HTML–документі.</P> </body> </html>

Зробіть активним вікно Internet Explorer з відкритим файлом sample1.htm і застосуйте команду Обновить.

Вся інформація про форматування документа зосереджена в його фрагментах, що знаходяться між знаками "<" і ">". Такий фрагмент (наприклад, <html>) називається тегом (англійською–tag).

Більшість HTML–тегів–парні, на кожний тег, що відкривається <tag> є тег, що закривається</tag> з тим же ім'ям, але додається "/".

Теги можна вводити як великими, так і маленькими літерами. Наприклад, теги <body>, <BODY> и <Body> будуть сприйматись браузером однаково.

Багато тегів, крім імені, можуть містити атрибути –елементи, що дають додаткову інформацію про те, як браузер повинен обробляти поточний тег.

Обов'язкові теги

<html>... </html>

Тег <html> відкриває HTML–документ. Тег </html> – завершує HTML–документ.

<head>... </head>

Ця пара тегів вказує на початок і кінець заголовку документа. Крім назви документа, в цей розділ можна додати багато службової інформації.

<title>... </title>

Все, що знаходиться між мітками <title> і </title>, тлумачиться оглядачем як назва документа. Оглядач показує назву поточного документа у заголовку вікна. Рекомендується назва не довша 64 символів.

<body>... </body>

Ця пара тегів вказує на початок і кінець HTML–документа, тіло і визначає вміст документа.

Теги форматування

<H1>... </H1>–<H6>... </H6>

Теги виду <Hi> (де i–цифра від 1 до 6) описують заголовки шести різних рівнів. Заголовок першого рівня–самий крупний, шостого рівня–самий дрібний.

<P>... </P>

Така пара тегів описує абзац. Все, що знаходиться між <P> і </P>, сприймається як один абзац.

Теги <Hi> і <P> можуть містити додатковий атрибут ALIGN ("вирівнювати"), наприклад:

<H1 ALIGN=CENTER> Вирівнювання заголовку по центру</H1>

або

<P ALIGN=RIGHT> Зразок абзацу з вирівнюванням по правому краю </P>

Приклад 2. У редакторі Notepade створіть файл sample2.htm з таким вмістом:

<html> <head> <title>Приклад 2</title> </head> <body> <H1 ALIGN=CENTER>Продовження!</H1> <H2>Це складніший приклад HTML–документа</H2> <P>Тепер ми знаємо, що абзац можна вирівнювати не тільки вліво, </P> <P ALIGN=CENTER> але й по центру </P> <P ALIGN=RIGHT> або по правому краю.</P> </body> </html>

Перегляньте файл sample2.htm у браузері Internet Explorer.

Непарні теги та &–послідовності

<BR>

Цей тег використовується для переходу на новий рядок, не перериваючи абзац.

Приклад 3. У редакторі Notepade створіть файл sample3.htm з таким вмістом:

<html> <head> <title>Приклад 3</title> </head> <body> <H1>Деякі положення</H1> <H2>Основи роботи</H2> <P>HTML–файли розробляються на локальному диску <BR> Іншими словами, комп'ютер, на якому виконуються роботи може і не мати підключення до Інтернет<BR> *.htm–файл може бути одночасно відкритий і у Notepad (або WordPad), і у Internet Explorer. <BR> Для того, щоб побачити зміни, що зроблені у текстовому редакторі, у Internet Explorer, застосовується команда Обновить <BR> </body></html>

<HR>

Тег <HR> описує горизонтальну лінію:

Тег може включати атрибути SIZE (визначає товщину лінії в пікселях) і/або WIDTH (визначає розмах лінії в процентах від ширини екрана).

Приклад 4. У редакторі Notepade створіть файл sample4.htm колекції горизонтальних ліній з таким вмістом:

<html> <head> <title>Приклад 4</title> </head> <body> <H1>Колекція горизонтальних ліній</H1> <HR SIZE=2 WIDTH=100%><BR> <HR SIZE=4 WIDTH=50%><BR> <HR SIZE=8 WIDTH=25%><BR> <HR SIZE=16 WIDTH=12%><BR> </body> </html>

Amp;–послідовності

Символи "<" і ">" сприймаються браузерами як початок і кінець HTML–тегів. Для того, щоб показати ці символи на екрані в HTML використовуються &–послідовності (символьні об'єкти або эскейп–послідовності). Браузер показує на екрані символ "<", коли зустрічається в тексті послідовність <. Знак ">" – кодується послідовність > (за першими буквами англійських слів greater than–більше, ніж).

Символ "&" (амперсанд) кодується послідовністю &

Послідовність лапки (") кодується послідовністю "

Крапка з комою – є обов'язковими елементами &– послідовності. Крім того, всі літери, що складають послідовність, повинні бути в нижньому регістрі (тобто маленькі). Використання тегів типу &QUOT; або &AMP; не допускається.

&–послідовності визначені для всіх символів з другої половини ASCII–таблиці (куди входять і російські букви). Деякі сервери не підтримують восьми бітну передачу даних, і тому можуть передавати символи з ASCII–кодами вище 127 тільки у вигляді &–послідовностей.

Коментарі

Браузери ігнорують будь–який текст, що розміщений між <!–– і ––>. Це зручно для розміщення коментарів.

<!–– Це коментар ––> 3. Форматування шрифта

HTML допускає два підходи до шрифтового виділення фрагментів тексту. З одного боку, можна прямо вказати, що шрифт на деякій ділянці тексту повинен бути жирним або нахиленим, тобто змінити фізичний стиль тексту. З іншого боку, можна помістити деякий фрагмент тексту, що має деякий відмінний від нормального логічний стиль, залишивши інтерпретацію цього стилю браузеру.

Фізичні стилі

Під фізичним стилем прийнято розуміти пряму вказівку браузеру на модифікацію поточного шрифту. Наприклад, все, що знаходиться між тегами <B> і </B>, буде написано жирним шрифтом. Текст між мітками <I> і </I> буде написаний нахиленим шрифтом.

Текст, розміщений між тегами <TT> і </TT>, буде написаний шрифтом, що імітує друкарську машинку, тобто має фіксовану ширину символів.

Логічні стилі

При використанні логічних стилів автор документа не може знати напевне, що побачить на екрані читач. Різні браузери відтворюють одні й ті ж теги логічних стилів по–різному. Деякі браузери ігнорують деякі мітки і показують нормальний текст замість виділеного логічним стилем. Приклади логічних стилів.

<EM>... </EM>

Від англійського emphasis–акцент.

<STRONG>... </STRONG>

Від англійського strong emphasis–сильний акцент.

<CODE>... </CODE>

Рекомендується використовувати для фрагментів вихідних текстів.

<SAMP>... </SAMP>

Від англійського sample–взірець. Рекомендується використовувати для демонстрації взірців повідомлень, що виводяться на екран програмами.

<KBD>... </KBD>

Від англійського keyboard–клавіатура. Рекомендується використовувати для вказівки того, що потрібно ввести з клавіатури.

<VAR>... </VAR>

Від англійського variable–змінна. Рекомендується використовувати для написання імен змінних.

Приклад 5. У редакторі Notepade створіть файл sample5.htm з таким вмістом:

<html> <head> <title>Приклад 5</title> </head> <body> <H1>Шрифтове виділення фрагментів текста</H1> <P> Ми знаємо, що фрагменти тексту можна виділяти <B> жирним </B> або <I> нахиленим </I> або <U>підкреслиним</U>шрифтами. Крім того, можна включати в текст фрагменти з фіксованою шириною символу <TT>(імітація друкарської машинки)</TT></P> <P>Існує ряд логічних стилів:</P> <P><EM>EM – акцент </EM><BR> <STRONG>STRONG – сильний акцент </STRONG><BR> <CODE>CODE – для фрагментів вихідних текстів</CODE><BR> <SAMP>SAMP – взірець </SAMP><BR> <KBD>KBD – клавіатура</KBD><BR> <VAR>VAR – змінна </VAR></P> </body> </html> 4. Організація тексту всередині документа

HTML дозволяє визначати вигляд цілих абзаців тексту. Абзаци можна організовувати в списки, виводити їх на екран у відформотованому вигляді тощо. Розберемо все по порядку.

Маркіровані списки: <UL>... </UL>

Текст, розташований між мітками <UL> і </UL>, сприймається як маркірований список. Кожен новий елемент списку починається з тегу <LI>. Наприклад, щоб створити маркірований список:

· 1 елемент списку;

· 2 елемент списку;

· 3 елемент списку.

необхідно записати такий HTML–текст:

<UL> <LI>1 елемент списку; <LI>1 елемент списку; <LI>1 елемент списку; </UL>

У тега <LI> немає парного закриваючого тегу.

Нумеровані списки: <ol>... </ol>

Текст, розташований між мітками <ol> і </ol>, сприймається як нумерований список. Кожен новий елемент списку починається з тегу <LI>. Наприклад, щоб створити нумерований список:

1 елемент списку;

2 елемент списку;

3 елемент списку.

необхідно записати такий HTML–текст:

<OL> <LI>1 елемент списку; <LI>2 елемент списку; <LI>3 елемент списку; </OL>

Приклад 6. У редакторі Notepade створіть файл sample6.htm з таким вмістом:

<html> <head> <title>Приклад 6</title> </head> <body> <H1>Створення маркірованих списків</H1> <UL> <LI>1 елемент списку; </LI> <LI>1 елемент списку; </LI> <LI>1 елемент списку; </LI></UL><H1>Створення нумерованих списків</H1> <OL> <LI>1 елемент списку; </LI> <LI>2 елемент списку; </LI> <LI>3 елемент списку; </LI></OL><DT>Списки визначень <DD>Цей вид списків складніший, ніж два попередніх, але він виглядає більш ефектно. <P>Списки можна вбудовувати один в другий, але не слід вбудовувати багато рівнів. </P> <P>Всередині елемента списку може знаходитись декілька абзаців. Всі абзаци при цьому будуть мати однакове ліве поле. </P> </DL> </body> </html> Перегляньте результат у оглядачі. Форматированный текст: <PRE>... </PRE>

Текст, розміщений між мітками <PRE> и </PRE> (від англійського preformatted–попередньо форматований), виводиться браузером на екран як є–зі всіма пропусками, символами табуляції і кінця рядку.

Текст с отступом: <BLOCKQUOTE>... </BLOCKQUOTE>

Текст, розміщений між мітками <BLOCKQUOTE> і </BLOCKQUOTE>, виводиться браузером на екран зі збільшеним лівим полем.

Таблиці

Таблиці потрібні для представлення інформації в табличному виді, а також для необхідного розміщення тексту та рисунків.

Приклад 7. У редакторі Notepade створіть файл sample7.htm. Коментарі можна не друкувати.

<HTML> <HEAD> <TITLE>Приклад 10</TITLE> </HEAD> <H1>Найпростіша таблиця </H1> <TABLE BORDER=1> <!–Це початок таблиці–> <CAPTION> <!–Це заголовок таблиці–> У таблиці може бути заголовок </CAPTION> <TR> <!–Це початок першого рядка–> <TD> <!–Це початок першої комірки–> Перший рядок, перший стовпчик </TD> <!–Це кінець першої комірки–> <TD> <!–Це початок другої комірки–> Перший рядок, другий стовпчик </TD> <!–Це кінець другої комірки–> </TR> <!–Це кінець першого рядка –> <TR> <!–Це початок другого рядка–> <TD> <!–Це початок першої комірки–> Другий рядок, перший стовпчик </TD> <!–Це кінець першої комірки–> <TD> <!–Це початок другої комірки–> Другий рядок, другий стовпчик </TD> <!–Це кінець другої комірки–> </TR> <!–Це кінець другого рядка–> </TABLE> <!–Це кінець таблиці–> </BODY> </HTML>

Перегляньте sample7.htm у оглядачі.

Таблиця починається з тегу <TABLE> і закінчується тегом </TABLE> . Тег <TABLE> може включати атрибути:

ALIGN Встановлює розташування таблиці стосовно полів документа. Припустимі значення: ALIGN=LEFT (вирівнювання вліво), ALIGN=CENTER (вирівнювання по центрі), ALIGN=RIGHT (вирівнювання вправо). WIDTH Ширина таблиці. Її можна задати в пікселях (наприклад, WIDTH=400) або у відсотках від ширини сторінки (наприклад, WIDTH=80%). BORDER Встановлює ширину зовнішньої рамки таблиці й комірок у пікселях (наприклад, BORDER=4). Якщо атрибут не встановлений, таблиця показується без рамки. CELLSPACING Встановлює відстань між рамками комірок таблиці в пікселях (наприклад, CELLSPACING=2). CELLPADDIN Встановлює відстань між рамкою комірки і текстом у пікселях (наприклад, CELLPADDING=10).

Таблиця може мати заголовок (<CAPTION>... </CAPTION>), хоча заголовок не є обов'язковим. Тег <CAPTION> може включати атрибут ALIGN. Припустимі значення: <CAPTION

ALIGN=TOP> (заголовок міститься над таблицею) і <CAPTION ALIGN=BOTTOM> (заголовок міститься під таблицею).

Кожен рядок таблиці починається з тега <TR> і закінчується тегом </TR> . Мітка <TR> може включати наступні атрибути:

ALIGN Встановлює вирівнювання тексту в комірках рядка. Припустимі значення: ALIGN=LEFT (вирівнювання вліво), ALIGN=CENTER (вирівнювання по центру), ALIGN=RIGHT (вирівнювання вправо). VALIGN Встановлює вертикальне вирівнювання тексту в комірках рядка. Припустимі значення: VALIGN=TOP (вирівнювання по верхньому краю), VALIGN=MIDDLE (вирівнювання по центру), VALIGN=BOTTOM (вирівнювання по нижньому краю).

Кожна комірка таблиці починається з тега <TD> і закінчується тегом </TD> . Тег <TD> може включати наступні атрибути:

NOWRAP Присутність цього атрибуту означає, що вміст комірки повинен бути показаний в один рядок. COLSPAN Встановлює "розмах" комірки по горизонталі. Наприклад, COLSPAN=3 означає, що комірка простирається на три стовпчики. ROWSPAN Встановлює "розмах" комірки по вертикалі. Наприклад, ROWSPAN=2 означає, що комірка займає два рядки. ALIGN Встановлює вирівнювання тексту в комірці. Припустимі значення: ALIGN=LEFT (вирівнювання вліво), ALIGN=CENTER (вирівнювання по центру), ALIGN=RIGHT (вирівнювання вправо). VALIGN Встановлює вертикальне вирівнювання тексту в комірці. Припустимі значення: VALIGN=TOP (вирівнювання по верхньому краю), VALIGN=MIDDLE (вирівнювання по центру), VALIGN=BOTTOM (вирівнювання по нижньому краю). WIDTH Встановлює ширину комірки в пікселях (наприклад, WIDTH=200). HEIGHT Встановлює висоту комірки в пікселях (наприклад, HEIGHT=40).

Якщо комірка таблиці порожня, навколо неї не малюється рамка. Якщо комірка порожня, а рамка потрібна, в комірку можна ввести символьний об'єкт   (non–breaking space – пробіл, що не розриває,). Комірка як і раніше буде порожньою, а рамка навколо неї буде.

Будь–яка комірка таблиці може містити в собі іншу таблицю.

6. Посилання на інший документ (загальні посилання)

В HTML перехід від одного фрагмента текста до іншого задається за допомогою тега наступного вигляду:

<A HREF=" [адреса переходу] "> виділений фрагмент текста </A>

В якості параметра [адреса переходу] може використовуватись декілька типів аргументів. Саме найпростіше — це задати і’мя іншого HTML–документа, до якого потрібно перейти. Наприклад:

<A HREF=" index.html "> Перейти до головної сторінки </A>

Такі фрагменти HTML–текста, як правило, автоматично виділяються кольором або оформлюються підкреслюванням. Вищезазначене посилання при натисканні на текст "Перейти до головної сторінки" дозволить завантажити у поточне вікно документ index.html. Якщо у адресі переходу не вказаний каталог, перехід буде виконаний всередині поточного каталогу. Якщо в адресі переходу не вказаний сервер, перехід буде виконаний на поточному сервері. Якщо необхідно зіслатися на сторінку за межами поточного каталогу, але ту, що знаходиться на поточному сервері, записується:

<A HREF="../folder/index.htm">

Адреси файлів. Для виклику віддалених файлів, тобто файлів, які є на серверах у мережі Internet, адресу записують із зазначеням назви протоколу доступу http і URL-адреси файлу, наприклад,

"http://www.polynet.lviv.ua/ourpage.htm".

Для доступу до файлів на локальному диску використовують протокол доступу file: " file:///диск:/ шлях до файлу".

Наприклад, "file:///d:/mycatalog/mypage.htm". Назву протоколу можна інколи не писати, наприклад, SRC="c:/windows98/JIec.bmp".

Якщо графічні чи інші файли є в тому ж каталозі, що основний html-файл, то достатньо зазначити лише назву файлу, наприклад, SRC= "myfoto.gif". Якщо файл є в деякому сусідньому каталозі images, то шлях до нього можна подати так: "../images/myfoto.gif". Отже, тег IMG може мати такий конкретний вигляд:

<IMG SRC="c:/windows98/Лec.bmp" АLТ="Ліс">.

Вставляння гіперпосилань. Гіперпосилання є двох видів: 1) на файл; 2) на деяке місце на даній сторінці: початок сторінки (top), кінець сторінки (bottom), на позначений текст. Гіперпосилання вставляють за допомогою парного тега <А>...</А> з параметром HREF = "адреса файлу". Тут замість адреси можуть стояти слова top чи bottom чи текст, що є позначкою.

Гіперпосиланням може бути текст або деяке графічне зображення. Розглянемо випадок, коли гіперпосиланням є текст. Нехай у реченні "Мене звуть Світлана" слово "Світлана" потрібно зробити гіперпосиланням на файл "file2.htm" чи "newinf.htm", що містить додаткові відомості про Світлану. Це роблять так:

Мене звуть <А HREF = "newinf.htm"> Світлана</А>.

У результаті цього на Web-сторінці слово Світлана буде підкреслене і зображене іншим кольором. Колір гіперпосилання визначається у тезі BODY параметром LINK = "колір". Крім цього корисними є ще два параметри: VLINK= "інший колір" — змінює колір гіперпосилання на інший після першого використання; ALINK = "ще інший колір" — змінює колір щойно активізованого гіперпосилання на ще інший.

Тепер розглянемо як деяке графічне зображення зробити гіперпосиланням. Для цього в середині тега <А>...</А>потрібно використати тег IMG. Наприклад, щоб фотографія Світлани, що є у файлі "svitlana.gif", була в рамці й стала гіперпосиланням на файл new-inf.htm, пишуть так:

<А HREF = "newinf.htm"><IMG SRC = "svitlana.gif" BORDER =8 ></A> Клацнувши на Web-сторінці на фотографії Світлани, відкриємо файл newinf.htm з додатковою інформацією про неї.

Будь-яку піктограму (картинку) можна вставити автономно чи як гіперпосилання, оскільки вона зберігається також у графічному файлі. Розглянемо другий тип гіперпосилань — посилання в межах сторінки. Спочатку потрібно позначити місце на сторінці, куди здійснюватиметься перехід. Якщо з деякого місця перехід має виконуватися на початок сторінки, то в те місце html-файлу, що відповідає початку сторінки, вводять тег, який називається якорем:

<А NAME="#початок"></А>.

Аналогічно позначають деяке місце в кінці файлу:

<А NАМЕ="#кінець"></А>.

Якір можна кинути в будь-якому місці тексту так:

<А NАМЕ="#мояпозначка"х/А>.

Тепер на сторінці розміщують гіперпосилання на створені позначки (якори): <А HREF="#початок'' або "#кінець" або "#моя позначка"> текст гіперпосилання </А>.

Якщо одна сторінка займає декілька екранів, то в кінці сторінки вартує вставити гіперпосилання для переходу на початок, наприклад, так: А тепер можете перейти <А HREF="#початок>Ha початок</А> сторінки.

Приклад 8. У редакторі Notepade модифікуйте файли sample1.htm– sample7.htm, додавши до них навігаційні панелі. Формування горизонтальної навігаційної панелі у документі sample1.htm може виглядати так:

…

<table>

<tr>

<td>приклад 1</td>
<td><a href=”sample2.htm”>приклад 2</a></td><td><a href=”sample3.htm”>приклад 3</a></td></tr></table>…Зверніть увагу на те, що на сторінці не створюється посилання саме на себе.