Форматування тексту для web-сторінок

Мова HTML .

Поняття про мову HTML

Для створення web-сторінок послуговуються гіпертекстовими редакторами, наприклад, HotMetalPRO, Hot Dog Professional, Netscape Editor, webedit, HTML Writer, HTML Assistant, HTMLed, де використовується мова HTML -Hyper Text Markup Language (мова для розмічування гіпер-текстових документів). Сучасні редактори, такі як FrontPage, Dream Viewer, MS Word тощо, дають змогу створювати web-сторінки методом конструювання, тобто без застосування кодів мови HTML. Вони генерують цей код автоматично.

Ми вивчатимемо два способи створення web-сторінки: за допомогою мови HTML; методом візуального конструювання засобами програм MS Word і FrontPage.

Розглянемо перший спосіб. Для підготовки html-файлу можна використати текстовий редактор Блокнот чи будь-який інший, що дає змогу готувати файли у текстовому форматі. Після написання html-файл потрібно зберегти на диску з деякою назвою з розширенням назви htm чи html.

Приклад. Структуру html-файлу продемонструємо за допомогою тексту, де деяка особа розповідає про себе:

<HTML> <!- Це файл filel.htm -> <HEAD> <TITLE> Назва вікна web-сторінки </TITLE> </HEAD> <BODY параметри > <!~ Далі йде текст, наприклад, такий. - > Мене звати Світлана. Мені 16 років. Я хочу стати web- дизайнером. Це моя перша web-сторінка. Тут я можу писати будь-який текст, наприклад, про себе і мої інтереси. Пізніше я навчуся вставляти фотографії, картинки, звук, від є о зображення шляхом посилання на відповідні графічні, звукові чи відеофайли. Я збережу цей файл на диску і відкрию його у броузері. Моя сторінка ще не красива і не цікава Але скоро я навчуся робити цікаві web-сторінки. Я розташую файл на сервері, і мою сторінку зможуть побачити в різних кінцях світу. </BODY> </НТМL>

Відкривши такий файл у броузері, побачимо 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”	Задає колір тексту (тут чорний) на сторінці

Форматування тексту для web-сторінок

Теги форматування символів тексту (вони парні):

<В> текст </В>	Товстий шрифт тексту
<U> текст </U>	Підкреслений шрифт
<SUB> текст </SUB>	Нижній індекс. Наприклад, щоб отримати вираз Н₂О, пишуть H<SUB>2</SUB>0
<SUP> текст </SUP>	Верхній індекс, наприклад, 1^а вулиця, а²
<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 З> < H 4>Я хочу стати web- дизайнером</ H 4> <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>. Текст у середині цього тега оформляють засобами табуляції. Броузер такий текст переформатовувати не буде.

Шрифти

Щоб задати назву конкретного шрифту, його розмір і колір, використовують парний тег FONT із параметрами FACE, SIZE та COLOR, наприклад,

<FONT FACE = "Decor, Arbat, Kudriashov" SIZE = +2 COLOR ="геd">Уміст контейнера (текст)

Дія тега. Якщо на комп'ютері клієнта встановлено шрифт Decor, то він буде застосований до цього тексту, інакше броузер застосує шрифт Arbat чиKudriashov або деякий свій стандартний шрифт, наприклад, Times New Roman.

Розміри символів шрифту можуть бути від 1 до 7. Розмір 3 вважається стандартним, він орієнтовно відповідає 10 пунктам. Розмір 7 - найбільший. Число 2 як значення параметра SIZE означає другий розмір шрифту, число +2 означає, що розмір шрифту має бути на дві одиниці більший, аніж стандартний, тобто п'ятий, число -2 означатиме перший розмір шрифту - на дві одиниці менший, аніж стандартний. Для зміни стандартного розміру шрифту застосовують одинарний тегBASEFONT, який має ті самі параметри, що і тег FONT. Колір тексту буде червоний.

Основні кольори мають такі назви:

black - чорний	green - зелений	navy - темно-синій
teal - бірюзовий	silver - сірий	while - білий
blue - синій	aqua-блакитний	maroon - малиновий
olive - темно-зелений	purple - бузковий	gray - темно-сірий
red - червоний	yellow - жовтий	fushsia - рожевий

Різних можливих відтінків цих кольорів є 16 мільйонів. Відтінки задають спеціальними шістнадцятковими кодами, як це прийнято в графічних редакторах, наприклад, один з відтінків сірого кольору має код #ff7800.

Приклад: Розгляньте html-файл (file3.htm)

<HTML> <HEAD> <TITLE> My new web-page </TITLE> </HEAD> <!-Текст в кодах можна записувати підряд ~> <BODY BGCOLOR = "aqua" TEXT = "red"> <H2> Це web-сторінка Світлани Марущак</Н2> <HR> <CENTER> < B >Привіт!</В>Мене звати <B> Світлана </B></CENTER><P> Я навчаюся в 11 <SUP><I>мy</I></SUP> класі середньої школи< I>№ 75 міста Львова </ I >. Мені 16 років. Мої улюблені предмети: інформатика, англійська мова, історія. Я люблю слухати гарну музику, читати пригодницькі романи, подорожувати влітку, кататися на гірських лижах узимку, ходити на дискотеку будь-якої пори року.<BR> Я навчаюся на відмінно. Мрію вступити на навчання в Національний університет Львівська політехніка <P><CENTER>Koлись тут буде моя фотографія. < /CENTER> < P > Моя адреса: < B >< I > 79054, Львів-54, п.с.580 < /I ></ B > </HR> </BODY> </HTML>

Зауваження. У тексті використано так званий мнемо-код ", який відобразить на екрані лапки. Замість мнемо-коду можна використати числовий код ". Коди інших спеціальних символів (<, >, & тощо) можна знайти у довідниках. Адреси можна записувати в парному тезі <ADDRESS> ... </ADDRESS>.

Створення списків

Є три типи списків: ненумерований, нумерований, тлумачення. Список може мати заголовок, який охоплюють тегами <LH>...</LH>, наприклад

<LH> Це заголовок списку </LН>.

Ненумерований список утворюють за допомогою парного тега <UL>...</UL> і одинарних тегів <LI>, наприклад, так:

<LH> Мої улюблені предмети :</LH> <UL> <LI> інформатика <LI> англійська мова <LI> історія </UL>

На екрані отримаємо:

Мої улюблені предмети: · інформатика · англійська мова · історія

Нумерований список створюють за допомогою парного тега <OL>... </OL> з необов'язковим параметром TYPE і одинарних тегів <LI> так:

<LH> Мої улюблені предмети :</LH> <OL TYPE=”1”> <LI> інформатика <LI> англійська мова <LI> історія </OL>

На екрані отримаємо:

Мої улюблені предмети: 1. інформатика 2. англійська мова 3. історія

Значення "і" чи "І" параметра TYPE задає нумерацію римськими малими (і, іі, ііі, iv,...) чи великими (І, II, III, IV,...) цифрами, а значення "а" чи "А" -латинськими малими (a, b, c, d,...) чи великими (А, В, С,...) літерами.

Список тлумачень використовують для пояснення термінів, створення словників тощо. Його утворюють за допомогою парного тега <DL>...</DL> і двох одинарних тегів <DT> і <DD> так:

< LH> 3аголовок</LH> <DL> <DT> термін <DD> тлумачення 1 <DD> тлумачення 2 </DL>

Наприклад:

<LН>Я знаю такі нові терміни: </LH> <DL> <DT> HTML <DD> <I> мова для розмічування гіпертекстових web-сторінок </І> <DT> броузер <DD> <1>програма для перегляду web-документів </І> <DT> тег <DD> <I> засіб для записування команд мовою HTML </I> </DL>

На екрані отримаємо:

Я знаю такі нові терміни: HTML мова для розмічування гіпертекстових web-сторінок броузер програма для перегляду web-документів тег засіб для записування команд мовою HTML

Створення таблиць

У звичайних текстових редакторах таблиці використовують для наочного подання числової чи текстової інформації. У web-дизайні таблиці відіграють більшу роль. Часто їх використовують для позиціювання графічних чи інших об'єктів на екрані. Такі таблиці утворюють з невидимими межами (рамками), а в клітинках розташовують картинки, тексти тощо.

Таблиці створюють за допомогою таких тегів:

<TABLE параметри > <ТС> Заголовок таблиці </ТС> Тут пишемо теги для заповнення клітинок таблиці рядок за рядком </TABLE>

Для заповнення клітинок таблиці використовують такі Парні теги, при цьому заголовки рядків і стовпців виводитимуться товстішим шрифтом (закриваючі теги можна не зазначати):

<TR>...</TR>	Формують рядок таблиці
<ТН>текст</ТН>	Формують клітинку з заголовком рядка чи стовпця
<ТВ>текст</ТВ>	Формують текст кожної клітинки

Приклад. Створимо на web-сторінці таблицю-витяг з табеля успішності Світлани за три перші чверті з трьох предметів: інформатики, геометрії та алгебри:

< CENTER > < TABLE BORDER = 10 BGCOLOR = "yellow" BORDERCOLOR =" green"> <TC >< I > Мої оцінки за три чверті: </ I ></ TC > < TR > < TH ></ TH > < TH >І чверть </ TH > < TH > ІІ чверть </ TH > < TH >ІІІ чверть </ TH > </ TR > < TR > < TH> < ALIGH="left"> Інформатика </ТН> <TD>11</TD> <TD>11< /TD> <TD>11< /TD> </TR> <TR> <TH > < ALIGN="left">Геометрія</TH> <TD>11< /TD> <TD>10</TD> <TD>10</TD> </TR> <TR> <TH > < ALIGN="left">Алгебра</TH> <TD>9</TD> <TD>10</TD> <TD>10</TD> </TR> </TABLE> </CENTER><P>

Вигляд таблиці у броузері:

Щоб об'єднати у рядку декілька послідовних клітинок, наприклад, дві в одну, у відповідному першому тезі <ТН> чи <TD> записують параметр ROWSPAN = 2. А щоб об'єднати у стовпці дві клітинки в одну, використовують параметр COLSPAN=2.

Колір рамки таблиці задають параметром BORDERCOLOR = "колір рамки", а колір тла клітинок - параметром BGCOLOR= "колір фону". Товщину рамки в пікселах задають параметром BORDER=" товщина рамки, 3".

Дата добавления: 2021-03-18; просмотров: 81; Мы поможем в написании вашей работы!

Поделиться с друзьями:

12 Следующая ⇒

Мы поможем в написании ваших работ!