Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Web-дизайн методичка-лек дораб.doc
Скачиваний:
0
Добавлен:
01.05.2025
Размер:
104.96 Кб
Скачать

Форматування абзаців, розділів та рядків. Атрибути тегів

При створенні web-сторінок не слід забувати, що будь-який текст складається з абзаців. Для створення абзацу мовою HTML використовують теги <Р> і </Р>, між якими вміщений текст абзацу. Втім, кінцевий тег </Р> в елементі абзацу в деяких випадках не є обов'язковим.

Для переходу на новий рядок (розрив рядка) без створення абзацу застосовується тег <BR> - наступний за цим тегом текст буде наведено в новому рядку без пропуску рядка. Цей тег є порожнім елементом, що змушує браузер перевести текст на новий рядок. Якщо при оформленні сторінки необхідно, щоб текст був розміщений в одан довгий рядок, використовують тег <NOBR>.

Вирівнювання абзаців

Вирівнювання абзаців у межах сторінки можливе за рахунок атрибуту align, який може мати такі значення:

left, center або right – вирівнювання по лівому краю, по центру або по правому краю

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

<Р align ="left"> по лівому краю </Р>

Для структурування тексту у web-документах використовуються також розділи, які створюються за допомогою тегів <DIV> </div>. Вирівнюють розділи, як і абзаци, за допомогою атрибута align.

Форматування символів тексту. Заголовки. Спецсимволи

Для форматування тексту в HTML застосовують теги форматування символів тексту, наприклад парні теги форматування символів тексту:

<В> текст </В> — напівжирний шрифт тексту;

<І> текст </І> — шрифт-курсив;

<U> текст </U> — підкреслений шрифт;

<S> текст </S> — закреслений шрифт;

<tt> текст </tt> — задає стиль друкарської машинки;

та інші.

Приклад комбінації тегів форматування:

<U> <В> <І> текст </Ix/Bx/U> — підкреслений напівжирний курсив (принцип вкладення тегів).

Заголовки

Більшість HTML-документів містять заголовки. Є шість видів заголовків, які відрізняються розмірами символів. Заголовок -окремий тип абзацу. Для його створення використовують теги <Нn></Нn>, де n - число від 1 до 6. Ввівши текст між цими тегами, ви одержите заголовок певного розміру.

<Н1>Заголовок</Н1>

<Н2>Заголовок</Н2>

<Н3>Заголовок</Н3>

<Н4>Заголовок</Н4>

<Н5>Заголовок</Н5>

<Н6>Заголовок</Н6>

Теги заголовків не слід використовувати для створення звичайних абзаців з різними розмірами шрифту.

Вирівнюють розділи, як і абзаци, за допомогою атрибута align.

Попереднє форматування

Іноді виникає потреба в тому, щоб заздалегідь підготовлений текст при відображенні у браузері зберігав ознаки форматування. Для цього використовується парний тег попереднього форматування <рrе> текст </рrе>.

Спецсимволи

При оформленні web-сторінки доводиться вводити певні символи (&, ©, ®, S, α, β, та ін.). У таких випадках можна вводити потрібні символи за допомогою спеціальних кодів. Коди починаються з символу «ампер-санд»(&), потім записують назву символу або його числовий код, а в кінці ставиться «крапка з комою»(;).

Параметри шрифту

Значення атрибута записується після імені атрибута через знак рівності (=). Значення атрибутів беруться у подвійні (") або одинарні (') лапки. Імена атрибутів можуть набиратися як малими, так і великими буквами. Тег може мати кілька атрибутів, які відокремлюються один від одного пробілами.

Тег <FONT>

Наприклад, відкриваючий тег <FONT> (закриваючий тег </FONT> обов'язковий) може мати декілька атрибутів.

Size – атрибут, який зазначає розмір шрифта. Зі збільшення значення – розмір шрифта збільшується.

Помістивши текст між тегами <FONT size=n></FONT>, де n - цифрове значення від 1 до 7, ви надасте йому потрібний вам розмір:

<FONT size="l"> Приклад 1 </FONT>

<FONT size="2"> Приклад 2 </FONT>

<FONT size="3"> Приклад З </FONT>

<FONT size="4"> Приклад 4 </FONT>

<FONT size="5"> Приклад 5 </FONT>

<FONT size="6"> Приклад 6 </FONT>

<FONT size="7"> Приклад 7 </FONT>

Faceтип шрифта

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

На зразок: <FONT face="Verdana", "Arial"> Текст, що відображений шрифтом Verdana. Якщо цей шрифт відсутній, текст буде відображено шрифтом Агіаl </font>

<FONT face="Times New Roman"> Times New Roman </FONT>

<FONT face="Arial"> Arial </FONT>

<FONT face="Courier New"> Courier </FONT>

<FONTface="Verdana"> Verdana </FONT>

<FONT face=nComic Sans MS"> Comic Sans MS </FONT>

Color – колір шрифта

Колір тексту може визначатися як самою назвою, наприклад red, blue, так і бути поданий у шістнадцятковому вигляді -#FF0000 (червоний), OOOOFF (синій).

<FONT color="red"> Червоний </FONT>

<FONT color="#0000FF"> Синій </FONT>

Приклад:

  1. <FONT face = "Arial, Courier, Comic Sans MS" SIZE = 5 color = "red"> текст </FONT>

  2. <FONT face = "Arial, Courier, Comic Sans MS" SIZE - +2 color = "red"> текст </FONT>

Якщо на комп'ютері встановлено шрифт Arial, то він буде застосований до цього тексту, інакше браузер застосує шрифт Courier, або Comic Sans MS, або деякий свій стандартний шрифт, наприклад Times New Roman.

У прикладі 1) - розміри символів шрифту 5, колір - червоний.

У прикладі 2) число -+-2 означає, що розмір шрифту має бути на дві одиниці більший, ніж стандартний, тобто п'ятий, а число -2 означатиме перший розмір шрифту - на дві одиниці менший, ніж стандартний, тобто перший. Розмір 3 вважається стандартним, він орієнтовно відповідає 10 пунктам.

Тег <BASEFONT>

Для зміни стандартного розміну шрифта застосовують одинарний тег <BASEFONT>, який має ті ж самі параметри, що і тег <FONT>

Тег <ADDRESS>

За допомогою тегу <ADDRESS>...</ADDRESS> можна вводити адреси.

Деякі теги й параметри для різних браузерів називаються по-різному.

Якщо в написанні тегу, в назві чи значенні параметра допущено синтаксичну помилку, то тег чи параметр не діятимуть.

Параметри тегу <BODY>

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

Параметри тегу <BODY>

  • BGCOLOR="Violet" – задає колір фону, якщо не використовується фон-картинка. Використання фонового кольору раціональніше з міркувань швидкого завантаження сайту, малюнки взагалі грузяться довше, навіть найменші.

  • BACKGROUND="d/web/index.files/fon1.jpg"- задає шлях до картинки для фону. "d/web/index.files/fon2.jpg" – це шлях до файлу "fon1.jpg" (малюнок), який буде фоном сторінки. Якщо графічний файл, розташований в одній папці з документом, шлях прописувати не потрібно (background="index.files/fon2.jpg"). Фоном може бути великий графічний файл (у цьому випадку сторінка вантажитиметься довше), так і маленький фрагмент. При використанні останнього він буде автоматично розмножений браузером, тому добирайте фрагмент, який добре стикується. Розмір зображення повинен бути приблизно 130 на 200 пікселів.

  • BGPROPERTIES = "fixed" – фонове зображення не прокручується.

  • TEXT = "FF0000" – задає колір тексту (тут чорний) на сторінці (див. таблицю кольорів у додатку).

Приклад: <BODY BGCOLOR="Violet" BGPROPERTIES = "fixed" TEXT = "FF0000" BACKGROUND="index.files/fon2.jpg">

Тег <BODY> може також мати параметри відступів у документів (визначається числовим значенням):

  • Leftmargin – відступ зліва

  • Rightmargin – відступ справа

  • Topmargin – відступ зверху

  • Bottommargin – відступ знизу

<BODY Leftmargin ="0", Topmargin = "0", marginheight="0" >

У даному тегу можуть бути присутні також і інші параметри.

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]