7.1 First HTML document
Let's create our first HTML document (HTML file). Typically, the main HTML file of a web project is called index.html; I suggest we stick with this awesome tradition. To do this, right-click on the web-storm-10 folder:
And enter the file name:
WebStorm will create the file for you and open it right away:
This is basically an empty HTML document. Everything you see here is just boilerplate info. All the real data will be put inside the <body> and </body> tags. You'll learn more about what tags are in the next lecture.
Let's write some interesting and fancy message inside these tags. For example, something like this:
The journey of a thousand miles begins with a single step!
You can just copy and paste it into line 8 (inside the <body> tags). Get used to copying text – fewer errors and typos this way. Here’s how my document looks now:
If my text isn’t mysterious and epic enough for you, pick your own—this is your first Web project after all. Here are 3 more options to choose from:
- "The dark side offers me what the light cannot: true freedom."
- "The dark side—is a path to power that knows no bounds."
- "I choose my destiny, and it lies in darkness."
7.2 Running the first project
Now let's "run" our project and see how the browser displays our HTML file.
To run the project, click the green triangle in the upper menu. To the left of it, you can see the name of the file that will start executing:
You can also run your file by pressing Shift+F10.
Let's do this, and you'll see how your browser displays your first HTML file. Here's what mine displayed:
The host in the URL is written in orange — it's our project's web server launched by WebStorm.
The path in the URL is written in green — it's the path to index.html from the root of our project.
The blue color is technical info for WebStorm.
The text highlighted in red is what the browser displayed based on our HTML document.
7.3 Error handling
What happens if we make some mistake? How will the browser and WebStorm react?
Let's erase the first character on line 9 and see WebStorm's reaction. Here's what I got:
What we see here:
- The word on line 9 stopped being a tag, so WebStorm now colors it gray instead of yellow.
- On line 10, you have a closing
</html>tag, but the<body>tag should appear before the closing</html>tag. So WebStorm sees an error here. - The number of errors in the document is displayed in the upper right corner – we have one.
- The error location is also duplicated on the scrollbar—bottom right. Very handy for long documents.
Now let's run this file and see how the browser reacts to the error:
The browser also considers the incomplete <body> tag to be just text, so it displays it as regular text.
The lack of a closing </body> tag didn’t faze the browser either: there can be even worse tag issues. Overall, it turned out pretty decent.
GO TO FULL VERSION