Лабораторна робота №2Тема: Шрифти, списки і таблиці Питання для обговорення:удоскональте свою web-сторінку, створивши в ній два списки і таблицю за зразками. Методичні вказівки для студентів 1. Тег завдання параметрів шрифту FONT. Щоб задати назву конкретного шрифту, його розмір і колір, використовують парний тег FONT із параметрами FACE, SIZE та COLOR, наприклад, <FONT FACE = "Decor, Arbat, Kudriashov"; SIZE = +2 COLOR = "red">; Уміст контейнера (текст) </FONT>; Дія тега. Якщо на комп'ютері клієнта встановлено шрифт Decor, то він буде застосований до цього тексту, інакше броузер застосує шрифт Arbat чи Kudriashov, або деякий свій стандартний шрифт, наприклад Times New Roman. Розміри символів шрифту можуть бути від 1 до 7. Розмір 3 вважається стандартним, він орієнтовно відповідає 10 пунктам. Розмір 7 - найбільший. Число 2 як значення параметра SIZE означає другий розмір шрифту, число +2 означає, що розмір шрифту має бути на дві одиниці більший, аніж стандартний, тобто п'ятий, число -2 означатиме перший розмір шрифту - на дві одиниці менший, аніж стандартний. Для зміни стандартного розміру шрифту застосовують одинарний тег BASEFONT, який має ті самі параметри, що і тег FONT. Колір тексту буде червоний. Основні кольори мають такі назви: black - чорний green - зелений navy - темно-синій teal - бірюзовий silver - сірий lime - яскраво-зелений blue - синій aqua - блакитний maroon - малиновий olive - темно-зелений purple - бузковий gray - темно-сірий red - червоний yellow - жовтий fushsia - рожевий while - білий Різних можливих відтінків цих кольорів є 16 мільйонів. Відтінки задають спеціальними шістнадцятковими кодами, як це прийнято в графічних редакторах, наприклад, один з відтінків сірого кольору має код #ff7800. Приклад 1. Розгляньте html-файл (file3.htm) <HTML> <HEAD> <TITLE> My new web-page </TITLE> </HEAD> <!--Текст в кодах можна записувати підряд--!> <BODY BGCOLOR = "aqua" TEXT = "red"> <H2> Це web-сторінка Світлани Марущак</Н2> <HR> <CENTER> <В>Привіт!</В> Мене звати <В> Світлана </В> </CENTER><P> Я навчаюся в 11 <SUP><I>мy</I></SUP> класі середньої школи <І> № 75 міста Львова </І>. Мені 16 років. Мої улюблені предмети: інформатика, англійська мова, історія. Я люблю слухати гарну музику, читати пригодницькі романи, подорожувати влітку, кататися на гірських лижах узимку, ходити на дискотеку будь-якої пори року. <BR> Я навчаюся на відмінно. Мрію вступити на навчання в Національний університет "JIьвівська політехніка ". <P> <СЕNТЕR>Колись тут буде моя фотографія. </CENTER> <P> Моя адреса: <В><I>79054, Львів-54, п.с. 580 </I> </B> <HR> </BODY> </HTML>
Puc. З. Відображення файлу file3.htm у броузері Зауваження. У тексті використано так званий мнемо-код ", який відобразить на екрані лапки. Замість мнемо-коду можна використати числовий код ". Коди інших спецсимволів (<, >, & тощо) можна знайти у довідниках. Адреси можна записувати в парному тезі <ADDRESS>... </ADDRESS>. 2. Створення списків. Є три типи списків: ненумерований, нумерований, тлумачення. Список може мати заголовок, який охоплюють тегами <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>; так:
Наприклад, <LН>Я знаю такі нові терміни:</LH> <DL> <DT> HTML <DD> <I>мова для розмічування гіпертекстових web-сторінок </I> <DT> броузер <DD> <I>програма для перегляду web- документів</I> <DT> тег <DD> <I>засіб для записування команд мовою HTML</I> </DL> На екрані отримаємо: Я знаю такі нові терміни: HTML мова для розмічування гіпертекстових web-сторінок броузер програма для перегляду web-документів тег засіб для записування команд мовою HTML 3. Створення таблиць. У звичайних текстових редакторах таблиці використовують для наочного подання числової чи текстової інформації. У web-дизайні таблиці відіграють більшу роль. Часто їх використовують для позиціювання графічних чи інших об'єктів на екрані. Такі таблиці утворюють з невидимими межами (рамками), а в клітинках розташовують картинки, тексти тощо. Таблиці створюють за допомогою таких тегів: <TABLE параметри> <ТС> Заголовок таблиці </ТС> Тут пишемо теги для заповнення клітинок таблиці рядок за рядком </TABLE> Для заповнення клітинок таблиці використовують такі парні теги (закриваючі теги можна не зазначати):
Заголовки рядків і стовпців виводитимуться товстішим шрифтом. Приклад 2. Створимо на web-сторінці таблицю-витяг з табеля успішності Світлани за три перші чверті з трьох предметів: Інформатики, геометрії та алгебри: <CENTER> <TABLE BORDER=3 BGCOLOR="yellow" BORDER-COLOR="green"> <TC><I> Мої оцінки за три чверті: </I></ТС> <TR> <TH></TH> <ТН>І чверть </ТН> <ТН>II чверть</ТН> <ТН>III чверть</ТН> </TR> <TR> <TH АLIGN="lеft">Інформатика</ТН> <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>
Рис. 4. Вигляд таблиці у броузері Щоб об'єднати у рядку декілька послідовних клітинок, наприклад, дві в одну, у відповідному першому тезі <ТН>; чи <TD>; записують параметр ROWSPAN = 2. А щоб об'єднати у стовпці дві клітинки в одну, використовують параметр COLSPAN=2. Колір рамки таблиці задають параметром BORDERCOLOR = "колір рамки", а колір тла клітинок - параметром BGCOLOR="колір фону";. Товщину рамки в пікселях задають параметром BORDER="товщина рамки, 3";. Якщо значення параметра - число нуль або параметра немає, то рамка буде невидимою. 4. Вирівнювання елементів. За замовчуванням більшість елементів на сторінці, наприклад, текст, таблиці, списки, текст у клітинках таблиці, броузер вирівнює до лівого краю екрана чи клітинки. Часто тип вирівнювання потрібно змінити. Лінії можна вирівнювати до центру екрана чи до правого краю. Таблиці вирівнюють відносно екрана або тексту, який її обмежує. Текст у клітинках таблиці вирівнюють до центру чи до країв у горизонтальному чи вертикальному напрямках. Для цього до об'єктів застосовують теги вирівнювання 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%>; задає ширину таблиці півсторінки у горизонтальному напрямку. Параметр SUMMARY="текст"; використовують для інформації про призначення і структуру таблиці для клієнських броузерів, що здійснюють невізуальне подання сторінки для осіб з фізичними обмеженнями, синтезують звук чи базуються на принципах азбуки Бройля. Щоб створити заголовок таблиці, застосовують елемент CAPTION з параметром ALLIGN, наприклад, так: <CAPTION ALLIGN="bottom">Цe моя таблиця </CAPTION>;. Параметри WIDTH і SIZE застосовують також для проведення ліній різної довжини і товщини, наприклад, тег <HR SIZE=30 COLOR="red">; замість звичайної лінії дає червону смугу товщиною 30 пікселів. Довідка. Інформацію можна подати у вигляді таблиці без рамок за допомогою парного тега <PRE>...</PRE>;. Текст у середині цього тега оформляють засобами табуляції. Броузер такий текст переформатовувати не буде. Хід роботи: 1. Створіть html-файл із розповіддю про себе. Скористайтесь зразком прикладу 1. У списках зазначте свої уподобання, місця навчання, праці тощо. 2. Збережіть файл на диску як file3.htm і перегляньте його у броузері. 3. Переробіть файл file3.htm, використавши два види списків. Новий файл назвіть file4.htm. Перегляньте його. 4. Проведіть на сторінці лінії різної ширини. 5. У файлі file4.htm створіть таблицю з даними про себе. Новий файл назвіть file5.htm. Перегляньте його у броузері.
|
