Урок "Заголовки в HTML. Горизрнтальні лінії. Перегляд структури веб-сторінки за допомогою браузера.

Про матеріал

Урок з інформатики для учнів 9-11 класів при вивченні теми "Веб-технології"

Перегляд файлу

Урок №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

Позначте наступний текст відповідними тегами:
1. "Universal Studios Presents" є найважливішим контентом.
2. "Парк Юрського періоду" є наступним найважливішим змістом.
3. "Про" має менше значення, ніж Парк Юрського періоду.
4. Останнє речення - це лише абзац.
Збережіть з іменем index3.html і перегляньте результат у браузері.