NotePad++

1. Click on the Application Icon for Notepad++, which should look similar to the image below.

 

2.  When you open Notepad++ the opening page will look like the image below.  As in other programs, you will have a File bar at the top, and a set of additional and sometimes repetitive tools below the top bar.

The white area below that, works very similar to a Word Processing Application like Microsoft Word, Open Office, Text Edit, etc.

 

 

3.  What differentiates Notepad++ and Text Wrangler from these other Word Processing Applications?

Notepad++ and Text Wrangler are specifically designed for creating documents in html, css, other scripting languages, and other programming languages.

Therefore, the numbering on the left side of the page helps an individual know what line they are on.  The programs are sensitive to syntax, and will help identify if you are writing common coding vernacular incorrectly.

In addition, the interface will help by underlining and color coding structural terms, tags, and other scripting elements to better visualize the .html or .htm document you are creating.

 

4.  When you have completed writing/creating your web page, you are ready to save the document and view what it will look like on the web.  You will want to navigate to the top tool bar and click on “File”, then you will want to select “Save As” from the drop down menu.

Remember:  For our purposes, in order to view a document in an internet browser as a web page, the page should be saved as .html or .htm.

 

 

5.  After selecting “Save As”  a dialogue box should appear in the middle of the screen.  The dialogue box is essentially asking:

 1.  Where would you like to save the .html or .htm file?  (Desktop, Documents, Etc)

 2.  What would you like to call the document?  (This is at your discretion, but try to make it short).

3. What format should the document be saved in?  Be sure to click on the options and you will find a drop down menu, from the drop down menu you want to select “Hypertext Mark Up Language File ( html or htm).

 

6.  Now your icon should be on the Desktop or the location you selected in the dialogue box.  It will look like a little paper document with the top right folded down.  In the middle you will likely see a logo from a browser (this is decided by the selected default browser for your personal computer), or you will see a visualization of what the web page looks like.


7.  When you right click with your mouse or Control + Left Click with the mouse, you will receive the option to “Open With”, when selecting this arrow you will be given an option to open your web page in a Browser Window.   Your Web Page will now appear in the Browser Window, with the same visual that others will view your web page.

8.   All your hard work has paid off and  you should see your First Web Page in all its Glory!!

 

 

9.  Ok, Now lets go back to the First Web Site Tutorial.


All content © Copyright 2016 by Berkeley City College.

Designed by Justin Hoffman