Hello, Crown Clients and Friends!
With just a little bit of effort, you could turn your “New Tab” page into something a little more helpful than just a Google-search bar and a few of your bookmarks. It takes just a little bit of HTML to be able to create a basic startpage, a landing screen for you and your organization with helpful links and widgets. In this post, we’ll take a look at the basics of helping your team navigate quickly to commonly needed resources without the need for a new web server (using an already existing shared drive on your network).
We’ll start with something very basic, and assume that if we want it to be more complex then we will add design elements to it later down the road. This is a good starter-level project if you haven’t done web design in a while (or ever), and if this brief tutorial inspires you to go beyond the most basic setup, Mozilla’s Developers Network Web Docs has an excellent course on everything you need to get a handle on web development.
Beyond the New Tab Page
When you open your web browser, you’re (by default) greeted with the New Tab page, which shows you a few links that your browser thinks are helpful. On my workstations, I typically open the browser with my keyboard and type a partial address or search immediately. I could just use bookmarks in the browser, but if I use multiple browsers then I’ll have to set each browser up, on each workstation; if the browser uses my browsing activity to generate bookmarks (like Firefox does), then it will be different on every device I use.
But there are more reasons than functionality to ditch the New Tab page. While Chrome is expecting you to place some bookmarks here, Edge (by default) has 1) a number of links to sites that I simply don’t use, and 2) a news feed. This model serves to distract me on news sites and social media, not to help me be productive. Firefox’s New Tab page relies on advertising and content promotion; it isn’t intrusive, and they need to do it to keep the lights on, but it still doesn’t help me get to the pages I need. It’s likely that browsers will continue to use New Tab pages to engage the user, instead of transparently direct us to what we’re trying to get to.
Creating a Basic HTML Startpage
Today I’ll be using VSCodium to write my .html file, which is an Integrated Development Environment (IDE) that works well for HTML and CSS. One could simply use Notepad, but VSCodium will help us with tooltips to explain tags, and lets us see the structure and elements with differentiated colors. We’ll start by saving our HTML file with the following structure (which I based on this snippet):
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Derek's Startpage</title> </head> <body> <header> <nav> <ul> <li><a href="https://google.com">Google</a></li> <li>Item 2</li> <li><a href="http://192.168.1.xxx">Jellyfin</li> </ul> </nav> </header> </body> </html>
I’ve put the links in the <header> section, in a <nav> element. You can play around with moving the links to different sections, which doesn’t exactly do much without writing some CSS to style the page. This is just a basic HTML file for holding the text elements of our startpage, and when I say basic, I mean basic…
This is the whole page once loaded in Chrome. I’m using the file to point to two links here, one external (Google) and one internal to my network (an instance of Jellyfin running on my home server).
If I wanted the page to look nicer, I could invest some time brushing up on more HTML and CSS. Eventually though, building this page up, I could fill it with exactly the widgets I need–maybe code snippets or a color picker for developers on your team–and fill it with useful links for my organization–like links to often needed documentation, on my servers or the internet.
Using the File System instead of a Server
What we’re going to do next is save the .html file to a network share. This way, devices on our network can simply use the file system to open it, saving us the need for using a full web server for hosting the startpage. This means that we don’t need to configure a server, worry about certificates and domains, etc., but anyone whose workstation connects to the share (and has read privileges for it) should be able to set the startpage to open when their browser starts.
If I save the file as “index.html” to a shared folder on my C drive called “www” (that is, C:/www/index.html), then all I need is for the browsers of any workstations to open //[servername]/C$/www/index.html on startup. Once it’s set up properly and working, a broken page (the browser saying the file cannot be found) indicates that you are not connected to the shared folder. It should also be noted that connecting to a share like this from, for instance, a Linux workstation will be a little trickier, since it would likely involve using Samba (smb://) for the path.
In Chrome, you can change the page opened on startup by opening Settings, going to “On Startup,” and changing it to “Open a specific page or sets of pages” and entering that network path to the .html file. In Edge, the setting is under “Start, home, and new tabs.” In Firefox, go to Settings, “Home,” and change “Homepage and new windows” to “Custom URLs…”
-Written by Derek Jeppsen on Behalf of Sean Goss and Crown Computers Team