7.1 Первый html-документ
Давайте создадим наш первый html-документ (html-файл). Обычно главный html-файл web-проекта называется index.html: предлагаю не отступать от этой славной традиции. Для этого правой кнопкой мышки кликаем по папке web-storm-10:
И вводим имя файла:
WebStorm создаст для вас файл и сразу откроет его:
Фактически это пустой html-документ. Все, что вы тут видите — это служебная информация. Все реальные данные будут расположены внутри тегов <body> и </body>. Что такое теги вы подробнее узнаете в следующей лекции.
Давайте напишем какое-нибудь интересное и пафосное сообщение внутри этих тегов. Например такое:
Путь в 10 тысяч миль начинается с одного шага!
Можете просто его скопировать и вставить на строчку 8 (внутри тегов <body>). Привыкайте вообще копировать тексты — так меньше ошибок и опечаток. Вот как сейчас выглядит мой документ:
Если мой вариант текста недостаточно мрачный и пафосный для вас, выберите свой — это ваш первый Web-проект все-таки. Предлагаю еще 3 варианта на выбор:
- "Темная сторона предлагает мне то, чего не может дать Светлая: истинную свободу."
- "Темная сторона — это путь к силе, которая не знает границ."
- "Я выбираю свою судьбу, и она во мраке."
7.2 Запуск первого проекта
Теперь давайте «запустим» наш проект и посмотрим, как браузер отобразит наш html-файл.
Для запуска проекта нужно нажать на зеленый треугольник в верхнем меню. Слева от него написано имя файла, который начнет выполняться:
Так же вы можете запустить ваш файл на выполнение нажав Shift+F10.
Давайте это сделаем, и вы увидите, как браузер отобразит ваш первый html-файл. Вот что отобразил мой:
Оранжевым цветом написан host в url — веб-сервер нашего проекта, который запустил WebStorm.
Зеленым цветом написан путь в url — путь к index.html от корня нашего проекта.
Синим цветом — служебная информация для WebStorm.
Красным цветом выделен текст, который браузер отобразил на основе нашего html-документа.
7.3 Работа над ошибками
А что будет, если мы допустили какую-нибудь ошибку? Как на это будет реагировать браузер и WebStorm?
Давайте сотрем первый символ на 9-й строке и посмотрим на реакцию WebStorm. Вот что у меня получилось:
Что мы тут видим:
- Слово на 9-й строчке перестало быть тегом, поэтому WebStorm теперь пишет его серым цветом, а не желтым.
- На 10-й строчке у вас закрывающий тег
<html>, хотя тег<body>должен встретиться до закрывающего тега<html>. Поэтому WebStorm видит тут ошибку. - Количество ошибок в документе отображается в правом верхнем углу – у нас одна.
- Место ошибки также дублируется на scrollbar — справа снизу. Очень удобно для длинных документов.
Теперь давайте запустим этот файл и посмотрим, как на ошибку прореагирует браузер:
Браузер тоже считает, что неполный тег <body> — это просто текст, поэтому и отображает его как обычный текст.
Отсутствие закрывающего тега <body> браузер тоже не смутило: проблемы с тегами бывают еще похлеще. В целом все довольно прилично получилось.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ