Introduction: Custom Web Browser Start Page
Creating a custom web browser start page adds a lot of convenience to a web browsing session. This Instructable shows you how to install a custom start page that I made and goes over a few easy tweaks that you can make to personalize it further. This is a nice starting point for novice web developers to get their feet wet with some basic HTML. At the end I'll also list a bunch of cool HTML development stuff that I've found during my travels.
You will need:
A computer - I know you have one because you are reading this.
A web browser - Firefox, Chrome, Opera, Internet Explorer, etc. I used Chrome for this Instructible
Notepad ++ - An AWESOME bit of freeware that I can't praise highly enough. Even if you don't do this Instructable, you should go over to the Notepad++ homepage and get it. Right now.
The files - search.html, w3.css, search.zip (attached)
Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.
Step 1: Download and Unzip
First download the three files and unzip the 'search.zip' folder. This folder contains a few image files that allow the page to display correctly.
Now, move all three files into the Google > Chrome > Application folder. Really, you can put these files anywhere locally on your computer, but I like to keep them in the application folder so they are out of the way, but I don't forget where they are.
Step 2: Set Your Homepage
Now you need to direct your web browser to use the search.html file as your homepage. The idea is pretty simple. Rather than having the web browser reach out to some file out there on the internet, it looks at the search.html file and displays that page instead.
To do this, simply open your web browser and go to 'Settings'. Find the Homepage setting and change it to the location of the search.html file. In my case it was:
C:/Program Files (x86)/Google/Chrome/Application/search.html
Remember to include both the folder address (C:/Program Files (x86)/Google/Chrome/Application/) AND the file name (search.html).
If you like this page exactly as it is, then your done. However, if you would like to do some customization, then continue on.
Step 3: Setting Links
I put in a bunch of my favorite links for everyone to enjoy. If you want to change the links, open search.html using Notepad++.
If you're not familiar with HTML, then you will see a lot a weird text. Don't be intimidated. Scroll down to line 99. There will be a note (<!-- Start Links Table -->) To change a link, simply change the text (purple in the image) to your preferred link and change the description next to it (black in the image). For ease of use, I organized all the links into columns and rows. There is a note after each link as to its row and column location.
Remember to save.
Step 4: RSS Readers
Feed Wind is a great website that creates a html 'widget'. Simply follow the instructions to customize the widget and the site and will generate a bit of code (in lower right-hand corner of the page) which you copy and paste into the appropriate spot in search.html.
I placed the following notes in the file. Delete what's in there and paste your widget code in between.
!--Start Left RSS Widget--
!--End Left RSS Widget--
Remember to save.
Step 5: All the Other Stuff
I could go on and on about all the stuff I've found, but I'm a rookie myself and it would probably be more helpful if I just point you in the right direction. I'm sure you'll be able to find what you need..
http://www.w3schools.com/ - This is the site that supplied the w3.css file. It also explains the HTML and CSS commands. A great reference.
http://time.gov/widget/ - The 'Official US Time' widget.
http://www.timeanddate.com/ - World clock options
http://feed.mikle.com/ - The Feed Wind RSS reader site
http://www.rssdog.com/ - A very simple RSS reader
http://www.w3.org/ - The World Wide Web Consortium homepage. A daunting amount of info.
http://100widgets.com/ - The one stop shop for all of your circa 1995 web widgets