Archive
Image Gallery from a list of URLs
Problem
I have several scrapers that extract images. How to visualize them? One way is to open each one in a new browser tab but it’s slow and who wants to have several hundreds of tabs? Is there a way to browse these images in one single tab?
Solution
A primitive solution would be to create an HTML page that lists all the images one below the other. But again, what if you have lots of images?
A better way is to organize the images in a gallery. There are tons of image gallery generators out there but most of them work with local images. I want to browse remote images when only their URLs are available. So I made my own image gallery generator that works with URLs. Available on github.
There is also a live demo, check it out.
The software is written in Python. See the README file for usage examples.
Codecademy – learn HTML, CSS, Javascript
“Codecademy is the easiest way to learn how to code. It’s interactive, fun, and you can do it with your friends.“
Free HTML5 templates
“Free HTML5 Templates are just what they sound like: free web templates using valid HTML5 code. Some of the templates may also include CSS3 code as well, but those will be clearly tagged, and because CSS3 is still evolving and is highly dependent upon browser vendor implementations, the CSS may not always validate.
The goal, of course, is to help you use the newest, most modern template code available. As the HTML 5 standard evolves, we’ll evolve with it.
We license our free templates under the Creative Commons Attribution (by) 3.0, which put simply, means you can distribute, remix, tweak, and build upon our work, even commercially, as long as you credit us for the original creation.” (source)
The template portfolio is here.
Commodore 64 screen with HTML and CSS
HTML automatic redirect
Problem
You have an HTML page and you want to redirect the user to a new page in X seconds, i.e. in X seconds you want to load another page.
Solution
<html> <head> <title>Title of the Page</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta HTTP-EQUIV="REFRESH" content="0; url=http://www.example.com"> <link rel="stylesheet" type="text/css" href="assets/style.css" /> </head> <body> ... </body> </html>
What we need here is line 5:
<meta HTTP-EQUIV="REFRESH" content="0; url=http://www.example.com">
Meaning: you will be redirected immediately (in 0 seconds) to http://www.example.com. You can change 0 to X, which means that redirection will be done in X seconds (where X is a positive integer).
Credits
I found this tip here.
