Сааамое начало
Начнём с того, как создать первый сайт и написать в нём "Привет мир!", а также запустить его в браузере.
Самое банальное, что можно сделать, это создать текстовый документ в любом месте на Вашем компьютере, написать в нём "Привет мир!" и переименовать его расширение в .html, вместо стандартного .txt
Так у нас получиться документ с названием "Новый текстовый документ.html". После этого достаточно просто открыть этот файл двойным кликом, для того, чтобы увидеть в своём браузере ваш сайт с написанным до этого текстом.
В чём удобнее писать сайт
В целом, можно это делать и в обычном блокноте, но это как пробовать вилкой скушать суп - долго и не удобно. Так что для разработки сайтов и написания кода программ уже придумано много текстовых редакторов, называемых IDE. Ниже перечислю самые популярные и удобные со ссылками и своим ИМХО:
- PHP Storm - очень удобный для разработки WEB приложений. Платный, но есть пробник на 30 дней с полным функционалом. Сам пользуюсь.
- Visual Studio Code - тоже мощное решение, подойдёт. Бесплатный.
- Sublime Text - красиво, удобно, но не такое мощное как первые два. Бесплатный.
- Notepad++ - сойдёт для самых простых правок, не удобный. Бесплатный.
Дальше буду показывать скрины, работая в PHP Storm, т.к. сам в нём работаю. Можете тоже его скачать, а можете и не качать, как хотите.
Кстати, общепринятым названием самого первого файла, в веб-разработке принято считать "index". Все браузеры без исключения ищут именно этот файл и считают его входным и главным. Так что давайте переименуем наш файл в "index.html", положим его в какую-нибудь папку для удобства, например "Мой сайт" и продолжим разбираться дальше.
Структура HTML документа
Чтобы задать базовую структуру HTML документа, давайте откроем наш файл в IDE, сотрём всё, напишем восклицательный знак и нажмём кнопку TAB (предполагается, что вы работаете в одной из трёх первых программ, перечисленных в разделе выше). Появился вот такой код.
То, что заключено вот в такие скобки - <>, называется тегами. У многих тегов бывают закрывающие теги, такие как <html></html>. Все теги, имеющие в своём начале косую черту после угловой скобки - закрывающие - обозначающие конец элемента.
Итак, смотри что тут у нас написано:
<!doctype html> - Указывает тип документа. Эта информация только для браузера, говорящая ему, что это именно html документ.
<html> - открывающий тэг, обозначающий начало html документа. Сразу указан атрибут lang, обозначающий основной язык, на котором будет написан текст этого сайта. Браузер использует значение этого атрибута для правильного отображения некоторых символов. В самом конце кода можно увидеть закрывающий тег </html>.
<head> - тег, в котором пишется служебная информация, предназначенная для поисковых роботов и социальных сетей, браузера. Также имеет закрывающий тег </head>
<meta> - теги, с той самой служебной информацией
<title> - название страницы, которые мы видим во вкладке браузера
<body> - тег, внутри которого пишется уже визуальная часть нашего сайта, отображаемая браузером.
Прямо сейчас вы можете изменить текст в теге title, или добавить текст в тег body, обновить страницу в браузере и увидеть изменения. А в следующей статье разберём какие ещё бывают теги и зачем они нужны.