Second Lab


COSC 2P89 WebStorm Lab 1

For your lab you are to get acquainted with the basic operation of the application WebStorm. It is useful to gain familiarity with this program so that you will be able to more quickly develop web pages and web sites and ultimately be able to deploy them on sandcastle or a web server in general.

For this lab you should prepare a simple web page or two using WebStorm, preview in a few web browsers, and experiment with adding some additional html tags.

If you need assistance in any of the tasks consult with the student on duty at the help desk.

Here are the primary steps you should work with for the lab.

  1. Start up the WebStorm program and invoke the Create New Project item. Note that you can work with many types of projects in WebStorm and are encouraged to explore other project types as the term progresses, but for this introduction simple create an Empty Project and give it a name.
  2. If you click on the project triangle shown on the left it will expose the files included in the project. Since this is an empty project there are no files at present.
  3. Now to add a file to the project you should right click on the project in the left pane and invoke New File.
  4. At this stage you must provide a file name and since it is normal to use the file suffix .html or .htm for html files name it something like first.html.
  5. Now the window will display a text edit window to the right of the project pane and the cursor will reflect the position in the empty file.
  6. You may type any html code from various sources such as a sample from the text.
  7. Or we can retrieve the html code from a file you created on sandcastle for the first lab.
  8. To do so bring up a browser and enter the URL for your username, like or any html file you created for the first lab.
  9. For Chrome look at the View menu, the Developer item, and View Source.
  10. For Safari you will most probably have to take the Preferences item under the Safari menu and check the item Show Develop menu in the menu bar. Now under the Develop menu you can invoke Show Page Source.
  11. Finally for Firefox you can use the Tools menu, the Web Developer item, and then Page Source.
  12. There may be some differences for each of these browsers or any other browser you may use, such as Opera, depending on the version you have on your computer but there will be a way to show the page source.
  13. The actual way the page source is displayed will vary as well. Firefox and Chrome display the source in a new tab, whereas Safari will most probably open the source in the lower portion of the window.
  14. Safari has other web programming facilities available in that lower portion and these may be useful in the future, such as for CSS and Javascript.
  15. Now no matter the browser you are using you should select all of the code and copy it to the clipboard. Typically command/control A followed by command/control C will do the trick or you can use Edit menu items to carry out the same effect. Usually command for a Macintosh and control for a Windows PC. If you use Linux you will know what to do.
  16. With the clipboard now populated with the source code, switch to the WebStorm program and paste the source code into the previously created empy html file. WebStorm will highlight the html tags to assist you in recognizing the varioud elements.
  17. Note that while the cursor is positioned in the file editing area a set of mini-icons for the browsers will appear. Choose one of the icons and the browser will launch (if not already running) and the rendering of the html file will occur.
  18. Now of course you can readily experiment with various html tags and content in the file and preview the rendering results quickly in any of the browsers.
  19. Making a copy of a file is easy within WebStorm. Select a file in the project pane on the left, right click and invoke Copy, then right click and invoke Paste. This will give a chance to provide a file name for the copied file.
  20. If you have multiple files in the project double clicking on the file will bring it up in a tab in the editing section of the window. Then you can move between file by choosing the appropriate tab in which the file name appears.
  21. By using multiple files while experimenting you can retain examples you like while moving on to some other html features in another file.
  22. Now insert some code into your file or a copy of your file. Position the cursor after the <body> tag. Start with a < and then type h. You will see that WebStorm shows various autocomplete options based on the text typed so far. This allows you to find out about various html tag elements. Either type in 1 or choose h1 from the choices shown. Then type >. Again autocomplete automatically generates </h1> and keeps the cursor positioned between <h1> and </h1>. This is where you would provide the content associated with the h1 element. Type in the text Lab Example and invoke a browser mini-icon to observe the effect.
  23. You should read through the material in Chapter 10 of the text and try out some of the tags. Although the Chapter is far from complete and references some things that are not covered yet it provides a chance to experiment.
  24. The material there and additional material will be covered in the next class or two.
  25. The next lab will cover how to setup WebStorm to facilitate uploading the project and/or files within the project to your sandcastle web folder.

Computer Science Department | COSC 2P89 Home