Напевно, Ви вже знаєте, що сайти створюються не без допомоги HTML. Але якщо Ви читаєте ці рядки, то, напевно, хочете взнати більше про цю мову. Тоді почнемо.
HTML (Hypertext Markup Language)- це мова гіпертекстової розмітки, на якій пишуться сторінки веб-сайтів.
Простіше кажучи, вона використовується для оформлення вмісту веб-сторінки сайту при виводі на екран монітора (строго кажучи, і при виводі на друк принтером). Для оформлення вмісту сторінки використовуються теги. Тег - це службове слово мови HTML.
Теги служать для оформлення і не відображуються браузерами при перегляді сторінки. Інколи їх називають ще дескрипторами. У коді сторінки це слова заключені в кутові дужки, наприклад <br> - цей тег переводить курсор на новий рядок.
Більшість тегів мають свої закриваючі теги, наприклад
<p>... якийсь текст ...</p>
В даному випадку тег <p> закривається тегом </p>. Це означає, що дія приведеного тега поширюється лише на вміст розміщенний між тегом <p> і його закриваючим тегом </p>. Даний тег <p> оформляє текст як абзац, але лише відповідно до зарубіжних правил - між абзацами пропускається рядок, а абзац починається без відступу («червоного рядка»).
Ви вже, напевно, зрозуміли, що закриваючий тег відрізняється косою рискою.
Код HTML виконується браузером, і за допомогою цієї мови можна робити лише статичні веб-сторінки. Для створення динамічних сайтів треба використовувати JavaScript і PHP. Аби зробити добре оформлений сайт досить освоїти HTML, і CSS(каскадні таблиці стилів). І можна буде робити повноцінні відносно дизайну сайти.
Весь код HTML документа має бути поміщений між відкриваючим <html> і закриваючим тегом </html>, за винятком тега <!DOCTYPE> що вказує версію HTML, на якій написана дана веб-сторінка. Існує багато версій <!DOCTYPE>, але у мене не виникало проблем з наступною версією HTML.
| Код | <!DOCTYPE HTML PUBLIC "-//W3C// DTD HTML 4.0 Transitional//EN"> |
Елемент <html> включає два основні блоки - «заголовок» і «тіло» документа. Заголовок визначається тегами <head> і </head>. У заголовку вказується різна службова інформація. «Тілом» документа є вміст, розташований між тегами <body> і </body>. Цей вміст і відображується браузером.
У заголовку документа окрім всього іншого може бути елемент <title>, вміст якого відображується в заголовку вікна браузеру. Таким чином, отримаємо наступну структуру HTML документа
| Код | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Заголовок веб-строрінки</title> </head> <body> Вміст веб-сторіночки </body> </html> |
Для правильного відображення подібної сторінки, ще потрібно помістити даний текст у файл з розширенням "html". Тобто створюємо новий порожній текстовий документ, наприклад у «блокноті» Windows, копіюємо вище приведений код, зберігаємо, і міняємо розширення файлу з "txt" на "html". І відкриваємо цей файл браузером щоб побачити результат нашої роботи. Це наша перша сторінка зроблена власноруч ..ну добре - скопійована власноруч)
Для форматування вмісту веб-строрінки використовуються інші теги. Почнемо з найпростіших.
Тег <br> - перекладає курсор на новий рядок. Цей тег аналогічний натисненню кнопки «Enter» в якому-небудь текстовому редакторі. Річ у тому, що браузер ігнорує всі переходи на новий рядок, отримані шляхом натиснення кнопки «Enter», тобто при наборі тексту в текстовому редакторові, скільки разів би Ви не переводили рядок подібним чином , у вікні браузеру це не відображуватиметься. Тому потрібно буде використовувати тег <br>. Але, забігаючи уперед, відмічу що не обов'язково кожен рядок закінчувати цим тегом, так як текст перекидається на інший рядок автоматично або за допомогою тегів шо формують параграфи. Тобто тег <br> використовується лише там де у примусовому порядку необхідно обірвати рядок.
Рухаємось далі..
Для відображення тексту, так, як він набраний в текстовому редактороі (тобто з розбиттям на рядки), можна використовувати тег <pre>(</pre>). Але використовувати цей тег не рекомендується
так як його підтримка браузерами бажає кращого.
Оформлення абзаців
Тег <p> із закриваючим тегом </p> оформляє текст як абзац відповідно до зарубіжних правил книгодрукування - між абзацами пропускається рядок, а абзац починається без відступу («червоного рядка»). Атрибут align управляє вирівнюванням вмісту абзацу (аналогічно кнопочкам вирівнювання тексту абзаців в Microsoft Word). Він може набувати наступних значень:
left - вирівнює вміст по лівому краю (по замовчуванню використовується саме це значення, тобто при записі <p>...Вміст абзацу ...</p>);
center - вирівнює вміст по центру сторінки;
right - вирівнює вміст по правому краю сторінки;
justify - вирівнює вміст абзацу по обох краях сторінки.
Наприклад
| Код | <p align="center">Вміст абзацу</p> |
Зверніть увагу на синтаксис. "Тіло" відкриваючого тега <p< уміщає в собі аттрибут align із значення "center", що заключається у лапки, далі слудує вміст абзацу, який підпорядковується правилам що задає тег, і у кінці присутній обов'язковий закриваючий тег </p>
Оформлення заголовків
Теги <h1>, <h2>, <h3>, ...,<h6> оформляють вміст як заголовок. Заголовок з найкрупнішим шрифтом дасть тег <h1>, відповідно з найменшим шрифтом - тег <h6>. Звісно ж, присутній як відкриваючий тег, так і закриваючий.
Горизонтальна лінія
Для відображення на Веб-сторінці горизонтальної лінії можна використовувати тег <hr>. Він малює горизонтальну лінію на всю ширину сторінки. Для завдання певної ширини використовується атрибут width, значенням якого може бути або довжина у відсотках (%) від повної ширини екранної сторінки, або величина у пікселях. Наприклад
<hr width="75%"> - горизонтальна лінія займе 75% від повної ширини екранної сторінки;
<hr width="75"> - горизонтальна лінія буде 75 пікселів.
Атрибут size у тегу <hr> задає товщину лінії. Наприклад <hr width="75%" size="3">
По зовнішнім джерелам