# 0. Погляд за монітор - що у сайтів всередині?

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

Я представляю вам серію лекцій для початківців - “Створення сайтів від А до Я” . Якщо ви хочете робити сайти, але абсолютно нічого не розумієте в програмуванні, ці статті для вас.

Ближче до середини навчання у вас буде повноцінний сайт в інтернеті.

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

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

Створюємо папку для майбутніх проектів і зрозуміло її називаємо. ( Краще англійською, - весь цикл статей ми будемо використовувати англійську мову в програмуванні ).

У мене це буде папка Projects на диску D . Далі я буду створювати папки ( каталоги ) з номером відповідної статті.Каталог Learn 1 . Зрозуміло, що ви можете називати вам заманеться, головне - не заплутатися.

# 0. погляд за монітор - що у сайтів всередині?

Тут створимо текстовий документ:

# 0. погляд за монітор - що у сайтів всередині?

Зверніть увагу на те, що розширення файлу ( .txt ) має бути доступне для зміни.

Перевірте це в Панелі управління - Параметри папок - вкладкаВид .

У мене це виглядає так ( Windows 7 ):

# 0. погляд за монітор - що у сайтів всередині?

Тут необхідно зняти прапор. ОК .

У вас може виглядати так:

# 0. погляд за монітор - що у сайтів всередині?

# 0. погляд за монітор - що у сайтів всередині?

Повертаємося до створеного документу і перейменовуємо його вindex.html ( прибираємо все старе вміст в імені, включаючи .txt )Контрольний аркуш - пріоритетна сторінка при завантаженні сайту і є представником будь-якого розділу сайту.

Припустимо, що у нас є кілька сторінок в одному каталозі ( Learn 1 ) і, відповідно, файли для них: index.html, page2.html . Якщо розташувати ці файли на сервері сайту, то при зверненні до каталогу / Learn 1 / почнеться пошук індексного файлу (index.html ) і в разі його відсутності буде показана помилка 404. Це загальні правила програмування сайту і ми на них вплинути не можемо.

Після перейменування текстового документа, він, ймовірно, змінить свій значок:

# 0. погляд за монітор - що у сайтів всередині?

Це говорить про те, що ви зробили все правильно.

Відкриємо цей файл в браузері:

# 0. погляд за монітор - що у сайтів всередині?

Не лякайтеся того, що бачите просто білий фон, - ми на вірному шляху, адже нашу сторінку ми просто ще нічим не наповнили.

Повернемося до нашого файлу і відредагуємо його за допомогою текстового редактора:

# 0. погляд за монітор - що у сайтів всередині?

Сьогодні ми звернемо увагу лише на найголовніше, на те, як відбувається відображення сторінки в інтернеті.

Практично на всіх сайтах візуальне рішення ( то, що ми бачимо на сторінці ) будується на мові HTML ( HyperText Markup Language ).

Файл index.html при запуску повідомляє своїм ім’ям браузеру про те, що він індексний ( головний ) і про те, що в ньому міститьсяhtml -розмітку.

Розмітка - тому що шматки коду html (теги) відповідають в основному тільки за візуальне розташування будь-якого об’єкта.

У будь-якій мові програмування присутні обов’язкові умови для роботи. Для того, щоб Гугл Хром або будь-який інший браузер зрозумів що ми від нього хочемо, необхідно вказувати ці умови.

Звучить досить незрозуміло, але на ділі все набагато простіше.Помістимо в наш файл такий код:

Тема вкладки

заголовок сторінки

Текст в абзаці. Текст для прикладу.

Збережемо документ через меню, або, як роблю я, використовуємо поєднання клавіш Ctrl + S .

# 0. погляд за монітор - що у сайтів всередині?

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

# 0. погляд за монітор - що у сайтів всередині?

Перший результат ми спостерігаємо миттєво. Непогано, правда?

Розберемо наш перший шматок коду:

- обов’язковий тег, який повідомляє браузеру про наявність html-розмітки в файлі.

Тема вкладки- необов’язковий тег. Тема вкладки браузера.

- обов’язковий тег. Тіло сторінки (вміст).

заголовок сторінки- необов’язковий тег. Тема верхнього рівня (найбільший розмір заголовка).

Текст в абзаці. Текст для прикладу.

- необов’язковий тег. Абзац, новий рядок.

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

В основному, ми завжди будемо працювати в тілі сторінок, тобто писати код всередині тега .

У нашому коді можна побачити структуру сторінки в цілому:

# 0. погляд за монітор - що у сайтів всередині?

Сподіваюся, що ви тепер уявляєте яким чином працюють сторінки в інтернеті і як вони влаштовані.

Давайте зробимо нашу сторінку більш привабливою. Для цього ми будемо використовувати готовий інструментарій мовиHTML . Змінимо код в нашому файлі наступним чином:

Тема вкладки



ЩЕ ПОЧИТАТИ