Як написати html-документ.


В інструкції я спробую пояснити структуру мови html та навчу вас азам мови. А ще трохи розповім про JavaScript і CSS

Інструкція Рівень складності: Нескладно Що вам знадобиться:
  • Комп'ютер
  • Програма блокнот чи Akel Pad (стандартний додаток Total Comander'а)
1 крок

HTML
HTML - мова розмітки гіпертексту. Більшість інтернет-сторінок написані на html.

2 крок
Показані теги html, head, body. Заметти, що ці теги не з'єднані.

Структура html
Мова html являє собою наступне: є один "ВЕЛИКИЙ" html, він ділиться на два розділи "трохи менше", на head (шапку документа) і body (тіло документа). Відповідно ці два тега можуть містити безліч інших "маленьких" тегів, а вони в свою чергу можуть бути наповнені ще одними. НО "перетинатися" ці теги не можуть ні в якому разі.

3 крок

Створюємо сторінку
Для того, щоб почати писати, вам потрібна програма блокнот чи Akel Pad (існують спеціальні html редактори, але особисто мені більше до душі звичайний редактор). Я вам раджу писати в Akel Pad'е, тому що в ньому більше функцій з редагування тексту.

4 крок

Теги html пишуться в трикутних дужках "" якщо це початковий тег і в трикутних дужках зі слеш "" кінцевий тег.
Отже, щоб дати браузеру зрозуміти, що це html документ відкриваємо початковий тег всього документа , в ньому ми пишемо "шапку" документа . У цьому тегу прописується назва документа, його favicon та інші теги не відносяться до "тіла". Щоб озаглавити текст впишіть назву між тегами і, розташовані в "шапці". Далі ми, після закінчення роботи з "шапкою", закриваємо її тегом.
Потім відкриваємо тіло тегом, в ньому пишеться тег і текст (той, що буде показаний на готовій сторінці). Після закінчення роботи з документами закриваємо тіло тегом, а потім закриваємо тег html ()

5 крок

Приклад найкоротшого html-документа


Приклад

Тіло документа

6 крок

Приклад довгого html-документа


Довгий html-документ


Таблиця

Перший стовпець першого рядка

Другий стовпець першого рядка

Перший стовпець другого рядка

Опис
Отже, тегом ми починаємо весь документ .


Потім йде "шапка документа" (), у ній спочатку розташований заголовок (Довгий html-документ), потім йде тег фавікона в якому параметр href вказує посилання на ізобравженіе. Наступний елемент вказує на . Css файл містить стилі для текстів, ці стилі можна прописати в самому документі впровадженням в нього CSS мови (тег "style"), але я вважаю цей спосіб не зручним, тому що якщо на сайті багато сторінок і у всіх потрібно змінити колір зручніше прописати цей колір в одному файлі ніж в кожній сторінці. Потім ми закриваємо шапку () і відкриваємо тіло () У ньому види елемент div, у якого є безліч параметрів, в даному випадку це параметр "вирівнювання" (align) у якого є параметри СПАР (right), ліворуч (left) і по центру (center), потім йде ще лдін div показує стиль введений або в css файлі, або в самому документі елементом style. Далі ми бачимо , що виділяє текст жирним , і елемент
, що робить спуск "курсору" на один рядок, далі два елементи. Потім починається ще один div, що показує вирівнювання по центру, а в ньому починається таблиця (), а елемент border говорить про наявність рамки (рамку можна прибрати змінивши значення 1 на 0). Слідом йде відкриває перший рядок, потім відкриває перший стовпець, а потім текст цього стовпця, і закриття стовпця тегом. Сподіваюся за таблицею все зрозуміло, а то рука відвалюється писати:) Таблиця закривається тегом. Потім закривається div, який вирівнював таблицю по центру. Далі закривається "тіло" і html.
Сподіваюся все зрозуміло??
Посилання на те, що вийшло

7 крок

Інші мови
Часто, щоб поліпшити свою сторінку в html вставляються інші мови, наприклад JavaScript , CSS та інші.

8 крок

Корисні посилання
Книги з html і JavaScript