Основні елементи HTML, форматування тексту

Лабораторна робота №1

 

Тема: ОСНОВНІ ЕЛЕМЕНТИ HTML, ФОРМАТУВАННЯ ТЕКСТУ

 

Мета: Вивчити основні  елементи HTML та їх призначення

 

ПРИЛАДИ ТА МАТЕРІАЛИ

Персональний комп'ютер, текстовий редактор (notepad++,  notepad, phpdesigner) браузер (Google Chrome, Mozilla Firefox, Internet Explorer, Netscape Navigator). 

 

1 ТЕОРЕТИЧНІ ВІДОМОСТІ

 

• Теги форматування символів
• Елементи логічного форматування
• Теги керування розривами
• Каскадні таблиці стилів

 

 

ТЕГИ ФОРМАТУВАННЯ СИМВОЛІВ

Текст – єдиний елемент Web-сторінки, який не вимагає спеціального визначення для відображення у браузері. Проте для форматування тексту існує великий набір спеціальних тегів, які окрім стандартних атрибутів (id, class, style, dir, lang, title) та атрибутів подій підтримують і спеціальні.

Теги форматування символів, основні теги форматування представлені в таблиці 1.3.1.

 

Таблиця 1.3.1 – Основні теги для форматування символів

Тег	Атрибути	Опис
<b>…</b>	*	Напівжирний текст
<basefont>	size	Базовий розмір шрифта
<big>…</big>	*	Збільшення  розміру тексту відносно стандартного
<blink>…</blink>	*	Блимаючий текст (підтримується лише Netscape Navigator)
<center>…</center>	*	Центрування об’єкта
<i>…</i>	*	Курсив
<font>…</font>	*   faсe size color	Форматування  по трьох параметрах: гарнітура, розмір, колір
<hx>…</hx>	*	Заголовок.  х=1..6 – розряд (розмір  шрифта) в порядку спадання
<p>…</p>	*	Абзац. Текст відділяється відступами зверху і знизу
<small>…</small>	*	Зменшення розміру тексту відносно стандартного
<s>…</s>	*	Закреслений  шрифт
<sub>…</sub> <sup>…</sup>		нижнійіндекс верхнійіндекс
<tt>…</tt>		Моноширинний  шрифт (всі символи однакової ширини)
<u>…</u>		Підкреслений  текст

 

* - елемент може мати  лише стандартні атрибути та  атрибути подій.

 

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

 

ЕЛЕМЕНТИ ЛОГІЧНОГО ФОРМАТУВАННЯ

Існують додаткові теги форматування (таблиця 1.3.2), які говорять браузеру як потрібно розуміти взятий в певний тег текст (цитата, ім’я змінної тощо). Текст, виділений такими елементами, різні браузери можуть відображати по різному.

 

Таблиця 1.3.2 – Елементи логічного форматування

Теги	Атрибути	Опис
<acronym>…</acronym>	*	Акронім (скорочення: і т.д.)
<address>…</address>	*	Адреса. \        Курсив з відступом                    \
<blockquote>…</blockquote>	cite	Цитата. Атрибутом задається URL джерела  цитування. \     Окремий абзац з відступом зліва\
<cite>…</cite>	*	Цитата  або посилання. Курсив
<code>…</code>	*	Приклад вихідного коду програми. Моноширинний шрифт
<dfn>…</dfn>	*	Визначення терміна. Курсив. Для Internet Explorer
<em>…</em>	*	Виділений текст. Курсив
<kbd>…</kbd>	*	Приклад тексту, який користувач повинен ввести з  клавіатури. Моноширинний шрифт
<pre>…</pre>	*	Зберігає  текст з форматуванням, заданим автором в HTML-коді. Моноширинний шрифт
<q>…</q>	*	Виділення цитати всередині абзацу чи рядка. Курсив
<samp>…</samp>	*	Приклад вихідного коду програми. Моноширинний шрифт
<strong>…</strong>	*	Виділений текст. Напівжирний шрифт
<var>…</var>	*	Ім’я змінної, процедури, функції. Курсив

 

Відомо, що браузер самостійно розбиває текст так, щоб він повністю відобразився у вікні.

 

ТЕГИ КЕРУВАННЯ  РОЗРИВАМИ

Для випадків, коли потрібно розірвати текст саме в певному місці або ж, навпаки, – не допустити розриву, було введено спеціальні теги (таблиця 1.3.3).

 

                                                             Таблиця 1.3.3 Теги керування розривами

Теги	Атрибути	Опис
<br>		Розрив  рядка тексту. Символи після тега переносяться в новий рядок
<hr>	size width align color noshade	Горизонтальна лінія. Можна задати товщину, довжину, вирівнювання по горизонталі, колір і відмінити тінь відповідними атрибутами.
<nobr>…</nobr>		Текст всередині тегів не розривається для переносу у наступний рядок. Припускає вкладення тега <br>

 

КАСКАДНІ ТАБЛИЦІ  СТИЛІВ

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

CSS (Cascading Style Sheets – каскадні таблиці стилів) – набір стилів для певних елементів, об’єднаних в окремий файл.

Стиль – це набір параметрів форматування, який застосовується до елементів документа з метою зміни їх зовнішнього вигляду.

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

Синтаксис запису стилю  для елемента наступний (приклад 1.3.1):

Ім’я_селектора {атрибут1: значення; атрибут2: значення; …}.

 

Приклад 1.3.1

 

P {font-size: 12pt; font-style: italic; color: red}

 

Селектор – це ім’я стилю, в якому вказані параметри форматування. У фігурних дужках вказуються атрибути, яким через двокрапку присвоюється певне значення. Між собою атрибути обов’язково розділяються крапкою з комою (після останнього значення даний символ можна упускати).

Селектори поділяються на три типи:

• селектор тегів,
• класи,
• ідентифікатори.

Селектор  тегів визначає стилі для вбудованих тегів.

Класи – це універсальні стилі, які можна прив’язувати до будь-якого елемента. При створенні універсального стилю його ім’я записується після крапки (приклад 1.3.2). Таким чином, до одного елемента є можливість застосувати декілька видів стильового оформлення. Або ж різні елементи форматувати одним стилем.

 

Приклад 1.3.2

 

<head>

<style type= “text/css”>

   p { font-size: 10pt; color: yellow}

   .first { font-size: 12pt; font-style: italic; color: red}

   .second { font-style: italic; color: green}

</style>

</haed>

<body>

   <p class= “first”> … </p>

   <h1 class= “second”> … </h1>

   <h2 class= “first”> …</h2>

</body>

 

У прикладі 1.3.2 шрифт в усіх абзацах матиме розмір 10pt і жовтий колір. Викликавши клас, можна змінити і колір, і розмір, і інші параметри, задані класом. Ці ж стилі застосовуються і до заголовків першого та другого рівнів.

При введенні в текст HTML-коду клієнтських програм використовуються  ідентифікатори (приклад 1.3.3). Вони дозволяють динамічно змінювати параметри стилю елементів. При заданні ідентифікатора до імені стилю додається символ “решітка”. Під’єднання ідентифікатора до стилю елемента здійснюється через атрибут id, значенням якого буде ім’я ідентифікатора без символа решітки.

 

 

 

Приклад 1.3.3

 

<head>

<style type= “text/css”>

  #ім’я_стилю { font-size: 12pt; font-style: italic; color: red}

</style>

</head>

<body>

<p id= “ім’я_стилю”> …</p>

 <h1 id= “ім’я_стилю”> … </h1>

</body>

 

Стилі поділяються на:

• глобальні;
• вбудовані.

         Атрибут style задає форматування для одного елемента (приклад 1.3.4) і називається вбудованим.

 

Приклад 1.3.4

 

<p style= “font-size: 12pt; font-style: italic; color: red”>

 

Елемент style визначає глобальний стиль – стильове оформлення для усіх одноіменних елементів (приклад 1.3.5). Зазвичай розміщують в заголовку документа head, хоча може бути і в body. Має атрибути type, lang, dir, title.

 

Приклад 1.3.5

 

<style type= “text/css”>

   p { font-size: 12pt; font-style: italic; color: red}

   h1 { font-style: bold; color: green}

</style>

 

 

 

 

 

Таблиця 1.3.4 – Форматування тексту з використанням CSS

Атрибут	Значення	Опис
font-family	serif	гарнітура шрифта: шрифти з засічками (Times)
	sans-serif	шрифти без засічок (Arial)
	cursive	курсив
	fantasy	декоративні (Zapf)
	monospace	моноширинні (Courier)
font-size	xx-small x-small small medium** large x-large xx-large larger smaller	розмір  символів:* зарезервовані значення
	…em	ems, розмір текучого елемента
	…ex	x-height, розмір по висоті букви х
	…pt** …px** …%	абсолютний розмір
font-weight	bold (700) bolder(900) lighter(100) normal (400)	Насиченість шрифта: напів жирна жирна світла нормальна (допускається використання умовних одиниць 100-900, крок 100)
font-style	normal italic oblique	Курсивний текст: нормальний курсивний похилий
vertical-align	…em*** …% sub super	Зміщення  по вертикалі (індекси)
font-variant	small-caps	Моноширинний  текст (капітель)
text-transform	none capitalize lowercase uppercase	Встановлення  регістра текст без змін кожне слово з великої букви нижній регістр верхній регістр
color	назва кольору (red) #RRGGBB RGB (80%, 20%, 60%)	Колір тексту

*- приклад зміни розміру  тексту в залежності від використання константи зображено на мал.1.3.1.

** - не рекомендовані  одиниці вимірювання. 

*** - рекомендовані одиниці  вимірювання.

Абсолютні одиниці вимірювання: in – inches, 1in = 2.54cm,                                                            cm – centimeters, mm – millimeters, pt – points, 1pt = 1/72 in,  pc –picas, 1pc = 12pt.

 

Рис. 1.3.1 - Зміни розміру тексту в залежності від використання виду константи.

 

Таблиця 1.3.5 – Додаткові засоби оформлення тексту

Атрибут	Значення	Опис
border-bottom	товщина стиль колір	Лінія під текстом (три параметри записуються  через пробіл): Border-bottom:2px solid  red;
float	right left center	Вирівнювання  вказаного елемента
first-letter		Виступаючий ініціал –збільшена прописна перша буква абзацу. Псевдо клас*:p:first-letter { font-size:200%;color:green}
text-indent	…px …pt …in …mm	Величина  відступу першого рядка тексту. Задається у пікселях пунктах дюймах міліметрах
word-spacing	px	Відстань  між словами
text-align	px	Вирівнювання  тексту
margin-top margin-bottom	px	Відступи  між абзацами: над абзацом під абзацом
line-height	px	Інтерліньяж

2 ЗАВДАННЯ  НА ЛАБОРАТОРНУ РОБОТУ

 

1. Встановити шрифт за допомогою стилів: загальний для всього тіла документа; окремий для заголовків; окремий для рядків таблиць.

2. Перше речення довільного тексту виділити жирним курсивом.

3. Довільну фразу зафарбувати синім кольором, а першу букву першого слова зафарбувати червоним.

4. Задати індекси за допомогою стилів та з використанням стандартних тегів (верхні – зеленим кольором, нижні – жовтим).

5. Створити стиль заголовка з підкресленням.

6. Задати за допомогою стилів буквицю.

7. Ввести чотири абзаци тексту; задати для кожної першої букви абзацу червоний колір і розмір – 200 % за допомогою псевдо класу; для третього абзацу забрати інтервали.