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> браузер теж не збентежила: проблеми з тегами бувають ще і гірші. Загалом все доволі пристойно вийшло.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ