Computing and Information Technology Building a Web Browser

Build your own Web-browser Basically everyone likes to navigate the Internet using commercially produced web browsers such as the Internet Explorer produced by Microsoft or those open source browsers designed by the experts such FireFox, Opera and Chrome created by Google.

Build your own Web-browser However, wouldn’t it be cool to create your very own web browser and customise it to your own taste? We can do that in Visual Basic and it’s pretty easy to do. In this exercise, I will show you how to create a simple web browser and get it running in just a few minutes

Start a new Project Select the New Project option Name the project WebBrowser (and add your initials to the end), e.g. WebBrowserJA Click OK

Visual Basic Editor Properties Form Control Set the start-up properties Tool Box Drag Control onto the Form

Form Control: Visual Basic forms are rectangular shaped areas of the computer screen called windows on which we can add objects like buttons, text, pictures etc. These objects can have code attached and thus develop applications Locate the Property window, on the right side of the screen Change Name property to FrmWebBrowser Change the Text property to My Web Browser (Notice: That the Caption in the Blue banner at the top of the form, changes) Change the Window State property Maximized

Web Browser Control You will need to add an engine so that your web browser can connect to the Internet. Locate the Toolbox on the left side of the screen Drag a Web Browser control onto the form Select the Web Browser control to view its properties Change Name property WBWebPage Change Anchor property to Top, Bottom, Left, Right. Change URL property to www.google.com

Web Browser Control Resize the form and then make sure the web browser fills the form leaving space at the top for the next exercise

Save and Run your program We are now ready to run our program for the first time. Save Program From the File Menu select Save all If this is the first time you have saved your program you will be prompted to give a save location. Accept the default save options Select OK. You program is now safe Run Program Now Select the RUN button at the top of the screen. Your new browser should display the default web page Google. Well done!

Combo Box Control: At the top of the WebBrowser control we will place a combo box. This will be the address bar where the user can enter the URL Located on the Toolbox on the left side Drag a Combo Box control onto the form Move the Combo Box place it towards the top Select the Combo Box control to view it properties Change Name property cboURL

Label Control Labels allow us to place text on the screen. This label will contain the word URL: and will be placed to the left of the combo box. Locate the Toolbox on the left side Drag a Label control onto the form Move the Label, place it towards the left of the combo box Select the Label control to view it properties Change the Name property to LblURL Change the Text property to URL:

Button Control The Button Control is a button that we can attach code that allows our application to do something. Locate the Toolbox on the left side of the screen Drag a Button control onto the form Move the Button control, place it towards the right hand side of the combo box Select the Button control to view its properties Change the Button control properties Name to BtnGo Change thee Button control Text property to Go

Save and Run your program We are now ready to run our program: Save Program From the File Menu select Save all Run Program Now Select the RUN button at the top of the screen.

Tweaking With a little tweaking, your form should now look a little like this!

Programming or Coding As it stands our browser can only load one web-site, therefore; we need to program our application so that we can load any URL by simply entering a web-site address, and pressing a button. To achieve this we need to code (Program) our application.

BtnGo Control Code Button Control Code Double click the Go Button You should now see the code editor and the BtnGo sub routine Public Class FrmWebBrowser Private Sub BtnGo_Click(ByVal sender As System.Object, ByVal e As  End Sub End Class 3. Between the Private Sub and End Sub tags.  Type in the following code WebPage.Navigate(cboURL.Text) cboURL.Items.Add(cboURL.Text)

Save and Run your program We are now ready to run our program: Save Program From the File Menu select Save all Run Program Now Select the RUN button at the top of the screen. Now enter the desired website into the combo box at the top of the screen Click on the Go Button The website you entered should now appear. Well done again!

Make you Web Browser Haunted Now for a little fun. We can trick our friends and family by making our program appear haunted. The program will fade in and out like a ghost. Timer Control Locate the Toolbox, on the left hand side of the screen Drag a Timer control onto the form Select the Timer control to view its properties Change Timer property Name to TimGhost Change Timer property Intervals to 1 Change Timer property Enabled True Double click the Button TimGhost At the top of the page just below Public Class tags type: Public Class FrmWebBrowser Dim Transparency As Double

Make you Web Browser Haunted 9. Between the Private sub and End Sub tags type in the following code Private SubTimghost_Tick(ByVal sender As System.Object End Sub If Me.Opacity = 1 Then transparency = -0.001 If Me.Opacity = 0 Then transparency = +0.001 Me.Opacity = Me.Opacity + transparency

Save and Run your program We are now ready to run our program: Save Program From the File Menu select Save all Run Program Now Select the RUN button at the top of the screen. Watch what happens!