| Браузер | Internet Explorer | Netscape | Opera | Safari | Mozilla | Firefox | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Версія | 5.5 | 6.0 | 7.0 | 6.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 1.0 | 1.7 | 1.0 | 2.0 |
| Підтримується | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так |
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Опис
Тег
встановлює переклад рядка у тому місці, де цей тег знаходиться. На відміну від тега параграфа
Використання тега BR не додає порожній відступ перед рядком. Якщо текст, у якому використовується переклад рядка, обтікає плаваючий елемент, за допомогою параметра clear тега
можна зробити так, щоб наступний рядок починався нижче за елемент.
Синтаксис
Текст
текст
Параметри
clear Повідомляє браузеру, як обробляти наступний рядок, якщо текст обтікає плаваючий елемент.Закриває тег
Не вимагається.
Приклад 1. Використання тега
Р.Л. Стівенсон
Літо в країні настало,
Верес знову цвіте.
Але нема кому готувати
Вересковий мед.
Результат цього прикладу показаний ні рис. 1.
Рис. 1. Вид тексту під час використання тега
Опис параметрів тега
Параметр CLEAR
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Опис
Параметр clear повідомляє браузеру, як обробляти наступний рядок, якщо текст обтікає плаваючий елемент. Плаваючим елементом називається зображення, у якого встановлено параметр align або шар, до якого застосовується властивість CSS float.
Результат використання параметра clear залежить від краю, яким вирівнюється елемент і значення аргументу clear . Так, якщо зображення вирівнюється з лівого краю, а значення параметра clear тега
встановлено як all або left, то текст після тега
відображатиметься нижче малюнка. Будь-які інші значення параметра clear змусять текст розташовуватися праворуч від зображення та обтікати його.
Синтаксис
Аргументи
all Скасує обтікання елемента одночасно з правого та лівого краю. left Скасує обтікання з лівого боку елемента, розташованого після тега. right Скасує обтікання з правого боку елемента. none Скасує дію цієї властивості.
Значення за замовчуванням
Аналог CSS
Приклад 2. Скасування обтікання тексту
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Duis autom dolor в hendrerit в vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feu.
Результат прикладу показано на рис. 2.
Рис. 2. Скасування обтікання блоку текстом
Примітка
Використання параметра clear у специфікації HTML 4 засуджується і рекомендується застосовувати елемент CSS clear - BR ( clear: both | left | none | right ).
Усі або майже всі використовують у верстці. Чи багато з нас, поставивши у коді
замислюється: а чи справді потрібний він тут? Серед недосвідчених верстальників часто можна побачити верстку такого характеру: верстка меню
А ще можна зустріти такі чудові абзаци:
Може виникнути питання: якщо на веб-сайті відображається все по дизайну, що тут не так? А не так тут - цей кошмарний, кривий, ламерський код, який говорить про дуже низьку кваліфікацію верстальника, який не спромігся навіть розібратися в призначеннях.
Застосовувати
для формування абзаців - це все одно, що забивати цвяхи шуруповертом (це теж інструмент, чому б і не забити цвях, інший).
Навіщо призначений тег
?
update 23.02.10 – з "фокусами" з white-space: pre потрібно бути уважними, т.к. при такому форматуванні рядки, які не вміщуються в блок, автоматично не переносяться на новий рядок. Особливо це актуально для гумових дизайнів. У таких випадках все ж таки доводиться застосовувати
.
P ( white-space: pre; )
Нотатка
Спільнота фанатів семантичної верстки взагалі не включила
в.
Де не повинно бути
?
- використовувати теги за призначенням: для абзаців це< >, для списків та -< >, < >, < >і т.д.;
- для форматування тексту та завдання відступів використовувати , такі як ;
- використовувати окремі елементи для створення рядків (для цього найкраще підходять нейтральні елементи розмітки< >і< >).
Розглянемо кілька практичних прикладів. Абзаци:
Високопродуктивне рішення має велику пропускну здатність - до 6.2 Gbps, і ідеально підходить не тільки для передачі голосу і відео, але так само і для нових додатків, вимогливих до смуги пропускання, таких як on-line ігри.
SGSN здатний підтримувати до 1,5 мільйона активних PDP сесій.
P ( margin-bottom: 12px; )
Декілька рядків номерів телефонів:
Вітаю вас. Звичайно, в HTML перенесення рядка можна зробити двома способами. Якщо ви користуєтеся візуальним редактором від WordPress, він автоматично додає перенесення рядків, як це відбувається в програмі Microsoft Word або будь-якому іншому текстовому редакторі. Але іноді необхідно працювати з текстом у коді. Як зробити перенесення рядка в HTML-коді?
Переносимо рядок
Для цього в html є короткий одинарний тег.
(скорочено від break). Що він робить? Весь текст, який написано після цього тега буде виведено з нового рядка. Навіть якщо на поточному рядку залишається місце для його виведення, його все одно буде перенесено.
Використання br
Використовувати тег потрібно лише тоді, коли вам не потрібно розпочинати новий абзац, а вивести текст просто на новому рядку. Наприклад, вам треба записати вірш. Щоб не укладати кожен рядок вірша в абзацевий тег, можна просто в кінці кожного рядка писати тег
і тоді наступний рядок перенесеться вниз. Ось так усе просто.
Тег не слід використовувати як альтернативу абзацу. Варто пам'ятати, що між абзацами утворюється відступ, по висоті рівний одному порожньому рядку. При переносі з допомогою br відступ виходить менше.
Як зробити багато переносів?
А що робити, якщо вам потрібно зробити після якогось тексту, зробити великий відступ від подальшого вмісту. Є два варіанти, як це зробити. Можна написати багато тегів br . Так можна зробити безліч переносів.
Але краще зробити правильніше. Можна задати потрібному абзацу стильовий клас, а потім через css встановити великий відступ знизу.
Абзац
Abzac(
Margin-bottom: 100px;
}
У цьому випадку буде заданий відступ знизу 100 пікселів. Відповідно, відступ можна прописати будь-хто.
Урок 5.
У цьому уроці ми:
1. Дізнаємося як зробити щоб html код був для нас більш зручний і легко читаємо.
2. Розберемо як правильно робити перенесення текстового рядка.
Робимо html код зручним.
Зараз наш код зрозумілий і легко читаємо, тому що в ньому мало тексту та практично немає тегів. Коли ми створимо складнішу сторінку, там буде багато тегів, відповідно знайти потрібний буде складно.
Щоб не було каші з тегів, потрібно спочатку розставляти теги та рядки так, щоб вони візуально сприймалися легше. Коли браузер зчитує інформацію з html сторінки, йому все одно скільки пробілів і скільки порожніх рядків у коді.
Я змінив текст у коді сторінки щодо тієї, яку ми створювали, але це не має значення. На лівому і правому малюнку зображено той самий код. Обидва варіанти відображатимуться браузером на екрані монітора абсолютно однаково. Погодьтеся, працювати з кодом зображеним праворуч буде набагато легше, ніж з тим, що зліва.
Розглянутий нами код дуже простий, але навіть зараз помітна різниця у візуальному сприйнятті. Будь-яких певних правил "наведення порядку" немає, кожен майстер сам вирішує як йому зручніше працювати.
Перенесення рядка HTML. Тег <br>.
Зверніть увагу на рисунок. У першому варіанті текст написаний на один рядок, у другому варіанті на два рядки.
Браузер буде відображати обидва варіанти однаково. Текст буде написано в один рядок:
Ви запитаєте чому так? Адже в одному з кодів частину тексту перенесено на інший рядок. Було б логічно, якби в браузері частина тексту теж перенеслася на інший рядок, але у html своя логіка в цьому відношенні. Якщо ми в html коді робимо перенесення рядка, то для браузера це рівнозначно одному пропуску(як звичайний пробіл між словами у тексті). Якщо ми перенесемо частину тексту не на один рядок вниз, а на 2 або 3 (будь-яку кількість), то браузер все одно вважатиме цю відстань за один звичайний пробіл між словами і при виведенні на екран текст буде писатися в один рядок.
Тег <br>
Коли ми в третьому уроці знайомилися з тегами, я згадав, що бувають теги, які не вимагають закриття. Тег <br>один із них, служить він для перенесення рядка.
Давайте застосуємо його в коді:
Ми вставили тег <br>у наш html код і тепер при запуску файлу через браузер частина тексту буде перенесена на наступний сток.
* Не забуваймо зберігати зміни в Notepad (Ctrl + S) та оновлювати сторінку в браузері (F5).
Тег
встановлює переклад рядка у тому місці, де цей тег знаходиться. На відміну від тега параграфа
Використання тега BR не додає порожній відступ перед рядком. Якщо текст, у якому використовується переклад рядка, обтікає плаваючий елемент, за допомогою параметра clear тега
можна зробити так, щоб наступний рядок починався нижче за елемент.
Синтаксис
Текст
текст
Параметри
clear Повідомляє браузеру, як обробляти наступний рядок, якщо текст обтікає плаваючий елемент.Закриває тег
Не вимагається.
Приклад 1. Використання тега
Р.Л. Стівенсон
Літо в країні настало,
Верес знову цвіте.
Але нема кому готувати
Вересковий мед.
Опис параметрів тега
Параметр CLEAR
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Опис
Параметр clear повідомляє браузеру, як обробляти наступний рядок, якщо текст обтікає плаваючий елемент. Плаваючим елементом називається зображення, у якого встановлено параметр align або шар, до якого застосовується властивість CSS float.
Результат використання параметра clear залежить від краю, яким вирівнюється елемент і значення аргументу clear . Так, якщо зображення вирівнюється з лівого краю, а значення параметра clear тега
встановлено як all або left, то текст після тега
відображатиметься нижче малюнка. Будь-які інші значення параметра clear змусять текст розташовуватися праворуч від зображення та обтікати його.
Синтаксис
Аргументи
all Скасує обтікання елемента одночасно з правого та лівого краю. left Скасує обтікання з лівого боку елемента, розташованого після тега. right Скасує обтікання з правого боку елемента. none Скасує дію цієї властивості.
Значення за замовчуванням
Аналог CSS
Приклад 2. Скасування обтікання тексту
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Duis autom dolor в hendrerit в vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feu.
Примітка
Використання параметра clear у специфікації HTML 4 засуджується і натомість рекомендується застосовувати елемент CSS clear - BR (clear: both | left | none | right).
