У даній статті ви дізнаєтеся, як використовувати HTML для написання свого першого веб-сайту! У статті будуть наведені наочні приклади для кращого розуміння. Відразу обмовимося, що стаття спочатку розрахована на тих, хто тільки починає вивчати HTML. Крім того, обіцяємо, що після прочитання статті ви гарантовано створите свій перший сайт.
HTML розшифровується як HyperText Markup Language, тобто мова для упорядкування тексту.
На відміну від програмних мов (JavaScript, PHP тощо), які використовують сценарії, щоб вчиняти дії на сайтах, мова впорядкування HTML використовує теги для розмітки вмісту веб-сайтів.
Починаємо вивчення HTML з нуля
Англійська мова складається з букв A, B, C і т. д., так і HTML-мова складається із своєрідних “букв”:
, , і т. д. Такі своєрідні “букви” мови HTML серед веб-майстрів називаються тегами.
Нижче наведено приклад HTML-тега.
Теги По краях цього тексту створюють підкреслення.
HTML-теги в парі зі стилями мови CSS швидко і якісно дозволяють робити інтернет-сайти.
Місце HTML серед інших мов
Як відомо, хороший веб-сайт будується як мінімум на 5 мовах.
Сучасний інтернет-сайт будується мовами:
HTML-мова є основним фундаментальним мовою, на якій ґрунтуються інші. Тому вивчення HTML має бути першим кроком для кожного, хто вивчає, як створювати сайти в Інтернеті.
Тег
За багаторічну історію з моменту створення HTML-мова зазнав зміни. На даний момент більшість інтернет-сайтів переходять на останню версію мови – HTML5. Але навіть у версії HTML5 основи мови залишилися незмінними.
Структуру HTML-сторінки можна порівняти з сендвічем. Як сендвіч має дві скибочки хліба, так і HTML-документ має відкриваючий і закриваючий теги HTML.
Ці теги, як і хліб у сендвічі, оточують все, що всередині.
…
Тег
Продовжуючи вивчення HTML, ви обов’язково повинні познайомитися з тегом . Безпосередньо всередині материнського тега знаходиться весь вміст сайту, в тому числі і тег . Даний тег обов’язковий і містить всі налаштування сторінки сайту, для якої написаний. Ці настройки не видно відвідувачам сайту, їх бачать тільки браузери Google Chrome, Mozilla Firefox і так далі).
Блок з налаштуваннями веб-сторінки містить всі “невидимі” елементи, які допомагають браузеру правильно відображати ваш сайт в Інтернеті.
…
Всі параметри, які можна налаштувати всередині тега , ми розглянемо, але трохи пізніше – коли прийде час.
Тег
Тег так само, як і тег , що знаходиться всередині тега .
Даний тег потрібен для того, щоб відображати на вашому сайті всю інформацію, яку ви хочете відображати.
Заголовки, абзаци, таблиці, зображення і посилання – це тільки мала частина тих елементів, які можуть міститися всередині тега .
Базова структура HTML-документа:
…
…
Ваш перший сайт
Тепер ви знаєте, що за допомогою HTML-мови можна створювати сайти і що для цього використовуються основні теги:
- . Окреслює межі веб-сторінки.
- . Містить налаштування відображення веб-сторінки в браузері.
- . Містить всі елементи веб-сторінок (картинки, відео, текст і так далі), які ви хочете показати відвідувачам сайту.
Про інших тегах, таких як , , , ми поговоримо зовсім скоро.
Було б здорово, якби читач не просто прочитував дану статтю, але і відразу ж біг відточувати отримані навички. Для відточування навичок у роботі з HTML вам потрібно створити свій перший сайт, який стане полігоном для застосування ваших нових здібностей.
Відомо, що мобільні оператори”МТС”, “МегаФон” і так далі) надають нам мобільні послуги. Точно так само послуги по створенню і управлінню сайтами нам надають хостинг-оператори. Для створення свого веб-сайту перейдіть на сайт будь-якого безкоштовного хостинг-оператора.
До перевіреним хостинг-операторам відносяться BEGET або REG, наприклад. Ви можете вибрати будь-який.
Після короткої реєстрації, через 24 години, автоматично буде створений ваш перший веб-сайт в Інтернеті, який буде видно всьому світу, і ви зможете приступити до практики!
Сучасна структура сайту
Тепер, коли у вас є свій сайт, ознайомтеся з тим, які теги містить у собі тег і як вони впорядковують інформацію на сайтах.
На картинці вище схематично представлена структура, яка прийшла з появою останньої версії HTML-мови – HTML5. Разом з HTML5 прийшли не просто нові теги, але і зміст побудови веб-сайтів. Всі теги, які ви бачите на картинці, містяться всередині основного тега . Дані теги допомагають вам “окреслити” структуру вашого сайту і надати їй сенс.
Наприклад, всередині тегів … зручно розмістити заголовок сайту (теги ) і опис сайту (теги
).
Всередині тегів зручно розмістити меню (посилання) сайту (тег ).
Всередині тегів зручно розмістити будь-великий блок інформації, пов’язаної з глузду. Це може бути декілька статей, кожна з яких “загорнута” в теги , або фотографії (тег ), або таблиці (теги
) і багато іншого.
Всередині тегів зручно розмістити будь-яку інформацію, придатну за значенням .
Всередині тегів прийнято розміщувати додаткову інформацію типу контактних даних, додаткових розділів сайту і так далі.
Отже, ви тепер трохи набили руку в тому, з чого складаються сучасні сайти. Давайте наведемо приклад, щоб сум’яття в голові змінилася на благоговіння від прозріння.
Отже, коли ви відкриєте на сайті вашого хостинг-оператора файловий менеджер і знайдете документ з назвою index.php, сміливо пишіть в ньому, як з чистого аркуша, структуру вашого сайту.
Мій перший сайт
Заголовок сторінки
Опис сторінки
Посилання №1 | Посилання №2 | Посилання №3
Заголовок якоїсь статті
Це блок, який містить будь-яку інформацію, а за допомогою CSS ви можете розфарбувати цей блок, та й весь сайт з усім його вмістом так, як вам буде завгодно.
© Усі права захищені
Пам’ятаєте, ми говорили, що вказуються різні налаштування для сайту? Ну так ось:
Звичайно, без підключення стилів CSS ваш сайт буде виглядати скупо (чорні букви на білому тлі), але для початку обов’язково спробуйте написати свою першу сторінку HTML.
Приймайте вітання! Ви тільки що створили свою першу веб-сторінку на власному веб-сайті! Далі буде цікавіше!
