Атрибути та заголовки в HTML. Вирівнювання вмісту тегів Вставте вміст перед вмістом вибраного об'єкта. Метод before() у jQuery
Як я і обіцяв раніше, у цьому уроці ви дізнаєтеся як можна вирівняти по горизонталі вміст будь-якого HTML-тегу на сторінці, не використовуючи застарілий атрибут align . Як ви вже здогадалися, ми знову будемо використовувати стилі (CSS), а точніше наш улюблений атрибут style .
Отже, щоб вирівняти вміст HTML-елемента, необхідно атрибуту style присвоїти одне з наступних значень:
- text-align:center- Вирівнювання кожного рядка по центру елемента, наприклад, параграфа.
- text-align:left- Кожний рядок притискається до лівої сторони елемента (це значення за замовчуванням).
- text-align:right- Кожен рядок притискається до правої сторони.
- text-align:justify- Вирівнювання відразу по лівій та правій сторонах елемента. Поясню. Зазвичай у елемента, наприклад параграфа, одна сторона тексту завжди рівна, а інша - «рвана», тому що довжини рядків виходять трохи різними. Коли ми використовуємо значення text-align:justify , то кожен рядок рівномірно розподіляється по ширині. У разі потреби між словами браузер додає додаткові пробіли, а перше та останнє слово рядка завжди притиснуті до відповідних сторін, тому виходить рівний з обох сторін блок.
Приклад вирівнювання вмісту тегів
Заголовок по центру.
Параграф по центру.
Результат у браузері
Заголовок по центру.
Текст параграфа притискається праворуч.
Параграф по центру.
Взагалі, горизонтальне вирівнювання застосовується тільки до блокових тегів і осередків таблиці (про них поговоримо пізніше). Хоча, з іншого боку, навіть якщо ви спробуєте, то не зможете застосувати його до вбудованих (inline). Чому? А пам'ятаєте ми нещодавно з'ясували, що ширина вбудованого елемента дорівнює вмісту? Відповідно виходить, що цьому вмісту просто нікуди буде вирівнюватися і браузер елементарно проігнорує ваші «мистецтва». :)
Домашнє завдання.
- Створіть заголовок статті, двох її розділів та одного підрозділу у першому розділі. І нехай заголовок статті розташовується у центрі сторінки.
- Встановіть для всієї сторінки шрифт Arial, а для всіх заголовків – Times і нехай вони будуть написані курсивом.
- Колір тексту заголовка статті поставте #FF6600, розділів #6600FF, а підрозділу залиште постійним.
- Напишіть під кожним заголовком по одному параграфу, причому текст кожного з них повинен займати не менше трьох рядків під час перегляду в браузері.
- Вирівняйте другий параграф по центру, третій - праворуч, а четвертий по обох.
Продовжуємо вивчення HTML. У цьому уроці ми розглянемо HTML-заголовки сторінок, які заголовки бувають, як ними правильно користуватися і коли вони можуть застосовуватися. А також розберемо параграфи, щоб Ви могли наповнити свою сторінку текстом, але, головне, зробити це правильно.
Якщо Ви не вивчили першу статтю, знайти її можна тут:
- Урок 1. Що таке HTML?
Теорія та практика — Параграфи та заголовки HTML сторінки
Сьогодні ми поговоримо про параграфи та заголовки. Почнемо з простого - з параграфів і де вони використовуються.
Параграфи на сторінці
Я наведу приклад коду, в якому буде присутній тег параграфа .
Основну структуру Ви вже пам'ятаєте із першого уроку. Там розбирали основи і дивилися, що таке HTML. Тому зосередимо свою увагу на тому, що знаходиться між тегами
.
Коли Ви пишете будь-який текст на сторінці, чи це просто абзац або невеликий пояснювальний рядок під зображенням, необхідно цей текст поміщати всередину тега .
На наступних уроках Ви побачите процес оформлення даних абзаців. Зараз Ви повинні зрозуміти те, що не можна розміщувати тег на сторінці без тега. Тому що надалі буде складно застосувати якісь індивідуальні стилі саме для цієї ділянки тексту.
Спробуйте написати кілька абзаців. Деякі абзаци візьміть у тег, а деякі залиште без нього. І Ви одразу побачите різницю. Тому що якщо Ви напишете абзац усередині цього тегу, то в нього одразу з'являться відступи. А зараз перейдемо вже у HTML заголовках сторінки.
HTML заголовки на сторінці
У HTML документі є семантика. Я не говорю про технологію HTML5 і його нові теги. Тут лише розберемо базові, щоб Ви швидко змогли освоїти ази HTML. Семантика означає те, що не треба заголовки, абзаци, таблиці і так далі, створювати за допомогою того самого тега. Це можна зробити, але технологія HTML різноманітніша і для різних ситуацій передбачені відповідні теги. А Вам необхідно освоїти основні теги, щоб вільно працювати з HTML кодом.
Це невелике вступ я написав до того, що для параграфів необхідно використовувати вже відомий Вам тег. А ось для заголовків використовуються теги, що починаються з англійської літери "H".
Ось весь список заголовків, які Ви можете використати:
Деякі з цих тегів використовуються набагато частіше. Це такі теги, як h1, h2 або h3. Якщо хтось уже знайомий із CSS, то розуміє, що заголовок HTML заголовок сторінки h3 можна стилізувати таким чином, що він буде зовні схожий і на h1 або h2. Але значення, які вони мають, хоча б для SEO оптимізації, кардинально відрізняються. Як правило, ці цифри всередині тегів слід розуміти як рівень важливості того чи іншого HTML заголовка. Тому необхідно дуже ретельно опрацьовувати дані елементи і тоді пошукові системи помітять Ваші статті.
Поки ми не дійшли до CSS, Ви побачите стилі заголовків, які за замовчуванням у браузерах. Якщо Ви вставите один за одним дані теги і всередині напишіть будь-який текст, побачите наступне:
Для пошукових роботів також важливим є використання заголовків на сторінці. Є певні правила, які Ви можете прочитати у нашій книзі. PDF книга з розкрутки сайту.
Після того, як всі вивчили, відразу йдемо в код і пробуємо написати все своїми руками. Саме так найшвидше освоюється будь-яка мова програмування. Але технологія HTML набагато легша за будь-яку мову програмування, тому тут зможе розібратися кожен. Таким чином, Ви краще запам'ятаєте теги.
Відео урок - HTML заголовок сторінки? (практика)
Наочне відео на прикладі роботи з цими тегами:
Домашнє завдання
Д/З:як приклад напишіть невеликий текст, який складатиметься з 5-7 абзаців та 2-3 різноманітних заголовків.
Більше практикуйтеся у параграфах та HTML заголовках сторінок!
www.sitehere.ru
Як у HTML зробити таблицю
Будь-яка таблиця містить у собі рядки та стовпи. Вони, у свою чергу, можуть містити текст та зображення.
Для додавання на сторінку таблиці використовується тег
Рядки та стовпці задаються за допомогою тегів
Рядки таблиці (
Давайте створимо на практиці таблицю, яка складатиметься з одного рядка та чотирьох стовпців. Нам потрібно позначити початок таблиці (
), кінець рядка ( |
Результат:
Тепер давайте використовуємо тег
Результат:
Я поставив ширину таблиці 400 і, як бачите, перший і третій осередок виділені жирним і вирівнюються по центру. Інші - по лівому краю. Я рекомендую завжди приділяти достатньо часу форматуванню коду, щоб не заплутатися в ньому. У маленькій таблиці це може не грати великої ролі, але у великій…
Давайте трохи докладніше про ширину, коли я її згадав. Ширина таблиці задається атрибутом width, висота – height. Змінювати подібним чином можна не тільки ширину та висоту таблиці, але й розміри осередків (вони всі повинні поміщатися в таблицю, інакше браузер не зрозуміє, що ви хочете від нього).
Ці значення (ширина та висота) задаються в пікселях, відсотки. Можна залишити і так, нічого не писати, браузер подумає, що вам ліньки було писати «px» і визнає цифру за пікселі.
Ну а якщо ви хочете вирівняти вміст одного або декількох табличних осередків, використовуйте атрибут align зі значеннями left, center, right. Це горизонтальне вирівнювання, а є ще вертикальне і має свій окремий атрибут - valign, який може приймати значення: baseline (вертикальне вирівнювання точно по базовій лінії), bottom (по нижньому краю), middle (значення осередків будуть вирівняні вертикально по середині), top (по верхньому краю). За замовчуванням браузери вирівнюють осередки центром (середини).
Збільшуємо рамку (кордону) таблиці та змінюємо її колір
Ви напевно помітили, я вже показав вам як можна працювати з рамкою та шириною таблиці. Взагалі, дефолт таблиці завжди відображається в браузері без рамки, а це не завжди зручно. Ось чому:
Погодьтеся, якось не дуже. Але це не проблема для тих, хто вже знайомий з HTML-атрибутом border, який я використав у прикладах на початку посту.
Додаємо всього 1 атрибут і стає вже кращим:
Це як у Екселі! Уявіть, що не було б поділу осередків лініями (сіткою)? Ну жах. А ось що буде, якщо виставити border, що дорівнює 10.
Як бачите, border впливає тільки на зовнішню межу та обрамлення таблиці, змінюючи ширину зовнішньої рамки, а межі між осередками таблиці залишаючи колишніми.
Давайте змінимо колір цієї рамки, адже для цього також є атрибут - bordercolor. Встановимо його значення, що дорівнює «d3d3d3». Результат:
Як зробити відступи у таблиці
Відступи в таблиці також потрібні підвищення «читаемости», як і межі осередків. Для створення відступів нам знадобиться атрибут "cellspacing". Я як і раніше працюватиму з нашою 4х4 таблицею, застосовуючи до неї цей атрибут. Актуалізую код для вас (я наводжу лише один рядок, щоб не захаращувати пост):
Результат:
Це були відступи зовні осередків. Але є схожий атрибут для завдання відступів усередині осередків - cellpadding, зараз я зроблю його також рівним 10 і ви побачите, як збільшилася відстань від вмісту осередку до її меж (довелося зробити кількість осередків менше, щоб таблиця не розросталася надмірно). Код:
Результат:
Тепер приберемо "cellspacing" і залишимо тільки "cellpadding". Результат:
Ось і розібралися з тим, як створити відступи в таблиці та керувати ними. Чудово! Якщо Вас цікавлять як робити перенесення рядка, про це написано тут.
Як грамотно об'єднати осередки у таблиці
Для об'єднання осередків у таблиці також є спеціальні атрибути. Це "colspan" та "rowspan". Перший (colspan) об'єднує осередки по стовпцях (горизонталі), другий (rowspan) – по рядках або по вертикалі. Давайте об'єднаємо щось у нашій таблиці.
Тут уважно! При об'єднанні осередків вам потрібно зменшити їх кількість на те число (мінус один), яке ви прописуєте в параметрах атрибута. Якщо ви створюватимете таблицю в HTML, об'єднувати осередки не видаляючи зайві, то сайт їхатиме. Об'єднуємо дві – видаляємо одну. Об'єднуємо три – видаляємо дві. І так далі.
При злитті осередків у колонках або стовпцях, один осередок потрібно видаляти! І робити це стільки разів, скільки осередків ви об'єднуєте. Нині покажу на прикладі.
При злитті осередків у колонках або стовпцях, один осередок потрібно видаляти! І робити це стільки разів, скільки осередків ви об'єднуєте.
Нині покажу на прикладі. Ось наша поточна таблиця:
Давайте об'єднаємо осередки з номерами "1 та 2", "5 і 9", "4, 8, 12", "6 і 7". Дивіться, як круто вийшло, я сам не очікував!
Принцип об'єднання такий.
При горизонтальному об'єднанні осередку номер 1 і 2, потрібно в першому прописати «colspan=»2″», вміст другої помістити в перший (ми ж об'єднуємо) і видалити другий осередок (або приховати його від HTML як це зробив я потім покажу.)
При вертикальному об'єднанні осередків номер 4, 8, 12, потрібно у першому осередку (номер 4) прописати «rowspan=»2″», а вміст інших видалити, попередньо помістивши в осередок.
Ось який вийшов у мене код. Я приховав осередки для наочності (щоб вам було зрозуміліше), але можна видалити їх.
Сподіваюся зрозуміло пояснив і навів гарний приклад.
Як зробити заголовок у таблиці
Щоб задати таблиці заголовок – використовуйте теги