В даному випадку ми говоримо браузеру, що HTML відповідає міжнародній специфікації версії 4.01. і він буде однаково виглядати у всіх браузерах (зазвичай це три основних Internet Explorer, Opera, Firefox).
Далі позначається початок і кінець документа тегами і відповідно. Усередині цих тегів повинні знаходитися теги голови (
) І тіла документа ().Зазвичай основою голови документа є елемент TITLE - заголовок документа. Також там міститься вся технічна інформація, різні таблиці стилів і.т.п.
Основне вміст: текст, таблиці, картинки, - знаходиться в тілі документа.
На цій картинці схематично зображено структура:
Як ви бачите, голова знаходиться над тілом, тому ніколи не ставте голову документа в тілі документа (або навпаки). Спочатку закриваємо голову документа , і лише потім відкриваємо тіло
. І ще, у документа одна голова і одне тіло, і не варто намагатися створювати їх більшу кількість.Для створення сторінки:
КРОК 1. Створіть на своєму комп'ютері папку з назвою вашого майбутнього сайту, ну наприклад в даному випадку актуально буде назвати папкуobuchenie_html. Всередині папки створіть ще одну папку з названіемwww. а всередині неї ще одну для зображень з названіемimg (пізніше вставити туди картинки):
КРОК 2: Зайдіть в створену на попередньому кроці папкуwww і створіть в ній текстовий документ. Для цього треба зайти в неї, клікніть правою кнопкою миші в випадаючому меню виберіть Створити - Текстовий документ.
КРОК 3: Напишіть в Блокноті текст найпростішої сторінки
Ура. Я створив свою першу сторінку на html.КРОК 4: з охороною ваш документ як "index.htm" ( ".html" дасть той же результат). Після збереження можете видалити текстовий документ.
КРОК 5: З апустіте файл, index.htm
Для того, щоб внести зміни в сторінку, Вам потрібно відкрити даний файл через звичайний блокнот. Або ж, можна змінювати прямо в браузері, але тільки в браузері Opera.
2 Форматування тексту
За замовчуванням текст йде разом, без поділів на абзаци, заголовки, тобто форматування відсутня!
Основними елементами форматування тексту в html є теги:
Розглянемо кожен тег докладніше.
P -використовується для розмітки параграфів в html документах.
ALIGN - визначає спосіб горизонтального вирівнювання параграфа. Можливі значення: left, center, right, justify. Це відповідно по лівому краю, по центру, по правому краю, і по ширині. За замовчуванням має значеніеleft.
Цей параграф по центру
Цей по лівому краю
Цей теж по лівому (тому що за замовчуванням)
Цей по правому краю
У цьому параграфі текст буде вирівнюватися по ширині (одночасно по лівому і правому краях документа). Не розуміючи justify браузери будуть вирівнювати текст по лівому краю
Примітка: вміст в лапках д.б.н. написано без пробілів, тобто
а не
інакше не буде працювати!
H1, H2. H6 -Застосовується для розбивання тексту на смислові рівні - розділи і підрозділи.
Існує шість рівнів заголовків, що розрізняються за величиною шрифту.
ALIGN - визначає спосіб горизонтального вирівнювання заголовків. Можливі значення: left, center, right .По замовчуванням -left.
Примітка: що закриває тег обов'язковий!
BR -Даний елемент здійснює перенесення рядка.
Якщо всередині тіла документа написати наступне:
Починається перший рядок
тепер йде друга
а ось вже і третя
А це параграф і всередині нього теж можна використовувати тег
розриву рядків. Його треба використовувати завжди, коли треба перенести рядок :)
Як ви напевно помітили, при перенесенні рядки не починається новий параграф! Перенос- він і є перенесення! Не має закриває тега.
DIV - використовується як зручний контейнер для блоків html коду сторінки, яким легко динамічно маніпулювати - переміщати, регулювати відступи, приховувати і т.п. Обов'язковий закриває тег!
ALIGN - визначає спосіб горизонтального вирівнювання контейнера. Можливі значення: left, center, right, justify. Це відповідно по лівому краю, по центру, по правому краю, і по ширині .По замовчуванням має значеніеleft.
Припустимо нам потрібно вирівняти перші два рядки тексту з попереднього прикладу по правому краю, не виділяючи при цьому їх в абзац.
тепер йде друга
А це параграф і всередині нього теж можна використовувати тег
розриву рядків. Його треба використовувати завжди, коли треба перенести рядок :)
Тобто ми взяли два рядки коду, уклали їх в контейнер DIV і вирівняли його по правому краю!
Примітка: Знаходяться між початковим і кінцевим тегами текст або HTML-елементи виділяються як би в окремий параграф (але відступи набагато менше).