JavaRush /Курсы /Модуль 1: Web Core /Первый web-проект

Первый web-проект

Модуль 1: Web Core
2 уровень , 6 лекция
Открыта

7.1 Первый html-документ

Давайте создадим наш первый html-документ (html-файл). Обычно главный html-файл web-проекта называется index.html: предлагаю не отступать от этой славной традиции. Для этого правой кнопкой мышки кликаем по папке web-storm-10:

Первый html-документ

И вводим имя файла:

Имя файла

WebStorm создаст для вас файл и сразу откроет его:

html-файл

Фактически это пустой html-документ. Все, что вы тут видите — это служебная информация. Все реальные данные будут расположены внутри тегов <body> и </body>. Что такое теги вы подробнее узнаете в следующей лекции.

Давайте напишем какое-нибудь интересное и пафосное сообщение внутри этих тегов. Например такое:

    
      Путь в 10 тысяч миль начинается с одного шага!
    
  

Можете просто его скопировать и вставить на строчку 8 (внутри тегов <body>). Привыкайте вообще копировать тексты — так меньше ошибок и опечаток. Вот как сейчас выглядит мой документ:

Путь в 10 тысяч миль начинается с одного шага!

Если мой вариант текста недостаточно мрачный и пафосный для вас, выберите свой — это ваш первый Web-проект все-таки. Предлагаю еще 3 варианта на выбор:

  • "Темная сторона предлагает мне то, чего не может дать Светлая: истинную свободу."
  • "Темная сторона — это путь к силе, которая не знает границ."
  • "Я выбираю свою судьбу, и она во мраке."
Я выбираю свою судьбу, и она во мраке

7.2 Запуск первого проекта

Теперь давайте «запустим» наш проект и посмотрим, как браузер отобразит наш html-файл.

Для запуска проекта нужно нажать на зеленый треугольник в верхнем меню. Слева от него написано имя файла, который начнет выполняться:

Интерфейс IDE

Так же вы можете запустить ваш файл на выполнение нажав Shift+F10.

Давайте это сделаем, и вы увидите, как браузер отобразит ваш первый html-файл. Вот что отобразил мой:

Отображение результата

Оранжевым цветом написан host в url — веб-сервер нашего проекта, который запустил WebStorm.

Зеленым цветом написан путь в url — путь к index.html от корня нашего проекта.

Синим цветом — служебная информация для WebStorm.

Красным цветом выделен текст, который браузер отобразил на основе нашего html-документа.

7.3 Работа над ошибками

А что будет, если мы допустили какую-нибудь ошибку? Как на это будет реагировать браузер и WebStorm?

Давайте сотрем первый символ на 9-й строке и посмотрим на реакцию WebStorm. Вот что у меня получилось:

Ошибка

Что мы тут видим:

  1. Слово на 9-й строчке перестало быть тегом, поэтому WebStorm теперь пишет его серым цветом, а не желтым.
  2. На 10-й строчке у вас закрывающий тег <html>, хотя тег <body> должен встретиться до закрывающего тега <html>. Поэтому WebStorm видит тут ошибку.
  3. Количество ошибок в документе отображается в правом верхнем углу – у нас одна.
  4. Место ошибки также дублируется на scrollbar — справа снизу. Очень удобно для длинных документов.

Теперь давайте запустим этот файл и посмотрим, как на ошибку прореагирует браузер:

Ошибка

Браузер тоже считает, что неполный тег <body> — это просто текст, поэтому и отображает его как обычный текст.

Отсутствие закрывающего тега <body> браузер тоже не смутило: проблемы с тегами бывают еще похлеще. В целом все довольно прилично получилось.

1
Задача
Модуль 1: Web Core, 2 уровень, 6 лекция
Недоступна
Создание HTML-документа
Создание HTML-документа
1
Задача
Модуль 1: Web Core, 2 уровень, 6 лекция
Недоступна
Исправление ошибки в HTML
Исправление ошибки в HTML
Комментарии (20)
ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ
12 февраля 2025
+
IvS63 Уровень 9
31 января 2025
+1 в копилку знаний😎
Dgirom Уровень 2
29 января 2025
Хочу стать архитектором IT
SerGo Уровень 11
27 января 2025
secret
Anonymous #3524828 Уровень 13
25 января 2025
Хочу поменять профессию на более высокооплачиваемую.
YevgeniyS S Уровень 17
22 января 2025
I want to learn JS to use it in QA automation. So please create a new course called Automation for QA using JS until I finish the current course )
Yliya Samuseva Уровень 25
19 января 2025
стать software egineer
Prometheus Уровень 7
18 января 2025
I would like to become a full stack developer!
Anonymous #3541998 Уровень 4
16 января 2025
here we go again
Kate Уровень 16
14 января 2025
web разработчиком