Select Page

Web page as Graphs with source code

Web page as Graphs with source code

Webpages as Graphs

With this funny applet, you can judge of the complexity of a web page by just generating it’s graph! my homepage is way too complex compare to google for example 🙂

What do the colors mean?
blue: for links (the A tag)
red: for tables (TABLE, TR and TD tags)
green: for the DIV tag
violet: for images (the IMG tag)
yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
orange: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
black: the HTML tag, the root node
gray: all other tags

Nothing new some of you will cry, as this java applet is available since 2007.. Yes but..

The main difference, is that I provide you the last bit of code to make it work on your own server, or locally in any php environment. The magic part that is difficult to get is the function that retrieve the html content of any page and pass it to the applet.

For this task and since on some web host, the php function furlopen() may be forbidden (I recommend you to disable it to reduce backdoor inclusion), i will present you a solution with CURL

PHP supports libcurl, a library created by Daniel Stenberg, that allows you to connect and communicate to many different types of servers with many different types of protocols. libcurl currently supports the http, https, ftp, gopher, telnet, dict, file, and ldap protocols. libcurl also supports HTTPS certificates, HTTP POST, HTTP PUT, FTP uploading (this can also be done with PHP’s ftp extension), HTTP form based upload, proxies, cookies, and user+password authentication. [PHP Manual] 

So I’ve create a small script call display.php that return the content of a webpage

Get Data From URL With Curl

<?php  $input = $_GET; $name = 'url'; $url = (isset($input[$name]) && 
$input[$name] !== null) ? $input[$name] :
""; $timeout = 10; $show_errors = true; if (function_exists('curl_init')) { return getDataFromUrlWithCurl($url, $timeout, $show_errors); } else { return getDataFromUrlWithFopen($url, $timeout); } /** * CURL function to retrieve data from a URL. */ function getDataFromUrlWithCurl($url, $timeout = 10, $show_errors = false) { $ch = curl_init(); $agent = "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)"; curl_setopt($ch, CURLOPT_USERAGENT, $agent); curl_setopt ($ch, CURLOPT_HEADER, 0); curl_setopt($ch,CURLOPT_URL,$url); curl_setopt($ch,CURLOPT_HTTPGET,1); curl_setopt($ch,CURLOPT_CRLF,1); curl_setopt($ch,CURLOPT_RETURNTRANSFER,1); // so it will return data into a
                                              //variable instead of printing out    curl_setopt($ch,CURLOPT_TIMEOUT,$timeout); // give it a time in seconds to reply    //curl_setopt($ch,CURLOPT_SSL_VERIFYPEER, false); //dont validate SSL cert    $result = curl_exec($ch);     if ($show_errors && curl_error($ch)) {       printf("Curl error %s: %s", curl_errno($ch), curl_error($ch));       print(' <a href="' . $url . '" target="_blank">This is the url</a><br>');    }    curl_close($ch);    print($result);


You can look at all CURL options there:

Get the source code to make your own site

Download now

All credits to original author

About the author (Sala) of this applet


Make a screenshot of your sitegraph below, put it on flickr and tag it websitesasgraphs.

About The Author

I worked with various Insurances companies across Switzerland on online applications handling billion premium volumes. I love to continuously spark my creativity in many different and challenging open-source projects fueled by my great passion for innovation and blockchain technology.In my technical role as a senior software engineer and Blockchain consultant, I help to define and implement innovative solutions in the scope of both blockchain and traditional products, solutions, and services. I can support the full spectrum of software development activities, starting from analyzing ideas and business cases and up to the production deployment of the solutions.I'm the Founder and CEO of Disruptr GmbH.