HTML для початківців

Категорії статей: HTML ; 11.07.2009

Напевно, Ви вже знаєте, що сайти створюються не без допомоги 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">

По зовнішнім джерелам

Залишити коментар

Перепечатка любых материалов © 2013 без разрешения автора запрещена. | 1.2MB | 0.02Sec ad Google