Файловый архив студентов. Файловый архив студентов.
1304 вуза, 5171 предмета.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Черкасский институт пожарной безопасности имени Героев Чернобыля
Предмет:
[НЕСОРТИРОВАННОЕ]
Файл:
ПЗ 2 модуль.doc
Скачиваний:
0
Добавлен:
01.05.2025
Размер:
5.17 Mб
Скачать
☆
►Содержание►

3. Логічне форматування.

Один із принципів HTML полягає в тому, що документи повинні мати певну логіку й структуру. Це дає читачеві документа максимальну свободу дій. Із цією метою в HTML передбачена велика кількість елементів форматування, які служать для виконання різних завдань.

В HTML є наступні елементи логічного форматування:

<CITE> (цитата) служить для виділення цитати. Цей елемент можна також використовувати для виділення назви книги або статті. Звичайно в цьому випадку використовується курсив.

Приклад:

<cite>Том Сойер</cite> ставиться до класичної американської літератури

<CODE> (код) призначений для виділення невеликої кількості комп'ютерного коду. Звичайно він використовується для коротких фрагментів. Для виділення більш довгих фрагментів використовується дескриптор <PRE>. Звичайно код виділяється «моноширинним» текстом.

Приклад:

Один з перших рядків, яку пише програміст на Pascal, це:<br><code>write('Hello, World!');</code>

<EM> (акцент) використовується для виділення фрагмента тексту, що має велике значення. Звичайно такий фрагмент виділяється курсивом.

Приклад:

О, бідний Йорик. Я знав його, <em>Гораціо</em>.

<KBD> (клавіатура) указує, що користувач повинен дати відповідь, використовуючи клавіатуру. Звичайно для клавіатурного тексту використовується «моноширинний» шрифт.

Приклад:

Щоб запустити декодер, введіть <kbd>Restore</kbd>, а потім введіть ваш пароль.

<SAMP> (зразок) використовується для виділення знаків, на яких автор прагне акцентувати увагу читача. Для тексту, до якого ставиться цей елемент, звичайно використовується «моноширинний» текст.

Приклад:

Букви <samp>AEIOU</samp> позначають голосні звуки англійської мови.

<STRONG> (важливий) використовується для виділення дуже важливого фрагмента тексту. Текст, до якого застосований цей елемент, звичайно виділяється напівжирним шрифтом.

Приклад:

Запам'ятайте головне правило: <strong>Не панікуйте!</strong>

Усі ці елементи є парними дескрипторами. Ці елементи є логічними стилями. Вони вказують намір автора, а не те, як повинен виглядати текст. Це важливо, оскільки в майбутньому можуть бути створені програми для перегляду Web-Сторінок у пошуку, наприклад, цитат.

4. Елементи фізичного форматування.

Як було показано вище, HTML залишає оформлення зовнішнього вигляду документа на розсуд браузера. Але також можна використовувати елементи фізичного форматування, які можуть визначати вид тексту у вікні браузера.

Є наступні елементи фізичного форматування.

<B> 

виділяє текст напівжирним шрифтом

<I>

виділяє текст курсивом

<TT>

відображає текст із використанням стилю шрифту друкованої машинки

<U>

виділяє текст підкресленням

<STRIKE>

проводить горизонтальну лінію по середині знаків тексту

<BIG>

використовує для зображення тексту шрифт великого розміру

<SMALL>

використовує для зображення тексту шрифт маленького розміру

<SUB>

переносить виділений фрагмент тексту нижче рівня основного тексту

<SUP>

переносить виділений фрагмент тексту вище рівня основного тексту

Усі перераховані дескриптори є парними

Приклад:

<html>

<body>

Цей текст виділений <b>напівжирним</b> шрифтом<br>

Цей текст виділений <i>курсивом</i><br>

Це текст <tt>телетайпа</tt><br>

Цей текст <u>підкреслений</u><br>

Це приклад <strike>закреслювання</strike><br>

Це <big>великий</big> текст<br>

Це <small>дрібний</small> текст<br>

Це <sub>нижній</sub> індекс<br>

Це <sup>верхній</sup> індекс

</body>

</html>

Зазвичай, заголовки виділяють більшим шрифтом (причому напівжирним). Для того щоб виділяти заголовки, в HTML існують так звані теги заголовків. Заголовки в HTML структурують текст, що становить тіло документа. Вони допомагають читачам орієнтуватися в документі. Елемент заголовка є контейнером і повинен мати відкриваючий (<H1>) і закриваючий (</H1>) дескриптори. В HTML є шість рівнів заголовків: H1, H2, H3, H4, H5, H6.

Приклад:

<html>

<body>

<H1>Заголовок першого рівня</H1>

<H2>Заголовок другого рівня</H2>

<H3>Заголовок третього рівня</H3>

<H4>Заголовок четвертого рівня</H4>

<H5>Заголовок п'ятого рівня</H5>

<H6>Заголовок шостого рівня</H6>

</body>

</html>

Послідовність виконання роботи:

    1. Створити найпростіший документ HTML.

<html>

<body>

Моя перша сторінка

</body>

</html>

У елементі BODY розміщується основна частина документа. Усе, що йде після дескриптора <body> інтерпретується браузером у відповідності зі строгим набором правил, які повідомляють браузеру про вміст. Тіло документа закінчується дескриптором </body>.

Елемент <body> має велику кількість атрибутів, і всі вони важливі для визначення загального виду документа.

Атрибути елемента <body> і їх призначення

Атрибут

Призначення

ALINK

визначає колір, яким виділяється активне посилання

BACKGROUND

вказує URL зображення, яке слід використовувати в якості тіла (подложки) документа

BGCOLOR

визначає колір тіла документа

BGPROPERTIES

якщо цей атрибут має значення FIXED, то зображення тіла не буде прокручуватися

LEFTMARGIN

визначає ширину лівого поля в пікселях

LINK

визначає колір посилання, яке не було відкрите

TEXT

визначає колір тексту

TOPMARGIN

визначає ширину верхнього поля в пікселях

VLINK

визначає колір посилання, яке було відкрите

    1. Створити сторінку деякого неіснуючого письменника Сергія Сергєєва. У текстовому редакторі ввести наступний текст:

<html>

<body>

Домашня сторінка Сергія Сергєєва.

Сергій Сергєєв - письменник гуморист, автор 20 розповідей.

У житті великий аматор собак і комп'ютерних ігор.

</body>

</html>

    1. Зберегти цей файл із іменем index.html. Укласти текст між тегами <PRE> і </PRE>:

<HTML>

<HEAD>

<ТIТLЕ>Домашня сторінка Сергія Сергєєва</ТIТLЕ>

</HEAD>

<BODY>

<PRE>

Домашня сторінка Сергія Сергєєва

Сергій Сергєєв - письменник-гуморист, автор 20 розповідей.

У житті великий аматор собак і комп'ютерних ігор.

</PRE>

</BODY>

</HTML>

    1. Для форматування тексту застосувати тег <BR> (без використання тегу <PRE>):

<HTML>

<HEAD>

<ТIТLЕ>Домашня сторінка Сергія Сергєєва</ТIТLЕ>

</HEAD>

<BODY>

Домашня сторінка Сергія Сергєєва<BR><BR>

Сергій Сергєєв - письменник-гуморист, автор 20 розповідей<BR>

У житті великий аматор собак і комп'ютерних ігор<BR>

</BODY>

</HTML>

    1. Продовжити форматування сторінки неіснуючого письменника Сергія Сергєєва. Припустимо, що за вступним текстом, який ми почали форматувати в пунктах 1-4, ми повинні розташувати дві його розповіді (він же письменник!). Кожна розповідь має назву, підзаголовок і невеликий епіграф.

Відомо, що в книгах назви розповідей звичайно розташовують по центру сторінки, а епіграф — у її правого краю. Застосувати теги <Р> і </Р> для окремих абзаців.

Вирівняти заголовок по центру сторінки:

<Р ALIGN="center">ЗAГOЛOBOK РОЗПОВІДІ № 1</Р>

Для того щоб розташувати епіграф по правому краю, треба, відповідно, атрибуту ALIGN= привласнити значення "right".

<Р ALIGN="right">ЕПІГРАФ</P>

Вся сторінка цілком буде виглядати наступним чином:

<HTML>

<BODY>

<P align="center">Домашня сторінка Сергія Сергєєва</P>

<P>Сергій Сергєєв - письменник-авангардист, автор 20 розповідей<BR>

У житті великий аматор собак і комп'ютерних ігор<BR><BR>

Деякі його розповіді ви можете прочитати прямо тут.</P>

<P ALIGN="CENTER"> ІBAH-ЦAPЕBИЧ ТА СІРИЙ ЗАЄЦЬ<BR>

казка</Р>

<P ALIGN="RIGHT">Hy, перегоди!..<BR>( З мультфільму)</P>

<P>Жив був Іван-Царевич, і все в нього було: і злато-срібло, і наречених повний палац, і книжок багато розумних, і тренажерний зал величезний. Однак тужливо було в нього на душі - як встане ранком з ліжка царського, так і почне горювати, і горює до вечора<BR>...<BR>

І вони жили довго й щасливо й померли в один день</P>

<P ALIGN="CENTER">MOЛOTOK<BR>розповідь</P>

<P ALIGN="RIGHT">Ми ковалі, і дух наш молодий<BR>( З пісні)</P>

<P>Це трапилося дуже давно, уже й не пам'ятаю в якому році, у якім столітті й у якім тисячоріччі... (Тут розташовується текст розповіді) </P>

</BODY>

</HTML>

    1. Недолік сторінки нашого "віртуального" письменника полягає в тому, що весь текст написаний шрифтом одного розміру. Виділити заголовки більшим напівжирним шрифтом.

Зверніть увагу на те, що для вирівнювання по центру потрібно прикласти додаткові зусилля, наприклад, помістити відповідний тег усередину тегу заголовка:

<Н2><Р ALING="сеntег">ІВАН-ЦАРЕВИЧ ТА СІРИЙ ЗАЄЦЬ<ВR> казка</Р></Н2>

Якщо цього не зробити, то заголовок буде вирівняний по лівому краю.

    1. Відокремити розповіді від вступного тексту. Це можна зробити за допомогою горизонтальної риси. Для цього досить у потрібному місці поставити тег <BR> (він не має закриваючого тега). Однак у цьому випадку горизонтальна риса займе всю ширину сторінки, що буде виглядати неохайно. Для визначення ширини горизонтальної риси можна задати атрибут WIDTH=, наприклад, так:

<HR WIDTH="75%">

У цьому випадку горизонтальна лінія займе 75% від повної ширини екранної сторінки. Можна також визначати ширину лінії й у пікселях (екранних крапках). Наприклад, запис <HR WIDTH="75"> визначить ширину лінії в 75 пікселях (це вийде дуже коротка лінія). Якщо ви забажаєте, можете визначити також товщину лінії, установивши атрибут SIZE=.

З урахуванням нових даних наша сторінка тепер буде мати такий вид:

<HTML>

<body>

<h1><p align="center">Домашня сторінка Сергія Сергєєва </p></h1><br>

Сергій Сергєєв - письменник-авангардист, автор 20 розповідей<br>

У житті великий аматор собак і комп'ютерних ігор<br><br>

Деякі його розповіді ви можете прочитати прямо тут.<br>

<HR WIDTH="75%"> <H2><P ALIGN="center"> ІBAH-ЦАРЕВИЧ І СІРИЙ ЗАЄЦЬ <br>

казка</p></H2>

<p align="right">Hy, перегоди!.. <BR>( З мультфільму)</Р>

<p align="justify">Жив був Іван-Царевич, і все в нього було: і злато-срібло, і наречених повний палац, і книжок багато розумних, і тренажерний зал величезний... <br> чи Довго, чи коротко ... <br>Вони жили довго й щасливо й померли в один день</Р>

<HR WIDTH="75%">

<h2><p align="center">MOЛOTOK <br> розповідь</p></h2>

<p ALIGN="right">Mи ковалі, і дух наш молодий. <br> ( З пісні)</P>

Це трапилося дуже давно, вже й не пам'ятаю в якому році, у якім столітті й у якім тисячоріччі... (Тут розташовується текст розповіді)</BODY></HTML>

Індивідуальне завдання:

  1. Створити за індивідуальною тематикою сторінку HTML (об’єм - 1 сторінка).

  2. Вона повинна мати всі елементи даного ПЗ.

  3. В залежності від тематики вам потрібно доповнити ваш документ HTML ще трьома сторінками(разом – 4). Специфіка, оформлення кожної з них залежить від Вас. Основний критерій – логічність, наявність поданого матеріалу, включаючи попередні ПЗ.

  4. Використати до вже створених індивідуальних сторінок HTML всі дані приклади логічного та фізичного форматування.

Питання для захисту роботи № 14

      1. Яка структура найпростішого документу HTML?

      2. Перелічить теги логічного форматування.

      3. Фізичне форматування.

      4. Поняття атрибутів тегів.

      5. Теги вирівнювання тексту.

      6. Які атрибути тегу <body> Ви знаєте?

      7. Яким чином можна змінити розмір горизонтальної риски?

      8. Скільки видів заголовків можна виділити в документі HTML?

      9. Який тег позначає початок нового абзацу?

      10. Яка особливість пари тегів <PRE>...</PRE> і як її можна використати?

Державна служба України з надзвичайних ситуацій

Академія пожежної безпеки ім.Героїв Чорнобиля

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
Помощь Обратная связь Вопросы и предложения Пользовательское соглашение Политика конфиденциальности