Читайте также: |
|
Мета. Створити web-сторінку з розповіддю про себе за зразками прикладів 1 і 2.
Хід роботи
1. Відкрийте редактор NotePad.
2. Створіть за допомогою текстового редактора html-файл з розповіддю про себе. Зробіть це так, як у прикладі 1, тобто без форматування тексту, і збережіть його командою Save as... з назвою filel.htm у власній папці. Тег <BODY> у файлі запишіть так: <B0DY TEXT = "red">.
3. Відкрийте файл filel.htm у броузері. Для цього відкрийте свою робочу папку і двічі клацніть мишею на назві файлу.
4. Поекспериментуйте з різними значеннями кольорів (green, white, yellow, blue, #ffaa55 тощо) параметрів BGCOLOR і TEXT. He забувайте кожного разу після внесення змін виконувати команду Save as... у програмі NotePad, а для перегляду файлу у броузері двічі клацати на назві файлу filel.htm.
5. Виконайте форматування тексту у файлі filel.htm подібно до прикладу 2 і збережіть файл із назвою file2.htm.
6. Усі заголовки створіть у броузері зеленим кольором.
7. Перегляньте цей файл за допомогою броузера і поекспериментуйте з тегами форматування тексту.
8. Поекспериментуйте з розмірами вікна, в якому демонструється документ. Переконайтеся, що броузер автоматично змінює розташування тексту, щоб його можна було переглядати без горизонтальної смуги прокручування (текстові редактори цього не роблять).
9. Використайте якнайбільше тегів форматування і надайте своїй сторінці якнайліпшого вигляду.
Шрифти, списки і таблиці
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 мільйонів. Відтінки задають спеціальними шістнадцятковими кодами, як це прийнято в графічних редакторах, наприклад, один з відтінків сірого кольору має код #ff 7800.
Приклад 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>му</I></SUP> класі середньої школи <І> № 75 міста Львова </І>. Мені 16 років. Мої улюблені предмети: інформатика, англійська мова, історія. Я люблю слухати гарну музику, читати пригодницькі романи, подорожувати влітку, кататися на гірських лижах узимку, ходити на дискотеку будь-якої пори року. <BR> Я навчаюся на відмінно. Мрію вступити на навчання в Національний університет "Львівська політехніка ". <P>
<CENTER>Колись тут буде моя фотографія. </CENTER> <P>
Моя адреса: <В><І>79054, Львів-54, п.с. 580 </І></В> <HR>
</BODY> </HTML>
Зауваження. У тексті використано так званий мнемокод ", який відобразить на екрані лапки. Замість мнемокоду можна використати числовий код ". Коди інших спецсимволів (<, >, & тощо) можна знайти у довідниках. Адреси можна записувати в парному тезі <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="l">
<LІ>Інформатика
<LI>Англійська мова
<LI>Історія </OL>
На екрані отримаємо: Мої улюблені предмети:
Дата добавления: 2015-10-02; просмотров: 47 | Нарушение авторских прав
<== предыдущая страница | | | следующая страница ==> |
Ознайомлення з мовою HTML | | | Інформатика |