- •1Правила побудови html-документів
- •1.1Мова html
- •1.2Історія розвитку html
- •1.3 Основні елементи мови htMl
- •1.4 Групи тегів html
- •1.5 Розділ head документа
- •Назва документа
- •1.6 Розділ документа body
- •2.Форматування тексту
- •2.1Теги рівня блоку і послідовні теги
- •2.2 Логічне та фізичне форматування
- •2.3 Теги логічного форматування
- •2.4 Теги фізичного форматування тексту
- •Мал. Використання вкладених тегів форматування тексту
- •Мал. 1.4. Отображение примера браузером Opera
- •Мал. 1.6. Призначення розмірів шрифтів
- •3.Форматування html-документа
- •3.1Поділ на абзаци
- •3.2Заголовки внутри html-документа
- •3.3 Горизонтальні лінії
- •Мал. 1.10. Так цитата виглядає у вікні браузера Opera
- •3.5 Спеціальні символи
- •4. Посилання на інші документи та файли
- •4.1 Організація посилань
- •4.2 Правила запису посилань
- •4.3Внутрішні посилання
- •4.4 Посилання на документи різних типів
- •5.Створня web-сайту
- •5.1 Початок створення web-сторінки
- •Створення шапки за допомогою html коду:
- •Висновок
- •Список використаних джерел
Мал. 1.6. Призначення розмірів шрифтів
<HTML>
<HEAD>
<TITLE>Призначення розмірів шрифтів</TITLE>
</HEAD>
<BODY>
<FONT SIZE=1>Шрифт розміру 1</FONT><BR>
<FONT SIZE=-1>Шрифт розміру 2</FONT><BR>
<FONT SIZE=3>Шрифт розміру 3</FONT><BR>
<FONT SIZE=4>Шрифт розміру 4</FONT><BR>
<FONT SIZE=5>Шрифт розміру 5</FONT><BR>
<FONT SIZE=+3>Шрифт розміру 6</FONT><BR>
<FONT SIZE=7>Шрифт розміру 7</FONT><BR>
</BODY>
</HTML>
COLOR
Цей параметр встановлює колір шрифту, який може задаватися за допомогою стандартних імен або у форматі #RRGGBB. Наведемо приклад документа з різнобарвним текстом.
<HTML>
<HEAD>
<TITLE>Вибір кольору шрифту</TITLE>
</HEAD>
<BODY>
<FONT COLOR=green>Текст зеленого кольору</FONT><BR>
<FONT COLOR=#FF0000>Текст червоного кольору</FONT><BR>
</BODY>
</HTML>
Тег <BASEFONT>
Тег <BASEFONT>використовується для вказівки розміру, типу і кольору шрифту в документі за замовчуванням. Ці значення обов'язкові для всього документа, однак можуть в потрібних місцях перевизначатися з допомогою тега <FONT>. Після закриваючого тега </FONT> дія тега <BASEFONT> відновлюється. Значення параметрів шрифтів, використовуваних за замовчуванням, можуть неодноразово перевизначатися в документі, тобто тег <BASEFONT> може з'являтися в документі будь-яку кількість разів.
Примітка
Тег <BASEFONT> може з'являтися також і в розділі <HEAD> документа. Зауважимо, що для тега <BASEFONT> не існує закриваючого тега.
В якості параметрів можуть використовуватися точно такі ж параметри, що і для тега <FONT>, а саме: FACE, SIZE і COLOR. Призначення та правила запису параметрів аналогічні.
Примітка
Браузер Netscape не допускає застосування параметра FACE тега <BASEFONT>.
Наведемо приклад використання тегу <BASEFONT>.
<HTML>
<HEAD>
<TITLE>Призначення розмірів шрифтів</TITLE>
</HEAD>
<BODY>
Текст, записаний на шрифт за замовчуванням.
<BASEFONT SIZE=2> <P>
Шрифт розміру 2. < BASEFONT SIZE=4>
<P>Шрифт розміру 4. <P>
<TABLE BORDER=1><TR><TD>Текст усередині комірки таблиці</TD>
</TR>
</TABLE>
<P> Текст після таблиці
</BODY>
</HTML>
У наведеному прикладі двічі змінюється розмір шрифту, використовуваного за замовчуванням. Спочатку він дорівнює 3 (за замовчуванням). Потім встановлюється рівним 2, далі — 4. Зверніть увагу на відображення цього прикладу (рис. 1.7). Видно, що для таблиць призначення тега < BASEFONT > не діє. Це характерно для багатьох браузерів, хоча формально порушує ідею застосування тега.
Мал. 1.7. Отображение примера С ТЭГОМ <BASEFONT> (браузером Опера)
3.Форматування html-документа
3.1Поділ на абзаци
Будь-які тексти, будь то шкільний твір, замітка в газеті чи технічний опис пристрою мають певну структуру. Елементами такої структури є заголовки, підзаголовки, таблиці, абзаци та ін.
Одним із перших правил складання практично будь-яких документів є розбиття тексту на окремі абзаци, що виражають закінчену думку. HTML-документи не є винятком з цього правила. При створенні документів за допомогою текстових редакторів розбиття на абзаци виконується вводом символу перекладу рядка. Більшість редакторів реалізує це при натисканні клавіші <Enter>. У HTML-документах символи перекладу рядка не приводять до утворення нового абзацу.
Мова HTML припускає, що автор документа нічого не знає про комп'ютері свого читача. Читач має право встановити будь-який розмір вікна і користуватися будь-яким з наявних у нього шрифтів. Це означає, що місце перенесення в рядку визначається тільки програмою перегляду і установками кінцевого користувача. Оскільки символи перекладу рядка оригінального документа ігноруються, то текст, відмінно виглядав у вікні редактора автора документа, може перетворитися в суцільний неудобочитаемый текст у вікні програми перегляду.
Уникнути цієї неприємності дозволяє застосування спеціального тега поділу на абзаци <P>. Перед початком кожного абзацу тексту слід помістити тег <P>. Закриваючий тег </P> не обов'язковий. Браузери зазвичай відокремлюють абзаци один від одного порожнім рядком.
Примітка
Браузери зазвичай інтерпретують кілька стоять поспіль тегів абзацу <P> як один. Те ж саме відноситься і до тегу переведення рядка <BR>. Тому створити кілька порожніх рядків за допомогою цих тегів не вдається.
Тег <P> може задаватися з параметром горизонтального вирівнювання ALIGN. Можливі значення параметра наведено в табл. 1.4. За умовчанням виконується вирівнювання по лівому краю.
Таблиця 1.4. Значення параметра ALIGN
Значення параметра ALIGN |
Дія |
LEFT |
Вирівнювання тексту по лівій межі вікна браузера |
CENTER |
Вирівнювання по центру вікна браузера |
RIGHT |
Вирівнювання по правій межі вікна браузера |
JUSTIFY |
Вирівнювання по ширині (по двом сторонам) |
Зауважимо, що вирівнювання по ширині (ALIGN = JUSTIFY) довгий час не підтримувалося браузерами. У багатьох описах мови HTML для значень параметра вирівнювання вказується тільки три варіанти (LEFT, CENTER і RIGHT). В даний час всі популярні браузери вміють виконувати вирівнювання по ширині.
Примітка
Відсутність вирівнювання по ширині в теперішній час не здається дивним. Цей режим застосовується дуже часто для друкованих видань. Достатньо взяти в руки будь-яку газету або уважно придивитися до абзаців даної книги — всі вони вирівняні по ширині. Однак для HTML-документів до останнього часу вирівнювання по ширині не допускалося. Всього лише пару років тому жоден браузер не мав такого режиму. Так, читачі, досі використовують браузер Netscape версії 3.x, не зможуть побачити рівні рядки в документі. Можна спробувати вгадати, які ще можливості з'являться в майбутньому браузерів, порівнявши можливості потужних текстових редакторів і сучасних браузерів.
Прикладом не реалізованих поки можливостей може бути автоматична розстановка переносів та ін.
Переклад рядка
При відображенні текстових документів у браузері місце переходу на новий рядок в межах абзацу визначається автоматично залежно від розміру шрифтів і розміру вікна перегляду. Перенесення рядка може здійснюватися тільки за символами-роздільниками слів (наприклад, прогалин). Іноді в документах потрібно задати примусове переведення рядка, що реалізується незалежно від настройок браузера. Для цього служить тег примусового переведення рядка <BR>, який не має відповідного закриваючого тега. Включення тега <BR> в текст документа забезпечить розміщення подальшого тексту з початку нового рядка. Наприклад, такий підхід може використовуватися для створення структур типу списків без використання спеціальних тегів розмітки списку. Або, наприклад, без даного тега не обійтися для відображення віршів і т. п.
Наведемо приклад використання примусового переведення рядка (рис. 1.8):
<HTML>
<HEAD>
<TITLE>Використання примусового переведення рядка</TITLE>
</HEAD>
<BODY>
Мені однаково, чи буду <BR>
Я жить в Україні, чи ні.<BR>
Чи хто згадає, чи забуде <BR>
Мене в снігу на чужині –<BR>
Однаковісінько мені. <BR>
В неволі виріс меж чужими,<BR>
І, не оплаканий своїми, <BR>
В неволі, плачучи, умру,<BR>
І все з собою заберу, <BR>
Малого сліду не покину.
<P>
<CITE>Т. Г. Шевченко. В казематі III</CITE>
</BODY>
</HTML>
Мал. 1.8. Тег <BR> можна використовувати для примусового переведення рядка
На відміну від тега абзацу <P> при використанні тега <BR> не буде утворена порожній рядок.
Використання тега <BR> вимагає обережності — можлива ситуація, коли браузер вже зробив переклад рядка за одне-два слова до того, як зустрів ваш тег <BR>. Це буває у разі, якщо ширина вікна програми перегляду читача менше, ніж той же параметр програми, за допомогою якої ви тестували ваш документ. При цьому може вийти, що в рядку посеред абзацу залишиться тільки одне слово, порушуючи тим самим красу компонування документа.
Примітка
При використанні тега <BR> для розбивки тексту, який обтікає зображення або таблиці, можна задавати параметр CLEAR, припиняє обтікання текстом. Про це можна прочитати в розділах 3 і 4. 6.2 Теги <NOBR>u <WBR> Бувають ситуації, коли потрібно виконати операцію протилежного призначення — заборонити переклад рядка. Для цього існує тег-контейнер <NOBR>. Текст, розмічений цим тегом, буде гарантовано розташовуватися в одній рядку, незалежно від її довжини. Якщо при цьому получающаяся рядок буде виходити за межі вікна браузера, то з'явиться горизонтальна смуга прокрутки.
Примітка
Для забезпечення нерозривності тексту, наявного в осередках таблиць, існує спеціальний параметр NOWRAP тега <TD>. Про це можна дізнатися у розділі 4. Размечая текст за допомогою тегу нерозривному рядка <NOBR> можна отримати дуже довгі рядки. Щоб цього уникнути, можна вказати браузеру читача місце можливого переведення рядка, що буде виконано тільки при необхідності (так званий "м'який" переклад рядка). Це можна здійснити, поставивши в потрібному місці тексту тег <WBR> (Word BReak), який так само, як і тег <BR>, не потребує закрывающем тезі.
Примечание
Тэг <WBR> вообще не поддерживается браузером Netscape. Браузер Microsoft Internet Explorer распознает этот тег только в тексте, размеченном тэгами <NOBR>.
