Archive

Archive for the ‘html’ Category

indent HTML

July 13, 2016 Leave a comment

Problem
You have an ugly HTML and you want to indent it nicely. For instance you want to scrape something from it, but first it would be a good idea to indent the source.

Solution
The program “tidy” can do that. Create the following config file (tidy_config.txt):

indent: auto
indent-spaces: 2
quiet: yes
tidy-mark: no

Then call tidy the following way:

$ tidy -config tidy_config.txt ugly.html > nice.html

Tip from here.

Categories: html Tags: , ,

HTML Best Practices for Beginners

October 28, 2013 Leave a comment

If you need to create HTML pages from time to time, here are some great tips:

30 HTML Best Practices for Beginners

Categories: html Tags:

HTML: add syntax-highlight to textarea

September 26, 2013 1 comment

Problem
You have an HTML form with a textarea where you want to accept some source code. You want to turn this simple textarea into a fancy input area that adds syntax highlighting.

Solution
I tried EditArea, and it suits my needs. See this SO page for more alternatives.

EditArea

EditArea is a free javascript editor for source code. This editor is designed to edit souce code files in a textarea. The main goal is to allow text formatting, search and replace and real-time syntax highlight (for not too heavy text).” (source)

For Python support, I had to add these lines to the HTML source:

<script language="javascript" type="text/javascript" src="../editarea/edit_area/edit_area_full.js"></script>
<script language="javascript" type="text/javascript">
editAreaLoader.init({
    id : "src_input"       // textarea id
    ,syntax: "css"          // syntax to be uses for highgliting
    ,start_highlight: true      // to display with highlight mode on start-up
    ,syntax: "python"
    ,replace_tab_by_spaces: 4
});
</script>

Related work

  • Ace (it seems a more professional solution)

Image Gallery from a list of URLs

December 18, 2012 Leave a comment

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.

Categories: html, python Tags: , , ,

Put a text on the clipboard from your webpage

December 18, 2012 Leave a comment

Problem
From an HTML page you want to copy some text on the clipboard by pressing a button.

Example: on a page you present a list of URLs. Next to each URL there is a button. If the user clicks on the button, the corresponding URL is copied to his/her clipboard.

Solution
You can use clippy for this task. “Clippy is a very simple Flash widget that makes it possible to place arbitrary text onto the client’s clipboard.

Here is an HTML template that you must paste in your HTML: clippy.html. Simply replace “{{ clippy_text }}” and “{{ bgcolor }}” with the values you want.

Update (20130103)
GitHub also used clippy but recently they switched to ZeroClipboard. Here is their announcement.

Categories: html Tags: , ,

Youtube audio player

November 20, 2012 Leave a comment

At http://www.labnol.org/internet/youtube-audio-player/26740/ I found a nice trick to embed just a part of the Youtube Flash player, thus the player looks like an audio player. All you need is a little CSS trick:

Categories: firefox, google, html Tags: , , ,

Codecademy – learn HTML, CSS, Javascript

April 19, 2012 Leave a comment

Codecademy is the easiest way to learn how to code. It’s interactive, fun, and you can do it with your friends.

http://www.codecademy.com

Categories: html, javascript Tags: ,
Follow

Get every new post delivered to your Inbox.

Join 92 other followers