HTML 2 (para dummies principiantes)

Continuemos con lo que empezamos, cuya lectura es imprescindible para entender este post (o sea: la lectura del post anterior. No, no del anterior inmediato, sino la de este. No, este de hoy no, sino el que se ve clickeando ahí donde lo puse con otro colorcito. Eeeeso). Ahora, entendido aquél (o sea, este, pero no este mismo ¡Ese!), podemos pasar a conocer nuevos trucos. Y cómo lograrlos, claro. (¿Eh, cómo? ¿que no me haga el cancherito, que yo tampoco sé gran cosa? Ufa che, no me dejan disfrutar el momento)...

.

1) Cómo colorear un texto: Un comando sencillo si le vemos la lógica, aunque no nombra a los colores como quisiéramos, sino con un símbolo # seguido de media docena de dígitos invariables, que identifican cada tonalidad, como lo haría un código de barras o un número de patente. Por ejemplo, estos son los que corresponden a algunos colores:

.

#FFFFFF (blanco)

#000000 (negro)

#0000FF (azul)

#00FF00 (verde)

#FF0000 (rojo)
.

Etc. Para saber lo de otros en particular, puede ayudar una paleta como la que trae el Photoshop, o usar este enlace y hacerlo online. También pueden probar con otras letras y números, a ver qué queda. El código entonces, es el del ejemplo siguiente:

.

Tus <font color='#00FF00'>verdes</font> ojos.

Tus verdes ojos.

.
2) Cómo postear una foto que al clickearla se agrande: Esto parece muy obvio y hasta creerán que es automático, pero -a veces- el reacomodar imágenes en un post hace que algunas de ellas pierdan su propio link, y cuando queremos verlas en mayor tamaño, no podemos. Aunque en Blogger se agreguen con un botón al redactar, en la solapa de Edición de HTML veremos que su presencia está sostenida por un código. En líneas generales, una imagen se inserta así:
.

<img src="http://www.thegretest.com/img/uh.jpg"border=0>

.
Pero claro: si queremos que pueda verse a mayor tamaño, y no limitado por el breve espacio que le ofrece nuestro sitio, tendremos que recordar de la clase anterior cómo se lograban vínculos (allí vimos incluso cómo llevarlos a una ventana nueva). Puedo de -todos modos- ofrecer un ejemplo a quienes tienen una página "Blogspot": si allí incorporaron una imagen con el botón, verán en la modalidad HTML un largo texto similar al siguiente (los puntos suspensivos son míos, para abreviar):

.

<img id="BLOGGER_PHOTO_ID_5371 ... 94" style="DISPLAY: block; MARGIN: 0px auto 10px; WIDTH: 400px; CURSOR: hand; HEIGHT: 300px; TEXT-ALIGN: center" alt="" src="http://3.bp.blo ... LIA/s400/fotin.JPG" border="0" />

.

Allí dentro vemos la verdadera ruta a la foto, que incluye entre dos barras una letra "s" (de "size") seguida de un número (ej: s400). Si hacemos lo debido para que vincule, ya sabemos qué dirección copiarle, pero en esta nueva ubicación debemos convertir aquél número en 1600 (mayor tamaño), y seguirlo de -h para que se abra en el navegador y no como un archivo a "guardar" en la PC. Veamos cómo quedaría aquél ejemplo (en negrita, los agregados):

.
<a href="http://3.bp.blo ... LIA/s1600-h/fotin.JPG" target="_blank"> <img id="BLOGGER_PHOTO_ID_5371 ... 94" style="DISPLAY: block; MARGIN: 0px auto 10px; WIDTH: 400px; CURSOR: hand; HEIGHT: 300px; TEXT-ALIGN: center" alt="" src="http://3.bp.blo ... LIA/s400/fotin.JPG" border="0" /></a>

.
Si consideramos que se trata de un simple vínculo, queda claro que podemos incluso hacer que enlace a otro sitio, o aún a una cuenta de correo (para lo cual no pondremos una dirección url sino un e-mail, y en lugar de http tendrá que decir mailto). Ejemplo con un texto:

.

Mi <a href="mailto:jujuju@sarasafrasla.com">correo</a> trucho.
Mi correo trucho.
.

Pero volvamos a lo de la imagen, así les dejo otro plus: Allí donde se leía alt=""... podemos escribir cualquier texto -entre las comillas que tiene- para que se vea cuando el mouse -sin clickear- se pose sobre la foto.

3) Cómo terminar esta entrada: Así.