Знайомство з html

Введення в HTML і CSS завершено і настав час копати трохи глибше в HTML і вивчити різні компоненти, з яких складається ця мова.

Щоб почати створення сайтів ми повинні дізнатися трохи про те, які елементи HTML найкраще використовувати для відображення різних типів вмісту. Важливо також зрозуміти, як елементи візуально відображаються на веб-сторінці, а також, що різні елементи означають семантично.

Огляд семантики

Так що таке семантика? Семантика HTML є практикою надання сенсу та структури вмісту на сторінці за допомогою відповідного елемента. Семантичний код визначає значення вмісту на сторінці, незалежно від його стилю чи зовнішнього вигляду. Є кілька переваг від застосування семантичних елементів — щоб комп'ютери, екранні рідери, пошукові системи та інші пристрої адекватно читали та розуміли вміст веб-сторінки. Крім того, семантичний HTML простіше для управління та роботи з ним, тому що ясно показує, для чого служить кожен фрагмент контенту. означають і тип контенту, що вони представляють краще. Перш ніж ми це зробимо, давайте розглянемо два елементи — <div> та <span>, які насправді не несуть жодного семантичного сенсу. Вони існують лише для стилізації.

<div> і <span>

<div> та <span> — це елементи HTML, які діють як контейнери виключно з метою стилізації. У вигляді основних контейнерів вони не несуть будь-якого всеосяжного сенсу або семантичного значення. Абзаци семантично вже тому, що вміст усередині елемента <p> відомий і зрозумілий як абзац. <div> та <span> не містять жодного значення і є просто контейнерами.

І <div> і <span>, однак, є надзвичайно важливими при створенні сайту, тому що вони дають нам можливість застосовувати цільові стилі до набору контенту.

< ;div> є блоковим елементом, який зазвичай використовується для ідентифікації великих груп вмісту та допомагає побудувати макет та дизайн веб-сторінки. <span> з іншого боку є малим елементом і зазвичай застосовується для ідентифікації дрібних груп тексту всередині блокового елемента.

Ми зазвичай бачимо <div> та <span> з атрибутом class або id з метою стилізації. Вибір значення або імені атрибуту class або id потребує певної уваги. Ми хочемо, щоб вибране значення було пов'язане з вмістом елемента, а не його оформленням.

Наприклад, якщо у нас є <div> з помаранчевим фоном , який містить посилання соціальних мереж, нашою першою думкою може бути дати <div> значення class як orange. Що станеться, якщо оранжеве тло пізніше зміниться на синій? Значення класу orange втратить сенс. Більш розумним вибором для class буде social, оскільки він відноситься до вмісту <div> , а не до його стилю.

<!--div--> <div class="social"> <p>Мене можна знайти в...</p> <p>Крім того, я маю профіль на...</p>
</div> <!--span--> <p>Скоро ми <span class="tooltip">напишемо HTML</span> краще.</p>

Використання текстових елементів

Існує багато різних форм медіа, проте текст є переважним. Відповідно є цілий набір різних елементів для відображення тексту на веб-сторінці. Зараз ми зупинимося на найпопулярніших елементах, включаючи заголовки, абзаци, жирний шрифт для демонстрації важливості та курсив для акценту. Пізніше в уроці «Робота з типографікою» ми ближче розглянемо як задавати стиль тексту."><h1> до <h6>. Заголовки допомагають швидко розбити вміст і встановити ієрархію, і вони є ключовими ідентифікаторами користувачів, які читають сторінку. Заголовки також допомагають пошуковим системам індексувати та визначати зміст на сторінці.

Заголовки повинні бути використані в порядку, що відповідає змісту сторінки. Основний заголовок сторінки або розділу повинен бути розмічений за допомогою елемента <h1>, а наступні заголовки повинні використовувати елементи <h2> , <h3>, <h4>, <h5> і <h6>, при необхідності.

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

Ось приклад HTML для всіх різних заголовків та результат відображення на веб-сторінці.

<h1> ;Заголовок 1</h1> <h2>Заголовок 2</h2> <h3>Заголовок 3</h3> <h4>Заголовок 4</h4> <h5>Заголовок 5</h5> <h6>Заголовок 6</h6>

Абзаци

За заголовками часто йдуть абзаци. Вони визначаються за допомогою блокового елемента <p>. Абзаци можуть слідувати один за одним, додаючи інформацію на сторінку за потребою. Ось приклад того, як налаштувати абзаци. Стів Джобс був одним із засновників і довгий час головним виконавчим директором Apple. 12 червня 2005 року Стів виступив у Стенфордському університеті.</p> <p>У своєму виступі Стів закликав випускників слідувати їхнім мріям і незважаючи на невдачі ніколи не здаватися — порада, яку він щиро прийняв близько до серця.</p>

Жирний текст

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

Елемент <strong> семантично використовується, щоб надати сильне значення тексту і таким чином є найбільш популярним варіантом для жирного тексту. Елемент <b>, з іншого боку, семантично означає стилістичне виділення тексту, який не завжди є найкращим вибором для тексту, що заслуговує на увагу. Ми повинні оцінити значущість тексту для якого хочемо встановити жирність і вибрати відповідний елемент.

От два варіанти HTML створення жирного тексту у дії:

< ;!--Важливе значення--> <p><strong>Увага:</strong> падіння каміння.</p> <!--Стилістичне виділення--> <p>Це рецепт для <b>бекону</b> та <b>майонезу</b>.</p>

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

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

Елемент <em> застосовується семантично щоб зробити акцент на тексті, це найпопулярніший варіант для курсиву. Інший варіант — це елемент <i>, він застосовується семантично для передачі тексту іншим голосом або тоном, майже як би воно було укладене в лапки. Знову ж таки, нам потрібно буде оцінити значення тексту, який ми хочемо виділити курсивом, і вибрати відповідний елемент.

От код HTML для курсиву:

<!--Робимо акцент--> <p>Я <em>люблю</em> Чикаго!</p> <!--Інший голос або тон--> <p>Ім'я <i>Шей</i> означає подарунок.</p>

Ці текстові елементи досить зручні щоб вдихнути в наш контент життя. Крім цього, існують структурні елементи. У той час як текстові елементи визначають заголовки та абзаци, структурні елементи визначають групи контенту, такі як «шапка», «стаття», «підвал» та ін. Давайте поглянемо на них.

Створення структури

Довгий час структура веб-сторінки була побудована за допомогою <div>. Проблема в тому, що вони не забезпечують семантичного значення і досить важко визначити їх сенс. На щастя в HTML5 введені нові структурні базові елементи, у тому числі <header>, <nav>, <article>, <section>, <aside> та <footer>.

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

Мал. 2.01. Один з можливих прикладів структурних елементів HTML5, що надають сенс організації нашим сторінкам

<header>

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

<code data-language="html"><header>...</header>

Навігація

Елемент <nav> визначає блок основних навігаційних посилань на сторінці. Цей елемент повинен бути зарезервований тільки для головних розділів навігації, таких як глобальна навігація, зміст, попередня/наступна посилання або інших груп навігаційних посилань, що заслуговують на увагу.

Найчастіше посилання всередині елемента <nav> будуть вести на інші сторінки в межах одного сайту або частин тієї ж веб-сторінки. Різні одноразові посилання не повинні бути обернуті елементом <nav>, вони повинні використовувати тільки елемент <a>.

>

<code data-language="html"><nav>...</nav>

<article>

Елемент <article> застосовується для ідентифікації незалежного, самостійного розділу вмісту, який можна класифікувати як ізольований або повторно використовуваний. Ми часто використовуємо елемент <article> для розмітки постів блогу, газетних статей, контенту, що додається користувачами тощо.

При прийнятті рішення, чи слід використовувати елемент <article>, ми повинні визначити, чи вміст елемента може бути повторений в інших місцях без будь-якої плутанини. Якщо вміст елемента <article> був видалений з контексту сторінки і поміщений, наприклад, в електронну пошту або друковану роботу, то у вмісті, як і раніше, має залишитися сенс.

<code data-language="html"><article>...</article>

<section>

Елемент <section> застосовується для ідентифікації тематичної групи вмісту, яка, як правило, але не завжди, включає заголовок. Група контенту всередині <section> може мати спільний характер, але корисно визначити весь вміст як пов'язаний між собою.

Елемент <section> зазвичай використовується для поділу сторінки та забезпечення на ній ієрархії.

<code data-language="html"><section>...
</section>

Вибір між елементами <article>, <section> або <div>

Іноді досить важко вирішити, який з елементів <article>, <section> або <div> краще підходить для роботи, ґрунтуючись на його смисловому значенні. Хитрістю, як і з будь-яким семантичним вибором, є перегляд вмісту.

Обидва елементи <article> та <section> ; організують структуру документа та допомагають намітити його схему. Якщо вміст згрупований виключно для стилізації і не має значення для схеми документа, використовуйте елемент <div>.

Якщо вміст додається до схеми документа і може бути незалежно повторено або перенесено, використовуйте елемент <article>.

Якщо вміст додається до схеми документа і є тематичною групою вмісту, використовуйте елемент <section>.

<aside>

Елемент <aside> містить контент, такий як бічні панелі, вставки або короткі пояснення, який опосередковано пов'язаний з навколишнім вмістом. Наприклад, при використанні всередині елемента <article>, <aside> може визначити вміст, пов'язаний з автором статті.

Ми можемо інстинктивно думати про елемент <aside> як елемент, який відображається ліворуч або праворуч на сторінці. Однак ми повинні пам'ятати, що всі структурні елементи, включаючи <aside>, є блоковими і як такі виводяться з нового рядка і займають всю доступну ширину сторінки або елемента, в який вони вкладені , також відомий як їхній батьківський елемент.

<code data-language="html"><aside>...</aside>

Ми обговоримо, як змінити положення елемента, помістивши його праворуч або ліворуч у групі контенту, в уроці 5 «Позиціонування вмісту».

<footer>

Елемент <footer> визначає завершення або кінець сторінки, статті, розділу або іншого сегмента сторінки. Зазвичай елемент <footer> знаходиться в нижній частині його батька. Вміст всередині <footer> повинен бути пов'язаною інформацією і не повинен розходитися з документом або розділом, у якому знаходиться.

<code data-language="html"><footer>...</footer>

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

1. Використовуючи існуючий файл index.html додамо до нього елемент <header> span>. Він повинен включати існуючий елемент <h1>; також додамо елемент <h3> як слоган, щоб підтримати наш елемент <h1>.

   <code data-language="html"><header> <h1>Styles Conference</h1> <h3>24&ndash;26 серпня &mdash; Чикаго, штат Іллінойс</h3>
   </header>

2. Після елемента <header> додамо нову групу вмісту, використовуючи елемент <section>, який презентує нашу конференцію. Ми почнемо цей розділ з нового елемента <h2> і закінчимо абзацом.

   <code data-language="html"><section> <h2>Присвячується ремеслу створення сайтів</h2> <p>Кожен рік найяскравіші веб-дизайнери та фронтенд-розробники збираються в Чикаго, щоб обговорити новітні технології. Приєднуйся до нас цим серпнем!</p>
   </section>

3. Після презентації нашої конференції, давайте включимо ще одну групу вмісту — кілька тизерів, які ми ще додамо, зокрема, Спікери, Розклад та Місце проведення. Кожен з цих тизерів повинен також знаходитися у власному розділі та включати додатковий текст. обернутий елементом <section>. В результаті, у нас буде три елементи <section> всередині іншого <section>, це нормально.

   <code data-language="html"><section> <section> <h5>Спікери</h5> <h3>Спікери світового класу</h3> <p>До нас приїдуть понад двадцять фантастичних спікерів з усього світу, щоб поділитися своїми історіями.</p>
   </section> ...
   </section>

4. Насамкінець, давайте додамо копірайт в елемент <footer> наприкінці нашої сторінки. Для цього використовуємо елемент <small>, який семантично представляє побічні коментарі та дрібний шрифт — ідеальний для наших авторських прав.

   Як правило, вміст всередині елемента <small> буде відображатися як маленьким, але наше скидання CSS це запобіжить.

   <code data-language="html"><footer> <small>&copy; Styles Conference</small>
   </footer>

Тепер ми бачимо як наша головна сторінка почала оживати.

Мал. 2.02. Наша сторінка після додавання нового вмісту та структури

Наша головна сторінка починає складатися, давайте тепер поглянемо на створення посилань, щоб ми могли додати додаткові сторінки і побудувати іншу частину нашого сайту. виступає гіперпосилання, що забезпечує зв'язок однієї веб-сторінки або ресурсу з іншого. Гіперпосилання створюються за допомогою рядкового елемента <a>. Щоб створити посилання з однієї сторінки (або ресурсу) на іншу, потрібно атрибут href (від hyperlink reference). Він визначає призначення посилання.

Наприклад, натиснувши на текст «Shay», який знаходиться всередині посилання зі значенням атрибуту href як http://shayhowe.com, ми перенесемо користувача на мій сайт.

<a href="http://shayhowe.com" ;>Shay</a>

Відносні та абсолютні шляхи

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

Посилання, що ведуть на інші сторінки того ж сайту, будуть містити відносний шлях, який не включає домен (.ru, .com, .org, .edu та ін.) у значенні атрибуту href. Оскільки посилання вказує на іншу сторінку цього ж сайту, значення href має включати лише ім'я пов'язаної сторінки: about.html, наприклад.

Якщо сторінка в посиланні знаходиться в іншій папці, то значення href також має відобразити це. Скажімо, сторінка about.html знаходиться в папці pages, відносний шлях тоді буде pages/about.html. Посилання на інші сайти за межами поточного вимагають абсолютний шлях, де значення href має включати повний домен. Посилання на Google http://google.com для атрибуту href починається з http і в цьому випадку включає домен .com.

Нижче клацнувши на текст «Про нас» ви відкриєте сторінку about.html у браузері. Клацнувши на текст Google, з іншого боку, в браузері відкриється http://google.com.

<code data-language="html"><!-— Відносний шлях — & gt; <a href="/about.html">Про нас</a> <!--Абсолютний шлях--> <a href="http://www.google.com">Google</a>

Посилання на адресу електронної пошти

Іноді ми хочемо створити гіперпосилання на адресу електронної пошти, наприклад, текст гіперпосилання «Email Me» при натисканні відкриває клієнт електронної пошти користувача, заданий за замовчуванням і попередньо заповнює частину даних. Як мінімум, адресу електронної пошти та іншу інформацію, таку як тема та текст листа, які також можуть бути включені.

Для створення таке посилання значення атрибуту href має починатися з mailto:, потім слідує адреса електронної пошти, на який має бути надіслано повідомлення. Щоб створити посилання на адресу shay@awesome.com, наприклад, значенням href буде mailto:shay@awesome.com.

Додатково може бути додана тема, текст та інша інформація для пошти. Щоб додати тему, ми увімкнемо параметр subject=після адреси. Перший параметр після адреси повинен починатися знаком питання (?), Щоб пов'язати його з адресою гіперпосилання. Декілька слів у рядку теми вимагають кодування пробілів за допомогою %20.

Додавання тексту працює аналогічним чином, як і додавання теми, цього разу за допомогою body=у значенні href. Оскільки зв'язуємо один параметр з іншим, нам потрібно використовувати амперсанд (&) для їхнього поділу. Як і з темою, пробіли повинні бути кодовані через %20, а перенесення рядків за допомогою %0A. » вимагатиме наступне значення атрибуту href: mailto:shay@awesome.com?subject=Reaching%20Out&body=How%20are%20you.

Ось повний код:

<code data-language="html"><a href="mailto:shay@awesome.com?subject=Reaching%20Out&body=How %20are%20you">Email Me</a>

Відкриття посилання в новому вікні

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

Для відкриття посилання в новому вікні використовуйте атрибут target зі значенням _blank. Цей атрибут визначає, де саме відображатиметься посилання, а значення _blank задає нове вікно.

Щоб відкрити http://shayhowe.com у новому вікні, код буде виглядати так:

<a href="http://shayhowe.com/" target="_blank">Шей Хоу</a>

Зв'язування частин однієї сторінки

Періодично ми побачимо гіперпосилання, які вказують на частину тієї ж сторінки, де відображається посилання. Типовим прикладом таких зв'язків є посилання «Повернутися нагору», яке повертає користувача до верхньої частини сторінки.

Ми можемо створити посилання на сторінці, спочатку встановивши атрибут id, на який ми хочемо посилатися, а потім використовувати його значення в атрибуті href елемента <a>.

Використовуючи посилання «Повернутися нагору» як приклад, ми можемо вставити атрибут id вгорі для елемента <body>. Тепер ми можемо створити посилання з атрибутом href та значенням #top, яке посилається на початок елемента <body>.

Наш код посилання на тій самій сторінці буде виглядати так:

<code data-language="html"><body id="top"> ... <a href="#top">Повернутися вгору</a> ...
</body>

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

На практиці

Настав час перетворити односторінковий сайт Styles Conference на повномасштабний сайт із кількома сторінками, всі вони будуть пов'язані разом за допомогою гіперпосилань.

1. Ми почнемо з перетворення тексту «Styles Conference» всередині <h1> у нашому елементі <header> на посилання на сторінку index.html. Оскільки ми вже на сторінці index.html це може здатися трохи дивним, що справедливо, але оскільки заголовок повторюється на інших сторінках, зворотне посилання на головну сторінку матиме сенс.

   <code data-language="html"><h1> <a href="index.html">Styles Conference</a>
   </h1>

2. Для переміщення по всіх інших сторінках ми збираємося додати меню навігації за допомогою елемента <nav> всередину елемента <header>. Ми створимо сторінки Спікери, Розклад, Місце проведення та Реєстрація; щоб переходити з нашої головної сторінки, відповідно повинні зробити посилання для всіх них.

   <header> ... <nav> <a href="index.html">Головна</a> <a href="speakers.html">Спікери</a> <a href="schedule.html">Розклад</a> <a href="venue.html">Місце проведення</a> <a href="regi