Урок "Заголовки в HTML. Горизрнтальні лінії. Перегляд структури веб-сторінки за допомогою браузера.
Урок №55
Заголовки HTML. Горизонтальні лінії. Як переглянути джерело HTML?
Заголовки
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Заголовки HTML
Заголовки визначаються тегами від <h1> дo <h6>.
<h1> визначає найважливіший заголовок.
<h6>визначає найменш важливий заголовок.
Приклад
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Примітка: Браузери автоматично додають пробіл (відступи) до і після заголовка.
Заголовки важливі
Пошукові системи використовують заголовки для індексування структури та вмісту ваших веб-сторінок.
Користувачі переглядають ваші сторінки за заголовками. Важливо використовувати заголовки, щоб показати структуру документа.
<h1> теги слід використовувати для основних заголовків, а потім
<h2> теги, потім менш важливі заголовки
<h3>і так далі.
Примітка. Використовуйте заголовки HTML лише для заголовків. Не використовуйте заголовки, щоб зробити текст ВЕЛИКИМ або напівжирним .
Більші заголовки
Кожен заголовок HTML має розмір за замовчуванням. Тим не менш, ви можете вказати розмір для будь-якого заголовка з style - атрибутом, використовуючи font-size властивість CSS :
Приклад
<h1 style="font-size:60px;">Заголовок 1</h1>
Горизонтальні лінії HTML
<hr> Тег визначає тематичну перерву в HTML - сторінки, і найбільш часто відображаються у вигляді горизонтального положення.
<hr> Елемент використовується для поділу контента (горизонтальна лінія) HTML - сторінки:
Приклад
<h1>це заголовок 1</h1>
<p> Це текст.</p>
<hr>
<h2>це заголовок 2</h2>
<p> це ще текст.</p>
<hr>
Елемент <head> HTML
Елемент HTML <head> не має нічого спільного з заголовками HTML.
<head> Елемент є контейнером для метаданих. Метадані HTML - це дані про документ HTML. Метадані не відображаються.
<head> розташовано між <html> міткою і <body>тегом:
Приклад
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
Примітка: Метадані зазвичай визначають назву документа, набір символів, стилі, посилання, скрипти та іншу мета-інформацію.
Як переглянути джерело HTML?
Ви коли-небудь бачили веб-сторінку і дивувалися:
"Гей! Як вони це зробили?"
Переглянути вихідний код HTML:
Клацніть правою кнопкою миші на сторінці HTML і виберіть "Переглянути джерело сторінки" (у Chrome) або "Переглянути джерело" (у IE) або подібні в інших веб-переглядачах. Це відкриє вікно, що містить вихідний код HTML сторінки.
В Chrome можна використати клавішу F12
Перевірка елемента HTML:
Клацніть правою кнопкою миші по елементу (або порожньому місці) і виберіть "Перевірити" або "Перевірити елемент", щоб побачити, з яких елементів (ви побачите HTML і CSS). Ви також можете редагувати HTML або CSS на льоту на панелі "Елементи" або "Стилі", яка відкривається.
Елемент HTML <pre>
Елемент HTML <pre>визначає попередньо відформатований текст.
Текст всередині <pre>елемента відображається шрифтом фіксованої ширини (зазвичай Courier), він зберігає пробіли і розриви рядків:
Практична частина
Вправи для виконання
Вправа 1
- Відкрийте Notepad++
- Створіть новий файл і збережіть його у папку «Урок №55» з іменем index.html
- Створіть HTML-документ за зразком
<html>
<body>
<p> Лондон є столицею Англії. Це найбільш густонаселене місто у Сполученому Королівстві, де в мегаполісі мешкає понад 13 мільйонів жителів.</p>
</body>
</html>
- Додайте заголовок до абзацу з текстом "Лондон".
- Збережіть і перегляньте результат у браузері.
- Додайте горизонтальну лінію між заголовком і абзацом.
- Збережіть і перегляньте результата у браузері.
Вправа 2
- Додайте шість заголовків до документа з текстом "Привіт".
- Почніть з найважливішого заголовка і закінчите найменш важливим заголовком.
Вправа 3
-
Позначте наступний текст відповідними тегами:
- "Universal Studios Presents" є найважливішим контентом.
- "Парк Юрського періоду" є наступним найважливішим змістом.
- "Про" має менше значення, ніж Парк Юрського періоду.
- Останнє речення - це лише абзац.
- Збережіть з іменем index3.html і перегляньте результат у браузері.
<html>
<body>
Universal Studios представляє
Jurassic Park
Про
На острові Isla Nublar, був побудований новий парк: Парк Юрського періоду є тематичним парком клонованих динозаврів !!
</body>
</html>
про публікацію авторської розробки
Додати розробку