. А вже у цього тега є атрибут " align", Значення якого і визначає положення даного контейнера. Бувають три значення:" left", "center", "right". За замовчуванням, варто" left", Втім, думаю, що Вас це не дивує.

Давайте зараз напишемо той же HTML-код, Але з використанням контейнерів, до того ж, давайте вирівняти не по центру, а по правому краю.

Як бачите, все працює. Раджу Вам також поміняти значення атрибута " align", Щоб подивитися на інші види вирівнювання вмісту контейнерів.

Інший спосіб вирівнювання елементів HTML - це таблиці, але ця тема заслуговує на окрему розмову, тому поговоримо про неї в одній з наступних статей.

А поки Ваша сторінка повинна виглядати так:

Тема 1-го рівня, вирівняний по центру

З повагою, Михайло Русаков.

P.S. Якщо Ви хочете дізнатися більше по HTML, То подивіться мій безкоштовний курс з прикладом створення сайту на HTML:

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

Довіритися програмі чи все ручками?

Напевно у вас виникало питання: як зробити код читабельним? Чи може програма грамотно розставити всі відступи і переноси рядків так, щоб людське око отримував він виду коду лише естетичне задоволення? Звичайно, може! Не варто плекати ілюзій, що, раз роботу за вас робить, по суті, робот, то зроблена вона буде "брудно". Сервіси, які будуть представлені в статті нижче, не раз рятували мене. Наприклад, в ситуаціях, коли необхідно було скопіювати той же html код з іншого сайту, а теги при вставці виявлялися просто в якомусь хаотичному порядку розставлені по рядках: купа табуляцій, які не логічні переноси рядків, абсолютно не видно ніякої вкладеності! Напевно, багатьом таке знайоме. І дуже хочеться, щоб на своєму сайті у вас було по-іншому: акуратно і добре читаемо. Адже, в першу чергу, ми робимо це для себе, для зручності подальшої підтримки того чи іншого коду.

Давайте ж відформатуємо ваш код

Меньше слів більше діла. Як показала практика, форматування коду онлайн відбувається досить просто. Вам потрібно лише скопіювати ваш "брудний" код і вставити його в спеціальні текстові поля на одному з вказаних сайтів. Потім натиснути кнопку, трохи почекати і - вуаля! Ви отримуєте чудовий, відформатований і легко читабельний код.

Ось список всіх відомих мені "пуріфікаторов" коду для різних мов.

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

1. Styleneat

Ймовірно, найпростіший сервіс з представлених в огляді.
Можливостей у інструменту не так багато:

• Сортування властивостей за алфавітом
• Сортування селектор по алфавітом (якщо стоїть галочка "Safe Organize" (безпечне форматування) - цей параметр не доступний)
• Можливість вибрати стиль форматування: многострочное або в один рядок
• Вміє витягати CSS-файли, підключені за допомогою import, в основний файл і безжально їх обробляти
• Можна передати код на обробку за допомогою: текстового поля, завантаживши файл або вказавши посилання на CSS
• Результат можна забрати в вигляді CSS-коду або завантажити файл

2. FormatCSS

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

• розстановку пробілів / табів / нових рядків,
• сортування властивостей і імен селектор,
• перетворення імен властивостей і селектор в нижній регістр і т.п.

Чим мені особливо сподобався даний сервіс: умінням форматувати "драбинкою" субправіла (я вважаю це дуже зручним способом організації стилів).

3. CleanCSS

Досить потужний інструмент, що надає в наше розпорядження безліч можливостей:

• Згодувати CSS можна копіпастом в поле "CSS-Code" або у вигляді посилання на файл стилю
• Отримати результат можна у вигляді тексту або в файл
• На вибір користувача надано 4 типи форматування исходника: код може бути оптимізовано для найменшого розміру або, навпаки, для кращої читабельності. Є можливість задати шаблон форматування в полі "Custom temlate"
• Вміє об'єднувати правила, приводити запис властивостей до короткого увазі
• Якщо необхідно - видалить коментарі і невалидность визначення
• Як і вищеописані сервіси, з радістю відсортує все, що душі завгодно за алфавітом і перетворює в нижній / верхній регістр

До речі, в основі даного сервісу можна знайти движок "" - опенсурсний CSS-парсер / оптимізатор. Так що, всі бажаючі вільно можуть зобразити на його базі свій власний бьютіфер, з блекджек і перемикачами.
UPD\u003e У коментарях підказали посилання на близнюка це сервісу: CodeBeautifier. Набір функцій практично ідентичний CleanCSS (сервіс теж працює на CSSTidy).

4. ProCSSor

На мій досвідчений погляд - найзручніше з усього представленого в даному огляді.
Сервіс зустрічає користувача приємним інтерфейсом і дуже наочними спливаючі підказки, що дозволяють дуже швидко розібратися з настройками.
Як і будь-який поважаючий себе бьютіфер, ProCSSor прийме від нас код в поле введення, у вигляді файлу або посилання. Віддасть результат в браузер і виведе посилання на скачування файлу.
Налаштувань у інструменту цілком достатньо, щоб догодити практично будь-якому користувачеві, перераховувати їх не має особливого сенсу - краще відразу спробувати.
Приємною фичей сервісу є можливість зберегти свої налаштування, Щоб наступного разу можна було пропустити етап налаштувань і відразу перейти до процесу облагороджування.
Ще одна визначна пам'ятка - ProCSSor надає API, З документацією можна ознайомитися тут:

За допомогою тегів форматування ви можете виділяти семантично важливий текст на сторінках, створювати тексти "рукописного накреслення", вставляти в HTML документи символи з верхнім і нижнім індексом, а також збільшувати і зменшувати розмір шрифту.

Що таке семантика?

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

1. семантичний код безпосередньо впливає на обсяг HTML коду. Чим менше коду тим "легше" документ, а значить веб-сторінки швидше завантажуються і менше потрібно оперативної пам'яті на стороні користувача. Сайт ставати швидше і менш витратним.
2. комп'ютери, екранні рідери для яких важливі теги і їх атрибути, адекватно читають і розуміють вміст веб-сторінки.
3. семантичний код за інших рівних умов, буде видаватися вище в результатах видачі пошукових систем, ніж сторінка з несемантіческім кодом.

жирний текст

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

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

HTML-код з тегами і :

Увага: крутий спуск.

це рецепти олів'є і вінегрету.

Приклад: важливий і жирний текст

• Спробуй сам »

Увага: крутий спуск. це рецепти олів'є і вінегрету.

Увага: крутий спуск.

це рецепти олів'є і вінегрету.

курсивний текст

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

тег застосовується щоб зробити акцент на фрагменті тексту - це найбільш популярний варіант для курсиву. Інший варіант - це використання тега , Який застосовується просто для створення курсивного тексту.

HTML-код з тегами і :

Я люблю Родину!

ім'я Вікторія означає перемога.

Теги і

тег зменшує розмір шрифту на одиницю в порівнянні зі звичайним текстом. В HTML розмір шрифту вимірюється в умовних одиницях від 1 до 7, середній розмір тексту, що використовується за замовчуванням, прийнятий 3. Таким чином, додавання тега зменшує текст на одну умовну одиницю. тег навпаки збільшує розмір шрифту на одиницю в порівнянні зі звичайним текстом.

HTML-код з тегами і :

Це звичайний текст.

Це текст з меншими літерами.

Це текст з великими літерами.

Приклад: зменшений і збільшений шрифт

• Спробуй сам »

Це звичайний текст.

Це текст з меншими літерами.

Це текст з великими літерами.

HTML тег

тег використовується для виділення або підсвічування тексту через його актуальності в контексті. Хорошим прикладом є виділення слова, яке шукав користувач в документі. Зазвичай в браузерах фоновий колір тексту усередині контейнера виділяється жовтим кольором як чорнильним маркером.

HTML тег

тег використовується для виділення тексту, який був вилучений у новій версії документа. Подібне форматування дозволяє відстежити, які зміни в виправленому тексті документа були зроблені. Браузери зазвичай позначають текст у контейнері як перекреслений .

HTML тег

тег призначений для виділення тексту, який був доданий до нової версії документа. Подібне форматування дозволяє відстежити, який фрагмент вмісту був доданий під час останнього оновлення документа. Браузери зазвичай позначають текст у контейнері .

HTML тег

тег _{відображає текст в нижньому індексі. Текст при цьому розташовується нижче базової лінії інших символів рядка і зменшеного размера.Такой текст на практиці може бути використаний, наприклад, під час різних формул в нижньому індексі .}

HTML тег

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

Переклад рядків і горизонтальні лінії

тег
(Переклад рядків)

Як ви вже бачили раніше, тег

Дозволяє логічно і фізично відокремити один абзац тексту від іншого, але що робити, якщо всередині абзацу потрібно перенести текст на новий рядок? Спеціально для цих цілей призначений одинарний тег
. Одним з видимих \u200b\u200bз першого погляду відмінностей даного тега від

Є відсутність відступів після і перед тегом
. Це дозволяє розташовувати суміжні рядки тексту ближче один до одного. Можливість самостійно визначити місце перенесення може стати в нагоді під час запису віршів або для відділення різних елементів в документі. додайте елемент
в будь-який рядок, де хочете обірвати потік тексту і вставити розрив рядка.

тег

---

(Горизонтальна лінія)

Горизонтальні лінії дозволяють розділити довгий формально необмежений текст на окремі підрозділи. Горизонтальні лінії в веб-документі грають таку ж роль, як орнаментальні смуги в друкованих виданнях. Для вставки горизонтальної лінії використовується одинарний тег

---

. Даний блоковий одинарний тег дозволяє вставити горизонтальну риску, ширина якої дорівнює або всій ширині контейнера, в який вкладено тег, або ширині вікна браузера.

Приклад: переклад рядків і горизонтальні лінії

• Спробуй сам »

Ці рядки відокремлені один від одного за допомогою абзацу (p):

Це перший абзац.

Це другий абзац.

Це лінія:

---

Ці рядки відокремлені один від одного за допомогою тега br:
Наша Таня громко плачет
Впустила в річку м'ячик

HTML-код з тегами , , , _{, ^:}

У тексті є слово: удача.

слово біда було видалено з тексту.

слово перемога було додано в текст.

Формула води: Н ₂O.

Швидкість вітру: 20м ³/ Сек.

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

• Спробуй сам »

У тексті є слово: удача. Слово біда було видалено з тексту. Слово було додано в текст. Формула води: Н 2 O. Швидкість вітру: 20м 3 / сек.

У тексті є слово: удача.

слово біда було видалено з тексту.

слово перемога було додано в текст.

Формула води: Н ₂O.

Швидкість вітру: 20м ³/ Сек.

завдання

підсумкове завдання

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

Прийшов час повторити вивчене і виконати п'ять нескладних завдань:

Семантично сильне слово

• Виріши сам »

Виділіть слово "професіоналом" жирним шрифтом, позначивши тим самим тим самим особливу семантичну важливість цього слова.

Ти повинен стати професіоналом своєї справи

Ти повинен стати професіоналом своєї справи

Акцент на слові

• Виріши сам »

Зробіть акцент на слові "повний". При цьому візуально це слово має відображатися курсивом.