9 abr. 2014

Tutorial de ayuda con códigos html



Hoy les vengo con un par de tutoriales sencillitos(si que hacía tiempo que no hacía una entradita decente)
Pues bien, intentaré explicar un par de códigos html y cositas básicas realizando preguntas y respondiéndolas.

Empezemos~

 Haz click en más información para seguir leyendo.

 RESPECTO A TEXTO

¿Cómo cambiar la fuente de un código donde habrá texto?
Si es un código donde habrá texto, como por ejemplo un menú, que siempre tiene sus secciones:

Tutoriales  Afiliados  Ask   Reglas  

En el código te saldrá esta parte:

font-family: "#" <- donde está # te vendrá una fuente cualquiera, y si quieres cambiarla sólo tienes que poner el nombre de la fuente que desees. (Lo que está en negrita es el código)


¿Cómo ponerle sombra al texto?
Al igual que antes, pondré de ejemplo un menú.
Para agregarle sombra sólo peguen este código:

text-shadow: 1px 1px 1px #F3BABA <- lo que está en rosa es el color de sombra de la letra.


  ¿Cómo saber los códigos de los colores para cambiar el color del texto?
Como ejemplo está la pregunta que he hecho justo arriba.Aquí dejo una página de los códigos de colores donde sólo tendrán que pinchar el color que quieran y debajo os saldrá el color con su código. Lo copiáis y lo pegáis en donde el #.


¿Cómo cambiar el tamaño de la letra?
Esto es muy fácil, os saldrá:
font-size: 10px <- sólo cambia el número y pon uno mayor para que se más grande o uno más pequeño para que sea más pequeño, lógicamente.


¿Cómo hacer que el texto se mueva?
Para que el texto se mueva, como por ejemplo en un gadget, o en una entrada, lo que sea, simplemente tenemos que introducir el texto en este código:
<br /><marquee>#</marquee><br /> <- donde está # escribes lo que quieras. (También se pueden poner imágenes).


RESPECTO A IMÁGENES

¿Cómo poner una imagen al lado de un texto?
Cuando escribas el texto, simplemente añade el código de imagen con el url de la imagen, así:

Bienvenidos!<img src="url de la imagen" />  <- si queréis agregar otra delante del texto lo mismo, copiar ese código. Ese es el código para las imágenes, pero esto de seguro ya lo sabíais.
Esto también lo puedes hacer en el título de tu entrada.


¿Cómo poner una imagen a medida?
A veces cuando ponemos una imagen en un gadget o en la cabecera, queda muy grande y sobresale, con lo cual queda muy feo. Entonces tendréis que ajustar la medida en el código de imagen, así:

<img src="url de tu imagen" width="240" height="180" " /> 

Sólo le tenéis que añadir lo que está en negrita width (ancho) y height (alto) 
Las medidas las vais probando hasta que quede a la medida que quieran (cambiando los números).


¿Cómo enlazar una página con una imagen?
Con esto me refiero a que hagas click en tal imagen, y te lleve al sitio que deseas.
Ya hice un tuto de esto hace tiempo, aquí os lo dejo:


 RESPECTO A GADGETS

¿Cómo poner título a un gadget?
No sólo está la manera de añadir el título en el editor del gadget, también lo podemos hacer de otra forma para además, añadir un gif si queremos.[El título de un gadget se llama sidebar]
Pues antes de pegar el código de nuestro gadget, añadimos el código del título:
<h2 class="sidebar-title">
<div class="title">Textito</div>
</h2>
Lo copiamos así y escribimos el título donde pone textito. Si queremos añadir una imagen hacemos lo que expliqué antes en la primera pregunta de respecto a imágenes.


¿Cómo poner los gadgets en recuadros?
Esto no es de códigos, sino ya de plantilla. La plantilla que estoy usando es la Fantástica S.A que ya viene así. Después ya es sólo decorar.


RESPECTO A ENLACES

¿Cómo crear un enlace?
El código de enlaces es este:
<a href="aquí pones el url">aquí el nombre que aparecerá</a>

A partir de ese código puedes crear un menú, o una lista de enlaces añadiendo uno debajo del otro.


RESPECTO A ENTRADAS

¿Cómo cortar la entrada para que salga el enlace de ''más información...''?
En la barra de herramientas de arriba cuando estamos creando una entrada nueva, vemos los últimos iconos. Al lado de enlace, vemos el de añadir imágenes, añadir video y salto de línea. Pues nos situamos en la parte de entrada donde queramos cortar y le damos a ese botón.
Ahora la entrada no quedará tan grande y el que la quiera leer sólo le tiene que dar a ''Más información...''


¿Cómo añadir blockquote?
Cuando queremos resaltar algo en la entrada podemos meterlo dentro de un recuadro. Así como el text area, pero más adecuado. En la barra de herramientas en el tercer botón empezando por el final que tiene esta forma: `` (más o menos es así, son unas comillas)
Seleccionamos el texto que queramos meter en la cajita y le damos a cita, que es ese botón.


Bueno pues esto es lo más básico de códigos html, si queréis que os explique algo que no he añadido no dudéis en comentarlo en esta entrada o en la C-Box~

*Recuerda, si coges esta entrada da mis créditos, está totalmente redactado por mi~*


Espero que les haya servido de ayuda, muchas gracias por pasarse por mi blog

No hay comentarios:

Publicar un comentario

Gracias por dejar tu saludito ·ω· Si tienes algún error o necesitas ayuda con un tutorial, dale a ''haz click aquí'' en la cabecera y mándame un e-mail diciéndome lo que necesitas y si sólo tienes dudas de algo te contestaré en tu blog para que puedas verlo♥♥
––––•(-•RECUERDA: Si quieres afiliar y/o que visite tu blog, pídemelo en ''Afiliados'' en el menú de la cabecera, o en la C-Box (sólo en esos dos sitios, o sino no aceptaré)`•.¸¸.•´´¯`••._.•