Google

lunes, 19 de octubre de 2009

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í.

12 comentarios:

Winter dijo...

Uppsss!!! Este post me lo guardo!

El Gaucho Santillán dijo...

Yo lo guardo, pero de balde, porque no lo voy a entender lo mismo.

El Mostro dijo...

Usté es un sarmiento, un paulo freire del blos. Muchas gracias por sus enseñanzas.

Pazcual dijo...

Yo guardar este post en la barrita de Chrome. Siempre ando peleando porque nunca encuentro pasos fáciles a seguir.

Saludos,

Paz

La candorosa dijo...

Usté es un master ¿se lo habían dicho?

Para cuándo el post "¿Cómo leer un blog? para dummies"


Saludazos agradecidos por el servicio, señor!

ElFlaco dijo...

Uuuuuuu ya me la complicaste!

Yoni Bigud dijo...

Un servicio a la comunidad.

Carugo dijo...

Que bueno que hayua alguien que siga avivando giles (o sea gente como yo...)
Muy bueno.

unServidor dijo...

Winter: Lleve nomás. Tengo copia.
;)

Gaucho: No se cierre, hombre. Sobre todo si no sabe dónde apretar para lograrlo.
:P

Mostro: Me mataste con lo del Freire del blos... ¡jaaaajaja!
XD

Pazcual: Me alegra ver que no ayudé sólo a mis hijas en sus "primeros pasos".
;P

Candorosa: El de "Cómo leer..." se lo debo para cuando haya aprendido...
XP

Flaco: ¡Noooo! Léalo con tiempo, despacito y mate en mano. Si tampoco funciona, pida a otro que se lo lea con pose de Carl Sagan.
;D

Yoni: Estoy para eso. Bah, cuando me da la gana.
XD

Carugo: Y eso que mi madre decía "Aviva giles, y te arrancarán los ojos"... (¿o era otra frase? Bueno, la idea es esa)
;)

Fla-q dijo...

Me había perdido la primera parte, pero ahora sí, un blog al mejor estilo George Lucas.
Gracias, Gurú!

Meryl dijo...

[b] muy buen post [/b]

unServidor dijo...

Fla-q: El presupuesto no me da para guerras de galaxias, así que me basta con que guste mi torneo de rayuela...
XD

Meryl: [g] muchas gracias [/g]
;)