Створення сайту на html

Відео: Створення html сайту в блокноті

Здравствуйте, меня зовут Михайло Русаков!

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

Я схильний вважати, що у Вас є велике бажання навчитися створювати свої власні сайти. Зрозуміло, вкрай нерозумно намагатися пізнати цю науку з вивчення якого-небудь PHP. Набагато розумніше почати з чогось простіше, а саме з HTML (HyperText Markup Language - мова гіпертекстової розмітки) - базового мови, на якому і побудований будь-який, навіть найскладніший сайт. Без цієї мови не було б жодного сайту, більш того, HTML - найпростіший мова, яка може освоїти навіть школяр (яскравий приклад - Ваш покірний слуга, який почав освоювати HTML ще в школі, причому досить успішно).

Гаразд, вистачить балаканини - настав час приступати до створення нашого з Вами першого сайту, і цей процес буде називатися: "Створення сайту на HTML".

Перше, що потрібно вирішити: де створювати сайт? Зрозуміло, можна і в звичайному блокноті. Але це несерйозно (ми так в школі писали), тому давайте краще будемо використовувати що-небудь "важчі". Я зупинив свій вибір на редакторі "Notepad ++"- чудова програма, яка дозволяє писати код на величезній кількості мов, в тому плані, що це буде дуже і дуже зручно. Не буду сильно її хвалити, тому що для написання коду для серйозних мов (Java, C ++ і т. д.) вона не підходить - багато зайвих проблем виникне. Але для таких мов, як HTML, CSS, jаvascript і навіть PHP - дуже хороший вибір.

завантажити Notepad ++ можна, пройшовши за цим посиланням: https://notepad-plus.sourceforge.net/ru/site.htm

Встановлюємо і запускаємо редактор. Відразу зберігаємо сторінку під ім`ям index.html. Тепер пишемо (будь ласка, напишіть, а не скопіюйте!) У вікні редактора:

Написали? Зберегли? Вітаю Вас, Ви тільки що створили найпростішу (але дуже важливу !!!) HTML-сторінку!

Тепер можна нашу сторінку відкрити в браузері. Так і зробимо.

Що-небудь бачите? Я впевнений, що ні. І це не дивно, адже це сама елементарна сторінка. Ви можете подивитися исходник сторінки. Для цього в меню "вид"Виберіть пункт меню"Перегляд HTML коду","Вихідний код сторінки"Або щось в цьому дусі, в залежності від Вашого браузера. Також можна просто натиснути CTRL-U (В більшості браузерів відкриється вихідний код сторінки), і Ви побачите Ваш код.

А тепер давайте обговоримо, що ми тут написали.

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

, , - це закривають теги.

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

Поодинокі теги - це теги, які не вимагають наявність закриває тега.

Тепер що стосується призначення даних тегів.

тег означає початок HTML-документа.

тег означає початок заголовка HTML-документа. Сюди можуть входити, наприклад, заголовок сторінки, різні мета-теги. Про все про це Погоріла трохи нижче.

Тег означає кінець заголовка HTML-документа.

тег означає початок самого документа. Тобто все (текст, картинки, посилання і т. Д.), Що Ви бачите на сторінках в Інтернеті - все розташовано в тезі .

Тег означає кінець вмісту документа.

Тег означає кінець HTML-сторінки.

Відео: Як створити сайт самому Верстаємо шаблон на HTML CSS 02

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

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

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

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

Назва = "значення".

тег у нас визначає тип вмісту документа. Атрибут http-equiv і його значення Content-type визначає, що зараз буде описаний тип документа. Атрибут content і його значення text / html- charset = windows-1251 повідомляють браузеру, що даний документ є HTML-документом (text / html), І кодування цього документа кирилиця (windows-1251). Це був приклад мета-тегів. Я думаю, що поки з ними вистачить.

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

Теги
Тема 2-го рівня
Тема 3-го рівня
Тема 4-го рівня
Тема 5-го рівня

Збережіть сторінку і подивіться на неї в браузері.

Також можна додати трохи атрибутів і в тег . Давайте додамо атрибут text зі значенням green (Зелений). І атрибут bgcolor зі значенням yellow (Жовтий).

Таким чином, тег виглядає так:

Збережіть сторінку і подивіться на неї в браузері. Як бачите, фон сторінки став жовтим, а текст став зеленим.

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

Побачимося в наступній статті!

З повагою, Михайло Русаков.

P.S. Безкоштовний курс по HTML: https://srs.myrusakov.ru/html