- •Уроки html
- •1. Теги, структура html документа
- •Структура html сторінок
- •2. Форматування тексту
- •Шрифти: гарнітура, розмір, колір
- •Оформлення тексту
- •Заголовки
- •Текст у вигляді великого заголовка
- •Текст у вигляді маленького заголовка Теги перенесення рядка і форматування абзацу
- •Вирівнювання тексту
- •3. Списки.
- •Марковані списки
- •Нумеровані списки
- •Вкладені списки
- •Списки визначень
- •4. Таблиці.
- •Створення таблиць
- •Параметри таблиці
- •Параметри комірок
- •Приклад таблиці.
- •5. Зображення
- •Вставка зображення
- •Розміри зображення
- •Рамка довкола зображення
- •Альтернативний текст
- •Вирівнювання зображення
- •Відступи довкола зображення
- •Розбиття зображення на частини
- •6. Властивості сторінки - параметри тега body
- •Колір тексту
- •Колір фону
- •Фонове зображення
- •Колір заслань
- •Vlink - колір відвіданого заслання (visited link).
- •Відступи довкола контента
- •7. Заслання
- •Як зробити текст засланням
- •Як зробити зображення засланням
- •Колір заслань
- •Заслання усередині сторінки
- •Заслання на нове вікно
- •Заслання у фреймах
- •Заслання на адресу електронної пошти
- •8. Форми.
- •Створення форм
- •Текстове поле
- •Поле для пароля
- •Багаторядковий текст
- •Кнопка submit
- •Кнопка reset
- •Прапорці (checkbox)
- •Перемикачі (radiobutton)
- •Поле із списком
- •Кнопка із зображенням
- •Приклад комбінованої форми
- •1. Символьні об'єкти.
- •Що таке символьні об'єкти?
- •Приклади використання
- •Що таке css?
- •Що таке css?
- •Переваги css перед html
- •Css однією дією дозволяє змінювати відразу всю групу параметрів.
- •11 Додавання стилів
- •Внутрішні стилі
- •Глобальні стилі
- •Зв'язані стилі
- •Поєднання різний видів стилів
Текст у вигляді великого заголовка
і
Текст у вигляді маленького заголовка Теги перенесення рядка і форматування абзацу
Ще чого декілька корисних теги для форматування тексту.
Корисно знати:
Якщо в тесті html-документа поставити перенесення рядка, то браузер його проігнорує і відображуватиме весь текст в один рядок.
Наприклад, в тесті html-документа написано:
Йде бичок, качается, Вздыхает на ходу...
А браузер відображуватиме цей текст таким чином:
Йде бичок, гойдається, Зітхає на ходу...
Тут-то нас і врятує тег <br>. Це непарний тег, що означає перехід на новий рядок.
Т.е написавши:
Йде бичок, качается,<br> Вздыхает на ходу...
или
Йде бичок, качается,<br>Вздыхает на ходу...
У браузері ми побачимо:
Йде бичок, качается, Вздыхает на ходу...
За допомогою цього тегу можна не лише перенести тест на новий рядок, але і робити відступи між різними елементами документа. Досить просто вставити не один тег <br>, а два і так далі
Корисно знати:
Якщо в тесті html-документа підряд ідуть декілька пропусків, то браузер їх проігнорує і відображуватиме лише один.
Наприклад, в тесті html-документа написано:
Здрастуйте, дорогий друг!
А браузер відображуватиме цей текст таким чином:
Здрастуйте, дорогий друг!
Тег <pre> використовується, коли потрібно написати текст як є, включаючи всі пропуски і перенесення рядка.
Тобто якщо написати:
<pre>Идет бичок, качается, Вздыхает на ходу...</pre>
То браузер відображуватиме цей текст таким чином:
Йде бичок, гойдається
Зітхає на ходу...
Але!
Не варто зловживати тегом <pre>. І по можливості обходитися без нього.
Будь-який текст можна, а інколи і потрібно, розбити на абзаци. У html таку функцію виконує тег <p>. Якщо помістити текст між тим, що відкриває тегом <p> і що закриває тегом </p>, то зверху і знизу від цього тесту з'явиться відступ, тобто цей шматок тексту відокремиться від загальної маси тексту і утвориться параграф. За умовчанням параграф вирівняний по лівому краю.
Вирівнювання тексту
Всього в html можна задати 4 типи вирівнювання: по лівому краю, по правому краю, по центру, по ширині. Аби задати типа вирівнювання потрібно параметру align тега <p> привласнити одне із значень:
left (вирівнювання по лівому краю)
right (вирівнювання по правому краю)
center (вирівнювання по центру)
justify (вирівнювання по ширині).
Ось приклади тексту з різним типом вирівнювання:
по лівому краю
|
по правому краю
|
по центру
|
по ширині
|
<p align="left">Хотя Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.</p>
|
<p align="right">Хотя Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.</p>
|
<p align="center">Хотя Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.</p>
|
<p align="justify">Хотя Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.</p>
|
Результат в браузері
|
|||
Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.
|
Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.
|
Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.
|
Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.
|
Оскільки за умовчанням задано вирівнювання по лівому краю, то в першому прикладі параметр align="left" можна не писати.
Для завдання вирівнювання по ширині існує ще один тег <center>:
<center>Хотя Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.</center>
І в браузері текст відображуватиметься по центру. Правда в такому разі втратиться властивість параграфа: відступ зверху і знизу. Але ж воно і не завжди потрібний.
Вправа
Викачайте файл у форматі RTF, створіть по його образу html-документ з дотримання всіх елементів оформлення тексту.
Викладете файл, що вийшов, в особистий каталог, складіть линк (поглянути як) і відкрийте Вашу сторіночку в браузері.