Guia Rápida: HTML

Pues aqui de nuevo La Jefaza Friki!!! en su rincón de la sabiduria xD... bueno ni tanto... el rincón cultural es todo aquello que postearé con fines de que salga algo bueno de aqui xD... porque no todo es frikez (TT TT lamentablemente) y pues les paso a dejar una miniguia de inicio rápido a la codificación html :3 .

Para que sirve? pues si se les ocurre crear un blog, como a mi :E tengan las bases minimas de esta codificación a efectos de que puedan "tunear" su blog o pagina web con cositas kawaiosas para que les de más vida al blog, sitio web lo que sea!!.

Antes que nada... blogger tiene ya muchos "gadgets" que se pueden agregar de manera sencilla y que nos pueden ser muy útiles a la hora de editar nuestro blog, como ven los que tengo agregados mediante este sistema son: "Seguidores", "Mis datos personales", "Entradas Populares", "Archivo del Blog" y "enlaces" o algo asi... como ven, las herramientas de blogger ya son una ayudota xD... pues podemos hacer un menu sencillisimo, montar imagenes y enlazar a otras páginas con esta herramienta; pero sin dudar el gadget que es el más útil de todos es "html" que hace posible la insercción de codigo html de terceros y asi tunear el blog de manera más creativa y proporciona originalidad y estetica al blog.

Bueno ya fue mucho blah blah blah... lo que ustedes quieren es códificar xD...
Para empezar (es guia rápida) les daré los códigos que mas ocupo yo ;3 son fáciles y te sacan de un apuro para no tener que andar dependiendo de blogger siempre, en teoria pues porque para agregar todo lo que les explicaré abajo se necesita: Logearte y entrar a tu blog -> vas a "Diseño" -> "Añadir un garget" donde más gustes n_n -> y das clic en "HTML/Javascript" y ahi vas a colocar todos los códigos que encuentres y los de abajo que explico para que se visualizen :3 .

Primeramente tendremos el codigo para poner texto, imagenes y links que son los más buscados...


Texto
Este es super sencillo, igual puedes meterlo con con el gadget de blogger o puedes insertar el gadget html y solamente escribir como te de la gana xD... para que se visualize bien para cada salto de linea que queramos agregar se utiliza la etiqueta br y para tener el texto centrado se utiliza center.
A continuación veremos el código y el resultado:




Aqui vemos el ejemplo de texto


aqui de la etiqueta br para dar el salto


y por ultimo center para centrar ;3


Bien!! ahora ya sabemos escribir en html!!! lo que sigue en nuestra lista será poner una imagen n_n, blogger ya tiene un gadget al igual que para texto... de hecho ya tiene gadgets para poner texto, imagen y link... entonces para que hago todo esto?? pues para texto con link no hay queja, puedes usar el de blogger... pero para agregar una imagen que te direccione a otra página? me parece que blogger no tiene esa opción y ademas me es más sencillo hacerlo por medio de html xD...

Imagen
Ahora insertaremos una imagen asi sola, si como la mia de hasta el fondo que pretende ser una "firma" awe! xD , es de lo más sencillo ;3 y asi podremos customizar el blog más cómodamente y sin tener que pelear con blogger :3 .
Pues la mayoria de las imagenes que ven en mi blog, no son mias, per si editadas por mi ;3 ocupo adobbe photoshop y su complemento imageready para crear todas las pikas del blog... les recomiendo mucho esos programas para editar sus imagenes ya que quedan de calidad y es muy fácil su utilización, bien para esta parte decidi colocar la imagen de agradecimientos neko!!! Para agregar imagenes es parecidisimo al código bba-c-b no recuerdo xD pero ponia [img]url de la imagen[/img] ... aqui es parecido, tenemos que ocupar la etiqueta img más parámetros sobre anchura, altura y margen de la imagen y cerrar :3 aqui el ejemplo:





Vieron que fácil es :D ? pues se coloca la etiqueta img, border dejarlo en 0 o si le quieren dar uno pues le ponen en pixeles, height es la altura y width la anchura (aqui fijense cuanto mide su imagen dándole a "propiedades" en windows) y la última incognita es src ... que no es más que la dirección url de la imagen, para esto tienen que subir su imagen al hoster que más les guste, ya saben que yo siempre recomiendo tinypic ;3 . La imagen es .gif pero tinypic le cambió la terminación... pero sigue siendo gif, no hay de que preocuparse porque la imagen sigue como yo la puse -w- .
Se me olvidaba xD... si quieres centrada la imagen pues solo antepones la etiqueta center antes que la de imagen... y obviamente cierras al final de todas center, como en el ejemplo del texto.

Ya casi acabamos la lección de hoy XD... pues ahora pasaremos a poner lo que todos quieren *-*, como hacer "linkeable" un texto o imagen :3

Enlace con texto
Esto lo puedes hacer con un gadget de blogger, pero no esta demás saber como hacerlo "manualmente", este es el código más sencillo de todos xD... pues debes usar la etiqueta a href, lo puedes interpretar como "a hipervinculo referencia" para que no se te olvide como yo XD y luego ir en busca del código pérdido por ahi. Enseguida en ejemplo:



El Blog de Leslie Mishigan

Tan sencillo como eso :O , abrimos con la etiqueta, despues colocamos un igual y abrimos comillas, despues insertamos el link que queremos que siga/nos lleve, cierra comillas y cierras mayor que, despues de esto sigue el texto a visualizar, en este caso "El Blog de Leslie Mishigan" y cierras la etiqueta :D ... fin xD , igual, si quieres centrarlo tendras que agregar al inicio la etiqueta center y cerrando al final tambien.

Ahora viene lo divertido y el código que más he explotado xD! el de poner una imagen y que esta te lleve al vinculo ;3

Enlace con imagen
Es parecido a lo de arriba, de hecho se fusionan ambos códigos para dar uno nuevo, el de la imagen y el del hipervinculo... solo que aqui no escribiremos nada.
Para colocar esta imagen con vinculo, se hara uso de las etiquetas img y a href ... las que vimos más arriba, recuerden que primero se abre la etiqueta del vinculo y dentro de esta se abre la de imagen y dentro de la imagen los parametros de esta... debe seguir ese orden, pueden hacerlo revuelto pero es más ordenado de esta manera. Para el ejemplo en esta parte pondre otra pika que hice mediante photoshop n_n de nihon de hetalia *-*





Es sencillo no?? bueno no veo ya el caso explicar esta parte porque realmente fue una fusión de dos códigos xD... solo les puedo decir que no se olviden de cerrar ninguna etiqueta porque despues van a sufrir xD , cada cosa que se abre tiene que cerrarse :3 en fin! que se diviertan creando imagenes y dandoles un vinculo ;3

Extra.- Caja de código html
Pues aun no me voy xD... quieren saber como coloco el código en esas cajitas curiosas?? por ejemplo si quieres compartir un código pero por ser código no te deja ver la fuente?? para que otros puedan copiar el código sin tener que meterse a la fuente de la página, cuando vas a compartir tu banner por ejemplo tendrás que usar la etiqueta textarea para visualizar el código en código :D , esta etiqueta es muy simple de usar como la de texto... abres -> pones el código tal cual -> cierras :3 y yapi n_n!!! pueden ver el resultado en las cajas de código anteriores o en la side bar en sitios amigos donde comparto mis banners n_n, de todos modos aca el código:

[html]<textarea cols="49" rows="3" style="height: 69px; width: 453px;"><textarea>Aqui va el código tal cual aparece o lo escribiste para que los que lo copien puedan disfrutar del gadget</textarea></textarea>[/html]


Bueno ahora si es todo n_n!!! creo que es lo más básico, aun asi no se si vaya a sacar más guias xD... *modorra mode on* pues me despido ;3 espero ver sus creaciones kawaiosas!!! bye bye!!!!

2 comentarios:

  1. Ese Lápiz me recuerda a los que tenía una compañera mía de la secundaria, hasta podía brillar, era bastante raro, pero ella, no le importaba, hasta se sentía orgullosa de su lápiz. te Felicito de nuevo, te quedó muy bueno.

    Con Cariño: Yamato.

    ResponderEliminar
  2. :D gracias solo que no logro poner el maldito lapiz en todas las cajas de comentarios :/ ... kiza lo deba quitar xDD

    ResponderEliminar