Tutorial: Making a Web Browser using C# 2008 Express Edition

[DrXThirst]

This tutorial is going to be created assuming that someone has never touched C# in their entire life. So, be ready for a long, total explanation.

_____________________________________________________________

Step 1: Your first step towards creating a Web Browser in C# is to start the program, obviously.


Step 2: Next, you'll see the "Start Page." The start page will either display Microsoft RSS news, or not, depending on your choices when installing Microsoft C# 2008 Express Edition. The first thing we'll do is press the "X" on the top right hand corner of the "Start Page."


Step 3: After exiting out of the "Start Page," you'll see many familiar buttons along the top of the program including "File," "Edit," etc. You will become more familiar with the functions of these buttons later on in your C# programming. For now, you only need to press "File," then "New Project."


Step 4: At this point, a window should pop up asking you what type of project that you would like to start working on. "Windows Forms Application" should alright be highlighted. If not, select it at this time.


Step 5: Next, you'll want to name your program. I simply named mine, "My Web Browser." You can name yours anything you'd like, then press "OK."


Step 6: Now that you've pressed "OK," the window should disappear and a form should show up in the middle with the title "Form1."


Step 7: As you'll see in the image above, at the location of the red square, there is an empty space. This empty space is where you'll be making edits to the "properties" of the items that you add to your application. Now, if there is already a box in that location, then skip step 8. If not, then proceed normally.

Step 8: While making your application, you'll be making many edits via the "Properties" window. So, to make this box appear, right click "Form1" under the "Solution Explorer" and select "Properties."


Step 9: This nifty little box allows you to edit many things like the text on a button or the image on one of your buttons. So, the first thing you need to do is click anywhere in the middle of your application, then scroll down to "Text" in the "Properties" box.


Step 10: Renaming the title of your application is extremely simple. Right now, you'll want to erase "Form1" in the textbox and type whatever your desire. I am going to type "My Web Browser." Afterward, press "Enter" on your keyboard. Watch the name change!


Step 11: Once your application is renamed, we'll start work on the actual application. On the left hand side of the screen, hover your mouse over the label named "Toolbox." From here, click the "Tack/Pin" at the top of the "Toolbox" title bar to make it stay in place. Minimize all sections but "Common Controls" and "Menus & Toolbars" by pressing the "-" beside each one.


Step 12: Explains itself.


Step 13: Upon completing the above steps, drag "Web Browser" from "Common Controls" to the middle of your form. This should take up the rest of the space in your form. Next, click the "Tack/Pin" at the top of the "Toolbox" title bar to make it "Auto-Hide" once again.


Step 14: Now that your web browser is on your form, we need buttons to make it work. So, click the "Menu Strip" and a "Type Here..." box should pop-up on the left-hand corner of the bar. Click within the text box, and type "Home." After typing "Home," press "Enter" on your keyboard. Another text box should pop-up to the right, and below the "Home" button. Click in the one to the right and type "Back." Do this again for "Forward" and "Refresh."


Step 15: You now have most of the basic controls for your web browser. The only two things left are your URL textbox and your "Go" button. Click your "Menu Strip" once more and this time, instead of typing in the textbox, you're going to highlight it, press the "Down" arrow that pops-up and select "textbox." When it's created, add another button named "Go."


Step 16: Coding time! Now time for the fun part. You get to learn the code that runs behind the scenes, and actually makes the program work. Your first task is to double-click the "Go" button that you created. You should be taken to the "Coding Part" of your application. You'll see something that looks a little something like this:


Step 17: Ok, now right where your typing cursor automatically went to is where you'll type the code for your "Go" button. Creating a web browser is quite simple, although I'll still explain the code that you're typing. Now, type this:

Code: Select all

webBrowser1.Navigate(toolStripTextBox1.Text);

Breaking down the code:

• "webBrowser1" - This says that you're talking to the Web Browser in your form and you're going to give it an action.
• ".Navigate" - Denotes that you're telling the Web Browser to navigate. However, you obviously need to tell it where to navigate.
• "(toolStripTextBox1.Text)" - If you had a textbox on your form, then it would be "TextBox1.Text." However, since ours is on a tool strip, then it says "ToolStripTextBox1.Text" stating that you're talking about the text box on the toolstrip. This part of this line of code says that you want the Web Browser in your form to navigate to the text that's in your text box on the toolstrip. Which is essentially your URL.
• ";" - After every complete line of code, you'll add a semi-colon. This says, "Ok, this line of code is done and now I'm moving on to the next one."

Like this:

Step 18: Your "Home" button is complete. We're going to test the functionality of your application now! At the top middle of "C# 2008 Express Edition," you'll see a little button that looks like a green "Play" button. Click it. After clicking it, your application should pop up. Now, in the textbox, type "http://www.google.com" and click your "Go" button. See if it goes!


If it worked, you'll see something like this:


Step 19: Click the "Form1.cs[Design]" tab above the code that you previously wrote. This will take you back to the "Design Part" of your program. Now, double click on the "Home" button on your program. Type this code:

Code: Select all

webBrowser1.GoHome();

Breaking Down the Code:

• "webBrowser1.Navigate" - Explained before. Read above.
• "GoHome();" - This is telling your Web Browser to go to it's homepage. Set by your Internet Explorer. This is a direct action towards the Web Browser, called a method. Since there's nothing else to call forth (EX: Textbox, Button, etc.) then you leave the parenthesis empty. Don't forget the semi-colon!

Step 20: Go back to the Design tab and double-click on the "Back" button. Type this code:

Code: Select all

webBrowser1.GoBack();

Breaking Down the Code:

• "webBrowser1.Navigate" - Explained before. Read above.
• "GoBack();" - This is a direct action towards the Web Browser, called a method. Since there's nothing else to call forth (EX: Textbox, Button, etc.) then you leave the parenthesis empty. Don't forget the semi-colon!

Step 21: Go back to the Design tab and double-click on the "Forward" button. Type this code:

Code: Select all

webBrowser1.GoForward();

Breaking Down the Code:

• "webBrowser1.Navigate" - Explained before. Read above.
• "GoForward();" - This is a direct action towards the Web Browser, called a method. Since there's nothing else to call forth (EX: Textbox, Button, etc.) then you leave the parenthesis empty. Don't forget the semi-colon!

Step 22: Go back to the Design tab and double-click on the "Refresh" button. Type this code:

Code: Select all

webBrowser1.Refresh();

Breaking Down the Code:

• "webBrowser1.Navigate" - Explained before. Read above.
• "Refresh();" - This is a direct action towards the Web Browser, called a method. Since there's nothing else to call forth (EX: Textbox, Button, etc.) then you leave the parenthesis empty. Don't forget the semi-colon!

Step 23:Now, we're going to set your application to go to your homepage when it starts up. So, go back to the "Design" tab of your application and double-click on title bar of your newly designed program. (Where the Minimize, Maximize, and X buttons are.) This will take you back to the coding section of your program, and you're going to need to copy and paste this code from earlier during your application creating process:

Code: Select all

webBrowser1.GoHome();

Step 24: Your simple, basic web browser application is now complete! Good job! However, we're still not done. You need to save it so that you can show it to other people! First, (IMPORTANT!) press the "Play" button and make sure that everything works. When you press the "Play" button, it updates all code to the executable file, so after you save it, make sure you press "Play" again before attempting to open your application.

Step 25: Press "File" then press "Save All." Once the pop-up has come up, press "OK" and your application has been designed, coded, and saved!


Step 26: To get to your actual .exe for sharing with people, go to the directory that you saved it in. If you do not remember that directory, then just go to "My Documents," then "Visual Studio 2008," then "Projects," and lastly find the folder for your project. After finding that folder, keep digging through until you find the .exe. Here's some help... mine was:

Code: Select all

C:\Users\Gages\Documents\Visual Studio 2008\Projects\My Web Browser\My Web Browser\bin\Debug\My Web Browser.exe

I attached a download to this post that includes the following:

• Folder with all images.
• Notepad .txt file with the BB code for this post.
• Source for my example application that I created while writing up this tutorial.

Attachment: [Download]

[FleetAdmiralBacon]

Trident embedded browser is fail. Get yourself a Gecko form control.