Структура документа html

HTML - мова гіпертекстової розмітки сторінок, він дозволяє оформляти веб-сторінки в тому вигляді, в якому ми їх бачимо в інтернеті.

Команди в мові HTML оформляються за допомогою тегів - спеціальних зарезервованих слів, укладених в кутові дужки. Теги можуть мати такий вигляд:



і т.д.

Для чого потрібні теги? З їх допомогою ми пишемо код сторінки, який передається з віддаленого сервера на браузери відвідувачів вашого сайту, а вже справа браузерів перетворити цей код в вид сторінки, на якій можна побачити і текст, і графіку, і анімацію.

Для того, щоб краще зрозуміти, як робляться сторінки для вебу, вивчимо це на прикладі. Створимо першу сторінку для нашого майбутнього сайту. Потім, з часом і приходять досвідом, ви будете її доповнювати і покращувати, а поки обмежимося найнеобхіднішим.

Для початку треба сказати, що всі сайти мають вхідну сторінку, і зазвичай ця вхідна сторінка називається index.html. Не будемо порушувати традицію.

Тож почнемо. Для того, щоб браузер при прийомі коду зрозумів, що він має справу з HTML, ми повинні про це йому повідомити. Робиться це за допомогою тегів

Перший тег тут є відкриває, тобто він буде стояти на початку коду, другий тег - закриває (його ознака - прямий слеш «/» після відкриває дужки). Він розташовується в кінці коду і закриває сторінку html.

Взагалі, майже всі теги вимагають закриття. Таким чином, утворюються пари тегів: відкриває-закриває. Трохи нижче це буде пояснено докладніше.

Отже, ми дали зрозуміти браузеру, що передаємо йому html-документ. Іншу частину коду ми будемо розміщувати між цими двома тегами.

В частини міститься те, заради чого, власне, і була зроблена сторінка - текст, картинки, форми і т.д.

Отже, вставляємо в код нашої сторінки теги і . Отримуємо наступне:

Така побудова обов'язково для всіх html-сторінок.

заголовок документа

Тепер треба заповнити заголовок сторінки. Виберемо для неї назву. Наприклад, «Перша сторінка». Отже, між тегами і нашого коду, тобто в заголовку, вписуємо наступне:

Після цього в заголовку вікна браузера і на кнопці в панелі завдань ми зможемо бачити назву сторінки.

Для того, щоб задати атрибути документа, скористаємося тегом . З його допомогою можна описати спосіб кодування, ім'я творця сторінки, інформацію для пошукових систем. Загальний синтаксис тега .

Таким чином, запишемо в заголовку (т. Е. Між тегами і ) Такі рядки:

Отже, ось код нашої першої сторінки:



Перша сторінка






Але якщо ви зараз відкриєте сторінку в браузері, ви побачите, що в ній нічого не записано. Адже все, що ми до цих пір записали в код, знаходиться всередині тегів .

Тепер можна приступати до створення видимої частини сторінки.

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

Почнемо з вибору виду сторінки. усередині тега можна задати колір фону або фоновий малюнок, колір і розмір шрифту і гіперпосилань і т. п. Кольори задаються в шістнадцятковому обчисленні, тобто в вигляді # 000000.

Наприклад, виберемо колір шрифту темно-синій, фон - білий, посилання будуть синього кольору, активні посилання - блакитні, відвідані посилання - сірі. Можна також задати фоновий малюнок.

Отже, запишемо тепер всі вибрані параметри в тег .

Тут треба зауважити, що регістр в написанні тегів не має значення, тобто повністю відповідає . в той же час при написанні імен файлів регістр має значення. Якщо ваш файл називається «bkg.jpg», а в коді ви його запишете як «Bkg.jpg», або «BKG.JPG», або «bkg.JPG», він просто не буде знайдений при відкритті сторінки і відповідно не відобразиться в браузері.

Параметри кольору, так само як і інші значення тегів, правильніше брати в лапки: text = "# 000099". але це не обов'язково.

Кольори можна задавати не тільки цифровим значенням, для їх позначення існують ще й спеціально зарезервовані слова, наприклад text = "blue" link = "red". Однак число цих позначень досить обмежена, і відображаються вони не у всіх браузерах коректно, тому я б не рекомендувала їх використовувати.

Взагалі, майже всі теги, призначені для визначення виду сторінки, тексту, для форматування абзаців та ін. Можна і потрібно ставити за допомогою CSS - каскадних стилів. Це дуже спрощує життя веб-майстру, економить час і скорочує розмір коду сторінки (а, відповідно, і час її завантаження з мережі). Але вивчення CSS у нас ще попереду.

Для оформлення сторінки можна застосовувати теги форматування, що визначають розташування тексту і малюнків, вид тексту, розмір шрифту і т. Д.

Текст будь-якого документа зазвичай структурно поділяється на частини за допомогою заголовків, причому заголовки можуть бути різних рівнів. Майже всі браузери підтримують шість рівнів заголовків. Загальний синтаксис тега . де х - рівень заголовка. наприклад:


Тема другого рівня


Тема третього рівня

При використанні тільки HTML застосування цього тега не дає аж надто великих переваг. Але варто тільки підключити CSS - і все відразу стає на свої місця. З його допомогою можна задати всі параметри всіх заголовків до дрібниць. Тому будемо поки мати на увазі існування такого тега, а при вивченні CSS почнемо використовувати його в повну силу.

Для визначення виду шрифту в HTML використовується тег . Усередині цього тега ми можемо вказати розмір шрифту, назва, колір. Наприклад, запишемо в нашу сторінку першу фразу: «Це моя перша веб-сторінка» шрифтом «Arial» або «Verdana» червоного кольору, розмір шрифту виберемо 12 pt. Це буде виглядати так:

Це моя перша веб-сторінка

Зверніть увагу на закриває тег. Якщо його не поставити в кінці фрази, то весь наступний текст (до першого зустрінутого закриває тега ) Буде відображений червоним шрифтом 12pt. Після цього шрифт буде відображатися так, як це визначено в тезі .

Розмір шрифту може бути заданий різними способами. Один з них - завдання в точках (pt). Можна також вимірювати розмір шрифту пікселями (px), одиницями. Таким чином, ось кілька варіантів написання параметрів шрифту:

текст
текст
текст - зазвичай встановлюється за умовчанням
текст
текст

Однак зверніть увагу на те, що жорстке визначення розміру шрифту не завжди корисно. Далеко не у всіх ваших відвідувачів будуть ті ж настройки браузера, що і у вас. Більшість використовує, згідно зі статистикою, розмір розгортки екрану 800х600 пікселів, але багато адже і таких, хто обирає інші настройки. Якщо ви, наприклад, визначте шрифт основного тексту рівним 2 одиницям, в вашому браузері, напевно, він буде виглядати відмінно. Але цілком можливо, що хтось, зайшовши на ваш сайт, захоче зробити шрифт побільше, але не зможе. Якщо ж ви не поставите це параметр, шрифт буде відображатися так, як це встановлено за замовчуванням, тобто розміром в 3 одиниці, і в той же час дозволить користувачеві змінювати налаштування на свій розсуд.

Також треба підкреслити, що дуже велике значення має правильне розміщення кутових дужок, в які укладені теги. Варто тільки забути поставити дужку - і частині сторінки наче й не було! Все, що виявиться в частині після відкриває дужки, стане невидимим для браузера, адже воно виявиться як би всередині тега!

Можна встановлювати також вид накреслення шрифту. Для цього служать такі теги:

- курсив
- жирний
- підкреслений

Вони вимагають обов'язкового закриття.

Можливо спільне їх використання. наприклад,

Це моя перша веб-сторінка

Бажано розташовувати закривають теги в порядку, зворотному появи відкривають тегів. Це виключить можливі глюки при відображенні сторінки.

Для того, щоб форматувати абзаци, використовують тег

. Він не вимагає обов'язкового закриття, тобто при введенні наступного тега

починається новий абзац. Усередині цього тега можна задавати вид вирівнювання тексту. Це робиться за допомогою спеціального параметра align.

- абзац з вирівнюванням по лівому краю

- абзац з вирівнюванням по правому краю

- абзац з вирівнюванням по центру

- абзац з вирівнюванням по ширині

Перенесення тексту на новий рядок можна проводити за допомогою тега
. Він не вимагає закриття. наприклад:

перший рядок

Другий рядок.

Дуже часто виникає необхідність створення на сторінці різних списків. Для цього зручно користуватися тегами списків. У HTML є можливість робити пронумерованих списків і непронумеровані.

У пронумерованому списку браузер автоматично вставляє номери елементів по порядку. Якщо вам знадобиться видалити один з елементів, номера автоматично будуть перераховані. Пронумерований список починається тегом

    і закінчується закриває тегом
. Кожен елемент списку починається з тега
  • . що не потребує закриття. приклад:


    1. перший рядок
    2. Другий рядок
    3. третій рядок

    Можна заздалегідь визначити, з якого значення буде починатися відлік. Робиться це за допомогою параметра start.

      . де n - число, з якого починається відлік.

      тег

        може мати декілька параметрів, які визначають вид лічильника:

          - великі латинські літери (A, B, C.)
            - маленькі латинські літери (a, b, c.)
              - великі римські цифри (I, II, III.)
                - маленькі римські цифри (i, ii, iii.)
                  - звичайні цифри (1, 2, 3.)

                  Непронумеровані списки позначаються в коді за допомогою стартового тега

                    і закриває
                  . Для позначення елементів списку використовуються так само, як і в попередньому випадку, теги
                1. .

                  тег

                    може мати три різних параметра, за допомогою яких можна задати вид маркерів.

                      - зазвичай встановлюється за умовчанням
                        - круглий
                          - квадратний

                          Наприклад, створимо список з квадратними маркерами:


                          • перший рядок
                          • Другий рядок
                          • третій рядок

                          За допомогою тегів списків можна створювати великі вкладені списки, що мають строгу структуру. Ось невеликий приклад:


                          1. перший розділ

                            • перший рядок
                            • Другий рядок
                            • третій рядок

                          2. другий розділ

                            • перший рядок
                            • Другий рядок 

                          Це моя перша веб-сторінка. 
                          Я вивчаю мову HTML, 
                          щоб зробити свій перший сайт

                          Для того, щоб зробити пробну сторінку, цих тегів цілком достатньо. Я пропоную вам спробувати на основі викладеного матеріалу зробити сторінку з використанням всіх описаних тегів. Правда, поки наша сторінка не має гіперпосилань - дуже важливий елемент будь-якої веб-сторінки, але все це у нас ще попереду.

                          Схожі статті