Форматування символів HTML
Цей урок присвячений роботі з текстом. Розглядаються способи і теги форматування текстової інформації. Розповідається про способи виведення на екран спеціальних символів.
Щоб відобразити невідформатований текст, досить просто ввести його між тегами початку і кінця документа <body> </body>. При обробці такої сторінки браузер знайде і виведе весь цей текст. Якщо необхідно, щоб до тексту було застосовано будь-яке форматування, наприклад, виділення напівжирним або курсивом, необхідно використовувати відповідні теги форматування. При цьому форматується текст поміщається між тегами.
форматування тексту
<html>
<body>
<p>
Якщо необхідно щоб до тексту було застосовано будь-яке
форматування, наприклад, виділення <b> напівжирним </b>
або <i> курсивом </i>, необхідно використовувати
відповідні теги форматування.
При цьому форматується текст поміщається між тегами.
</p>
</body>
</html>
Також для виділення тексту використовуються теги <strong> і <em>, дані теги є контейнерами і вимагають закривається тега. Тег <strong> повідомляє браузеру, що на укладеному в ньому тексті необхідно зробити сильний наголос. Зазвичай візуальні браузери відображають вміст даного тега напівжирним шрифтом, але це може бути легко змінено за допомогою таблиці стилів. Так як даний тег є структурним, він несе смислове навантаження, на відміну від тега <b>, який лише форматує текст напівжирним, то його використання краще. Тег <em> теж акцентує увагу на укладеному усередині тексті, але він вважається менш сильним наголосом. Відображається він, як правило, курсивом. З тих же причин використання <em> краще ніж застосування <i>.
Порівняйте як буде відформатований наступний текст.
<html>
<body>
<p> <strong> Даний параграф відформатований тегом strong </strong> </p>
<p> <b> А цей тегом b, зовні вони не відрізняються. </b> </p>
<p> <em> Даний параграф відформатований тегом em </em> </p>
<p> <i> А цей тегом i, зовні вони не відрізняються. </i> </p>
</body>
</html>
Ще однією парою тегів форматування є теги <big> і <small>. Перший виводить текст збільшеним в порівнянні зі стандартним, а другий зменшеним. Замість тега <big> рекомендується використовувати теги <strong> або теги заголовків, так як вони несуть і структурну навантаження. Тег <small> є тегом за змістом протилежним <strong> і <em>, він деакцентірует увагу на тексті. З приводу застосування цього тега слід зробити одне зауваження: на різних комп’ютерах встановлено різний дозвіл екрану і в браузері може бути встановлено різний розмір основного шрифту і сильне зменшення тексту може зробити текст не читаним. Наступний приклад демонструє вид тексту, що відформатував за допомогою цих тегів.
<html>
<body>
<p> <big> Даний параграф відформатований тегом big </big> </p>
<p> <small> Даний параграф відформатований тегом small </small> </p>
<p> А в даному параграфі теги не застосовуються </p>
</body>
</html>
Інший парою корисних тегів є <sup> – верхній індекс і <sub> – нижній індекс, які можуть бути корисними при написанні математичних і хімічних формул. Порівняйте формули, набрані різним способом:
<html>
<body>
<p> Формула води H2O. У цьому параграфі формула набрана
без використання тега sub </p>
<p> Формула води H <sub> 2 </ sub > O.
У цьому параграфі формула набрана з використанням тега sub
Формула виглядає більш звично. </p>
<p> 2 ^ 4 = 16.
У цьому параграфі формула набрана без використання тега sup </p>
<p> 2 <sup> 4 </ sup > = 16. У цьому параграфі формула набрана
з використанням тега sup.
Формула виглядає більш звично. </p>
</body>
</html>
У деяких випадках, наприклад для виведення коду програм, корисним буде використання тега <pre>, який повідомляє браузеру, що знаходиться усередині текст повинен бути виведений як є. При цьому будуть збережені всі прогалини, переноси рядків та інші символи, які зазвичай при виведенні браузером не відображаються.
Цей приклад показує, як можна управляти переносами рядків і пропусками за допомогою тега <pre>.
<html>
<body>
<pre>
це
попередньо форматований текст.
Він зберігає як прогалини,
так і переноси рядків.
</pre>
</body>
</html>
Порівняйте написання коду програми із застосуванням тега <pre> і без його використання.
<html>
<body>
<pre>
/ / Даний фрагмент набраний з використанням тега pre
for ( int i = 1 ; i < 10 ; i + +)
{
printf ( ” i = % i \ n “, i ) ;
}
</ pre >
<p>
/ / Тут тег pre не застосовувався
for ( int i = 1 ; i < 10 ; i + +)
{
printf ( ” i = % i \ n “, i ) ;
}
</p>
</body>
</html>
Тег <code> маркує код комп’ютерної програми. Браузери зазвичай відображають його моноширінним шрифтом. Цей елемент є структурним, тому його використання краще використання тега <tt>, який маркує моноширинний текст. Також слід зазначити, що тег <code> краще використовувати всередині тега <pre>, тому що в противному випадку, все множинні прогалини будуть замінені одним. Тег <kbd> маркує текст, введений з клавіатури. Відображається він також, як і текст всередині тега <code>
<html>
<body>
<p> Дані приклади демонструють те, як буде представлений текст
при використанні різних тегів </p>
<pre> <code>
/ / Відформатовано за допомогою pre і code
class helloworld {
public static void main ( string [] args ) {
system.out.println ( ” hello world !”) ;
}
}
</code > </pre>
<pre> <tt>
/ / Відформатовано за допомогою pre і tt
class helloworld {
public static void main ( string [] args ) {
system.out.println ( ” hello world !”) ;
}
}
</tt > </pre >
<code>
/ / Відформатовано за допомогою code
class helloworld {
public static void main ( string [] args ) {
system.out.println ( ” hello world!”) ;
}
}
</ code >
<h3> Використання тега kbd </ h3>
<p> Зберегти результат <kbd> Так/Ні </kbd > </p>
</body>
</html>
Для маркування прикладу виведення програми або скрипта використовується тег <samp>.
<html>
<body>
<p> Якщо в HTML коді зустрінеться помилка, то буде видане наступне:
</p> <p> <samp> c :\sp\bin\nsgmlsu.exe:test.html:4:7:e:element
“foobar” undefined</ samp > </p>
</body>
</html>
Для маркування змінних використовується тег <var>, який зазвичай відображається курсивом.
<html>
<body>
<p> Версії стандарту HTML зазвичай маркуються таким чином
<var> x </var >. <var> у </var >. </p>
</body>
</html>
Тег <address> маркує контактну інформацію для всього документа або його частини. Він може включати імена людей здійснюють підтримку документа, посилання на сторінки, адреси електронної пошти, телефони та інше. Використання даного тега для маркування поштових адрес організацій є не зовсім коректним. Його слід використовувати тільки для позначки адрес для зв’язку з приводу документа. Також допустимо використання тега <address> для виділення контактної інформації з приводу частини документа, зазвичай форми.
<html>
<body>
<form method=post action=”/cgi-bin/order.cgi”>
<fieldset>
<legend accesskey=c> Інформація про кредитну картку <br> </legend >
<p>
<label accesskey=v>
<input type=”radio” name=”card” value=”visa”> Visa
</ label >
<label accesskey=m>
<input type=”radio” name=”card” value=”mc”> Mastercard
</ label >
<br>
<label accesskey=n>
Номер: <input type=”text” name=”number”>
</ label >
<label accesskey=e>
Термін дії: <input type=”text” name=”expiry”>
</ label >
</p>
</fieldset>
<p>
<input type=”submit” value=”Відправити замовлення” accesskey=s>
</p>
<address>
Якщо у вас є питання з приводу замовлення, зв’яжіться з нами
за адресою <a href=”[email protected]”> [email protected] </ a >,
Або телефону в офісі ( +38 044 ) 123-1231231.
</ address >
</form >
</body>
</html>
Цей приклад показує, як працювати з скороченнями або акроніми.
<html>
<body>
<abbr title=”Спільнота Незалежних Держав”> СНД </ abbr >
<br>
<acronym title=”World Wide Web”> WWW </ acronym >
<p> При наведенні покажчика миші на акронім або скорочення
показується атрибут title. </p>
<p> Це працює по- різному в різних браузерах. </p>
</body>
</html>
Цей приклад показує, як змінювати напрямок виведення тексту.
<html>
<body>
<p>
Якщо використовуваний браузер підтримує двонаправлене
уявлення ( bdo ), то такий рядок буде записана
справа наліво (rtl):
</p>
<bdo dir=”rtl”>
Тут якийсь арабський текст
</bdo>
</body>
</html>
Цей приклад показує, як використовувати довгі і короткі цитати.
<html>
<body>
Тут представлена довга цитата:
<blockquote>
Це довга цитата. Це довга цитата. Це довга цитата.
Це довга цитата. Це довга цитата.
</blockquote>
Тут представлена коротка цитата:
<q>
Це коротка цитата
</q>
<p>
Для елемента blockquote браузер вставляє додаткові
переноси рядки, порожні рядки і поля, але елемент q
незображується якимось спеціальним чином.
</p>
</body>
</html>
Цей приклад показує, як помітити текст, який видалений або вставлений в документ.
<html>
<body>
<p>
дюжина означає
<del> двадцять </del>
<ins> дванадцять </ins>
частин
</p>
<p>
Більшість браузерів буде закреслювати віддалений текст
і підкреслювати вставлений текст.
</p>
<p>
Деякі старі браузери будуть виводити віддалений
або вставлений текст як звичайний текст.
</p>
</body>
</html>
Коментарі
Написати коментар
Вибір редакції:
Вам може сподобатись:
