Tienes que recordar que html es un lenguaje de "decoracion".. lo que haces lo interpreta el navegador y no puedes hacer cosas complejas..
Para ello.. puedes recurrir a javascript.. y en particular te recomiendo un archivo .xml con todas las Apps instaladas.
Ejemplo del xml.
<?xml version="1.0" encoding="utf-8" ?>
<Aplicaciones>
<aplicacion>
<icono>blabla.png</icono>
<titulo>Mi Primera aplicacion</titulo>
</aplicacion>
<aplicacion>
<icono>omgwtf.png</icono>
<titulo>Mi Segunda aplicacion</titulo>
</aplicacion>
</Aplicaciones>
Luego, (yo lo voy a hacer con jQuery para mostrártelo..) con javascript lo procesas..
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
// Obtener el archivo .xml
$.ajax({
type: "GET",
url: "apps.xml",
dataType: "xml",
// Ejecutar ParsearXML
success: ParsearXML
});
});
function ParsearXML(xml){
// Por cada tag <aplicacion>
$(xml).find("aplicacion").each(function(){
// Encontrar tag <icono>
var icono = $(this).find('icono').text();
// Encontrar tag <titulo>
var titulo = $(this).find('titulo').text();
// Añadir a id="apps" una imagen con el src del icono y el alt del titulo.
$("#apps").append('<img src="'+ icono +'" alt="'+ titulo +'" />' + "<br />");
});
</script>
</head>
<body>
<div id="apps">
</div>
</body>
</html>
El resultado seria:
<img alt="Mi Primera aplicacion" src="blabla.png"><br> <img alt="Mi Segunda aplicacion" src="omgwtf.png"><br>
Saludos
Mostrar Mensajes
