Are you tired of waiting for your home page to load when you open your web browser, or when you press the Home button? It might sound like a rather mundane thing to complain about, but consider for a moment the amount of times you might press the Home button throughout a single day. Then consider just how long you sit there and wait for the page to finish loading. This can be made even worse for users who live in countries where internet connection speeds are slow.tec
If this sounds familiar, then how about you just create your own home page and eliminate the problem? Well, that is exactly what OSRadar is going to show you how to do.
All that you need is some prior knowledge and understanding of HTML source code. Although this is not absolutely necessary, as you can simply copy/paste the source code we provide you in this tutorial, you will still benefit greatly from at least understanding the code and if you want to make more changes to it and customize it more.
You will of course also need a web browser and a source code editor, also known as a text editor. OSRadar recommends using Firefox web browser and for source code editing we’re using Sublime.
If you prefer to use a different source code editor, that is your choice and is completely up to you. Just use whatever coding environment you feel most comfortable in. I personally prefer to use Emacs or Vim, or a combination of the two. But for working on multiple source files, having tabs is a useful feature and Sublime fits this requirement just perfectly. Atom is also another good recommendation.
For our project we are using the DuckDuckGo search engine as our backend and will be embedding it into our pages. DuckDuckGo is a fast, secure and highly-customizable search engine.
The first source code sample we are going to provide will create a nice simple search engine landing page with DuckDuckGo:
The main elements in our code will immediately appear obvious to anyone familiar with reading simple HTML syntax. At times my coding is comprised of random existing code and the final results come as hacked versions of other projects. For home projects, this is ok. But don’t take on the bad habit of recycling code if you’re working in a commercial environment. I do apologize for how rough our formatting is, but we have tried to keep things as simple as possible despite our rough formatting.
Copy and paste the sample code into your code editor and save the file as search.html in a suitable location on your hard drive. Now open your web browser and set the home page to use the saved file as your home page. When you open your web browser or click on the Home button you will now be presented with your own custom created search engine landing page.
You might like our first design but find the you would prefer to have an image instead of simple text displayed. Well that’s ok, because we have done the work for you.
The second source code sample we are going to provide will create a nice simple search engine landing page, this time replacing the text elements and placing an image in its place. Obviously, we’re massive users and advocates for Linux, so we’ve chosen to use an image of “Tux”, the Linux mascot:
The major change in our code is the removal of text display elements. We have then uploaded our image to an image hosting website and then added the image source code which will display the image in place of the removed text.
Copy and paste the sample code into your code editor and save the file as search.html in a suitable location on your hard drive. Now set it as your home page in your web browser using the same process as before.
You might like the concept of our second design but find you would prefer to tap into your ‘hacker’ alter ego. Well guess what? We have made the design for you too.
The third source code sample we are going to provide is almost identical to the second sample. It will create a nice simple search engine landing page, this time replacing the Tux image with something which embraces the hacking culture better. We’ve simply uploaded a different image and changed the link in the source code. We have also changed the text that is displayed inside the search engine box, for something a little more fun:
Copy and paste the sample code into your code editor and save the file as search.html in a suitable location on your hard drive. Now set it as your home page in your web browser using the same process as before.
The pages we have created here are simple, by design. When whipping up the code, I deliberately kept things simple because the whole point of concept was to create something that was practical, yet remained fast loading for the user. By not having unnecessary page elements loading and keeping things extremely lean in code and the resulting presentation, that is what we have achieved.
All source code is licensed under the Creative Commons license model. Feel free to copy, share and redistribute the code in any form you like. The only thing we ask for is attribution and release any code you go on to share under Creative Commons license too.
We hope that you have found this tutorial useful.
