Bueno a petición de algunos de mis compañeros bloggeros les dejo este post mini-tutorial html para hacer algunas cosillas interesantes a la hora de redactar un post, insertar imágenes, cambiar color, estilo y tamaño de letra, entre otras cosas.
He de comentar que este es un tutorial a partir de los comandos que usualmente yo uso, si existe alguna manera distinta de hacer las cosas, o bien, mejor o más rápida, entonces son más que bienvenidas en sus comentarios.
Primeramente les menciono que los comando en html siguen una regla muy simple: siempre hay un inicio y un final, es decir, hay un comando para iniciar el formato y cuando el texto que se está modificando termina, entonces se abre un comando de término del mismo. Para ello utilizaremos los signos "<" y ">", y dentro de ellos escribiremos el susodicho comando. Para efectos de poder ver la línea de comandos, sustituiremos los signos <> por los brackets [], respectivamente. Regularmente los comando de inicio van dentro de <>, y al final se escribe el mismo comando pero acompañado de un signo /, o sea:
Cambiar fuente, color, tamaño y atributos de letra usando html.
Primero que nada, si desean, cuando escriben un post, cambiar la fuente pueden hacerlo utilizando el comando
Nota: si su ordenador no tiene instalado el tipo de letra que seleccionan, entonces no lo podrán ver en su post, por ello hagan una prueba o busquen la fuente instalada en su PC antes de seleccionarla.
Para cambiar tamaño de letra usan el comando
Para cambiar el color de texto usaremos el comando:
Para agregarle atributos como cursiva o negrita que son los más comunes, usaremos los comandos [i] y [b], respectivamente. No olviden terminar el comando usando [/i] y [/b], respectivamente.
Existen diferentes tipos de edición de texto, pero creo, en general, que estos son los más comunes.
Insertar links sobre textos
Para esto usaremos un comando un poco más largo pero sencillo. Primero lo que debemos tener en cuenta son dos cosas: ¿Cuál es el sitio web al cual queremos accesar? y ¿Qué nombre queremos usar para que sirva como link?.
Una vez seleccionadas estas dos cosas, usamos el siguiente comando:
Y listo, con eso tendrán una liga a un sitio web usando una línea de texto, como podría ser el nombre de la página o bien una palabra clave. Ejemplo usando la línea de comandos anterior: visita el blog de Grado Reactivo
Ahora si queremos que a la hora de click en el link nos abra una pestaña nueva del navegador en vez de ir al sitio desde la misma pestaña, simplemente agregamos despues de [a href="website" el comando
Ahora hagamos la prueba usando este código para ir al sitio de Grado Reactivo. Y dando click en el siguiente link dará como resultado visitar dicho blog pero en una pestaña diferente:
GRADO REACTIVO
Nota: esta función también aplica cuando haces imágenes que sirven como ligas a sitios web.
Hacer links a sitios web usando imágenes
Para esto utilizaremos el siguiente comando:
Si tienen dudas sobre esto, pueden consultar el post que hice hace algunos días titulado como poner imagenes con liga hacia otro sitio
Insertar imágenes en posts
Este es un comando fácil, sólo hay que especificar la dirección de correo donde está la imagen, y podemos cambiar el tamaño de la misma. Para ello utilizaremos el comando siguiente:
[img src="dirección web donde está la imagen albergada" width="número" height="número"]
Entonces, y con esto termino, no olviden cambiar los bracktes [] por signos <>. Espero les sea de utilidad este pequeño manualito de html. En lo personal, pensé que era muy complejo, pero una vez que te aprendes los comandos básicos lo demás llega más fácil. Bueno, si tienen algunas preguntas extras o más comando que quisieran aprender, pueden revisar estas páginas:
--> Tizag.com
--> w3schools.com
Saludillos!!
He de comentar que este es un tutorial a partir de los comandos que usualmente yo uso, si existe alguna manera distinta de hacer las cosas, o bien, mejor o más rápida, entonces son más que bienvenidas en sus comentarios.
Primeramente les menciono que los comando en html siguen una regla muy simple: siempre hay un inicio y un final, es decir, hay un comando para iniciar el formato y cuando el texto que se está modificando termina, entonces se abre un comando de término del mismo. Para ello utilizaremos los signos "<" y ">", y dentro de ellos escribiremos el susodicho comando. Para efectos de poder ver la línea de comandos, sustituiremos los signos <> por los brackets [], respectivamente. Regularmente los comando de inicio van dentro de <>, y al final se escribe el mismo comando pero acompañado de un signo /, o sea:
[comando]letras, texto[/comando]
. No es necesario hacer espacios entre <> de las letras o demás comandos que estén fuera de ellos, no afecta esto al comando pues lo importante es lo que está dentro de los signos <>.Cambiar fuente, color, tamaño y atributos de letra usando html.
Primero que nada, si desean, cuando escriben un post, cambiar la fuente pueden hacerlo utilizando el comando
[font face="tipo de fuente"]
, luego escriben el texto que deseen que tenga esta característica y luego cierran el comando escribiendo [/font]. Recuerden cambiar los brackets por signos de <>.Nota: si su ordenador no tiene instalado el tipo de letra que seleccionan, entonces no lo podrán ver en su post, por ello hagan una prueba o busquen la fuente instalada en su PC antes de seleccionarla.
Para cambiar tamaño de letra usan el comando
[font size="tamaño de letra en número"] y terminan el comando usando [/font]
.Para cambiar el color de texto usaremos el comando:
[font color="código de color"]
y cerramos el comando usando [/font]
. Pueden buscar los códigos de colores en alguna pagina de html, o bien consultar esta que es mi favorita para estas cosas: Computerhope.com.Para agregarle atributos como cursiva o negrita que son los más comunes, usaremos los comandos [i] y [b], respectivamente. No olviden terminar el comando usando [/i] y [/b], respectivamente.
Existen diferentes tipos de edición de texto, pero creo, en general, que estos son los más comunes.
Insertar links sobre textos
Para esto usaremos un comando un poco más largo pero sencillo. Primero lo que debemos tener en cuenta son dos cosas: ¿Cuál es el sitio web al cual queremos accesar? y ¿Qué nombre queremos usar para que sirva como link?.
Una vez seleccionadas estas dos cosas, usamos el siguiente comando:
[a href="dirección del sitio al que queremos ir"]Texto que servirá de link[/a].
Y listo, con eso tendrán una liga a un sitio web usando una línea de texto, como podría ser el nombre de la página o bien una palabra clave. Ejemplo usando la línea de comandos anterior: visita el blog de Grado Reactivo
Ahora si queremos que a la hora de click en el link nos abra una pestaña nueva del navegador en vez de ir al sitio desde la misma pestaña, simplemente agregamos despues de [a href="website" el comando
target="_blank"
y cerramos la línea de comandos, entonces quedaría algo así: [a href="website" target="_blank"]link[/a]
Ahora hagamos la prueba usando este código para ir al sitio de Grado Reactivo. Y dando click en el siguiente link dará como resultado visitar dicho blog pero en una pestaña diferente:
Nota: esta función también aplica cuando haces imágenes que sirven como ligas a sitios web.
Hacer links a sitios web usando imágenes
Para esto utilizaremos el siguiente comando:
[p align="left"][a href="El sitio web que queremos poner como liga"][img alt="titulo alterno de la imagen" src="dirección donde esta la imagen albergada" title="lo que quieres que aparezca cuando posiciones el mouse sobre la imagen sin dar click"/][/a][/p]
Si tienen dudas sobre esto, pueden consultar el post que hice hace algunos días titulado como poner imagenes con liga hacia otro sitio
Insertar imágenes en posts
Este es un comando fácil, sólo hay que especificar la dirección de correo donde está la imagen, y podemos cambiar el tamaño de la misma. Para ello utilizaremos el comando siguiente:
Entonces, y con esto termino, no olviden cambiar los bracktes [] por signos <>. Espero les sea de utilidad este pequeño manualito de html. En lo personal, pensé que era muy complejo, pero una vez que te aprendes los comandos básicos lo demás llega más fácil. Bueno, si tienen algunas preguntas extras o más comando que quisieran aprender, pueden revisar estas páginas:
--> Tizag.com
--> w3schools.com
Saludillos!!
7 comentarios:
Si quieren que la imagen que usan de link los mande a la página que tiene sin salirse de la actual, sólo agreguen el comando target="_blank" justo después de la dirección que pusieron a la cual desean visitar, o sea:
[p align="left"][a href="El sitio web que queremos poner como liga" target="_blank"][img alt="titulo alterno de la imagen" src="dirección donde esta la imagen albergada" title="lo que quieres que aparezca cuando posiciones el mouse sobre la imagen sin dar click"/][/a][/p]
Algo util que puedes hacer es juntar todas las opciones del formato [font...] en un solo par de brakets...
[font size=4567, face="arial", color="black"] texto [/font]
Sobre el color, puedes utilizar los codigos rgbs o el nombre del color =P
otra forma para editar el texto (aunque creo que solmante para CSS, a mi no me ha funcionado para comentarios)es:
[p style="font-family:courier new; color:red; font-size:13px;"]texto[/p]
al parecer eliminaron el comando font de la version 4 de html, recomiendan que tratemos de evitar utilizarlo cuando escribamos codigo para una pagina =P
A por cierto este sitio http://www.w3schools.com/html/default.asp ofrece ayuda en cuanto al código html.... no esta taaan taaaan taaaaaaan facil pero esta bueno.. ademas de que tiene una interfaz donde puedes ir probando tu codigo html y ver como funciona, eso ayuda a practicar
Sí, muchas gracias por tu aporte. En especial es de juntar comandos como color, face y size para font. Creo que así se facilitan mucho las cosas. Y sí creo que los comandos anteriores sólo funcionan para CSS y no están disponibles su ejecución en comentarios, de hecho no puedo poner html tags tan complejas como insertar una imagen o comandos como [code] entre otros. Tan sólo poner negrita [b] o cursiva [i] y a lo mucho hacer links usando [a href=""].
P.D. Esa website la puse dentro de las referencias finales pues me parece hasta cierto punto amigable para inexpertos como yo, y como dices permite ejecutar comandos en cajas de práctica para ver cómo van saliendo las cosas.
Por cierto como es eso de que eliminaron el comando font de la version 4 de html? Eso es para la edición y construcción de páginas web no? Por creo que usan ahora comandos como tipo CSS verdad? Si no estoy correcto, perdona my ignorancia, pero sería bueno saberlo de buena fuente.
Saludillos!
Si solamente lo eliminaron para el código de páginas web.
Si lo de moda es el CSS, donde construyes un archivo que dara el estilo a tu página y tienes otro donde escribes el contenido, los links, los applets, imagenes. Solamente llamas a tu hoja de estilo (CSS, stands for Cascading Style Sheets, define el estilo de tu página y como se definen los elementos HTML).
órale, pues gracias por tu aportación, estaré pendiente. Ahora al menos sé que podré editar la estética de blog, puesto que antes lo hice de ojos cerrados jejeje, aunque no me quedó tan mal después de todo.
Saludillos!
Publicar un comentario