КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Форматування тексту для web-сторінок
|
|
|
|
Тегова модель файлу. Тег BODY.
Команди мови HTML називаються тегами. Теги бувають одинарними і парними. Більшість тегів парні, як, наприклад, тег означення html-файлу: <HTML>... </HTML>. Такі теги називаються інакше контейнерами. Контейнер може містити текст та інші теги.
Парні теги позначають початок і кінець області дії відповідної команди. Теги записують у кутових дужках. Тег, що закриває область дії, має косу риску. Не забувайте її писати, інакше тег працюватиме неправильно.
Тег може містити параметри, які користувач записує у першому блоці тега через пропуск чи з нового рядка, наприклад, <BODY TEXT="red">...</BODY>. Нечислові значення параметрів прийнято записувати у лапках.
У середині пари тегів <HEAD>...</HEAD> описують заголовок документа. Головна частина заголовка документа - заголовок Windows-вікна, який пишуть у середині пари тегів <TlTLE>...</TITLE>. Інші елементи заголовка вивчатимемо пізніше.
Тег <!-- текст --> позначає коментар. Текст у середині цього тега виводитися на екран не буде. Коментар можна писати також у середині парного тега <COMMENT> текст-коментар </COMMENT>.
Зауваження. У багатьох книжках замість слова параметр вживають термін атрибут, а одинарний чи парний теги називають елементом, наприклад, елемент BODY тощо.
Елемент (тег) BODY
У середині пари тегів <BODY параметри >...</ВODY> записують увесь текст сторінки. Цей текст відображатиметься у вікні броузера.
Щоб на екрані відобразити звичайним способом стандартний текст, жодного програмування не потрібно - достатньо набрати потрібний текст. Якщо ж дизайнер хоче подати текст спеціально, щоб він виглядав якнайкраще, до тексту застосовують теги форматування. У цьому, зокрема, і полягає суть програмування мовою HTML.
|
|
|
Розглянемо головні параметри тега BODY:
| BACKGROUND= "d:\myweb\picturel.ipj" | Задає шлях до картинки для фону |
| BGCOLOR=”white” | Задає білий колір фону, якщо не використовується тло-картинка |
| BGPROPERTIES=”fixed” | Фонове зображення не прокручується |
| TEXT=”black” | Задає колір тексту (тут чорний) на сторінці |
Теги форматування символів тексту (вони парні):
| <В> текст </В> | Товстий шрифт тексту |
| <U> текст </U> | Підкреслений шрифт |
| <SUB> текст </SUB> | Нижній індекс. Наприклад, щоб отримати вираз Н2О, пишуть H<SUB>2</SUB>0 |
| <SUP> текст </SUP> | Верхній індекс, наприклад, 1а вулиця, а2 |
| <BIG> текст </BIG> | Великий шрифт |
| <SMALL> текст </SMALL> | Малий шрифт |
| <ЕМ> текст </ЕМ> або <І> </І> | Виокремлення курсивом тексту |
| <B><І> текст </I></B> | Товстий курсив. |
Теги для розміщення тексту (вони одинарні):
| <P> | Цей тег означає початок нового абзацу. Його можна записувати в кінці попереднього. Наступне після тега <Р> речення починатиметься з нового, вирівняного до лівого краю, абзацу без відступу. Між абзацами буде порожній рядок. Зауважимо, що тег <Р> може використовуватися як парний: <Р> текст абзацу </Р> |
| <BR> | Наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка |
| <HR> | У рядку буде проведена горизонтальна лінія |
Заголовок - окремий тип абзацу. Є шість видів заголовків, які відрізняються розмірами символів:
| Теги | Результат на екрані |
| <Н1>Заголовок 1</Н1> | Заголовок 1 |
| <Н2>Заголовок 2</Н2> | Заголовок 2 |
| <Н3>Заголовок 3</Н3> | Заголовок З |
| <Н4>Заголовок 4</Н4> | Заголовок 4 |
| <Н5>Заголовок 5</Н5> | Заголовок 5 |
| <Н6>Заголовок 6</Н6> | Заголовок 6 |
Заголовок за замовчуванням вирівнюється до лівого краю вікна. Якщо вирівнювання заголовка чи іншого елемента на сторінці потрібно задати явно, то використовують теги вирівнювання:
|
|
|
| <СENTER>елемент</CENTER> | Вирівнювання до центру |
| <LEFT>елемент</LEFT> | Вирівнювання до лівого краю |
| <RIGHT>елемент</RIGHT> | Вирівнювання до правого краю |
Зауваження. Теги заголовків не варто використовувати для створення звичайних абзаців з різними розмірами шрифту.
Розгляньте зразок форматування тексту для web-сторінки з розповіддю деякої особи про себе.
| <HTML> <!- Це файл file2.htm--> <HEAD> <TITLE>My web-page</TITLE> </HEAD> <BODY BGCOLOR = "yellow" TEXT = "navy"> <CENTER><Hl>Привіт!</Hl> <H2>Мене звуть Світлана </H2></CENTER> <HR> <HЗ> Мені 16 років </HЗ> <H4>Я хочу стати web- дизайнером</H4> <HR> Це моя <B>друга</B> спроба створити web-сторінку. Я вже вмію користуватися заголовками, вставляти лінії, форматувати текстові абзаци. Пізніше я навчуся вставляти <I> фотографії, картинки, звук,відео зображення </I> і шляхом посилання на відповідні <U> графічні, звукові чи відеофайли </U> <P> Я збережу цей файл на диску і відкрию його у броузері.</P> Цю web-сторінку я буду удосконалювати, її ще рано розміщувати на сервері. </HP> </BODY> </HTML> |
За замовчуванням більшість елементів на сторінці, наприклад, текст, таблиці, списки, Текст у клітинках таблиці, броузер вирівнює до лівого краю екрана чи клітинки. Часто тип вирівнювання потрібно змінити. Лінії можна вирівнювати до центру екрана чи до правого краю. Таблиці вирівнюють відносно екрана або тексту, який її облямовує. Текст у клітинках таблиці вирівнюють до центру чи до країв у горизонтальному чи вертикальному напрямках. Для цього до об'єктів застосовують теги вирівнювання CENTER, LEFT, RIGHT або у відповідних тегах <HR>, <TABLE>, <TH>, <TD> та в інших використовують параметр ALIGN зі значеннями "left" - зліва, "center" - до центру, "right" - справа, "top" -угорі, "middle" - посередині, "bottom" - унизу. Значення "top", "middle", "bottom" може мати також параметр VALIGN, який забезпечує вирівнювання у вертикальному напрямку.
Для вдалого розташування таблиць чи рисунків варто проекспериментувати з параметрами WIDTH і HEIGHT, які задають ширину і висоту елемента впікселах або відсотках до розмірів усього екрана, наприклад:
|
|
|
<TABLE WIDTH=300> - задає ширину таблиці 300 пікселів;
<TABLE WIDTH=50%> - задає ширину таблиці пів сторінки у горизонтальному напрямку.
Параметр "текст" використовують для інформації про призначення і структуру таблиці для клієнтських броузерів, що здійснюють невізуальне подання сторінки для осіб з фізичними обмеженнями, синтезують звук чи базуються на принципах азбуки Бройля.
Щоб створити заголовок таблиці, застосовують елемент CAPTION з параметром ALLIGN, наприклад, так:
<CAPTION ALLIGN="bottom">n,e моя таблиця </CAPTION>.
Параметри WIDTH і SIZE застосовують також для проведення ліній різної довжини і товщини, наприклад, тег
<HR SIZE=30 COLOR="red"> - замість звичайної лінії дає червону смугу товщиною 30 пікселів.
Довідка. Інформацію можна подати у вигляді таблиці без рамок за допомогою парного тега <PRE>...</PRE>. Текст у середині цього тега оформляють засобами табуляції. Броузер такий текст переформатовувати не буде.
|
|
|
|
Дата добавления: 2014-01-07; Просмотров: 1270; Нарушение авторских прав?; Мы поможем в написании вашей работы!