В HTML се разграничават шест различни нива на заглавията. Те се определят от елементите h1 до h6.
<h1>Ниво на заглавие 1</h1> <h2>Ниво на заглавие 2</h2> <h3>Ниво на заглавие 3</h3> <h4>Ниво на заглавие 4</h4> <h5>Ниво на заглавие 5</h5> <h6>Ниво на заглавие 6</h6>
Където h1 представлява най-голямото заглавие, а h6 - най-малкото. В HTML5 са въведени и допълнителни опции за дефиниране на заглавия, които ще бъдат показани по-късно.
Различните нива на заглавията ви помагат да структурирате текста. Вземете за пример книгите. Има заглавие на книгата, което е сравнимо със съдържанието на елемента h1. Следователно в една HTML страница трябва да се вмъкне само един елемент h1. След това останалият текст се структурира чрез другите нива. Основното заглавие е последвано от h2. След това подглавите на h2 се обозначават с елемента h3.
Между другото: Размерът на нивата на заглавията първоначално се определя от браузърите. Въпреки това можете сами да го определите изрично, като използвате CSS. Повече за това по-късно.
Нивата на заглавията са много лесни за използване. Въвеждате символа h, последван от номера на желаното ниво.
<h1>PSD-Tutorials.com</h1>
След дефинирано по този начин заглавие автоматично се вмъква прекъсване на реда и интервал към следващите елементи.
Уверете се, че номерата във въвеждащия и затварящия таг са идентични.
Дефиниране на параграфи
В допълнение към заглавията, текстовете естествено се състоят и от параграфи. Такива параграфи също са много лесни за изпълнение в HTML. За тази цел се използва елементът p. Параграф, обозначен по този начин, по своята същност има определено разстояние до следващите елементи. Можете да контролирате размера на този параграф с помощта на CSS.
Ето един пример за дефиниране на два параграфа:
<p>Това е параграф</p> <p>Това също е параграф</p>
Погледът в браузъра предоставя следното изображение:
Между другото, в HTML5 не е задължително отворените параграфи да се затварят отново чрез </p>. За по-голяма яснота обаче аз всъщност бих използвал затварящия </p>.
Ръчно прекъсване на редовете
Непрекъснатият текст в рамките на параграфи, списъци и т.н. се обвива автоматично от браузъра, ако е по-широк от прозореца на браузъра, например. Това е практично, тъй като се избягва ненужното хоризонтално превъртане. Въпреки това, можете също така да обгърнете текста във всяка точка. За тази цел се използва елементът <br />. Обърнете внимание, че това е така нареченият самостоятелен таг, т.е. той няма затварящ таг, а се затваря сам.
<p>Ех, този е за работниците, които се трудят денем и нощем<br /> С ръце и с ум, за да изкарат заплатата си<br /> Които от векове насам не са получавали повече от хляба си<br /> Кървели са за страните си и са броили мъртвите си</p>
Когато използвате <br />, няма значение дали се намира в края на реда или на самостоятелен ред. И в двата случая резултатът изглежда така:
Върнете се към автоматичните прекъсвания на редовете, които се поставят от браузърите. Те често са проблематични, защото не можете да контролирате къде в крайна сметка се вмъква прекъсването на реда. Това може да доведе до нежелани резултати. Номерата на версиите са типичен пример за това.
iPhone 5
Обикновено трябва да е на един ред. Следователно прекъсването на реда не трябва да бъде между iPhone и 5.
iPhone 5
Това може да се предотврати чрез използване на така наречените защитени интервали. Ето един пример:
Този символен низ дефинира такова защитено пространство. В самия браузър това се показва като нормален интервал: 
За да работи това по желания начин, не трябва да вмъквате никакви интервали в изходния текст. Подобно нещо няма да работи:
Предварително форматиран текст
Възможно е да има ситуации, в които искате да изведете текст точно така, както е подреден в изходния текст. Типичен пример за това са списъците с програми, каквито често се срещат тук, в PSD-Tutorials.de.
За такива цели HTML позволява дефинирането на предварително форматирани текстови секции. След това отстоянията се вземат предвид от браузъра така, както се появяват в изходния код. Следващият пример показва как се реализира това:
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>"Здравей, света!" в PHP</h1> <pre> <?php echo "Hello, world\\n"; ?> </pre> </body> </html>
Пасажът, който трябва да бъде показан като предварително форматиран текст, се определя в елемента pre. Вмъкнете там отстъпите и т.н. точно така, както те трябва да бъдат показани от браузъра.
Когато разглеждате примерния код, може да забележите странните символи <?php и ?>. В браузъра те се показват като <?php и ?>. Вариантът, използван в изходния код, се нарича маскиране на символи. Това е необходимо, ако не искате HTML символите да бъдат интерпретирани от браузъра. Ако въведете <?php директно в изходния код, браузърът ще приеме, че това е отваряща се област на PHP. Ето защо символите са маскирани.
- Заменете символа & с низ от символи &
- Заменете символа < с символния низ <
- Заменете символа > с символния низ >
- Заменете кавичките с "
Между другото, pre е подходящ не само за показване на списъци с програми. Той може да се използва и за лесно показване на таблични данни. Следващият пример показва типична таблица, която е реализирана само с помощта на интервали в елемента pre.
<pre> Дестинация Заминаване Пристигане Платформа ---------------------------------------------------------------- Берлин 10:23 14:30 2 Хамбург 11:09 13:20 13 Мюнхен 12:04 15:45 1a </pre>
Резултатът в браузъра изглежда по следния начин:
Браузърите всъщност вземат предвид интервалите, които сте определили в изходния текст. Между другото, показаният вариант на таблицата работи доста добре. Намирам го за практичен и за по-малки таблици. Въпреки това, щом наборът от данни стане по-обширен, трябва да се върнете към класическите HTML таблици. Разбира се, в тази поредица можете да разберете и как могат да бъдат дефинирани те.
