Урок 5.

У цьому уроці ми:
1. Дізнаємося як зробити щоб html кодбув для нас зручніший і легко читаємо.
2. Розберемо як правильно робити перенесення текстового рядка.

Робимо html код зручним.

Зараз наш код зрозумілий і легко читаємо, тому що в ньому мало тексту та практично немає тегів. Коли ми створимо більш складну сторінку, там буде багато тегів, відповідно знайти потрібний буде складно.

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

Я змінив текст у коді сторінки щодо тієї, яку ми створювали, але це не має значення. На лівому і правому малюнку зображено той самий код. Обидва варіанти відображатимуться браузером на екрані монітора абсолютно однаково. Погодьтеся, працювати з зображеним кодом справа буде набагато легше, ніж з тим, що зліва.

Розглянутий нами код дуже простий, але навіть зараз помітна різниця у візуальному сприйнятті. Будь-яких певних правил "наведення порядку" немає, кожен майстер сам вирішує як йому зручніше працювати.

Перенесення рядка HTML. Тег <br>.

Зверніть увагу на рисунок. У першому варіанті текст написаний в один рядок, у другому варіанті в два рядки.

Браузер буде відображати обидва варіанти однаково. Текст буде написано в один рядок:

Ви запитаєте чому так? Адже в одному з кодів частину тексту перенесено на інший рядок. Було б логічно, якби в браузері частина тексту теж перенеслася на інший рядок, але у html своя логіка в цьому відношенні. Якщо ми в html коді робимо перенесення рядка, то для браузера це рівнозначно одному пропуску(як звичайний пробіл між словами у тексті). Якщо ми перенесемо частину тексту не на один рядок вниз, а на 2 або 3 (будь-яка кількість), то браузер все одно вважатиме цю відстань за один звичайний пробіл між словами і при виведенні на екран текст писатиметься в один рядок.

Тег <br>

Коли ми в третьому уроці знайомилися з тегами, я згадав, що бувають теги, які не вимагають закриття. Тег <br>один із них, служить він для перенесення рядка.
Давайте застосуємо його в коді:

Ми вставили тег <br>у наш html код і тепер при запуску файлу через браузер частину тексту буде перенесено на наступну стоку.
* Не забуваємо зберігати зміни в Notepad (Ctrl + S) та оновлювати сторінку у браузері (F5).

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

А ще можна зустріти такі чудові абзаци:

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

Застосовувати
для формування абзаців - це все одно, що забивати цвяхи шуруповертом (це теж інструмент, чому б і не забити цвях, інший).

Для чого призначений тег
?

update 23.02.10 – з "фокусами" з white-space: pre потрібно бути уважними, т.к. при такому форматуванні рядки, які не вміщаються в блок, автоматично не переносяться на новий рядок. Особливо це актуально для гумових дизайнів. У таких випадках все ж таки доводиться застосовувати
.

P (white-space: pre;)

Нотатка

Спільнота фанатів семантичної верстки взагалі не включила
в.

Де не повинно бути
?

• використовувати теги за призначенням: для абзаців це< >, для списків та -< >, < >, < >і т.д.;
• для форматування тексту та завдання відступів використовувати , такі як ;
• використовувати окремі елементидля створення рядків (для цього найкраще підходять нейтральні елементи розмітки< >і< >).

Розглянемо кілька прикладів. Абзаци:

Високопродуктивне рішення має велику пропускною здатністю- до 6.2 Gbps, і ідеально підходить не тільки для передачі голосу та відео, але також і для нових додатків, вимогливих до смуги пропускання, таких як on-line ігри.

SGSN здатний підтримувати до 1,5 мільйонів активних PDP сесій.

P ( margin-bottom: 12px; )

Декілька рядків номерів телефонів:

При відображенні текстових документіву браузері місце перенесення рядка в межах абзацу визначається автоматично залежно від розміру шрифтів та вікна перегляду. Перенесення рядка може здійснюватись лише за символами-розділювачами слів (наприклад, пробілами). Іноді в документах потрібно встановити примусове переведення рядка, що реалізується незалежно від параметрів налаштувань браузера. Для цього є тег примусового перекладу рядка
, який не має відповідного тега, що закриває. Увімкнення тега
у текст документа забезпечить розміщення наступного тексту з початку нового рядка. Наприклад, такий підхід можна використовувати для створення структур типу списків без використання спеціальних тегів розмітки списку. Або, наприклад, без цього тега не обійтися для відображення віршів тощо.

Наведемо приклад використання примусового переведення рядка (рис. 1.8):

Над затьмареним Петроградом

Дихав листопад осіннім холодом.

Плеска шумною хвилею

У краю своєї огорожі стрункою,

Нева металася, як хворий

У своєму ліжку неспокійною.

А.С.Пушкін. Мідний вершник

Мал. 1.8.Тег
можна використовувати для примусового перекладу рядка

На відміну від тега абзацу

При використанні тега
не буде утворено порожній рядок.

Використання тега
вимагає обережності - можлива ситуація, коли браузер вже зробив переведення рядка за одне-два слова до того, як зустрів ваш тег
. Це буває у випадку, якщо ширина вікна програми перегляду читача менша, ніж той самий параметр програми, за допомогою якої ви тестували ваш документ. У цьому може статися, що у рядку посеред абзацу залишиться лише одне слово, порушуючи цим красу компонування документа.

Примітка

При використанні тега
для розбивки тексту, що обтікає зображення або таблиці, можна встановити CLEAR, що припиняє обтікання тексту. Про це можна прочитати у розділах 3 та 4.

Теги u

Бувають ситуації, коли потрібно виконати операцію протилежного призначення – заборонити переведення рядка. Для цього існує тег-контейнер . Текст, розмічений цим тегом, буде гарантовано розміщуватися в одному рядку, незалежно від його довжини. Якщо при цьому вихідний рядок виходитиме за межі вікна перегляду браузера, то з'явиться горизонтальна смуга прокручування.

Розмічаючи текст за допомогою тега нерозривного рядка можна отримати дуже довгі рядки. Щоб цього уникнути, можна вказати браузеру читача місце можливого перекладу рядка, що буде виконано лише за потреби (так званий "м'який" переклад рядка). Це можна зробити, поставивши в потрібному місці тексту тег (Word BReak), який так само, як і тег
, не потребує закриває тег.

Примітка

Тег взагалі не підтримується браузером Netscape. Браузер Microsoft Internet Explorer розпізнає цей тег лише у тексті, розміченому тегами .