Introduction: 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

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

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!

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

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

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

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

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!

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

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

author
Steven+Siko made it!(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...

author
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?

Capture.PNG
author
TECHSAVVY2828 made it!(author)2016-01-22

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

Capture.PNG
author
ChildOfYahweh made it!(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.

author
diytransistor made it!(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.

WebBrowser.PNG
author
andrewthe70sman made it!(author)2009-03-31

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

author
kettla58 made it!(author)2012-03-16

code for home button-
Webbrowser1.GoHome()

author
ReCreate made it!(author)2009-05-13

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

author
munchman made it!(author)2009-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.

author
ReCreate made it!(author)2009-05-13

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

author
munchman made it!(author)2009-05-14

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

author
ReCreate made it!(author)2009-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

author
raceking1 made it!(author)2009-02-01

how do i test it? thanks

author
munchman made it!(author)2009-02-02

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

author
ac1D made it!(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.

author
munchman made it!(author)2009-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.

author
munchman made it!(author)2009-01-13

Oh, there it is, in the related section

About This Instructable

59,242views

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: