Читати книгу - "інформатика, Іванна Клиса"
Шрифт:
Інтервал:
Добавити в закладку:
6.4. Оформлення тексту
Елементи HTML
Вивчаючи роботу із документами ви дізналися, що кожний документ складається з окремих об’єктів: абзаців, заголовків, малюнків тощо. Ці об’єкти, переведені у формат HTML, зображаються у вигляді елементів HTML [14].
Елементи HTML – це пари тегів і символьні дані (текст або код), вміщені між ними.
Елемент називається звичайно за іменем тегу (без кутових дужок).
Наприклад:
<!DOCTYPE html>
<html>
<body>
<h1>Мій перший заголовок</h1>
<p>Мій перший параграф. </p>
</body>
</html>
Пояснення прикладу:
Елемент <html> визначає весь документ.
У нього є початковий тег <html> і кінцевий тег </html>.
Всередині <html> елементу знаходиться елемент <body>.
Елемент <body> визначає тіло документа.
У нього є початковий тег <body> і кінцевий тег </body>.
Всередині елемента <body> є два інших HTML елемента: <h1> та <p>.
Елемент <h1> визначає заголовок.
У нього є початковий тег <h1> і кінцевий тег </h1>.
Елемент зміст це: Мій перший заголовок.
Елемент <p> визначає параграф.
У нього є початковий тег <p> і кінцевий тег </p>.
Елемент зміст це: Мій перший параграф.
Атрибути – це компоненти тезу, що містять вказівки про те, як броузер має сприйняти й обробити тег. Атрибут записується після імені тезу перед дужкою.
Всі HTML елементи можуть мати атрибути [6, 13].
Атрибути надають додаткову інформацію про елемент.
Атрибути завжди вказуються в початковому тезі.
Атрибути зазвичай входять в пари ім'я/значення, наприклад: ім'я="значення".
Значення атрибута записується після імені атрибута через знак рівності = Всі значення атрибутів за умовчанням мають братися в подвійні (") або одинарні (') лапки. Імена атрибутів можуть набиратися як малими, так і великими літерами, – броузер інтерпретуватиме їх однаково. У тега може бути кілька атрибутів, тоді вони відокремлюються один від одного пробілами [14].
Атрибут href
HTML посилання визначаються за допомогою тега <a>. Адреса посилання вказується в атрибуті href:
<a href="https: //w3schoolsua. github. io/">Це посилання</a>
Атрибут src
HTML зображення визначаються за допомогою тега <img>.
Ім'я файла джерела зображення вказується в атрибуті src:
<img src=".. /images/img_girl. jpg">
HTML-зображення визначаються за допомогою тега img, а ім'я файла джерела зображення вказується в атрибуті src:
<!DOCTYPE html>
<html>
<body>
<h2>Атрибут src</h2>
<p>HTML-зображення визначаються за допомогою тега img, а ім'я файла джерела зображення вказується в атрибуті src: </p>
<img src=".. /images/img_girl. jpg" width="500" height="600">
</body>
</html>
Часто при створенні Web-cтopiнoк виникає необхідність пояснити ту або іншу особливість НТМL-коду або наміри розробника, але так, щоб ці пояснень: – не відображалися у вікні броузера. У таких випадках незамінним є коментар.
Коментар означає фрагмент коду, що не виконується і розташований між групами символів < !– і -->.
Наприклад, на екрані не відображатимуться так елементи:
<!– Коментар, що займає один рядок –> або
<!– Коментар можна розташовувати в двох рядках
Задання заголовків:
<!DOCTYPE html>
<html>
<body>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>
</body>
</html>
Великі заголовки
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size: 60px;">Заголовок 1</h1>
<p>Ви можете змінити розмір заголовка за допомогою атрибута style, використовуючи властивість font-size. </p>
</body>
</html>
Кожен HTML заголовок має розмір за замовчуванням. Однак, ви можете вказати розмір для будь-якого заголовка з атрибутом style, використовуючи властивість CSS font-size:
<h1 style="font-size: 60px;">Заголовок 1</h1>
HTML Горизонтальний роздільник
Тег <hr> визначає тематичний розрив на HTML сторінці і найчастіше відображається як горизонтальний роздільник (горизонтальна лінія).
Увага!
Сайт зберігає кукі вашого браузера. Ви зможете в будь-який момент зробити закладку та продовжити читання книги «інформатика, Іванна Клиса», після закриття браузера.
