En el sitio de Icojoy se dieron la tarea de realizar 75 iconos en pixeles con tamaños 9x9px, 18x18px, 28x28px, en formato PNG, GIF y con colores rojo, naranja, azul, verde y gris.

Podrás encontrar iconos de: rss, alimentación, correo, búsqueda, lente, el voto, buena, mala favoritos, amor, añadir a los favoritos, casa, carro de compras, añadir al carrito de compras, comprar, la clave, inicio de sesión, bloqueo, seguridad, el usuario, cuenta, etiquetas, eliminar, basura, visita, sí, bien, volver a cargar, calendario, editar, lápiz, detener, atención, descarga, equipo, monitor, calculadora, móvil, teléfono inteligente, iPhone, teléfono, llamada, de llamada, un comentario, adentro, afuera , el hombre, las opciones, poner en marcha, por stand, bandera, marca, añadir, más, menos, abrir, cerrar, carpeta, las preferencias, mapa del sitio, información, documento, archivo, adjuntar, clip, derecha, abajo, izquierda, arriba, flechas, play, stop, pausa, siguiente, anterior, foward, hacia atrás, grabar, de bala, el sonido en, apagado, aumentar el volumen, descenso, la escritura, una nueva ventana, restaurar abajo, la escala, maximizar, minimizar, cerrar.


Descargar desde el sitio del autor

Estos iconos son libres de utilizar en cualquier tipo de proyecto de veces ilimitado.

CSS type set, es una herramienta practica que consiste en escribir un texto, darle un formato y mostrarte dependiendo del formato que le des, el código CSS en línea.

El formato que le podrás realizar al texto será:
Tipo de letra
Tamaño de texto
Color de texto y color de fondo del texto
Letra negrita
Letra cursiva
Letra subrayada
Letra tachada
Letra mayúscula
Letra mayúscula chica
Texto alineado hacia la izquierda
Texto alineado hacia el centro
Texto alineado hacia la derecha
Texto justificado
Distancia de las letras
Distancia de las palabras
Alineación del texto verticalmente

Ejemplo:

Como todos sabemos que para incluir una imagen se utiliza la etiqueta <img>.

Ejemplo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<img src="Url-de-tu-imagen" alt="Texto" border="3" align="left" height="200" width="400" hspace="5" vspace="5" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Pero si observaron el ejemplo, la etiqueta cuenta con distintos parámetros:
src="Url-de-tu-imagen" |indica la dirección de la imagen
alt="Texto" |muestra el texto al pasar el cursor sobre la imagen
border="2" |establece un borde alrededor de la imagen
align="left" |especifica la alineación de la imagen

Estos son algunos valores:
left: alinea la imagen hacia la izquierda con texto hacia la derecha
right: alinea la imagen hacia la derecha con texto hacia la izquierda
top: alinea texto hacia arriba respecto de la imagen
bottom: alinea texto hacia abajo respecto de la imagen
absbottom: alinea texto hacia abajo mas junto respecto de la imagen
middle: alinea texto en el medio de la imagen
absmiddle: alinea texto aun mas en el medio de la imagen

height="200" |establece la altura de la imagen
width="400" |establece la anchura de la imagen
hspace="5" |indica el espacio horizontal entre la imagen y el texto
vspace="5" |indica el espacio vertical entre la imagen y el texto

Ahora si le incluimos un poco de CSS:
Veremos una imagen con un borde distinto:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<img style="border:3px inset #FF8000;" src="Url-de-tu-imagen" alt="Texto" border="0" align="left" height="200" width="400" hspace="5" vspace="5" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Saliéndonos un poco de la <img> y colocando una imagen dentro de un <div>, veremos un texto sobre una imagen:

<div style="background-image:url(Url-de-tu-imagen); border:3px inset #FF8000; height:200px; width:400px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

O que tal una imagen sobre otra y otra:

<div style="background-image:url(Url-de-tu-imagen); border:3px inset #FF8000; height:200px; width:400px;"><div style="background-image:url(Url-de-tu-imagen); border:3px inset #FF8000; height:100px; width:300px; margin:45px;"><div style="background-image:url(Url-de-tu-imagen); border:3px inset #FF8000; height:50px; width:250px; margin:20px;"></div></div></div>

Y como vez, también le podrás poner enlaces como tu quieras:
<a href="Url-de-tu-sitio">Abrir aqui mismo</a>
<a href="Url-de-tu-sitio" target="_blank">Abrir en una ventana nueva</a>

La imagen que se muestra en los ejemplos pertenece a Sareni

Si necesitas un sitio incrustado dentro de otro en esta entrada sabrás como hacerlo.
Para ello es necesario utilizar la etiqueta <iframe>.
A continuación les muestro los siguientes ejemplos:

Sitio incrustado con bordes y barras de desplazamiento:


Para personalizarlo cambia el tamaño del borde, tipo y color, si lo quieres con barras de desplazamiento(yes/no), ancho y alto de la ventana y alineado hacia la izquierda(left) de un texto, dereche(right), hacia arriba(top), hacia abajo(bottom) o en medio(middle).

<iframe name="window" style="border:5px inset #009900;" src="Url-de-tu-sitio-o-imagen" scrolling="yes" width="300" height="100" align="left"></iframe>

---

Sitio incrustado sin bordes ni barras de desplazamiento:

---

Ahora ejemplos con imagenes:

---

---

HTML edit, es un importante editor HTML que te brinda la posibilidad de editar tus códigos HTML y ver los resultados en línea ya que mientras escribes tu código en el recuadro de arriba te va mostrando el resultado en la parte de abajo.

Para ver un ejemplo copia el siguiente código y pégalo en el editor:

<p style='background-color:#FFCC00; font-family:Stencil; font-size:20pt; color:#006633; border:10px groove #006633;'><marquee>Este es un ejemplo</marquee></p>

Otra herramienta que quise incluir en esta entrada y que nos puede ser útil a todos es Web taller, una tabla de colores.

Solo selecciona el color que desees y en la parte de abajo te generara el código hexadecimal.
Bueno espero y les sean útiles.
Referencias:
Ciudad blogger