Web-Programming.in.ua

Пошук

Авторизація

Запам`ятати
Реєстрація

Останні коментарі

Популярні статті

Корисні поосилання

RSS

HTML теги для форматування тексту

17.03.2015 17:13 | Admin

Привіт, ця стаття є обов`язковою для вивчення! В ній ми розглянемо, які є способи оформлення тексту.

Для початку давайте створимо порожню HTML сторінку:

<html>
    <head>
        <title>HTML теги для форматування тексту</title>
    </head>
    <body>
        
    </body>
</html>

Далі додамо основні стилі:

<style>
    body {
        background-color: gray;
        color: white;
        margin: 50px;
    }
</style>

Тепер почнемо знайомитись безпосередньо з тегами:

Для того, щоб зробити текст жирним використовують тег:

<b>Жирний</b>

Курсив:

<i>Курсив</i>

Підкреслений:

<u>Підкреслений</u>

Також інколи є необхідність, щоб текст був одночасно жирним і підкресленим:

<b><i>Текст...</i></b>

Для оформлення тексту параграфу (наприклад стаття, запис у блозі, і т.д):

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

Можна змінювати зовнішній вид:

<i style="font-size: 2em; color: blue;">Курсив</i>
<b style="font-size: 15px; color: orange;">Жирний</b>
<u style="font-size: 15pt; color: red;">Підкреслений</u>

Зрештою у Вас повинен вийти такий код:

<html>
    <head>
        <title>HTML теги для форматування тексту</title>
        <style>
            body {
                background-color: gray;
                color: white;
                margin: 50px;
            }
        </style>
    </head>
    <body>
        <h1>Заголовок 1-го рівня</h1>
        <h2>Заголовок 2-го рівня</h2>
        <h3>Заголовок 3-го рівня</h3>
        <h4>Заголовок 4-го рівня</h4>
        <h5>Заголовок 5-го рівня</h5>
        <h6>Заголовок 6-го рівня</h6>
        <i style="font-size: 2em; color: blue;">Курсив</i>
        <b style="font-size: 15px; color: orange;">Жирний</b>
        <u style="font-size: 15pt; color: red;">Підкреслений</u>
        <p style="width: 300px; border: 1px solid pink; padding: 10px;">Lorem ipsum dolor sit amet,
 consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        <h2>
            <b>
                <i>
                    <span style="color: #78FF97;">Заголовок 2-го рівня + жирний + курсив + колір #78FF97</span>
                </i>
            </b>
        </h2>
    </body>
</html>

Побачити, як це виглядає можна нижче:

Або за посиланням: http://examples.web-programming.in.ua/text_format_in_html/

Категорія: HTML | Коментарі відсутні »

Тільки авторизовані користувачі можуть додавати коментарі.

Нагору