Основи HTML містять основні правила мови HTML, опис структури HTML-сторінки, відносини у структурі HTML-документа між HTML-елементами.
HTML-документ - це звичайний текстовий документ, що може бути створений як у звичайному текстовому редакторі (Блокнот), так і в спеціалізованому, з підсвічуванням коду (Notepad++, Visual Studio Code і т.п.). HTML-документ має розширення.html.
HTML-документ складається з дерева HTML-елементів та тексту. Кожен елемент позначається у вихідному документі початковим (відкриває) і кінцевим (закриває) тегом (за рідкісним винятком).
Початковий тег показує де починається елемент, кінцевий де закінчується. Тег, що закриває, утворюється шляхом додавання слеша / перед ім'ям тега: … . Між початковим та закриваючим тегами знаходиться вміст тега – контент.
Одиночні теги не можуть зберігати вміст безпосередньо, він прописується як значення атрибута, наприклад, тег створить кнопку з текстом Кнопка всередині.
Теги можуть вкладатися один в одного, наприклад,
Текст
. При вкладенні слід дотримуватися порядку їх закриття (принцип «матрьошки»), наприклад, наступний запис буде неправильним:Текст
.HTML-елементи можуть мати атрибути (глобальні, які застосовуються для всіх HTML-елементів, та власні). Атрибути прописуються у тезі елемента і містять ім'я і значення, що вказуються у форматі ім'я атрибута="значення" . Атрибути дозволяють змінювати властивості та поведінку елемента, для якого вони задано.
Кожному елементу можна надати кілька значень class і лише одне значення id . Множинні значення class записуються через пропуск, . Значення class та id повинні складатися лише з літер, цифр, дефісів та нижніх підкреслень і повинні починатися лише з літер чи цифр.
Браузер переглядає (інтерпретує) HTML-документ, вибудовуючи його структуру (DOM) та відображаючи її відповідно до інструкцій, включених до цього файлу (таблиці стилів, скрипти). Якщо правильна розмітка, то у вікні браузера буде відображена HTML-сторінка, що містить HTML-елементи - заголовки, таблиці, зображення і т.д.
Процес інтерпретації (парсинг) починається, перш ніж веб-сторінка повністю завантажена в браузер. Браузери обробляють HTML-документи послідовно, від початку, обробляючи CSS і співвідносячи таблиці стилів з елементами сторінки.
HTML-документ і двох розділів - заголовка — між тегами … і змістовної частини — між тегами … .
Структура веб-сторінки 1. Структура HTML-документаМова HTML дотримується правил, які містяться у файлі оголошення типу документа (Document Type Definition, або DTD). DTD є XML-документом, що визначає, які теги, атрибути та їх значення дійсні для конкретного типу HTML. Для кожної версії HTML є власний DTD.
DOCTYPE відповідає за коректне відображення веб-сторінки браузером. DOCTYPE визначає не тільки версію HTML (наприклад, html), але й відповідний файл DTD в Інтернеті.
...
Елементи, що знаходяться всередині тега, утворюють дерево документа, так звану об'єктну модель документа, DOM (document object model). У цьому елемент є кореневим елементом.
Мал. 1. Найпростіша структура веб-сторінки Щоб розібратися у взаємодії елементів веб-сторінки, необхідно розглянути так звані споріднені відносини між елементами. Відносини між множинними вкладеними елементами поділяються на батьківські, дочірні та сестринські.
Предок - елемент, який містить у собі інші елементи. На малюнку 1 предком всім елементів є . У той же час елемент є предком для всіх тегів, що містяться в ньому: ,
, , і т.д.
Нащадок - елемент, розташований усередині одного чи більше типів елементів. Наприклад, є нащадком , а елемент
Є нащадком одночасно для і.
Батьківський елемент - елемент, пов'язаний з іншими елементами нижчого рівня, і що знаходиться на дереві вище за них. На малюнку 1 та . Тег
Є батьківським лише для .
Дочірній елемент - елемент, що безпосередньо підпорядкований іншому елементу вищого рівня. На малюнку 1 лише елементи , ,
І є дочірніми стосовно .
Сестринський елемент - елемент, що має загальний батьківський елемент із аналізованим, так звані елементи одного рівня. На малюнку 1 і елементи одного рівня, так само як і елементи , і
Є між собою сестринськими.
1.1. Елемент 1.2. ЕлементРозділ ... містить технічну інформацію про сторінку: заголовок, опис, ключові слова для пошукових машин, кодування і т.д. Введена інформація не відображається у вікні браузера, проте містить дані, які вказують браузеру, як слід обробляти сторінку.
1.2.1. ЕлементОбов'язковим тегом розділу є тег. Текст, розміщений усередині цього тега, відображається у рядку заголовка веб-браузера. Довжина заголовка повинна бути не більше 60 символів, щоб повністю поміститися у заголовку. Текст заголовка повинен містити максимально повний опис вмісту веб-сторінки.
1.2.2. ЕлементНеобов'язковим тегом розділу є одинарний тег. З його допомогою можна задати опис вмісту сторінки та ключові слова для пошукових машин, автора HTML-документа та інші властивості метаданих. Елемент може містити кілька елементів, тому що в залежності від атрибутів, що використовуються, вони несуть різну інформацію.
Опис вмісту сторінки та ключові слова одночасно можна вказувати кількома мовами, наприклад, російською та англійською:
За допомогою тега можна заборонити або дозволити індексацію веб-сторінки пошуковими машинами:
Для автоматичного перезавантаження сторінки через проміжок часу потрібно скористатися значенням refresh:
Сторінку буде перезавантажено через 30 секунд. Щоб перекинути відвідувача на іншу сторінку, потрібно вказати URL-адресу у параметрі url:
. На практиці визначити місце становища цих основних тегів можна і за їх відсутності. Тому, якщо теги, і , а також відповідні закривають теги опущені, то програма - броузер може сама визначити те місце, де вони повинні були знаходитися. Але все-таки під час створення Web-сторінок опускати ці теги не рекомендується.
Найпростіший правильний документ HTML.
< HEAD >
< TITLE >Заголовок документа TITLE >
HEAD >
< BODY >
BODY >
ТегиHTML
Мова HTML складається із спеціальних розмічальних покажчиків – тегів. Їх також можна назвати командами, інструкціями або кодами HTML.
Тег – інструкція броузеру, яка вказує на спосіб відображення тексту. Усі теги починаються із символу «менше» (). Пару цих символів іноді називають кутовими дужками.Після відкритої кутової дужки йде ключове слово, Що визначає тег
Кожен тег у мові HTML має спеціальне призначення. Регістр літер у назвах тегів не має значення - можна використовувати як малі, так і великі літери, хоча загальноприйнято використовувати великі літери, щоб теги відрізнялися від звичайного тексту документа.
Існує два типи тегів – парні та непарні.
Парні теги– що відкривають та закривають, аналогічні круглим дужкам алгебраїчного виразу. Вони впливають на текст з того місця, де вжито, до того місця, де вказана ознака закінчення їх дії (теги, що закривають, починаються з символу косої риси (/).
Наприклад,< HTML >HTML >,< P >P>, H 3>
Непарні теги дають разовий ефект у місці своєї появи, тому в тезі, що закриває, немає необхідності.
Наприклад,
, ,
Тег несе службову інформацію про Web-сайт і не відображається в екрані браузера: це інформація про кодування Web-сторінки, про автора, а також набір ключових слів для пошуку, що відображають зміст сайту.
приклад.
Приклад створення таблиці
З прикладу видно, що сторінка використовує кодування W indows-1251 - найбільш поширену на сьогоднішній день, достатньо лише щоразу вставляти цей тег у такому вигляді на свою сторінку; автор сторінки – Іванов Іван; сторінку присвячено тваринам.
Під час відображення документа у браузері самі теги не відображаються, але впливають на спосіб відображення документа.
Якщо помилка в тезі вказує ключове слово, яке немає у мові HTML, тег ігнорується повністю.Атрибути тегів
Теги, що відкривають, часто можуть містити атрибути, що впливають на ефект, створюваний тегом.
Атрибути – це додаткові ключові слова, відокремлені від ключового слова тега та один від одного пробілами.
символи англійського алфавіту;
проміжків часу;
Атрибути можуть мати значення записувані після знака рівності (=). Завжди корисно укладати значення атрибута в лапки (одинарні чи подвійні). Рядок у лапках не повинен містити такі ж лапки всередині себе. Можна опускати лапки для значень атрибутів, які складаються лише з таких символів:
дефісів (-). ):
Ви також можете опустити лапки для значень атрибутів, які складаються лише з наступних символів (зверніться до технічної концепції
символів англійського алфавіту (A - Z , a - z )
цифр (0 - 9 )
проміжків часу
дефісів (- )
Таким чином, WIDTH=80 та ALIGN=CENTER - дозволене скорочення для WIDTH="80" та ALIGN="CENTER" .
Теги, що закривають, не містять атрибутів.
.
| Вирівнювання по горизонталі B >TD > По центру | ||||||||
| Вирівнювання по вертикалі B >TD > valign=top > По верхньому краю TD > | По центру TD > | По нижньому краю TD > TR > TABLE > В результаті ми отримаємо наступну таблицю: Вирівнювання по горизонталі По центру Ліворуч Праворуч Вирівнювання по По верхньому краю По центру По нижньому краю
Успішність N п/п Прізвище Школа КласПрактична робота № 9 Мета: навчитися створювати та форматувати прості таблиці у текстовому редакторі Блокнот. Створіть нову Web-сторінку, яка в броузері має виглядати так: ПрізвищеНомер телефону Петрова А.І. 31-74-16 Смирнов В.П. 46-29-89 Колір фону таблиці – сріблястий, ширина рамки таблиці – 1. В елементі вкажіть назву сторінки «П/р №14». Перегляньте створену Web-сторінку у вікні броузера. Поверніться до файлу, збереженого в Блокноті. Телефонний довідник ПрізвищеНомер телефону Петрова А.І. 31-74-16 Смирнов В.П. 46-29-89 Колір фону осередків першого рядка – світло-зелений, колір фону осередків інших рядків – сріблястий, ширина рамки таблиці – 5. Перегляньте веб-сторінку у вікні броузера. Збережіть зміни. Об'єднання рядків або стовпців у комірці . При побудові складних таблиць необхідно об'єднати (злити) в одному осередку кілька рядків або стовпців. Для цього існують атрибути: colspan - вказує кількість стовпців, об'єднаних в одному осередку (за замовчуванням = 1), rowspan - вказує кількість рядків, об'єднаних в одному осередку (за умовчанням = 1). Приклади: 11 Вся відмінність такої побудови таблиць полягає у появі параметра rowspan="2", цифра в якій відповідає кількості "підрядків", тобто. буквально те, скільки рядків злилося в осередку. Якщо в симетричній таблиці ми читаємо ліворуч-праворуч, то тут відбувається те саме, тільки чому ж у коді попереду комірки з двійкою стоїть комірка з цифрою три? Все дуже просто - буквальнокод для першого рядка розшифровується як "комірка, що містить дане 1", "комірка, що містить дане 3, що складається з двох підрядків", код для другого рядка розшифровується як "комірка, що містить дане 2". Як бачимо, фізично осередок 3 належить до першого рядка! Якщо ж у нас існують комірки, поєднані по горизонталі, то замість тега rowspan використовується тег colspan , природно, в тій комірці, яка займає площу кількох стовпців). Наприклад:
Практична робота № 10 Мета: навчитися створювати складні таблиці у текстовому редакторі Блокнот. Відкрийте текстовий редактор Блокнот. Створіть нову Web-сторінку, яка у браузері має виглядати так: Успішність п/пПрізвище Школа Клас Оцінки з хімії 1 п/г 2 п/г Іванов Петров Сидорів Колір тла першого рядка таблиці - аквамарин, ширина таблиці – 500, ширина рамки таблиці – 3. В елементі вкажіть назву сторінки «П/р №10». Перегляньте створену Web-сторінку у вікні браузера. Поверніться до файлу, збереженого в Блокноті. Розмітка Web-сторінки за допомогою таблиці.
Розмітку Web-сторінки зручно виконувати з допомогою таблиці. Можливі різні варіанти розмітки. Розглянемо деякі з них.
Мал. 4.12. Приклад розмітки Web-сторінки. Перший варіант Другий варіант. Розмітка сторінки здійснюється за допомогою таблиці шириною 760 пікселів, вирівняної по центру екрана. При цьому відвідувач, у якого роздільна здатність екрана дорівнює 800x600 пікселів, бачитиме сторінку шириною практично на весь екран, а відвідувач, у якого роздільна здатність монітора дорівнює 1024x768 і вище, бачитиме таблицю шириною 760 пікселів по центру екрану і білі поля з боків від неї. У цьому випадку зручно створити таблицю, що складається з трьох рядків та одного стовпця. Верхній рядок буде відведений під заголовок сторінки, другий рядок буде відведений під меню Web-сайту, а третій рядок безпосередньо під зміст сайту (рис. 4.13).
Мал. 4.13. Приклад розмітки Web-сторінки. Другий варіант Якщо необхідно розмістити всередині тексту сторінки будь-які ілюстрації, фотографії та інше, то в цьому випадку також використовуються таблиці. У наведеному нижче прикладі до другого осередку другого рядка вставлено таблицю, що складається з двох рядків і трьох стовпців. У першу і третю комірки першого рядка вставлені малюнки, а в другу комірку першого рядка - назву сторінки. До всіх осередків другого рядка введено текст (рис. 4.14).  Мал. 4.14. Приклад розмітки Web-сторінки. Третій варіант _____________________________________________________________________________ Тема 5 . Підсумкова робота «Створення Web-сайту на тему в ТР «Блокнот» Учні вдома розробляють та оформляють на папері у вигляді творчої роботи проект Web-сайту, а потім на уроці реалізовують його засобами мови HTML. Курс розроблений на основі книги І. Смирнова "Початку Web-дизайну". Думаєте, як створити HTML-сторінку? Для цього потрібно витратити кілька годин, і ви знатимете А створити свою першу сторінку зможете за 5 хвилин. HTML розшифровується як HyperText Markup Language. У перекладі це означає "мова гіпертекстової розмітки". Важливо розуміти, що HTML – це не мова програмування, а саме розмітки сайту. Усі сучасні браузери вміють розпізнавати його. Потім вони відображають інформацію у зручному вигляді для користувача, як заздалегідь було задумано автором.У цій мові використовуються спеціальні теги. Кожен тег виконує свою функцію. Їх дуже багато. В ідеалі потрібно вивчити все. Але для початківця базових знань цілком достатньо. Основи HTML Перед тим, як створити HTML-сторінку, потрібно знати, з чого вона складається. У цій мові є два поняття: елемент та тег. Як бачите, тег, що відкриває і закриває, відрізняються тільки "/". Весь HTML-документ є набір цих елементів. Існують певні вимоги щодо структури документа. Весь вміст сторінки має знаходитися між двома тегами та . Коли ви писатимете код, візьміть собі за звичку відразу проставляти тег, що відкривається і закривається. Також запам'ятайте, що структура мови HTML має власну ієрархію. Інакше вона називається вкладеністю. є найголовнішим, оскільки всі інші знаходяться усередині нього. HTML має два дочірні елементи:
У блоці HEAD вказується різна службова інформація. Ця інформація в браузері не виводиться. Наприклад, вказівки для розробників, для будь-яких програм, для роботів та багато іншого. Найголовніше – тут немає контенту. У розділі BODY вказується зміст документа, який буде відображено користувачеві. Навчіться відразу робити відкриті та закриті теги, оскільки може бути і по 10 вкладених елементів. Крім цього, для зручності рекомендується вкладені теги робити з відступом. Наприклад, так.
Так роблять, щоб рівні за значимістю теги були одному рівні, а дочірні - " усередині " . Так набагато зручніше для сприйняття та пошуку потрібного шматка коду. Інакше можна заплутатися. Але для економії місця саме і body можна робити без відступів. Так роблять, щоб у решти не було зайвого відступу. Решту бажано відокремлювати. Як створити просту сторінку на HTMLДля написання коду вам потрібен якийсь редактор. Їх дуже багато. Популярними є Notepad++ та Adobe Dreamweaver. Також можна використовувати блокнот. Так виглядає редактор Notepad++. Це дуже зручний редактор і при цьому безкоштовний. Вищезазначений Adobe Dreamweaver є платним. Відмінність редакторів, призначених для написання від блокноту, полягає в тому, що спеціальні теги підсвічуються. Якщо він не підсвітився, то ви написали неправильно.
Для того, щоб підсвічування відповідало мові, його потрібно вказати в налаштуваннях.
Давайте розглянемо, як створити сторінку HTML у блокноті. Тобто закінчимо технічну частину і потім перейдемо безпосередньо до вивчення тегів. Як створити веб-сторінку в блокноті HTMLДля початку відкрийте блокнот.
Потім наберіть у ньому те, що вказано на наступному скріншоті.
Звикайте писати руками, а не просто копіювати. Коли ви пишіть руками, ви краще запам'ятовуєте всю основу тегів.
Після цього файл можна відкривати у браузері та милуватися результатом. Тепер вам має бути зрозумілим, як створити веб-сторінку в блокноті HTML. Всесвітній консорціум W3CІснує така організація, як W3С, яка розробляє та впроваджує всі стандарти для інтернету. Усі браузери підпорядковуються цим стандартам та обробляють розмітки (коди) сторінок відповідно до цих правил. На офіційному сайті розробників HTML можна знайти таблицю з усіма тегами і правилами їх використання. У рамках цієї статті ми розглядаємо найголовніші. Чи можете ви подумати, які можуть бути правила? Всі ці теги мають свою рекомендацію. Їх декілька:
Перед тим, як створити HTML-сторінку, потрібно розібратися з тим, що має бути у службовій частині HEAD. В області HEAD є як обов'язкові, і необов'язкові теги. До обов'язкового тегу належить заголовок. Він позначається Заголовок. Він надається всьому документу. І те, що ви бачите в результатах пошукової системи Google, це тег title. Перейдемо до розділу BODY. Існують елементи, які відображаються у браузері, а є й не відображаються. Наприклад, коментарі не відображаються користувачеві. Їх можна використовувати для нотаток або для підказки іншим співробітникам, якщо ви працюєте в команді. Позначається вони як Все, що знаходиться між , розцінюється програмою саме так. Зверніть увагу, що не можна вкласти тег-коментар в інший тег-коментар. Бо як тільки ви відкриєте. Приклад такої вкладеності: продовження першого коментаря --> Результатом у браузері буде наступне продовження першого коментаря --> А ось шматок не буде видно. Другий тег, Що відкривається Ще один якийсь текст | ||||||
