Створюємо сторінку з HTML кодом.
На минулому уроці ви встановили програму Notepad ++. Тепер давайте створимо нашу першу веб-сторінку і вивчимо основні теги HTML. У кожному HTML-документа є обов'язкові атрибути, які повинні бути присутніми в кожному такому документі. Це так званий «каркас». Прописувати вручну ми його не будемо, а скопіюємо тут: karkas. Вставляємо в новий документ, який у нас створений в програмі Notepad ++ при її відкритті, і зараз розберемо каркас, основу якого складають html теги для тексту.
Зберігаємо його для початку. Для цього створіть окрему папку і назвіть її, наприклад, HTML. Тоді можна буде все файли зберігати в цю папку. Все буде в одному місці і так буде зручніше.
При збереженні необхідно вказати ім'я файлу. Запам'ятайте, що головна сторінка сайту завжди носить назву index.html. Це ім'я і пропишемо файлу. Тип файлу виберемо html.
Які бувають теги HTML
Далі починається найцікавіше, а саме html теги. Що таке тег? Теги HTML - це команди, які вказують браузеру, що потрібно робити. Якісь теги говорять браузеру, що потрібно відобразити абзац, інші, що потрібно зробити відступ або таблицю. За допомогою тегів ми спілкуємося з браузером на його мові і програмуємо його дії.
тег
Перший тег - це тег HTML. Зверніть увагу на те, як тег створюється. Спочатку йде відкриває дужка, потім назва тега і закриває дужка.
При цьому зверніть увагу також, що в самому низу також йде тег HTML, але вже зі слешем.
Тобто це вже закриття тега. І тут нам важливо розуміти, що є парниетегі. які підлягають закриттю, а є одинарні, які закривати не потрібно. Одинарні використовуються набагато рідше ніж парні.
В даному випадку у нас класичний приклад парного тега. В даному випадку тег HTML є просто контейнером, який містить всі інші HTML теги. Він особливо ніякої ролі не грає, тому тут треба запам'ятати, що будь-який html код повинен бути всередині цього контейнера.
тег і
Наступний у нас йде тег HEAD. Він також парний. І він містить два інших тега. Чому head? Якщо ми переведемо head з англійської. це буде голова. А нижче ви побачите тег body. Body - це тіло.
Будь-html документ містить як форматує теги, так і спеціальні. Що таке форматує теги? Форматує теги - це теги, що відповідають за абзаци, заголовки, картинки, посилання, і т.д. Вони по суті створюють видиму частину сторінки, все, що бачить користувач.
Але насправді для роботи сторінки потрібні ще й спеціальні теги, які наприклад говоритимуть браузеру, в якому кодуванні зроблена сторінка, який у неї заголовок повинен виводитися, які таблиці стилів повинні підключатися, які скрипти повинні підключатися.
Область HEAD якраз відповідає за всі допоміжні теги, область BODY необхідна для всіх форматуючих тегів. Швидше за все область HEAD була спеціально так названа, тому що організовує всю роботу. Дана область вказує браузеру, які скрипти будуть підключатися, яка кодування, яку назву у сторінки.
А ось в області BODY йде все форматування і вся та частина сторінки, яку видно користувачеві.
Давайте докладніше розглянемо контейнер HEAD.
тег
І почнемо ми з тега META. який відповідає за кодування.
Взагалі тег meta - багатогранний. Він може відповідати не тільки за кодування, як в даному випадку, але і за багато інших речей. Але тут даний тег говорить про кодування.
Є такий запис charset = utf-8. яка говорить браузеру про те, що даний документ створений в кодуванні utf-8. Для чого взагалі потрібна кодування? У нас в світі говорять і пишуть на різних мовах. І якщо ми тут створюємо сторінку на російській мові, то в Німеччині, наприклад, будуть вже створювати сторінку на німецькій мові. Для того, щоб браузер розумів мову, на якому створено сайт, була створена спеціальна кодування, яка отримала назву utf-8.
З того моменту, як вона увійшла в побут, вона стала стандартом. Таким чином, відпала необхідність вказувати кодування для конкретної мови. Тепер досить вказувати кодування utf-8 і у вас сайт буде відображатися нормально у всіх браузерах і при цьому спрощується робота ще і з базою даних.
Але тут є один підступ: щоб все правильно все працювало, щоб браузер правильно відображав сторінку, в цьому кодуванні повинен бути і сам документ. Тут notepad ++ дуже нам допоможе. У нього є такий пункт меню «Кодування» і в ньому, якщо у вас не обраний пункт «Кодувати в UTF-8 (без BOM)», то зійдіть нижче і клацніть по пункту «Перетворити в UTF-8 (без BOM)».
тег </h3>
<p>З кодуванням ми розібралися. Наступний службовий тег - це TITLE. Title в перекладі з англійської - це заголовок.</p>
<p><title>Документ без назви
Між відкриває і закриває тегом Title зазвичай вказується заголовок сторінки, який буде відображатися у вкладці браузера, коли ми заходимо на цю сторінку.
Давайте наш документ назвемо «Перша HTML сторінка», збережемо наш документ і подивимося, як це виглядає в браузері. Натискаємо пункт меню запуск і далі «Launch in Firefox» (браузер можете вибрати будь-який).
І ось нам браузер пише в заголовку вкладки «Перша HTML сторінка».
При цьому вміст сайту пусте, тому що в контейнері BODY у нас нічого немає.
На цьому даний урок закінчимо. Ми з вами розібрали, що таке тег-контейнер html. тег-контейнер body, тег-контейнер title, тег-контейнер head, який зберігає всі наші службові теги. А також розібрали тег title, який виводить заголовок, тег meta, який відповідає за кодування.
Удачі вам! До швидких зустрічей на сторінках блогу VyacheslavDanilov.ru