Introduction: Creating a Program in Visual Basic: Web Browser

Picture of Creating a Program in Visual Basic: Web Browser

This Instructable explains the process of creating a simple web browser application in VB.NET

It is designed as a followup to my first VB.NET Instructable: Creating Your First Program In Visual Basic. It is recommended that you read through that instructable first, as this instructable assumes you have a basic knowledge of the Visual Basic Express Edition Interface, as covered in my other instructable.

Although Visual Basic 2005 Express Edition work fine for this instructable, I am using Visual Basic 2008 Express Edition, available from Microsoft

Step 1: Create the Project

Picture of Create the Project

Create a new Windows Forms Project, and call it Web Browser. Resize the form to your liking.

Step 2: Add the Controls, and Change Properties

Picture of Add the Controls, and Change Properties

From the toolbox, drag a TextBox, WebBrowser and A Button onto the form. Place them like they are in the picture. Then, edit the Anchor property of the TextBox and WebBrowser so that all of the boxes around the grey square (shown when you edit the anchor property) are selected, this will allow the controls to 'stretch' when the form is resized. Do the same for the Button, but only set it to "Top, Right".
Also change the Text property of Form1 to Web Browser, or something similar to change the title bar.

Step 3: Code!

Picture of Code!
Double click on Button1, and add the following code to the editor, after the "Private Sub" line and before the "End Sub" Line
WebBrowser1.Navigate(TextBox1.Text)
This code simply tells the program:
When someone clicks Button1, Get WebBrowser to Navigate to whatever is in TextBox1
That's It! You have a functioning web browser. Click the play button to test it out.

Step 4: More Stuff

Picture of More Stuff
Now, you didn't think I was just going to give you one line of code - did you?

Over the next few steps, we will implement the following:
  • Address bar that changes as the page changes
  • Back, forward and refresh buttons
  • Status bar.

Step 5: Adress Bar

Picture of Adress Bar
At the moment, all out address bar does is show the page that you type in, if you click on a link, the change is not reflected in the address bar. To fix this, we need to add some more code

Go back to the design view, click on "Form 1.vb (Design)" and then double click on the WebBrowser control. It will switch back to the code view, however there will be some more code there, notice that it says "WebBrowser1_DocumentCompleted", this is the code we want, so we don't need to make any changes here, but there is a blank line under that one, before the End Sub statement, and we want to add some code there. Type the following in there
TextBox1.Text = WebBrowser1.Url.ToString

This tells the program that once WebBrowser1_DocumentCompleted, we should change TextBox1.Text to the WebBrowser1.Url. The ToString is there because, by default, the URL property of the web browser is not the same data type (string), as needed by our text box. The ToString writes the URL to a string for the TextBox.

Step 6: Action Buttons

Picture of Action Buttons
Switch back to design view and drag 3 new buttons onto the form and position them. Change the Text property of each: Button2 = Back, Button3 = Forward and Button4 = Refresh. If you position them like mine, adjust the anchor property of Refresh to Top, Right

Double click on the Back button, and type the following code.
WebBrowser1.GoBack()
Back to design, double click Forward and type
WebBrowser1.GoForward()

Design view, and a double click to Refresh.
WebBrowser1.Refresh()

Test the browser, and try out the new features.

Step 7: Status Bar

Picture of Status Bar
Back in design view, add a label, change the Text to "Loading..." (without the quotes)
Now, go into code view by clicking on the Form1.vb tab. Find the WebBrowser1_DocumentCompleted entry and type below the code you placed there earlier
Label1.Text = "Done"

Now, click up where the code says DocumentCompleted. Move your mouse up to where the two Drop down boxes are. Select the second one (The one that says DocumentCompleted) and select Navigating. Then, some new code will appear - type
Label1.Text =  "Loading"
This just provides an indicator when the page is loading.

Also, you might want to set the anchor property of the label.

Step 8: Comlete!

Picture of Comlete!
There you go. You have a fully functioning web browser. Keep on customising it as you wish.

As in my first instructable. I have some homework for those who complete this instructable.
Implement the following:
  • A home function
  • Change the Refresh button to a Stop button when a page is loading.

I hope that these projects have showed you how easy it is to program!

Step 9: Solutions

Picture of Solutions
For those who completed my first VB instructable - I have the solutions for the homework I set at the end.

  • Change the background colour
This is simple - Change the BackColour property of Form1 to a different colour

  • Add some copyright info
A new label with the text property changed will do the trick

  • Make the form change size with the Image
Change AutoSize to True and AutoSizeMode to GrowAndShrink

Done!

Still to come: I will be creating some more VB.NET Instructables. Keep Coding!

Comments

Steven Siko (author)2016-09-08

How can I save my web browser to to real open up by itself and not to use debug to open it...

MoizD2 made it! (author)2016-03-26

I am connected to the internet and the page does not load. Could anyone help me out with this error?

TECHSAVVY2828 made it! (author)2016-01-22

PLEASE TELL ME HOW TO SAVE A HOMEPAGE. Otherwise its nice!

ChildOfYahweh (author)2015-10-22

This, so far, is the best web browser instructable I have found. The only issue with this and the others that I have found is that they are just versions of IE. Does anyone know of a way to do this independent of IE? Or direct me to another instructable. Other than that issue, this instructable is the best one of its kind.

diytransistor (author)2015-01-04

Thanks for posting this 'ible. I made a web browser from a different 'ible, but that one didn't show how to have the address bar change.

andrewthe70sman (author)2009-03-31

What code do you use to make a home button??

kettla58 (author)andrewthe70sman2012-03-16

code for home button-
Webbrowser1.GoHome()

ReCreate (author)andrewthe70sman2009-05-13

For the code of the HOME button Put "WebBrowser1.GoHome()" Without " Of course(without quotes,The " thingy)

munchman (author)andrewthe70sman2009-04-06

Not sure, I will look into it for you, the button could either take you to a defined 'homepage' set in the program's code or you can probably piggyback off the IE homepage, as this is really just an IE wrapper.

ReCreate (author)2009-05-13

Ah,Nice,Some steps where not explained properly,but,its good,I learned A bit on How VB works now.

munchman (author)ReCreate2009-05-14

Thanks for trying it out! If I may ask, what wasn't explained properly, I will attent to fix it. Thanks!

ReCreate (author)munchman2009-05-14

Its kind of hard to explain,Sometimes you didnot mention what some peices of code where for,the button,adress bar,or the thing itself,its just hard to explain

raceking1 (author)2009-02-01

how do i test it? thanks

munchman (author)raceking12009-02-02

To "test" the project, click the green play (debug) button on the toolbar. This compiles the program and runs it.

ac1D (author)2009-01-13

the instructables is nice, clean, with good picture. bravo! but I would like to point two thing: First, it's not really "your" browser, It use iexplorer engine to run. Second, I remember to have seen this in the past on instructables.

munchman (author)ac1D2009-01-13

first, I know - oops, I wasn't meaning to take credibility. Sorry if it came across the wrong way. All of this is standard code - I have no right to claim it. Where did I was using the word your simply to refer to the project. second, Damn! I have to remember to search for these things!!! Ahhhhhh. Aw well, thanks for pointing that out.

munchman (author)munchman2009-01-13

Oh, there it is, in the related section

About This Instructable

59,837views

18favorites

Bio: I like doing things. Whether it be blowing stuff up or creating a webpage.
More by munchman:A new show, and how to jump out of an exploding building without killing yourself.How to make a tropical smoothieElectronic Drum Kit
Add instructable to: